Wir schauen uns in dieser Revision eine Reihe neuer und neuerdings breit verfügbarer Browser-Features an. Diesmal geht es fast ausschließlich um HTML und CSS: von 3D-Modellen und 360-Grad-Bildern über bessere Responsive Images bis zu neuen Möglichkeiten für Farben, Layout und Typografie.

Dabei landen wir zwischendurch bei VR-Brillen, progressiven Bildvorschauen, teurem Arbeitsspeicher und der Frage, warum moderne KI-Webseiten eigentlich alle gleich aussehen.

Shownotes

[00:01:49] <model> und 3D im Browser [https://developer.apple.com/quick-look-gallery/] Safari bekommt mit <model> ein HTML-Element zum nativen Einbetten von 3D-Modellen. Ähnlich wie bei <picture> oder <video> lassen sich unterschiedliche Quellen und ein statisches Bild als Fallback angeben. Wir überlegen, wo das jenseits von Apples VR- und AR-Welt praktisch werden könnte, etwa bei Produktansichten in Shops, Modellbibliotheken oder einfachen 3D-Previews, für die man dann nicht gleich Three.js oder WebGPU auffahren muss. [00:12:50] <img controls> [https://github.com/whatwg/html/issues/11856] Auch das controls-Attribut für Bilder kommt aus Safari. Anders als zunächst von manchem vermutet, soll es nicht primär dazu dienen, animierte GIFs anzuhalten, sondern unter anderem die Navigation in 360-Grad-Bildern ermöglichen. Das wäre ein einfacher nativer Weg, solche Aufnahmen direkt als Bild in eine Webseite einzubauen. [00:16:26] CSS Image Animation [https://www.w3.org/TR/css-image-animation-1/#image-animation] Für die Kontrolle animierter Bilder existiert stattdessen die CSS Image Animation Specification. Mit image-animation könnten Animationen etwa gestoppt werden, was sich insbesondere zusammen mit prefers-reduced-motion anbietet. Wir diskutieren allerdings auch, wie relevant klassische animierte Bildformate heute noch sind, nachdem viele vermeintliche GIFs technisch längst Videos sind. [00:22:05] Speicherpreise, HBM und alte Hardware Ein kurzer Ausflug führt uns von hochauflösenden Videos zu den aktuellen Preisen für RAM, SSDs und andere Hardware. Wir sprechen über chinesische Speicherhersteller [https://www.golem.de/news/cxmt-ymtc-chinesische-speicherhersteller-bauen-kapazitaet-massiv-aus-2602-204943.html] und erinnern uns an AMDs Radeon R9 Fury [https://www.notebookcheck.com/AMD-Radeon-R9-Fury-Benchmarks.154390.0.html], die bereits 2015 HBM-Speicher verwendete. Unsere Hoffnung: Wenn neue Hardware teuer bleibt, müssen wir eben wieder mehr aus der vorhandenen herausholen. [00:29:06] contrast-color() Mit contrast-color() steht uns inzwischen browserübergreifend eine CSS-Funktion zur Verfügung, die zu einer gegebenen Farbe Schwarz oder Weiß als kontrastierende Farbe auswählt. Wir sprechen über den zugrunde liegenden WCAG-Kontrast und darüber, dass die frühere Idee hinter color-contrast() ambitionierter war: Aus einer Liste möglicher Farben sollte eine ausreichend kontrastreiche ausgewählt werden. Mit modernen CSS-Farbfunktionen wie color-mix() lässt sich das heutige Ergebnis immerhin weiterverarbeiten, beispielsweise um statt reinem Schwarz oder Weiß eine zur eigenen Farbpalette passende Variante zu erzeugen. [00:36:08] Typed attr() [https://www.kevinpowell.co/talks/css-is-eating-js/] Die CSS-Funktion attr() wird deutlich nützlicher: Attributwerte lassen sich typisieren und damit beispielsweise als Länge oder Farbe in beliebigen CSS-Properties einsetzen, statt wie früher im Wesentlichen auf content beschränkt zu sein. Firefox und Chrome unterstützen das bereits, Safari Technology Preview ebenfalls. Wir verweisen dazu auf Kevin Powells Vortrag „CSS is eating JavaScript“ vom CSS Day. [00:39:43]

Revision 734: Neue Browser-Features im Herbst 2026

Wir sprechen mit Golo Roden [https://www.linkedin.com/in/goloroden/], Gründer von The Native Web [https://www.thenativeweb.io/] (The Native Web auf YouTube [https://www.youtube.com/@thenativeweb]), diesmal nicht über Node.js, Event Sourcing oder Domain-Driven Design, sondern über Konferenzen. Golo war bereits in den Revisionen 160 [https://workingdraft.de/160/], 314 [https://workingdraft.de/314/] und 456 [https://workingdraft.de/456/] bei uns zu Gast und bringt inzwischen auch reichlich Erfahrung als Konferenzveranstalter und Speaker mit.

Anlass für unser Gespräch ist Golos Heise-Artikel „Die beste Konferenz meines Lebens und was sie anders gemacht hat“ [https://www.heise.de/blog/Die-beste-Konferenz-meines-Lebens-und-was-sie-anders-gemacht-hat-11379756.html] über den IT Business Summit [https://it-business-growth.com/it-business-summit]. Wir überlegen gemeinsam, was eine Konferenz zu einem besonderen Erlebnis macht und warum dafür nicht nur gute Vorträge, sondern vor allem viele bewusst gestaltete Details entscheidend sind.

Unser Sponsor



Alle reden von Automation – aber wo betreibst du eigentlich deine Tools?

Egal ob n8n oder andere Container-Setups: Mit dem Container-Hosting von mittwald läuft deine Anwendung in wenigen Minuten. Die nervige Konfiguration? Geht easy von der Hand – inklusive Vorschlägen für Umgebungsvariablen und Entrypoints.

Also: Fang an zu automatisieren. Dein erster Schritt ist ein Hosting bei mittwald. 👉 mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de]

Shownotes

[00:01:06] Was macht eine richtig gute Konferenz aus? [https://www.heise.de/blog/Die-beste-Konferenz-meines-Lebens-und-was-sie-anders-gemacht-hat-11379756.html] Golo erzählt zunächst von seinem Weg als Entwickler, Berater und Konferenzveranstalter. Mit The Native Web war er an der Entstehung der enterJS beteiligt und veranstaltet inzwischen mit der tech:lounge Live! [https://web.archive.org/web/20260416102157/https://www.thenativeweb.io/learning/techlounge-live] eine bewusst kleine Konferenz mit etwa 60 bis 80 Personen. Statt ein möglichst breites Programm über einen Call for Papers zusammenzustellen, wird dort zunächst ein Thema gewählt und anschließend überlegt, welche Vorträge in welcher Reihenfolge einen sinnvollen roten Faden ergeben. Danach werden passende Speaker gesucht. Wir sprechen darüber, warum Konferenzen mehr bieten müssen als Informationen, die sich ebenso gut in Videos vermitteln lassen, und warum insbesondere kleinere Veranstaltungen gute Voraussetzungen dafür bieten, Begegnungen und gemeinsame Erlebnisse zu schaffen.

Am Beispiel des IT Business Summit [https://it-business-growth.com/it-business-summit] beschreibt Golo, wie sich viele kleine Entscheidungen zu einem besonderen Gesamterlebnis addieren können. Das beginnt mit einem gemeinsamen Abendessen für Speaker und Teilnehmende, einer bewusst gewählten Location und einer Sitzordnung, bei der Menschen gezielt miteinander in Kontakt gebracht werden. Am nächsten Morgen gibt es dadurch bereits bekannte Gesichter und erste Anknüpfungspunkte. Auch das Programm wird inszeniert: Eine interaktive Eröffnung bringt die Teilnehmenden miteinander ins Gespräch, eine gut vorbereitete Moderation führt durch den Tag und Speaker werden hinter der Bühne vorbereitet, statt mit Notebook und Kabeln vor dem Publikum a

Revision 733: Konferenz ist, was zwischen den Talks passiert. Mit Golo Roden.

Wir sprechen mit Peter Krautzberger [https://www.peterkrautzberger.org/] (LinkedIn [https://www.linkedin.com/in/peter-krautzberger/] / Mastodon [https://bonn.social/@pkra]), Sven Wolfermann [https://www.linkedin.com/in/sven-wolfermann-205b19201/] und Robert Weber [https://www.linkedin.com/in/robert-weber-5b704012/] über EPUB und darüber, wie viel Webtechnologie eigentlich in einem E-Book steckt. Dabei geht es um das Format selbst, seine Entwicklung, Besonderheiten verschiedener Reader und darum, welche Rolle HTML, CSS und Accessibility beim digitalen Publizieren spielen.

Unser Sponsor



code.talks 2026 — 4. & 5. November, Kinopolis Hamburg.

Norddeutschlands größte Developer-Konferenz, seit 2010: 3.500 Entwickler:innen, 100+ Talks, 14 Tracks — von GenAI über Architecture und Security bis Frontend, DevEx und Geek-Out. 90% der Talks ohne Sponsor dahinter, kuratiert von Praktiker:innen statt von Event-Teams. Auf der Bühne u.a. Eric Evans, Dex Horthy und viele mehr.

Im Ticket enthalten: Alles!! Alle Sessions, à la carte Lunch, Drinks, Popcorn & Nachos und die Party auf der Reeperbahn.

Mit unserem Code WORKINGDRAFT15 spart ihr nochmal 15% bis Mitte Oktober auf euer Ticket.

Schaut euch durch die Agenda und seid dabei: 👉 codetalks.com [https://codetalks.com/?ref=workingdraft.de].

Shownotes

[00:01:09] EPUB und das Web Wir schauen uns an, wie EPUB aufgebaut ist und welche Verbindung das Format zu klassischen Webtechnologien hat. Dabei sprechen wir über die Entwicklung des Standards bis hin zu EPUB 3.4 [https://www.w3.org/TR/epub-34/#change-log], über die Besonderheiten verschiedener E-Book-Reader und darüber, was etwa ein Kindle mit den gelieferten Inhalten im Hintergrund macht. Ein Einblick dazu findet sich auch in What Kindle Does Behind the Scenes [https://medium.com/@jiminypan/what-kindle-does-behind-the-scenes-3d1be22efce3]. Mit Vellum [https://vellum.pub/] sprechen wir außerdem über ein Werkzeug zur Erstellung von E-Books.

Ein weiterer Aspekt ist die Barrierefreiheit. Wir sprechen über das Digital Publishing ARIA Module und darüber, wie sich beispielsweise Fußnoten mit Links zur Anmerkung und zurück zum ursprünglichen Text zugänglich umsetzen lassen. Werkzeuge wie EPUBCheck [https://github.com/w3c/epubcheck] helfen dabei, EPUB-Dateien technisch zu validieren, während Ace by DAISY [https://github.com/daisy/ace] EPUB-Publikationen auf Accessibility-Probleme untersucht.

Darüber hinaus geht es um das Ökosystem rund um EPUB, unter anderem um IDPF, EDRLab und Readium sowie um andere digitale Publikationsformate wie CBR für Comics. Wir sprechen außerdem über die Gestaltung von E-Books und Projekte wie Standard Ebooks [https://standardebooks.org/], die zeigen, was sich mit sorgfältig aufbereiteten digitalen Büchern erreichen lässt.

Links

Working Draft Revision 359 [https://workingdraft.de/359/] Eine frühere Working-Draft-Folge zum Thema E-Books und EPUB. A look back at ebookcraft’s first design competition [https://booknetcanada.ca/blog/2016/04/13/a-look-back-at-ebookcrafts-first-design-competition/] Ein Rückblick auf einen Design-Wettbewerb rund um die gestalterischen Möglichkeiten von E-Books.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.c [https://draft.community/]

Revision 732: EPUB, das Web zwischen zwei Buchdeckeln

Wir sprechen mit Robert Weber [https://www.linkedin.com/in/robert-weber-5b704012/] über ComicBox [https://comicbox.app/], sein privates Comic-Sammlungsprojekt, das aus einem sehr konkreten Problem entstanden ist: Auf Comicmessen wollte er nicht länger versehentlich Hefte kaufen, die bereits im Regal stehen. Aus einer Katalog-App ist über mehrere Jahre ein technisch ziemlich umfangreiches Webprojekt geworden.

Dabei geht es vor allem um visuelle Suche, Embeddings und Vektordatenbanken, aber auch um PWAs, Offline-First, lokale Datenhaltung und Synchronisation. Robert erzählt, welche Technologien er ausprobiert und wieder verworfen hat und wie ComicBox schließlich bei seinem heutigen Stack gelandet ist.

Unser Sponsor



code.talks 2026 — 4. & 5. November, Kinopolis Hamburg.

Norddeutschlands größte Developer-Konferenz, seit 2010: 3.500 Entwickler:innen, 100+ Talks, 14 Tracks — von GenAI über Architecture und Security bis Frontend, DevEx und Geek-Out. 90% der Talks ohne Sponsor dahinter, kuratiert von Praktiker:innen statt von Event-Teams. Auf der Bühne u.a. Eric Evans, Dex Horthy und viele mehr.

Im Ticket enthalten: Alles!! Alle Sessions, à la carte Lunch, Drinks, Popcorn & Nachos und die Party auf der Reeperbahn.

Mit unserem Code WORKINGDRAFT15 spart ihr nochmal 15% bis Mitte Oktober auf euer Ticket.

Schaut euch durch die Agenda und seid dabei: 👉 codetalks.com [https://codetalks.com/?ref=workingdraft.de].

Shownotes

[00:00:00] ComicBox: Comics erkennen und verwalten [https://comicbox.app/] Robert sammelt seit vielen Jahren Comics und nutzte früher unter anderem ComicKeeper [https://comicforum.de/showthread.php?53598-Erfahrungen-mit-ComicKeeper]. Der Impuls für eine eigene App kam bei Besuchen der Comicmesse Berlin [https://comicmesse.j-store-berlin.de/], wo bei einer größeren Sammlung schnell versehentlich ein bereits vorhandenes Heft im Einkaufsbeutel landet. Als Datengrundlage verwendet ComicBox die Grand Comics Database [https://www.comics.org/]. Neben klassischer Text- und Barcode-Suche mit QuaggaJS [https://serratus.github.io/quaggaJS/] sollte vor allem ein Foto des Covers genügen, um ein Comic zu identifizieren. Dafür werden die Cover mit einem Bildencoder in Embeddings umgewandelt und per Vektorsuche miteinander verglichen. Nach ersten Experimenten mit pgvector [https://github.com/pgvector/pgvector] verwendet Robert inzwischen Typesense [https://typesense.org/]. Auch das Embedding-Modell wechselte mehrfach, bis er bei DINOv3 [https://ai.meta.com/research/dinov3/] landete, das selbst ähnliche Cover erstaunlich zuverlässig auseinanderhalten kann. Frühere Versuche, Fotos mit jscanify [https://github.com/puffinsoft/jscanify] und OpenCV [https://opencv.org/] zuzuschneiden und zu begradigen, wurden dadurch weitgehend überflüssig.

Mit Transformers.js [https://huggingface.co/docs/transformers.js/index] erzeugt ComicBox die Embeddings möglichst direkt auf dem Gerät, auf geeigneter Hardware beschleunigt durch WebGPU [https://webgpu.org/]. Weil schwächere Geräte dafür deutlich länger brauchen können, entscheidet ein Benchmark, ob die Berechnung lokal oder auf dem Server erfolgt. Die App ist als PWA konzipiert und soll möglichst viel lokal vorhalten. Für die geräteübergreifende Synchronisation experimentierte Robert zunächst mit

Revision 731: Comics, Vektordatenbanken und Offline First. Mit Robert Weber.

Vanessa spricht diese Revision mit Rom Brillout [https://brillout.com/] (LinkedIn [https://www.linkedin.com/in/brillout/]), dem Macher von Vike [https://vike.dev/], über ein Web-Framework, das bewusst einen anderen Weg als stärker opinionated Meta-Frameworks wie Next.js oder Nuxt einschlägt. Wir schauen uns an, wie Vike entstanden ist, warum Kontrolle über die eigene Architektur eine zentrale Rolle spielt und wie ein kleiner, stabiler Core mit Extensions kombiniert wird.

Außerdem sprechen wir darüber, wie sich ein Open-Source-Projekt langfristig finanzieren lässt, welche Rolle KI und Coding Agents dabei spielen und warum ein technisch gutes Projekt nicht automatisch die große Masse erreicht.

Unser Sponsor



Alle reden von Automation – aber wo betreibst du eigentlich deine Tools?

Egal ob n8n oder andere Container-Setups: Mit dem Container-Hosting von mittwald läuft deine Anwendung in wenigen Minuten. Die nervige Konfiguration? Geht easy von der Hand – inklusive Vorschlägen für Umgebungsvariablen und Entrypoints.

Also: Fang an zu automatisieren. Dein erster Schritt ist ein Hosting bei mittwald. 👉 mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de]

Shownotes

[00:01:00] Vike [https://vike.dev/] Vike begann vor rund fünfeinhalb Jahren als Server-Side-Rendering-Plugin für Vite und entwickelte sich zu einem Meta-Framework, das unter anderem React, Vue, Svelte und Solid unterstützt. Anders als Next.js oder Nuxt versucht Vike, möglichst wenig vorzugeben. Der Core enthält grundlegende Funktionen wie Server-Side Rendering, File-System- und Client-Side-Routing, Pre-Rendering und HTML-Streaming, während stärker opinionated Funktionen über Extensions ergänzt werden. Rom beschreibt die Philosophie als „do one thing, do it well“: Der Core soll stabil und robust bleiben, während Low-Level-Hooks und Extensions die nötige Flexibilität liefern. Als Beispiele für den Einsatz nennt er Burda, Spline und Ecosia. Bei Ecosia ermöglichte Vike unter anderem eine schrittweise Migration von Vue 2 zu Vue 3.Wir sprechen darüber, wie sich diese Architektur auf Wartbarkeit und Zukunftssicherheit auswirkt und welche Rolle KI dabei spielt. Nach Roms Erfahrung kommen aktuelle Modelle mit den Kern-APIs von Vike gut zurecht. Für weniger alltägliche Fälle hat das Projekt zusätzlich einen Skill eingeführt, der Coding Agents auf die Dokumentation verweist. Dass Unternehmen ihre kompletten Frameworks künftig einfach von Agents bauen lassen, hält Rom dagegen derzeit für unrealistisch: Bei komplexer Software seien weiterhin viele Architekturentscheidungen und menschliche Detailarbeit nötig.

Ein weiterer Schwerpunkt ist die Finanzierung von Open Source. Vike soll vollständig Open Source bleiben und kleinen Unternehmen kostenlos zur Verfügung stehen, während größere Unternehmen nach dem diskutierten Modell für die Nutzung bezahlen sollen. Die konkrete Ausgestaltung ist noch nicht veröffentlicht und wird unter anderem wegen der zunehmenden Nutzung durch Coding Agents überdacht. Abschließend sprechen wir über Open-Source-Marketing: Vike hat laut Rom bereits viele Early Adopters und knapp 100.000 wöchentliche Downloads, erreicht aber noch nicht den selbstverstärkenden „Halo-Effekt“ größerer Frameworks. Statt primär auf Konferenzen und klassische Developer Advocacy zu setzen, möchte Rom vor allem weiter interessante Tools bauen und beschäftigt si

Revision 730: Vike, mit Rom Brillout

In dieser Ausgabe unserer ARIA-Runde sind Paweł Masarczyk [https://www.linkedin.com/in/pawe%C5%82-masarczyk-3a68b2117/] (Mastodon [https://dragonscave.space/@Piciok]), Peter Krautzberger [https://www.peterkrautzberger.org/] (LinkedIn [https://www.linkedin.com/in/peter-krautzberger/] / Mastodon [https://bonn.social/@pkra]) und Marco Bretschneider [https://www.linkedin.com/in/marco-bretschneider-norderstedt/] (Mastodon [https://norden.social/@meise2000]) am Start. Weil unser Glücksrad inzwischen schon einen beträchtlichen Teil der ARIA-Spezifikation abgegrast hat, verzichten wir diesmal auf den Zufall und widmen uns stattdessen einigen Themen, die uns zuletzt über den Weg gelaufen sind.

Wir sprechen über sekundäre Aktionen mit ARIA Actions, Tastaturkürzel und ihre zahlreichen Konfliktmöglichkeiten, die überraschend schwierige Accessibility-Situation des HTML-Meter-Elements und Pawełs experimentellen Ansatz, die vorhandene Semantik von Webseiten für Screenreader-Nutzer:innen völlig anders aufzubereiten.

Unser Sponsor



Im Webcafé, dem Podcast zu Webentwicklung, Webdesign und Unternehmenskultur, nehmen euch Felix und Kay mit auf eine spannende Reise durch die Welt moderner Softwareentwicklung. Gerade ihre unterschiedliche Perspektive macht dabei den Reiz aus: Felix schaut als Geschäftsführer der Geenen IT-Systeme GmbH auf Strategie, Führung und Unternehmensentwicklung, Kay bringt als Technical Lead den Blick auf Technik, Tools und Architektur ein. Genau daraus entstehen ehrliche, fundierte und persönliche Gespräche über Webtechnologien, Zusammenarbeit und die Herausforderungen digitaler Arbeit.

Jetzt reinhören: geenen-it-systeme.de [https://geenen-it-systeme.de/?src=workingdraft#podcast]

Shownotes

[00:02:43] ARIA Actions Mit ARIA Actions entsteht ein Mechanismus, über den sich primäre und sekundäre Aktionen eines Elements für assistive Technologien beschreiben lassen. Paweł erklärt das anhand von E-Mail-Clients, Messengern und anderen Oberflächen mit wiederkehrenden Elementen: Statt bei jeder Nachricht erneut Buttons für Löschen, Archivieren oder Antworten durchlaufen zu müssen, könnten diese Aktionen direkt am jeweiligen Element verfügbar gemacht werden. Das Prinzip kennen VoiceOver-Nutzer:innen bereits von iOS, wo zu einem Element zusätzliche Aktionen über den Rotor beziehungsweise entsprechende Wischgesten aufgerufen werden können.

Technisch werden die zugehörigen Aktionen über ID-Referenzen mit dem Element verknüpft. Wir diskutieren, wie dabei nicht verfügbare oder deaktivierte Aktionen behandelt werden könnten, was bei destruktiven Aktionen mit dem Fokus passiert und wie sich vermeiden lässt, dass die referenzierten Buttons anschließend zusätzlich in der normalen Navigation auftauchen. Vieles davon ist noch nicht abschließend geklärt, denn ARIA Actions befindet sich weiterhin in Entwicklung. Peter ordnet den Ansatz in eine Entwicklung ein, die wir bereits bei ARIA Details und ARIA Controls gesehen haben: ARIA beschreibt nicht mehr nur Beziehungen zwischen Elementen, sondern versucht zunehmend, komplexe Interaktionen zwischen räumlich oder strukturell getrennten Teilen einer Oberfläche zugänglich zu machen.

Interessant finden wir das Prinzip auch über Screenreader hinaus. Statt für jede Webanwendung eigene Tastaturkürzel zu erfinden, könnten Browser und andere User Agents solche abstrakt beschriebenen

Revision 729: ARIA Actions, Shortcuts und neue Navigationswege

Wir sprechen mit Stefan Nitzsche [https://stn1978.com/] (LinkedIn [https://www.linkedin.com/in/stn1978/]), freiberuflicher UX/UI-Designer und alter Bekannter des Podcasts, darüber, wie sich UX-Arbeit in den vergangenen Jahren verändert hat. Seit Stefans letztem Besuch in Revision 136 [https://workingdraft.de/136/] sind nicht nur 13 Jahre vergangen, auch die Werkzeuge und Workflows zwischen Design und Engineering sehen inzwischen deutlich anders aus.

Im Mittelpunkt steht dabei zwangsläufig KI: Wir reden darüber, wie sie Prototyping und Iterationen beschleunigt, welche Rolle UX-Expertise dabei weiterhin spielt, warum generisch gute Interfaces noch keine guten Produkte ergeben und wie sich die Zusammenarbeit zwischen Design und Engineering verschiebt. Außerdem schauen wir auf lokale Modelle, MCP, die zunehmende KI-Müdigkeit und die Frage, was passiert, wenn künftig nicht mehr nur Menschen, sondern auch Agenten unsere Interfaces benutzen.

Shownotes

[00:01:05] UX x Engineering: Wie verändert KI die Arbeit an Interfaces? Vor 13 Jahren war Stefan schon einmal in Revision 136 [https://workingdraft.de/136/] zu Gast und sprach dort unter anderem über einen modernen Design-Workflow. Diesmal nehmen wir diesen Faden wieder auf und fragen, was aus diesem Workflow inzwischen geworden ist. Stefan arbeitet weiterhin als freiberuflicher UX/UI-Designer und erlebt KI als derzeit größte Veränderung seiner Arbeit. Sie macht Wissen und Werkzeuge verfügbar, die früher vor allem größeren Projekten vorbehalten waren, und kann beispielsweise bei Personas, Audits, projektspezifischen Knowledge Bases oder der Prüfung von Konzepten unterstützen. Klassische UX-Arbeit wie qualitative und quantitative Research, Surveys und echte User-Tests ersetzt sie für ihn allerdings nicht.

Besonders deutlich wird die Veränderung beim Prototyping. Wo früher Paper-Prototypes, Klick-Dummies oder aufwendig miteinander kombinierte Design- und Animationstools nötig waren, kann Stefan heute innerhalb von ein oder zwei Tagen einen weitgehend funktionierenden Prototyp mit HTML, CSS und JavaScript erstellen. Dadurch lassen sich nicht nur Screens, sondern auch Interaktionen, Animationen und vollständige Abläufe früh ausprobieren. Das hilft insbesondere Menschen, denen es schwerfällt, sich aus statischen Entwürfen das spätere Verhalten einer Anwendung vorzustellen. Gleichzeitig entsteht eine neue Gefahr: Ein Prototyp kann bereits Dinge versprechen, die das für das eigentliche Produkt vorgesehene Framework technisch gar nicht leisten kann.

Diese Entwicklung verändert auch das Verhältnis zwischen UX und Engineering. Iterationen beginnen früher, weil Designerinnen und Designer nicht mehr darauf warten müssen, dass ein Entwurf implementiert wurde, bevor sie ihn tatsächlich erleben können. Fehler und unbefriedigende Entscheidungen lassen sich dadurch bereits während der Gestaltung erkennen und korrigieren. Engineering verschwindet deshalb nicht. Im Gegenteil: Architektur, Wartbarkeit, die Auswahl geeigneter Technologien und die Kontrolle dessen, was eine KI im Code tatsächlich veranstaltet, benötigen weiterhin entsprechende Expertise. Ähnliches gilt auf UX-Seite, wo zusätzlich menschliches Verhalten, Psychologie, mentale Modelle, Heuristiken und sehr unterschiedliche Nutzungssituationen berücksichtigt werden müssen.

Konkret arbeitet Stefan viel mit Figma und Claude. Einen wichtigen Impuls dafür bekam er von Christine Vallaure de la Paz [https://www.moonlearning.io/]. Statt des offiziellen Figma-MCP verwendet er inzwischen vor allem den von TJ Pitre beziehungsweise Southleft entwickelten Figma Console MCP [https://docs.figma-console-mcp.southleft.com/] in Kombination mit Claude Code. Für Projekte, bei denen Datenschutz oder Vertraulichkeit eine größere Rolle spielen, experimentiert er außerdem mit lokalen Modellen und einer selbst gehosteten Installation von

Revision 728: Wie hat sich UX-Arbeit in den letzten Jahren verändert? Mit Stefan
Nitzsche

Diese Folge sprechen wir mit Florian Sowade [https://de.linkedin.com/in/floriansowade] über eines der zuverlässigsten Rabbit Holes der Softwareentwicklung: Datum und Zeit. Was zunächst nach ein paar Timestamps und Zeitzonen klingt, entwickelt sich schnell zu einer Reise durch Sommerzeiten, historische Kalendersysteme, Schaltsekunden und allerlei politische Entscheidungen, die unsere vermeintlich so präzisen Zeitangaben beeinflussen.

Dabei geht es uns vor allem um ein brauchbares mentales Modell für den Entwickleralltag: Welche unterschiedlichen Arten von Zeitangaben gibt es eigentlich, warum reicht ein einzelner Date-Typ oft nicht aus und wie helfen APIs wie Temporal [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Temporal] dabei, die unvermeidbare Komplexität wenigstens explizit zu machen?

Unser Sponsor



code.talks 2026 — 4. & 5. November, Kinopolis Hamburg.

Norddeutschlands größte Developer-Konferenz, seit 2010: 3.500 Entwickler:innen, 100+ Talks, 14 Tracks — von GenAI über Architecture und Security bis Frontend, DevEx und Geek-Out. 90% der Talks ohne Sponsor dahinter, kuratiert von Praktiker:innen statt von Sales-Teams. Auf der Bühne u.a. Eric Evans und Dex Horthy.

Im Ticket enthalten: alle Sessions, à la carte Lunch, Drinks, Popcorn & Nachos und die Party auf der Reeperbahn.

Derzeit spart ihr so richtig, denn es läuft die Crazy Back to Office Aktion. Vom 1.9. – 14.9. bekommt ihr das all-in-one Ticket für 549€ statt 799€.

Agenda & Tickets: 👉 codetalks.com [https://codetalks.com/?ref=workingdraft.de]

Shownotes

[00:01:05] Datum, Zeit, Zeitzonen und Kalender Florian unterscheidet als mentales Modell zwischen eindeutigen Zeitpunkten, lokalen Datums- und Zeitangaben, UTC-Offsets und echten Zeitzonen. Warum das wichtig ist, zeigt sich bei der Zeitumstellung, wenn lokale Uhrzeiten gar nicht oder gleich zweimal existieren.

Die Regeln dafür stammen aus der Timezone Database [https://www.iana.org/time-zones]. Zeitzonen können sich durch politische Entscheidungen kurzfristig ändern. Selbst Deutschland besitzt mit Europe/Berlin und Europe/Büsingen zwei Einträge. Für Anwendungen bedeutet das, Zeitzonendaten aktuell zu halten und etwa bei Cronjobs zu berücksichtigen, dass „nachts“ nicht dasselbe ist wie eine feste UTC-Uhrzeit.

Die JavaScript Temporal API [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Temporal] macht solche Unterschiede explizit und modelliert verschiedene Zeitkonzepte mit eigenen Typen. Das hilft auch bei Berechnungen: Ein Tag hat durch Zeitumstellungen nicht immer 24 Stunden und drei Monate entsprechen keiner festen Anzahl Sekunden.

Weitere Sonderfälle sind Schaltsekunden und unterschiedliche Kalendersysteme. So werden Shakespeare und Cervantes beide mit dem 23. April 1616 als Todestag geführt, obwohl England und Spanien damals unterschiedliche Kalender verwendeten. Auch Schwedens missglückter schrittweiser Wechsel zum gregorianischen Kalender zeigt, wie schwierig historische Datumsangaben werden können.

Florians Fazit: Annahmen wie „ein Tag hat 24 Stunden“ hinterfragen und möglichst High-Level-APIs und Libraries verwenden, die unterschiedliche Zeitkonzepte ausdrücklich modellieren. Welche Bedeutung eine Zeitangabe konkret hat, bleibt dabei eine Frage der jeweiligen Anwendung.

Links

IANA Time Zones</ [https://www.iana.org/time-zones]

Revision 727: Worst of Date/Time Fails, mit Florian Sowade

Wir sprechen mit Andreas Spannbauer [https://www.linkedin.com/in/andreasspannbauer/] und Werner Krauß [https://www.linkedin.com/in/wernerkrauss/] über das Silverstripe CMS [https://www.silverstripe.org/], ein PHP-basiertes Open-Source-CMS, das sich vor allem an Entwickler:innen und individuell entwickelte Webprojekte richtet. Werner arbeitet seit mehr als 15 Jahren mit Silverstripe und ist in der Open-Source-Community aktiv, Andreas setzt das System mit seiner Wiener Webagentur vor allem für langfristige, maßgeschneiderte Kundenprojekte ein.

Neben Architektur, Datenmodellierung, Frontend und Headless-Betrieb geht es um die europäische Silverstripe-Community, den Verein S2-Hub [https://www.s2-hub.com/] und die StripeCon Europe [https://stripecon.eu/], die vom 16. bis 18. September 2026 in Salzburg stattfindet. Für die Konferenz verlosen wir außerdem drei Tickets. Schreibt dafür ne E-Mail mit „Ich will zur Stripecon“ im Betreff bis zum 07.09.2026 an info@stripecon.eu.

Shownotes

[00:01:04] Silverstripe CMS, Community und StripeCon Europe Silverstripe ist ein seit mehr als 20 Jahren entwickeltes Open-Source-CMS auf PHP-Basis, dessen Ursprünge in Neuseeland liegen. Im Gegensatz zu Systemen, bei denen Redakteur:innen Seitenstrukturen und Komponenten weitgehend selbst zusammenklicken, ist Silverstripe stark entwicklerorientiert. Die Struktur der Inhalte wird im Code definiert. Eine zentrale Rolle spielt dabei das mitgelieferte ORM: Felder, Datenobjekte und Relationen wie Has-one-, Has-many- oder Many-many-Beziehungen werden in PHP beschrieben und von Silverstripe in die Datenbankstruktur übertragen.

Wir sprechen darüber, warum diese Herangehensweise insbesondere für individuelle und langfristig betriebene Projekte interessant ist. Entwickler:innen definieren Datenstrukturen und Möglichkeiten, während Redakteur:innen im Backend eine auf ihre Aufgaben zugeschnittene Oberfläche erhalten. Dadurch lässt sich beispielsweise vermeiden, dass dieselben Informationen als voneinander unabhängige Textblöcke auf mehreren Seiten gepflegt werden. Stattdessen können Entitäten wie Händler oder Produkte als eigene Datenobjekte modelliert und anschließend an unterschiedlichen Stellen und in verschiedenen Sprachversionen verwendet werden.

Technisch besteht Silverstripe aus einem Framework und dem darauf aufbauenden CMS. Das Framework lässt sich auch ohne klassischen Seitenbaum einsetzen, etwa als Backend für eine Anwendung. Mit dem CMS kommen unter anderem Seiten, Unterseiten, URLs und Navigation hinzu. Über Konventionen legt Silverstripe fest, wie Klassen, Konfigurationen und Templates strukturiert und wo sie abgelegt werden. Das dazugehörige CLI-Tool orientiert sich konzeptionell an Werkzeugen aus Ruby on Rails beziehungsweise Artisan aus Laravel.

Beim Hosting sind die Anforderungen überschaubar: Ein üblicher LAMP-Stack mit aktuellem PHP, MySQL oder MariaDB und Webserver reicht grundsätzlich aus. Praktisch hilfreich sind SSH-Zugang und Composer, weshalb sehr eingeschränkte Hosting-Pakete weniger geeignet sind.

Auch beim Frontend macht Silverstripe vergleichsweise wenige Vorgaben. Zwar gibt es ein eigenes Templating-System, der restliche Frontend-Stack kann aber frei gewählt werden. Gleichzeitig fehlen dadurch weitgehend fertige Themes und Starter-Projekte, wie man sie aus anderen CMS-Ökosystemen kennt. Das passt zur typischen Nutzung von Silverstripe für individuell gestaltete Projekte, führt beim Einstieg aber zu einer steileren Lernkurve. Neben der Komplexität des Frameworks müssen zunächst dessen Konventionen verstanden werden. Sind diese verinnerlicht, lassen sich Datenstrukturen und Anwendungen nach Einschätzung unserer Gäste sehr schnell aufbauen.

Silverstripe kann außerdem als Headless-CMS betrieben werden. Daten lassen sich beispielsweise über REST oder GraphQL an JavaScript-Anwendungen ausliefern

Revision 726: Silverstripe CMS, mit Werner Krauß und Andreas Spannbauer

Wir werfen wieder einen Blick auf aktuelle Entwicklungen der Webplattform und sprechen über eine ganze Reihe neuer Browser-Features und Standards, die in den letzten Monaten ihren Weg in Chrome, Firefox oder Baseline gefunden haben. Dabei geht es sowohl um neue APIs und CSS-Features als auch um Verbesserungen für Accessibility und die Entwicklerwerkzeuge.

Unser Sponsor



Alle reden von Automation – aber wo betreibst du eigentlich deine Tools?

Egal ob n8n oder andere Container-Setups: Mit dem Container-Hosting von mittwald läuft deine Anwendung in wenigen Minuten. Die nervige Konfiguration? Geht easy von der Hand – inklusive Vorschlägen für Umgebungsvariablen und Entrypoints.

Also: Fang an zu automatisieren. Dein erster Schritt ist ein Hosting bei mittwald. 👉 mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de]

Shownotes

[00:02:09] focusgroup [https://open-ui.org/components/scoped-focusgroup.explainer/] Den Anfang macht das neue focusgroup-Attribut, das die Tastaturnavigation innerhalb von Komponenten deutlich vereinfachen soll. Wir sprechen über den aktuellen Stand der Implementierung in Chrome, den Ursprung der Idee im Open UI Projekt sowie Microsofts Beweggründe. Außerdem erinnern wir uns an unsere frühere Folge über räumliche Navigation und werfen einen Blick auf das verfügbare Polyfill für andere Browser. [00:12:49] Math.sumPrecise() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sumPrecise] Mit Math.sumPrecise() landet eine neue JavaScript-Funktion in Baseline, die Rundungsfehler beim Addieren vieler Fließkommazahlen reduziert. Wir sprechen darüber, wann sich die neue Methode lohnt und streifen dabei auch kurz Object.is() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is] als verwandtes Thema. [00:29:49] Element-scoped View Transitions [https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using_element-scoped] View Transitions lassen sich inzwischen nicht mehr nur für ganze Dokumente einsetzen. Wir schauen uns an, wie elementbezogene View Transitions funktionieren und welche Anwendungsfälle dadurch möglich werden. [00:38:09] light-dark() [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark] für Bilder Firefox unterstützt nun light-dark() auch in Kombination mit Bildern. Wir sprechen darüber, welche Möglichkeiten sich dadurch ergeben und streifen außerdem die neuen CSS-Eigenschaften link-parameters [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/link-parameters] sowie object-view-box [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-view-box]. [00:59:37] Promises für scrollTo(), scrollBy() und scrollIntoView() [https://trade-assistance.com/blog/programmatic-scroll-promises-chrome-150/] Chrome liefert für programmatische Scrollvorgänge künftig Promises zurück. Wir diskutieren, welche Probleme sich damit lösen lassen und warum das die Arbeit mit Scroll-Animationen und Benutzerinteraktionen vereinfachen kann. [01:07:11] Async Iteration für ReadableStreams Die asynchrone Iterati

Revision 725: Die Browser haben wieder geliefert

Host (@schepp) · Zencastr

Host (@schepp)

Der wöchentliche Podcast für Webdesigner:innen und -entwickler:innen. Supported
uns bei Patreon: https://patreon.com/workingdraft

Working Draft