Working Draft » Podcast Feed

In dieser Folge setzen wir dort an, wo wir mit der vorherigen ARIA-Glücksrad-Folge aufgehört haben. Denn wir haben nach der Veröffentlichung tolles Feedback bekommen und holen uns deren Absender als Verstärkung rein: Mit Accessibility Engineer Daniela Kubesch (LinkedIn / Bluesky / Mastodon), Frontend/Design-Systems Engineer Marco Bretschneider (Mastodon), Web-Technologie-Consultant und W3C Invited Expert Peter Krautzberger (LinkedIn / Mastodon) und Accessibility Experience Experten Paweł Masarczyk (Mastodon) sprechen wir darüber, was von ARIA-Attributen in der Praxis wirklich ankommt – bei Browsern, im Accessibility Tree und letztlich bei Screenreadern. 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 Wir gehen systematisch die Attribute aus der letzten Glücksrad-Runde durch, ordnen sie technisch ein und ergänzen sie um Perspektiven aus Spezifikation, Implementierung und tatsächlicher Nutzung. Dabei wird klar: Zwischen Spec-Idee, API-Mapping und realer Unterstützung liegen oft Welten. Shownotes [00:05:08] aria-placeholder Wir klären, dass aria-placeholder tatsächlich das ARIA-Pendant zum HTML-placeholder ist – gedacht für selbstgebaute Input-ähnliche Controls. Alle sind sich einig: In freier Wildbahn sieht man es kaum, was vermutlich auch ein gutes Zeichen ist. Spannend ist vor allem, wie Placeholder von Screenreadern angesagt werden und wie sie sich von aria-describedby unterscheiden lassen. [00:11:25] aria-details & ariaDetailsElements (DOM) Peter nutzt die Gelegenheit für einen Deep Dive: aria-details ist kein „längeres Describe-By“, sondern ein eigenes Pattern, entstanden aus echten Use-Cases (z. B. Google Docs mit Kommentaren). Wir sprechen über die neuen Element-APIs, die ohne ID-Listen auskommen, über Popover-Verknüpfungen und darüber, wie vage Specs bewusst Spielraum für Assistive Technologien lassen. [00:21:13] (Core) Accessibility API Mappings (AAM) Ein Abstecher unter die Haube: AAM-Spezifikationen beschreiben, wie DOM und ARIA auf die Accessibility-APIs der Betriebssysteme gemappt werden. Eigentlich für Browser-Hersteller gedacht – aber extrem hilfreich, um zu verstehen, wo Informationen verloren gehen oder ergänzt werden. [00:33:35] aria-posinset & aria-setsize Die Klassiker für große, virtuelle Datenmengen. Wir diskutieren, warum diese Attribute auf Einzelelementen sitzen müssen, wie gut sie tatsächlich unterstützt sind und ob User Agents nicht mehr selbst berechnen sollten. Fazit: theoretisch sinnvoll, praktisch noch eine Baustelle. [00:47:17] aria-errormessage Ein gutes Beispiel für das Dilemma „gute Idee, holprige Unterstützung“. Während NVDA und TalkBack Fortschritte machen, bleibt die Abdeckung lückenhaft. Trotzdem sehen wir den Mehrwert gegenüber reinem aria-describedby – gerade, wenn Fehlermeldungen klar als solche kommuniziert werden sollen. [00:50:31] CSS Speech & Audio-Design Wir diskutieren die Idee, Audio-Ausgabe per CSS zu beeinflussen: von Tonhöhe über Geschwindigkeit bis hin zu Sound-Design. Zwischen Branding-Potenzial und Kontrollverlust für Nutzer:innen entsteht eine Grundsatzfrage, die stark an Debatten rund um Alternativtexte erinnert. [01:05:11] Braille-Properties Sehr spezielle Werkzeuge für sehr spezielle Fälle. Peter erklärt, warum Braille-Attribute existieren, wofür sie gedacht sind (z. B. Bildung, Musik- oder Chemienotation) – und warum man sie in 99,9 % der Fälle besser nicht anfasst. [01:15:15] aria-colcount, aria-colindex & Tabellen Wir landen wieder bei großen Tabellen, Grids und Tree-Grids: Wann machen zusätzliche ARIA-Infos Sinn, wann sind sie redundant? Besonders spannend sind menschenlesbare Index-Texte (z. B. Schachfelder wie „A4“) jenseits reiner Zahlen. [01:23:01] aria-multiselectable Ein eher leises Signal mit großer Wirkung: Es teilt Assistive Technologien mit, dass eine interaktive Liste Mehrfachauswahl erlaubt. Wir ordnen es ein zwischen nativen Desktop-Patterns, Web-Mail-UIs und den WAI-ARIA Authoring Practices. Links A-Tag Wien 2026 Accessibility-Konferenz in Wien, Anmeldung ab 1. Februar. ARIA Actions Vorschlag für ein neues Pattern, um sekundäre Aktionen besser zugänglich zu machen. Core Accessibility API Mapping Spezifikation zum Mapping von ARIA auf Betriebssystem-APIs. ARIA-Issues zu Placeholder, Details & Co. Diskussionen rund um mehrere der besprochenen Attribute. HTML-Support in Screenreadern Überblick zu tatsächlicher Unterstützung von HTML-Features. Deprecation-Diskussion zu aria-errormessage Einblick in die Debatte innerhalb der ARIA Working Group. Léonie Watson: CSS Speech Vortrag zur Motivation und Einordnung von CSS Speech. JAWS Sound Schemes Beispiel für nutzerseitig konfigurierbares Audio-Feedback. Pronunciation Task Force „Gegenseite“ im Diskurs um Aussprache und Audio-Kontrolle. Leonie Watson: Addressing concerns about CSS Speech Einordnung der Kritikpunkte und Gegenargumente. Vasilis van Gemert: Exclusive Design Talk mit spannenden Audio- und Nicht-visuellen Design-Experimenten. WAI-ARIA Authoring Practices: Listbox Referenzmuster für interaktive (auch multiselect-fähige) Listen.

In dieser Folge sprechen wir zu zweit über unsere Eindrücke rund um den Government Site Builder (GSB) – ausgelöst durch unseren Besuch auf der T3CON in Düsseldorf. Eigentlich wollten wir vor Ort ein Interview zum Projekt führen. Herausgekommen ist stattdessen eine kurze, leicht rantige Bestandsaufnahme darüber, wie schwer es ist, überhaupt belastbare Informationen oder Gesprächspartner:innen zum GSB zu finden. Wir sprechen darüber, warum uns das Thema trotz (oder gerade wegen) politischer Rahmenbedingungen interessiert, welche Rolle das Informationstechnikzentrum Bund (ITZ-Bund) spielt, wie Agenturen in sogenannten „Losen“ organisiert sind – und warum ein Projekt, das sich selbst als 100 % Open Source bezeichnet, von außen oft erstaunlich verschlossen wirkt. [00:01:06] Government Site Builder (GSB 11) Der Government Site Builder ist ein von der Bundesverwaltung initiiertes Projekt, das eine standardisierte technische Basis für Webseiten von Bundesbehörden bereitstellt. Die aktuelle Version GSB 11 basiert auf TYPO3 und wird vom ITZ-Bund verantwortet. Ziel ist es, Digitalisierung voranzubringen, Abhängigkeiten von proprietären Systemen zu reduzieren und eine einheitliche, barrierearme Plattform für Behördenwebsites zu schaffen.In der Umsetzung arbeitet das Projekt mit mehreren Vergabelosen: Während das ITZ-Bund den grundlegenden Tech-Stack verantwortet (Los 1), werden Migrationen und Implementierungen von Agenturen übernommen (Los 3). Als Generalunternehmer fungiert dabei eine große Agentur, unter deren Dach zahlreiche weitere Agenturen eingebunden sind. Trotz des Open-Source-Anspruchs stößt man aktuell auf Hürden: Verlinkte Code-Repositorien sind schienen teilweise nicht öffentlich zugänglich, Aussagen zum Projekt müssen offenbar umfangreich abgestimmt werden, und selbst auf Konferenzen fällt es schwer, auskunftsfähige Ansprechpartner:innen zu finden. Das steht in einem spürbaren Kontrast zu früheren Vorbildern wie gov.uk, wo technische Erkenntnisse, Accessibility-Learnings und Architekturentscheidungen offen in die Community zurückgespielt wurden. Genau diese Offenheit vermissen wir aktuell beim GSB – obwohl das Projekt aus öffentlichen Mitteln finanziert wird und explizit Transparenz betont. Update: Nach Hinweisen von Hörenden liegt das Projekt auf Open Code hier und der Sourcecode selbst hier Vielen Dank dafür!. Links bundespolizei.de Beispiel einer Website, die bereits auf Basis von GSB 11 umgesetzt wurde. karriere.bund.de Weitere öffentlich genannte Referenz für einen produktiven Einsatz des Government Site Builders. CoreMedia Kommerzielles, Java-basiertes CMS, auf dem frühere GSB-Versionen (z. B. Version 7) noch weit verbreitet laufen. KoliBri Web-Components-basierte Frontend-Library, die im Kontext des GSB als mögliche UI-Basis erwähnt wird. David Heinemeier Hansson Erwähnt im Kontext der Diskussion, was „Open Source“ eigentlich bedeutet, wenn Code zwar einsehbar, aber kaum offen für externe Beiträge ist.

