Wer hat an der Uhr gedreht?

A presentation at SELFHTML-Treffen Unconference in April 2026 in 06 Halle (Saale), Germany by Gunnar Bittersmann

Slide 1

Slide 1

WER HAT AN DER UHR GEDREHT?

FOTO: NOOR YOUNIS / UNSPLASH

Slide 2

Slide 2

x y r y φ ψ r x sin φ = y ⁄ r y = r sin φ x = r sin ψ cos φ = x ⁄ r x = r cos φ y = −r cos ψ tan φ = y ⁄ x

Slide 3

Slide 3

Screenshot Codepen: CSS clock

Slide 4

Slide 4

Photo by Black Chitsulo on Unsplash Photo by Jiyeon Park on Unsplash

Slide 5

Slide 5

Screenshot Codepen: CSS clock, Arabis numerals, rotated

Slide 6

Slide 6

Kirche in Glienicke/Nordbahn

Photo by Gunnar Bittersmann

Slide 7

Slide 7

Uhr im Billigladen

Foto: Gunnar Bittersmann

Slide 8

Slide 8

Big Ben

Photo by Stefan K on Unsplash

Slide 9

Slide 9

Rotes Rathaus Berlin

Foto: Fionn Große auf Unsplash

Slide 10

Slide 10

Rotes Rathaus Berlin

Foto: Fionn Große auf Unsplash

Slide 11

Slide 11

Uhr im Kölner Dom

Foto: Thomas Bormans on Unsplash

Slide 12

Slide 12

Photo by Peter Mitchell on Unsplash

Slide 13

Slide 13

größte Kuckucksuhr der Welt in Triberg

Foto: Gunnar Bittersmann

Slide 14

Slide 14

Screenshot Codepen: CSS clock, Roman numerals

Slide 15

Slide 15

Screenshot Codepen: CSS clock im Firefox

Slide 16

Slide 16

Progressive enhancement is an escalator that becomes stairs. escalator that becomes stairs. Graceful graceful degradation is building a lift, then having to add stairs. — Andrew Wight

Fotos: Gunnar Bittersmann

Slide 17

Slide 17

I like an escalator because an escalator can never break, it can only become stairs. You would never see an ‘Escalator temporarily out of order’ sign, just an ‘Escalator temporarily stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.’ — Mitch Hedberg

Fotos: Gunnar Bittersmann

Slide 18

Slide 18

Es ist ein verbreiteter Irrglaube, dass progressive enhancement heißt, seine Zeit in alte Browser zu stecken – das Gegenteil ist der Fall. Die Grundfunktionalität zu erstellen dauert nicht allzu lange. Wenn man das getan hat, kann man seine Zeit damit verbringen, mit den neusten und großartigsten Browsertechnologien zu experimentieren; sicher in dem Wissen, dass selbst wenn diese noch nicht weitgehend unterstützt werden, man den Fallback ja bereits hat. — Jeremy Keith

Poster: Jessica Lazarus

Slide 19

Slide 19

Der Schlüssel zu diesem Ansatz der Webentwicklung ist die Erkenntnis, dass es nicht ein einziges Nutzerinterface gibt – es kann viele leicht verschiedene Interfaces geben, abhängig von den Eigenschaften und Fähigkeiten des jeweiligen Browsers und Gerätes zum jeweiligen Zeitpunkt. Und das ist auch völlig in Ordnung. Webseiten müssen nicht in jedem Browser gleich aussehen. — Jeremy Keith

Poster: Jessica Lazarus

Slide 20

Slide 20

Wenn man das so akzeptiert, ist das ein wahrhaft befreiender Gedanke. Anstatt seine Zeit mit dem Versuch zu verbringen, Webseiten in den verschiedensten Browsern gleich aussehen zu lassen, kann man seine Zeit darin investieren sicherzustellen, dass die Kernfunktion dessen, was man baut, überall funktioniert, und gleichzeitig in fähigeren Browsern die bestmögliche Nutzungserfahrung zu bieten. — Jeremy Keith

Poster: Jessica Lazarus

Slide 21

Slide 21

Kreisgleichung x² + y² = r²

Slide 22

Slide 22

Kreisgleichung (x/r)² + (y/r)² = 1

Slide 23

Slide 23

Ellipsengleichung (x/a)² + (y/b)² = 1

Slide 24

Slide 24

Superellipsengleichung |x/a|ⁿ + |y/b|ⁿ = 1

Graphic by Ag2gaeh, CC BY-SA 4.0

Slide 25

Slide 25

| k | n | keyword | — | - | - | –∞ | 0 | notch | –1 | ½ | scoop | 0 | 1 | bevel | 1 | 2 | round | 2 | 4 | squircle | ∞ | ∞ | square

Slide 26

Slide 26

Wikipedia: superlellipse

Slide 27

Slide 27

Screenshot Codepen: CSS clock, superlellipse

Slide 28

Slide 28

Screenshot Codepen: CSS clock, square

Slide 29

Slide 29

Screenshot Codepen: CSS clock, square, Rundungsfehler in Chrome

Slide 30

Slide 30

WER HAT AN DER UHR GEDREHT?

FOTO: NOOR YOUNIS / UNSPLASH