Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

November 03 Revision 736: Glücksrad mit widerrufbaren Proxys, Feature-Detection-Versagen, HDR und mit Stefan Judis
Für diese Ausgabe unseres Glücksrads haben wir uns Stefan Judis eingeladen. Stefan war schon einige Male zu Gast, zuletzt in Revision 542, ist Frontend-Entwickler, DevRel bei Checkly, schreibt den wöchentlichen Newsletter Web Weekly und teilt regelmäßig spannende Entdeckungen aus der Welt der Webentwicklung. Ihr findet ihn außerdem auf LinkedIn, Bluesky und Mastodon.
Gemeinsam drehen wir am Glücksrad und sprechen über eine bunte Mischung aus HTML, CSS, JavaScript und Accessibility. Dabei geht es unter anderem um Fortschrittsanzeigen, SVG-Styling, logische CSS-Eigenschaften, widerrufbare JavaScript-Proxys und die Grenzen der CSS-Feature-Erkennung.
Shownotes
[00:04:27] aria-multiline und editierbare Inhalte
Wir starten mit dem ARIA-Attribut aria-multiline und diskutieren, wie mehrzeilige Texteingaben für assistive Technologien ausgezeichnet werden. Dabei sprechen wir auch über die HTML-Eigenschaft contentEditable und darüber, wie sich mit isContentEditable feststellen lässt, ob ein Element bearbeitbar ist.
[00:16:11] Widerrufbare JavaScript-Proxys
Was passiert, wenn ein Proxy widerrufen wird und anschließend trotzdem noch jemand darauf zugreift? Wir beschäftigen uns mit Proxy.revocable(), den daraus entstehenden JavaScript-Fehlern und möglichen Einsatzgebieten bei der Verwaltung von Ressourcen und Objektlebenszyklen. Dazu passt das Paket @sirpepe/no-use-after-free.
[00:27:11] Das HTML-Element ol
Wir untersuchen die Attribute nummerierter HTML-Listen, darunter start, reversed und type. Dabei stoßen wir auch auf historische Attribute wie compact und sprechen über ihre Bedeutung und Browserunterstützung.
[00:34:23] Logische CSS-Eigenschaften
Mit padding-block-end und verwandten Eigenschaften beschäftigen wir uns mit dem Unterschied zwischen physischen und logischen Richtungsangaben in CSS. Wir diskutieren die Vorteile für unterschiedliche Schreibrichtungen und kommen dabei auch auf die Pseudoklasse :dir() zu sprechen.
[00:44:05] border-start-start-radius
Auch abgerundete Ecken haben logische CSS-Eigenschaften. Wir schauen uns an, wie border-start-start-radius von Schreibrichtung und Writing Mode abhängt, und diskutieren die Lesbarkeit solcher Eigenschaftsnamen. Dabei erinnern wir uns an Keith Cirkels Quiz CSS or BS?, bei dem man echte CSS-Features von erfundenen unterscheiden muss.
[00:48:09] CSS stroke und paint-order
Wir sprechen darüber, wie sich mit stroke und paint-order die Darstellung von Text und SVG-Inhalten beeinflussen lässt. Ein besonderes Problem ergibt sich bei der Feature Detection: Ältere Chrome-Versionen erkennen bestimmte Werte in @supports als gültig, obwohl sie die gewünschte Darstellung außerhalb von SVG noch nicht unterstützen.
[01:02:12] Wide Gamut und HDR
Wir kommen auf die neue CSS Color HDR Spec zu sprechen und beschäftigen uns mit Bildern, die einen größeren Farbraum oder einen erweiterten Helligkeitsumfang nutzen. Dabei unterscheiden wir Wide Gamut von HDR und diskutieren, wie Browser und Displays solche Inhalte darstellen. Zu sehen auf dieser Testseite.
[01:04:31] CSS-Feature-Erkennung mit supports named-feature
Ausgehend von den Schwierigkeiten mit paint-order diskutieren wir die Grenzen klassischer @supports-Abfragen. Wir schauen uns den Vorschlag supports named-feature an, mit dem sich künftig auch CSS-Funktionen erkennen lassen sollen, die nicht zuverlässig über eine Property-Value-Kombination getestet werden können.
[01:10:03] ARIA meter, HTML meter und progress
Zum Abschluss geht es um die ARIA-Rolle meter und das selten verwendete HTML-Element meter. Wir klären den Unterschied zu progress: Während meter einen Messwert innerhalb eines bekannten Bereichs darstellt, beschreibt progress den Fortschritt eines Vorgangs. Außerdem diskutieren wir die Vorteile nativer HTML-Elemente gegenüber selbstgebauten Lösungen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 22 min
October 27 Revision 735: Glücksrad mit Custom States, Foreign Objects und toten HTML-Elementen
Wir holen nach längerer Pause wieder das klassische Working Draft Webtechnologie-Glücksrad hervor. Der Zufallsgenerator serviert uns Webstandards aus HTML, CSS, JavaScript und Browser-APIs, zu denen wir uns ohne Vorbereitung etwas Sinnvolles zusammenreimen müssen.
Diesmal landen wir unter anderem bei Service Workern als ES Modules, Custom States und Shadow-DOM-Styling, Iteratoren, SVG und foreignObject, parametrisierten SVGs sowie einem Stück HTML-Archäologie rund um und das längst verblichene .
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
Shownotes
[00:05:21] ServiceWorkerGlobalScope und ES Modules
Das erste Thema führt uns zu Service Workern und der Möglichkeit, sie als ECMAScript-Module zu registrieren. Gegenüber importScripts() bekommen wir damit die gewohnte Modulsemantik mit import und export, eigenem Scope und Strict Mode. Wir sprechen darüber, warum das auch jenseits der Syntax angenehm ist: Utilities können in Webseite und Worker nach demselben Modulmodell organisiert werden und wir müssen weniger zwischen zwei leicht unterschiedlichen JavaScript-Welten umdenken. Der eigentliche ServiceWorkerGlobalScope ist dabei grob das Gegenstück zu window im Service Worker und stellt unter anderem Worker-spezifische APIs bereit.
[00:12:17] moveBefore() und zustandserhaltendes Verschieben
Von globalen Objekten kommen wir zu Schepps Praxis, vorhandene DOM-APIs zu patchen. Anlass ist moveBefore(), mit dem Elemente im DOM verschoben werden können, ohne ihren Zustand durch ein Entfernen und erneutes Einfügen zu verlieren. Bei Custom Elements hat das Konsequenzen für die Lifecycle-Callbacks: Ein zustandserhaltendes Verschieben verhält sich anders als das klassische Disconnect-und-Reconnect und bringt dafür den connectedMoveCallback() ins Spiel.
[00:15:56] Custom States mit :state()
Mit :state() können Custom Elements eigene Zustände nach außen für CSS sichtbar machen. Über attachInternals() und die Custom-State-API lässt sich beispielsweise ein eigener Open-, Closed- oder Disabled-artiger Zustand definieren, auf den Styles anschließend mit :state(...) reagieren. Wir vergleichen das mit eingebauten Zuständen nativer Elemente und diskutieren einen Haken: Wird der Zustand erst durch später ausgeführtes JavaScript hergestellt, kann es zu sichtbarem Flackern kommen. Für einen Dark-Mode-Schalter kann deshalb ein bereits beim Parsen vorhandenes Attribut die robustere Single Source of Truth sein.
[00:24:52] JavaScript Iteration Protocols
Die Iterationsprotokolle haben wir zwar schon früher erwischt, bekommen diesmal aber einen schönen realen Anwendungsfall geliefert: Eine paginierte Web-API lässt sich als asynchroner Iterator modellieren, sodass Konsumenten mit for await...of Seite für Seite abarbeiten können, ohne eine getAll()-Funktion anzubieten, die zwangsläufig sämtliche Daten lädt. Wer tiefer einsteigen möchte, findet das Thema ausführlicher in unserer alten Iteration 323: (Asynchrone) Iteratoren aus dem Jahr 2017.
[00:26:53] exportparts
Mit part lassen sich Teile eines Shadow DOM gezielt für Styling von außen freigeben. exportparts setzt noch eine Ebene darauf: Enthält eine Web Component weitere Web Components in ihrem Shadow DOM, kann sie deren Parts durch die eigene Shadow-DOM-Grenze hindurch weiterreichen und dabei auch umbenennen. Damit lassen sich verschachtelte Komponenten von außen stylen, ohne die Kapselung vollständig aufzugeben. Wir diskutieren aber auch, ob gröber geschnittene Web Components viele dieser Probleme von vornherein vermeiden können.
[00:38:19] SVG foreignObject
erlaubt es, Inhalte aus einem anderen XML-Namespace in SVG einzubetten, insbesondere HTML. Daraus ergeben sich einige interessante Anwendungen. Wir sprechen über das Rendern eines DOM-Ausschnitts über SVG und Canvas als Screenshot, über HTML als Ausweg aus dem unbequemen Textlayout von SVG und über die Frage, wie weit sich unterschiedliche Dokumenttypen ineinander verschachteln lassen. Bei inline eingebettetem SVG lässt sich das HTML innerhalb eines foreignObject außerdem abhängig von Klassen des umgebenden SVG stylen. Ist das SVG dagegen als externe Bilddatei eingebunden, stehen solche Beziehungen nicht auf dieselbe Weise zur Verfügung.
[00:40:29] Screen Capture API
Vom Screenshot-Hack mit foreignObject kommen wir kurz zur Screen Capture API und getDisplayMedia(). Dabei schauen wir uns die Unterschiede beim Browser-Support an und stellen fest, dass sich insbesondere die feineren Möglichkeiten zur Auswahl und Aufnahme einzelner Fenster, Tabs und Audioquellen zwischen den Browsern unterscheiden.
[00:50:28] CSS link-parameters
Für extern eingebundene SVGs könnte link-parameters künftig eine interessante Brücke bilden. Die CSS-Eigenschaft erlaubt es, Parameter an verlinkte Ressourcen zu übergeben. Im Ziel lassen sich diese Werte über env() wieder auslesen. Damit könnte dasselbe SVG beispielsweise mit unterschiedlichen Farben parametrisiert werden, ohne dafür verschiedene Dateien zu erzeugen. Wir überlegen weiter, ob sich Änderungen solcher Parameter innerhalb des SVG auch mit CSS Transitions kombinieren lassen und ob die Werte bis in HTML innerhalb eines foreignObject durchgereicht werden könnten.
[00:55:45] Das -Element
Zum Abschluss beschert uns das Glücksrad HTML-Archäologie. zeichnet nicht das Zitat selbst aus, sondern die Referenz auf das zitierte Werk. Ein längeres Zitat gehört beispielsweise in ein , während dessen Quelle benennen kann. Wir verfolgen das Element zurück bis HTML 2.0 und stellen dabei fest, wie schwer bei solch alten Features überhaupt sinnvoll zu bestimmen ist, ab wann ein Browser sie „unterstützt“.
[01:01:20] Das nicht existente blink-Element
Von geraten wir zum abgeschafften . Moderne Browser behandeln es wie ein unbekanntes Element, gleichzeitig erwähnt der HTML-Standard solche historischen Elemente ausdrücklich als nicht zu verwendende Elemente. Das führt uns zu der etwas philosophischen Frage, was es technisch eigentlich bedeutet, dass ein HTML-Element „nicht existiert“, wenn Parser und Entwicklerwerkzeuge dennoch besondere Regeln für seinen Namen kennen. Die Entstehungsgeschichte von liefert dazu noch die passende Webhistorie: Die Idee entstand laut Lou Montulli bei einer Unterhaltung in einer Bar und wurde anschließend über Nacht implementiert.
Links
Fronteers Dark Mode
Schepp berichtet kurz von der gerade vergangenen Fronteers-Konferenz in Dordrecht und kündigt die nächste Ausgabe für den 1. Oktober 2027 an.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 18 min
October 25 Sonderfolge: PHP2Shell
Für diese außerplanmäßige Bonusfolge haben wir uns mit unserem Gast Hans-Christian Otto zusammengesetzt, um über die kritischen Sicherheitslücken in PHP zu sprechen, die unter dem Namen PHP2Shell für Aufsehen sorgen. Gemeinsam schauen wir uns an, wie die Schwachstellen in der PHP-Runtime funktionieren, warum sie so gefährlich sind und weshalb ihre Entdeckung und Veröffentlichung für so viel Aufregung gesorgt haben.
Dabei geht es uns nicht nur um die technischen Hintergründe und die Rolle von KI bei der Suche nach Sicherheitslücken. Wir sprechen auch über die Menschen, die solche Probleme in Open-Source-Projekten beheben müssen, über den Umgang mit Sicherheitsmeldungen und über die Frage, wer eigentlich die Verantwortung für die Finanzierung kritischer Software-Infrastruktur trägt.
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
Shownotes
[00:01:05] PHP2Shell: Kritische Sicherheitslücken in PHP
Wir beginnen mit den technischen Hintergründen von PHP2Shell und klären, warum die Schwachstellen nicht etwa in WordPress, TYPO3 oder anderen PHP-Anwendungen stecken, sondern in der PHP-Runtime selbst. Wir besprechen die Möglichkeiten zur Remote Code Execution, die potenziellen Folgen für Datenbanken und sensible Nutzerdaten sowie die Frage, welche Installationen tatsächlich angreifbar sind. Außerdem rekonstruieren wir den ungewöhnlichen Ablauf der Veröffentlichung: von den ersten Entdeckungen durch KI-gestützte Sicherheitsanalysen über vorzeitig bekannt gewordene Informationen bis zu den kurzfristig koordinierten Sicherheitsupdates. Dabei diskutieren wir auch die öffentliche Berichterstattung, die unter anderem heise online und Golem aufgegriffen haben.Anschließend beschäftigen wir uns mit der Rolle künstlicher Intelligenz bei der Entdeckung von Sicherheitslücken. KI-Systeme finden zunehmend auch Fehler, die über Jahre unentdeckt geblieben sind. Das ist einerseits ein Gewinn für die Sicherheit, andererseits stellt es die Maintainer von Open-Source-Projekten vor erhebliche Herausforderungen. Wir sprechen über die steigende Zahl an Security Reports, die aufwendige Prüfung vermeintlicher Schwachstellen und die begrenzten Ressourcen der Projekte. Der Bericht der PHP Foundation gibt uns Einblicke in die Arbeit hinter den Sicherheitsupdates. Wir diskutieren außerdem, wie angemessen die öffentliche Alarmierung bei solchen Sicherheitslücken ist und was passiert, wenn KI-gestützte Sicherheitsforschung künftig immer häufiger vergleichbare Funde liefert.
Schließlich richten wir den Blick auf die Finanzierung und langfristige Absicherung kritischer Open-Source-Infrastruktur. Am Beispiel der PHP Foundation und ihrer öffentlich einsehbaren Finanzierung diskutieren wir, wie wenig Geld teilweise hinter Software steckt, von der ein erheblicher Teil des Internets abhängt. Wir betrachten die Beiträge großer Unternehmen und die Rolle der staatlich finanzierten Sovereign Tech Agency, die auch andere grundlegende Projekte wie cURL und FFmpeg unterstützt. Zum Schluss kommen wir noch einmal auf die PHP-Sicherheitsupdates zurück und sprechen über die praktischen Herausforderungen koordinierter Releases, die Verteilung von Patches und den Umgang mit vorab informierten Unternehmen.
Links
Sovereign Tech Agency auf Wikipedia
Überblick über die staatliche Initiative und die zahlreichen Open-Source-Projekte, die sie finanziell unterstützt.
AI Just Found a Bug That Puts up to 70% of the World’s Websites at Risk
Artikel des Wall Street Journal über die Entdeckung der PHP-Sicherheitslücken mithilfe künstlicher Intelligenz und ihre potenzielle Tragweite.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 22 min
October 20 Revision 734: Neue Browser-Features im Herbst 2026
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] und 3D im Browser
Safari bekommt mit ein HTML-Element zum nativen Einbetten von 3D-Modellen. Ähnlich wie bei oder 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]
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
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 und erinnern uns an AMDs Radeon R9 Fury, 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()
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] sizes=“auto“
sizes="auto" ist nun in allen Browsern verfügbar und vereinfacht Responsive Images insbesondere bei wiederverwendbaren Bildkomponenten, deren tatsächliche Darstellungsgröße im Voraus schwer anzugeben ist. Bei lazy geladenen Bildern kennt der Browser das Layout bereits, bevor er die passende Ressource auswählt, und kann deshalb die tatsächliche Bildgröße selbst bestimmen. Damit bleibt die manuelle Größenangabe vor allem für Bilder relevant, die früh geladen werden müssen.
[00:42:56] Gap Decorations
Chrome unterstützt Gap Decorations für Layouts mit Gaps, unter anderem Grid, Flexbox und Multicolumn. Damit lassen sich die Zwischenräume zwischen Zeilen oder Spalten direkt dekorieren, statt dafür Borders und zusätzliche Layout-Tricks einzusetzen. Für andere Browser ist das zunächst Progressive Enhancement.
[00:45:55] Progressive Bildvorschauen
Wir streifen Überlegungen zu nativen niedrig aufgelösten beziehungsweise weichgezeichneten Bildvorschauen, die später durch das vollständig geladene Bild ersetzt werden. Dabei geht es auch um die Wiederbelebung des früheren lowsrc-Ansatzes. Patrick Brosset beschreibt aktuelle Überlegungen dazu, während Jake Archibald ausführlich auf bestehende und mögliche zukünftige Verfahren für Progressive Image Rendering eingeht.
[00:52:31] flex-wrap: balance und bessere Typografie
An alog zu text-wrap: balance soll flex-wrap: balance dafür sorgen, umgebrochene Flex-Items ausgewogener auf die entstehenden Zeilen zu verteilen. Von dort kommen wir zu kleinen CSS-Helfern für bessere Typografie: text-wrap: balance für Überschriften, text-wrap: pretty für Fließtext und hyphenate-limit-chars, mit dem sich unter anderem Mindestwortlängen und die Zahl der Zeichen vor und nach einer Trennstelle bestimmen lassen.
[00:55:12] Performative UI
Mit Performative UI schauen wir uns eine Parodie auf die inzwischen ziemlich einheitliche Designsprache von KI-Webseiten an. Die React-Komponenten liefern typische Versatzstücke wie Gradient-Überschriften, animierte Counter und Statusanzeigen gleich fertig mit. Für uns Anlass für die Frage, ob heutige Design-Spielereien irgendwann genauso gewöhnlich werden wie runde Ecken nach der Einführung von border-radius.
[00:55:33] column-height
Zum Abschluss geht es um column-height, das derzeit in Chrome unterstützt wird und Multicolumn-Layouts für lange Inhalte praktikabler machen soll. Statt wenige extrem lange Spalten zu erzeugen, lässt sich ihre Höhe begrenzen. Der Inhalt fließt zunächst durch die nebeneinanderliegenden Spalten und anschließend in eine weitere Reihe von Spalten. Dadurch muss man beim Lesen nicht mehr bis zum Ende einer langen Spalte scrollen und anschließend wieder ganz nach oben zur nächsten springen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 2 min
October 13 Revision 733: Konferenz ist, was zwischen den Talks passiert. Mit Golo Roden.
Wir sprechen mit Golo Roden, Gründer von The Native Web (The Native Web auf YouTube), diesmal nicht über Node.js, Event Sourcing oder Domain-Driven Design, sondern über Konferenzen. Golo war bereits in den Revisionen 160, 314 und 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“ über den 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
Shownotes
[00:01:06] Was macht eine richtig gute Konferenz aus?
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! 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 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 auf ihren Auftritt zu warten. Technik, Moderation und Ablauf greifen dabei so ineinander, dass sich sowohl Vortragende als auch Publikum wertgeschätzt fühlen. Selbst das typische Tief nach der Mittagspause wird bewusst durchbrochen.
Wir kommen immer wieder auf denselben Gedanken zurück: Eine gute Konferenz überlässt Gemeinschaft und Atmosphäre nicht einfach dem Zufall. Veranstalter können Situationen schaffen, in denen Menschen leichter miteinander ins Gespräch kommen, Speaker und Publikum nicht voneinander separieren und Details wie Location, Essen, Pausen oder Technik ebenso ernst nehmen wie das Vortragsprogramm. Bei der tech:lounge Live! gehört dazu beispielsweise bewusst hochwertiges, komplett veganes Catering. Wir vergleichen diese Erfahrungen mit anderen kleineren Veranstaltungen und sprechen über die besondere Atmosphäre, die etwa die SmashingConfs, die beyond tellerrand oder die Fronteers Dark Mode schaffen können. Gerade bei überschaubaren Teilnehmerzahlen lässt sich vieles persönlicher gestalten und es wird möglich, dass aus einzelnen Details am Ende genau jene schwer greifbare „Magie“ entsteht, wegen der uns eine Konferenz noch Jahre später in Erinnerung bleibt.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 26 min
October 06 Revision 732: EPUB, das Web zwischen zwei Buchdeckeln
Wir sprechen mit Peter Krautzberger (LinkedIn / Mastodon), Sven Wolfermann und Robert Weber ü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.
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, ü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. Mit Vellum 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 helfen dabei, EPUB-Dateien technisch zu validieren, während Ace by DAISY 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, die zeigen, was sich mit sorgfältig aufbereiteten digitalen Büchern erreichen lässt.
Links
Working Draft Revision 359
Eine frühere Working-Draft-Folge zum Thema E-Books und EPUB.
A look back at ebookcraft’s 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.community/
1 hr 26 min
September 29 Revision 731: Comics, Vektordatenbanken und Offline First. Mit Robert Weber.
Wir sprechen mit Robert Weber über ComicBox, 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.
Shownotes
[00:00:00] ComicBox: Comics erkennen und verwalten
Robert sammelt seit vielen Jahren Comics und nutzte früher unter anderem ComicKeeper. Der Impuls für eine eigene App kam bei Besuchen der Comicmesse Berlin, wo bei einer größeren Sammlung schnell versehentlich ein bereits vorhandenes Heft im Einkaufsbeutel landet. Als Datengrundlage verwendet ComicBox die Grand Comics Database. Neben klassischer Text- und Barcode-Suche mit 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 verwendet Robert inzwischen Typesense. Auch das Embedding-Modell wechselte mehrfach, bis er bei DINOv3 landete, das selbst ähnliche Cover erstaunlich zuverlässig auseinanderhalten kann. Frühere Versuche, Fotos mit jscanify und OpenCV zuzuschneiden und zu begradigen, wurden dadurch weitgehend überflüssig.
Mit Transformers.js erzeugt ComicBox die Embeddings möglichst direkt auf dem Gerät, auf geeigneter Hardware beschleunigt durch WebGPU. 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 PouchDB und CouchDB, später mit RxDB und schließlich mit PowerSync. Über Capacitor soll dieselbe Anwendung auch als native iOS- und Android-App funktionieren. Der aktuelle Stack besteht im Wesentlichen aus SvelteKit, Typesense, PostgreSQL, PowerSync und Capacitor. Zum Schluss sprechen wir über Alternativen wie TinEye und CLZ Comics, über das schwierige Einsammeln von Nutzerfeedback und darüber, dass Robert und ComicBox demnächst auch in Die Sprechblase vorgestellt werden.
Links
InstantSearch
Frontend-Bibliotheken für Suchoberflächen, die sich auch mit Typesense verwenden lassen.
Better Auth
Authentifizierungslösung, die Robert für die Benutzerkonten von ComicBox einsetzt.
IndexedDB
Browser-Datenbank für die lokale Speicherung der Comic-Sammlung.
SharedWorker
Web-API, die im Zusammenhang mit der tabübergreifenden Synchronisation durch PowerSync zur Sprache kommt.
Algolia
Gehostete Suchplattform, die im Gespräch mehrfach als Vergleich zu Typesense dient.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 8 min
September 22 Revision 730: Vike, mit Rom Brillout
Vanessa spricht diese Revision mit Rom Brillout (LinkedIn), dem Macher von Vike, ü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
Shownotes
[00:01:00] Vike
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 sich aktuell intensiv mit KI.
Links
Vike Talk Slides
Vike Land
Vike Land bündelt das erweiterte Ökosystem rund um Vike, unter anderem für Extensions und darauf aufbauende Frameworks.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 17 min
September 15 Revision 729: ARIA Actions, Shortcuts und neue Navigationswege
In dieser Ausgabe unserer ARIA-Runde sind Paweł Masarczyk (Mastodon), Peter Krautzberger (LinkedIn / Mastodon) und Marco Bretschneider (Mastodon) 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
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 Aktionen möglicherweise selbst für Tastaturnutzer:innen zugänglich machen. Wir erinnern uns dabei auch an frühere Browserfunktionen wie die Navigation über rel="next" und rel="prev" in Opera Presto und wünschen uns generell etwas mehr Innovation bei nativer Browser-Navigation.
[00:26:28] aria-keyshortcuts und accesskey
Von sekundären Aktionen kommen wir direkt zu Tastaturkürzeln. Marco berichtet von Erfahrungen mit dem HTML-Attribut accesskey, dessen praktische Verwendung dadurch erschwert wird, dass die tatsächlich notwendige Tastenkombination von Betriebssystem und Browser abhängt. aria-keyshortcuts löst dieses Problem nicht, denn das Attribut implementiert selbst keinen Shortcut. Es stellt assistiven Technologien lediglich die Information bereit, dass eine Anwendung eine bestimmte Tastenkombination anbietet, beispielsweise wenn diese mit JavaScript implementiert wurde.
Dabei stoßen wir schnell auf das grundsätzliche Problem von Keyboard-Shortcuts im Web: Betriebssystem, Browser, Screenreader und Webanwendung beanspruchen jeweils Tastenkombinationen für sich. Paweł erzählt von einem Podcast-Player, bei dem Escape zum Stoppen der Wiedergabe verwendet wurde. VoiceOver unter iOS bildet seine Zurück-Geste in Safari jedoch ebenfalls auf Escape ab, wodurch die eigentlich bequeme Screenreader-Navigation unerwartet nicht mehr funktionierte. Ähnliche Konflikte gibt es mit F6 sowie mit sprachspezifischen Tastaturlayouts. Auf polnischen Tastaturen werden beispielsweise Sonderzeichen über AltGr-Kombinationen eingegeben, die wiederum von Anwendungen oder Screenreadern als Shortcuts beansprucht werden können.
Wir diskutieren deshalb, ob abstrakte Aktionen langfristig der bessere Ansatz sein könnten. Statt konkrete Tastenkombinationen festzulegen, würde eine Webanwendung nur beschreiben, welche Aktionen verfügbar sind. Browser, Betriebssystem und assistive Technologie könnten daraus jeweils eine zum Nutzungskontext passende Bedienung ableiten. Peter erwähnt außerdem eine von JAWS unterstützte Lösung über data-at-shortcutkeys, mit der sich Shortcuts samt Beschreibung hinterlegen lassen und deren Standardisierung bereits diskutiert wurde.
[00:45:01] Das Meter-Element und assistive Technologien
Peter ist über eine Diskussion im KoliBri-Projekt auf ein Problem mit dem HTML-Element meter gestoßen. Die semantischen Informationen des Elements werden zwar grundsätzlich über die Accessibility APIs weitergereicht, Screenreader geben wichtige Werte wie Minimum und Maximum aber nicht unbedingt aus. Das führt zu der paradoxen Situation, dass Entwickler:innen erwägen, das native HTML-Element durch eine eigene ARIA-basierte Lösung zu ersetzen, obwohl die erste ARIA-Regel eigentlich genau davon abrät, wenn bereits passendes HTML existiert.
Ganz trivial ist das Problem allerdings nicht. Würden Screenreader bei jedem Meter sämtliche Informationen wie aktuellen Wert, Minimum, Maximum, Low, High und Optimum vorlesen, könnte das schnell unnötig ausführlich werden. Ohne den Kontext können Nutzer:innen einen einzelnen Wert wiederum unter Umständen gar nicht sinnvoll einordnen. Wir diskutieren deshalb, ob solche Angaben eher als abrufbare Sekundärinformationen behandelt werden müssten.
Hinzu kommt die Frage, warum Elemente wie meter und progress vergleichsweise selten eingesetzt werden. Marco erinnert an eingeschränkte Styling-Möglichkeiten, wegen derer Teams solche Komponenten häufig selbst nachbauen. Peter hält dagegen, dass meter durchaus Informationen ausdrücken kann, die über einen einfachen Prozentbalken hinausgehen, etwa Grenzwerte für ein bestandenes Prüfungsergebnis oder einen Ladezustand, ab dem ein Fahrzeug sein Ziel erreichen kann. Genau solche semantischen Informationen wären für assistive Technologien eigentlich wertvoll, wenn sie zuverlässig zugänglich gemacht würden.
[00:59:21] Eine andere Navigation durch das Web
Paweł stellt einen experimentellen Prototyp vor, mit dem er untersucht, wie Webseiten für Screenreader-Nutzer:innen anders strukturiert werden könnten. Die Anwendung basiert auf Python und wxPython und verwendet im Hintergrund einen Headless-Chromium samt Playwright. Statt eine Webseite wie ein klassischer Screenreader weitgehend linear zu präsentieren, soll die vorhandene Semantik in eine hierarchische Oberfläche aus nativen Windows-Controls übersetzt werden.
Landmarks wie Banner, Navigation, Main oder Footer bilden dabei größere Container, Überschriften strukturieren die darin enthaltenen Inhalte weiter. Paweł behandelt Überschriften konzeptionell wie Kapitel eines Buchs und damit ebenfalls als Container für die jeweils folgenden Inhalte. Formulare werden auf native Eingabefelder, Checkboxen und Radiobuttons abgebildet, Listen sollen zu Listenfeldern und Tabellen zu navigierbaren Grids werden. Navigationsbereiche sollen wiederum über eine klassische Menüstruktur erreichbar sein. Ziel ist ausdrücklich nicht, einen neuen Browser zu bauen oder fehlende Semantik einer Webseite zu reparieren. Der Prototyp soll vorhandenes semantisches HTML und ARIA lediglich anders darstellen.
Hintergrund ist Pawełs Erfahrung, dass insbesondere weniger erfahrene Screenreader-Nutzer:innen Schwierigkeiten haben können, die flache Darstellung einer komplexen Webseite gedanklich in ihre eigentliche Struktur zu übersetzen. Landmarks, in der deutschen NVDA-Übersetzung als „Sprungmarken“ bezeichnet, und Überschriften liefern bereits viel Struktur, werden aber nicht von allen Nutzer:innen gleichermaßen eingesetzt. Paweł möchte untersuchen, ob eine explizit hierarchische Darstellung den Einstieg erleichtern kann.
Wir vergleichen den Ansatz mit der gruppierten Navigation von VoiceOver und der Objektnavigation von NVDA und streifen frühere Ideen zur Spatial Navigation. Sollte der Prototyp weit genug kommen, möchte Paweł ihn als Open Source veröffentlichen, sodass einzelne Ideen daraus beispielsweise in Screenreader-Add-ons übernommen werden könnten. Zum Schluss landen wir wieder bei einem Thema, das sich durch die gesamte Folge zieht: Von besseren, semantisch beschriebenen Navigationswegen könnten nicht nur Screenreader-Nutzer:innen, sondern ebenso Menschen profitieren, die Webseiten hauptsächlich mit der Tastatur bedienen.
Links
Peter Krautzberger zur Lesbarkeit der ARIA-Spezifikation
Ein Beitrag von Peter zur Frage, wie zugänglich und verständlich die ARIA-Spezifikation selbst eigentlich geschrieben ist.
What Can’t I Press?
Das Werkzeug von Eric Bailey zum Untersuchen und Dokumentieren von Tastaturkürzeln.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 27 min
September 08 Revision 728: Wie hat sich UX-Arbeit in den letzten Jahren verändert? Mit Stefan Nitzsche.
Wir sprechen mit Stefan Nitzsche (LinkedIn), 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 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.
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
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 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. Statt des offiziellen Figma-MCP verwendet er inzwischen vor allem den von TJ Pitre beziehungsweise Southleft entwickelten Figma Console MCP 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 Penpot samt MCP-Server. Die lokalen Lösungen sind für ihn derzeit noch langsamer und qualitativ schwächer, könnten aber eine Alternative darstellen, wenn Projektdaten nicht an externe KI-Dienste übermittelt werden sollen.
Wir schauen uns außerdem Claude Design an. Stefan sieht darin momentan vor allem einen Ansatz, Gestaltungsregeln wie Farben, Typografie, Logos und andere Vorgaben eines Designsystems für die KI bereitzuhalten. Für seinen eigenen Workflow ist allerdings eine andere Veränderung entscheidender: Statt sofort Figma mit Prompts zu steuern, erarbeitet er zunächst gemeinsam mit Claude ein möglichst präzises textuelles Konzept. Erst wenn Prinzipien, Zielgruppe, Nutzungssituation und notwendige Schnittstellen geklärt sind, lässt er daraus Gestaltung entstehen. Damit nähert sich UX interessanterweise der Entwicklung an, über die wir bereits in Revision 716 zu Agentic Engineering statt Vibe Coding gesprochen haben: Erst planen und spezifizieren, dann umsetzen.
Trotz der beeindruckenden Ergebnisse bleiben die Modelle für Stefan Werkzeuge, deren Arbeit kontrolliert werden muss. Ohne fachliche Steuerung produzieren sie schnell solides, aber generisches Mittelmaß. Das hebt zwar den qualitativen Boden an und macht es wesentlich einfacher, ein brauchbares Interface zu bauen. Für wirklich gute und eigenständige Ergebnisse braucht es aber weiterhin Erfahrung, Kritik und zahlreiche Iterationen. Ähnlich wie beim Programmieren kann eine KI Entscheidungen treffen, deren langfristige Konsequenzen jemand ohne entsprechendes Fachwissen gar nicht erkennt.
Damit landen wir auch beim derzeitigen Slop-Backlash. KI-generierte Gestaltung ist häufig technisch und handwerklich vollkommen akzeptabel, sieht aber zunehmend ähnlich aus. Schepp beschreibt das anhand KI-generierter Plakate auf dem Düsseldorfer Gourmet Festival: An den einzelnen Motiven ist wenig auszusetzen, in ihrer Masse wirken sie jedoch auffällig uniform. Fachwissen wird deshalb gerade dann wichtig, wenn das Ergebnis über diesen Durchschnitt hinausgehen und eine eigene gestalterische Identität entwickeln soll.
Stefan betont dabei, dass seine Begeisterung für die neuen Möglichkeiten nicht mit unkritischer Begeisterung für KI gleichzusetzen ist. Wir sprechen über Energie- und Ressourcenverbrauch, Rechenzentren und Hardware, Datenschutz und Abhängigkeiten von großen KI-Anbietern, aber auch über die Folgen für den Arbeitsmarkt. Stefan erlebt diese unmittelbar: KI macht Teile seiner eigenen Arbeit wesentlich schneller, gleichzeitig kommen bestimmte Aufträge gar nicht mehr bei ihm an, weil Kunden sie inzwischen selbst mit KI erledigen.
Abseits der KI diskutieren wir, welchen Stellenwert UI überhaupt noch als Differenzierungsmerkmal besitzt und wie viel Eigenständigkeit ein Interface braucht. Generische Gestaltung kann für viele Anwendungen vollkommen ausreichend sein, gerade bei Werkzeugen steht die Funktion im Vordergrund. Trotzdem unterscheiden wir zwischen einem lediglich optisch wenig aufregenden Interface und tatsächlichen UX-Problemen. Als Beispiel für Letzteres kommt rad-net.de zur Sprache. Wenn schlechte Bedienbarkeit die eigentliche Aufgabe erschwert, reicht funktionale Software eben nicht aus. Gleichzeitig sorgt die neue Generation von Werkzeugen dafür, dass zumindest die Hürde für ein ordentlich gestaltetes Interface immer niedriger wird.
Zum Schluss drehen wir die Perspektive um: Interfaces werden künftig nicht zwangsläufig ausschließlich von Menschen benutzt. KI-Agenten können selbst zu Nutzern von Websites und Anwendungen werden, während Menschen ihre Recherche zunehmend von KI erledigen lassen und dadurch mit einem ganz anderen Informationsstand auf einer Website ankommen. Das knüpft an unser Gespräch mit André Richter in „Die Website der Zukunft“ an. Maschinenlesbarkeit und auf konkretere Bedürfnisse zugeschnittene Informationen gewinnen dadurch an Bedeutung, während sich die klassische Rolle einer Landingpage verändern könnte. Einen weiteren Blick auf diese Entwicklung wirft der Artikel AI agent web traffic: what developers need to change.
Und weil die Entwicklung noch lange nicht abgeschlossen ist, gibt es möglicherweise bald noch einen weiteren Ort, an dem Stefan darüber spricht: Gemeinsam mit David möchte er die Technikwürze wiederbeleben und dort unter anderem die Veränderungen rund um UX, KI und Software Engineering begleiten.
Links
Revision 136: Smashing Conference und ein moderner Design-Workflow
Stefans erster Besuch beim Working Draft vor 13 Jahren, bei dem es unter anderem um damalige Design-Workflows ging.
Christine Vallaure de la Paz / Moonlearning
Plattform zum Lernen von UI- und UX-Design mit Figma, die sich inzwischen auch intensiv mit KI-gestützten Design-Workflows beschäftigt.
Figma Console MCP von TJ Pitre / Southleft
Alternativer MCP-Server für Figma, den Stefan für die Zusammenarbeit zwischen Claude Code und Figma verwendet.
Penpot MCP Server
MCP-Anbindung für Penpot, mit der Stefan in Kombination mit selbst gehostetem Penpot und lokalen Modellen experimentiert.
Claude Design
Anthropics Design-Werkzeug, das unter anderem Gestaltungsregeln, Markenrichtlinien und Designsysteme in KI-gestützte Workflows einbeziehen kann.
Revision 716: Agentic Engineering statt Vibe Coding
Unsere Revision über strukturierte KI-Workflows im Software Engineering, die einige Parallelen zu Stefans aktuellem UX-Workflow aufweisen.
rad-net.de
Die Radsport-Plattform dient uns als Beispiel für ein Interface, bei dem insbesondere die User Experience Verbesserungspotenzial bietet.
Working Draft On Tour: Die Website der Zukunft
Unser Gespräch mit André Richter über die Auswirkungen von KI-Agenten, Maschinenlesbarkeit und verändertem Nutzerverhalten auf zukünftige Websites.
Technikwürze
Der frühere Web-Podcast, den Stefan gemeinsam mit David wiederbeleben und unter anderem für Themen rund um UX, KI und Software Engineering nutzen möchte.
AI agent web traffic: what developers need to change
Artikel über den zunehmenden Zugriff von KI-Agenten auf Websites und die daraus entstehenden Anforderungen an Webanwendungen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 25 min