In dieser Folge sprechen wir mit Frederik Braun (Mastodon) aus dem Firefox-Security-Team bei Mozilla über den langen Weg der Sanitizer API: Von ersten Prototypen vor über fünf Jahren bis zum geplanten Shipping in Firefox und Chrome im Februar 2026. Schaunotizen [00:01:08] Die Sanitizer API Einleitend klären wir, warum Cross-Site-Scripting (XSS) auch 2026 noch eines der größten Web-Security-Probleme ist, weshalb bestehende Lösungen wie DOMPurify, Content Security Policy oder Trusted Types zwar helfen, aber kaum breit eingesetzt werden – und dass die Sanitizer API einen neuen, deutlich praxisnäheren Ansatz verfolgt.Die Sanitizer API ist ein neuer Web-Standard, mit dem sich unsicheres HTML direkt beim Einfügen in den DOM bereinigen lässt – ohne String-Roundtrips und ohne zusätzliche Bibliotheken. Statt Element.innerHTML = html wird künftig Element.setHTML(html) verwendet. Der Browser übernimmt Parsing, Bereinigung und Einfügen in einem Schritt und verhindert zuverlässig Cross-Site-Scripting, DOM-Clobbering und viele Varianten von Mutated-XSS. Links Revision 447: XSS und die HTML Sanitizer API Die eingangs erwähnte, mittlerweile fünfeinhalb Jahre alte Folge mit Frederik, in der XSS und die ursprüngliche Idee der Sanitizer API bereits ausführlich besprochen wurden. Revision 452: CORS, CORP, (C)ORB, COOP und COEP Eine weitere Folge mit Security-Fokus, nämlich zu diversen sicherheitsrelevanten HTTP-Headern, ebenfalls mit Frederik. Revision 514: ASTs, Linter und Security mit Frederik Braun In dieser Revision reden sprechen wir mit Frederik über Abstract Syntax Trees, Lexer und Parser. Und natürlich Security! DOM Clobbering Angriffstechnik, bei der HTML-IDs oder Names bestehende JavaScript-Objekte überschreiben und so Logikfehler oder Sicherheitslücken auslösen. Höre dazu auch Revision 202: Sicherheitslücken – DOM Clobbering, XSS via CSS, ES6 Fallen. Interop-Projekt Browser-übergreifende Initiative zur Angleichung von Web-Plattform-Features, potenziell relevant für Trusted Types in zukünftigen Iterationen.

Dieses Interview ist Teil der Serie On Tour @ #t3con. T3CON ist die jährliche Konferenz, bei der es um alle Themen rund um TYPO3 geht. Wir waren am 25. November 2025 in Düsseldorf beim Community Day vor Ort und haben die Stimmung und einige Interviews mitgenommen. Incluthon: Inklusion testen statt abhaken Auf dem Community Day der T3CON in Düsseldorf sprechen wir mit Stefan Barac (LinkedIn) über Incluthon: eine Initiative, die Menschen mit Behinderungen mit Unternehmen zusammenbringt, um digitale Produkte wirklich inklusiver zu machen. Statt reiner Checklisten geht’s um echte Usability-Tests mit Accessibility-Fokus, bei denen Barrieren aus realer Nutzungsperspektive sichtbar werden. Außerdem geht’s um Mentoring und Sensibilisierung für ganze Produktteams: von verständlicher Sprache über passende Ikonografie und Informationsarchitektur bis hin zu der Erkenntnis, dass Accessibility ein fortlaufendes Programm ist (kein einmaliges Projekt). Wir streifen dabei auch regulatorischen Druck (BFSG, European Accessibility Act) und die WebAIM-Million-Studie als Reality-Check – und empfehlen ausdrücklich, sich die Demos/Webinare von Claudio Zeni anzuschauen, um ein besseres Gefühl für assistive Technologien in der Praxis zu bekommen. Auf YouTube findest du das Video zu unserem Gespräch.

So lang ist es her (5 Jahre), dass Anselm Hannemann hier im Working Draft Teil des Podcast-Teams war. Jetzt habe ich (Hans) ihn mal gefragt, ob er mal wieder bei uns zu Gast sein möchte — und er hat ja gesagt. Heute geht’s mal um Anselm, was ihn zu dem gemacht hat, der er heute ist, und was er in den letzten Jahren so getrieben hat. Schaunotizen [00:03:30] Zum Programmieren gekommen Wir sprechen darüber, wie wir uns kennengelernt haben. Da war der Weg nicht weit, um über Anselms Werdegang zu sprechen: Ausbildung, Studium und erste Projekte. Spannend auch, wie damals Print-Design ins Web gebracht wurde. [00:20:30] Engineering Management als Freelancer Wir sprechen darüber, wie sich Engineering Management außerhalb klassischer Festanstellungen anfühlt und welche besonderen Herausforderungen das Freelancing in dieser Rolle mit sich bringt. Anselm erzählt, zwischen Technik, Menschenführung und Erwartungen von Auftraggebern zu navigieren, wie Verantwortung ohne formale Macht funktioniert und warum Kommunikation, Vertrauen und klare Rollen dabei entscheidend sind. [00:31:00] Burn-out, Prävention und Gartenprojekt Ein tolles Projekt, das Anselm vor einigen Jahren ins Leben gerufen hat, ist eine eigene Gärtnerei. Nach Burn-out und Überlegungen, wie man im Software-Engineering eigentlich gesund bleibt, kam es zu dieser kostspieligen Idee. Unser Gespräch geht über die Finanzierung und Personal-Coaching, das aus dem Burn-out hilft. [00:53:22] Anselms aktuelles technisches Interesse Schnelle AI-Modelle, LLMs lokal laufen lassen, Accessibility AI und wann funktioniert AI für Coding. Links How Farming Saved Me From Developer Burnout Eine ziemlich cool gemachte Doku über Anselm, seinen Weg als Entwickler und Freelancer sowie darüber, wie er nach einem Burn-out neue Perspektiven zwischen Software-Engineering, Selbstorganisation und Gartenarbeit gefunden hat.

Dieses Interview ist Teil der Serie On Tour @ #t3con. T3CON ist die jährliche Konferenz, bei der es um alle Themen rund um TYPO3 geht. Wir waren am 25. November 2025 in Düsseldorf beim Community Day vor Ort und haben die Stimmung und einige Interviews mitgenommen. Frontend State of TYPO3 Mit Thomas Maroschik konnten wir ein TYPO3 Board Member für uns gewinnen. Er gibt uns Einblicke, wie Frontend Technologien in TYPO3 gerade ein neues Hoch erfahren, wie man TYPO3 als Headless CMS nutzen kann und wie KI TYPO3 beeinflusst. Auf YouTube findest du das Video zu unserem Gespräch.

