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

February 17 Revision 700: 2016 vs. 2026 – Was ist aus unseren Prognosen geworden?
Zum Jubiläum werfen wir einen Blick zurück – ziemlich genau zehn Jahre. Inspiriert von einem Vorschlag aus unserem Community-Slack hören wir noch einmal in unsere Prognosen-Folge von Ende 2015 hinein und prüfen: Was ist aus unseren damaligen Thesen zu HTTP/2, Flexbox, Angular 2, React, Web Components und WebAssembly geworden?
Event-Tipp
Noch nichts vor am 28. Februar? 👀
Bei der State of the Browser 2026 erwarten euch Talks zu CSS Anchor Positioning, Accessibility jenseits von Checkbox-Compliance, der Temporal API, Performance, minimalistischen Web-Erlebnissen und sogar einem 2D-Scroller-Spiel im Browser 🎮✨
👉 https://2026.stateofthebrowser.com
Remote-Ticket jetzt mit diesem Link zum halben Preis (£10): https://ti.to/lws/sotb2026/discount/Status_des_Browsers
Zwischen Nostalgie, realistischen Einschätzungen und ein paar veritablen Fehleinschätzungen sprechen wir darüber, wie sich Frontend-Engineering tatsächlich verändert hat – und wo wir heute stehen: weniger Browser-Drama, mehr Tooling, mehr Framework-Vielfalt und ein völlig neues Spannungsfeld durch AI-gestützte Entwicklung.
Schaunotizen
[00:01:16] Das Web 10 Jahre später: Evolution statt Revolution
Wir stellen fest: Viele Entwicklungen sind nicht spektakulär explodiert, sondern langsam gereift. HTTPS ist heute selbstverständlich – befeuert durch Let’s Encrypt und die Einführung von HTTP/2 (inklusive des mittlerweile gescheiterten Server Push) sowie später HTTP/3.
Im CSS-Bereich hat sich Grid etabliert, ohne Flexbox zu verdrängen. Beide koexistieren – oft pragmatisch statt dogmatisch eingesetzt.
Bei JavaScript hat ES2015 vieles verändert, aber weniger fundamental als gedacht. Wirklich einschneidend war async/await; vieles andere war „syntaktischer Zucker“. Parallel hat sich TypeScript stark verbreitet – ohne JavaScript zu ersetzen.
Im Framework-Bereich ist keine Monokultur entstanden: React, Angular, Vue und andere bedienen unterschiedliche Ökosysteme. Statt Konsolidierung sehen wir Fragmentierung. Und dann gibt es die AI-Tools, die bevorzugt mit React/TypeScript arbeiten.
Web Components und WebAssembly? Kein Mainstream-Overtake, aber solide Nischen-Erfolge. Sie tun genau das, wofür sie gedacht waren – nicht mehr, nicht weniger.
Und schließlich: Browser-Testing ist entspannter geworden. Der Internet Explorer ist Geschichte, Edge-Cases existieren weiterhin (hallo iOS Safari), aber das Drama-Level ist deutlich gesunken. Headless-Browser und CI-Tests haben neue Testrealitäten geschaffen.
Links
Let’s Encrypt
Kostenlose TLS-Zertifikate, die HTTPS massentauglich gemacht haben.
Kevin Powell – Flexbox vs. Grid
Das Video erklärt anschaulich, wann man in CSS besser zu Flexbox oder Grid greift, und zeigt, dass beide Layout-Methoden unterschiedliche Stärken haben und sich in der Praxis ideal ergänzen, statt miteinander zu konkurrieren.
Next.js
React-Framework, das als Default-Stack vieler AI-Tools gilt.
Vercel
Hosting-Plattform, eng mit Next.js verzahnt.
Playwright
Browser-Automatisierung und Testing-Framework für Headless-Tests.
BrowserStack
Cloud-Dienst zum Testen in echten Browser-/Device-Kombinationen.
Google Trends
Grundlage unserer Diskussion zu Suchvolumen von JavaScript, TypeScript, Python & Co.
Dead Framework Theory
In disem Blogpost beschreibt Paul Kinlan eindrücklich, wie sich durch LLMs und ihre Trainingsdaten eine selbstverstärkende Dynamik zugunsten etablierter Frameworks wie React entwickelt, die es neuen Ansätzen zunehmend schwer macht, überhaupt noch Fuß zu fassen.
Web Components (MDN)
Überblick über Custom Elements, Shadow DOM & Co.
WebAssembly
Low-Level-Binaryformat für performante Web-Anwendungen.
CSS Houdini
Initiative zur Erweiterung von CSS mit Low-Level-APIs.
Digital Markets Act
EU-Regulierung mit potenziellen Auswirkungen auf Browser-Monopole.
European Accessibility Act
Europäische Richtlinie zur Barrierefreiheit digitaler Produkte und Dienste.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 41 min
February 10 Revision 699: ARIA-Glücksrad Nachklapp, neue APIs und reale Unterstützung
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 33 min
February 03 Revision 698: Government Site Builder – Open Source, aber bitte nicht zu offen?
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
32 min
January 27 Revision 697: Die Sanitizer API, mit Frederik Braun
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 10 min
January 20 On Tour @ #t3con – Incluthon: Inklusion testen statt abhaken, mit Stefan Barac
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
19 min
January 13 Revision 696: Was macht eigentlich… Anselm Hannemann?
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 15 min
January 06 On Tour @ #t3con – Frontend State of TYPO3 mit Thomas Maroschik
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
23 min
December 31, 2025 Outtakes 2025
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)!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
8 min
December 30, 2025 Revision 695: Browser-News-Roundup
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 32 min
December 23, 2025 Revision 694: React- & TypeScript-Glücksrad, mit Hans-Christian Otto
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 44 min