Zum Jahresende gibt’s noch ein kleines Extra für Euch: Unsere großartige Post-Producerin Sabine hat sich hingesetzt und aus dem Jahr wieder herrliche Outtakes zusammengeschnitten – Versprecher, Neustarts, Ratlosigkeit, Lachen und all die Momente, die es sonst nie in die Folge schaffen. Ein liebevoller Blick hinter die Kulissen von Working Draft und ein Geschenk, über das wir uns sehr gefreut haben. Viel Spaß beim Hören (und Mitlachen)!

In dieser Revision schauen wir wieder gemeinsam auf frische Browser-Features aus Chrome, Firefox und den WebKit Nightlies. Wir sprechen über praktische Bugfixes, neue CSS-Möglichkeiten, bessere DOM-APIs und ein paar eher nischige, aber extrem mächtige JavaScript-Neuerungen. Schaunotizen [00:02:10] Overscroll-Behavior für Container ohne Scroll-Layer (Chrome) Chrome respektiert overscroll-behavior jetzt auch dann, wenn ein Element faktisch keinen eigenen Scroll-Container hat. Das behebt einen langjährigen Pain Point bei Dialogen, Overlays und Off-Canvas-Navigationen, bei denen sonst plötzlich der Seitenhintergrund scrollt. Wir erklären, warum das bisher ein Spec-Problem war, wieso Chrome hier nachgezogen hat und warum man sich damit endlich fiese Workarounds sparen kann. Als anschauliches Beispiel schauen wir uns eine Scroll-Situation auf code.movie an. [00:11:50] WeakMap & WeakSet mit nicht-registrierten Symbols (Firefox) Firefox erlaubt nun auch nicht-registrierte Symbols als Keys in WeakMap und WeakSet. Damit sind Weak-Collections endlich vollständig konsistent mit der Garbage-Collection-Semantik von Symbols. Wir sprechen ausführlich darüber, warum das relevant ist, wann man Symbols überhaupt sinnvoll einsetzt und wie Peter sie unter anderem in seinem Web-Component-Framework Ornament nutzt – inklusive Exkurs zu registrierten Symbols, Symbol.for() und instanceof-Fallstricken bei gebundelten Libraries. [00:30:23] CSS stretch-Keyword für width/height Mit dem neuen Keyword stretch lassen sich Elemente sauber über die Content-Box ihres Elternteils aufspannen – ohne calc(), ohne absolute Positionierung und ohne Wissen über Padding. Wir ordnen ein, warum das funktional dem alten -webkit-fill-available entspricht, wie die Browser-Unterstützung aussieht (Can I Use) und warum das Feature trotz breiter Nutzbarkeit noch nicht als Baseline gilt. [00:36:27] Atomics.waitAsync() Atomics.waitAsync() bringt endlich eine Promise-basierte Alternative zur blockierenden Atomics.wait()-API. Damit lassen sich Shared-Array-Buffer-Synchronisationen auch im Main-Thread sinnvoll nutzen. Wir erklären, warum die alte API praktisch nur in Workern sinnvoll war, welche Workarounds man bisher brauchte und warum sich das Feature zwar nach Hardcore-Low-Level anhört, in der Praxis aber trotzdem nur selten lohnt. [00:43:02] @scope @scope ist jetzt Baseline und ermöglicht echtes CSS-Scoping ohne Namenskonventionen, Build-Tools oder CSS-Modules. Styles lassen sich direkt an Komponenten koppeln – inklusive Donut-Scoping für Slots und Durchreiche-Bereiche. Wir diskutieren, warum das besonders für serverseitige Templates (PHP, Twig & Co.) hilfreich ist, wie man damit Toolchains drastisch vereinfachen kann und warum @scope ein echter Gamechanger für „CSS für Arme“ ist – im besten Sinne [01:07:15] moveBefore() moveBefore() ist die State-erhaltende Alternative zu insertBefore(). DOM-Nodes werden verschoben, ohne ihren internen Zustand zu verlieren – inklusive laufender Animationen, Video-Playback und Iframes. Für Web Components ist wichtig, dass sie den neuen connectedMoveCallback Lifecycle-Hook definieren, damit auch sie bei einem Move-Vorgang erhalten bleiben und nicht von Grund auf neu gebaut werden. [01:14:47] CSS sibling-count() & sibling-index() Mit sibling-count() und sibling-index() bekommt CSS endlich Zugriff auf strukturelle Informationen, die bisher nur mit Selector-Akrobatik oder JavaScript möglich waren. Wir erklären, wie man damit responsive Layouts, gestaffelte Animationen oder Karten-Stacks umsetzt – und warum das Zählen ab 1 zwar logisch, aber trotzdem ein dankbarer Diskussionspunkt ist. Schepp fällt eine Coding-Challenge von den Kollegen Syntax.fm ein, bei der Scott Tolinski das Feature sehr anschaulich zu seinem Vorteil einsetzt. [01:21:17] @custom-media (in Arbeit) Eigene Media-Query-Aliasse erlauben sprechende Breakpoints statt Magic Numbers. Firefox ist hier aktuell im Rollout, Chrome und Safari sind schon weiter. Ein großer Gewinn für Wartbarkeit und Lesbarkeit von CSS. [01:22:22] CSS Module Scripts (Firefox auf dem Weg) CSS direkt per JavaScript importieren und als CSSStyleSheet weiterreichen – ohne Bundler, ohne Magie. Firefox schließt hier bald die letzte Lücke. Wir sprechen darüber, warum das besonders für Web-Components und native Module spannend ist und wie sich damit Toolchains und node_modules-Ordner spürbar verkleinern lassen. Links Working Draft Revision 686 Die vorherige News-Round-Up-Folge, auf die wir mehrfach Bezug nehmen – inklusive weiterer Browser-Features, Device-Memory-API und Invoker-Commands. Bower Ein nostalgischer Blick zurück auf einen der frühen Paketmanager fürs Web – inklusive Vogel-Logo, Merch-Shop und der Erkenntnis, dass manche Tools einfach nie ganz verschwinden.

In dieser Revision drehen wir nochmal das Glücksrad – allerdings zum Themenbereich TypeScript und React. Gemeinsam mit unserem Gast Kiki (Hans-Christian Otto), seines Zeichens Paramount Leader von Suora, picken wir zufällige React- und TypeScript-Themen und arbeiten uns von dort aus tief in Parallelwelten, Typsysteme, Debugging-Philosophie und die Grenzen statischer Analyse vor. Es geht um React DevTools, Web Components, any vs. unknown, TypeScript-Overloads, Decorators und die Frage, warum HTML kaputt sein darf – und vermutlich immer bleiben wird. [00:03:37] React useDebugValue useDebugValue ist ein React-Hook, mit dem sich Zusatzinformationen in den React DevTools anzeigen lassen. Im Kern eine Art strukturierter Debug-Output, der besonders hilft, wenn dieselbe Komponente mehrfach im Tree auftaucht. [00:27:28] Debugging in React & DevTools Wir vergleichen klassisches Browser-Debugging mit React-Debugging und diskutieren, warum React eigene DevTools braucht: synthetische Events, virtueller DOM und eine parallele Realität zur Web-Plattform. [00:39:00] Web Components & Custom Elements Exkurs in die Welt der Web Components: Warum Debugging dort oft einfacher ist, weil es keine virtuelle Abstraktion gibt – und was passiert, wenn ein Custom Element nie registriert wird. Spoiler: Der Browser bleibt erstaunlich gelassen. [00:00:00] Kaputtes HTML & Browser-Parsing Wir diskutieren, warum Browser kaputtes HTML akzeptieren müssen, weshalb XHTML sich nie durchgesetzt hat und warum ein strikt validierender Browser automatisch ein schlechter Browser wäre. [00:00:00] React isValidElement() Ein eher unbekanntes React-API zur Laufzeitprüfung von React-Elementen. Wir schauen unter die Haube, stolpern über interne Marker wie $$typeof und landen bei Cross-Realm-Problemen. [00:46:26] TypeScript any vs. unknown Ein zentrales Thema der Folge: any als kompletter Opt-out aus dem Typsystem versus unknown als sichere Grenze. Wir erklären Typ-Hierarchien und warum unknown fast immer die bessere Wahl ist. [00:00:00] TypeScript: unknown als Sicherheitsgrenze Wir sprechen über reale Einsatzszenarien, etwa bei fetch(), und warum ein sauberer Typ-Reset oft sinnvoller ist als das blinde Akzeptieren von any. [00:48:56] TS-Reset & Fetch-Typen Ein Community-Projekt, das TypeScript-Defaults bewusst verschärft. Wir diskutieren Chancen, Risiken und warum solche Tools sowohl helfen als auch schaden können. [00:00:00] TypeScript Function Overloads Ein Pattern für robuste APIs: nach außen präzise Typen für gute Autocompletion, nach innen unknown für saubere Validierung. Besonders relevant für Library-Autor:innen. [01:23:42] TypeScript Decorators Wir sprechen über Legacy-Decorators, Standard-Decorators und warum "experimentalDecorators" oft mehr Probleme schafft als löst. [01:33:17] Symbol.hasInstance & instanceof Ein tiefer Abstecher in Runtime-Typprüfungen, mehrfach gebundelte Klassen und warum instanceof in größeren Codebases schnell trügerisch wird.

Wir drehen wieder am „Glücksrad“ – diesmal strikt mit HTML-Vokabular. Schepp hat sich Jens Oliver Meiert eingeladen (Frontend Dogma, Web Glossary, Revision 687). MDN-Daten liefern die Zufalls-Themen; wir sezieren Einsatzfälle, Historie, Stolpersteine und moderne Patterns – von id über contenteditable bis hin zu <option>, <datalist> und dem noch jungen Global-Attribut writingsuggestions. Außerdem streifen wir HTML-Geschichte (HTML 2, XHTML 2), IE-Altlasten (designMode, Drag and Drop), XSLT-Rückbau, AJAX-Begriffsgeschichte und aktuelle Bildformate. Schaunotizen [00:03:27] id (MDN) & Spec: The id attribute Historischer Abriss von name-Sprungmarken zu id; warum id als CSS-Selektor teils verpönt wurde (Spezifität), und wann er weiterhin sinnvoll ist (einzigartige Ziele, Relation über for/aria-*). Praktische Kniffe: Attribute-Selektoren, Spezifitäts-Dämpfung via :where(); bei Komponenten Duplikate durch generierte Suffixe/UUIDs vermeiden. [00:15:39] contenteditable, designMode & Rich-Text Use-Cases von Inline-Eingaben bis Comboboxen. Placeholder-Pattern: [contenteditable]:empty::before für Pseudo-Placeholder. contenteditable="plaintext-only" verhindert Stil-Paste. Historische Wurzeln: IE-designMode, vieles später standardisiert. Schepps Blog-Nugget zur IE-Ära: Today the Trident Era ends. Und die Liste an historischen CSS Fehlern. [00:24:36] <b> und <i> (sowie <strong>/<em>) Warum <b> (Aufmerksamkeitsmarkierung) und <i> (idiomatische/andere Stimme) legitime Semantik haben und nicht bloß „Präsentation“ sind. Wir sprechen über historischen Kontext aus frühen HTML-Spezifikationen; Blick in die alten Spec-Dokumente: W3C HTML Spec (Archiv). [00:35:53] <option>, <optgroup> & <datalist> Arbeitspferd im Formular: Gruppenbildung via <optgroup>, deaktivierbare Optionen, label-Attribut (ersetzt sichtbaren Inhalt). <datalist> als unterschätztes Type-Ahead für viele <input>-Typen (Range, Date etc.) – aber Achtung bei tausenden Einträgen (Performance, Match-Heuristiken variieren je nach Browser). Inspiration: „Retropolis“ bei unseren Freunden von Wo wir sind ist vorne. [00:43:40] writingsuggestions Noch jung und teils experimentell: steuert Schreibvorschläge („ghost text“) in editierbaren Feldern. Support-Lage: Chromium/WebKit ja, Firefox noch nicht – sinnvoll dort, wo Inline-Completion UX-Gewinn bringt. [00:47:48] XSLT-Rückbau in Browsern Ökosystem-Abhängigkeiten, Wartbarkeit und Security als Gründe; nostalgischer Blick auf XSLT-basierte Transformations-Pipelines („Sliding Doors“, frühe „Transpile“-Ansätze), warum der Rückbau für die meisten Web-Apps heute verkraftbar ist. Mehr dazu in dieser Folge der Igalia Chats [00:52:13] AJAX, XML HttpRequest & Naming Der Begriff „AJAX“ (populär geworden durch Jesse James Garrett 2005) als Zündfunke für „app-iges“ Web – plus Seitenblick auf noch frühere Publikationen. Für Geschichtsnerds: Internet History Podcast. [00:55:37] Bildformate heute: JPEG XL, WebP, AVIF Trade-offs zwischen Decoder-Sicherheit, Multithreading-Decoding, Migrationspfaden (aus JPEG ableitbar) und Browser-Adoption; warum selbst „alte“ Formate wie PNG noch Updates/Use-Cases haben (APNG, Transparenz). Jake Archibald hat zum Thema „progressive Image Rendering“ ein tolles Blogpost verfasst, in dem auch JPEG XL vorkommt.

In dieser Revision sprechen wir mit unserem Gast Manuel Matuzović über moderne HTML-Praktiken, alte Muster, die sich hartnäckig halten, und darüber, warum manche Links eigentlich Buttons sein sollten. Dabei tauchen wir tief in Semantik, Barrierefreiheit und die Frage ein, warum bestimmte Patterns – trotz aller Probleme – immer wieder im Web auftauchen. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:01:45] javascript:void(0) Aufhänger dieser Revision ist ein Muster, das uns seit Jahren immer wieder begegnet: Die verbreitete Nutzung von href="javascript:void(0)" und verwandten Dingen in Links. Wir beklagen, dass dieses Pattern nicht nur technisch fragwürdig ist, sondern auch aus Sicht von Barrierefreiheit, Nutzererwartungen und allgemeiner HTML-Semantik massive Probleme nach sich zieht. Dafür arbeiten wir uns zunächst Schritt für Schritt daran entlang, was einen echten, barrierefreien Link überhaupt ausmacht. Dazu gehören ein <a>-Element, ein gültiges href-Attribut und ein klarer Accessible Name. Erst dadurch entstehen Fokussierbarkeit, Tastaturaktivierung, sinnvolle Screenreader-Ausgaben, das korrekte Verhalten in Linklisten, die bekannten Linkzustände und das erwartete Interaktionsmodell. Alles, was davon abweicht, bricht die Erwartungen der Nutzenden – besonders sichtbar wird das bei Links, die eigentlich Buttons darstellen sollen. javascript:void(0) sehen wir zudem als ein typisches Beispiel für Cargo-Kult: Ein historisches Muster, das weiterlebt, obwohl kaum jemand noch weiß, wozu es ursprünglich gedacht war. Technisch betrachtet evaluiert eine solche URL einfach JavaScript – im Fall von void wird allerdings bewusst undefined zurückgegeben, also „nichts“. Wir benennen die vielen praktischen Probleme, die solcher Code hervorruft: Kontextmenüs bieten unsinnige Optionen an, Mittelklicks öffnen leere Tabs, Screenreader kündigen Elemente als Links an, die sich gar nicht wie Links verhalten, Tastaturnutzende stoßen auf widersprüchliche Aktivierungsmuster und in Listen assistiver Technologien erscheint „Navigierbares“, das kein Ziel hat. Wir diskutieren, wie solche Muster häufig entstehen – sei es aus historisch schwer zu stylenden Buttons, aus Einschränkungen in Component-Libraries, aus unglücklichen Framework-Abstraktionen oder schlicht aus fehlendem Basiswissen über HTML. Aus dieser Perspektive wird klar: In den allermeisten Fällen wäre ein echtes <button>-Element die richtige Wahl. Moderne Browser machen das Styling per all: unset; und wenigen Ergänzungen längst unkompliziert. Wir sprechen darüber, wie hybride Komponenten sinnvoll funktionieren können, warum überflüssige Rollen, Tabindex-Werte oder ARIA-Attribute eher schaden als helfen, und wie man mit einfachen Debug-Strategien – etwa Selektoren wie a[href^="javascript:"] oder Werkzeugen wie a11y.css – problematische Stellen sichtbar machen kann. Im weiteren Verlauf streifen wir verwandte Themen, etwa die alte Debatte um Cursor-Darstellungen bei Buttons, Überlegungen rund um target="_blank" und seine UX-Probleme (Warum target=“_blank“ nervt), sowie die Frage, welche Rollen historische Mechanismen wie <area>-Elemente heute noch spielen können (MDN). Wir stellen fest, dass viele Entwickler*innen HTML fast nur noch durch die Framework-Brille wahrnehmen– und dass genau diese Abstraktionsschichten es erschweren, zu verstehen, was die Basiselemente der Plattform eigentlich können. Eine zentrale Erkenntnis des Gesprächs lautet: Gute HTML-Entscheidungen entstehen nicht dadurch, dass man Muster auswendig lernt, sondern indem man versteht, welche Fähigkeiten jedes Element mitbringt und wie es sich im Browser verhält. Wer entscheidet, „was bringt mir dieses Element?“, trifft fast automatisch die richtigen semantischen und barrierefreien Entscheidungen. Links Der HTM Hell Adventskalender veröffentlicht jedes Jahr vom 1. bis 24. Dezember (und manchmal auch länger) täglich einen neuen Artikel rund um HTML, Barrierefreiheit, Semantik, Best Practices und typische Stolperfallen der Webentwicklung.

In dieser Revision sprechen wir mit Dr. Torsten Beyer, Chemiker und Experte für digitale Nachhaltigkeit, über seinen Weg vom Labor zum grünen Web, die oft übersehenen Umweltkosten des Internets und darüber, wie wir als Webentwickler:innen konkret zur CO₂-Reduktion beitragen können. Wen das Thema weiter interessiert, sollte sich auch die Revision 675: Green Web geben. Ein riesen Dank geht raus an Andreas Sander für das Lied über den Working Draft. Könnt ihr am Ende der Sendung hören :) Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:01:55] Vom Chemiker zum Experten für digitale Nachhaltigkeit Torsten kam als Chemiker zur digitalen Nachhaltigkeit. Geboren 1968 bei 323 ppm CO₂ – circa als das Internet beim Militär erfunden wurde – beobachtet er seitdem beide Kurven steigen. Wir sprechen darüber, wie Flatrates und „unbegrenzter“ Traffic seit 1969 ein falsches Bewusstsein für Daten schufen. Dazu das Jevons-Paradoxon: Speicher wurde drastisch günstiger (vom Commodore 64 zur Mini-SD), aber statt zu sparen, führt das zu Mehrnutzung, die die Einsparungen auffrisst. [00:29:42] Bewusstsein schaffen durch Analyse Torsten gibt einen Überblick über Methoden zur Analyse des CO₂ Fußabdrucks von Websites: The Green Web Foundation – Verzeichnis grüner Hoster, freiwillig. Wenn kein Eintrag: Hoster kontaktieren! Website Carbon – nicht empfehlenswert, fragwürdige Methodik. Digital Beacon – besser, aber Tests nur bis Cookie-Banner. Guter Einstieg. Log-Analyse – beste Methode für echten Traffic-Impact. Unterschätzt: Laut Imperva Bot Report sind 51% des Traffics Bots – steigend durch KI. SEO Soon zeigt, ob KI-Bots gesperrt sind. [00:47:22] Webseiten-Siegel und ihre Problematik Torsten kritisiert käufliche Siegel, die „Klimaneutrale Website“ propagieren, aber eigentlich nur Bäume pflanzen und eine echte Optimierung und Beurteilung vornehmen. Sein Projekt Web4Nature setzt auf messbare Kriterien: nur Websites unter 1 MB erhalten das Siegel. Sogar die allererste Website von 1991 ließe sich um 30% optimieren. Es geht immer besser. [01:05:40] Nachhaltiges Podcasten Auch Podcasts haben einen CO₂-Fußabdruck. Torsten spricht über seinen Podcast Web, But Green! und sein Buch. Keine Schaunotizen Beispiel für gute Nachhaltigkeitskommunikation großer Unternehmen: Unilever Sustainability Notice Torstens Artikel: [1], [2], [3], [4]

Hans und Schepp sprechen darüber, wie weit „Vibe-Coding“ im Vergleich zu AI-Assist in der IDE wirklich trägt. Hans bringt sein Experiment mit, dokumentiert im Blogpost, und wir ordnen ein, wo AI uns Tempo schenkt, wo wir kontrollieren und nachschärfen müssen und warum die Dead Framework Theory im Code-Output der Generatoren so sichtbar wird. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:01:42] AI Code Generators Frontend Comparison Als Testbett nutzt Hans wir eine kleine Reader-Web-App („Speak it“), die Webseiten- und PDF-Texte per Web-Speech-API vorliest. Dabei startet er jeweils mit einer kompakten Markdown-Featureliste und lässt daraus ein MVP bauen. Wir vergleichen anschließend, wie gut sich die Apps ausrollen lassen, wie sauber der Code ist und wie viel Nacharbeit bei Accessibility, Security, State-Management und Architektur nötig bleibt. Parallel diskutieren wir „AI-infused Coding“ in der IDE: Da hilft die AI beim Refactoring, beim Verstehen von Brownfield-Code und bei Fleißarbeit, während Vibe-Coding komplette Gerüste hinstellt – die Qualität steht und fällt aber mit Specs, Review und Tests. Bei den Tools landet v0 vorne, vor allem wegen der sehr nahtlosen Integration in das Vercel-Ökosystem: Prompt rein, Code raus, Previews, Deploy, plus Plug-and-Play-Anbindung von Diensten wie Supabase für Auth und Daten und Stripe für Billing. Lovable wirkt stabil, setzt ebenfalls sinnvoll auf Supabase und punktet mit einem europäischen Setup. Replit überrascht mit einem Design-First-Flow, bei dem wir erst UI und Flows grob abstecken und danach generieren lassen. In der IDE-Ecke ist Cursor aktuell Hans’ Favorit, während GitHub Copilot sich mehr wie ein solider Pair-Programming-Assistent für Funktionen und kleine Refactors anfühlt. Claude Code glänzt im Reasoning, bleibt aber – wie alle – auf gute Prompts, klare Ziele und unseren Code-Review angewiesen. Base44 fällt für uns ab, weil Sichtbarkeit und Versionierung ohne größere Subscription eingeschränkt sind. Im Code sehen wir überall das gleiche Muster: React beziehungsweise Next.js mit TypeScript und oft Tailwind. Das ist bequem, beschleunigt Onboarding und führt schnell zu ansehnlichen Ergebnissen, zementiert aber die Stack-Monokultur, die die Dead Framework Theory beschreibt. Spannend: v0 erzeugt im Vergleich recht kompakten, fokussierten Output, während andere Generatoren deutlich verboser werden – bei ähnlicher Feature-Abdeckung. Lighthouse-Werte sehen oft gut aus, verleiten aber zur falschen Sicherheit; wir finden typische A11y-Lücken wie fehlende Labels, suboptimale Focus-Flows und zu dezent deklarierte Namen. Unser Fazit bleibt: AI liefert Tempo und Gerüst, aber wir sichern Qualität mit Review, Tests, Monitoring und gezielten Verbesserungen. Preislich bewegen sich viele Angebote um 20–25 Dollar im Monat. Für uns zählt, was wir dafür praktisch bekommen: gute Exporte, nachvollziehbare Diffs, belastbare Integrationen, EU-Hosting-Optionen und die Möglichkeit, bestehende Designsysteme einzubinden. Gerade im europäischen Kontext achten wir auf Datenstandorte und DSGVO-Konformität; mit Azure-gehosteten OpenAI-Modellen lässt sich beispielsweise vollständig in EU-Regionen arbeiten. Unterm Strich nutzen wir Vibe-Coding wie eine Welle: Wir lassen uns Scaffolding, CRUD-Wege und Settings-Screens generieren, steigen bei komplexen Stellen oder übertriebener Abstraktion selbst ein und wechseln dann wieder zurück zur AI, wenn es um Tempo und Variationen geht. Zum Weiterlesen und Nachbauen: Hans’ vollständiger Vergleich steht im Blogpost. Die Tools aus der Folge findet ihr unter v0, Replit, Cursor, GitHub Copilot und Supabase; die Hintergründe zur Stack-Monokultur bündelt die Dead Framework Theory. Wir bleiben dran und schauen, wie sich Qualität, Kosten und Integrationen in den nächsten Monaten weiter entwickeln.

Um ein für allemal zu klären, ob React die beste oder die schlimmste Erfindung seit geschnitten Brot ist, luden sich Stefan und Peter den bekennenden React-Ultra Hans-Christian Otto ein! Schaunotizen [00:01:11] React Um den eher semibrillianten Artikel React Won by Default entspann sich eine Pro/Contra-React-Diskussion in unserem Community-Slack (schaut gerne vorbei!), die wir in dieser Revision fortführen. Nach einem Definitionsversuch des Begriffs „React“, der entweder nur die Library oder ein ganzes Ökosystem meinen kann, versuchen wir uns am Herausarbeiten der Vor- und Nachteile. Dass man mit React gigantischen Blödsinn anstellen kann (illustriert durch das Next.js-basierte trumpcard.gov), ist ebenso unbestreitbar wie das verunglückte Design mancher APIs (v.A. useEffect()). Unser Gast argumentiert mit Verve, wie man mit React genau so gut auch Nicht-Blödsinn umsetzen kann, in etwa durch die Wahl eines geeigneten Stacks.

Diese Revision greifen wir eine Hörerfrage zu Browser-Engine-Diversity auf und ordnen sie gemeinsam ein: Wie steht es um Vielfalt, Governance und Einfluss großer Konzerne auf Blink, WebKit und Gecko? Wie steht es um die Zukunft von Mozilla? Und wir gehen den praktischen Fragen nach – von Marktanteilen über Contribution-Realität bis hin zu Modellen, wie Features trotzdem in alle Browser kommen. Wir sind auf der T3CON Am 25. November sind wir auf dem Community-Day der TYPO3 Conference T3CON in Düsseldorf. Schaut auch gerne vorbei! Mehr Infos auf t3con.typo3.com. Schaunotizen [00:01:11] Browser-Engine-Diversity In der Folge schildern wir zunächst die Ausgangsfrage: Was passiert, wenn eine Engine ausfällt? Und ist es überhaupt möglich, eine neue Engine „from Scracth“ zu bauen?. Wir sprechen über die faktische Kontrolle bei Blink, WebKit und Mozilla, vergleichen das Governance-Modell mit dem Linux-Kernel und diskutieren, warum „Open Source“ auf dem Papier nicht automatisch breite Mitbestimmung bedeutet. Wir beleuchten die Interop-Initiative, den Einfluss von Firmeninteressen auf Prioritäten und warum externe Beiträge in der Praxis selten sind – trotz positiver Beispiele. Dazu zählen Igalia als Dienstleister für Implementierungen quer durch die Engines sowie Yoav Weiss‚ Weg zur Umsetzung des <picture>-Elements in Blink bis hin zu seinen aktuellen Arbeiten an Speculation Rules in WebKit. Wir schauen auf Marktanteile, reden über iOS-Restriktionen und darüber, warum wir uns eher regulatorische Einbußen bei Apple vorstellen können, als ein „Firefox geht hops“. Zum Thema neue Engines fallen uns Servo und Ladybird ein: technisch überhaupt erst machbar dank präziser Specs und Tests – „nur sehr viel Arbeit“. Aber die Frage nach dem nachhaltigen Geschäftsmodell bleibt. Am Ende geben wir konkrete Tipps: Issues schreiben, sich in Standards einbringen, gezielt Implementierungen finanzieren – und dabei die eigene Zeit trotzdem nicht verschenken.

In dieser Revision haben wir Webentwickler, Engineering-Manager und Autor Jens Oliver Meiert (Mastodon / Bluesky / LinkedIn) zu Gast und besprechen, weshalb HTML-Konformität die Basis professioneller Frontend-Arbeit ist, wo Validatoren und Tooling heute klemmen, wie optionales Markup und sinnvolle Minifizierung echte Gewinne bringen – und weshalb sauberes HTML die Voraussetzung bleibt, bevor wir über Semantik, Accessibility und DX diskutieren. Schaunotizen [00:01:10] 0 of the Global Top 200 Websites Use Valid HTML Anlass unseres Gesprächs ist Jens´ alljährlich stattfindende Datenerhebung zu der HTML-Konformität der Top 200 Webseiten. Das Ergebnis ist Jahr für Jahr niederschmetternd. In 2025 schafft es keine der getesteten Webseiten keine HTML-Fehler zu haben. Wir vergleichen Beispiele mit wenigen Fehlern à la Wikipedia mit Seiten, die Hunderte Issues auf der Startseite sammeln, und was das als Proxy über Codequalität verrät. Wir reden über die Tücken von Tools und Validatoren, über False Positives, neue Elemente wie <search> und darüber, wieso die Entfernung des ehemaligen WCAG-Kriteriums „Parsing“ zwar die Zugänglichkeit nicht torpediert, die Disziplin „valide liefern“ aber trotzdem nicht optional macht. Wir schauen auf HTML-Minifizierung in der Praxis, auf Projekte wie den aktiven Fork von HTML-Minifier, und darauf, wie viel Performance schon dadurch möglich wird, dass wir Defaults nutzen und Überflüssiges streichen. Kurz: Wir plädieren dafür, HTML wieder ernst zu nehmen – als Sprache, die wir prüfen, optimieren und bewusst schreiben, bevor wir über Semantik-Feinschliff, Accessibility und DX diskutieren. Links Blog von Jens Oliver Meiert Seine Essays und Forschungsnotizen zu HTML, CSS, Standards und Professionalität in der Webentwicklung liefern den Tiefgang zur Folge. Frontend Dogma Jens’ kuratierte Quelle und Archiv für Frontend-Artikel – ideal, um Trends, Historie und Handwerk im Blick zu behalten. W3C Markup Validator Unser Referenzwerkzeug, um HTML-Konformität zu prüfen und Fehler schnell sichtbar zu machen. WHATWG HTML Standard Die maßgebliche, lebende Spezifikation für HTML – inklusive Neuerungen wie dem <search>-Element. Understanding the Removal of 4.1.1 Parsing in WCAG 2.2 Hintergrund, warum die WCAG das alte Kriterium 4.1.1 gestrichen hat und was das für den Zusammenhang zwischen Validität und Zugänglichkeit bedeutet. WebAIM Million Jährliche Bestandsaufnahme von Accessibility-Fehlern auf den Top-Websites – gut als Vergleich zu Validierungsbefunden geeignet. HTML Minifier Next Aktiv gepflegter Fork des ursprünglichen HTML-Minifiers, mit dem wir optionales Markup und Defaults konsequent in kleinere, schnellere Dokumente übersetzen.

Alle paar Monate setzen sich Peter und Schepp für eine neue Runde „Neues in den Browsern“ zusammen: Was hat Chrome gepusht, wo hat Safari nachgezogen, was ist frisch in Firefox – und vor allem: Was davon ist heute schon praxistauglich? Wir sortieren Release Notes, testen Features im Alltag und teilen konkrete Einsatzideen aus echten Projekten. In dieser Ausgabe geht’s u. a. um den IntersectionObserver mit scrollMargin, präziseres Rechnen mit Math.sumPrecise, explizites Ressourcen-Management, Scheduling für bessere INP-Werte, sowie Dialog/Popover-Feinschliff, @starting-style, View Transitions und eine schnelle Lightning-Round am Schluss mit kleinen, feinen Browser-Updates. Unser Sponsor Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell. mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:03:25] IntersectionObserver: scrollMargin in allen Browsern Endlich auch in Firefox: Beobachtungsbereich in versteckte Scrollzonen erweitern – z.B. für Lazy-Loading in Slidern (früheres Laden vor Sichtbarkeit). Abgrenzung zu rootMargin, graceful Degradation. Use-Cases: Performance-Moderation, Header ein-/ausblenden, lazy Komponenten initialisieren. [00:15:42] JavaScript: Math.sumPrecise Verhindert aufgesammelte Floating-Point-Fehler beim Aufsummieren (aktuell in Firefox, Standardisierung läuft). Kontext: 0.1 + 0.2 ≠ 0.3, Reihenfolge-Unterschiede bei Floats. Weiteres: Falsehoods programmers believe about money – Sarah Dayan, Floating Point visually explained. [00:29:07] Explicit Resource Management (using, Symbol.dispose) Deterministische Aufräumlogik (z.B. Temp-Dateien/Streams): Klassen implementieren Symbol.dispose/Symbol.asyncDispose, verwendet mit using. Abgrenzung zu GC-/Finalization-Registry; im Frontend selten nötig, im Backend super nützlich. [00:30:12] WeakRefs/WeakMaps/WeakSets State an DOM-Knoten hängen, ohne Leaks; nicht iterierbar by Design. Talk-Empfehlung: Dan Shappir – Strength in weakness. [00:35:57] Partytown & Atomics mit SharedArrayBuffer Third-party-Skripte in Web-Worker „so tun als ob DOM“ – Synchronisation über Atomics. (Historisch Fallback: synchrone XHR via SW-MitM – bitte nicht mehr.) [00:39:46] Prioritized Task Scheduling API await scheduler.yield() setzt freiwillige Sollbruchstellen in heavy Main-Thread-Tasks. Hilft INP („Interaction to Next Paint“), ohne jeden Schritt in Microtasks zu verpacken. Safari hinkt noch; Alternative/Ergänzung: requestIdleCallback. [00:52:50] navigator.deviceMemory (Chromium) & RUMVision: Device Memory als Proxy RAM-Buckets (1/2/4/8+ GB) als Proxy für Geräteleistung: Auf schwachen Geräten Third-Party (Analytics/Sentry) später oder gar nicht laden. Hintergrund/Lesetipp: INP-Analyse – RUMVision. SEO-Seitenthema: Scraper-Traffic & „Great Decoupling“ → Analyse von Brodie Clark. [01:02:29] Dialog & Popover: Invoker-API, Fokus & Feinschliff Invoker-/Command-Mechanik (commandForElement) für ohne JS-Boilerplate öffnen/schließen; nicht alle DOM-Methoden „automatisch“ als Command. Neues: closedBy (wer schloss den Dialog?) und showPopover({source}) – wichtig fürs Fokus-Return. Fokusmanagement bleibt knifflig. [01:18:15] @starting-style Saubere „from-state“ Transitions (z.B. Dialog-Entry) – alle großen Browser dabei. Stolpersteine: Josh W. Comeau: The big gotcha. [01:19:17] View Transitions API Nutzen für MPA-Flows (z.B. Button → Dialog „verwandeln“, List-Reorders). Praktisch auch für Exit-Animationen, wo Dialog selbst limitiert ist. [01:24:43] HTTP: Clear-Site-Data Gezielt Caches/Storage per Header leeren (Logout, harte Resets). [01:29:51] CSS random() und tree-counting Funktionen. Zufall in CSS für Effekte/Variationen; siehe auch Kizu: Tree counting & random. [01:32:35] URL Pattern API Bequemes URL-Matching in JS; neu in Firefox 142 & Safari 26. [01:34:00] CSS :heading (Firefox) Ein Selektor für alle Überschriften-Level – vereinfachtes Typo-Styling. [01:35:00] CSS field-sizing Eingabefeld-Autogröße und positionsgenaue Overlays/Tooltips – feineres UI-Layouting. [01:35:50] Anchor Positioning Feineres UI-Layouting für Overlays/Tooltips. [01:37:35] CSS animation-timeline Scroll-/View-gekoppelte Timelines – jetzt auch in Safari. [01:38:10] Interop 2025 Gemeinsam priorisierte Feature-Arbeit der Browser-Teams – Grundlage dafür, dass vieles „überall benutzbar“ wird.

Sobald „TypeScript“ im Titel steht, ist das quasi die Lizenz zum Abschweifen. Schnallt euch also an, die Alten Herren nehmen euch mit in den statisch typisierten Mindpalast. Unser Sponsor Ende Oktober ist es so weit: Die programmier.con lädt ein – und zwar nach Bad Nauheim, nördlich von Frankfurt! Zwei Tage, zwei Tracks, ein Abendprogramm – und jede Menge praxisnahe Talks zu Webentwicklung und angewandter AI. Von Svelte über lokale LLMs bis zu Developer Experience, A/B-Testing, Security und AI-Agenten: Die programmier.con bringt die Community zusammen – und das auf Augenhöhe. Die meisten Vorträge sind auf Deutsch, internationale Highlights wie Svelte-Macher Rich Harris inklusive. 🎟 Dank Sponsoring gibt’s die Tickets aktuell schon ab 249 € (zzgl. MwSt.). 👉 Alle Infos und Tickets auf con.programmier.bar Schaunotizen [00:01:35] TypeScript 5.9 Da das nächste TS-Release gelandet ist, sinnieren Peter und Stefan mal wieder über Architektur, Fehlermeldungs-Ergonomie und frische TypeScript-Details. Ausgangspunkt: Browser-Errors vs. Rust („FromEntries + Sparse Array“ lässt grüßen) und warum viele DevTools dabei schwächeln. Danach geht’s in die 5.9-Notes: das verschlankte tsc --init, „Deferred Module Evaluation“ (import defer) als reine Syntax-Durchreiche, sowie der neue Zielwert module: node20 inkl. Import-Attributes (vormals Assertions) für JSON/CSS/WASM & Co. Wir sprechen über Modul-Laden in Browsern vs. Node, warum Bundler zunehmend nach Legacy riechen, ob Import-Maps und ein „print module graph“ aus TSC den Build-Step ablösen könnten – und wieso Lighthouse-Scores dabei wenig helfen. Auf Editor-Seite freuen wir uns über MDN-Kurzbeschreibungen in DOM-Tooltips, expandierbare Typ-Hovers (endlich beides: kompakt und detailliert) und ein konfigurierbares Hover-Limit. Unter der Haube gibt’s Performance-Gewinne und ein wichtiges Typing-Fix: ArrayBuffer ist nicht länger (fälschlich) Supertyp diverser Typed Arrays. Am Ende blicken wir nach vorn: 6.x als „Glattbügel-Serie“ auf dem Weg zu TS 7 (Go-Rewrite), nebst den unvermeidlichen Ecosystem-Reibungen zwischen Node, Deno, Web-Streams & Freunden.

Diese Revision plaudern wir mit Alexander Lichter (LinkedIn / Mastodon) und Ulrich-Matthias „Ulima“ Schäfer (LinkedIn) über Ecosystem Performance, kurz „e18e“: Warum es sich lohnt, das JavaScript-Ökosystem aufzuräumen, wie die Community organisiert ist und wo jede:r sofort mitmachen kann. Unser Sponsor PDFs aus HTML – schnell, skalierbar, datenschutzkonform. Mit EuroPDF erstellt ihr hochwertige PDFs direkt aus modernem HTML, CSS und JavaScript – inklusive Fußzeilen, Seitennummern, sauberen Tabellenumbrüchen und Barrierefreiheit. Perfekt für Rechnungen bis hin zu komplexen Reports. Auch tausende PDFs pro Tag? Kein Problem! EuroPDF ist das einzige europäische SaaS, das PrinceXML einsetzt – mit durchgängig europäischer Infrastruktur bleiben eure Daten in Europa. Hinter EuroPDF steht Die Antwort: ein Team mit 20+ Jahren Erfahrung in maßgeschneiderter Webentwicklung für Firmenkunden. Sichere dir 20 % Ersparnis auf deine Subscription mit dem Code WORKINGDRAFT unter europdf.eu/workingdraft. Schaunotizen [00:02:00] Ecosystem Performance (e18e) Im Fokus der e18e-Bewegung stehen die Themen Cleanup, Speedup, Level-Up: alte Dependencies durch moderne, kleinere Alternativen ersetzen (z. B. Lodash-Funktionen/-ES, Tiny Globby statt Globby), Dev-Tooling messbar beschleunigen (u. a. neue Prettier-CLI, schnellere Lint-Setups) und Bibliotheken so gestalten, dass sie klaren Scope haben und aktuelle Node-LTS/ESM-Realität widerspiegeln. Wir sprechen über Grenzen (Deep-Deps, Battle-testing, Baseline-Support), über Publint für saubere Exports und über die neue e18e-CLI, die Codemods und Checks bündelt. Außerdem: Wie man Einstiegshürden senkt (gute Doku, Replacement-Guides), warum Dev-Dependencies oft den größten Hebel haben, und welche Trade-offs Toolchains heute treiben (ESLint ↔︎ oxlint/Biome, Type-aware-Linting, Plugins in JS vs. Rust/Go). Praxisstories gibt’s zu Renovate, Pre-Commit-Hooks („no-verify“ lässt grüßen) und zu Contribution-Etikette gegenüber Maintainer:innen. Links e18e.dev – Website & Guides Offizielle Infos, Replacement-Guides, Manifest und Community-Einstieg. github.com/43081j – James Garbutt Initiator, Maintainer und Treiber vieler e18e-Tools. publint.dev – Publint Prüft, ob deine Package-Exports sauber konsumierbar sind (CJS/ESM/Typings). npmgraph.js.org – npmgraph Visualisiert Abhängigkeitsbäume und hilft, Ersetzungs-Kandidaten zu finden. docs.renovatebot.com – Renovate Automatisiert Dependency-Updates; sinnvoll konfiguriert spart es viel Pflegearbeit. github.com/antfu/tinyglobby – Tiny Globby Kleiner, schneller Globbing-Ersatz, häufige Cleanup-Empfehlung. lodash.com – Lodash Beispiel für gezieltes Function-Importing bzw. Ersatz durch spezialisierte Utilities. porffor.dev – Porffor Experimentelle JS/TS-Engine mit AOT-WASM-Ansatz – spannendes Performance-Forschungsprojekt.

Wir drehen wieder am „Glücksrad“ – diesmal allerdings ausschließlich mit ARIA-Attributen! Schepp hat sich als Mitspielende Accessibility Engineer Daniela Kubesch (LinkedIn / Bluesky / Mastodon) und Frontend/Design-Systems Engineer Marco Bretschneider eingeladen. Der Zufall spuckt ARIA-Attribute aus und wir sezieren sodann deren Einsatzfälle, Stolpersteine und ggf. sinnvolle Alternativen: von aria-placeholder über erklärende Verknüpfungen mit aria-details (plus ariaDetailsElements) bis hin zu großen, virtuellen Listen mit aria-posinset/aria-setsize. Außerdem sprechen wir über gute modale Dialoge (aria-modal & <dialog>) und wagen einen Blick nach vorn mit dem brandneuen aria-brailleroledescription aus WAI-ARIA 1.3. Unser Sponsor Ende Oktober ist es so weit: Die programmier.con lädt ein – und zwar nach Bad Nauheim, nördlich von Frankfurt! Zwei Tage, zwei Tracks, ein Abendprogramm – und jede Menge praxisnahe Talks zu Webentwicklung und angewandter AI. Von Svelte über lokale LLMs bis zu Developer Experience, A/B-Testing, Security und AI-Agenten: Die programmier.con bringt die Community zusammen – und das auf Augenhöhe. Die meisten Vorträge sind auf Deutsch, internationale Highlights wie Svelte-Macher Rich Harris inklusive. 🎟 Dank Sponsoring gibt’s die Tickets aktuell schon ab 249 € (zzgl. MwSt.). 👉 Alle Infos und Tickets auf con.programmier.bar Schaunotizen [00:19:52] aria-placeholder Entspricht inhaltlich dem HTML-placeholder – verschwindet also, sobald Nutzer:innen tippen. In der Praxis deshalb eher nicht verwenden: wichtige Hinweise gehören dauerhaft sichtbar neben/unter das Feld. Als Notnagel kann der Placeholder in der Accessible-Name-Ermittlung herangezogen werden, falls kein Label vorhanden ist (trotzdem immer ein richtiges <label> setzen). Möglicher Spezialfall: contenteditable. Weiterführend: HTML placeholder, Accessible Name Computation. [00:27:58] aria-details & ariaDetailsElements (DOM) Verknüpft ein Widget mit einer längeren, „reichen“ Zusatzbeschreibung (z. B. FAQ-Inhalt, Größentabelle, Bildbeschreibung). Anders als aria-describedby beeinflusst aria-details nicht den Accessible Name; Screenreader können die Details kontextuell anbieten. Über die DOM-Property element.ariaDetailsElements lässt sich die referenzierte(n) Beschreibung(en) als Elemente abrufen (nützlich für Tests/Tooling). Wichtig: Informationen auch visuell zugänglich machen! Weiterführend: aria-describedby, aria-labelledby, aria-description. [00:41:36] aria-posinset & aria-setsize Für „Teilmengen“ großer Sets (virtuelle Listen/Tabellen, Pagination): aria-setsize gibt die Gesamtzahl der Elemente an (falls unbekannt: -1), aria-posinset markiert die Position des jeweils sichtbaren Items. Typische Anwendung bei endlosem Scrollen oder chunkweisem Nachladen („250 von 3000 geladen“). Setzt man auf den einzelnen Listeneinträgen/Zeilen; die Information landet zuverlässig im Accessibility Tree. Weiterführend: listitem role, row role. [00:52:48] aria-modal Kennzeichnet einen modalen Dialog (meist mit role="dialog" oder nativem <dialog>): Inhalte außerhalb sind für Assistive Technologien „inert“ also deaktiviert, der Fokus bleibt im Dialog. Gute Praxis: Dialog immer beschriften (aria-labelledby), eine kurze Erklärung mit aria-describedby verknüpfen, Fokus beim Öffnen auf ein sinnvolles Start-Ziel setzen (nicht zwingend das erste Input). Bei modalen Dialogen beginnt die Überschriftenhierarchie sinnvoll erneut (z. B. H1 im Dialog). Für die visuelle/Pointer-Sperre der Seite am besten das native <dialog> mit .showModal() verwenden (der Browser inertet den Rest). Weiterführend: <dialog>, inert, WAI-ARIA APG: Dialog (Modal) Pattern. [01:06:44] aria-brailleroledescription (neu in WAI-ARIA 1.3) Liefert eine speziell für Refreshable Braille Displays geeignete, kurze Rollenbeschreibung (z. B. Abkürzungen wie „BTN“ statt „Button“). Wird von AT/Plattform-APIs ausgewertet; im Markup sparsam und nur mit etablierten, verständlichen Kürzeln einsetzen. Ergänzt die bestehende Rollenkommunikation (ähnlich zu aria-roledescription, aber gezielt für Braille-Ausgaben). Weiterführend: WAI-ARIA 1.3: aria-brailleroledescription, aria-roledescription. Links Revision 651: Accessible Rich Internet Applications (ARIA) Folge, in der Schepp mit Marco über den grundsätzlichen Sinn, den Einsatz und dia Stolperfallen von ARIA spricht. a11yphant a11yphant ist eine von Daniela bereitgestellte, kostenlose, offene Lernplattform für Web-Accessibility. Statt langer Texte übst du die Basics direkt in interaktiven Coding-Challenges und kurzen Quizzes – ohne Account startklar, optional mit Anmeldung zum Fortschrittsspeichern.