

Working Draft
Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer
Working Draft ist der deutschsprachige Podcast für Frontend-Entwicklung, Webdesign und UI Engineering.
Bei uns geht’s um HTML, CSS, JavaScript, Frameworks wie React, Vue und Angular, Responsive Webdesign, User-Interfaces, moderne UI-Patterns, Barrierefreiheit, Tooling, Design-Systeme, Webstandards und mehr.
Unser Team besteht aus erfahrenen Frontend-Entwickler:innen aus Deutschland und Österreich – mit Gästen aus der Praxis, die regelmäßig Einblicke in aktuelle Tech-Themen geben. Ob neue CSS-Features, die Zukunft von JavaScript, KI im Frontend-Workflow oder einfach gute UI-Erfahrungen: Wir reden drüber – jede Woche neu.
Bei uns geht’s um HTML, CSS, JavaScript, Frameworks wie React, Vue und Angular, Responsive Webdesign, User-Interfaces, moderne UI-Patterns, Barrierefreiheit, Tooling, Design-Systeme, Webstandards und mehr.
Unser Team besteht aus erfahrenen Frontend-Entwickler:innen aus Deutschland und Österreich – mit Gästen aus der Praxis, die regelmäßig Einblicke in aktuelle Tech-Themen geben. Ob neue CSS-Features, die Zukunft von JavaScript, KI im Frontend-Workflow oder einfach gute UI-Erfahrungen: Wir reden drüber – jede Woche neu.
Episodes
Mentioned books

Feb 4, 2025 • 1h 5min
Revision 647: WCAG-Spezifikationen lesen und verstehen
Nina Jameson, Expertin für digitale Barrierefreiheit und Mitgründerin der Gehirngerecht Digital GmbH, führt durch die komplexen WCAG-Spezifikationen. Sie erklärt, wie Entwickler diese Richtlinien nutzen können, um Webseiten für alle zugänglich zu machen. Es wird erörtert, welche Herausforderungen die Umsetzung der Barrierefreiheit mit sich bringt. Außerdem thematisiert sie die Bedeutung der Zeitgestaltung in WCAG sowie die Rolle kreativer Designs, die nicht auf Benutzerfreundlichkeit verzichten. Nina zeigt, wie wichtig es ist, die WCAG-Richtlinien ernst zu nehmen.

11 snips
Jan 29, 2025 • 1h 3min
Revision 646: (Automatisiertes) Testing von Barrierefreiheit
Anna Maier, erfahrene Webentwicklerin und IT-Consultant, bringt spannende Einblicke in das Testing von Barrierefreiheit. Sie erklärt, dass automatisierte Tools nur 20-30 % der Barrieren erkennen können und der Rest menschliches Augenmaß erfordert. Echte Nutzer:innen, insbesondere Screenreader-Anwender:innen, sind unverzichtbar im Testprozess. Anna diskutiert auch die Herausforderungen von Tastaturnavigationstests und die Rolle von KI in der Barrierefreiheit, während präventives Testing und der Einbezug von Nutzererfahrungen als Schlüssel zum Erfolg hervorgehoben werden.

7 snips
Jan 21, 2025 • 1h 5min
Revision 645: Barrierefreiheit kann so einfach sein
Paul Hempel, ein erfahrener Softwareentwickler mit einem Schwerpunkt auf Barrierefreiheit, teilt wertvolle Einblicke in die neue Dimension der Webentwicklung. Er zeigt, dass Barrierefreiheit unkompliziert und kostengünstig implementiert werden kann. Die Bedeutung von semantischem HTML und CSS wird hervorgehoben, während Paul Tipps zur Optimierung der Tastaturnavigation gibt. Zudem diskutiert er die Rolle von Webstandards und die Integration barrierefreier Prinzipien in die Ausbildung von Entwicklern. Aktuelle Projekte wie Open-Source-Web-Apps werden ebenfalls beleuchtet.

8 snips
Jan 14, 2025 • 1h 1min
Revision 644: Das Barrierefreiheitsstärkungsgesetz (BFSG)
Sonja Weckenmann, eine IAAP-zertifizierte Barrierefreiheitsexpertin aus Hamburg, erklärt das Barrierefreiheitsstärkungsgesetz (BFSG), das 2025 in Kraft tritt. Sie beleuchtet, wie dieses Gesetz Barrieren abbauen und digitale Produkte zugänglicher machen kann. Besonders betont werden die Herausforderungen bei der Umsetzung und die Notwendigkeit von Anpassungen in Unternehmen. Zudem wird diskutiert, warum einfache Lösungen wie Accessibility Overlays oft unzureichend sind und es dringender Innovationen bedarf, um die digitale Teilhabe für alle zu gewährleisten.

11 snips
Jan 7, 2025 • 1h 28min
Revision 643: Das Web Accessibility Cookbook
Manuel Matuzović ist ein erfahrener Frontend-Entwickler und Autor des "Web Accessibility Cookbook". Er beleuchtet die Wichtigkeit einer sauberen HTML-Dokumentstruktur für barrierefreie Webseiten und erläutert, wie Landmarks wie Header und Footer in der Webentwicklung sinnvoll genutzt werden. Darüber hinaus diskutiert er häufige Probleme mit kaputten Links und Buttons sowie Best Practices zur barrierefreien Gestaltung von Formularen und Tabellen. Zudem kommen Herausforderungen bei Web-Komponenten und der Einsatz von Shadow DOM zur Sprache.

Dec 31, 2024 • 8min
Outtakes 2024
Seit nunmehr gut fünf Jahren unterstützt uns Autorin, Sprecherin und Radiomoderatorin Sabine bei der Post-Produktion unserer Podcastfolgen. Das hat nicht nur für lang ersehnte Entlastung bei uns Hosts gesorgt, sondern auch die Qualität unseres Audio deutlich nach oben geschraubt. Sabine gibt uns nämlich Tipps für besseres Sprechen und nimmt sich auch immer die Zeit, jede Folge im Detail abzuhören und überflüssige Pausen und „Ähms“ herauszuschneiden.
Dafür von uns tausend Dank an Dich, Sabine!🙏🥰 Und ebenso tausend Dank an Euch Hörer*innen und Sponsor*innen, dass wir durch Euch die notwendigen finanziellen Mittel dafür haben ❤️.
Sabines akribisches Durchhören der Episoden hat außerdem noch einen tollen Nebeneffekt: Wir bekommen am Ende eines jeden Jahres nun immer Outtakes, die sie über das Jahr verteilt sammelt und uns und Euch als Weihnachtsgeschenk zusammenschnürt 🎄🎁. Und die sind immer fantastisch – hört selbst und rutscht anschließend gut!✨

Dec 19, 2024 • 1h 52min
Revision 642: Unsere schlimmsten Hacks
Schepp, Peter und Hans-Christian Otto (bekannt aus den Revisionen zu SSR, Speaker-Dasein und Client-Server-Kommunikation) beichten einander ihre größten Verbrechen gegen Bits und Bytes.
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 auch 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:02:27] Unsere schlimmsten Hacks
Wir beginnen mit dem Klassiker: Prototyp-Patching! Dieses hat bekanntlich gerne katastrophale Auswirkungen, die auch schon mal über in Browsern eingebaute Website-spezifische Patches hinausgehen. Während Kiki stolz auf seinen String.prototype-Patch ist, musste Schepp sogar schon mal document.write() überschreiben. Peter hält es mit Canvas-Patches, um Grafikkarten-Treiber-Bugs auszubügeln. Schepp erklärt, warum er als CSS-Trumpf lieber :not() als :root oder !important verwendet (siehe auch), was uns auf unerklärliche Weise überlegen lässt, ob IIFEs in PHP existieren (tun sie). Nach einer Lobpreisung des Switch-Statements und einer Runde gesunden Crockford-Dunkings berichtet Peter von seinen diversen … unüblichen Design-Entscheidungen in seiner Präsentationssoftware, was uns über document.currentScript und sein Fehlen in Modulen (Polyfill) sinnieren lässt. Gegen Ende geraten wir über einen Use Case des Number-Constructors in eine Diskussion rund um Dependencies und Package Manager, die der Aufnahme schließlich den Rest gibt.

Dec 10, 2024 • 1h 40min
Revision 641: Passwörter & Passkeys
In dieser Revision haben wir erneut die Entwicklerin und Trainerin Martina Kraus (LinkedIn / Bluesky) zu Gast und diskutieren mit ihr über das Thema Passwörter und die passwortlose Zukunft mit Passkeys.
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 auch 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:02:15] Passwörter & Passkeys
In unserer Diskussion über Passwörter greifen wir zunächst die Empfehlung des Bundesamts für Sicherheit in der Informationstechnik (BSI) auf, das dazu rät, Passwörter nicht allzu komplex zu gestalten. Wir waren uns allerdings einig, dass die derzeitige Best Practice von mindestens zwölf Zeichen mit einer Kombination aus Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen eine gute Empfehlung sind, Komplexität hin oder her. Viele Nutzer können sich solche Passwörter allerdings schwer merken, was dazu führt, dass sie Passwörter wieder verwenden oder auf unsichere Weise speichern. Und auch auf Seitenbetreiber-Seite werden Passwörter nicht immer so sorgsam behandelt, wie es erforderlich wäre.
Genau hier kommen wir auf Alternativen wie Passkeys, die komplett ohne Passwörter auskommen und damit viele der Probleme von passwort-basierter Authentifizierung nicht kennen. Passkeys müssen nicht manuell eingegeben werden und sind individuell je spezifischer Website, dem sogenannte Origin. Sie bieten damit nicht nur eine bessere Sicherheit, sondern sind auch viel benutzerfreundlicher. Wir klären, wie Passkeys technisch funktionieren und welche Herausforderungen es bei deren Einführung möglicherweise gibt.
Links
passkeys.io
Alles, was man über Passkeys wissen möchte
learnpasskeys.io
Diese Seite bringt einem bei, wie die technische Implementation durchzuführen ist
Passkeys: A Shattered Dream
Das Blogpost, welches Schepp erinnert, das einen kritischen Blick auf den aktuellen Implementationsstand von Passkeys wirft.

Dec 3, 2024 • 1h 22min
Revision 640: CSS4, CSS5 und CSS Next
In dieser Episode sprechen wir mit Quentin Albert (LinkedIn, GitHub, Twitter) über die Entwicklung von CSS4, CSS5 und CSS Next und ergründen, warum es nach all der Zeit nun doch mit den CSS-Versionsnummern weitergehen soll.
Schaunotizen
[00:01:29] CSS4, CSS5 und CSS Next
Obwohl CSS3 einst als finale Version angekündigt war, machen stetige Neuerungen immer deutlicher, dass dieser Begriff dem Stand der Dinge nicht mehr gerecht wird. Was meinen Blogposts, Artikel oder Lernkurse, wenn sie versprechen, einem „modernes CSS“ oder CSS3 beizubringen? Runde Ecken? Flexbox und Grid? Oder vielleicht sogar Container Queries? Sowohl fürs Marketing als auch beim Lernen von CSS fehlt es an Nuance und zeitgemäßer Begrifflichkeit. An diesem Punkt setzt die CSS-Next Community Group an.
Bei den CSS-Versionsnummern stehen der Kontext und die Origin-Story neuer Technologien im Vordergrund, während das schon existierende Baseline-Projekt der WebDX Community Group eher die praktische Implementierung unterstützt. Ein Beispiel wäre Subgrid: Obwohl es noch nicht überall einsetzbar ist und damit von Baseline als neu eingestuft wird, gehört es konzeptionell doch in denselben Bucket wie Grid, das es schon lange gibt. Dementsprechend gehört Subgrid wie Grid zu CSS4. Die Versionsnummer markieren dabei größere Umbrüche, respektive Äras in den Fähigkeiten von CSS.
Da es ja auch viel um Marketing geht ist ein weiterer zentraler Punkt die Entwicklung eines neuen Logos für CSS. Das alte „Schild mit der 3“, das erstmals 2011 im Windschatten von HTML5 aus der Bildfläche erschien, passt nicht mehr und soll durch ein modernes, barrierefreies und funktionales Design ersetzt werden. Quentin gibt Einblicke in die diesbezüglichen Diskussionen innerhalb der CSS-Next Community Group.
Abschließend blicken wir auf die nächsten Schritte: Die Integration der Levels in die offiziellen Spezifikationen der CSS Working Group schreitet voran, und erste Entwürfe liegen bereits vor. Des Weiteren lädt die CSS-Next Community Group alle ein, Teil dieser spannenden Weiterentwicklung von CSS zu werden, die nicht nur technische Neuerungen, sondern auch eine stärkere Zugänglichkeit für alle Nutzergruppen verfolgt.
Links
CSS-Next Community Group
GitHub-Repo der kleinen aber feinen Truppe, die zusammen die CSS-Next Community Group bilden.
List of CSS Features — Categorization
Spreadsheet aller CSS-Features und ihre Einsortierung in CSS4, CSS5 oder darüber hinaus.
RFC: Initial CSS Level Categorization
Dasselbe nochmal in einen offiziellen Request for Comments gegossen
New CSS logo?
Hier könnt Ihr die Evolution des neuen CSS Logos nachvollziehen

Nov 26, 2024 • 2h 2min
Revision 639: Server-Client-Kommunikation (mit TypeScript)
Hans-Christian Otto, seines Zeichens Big Boss bei Suora und bekannt aus den Revisionen zu SSR und Speaker-Dasein, präsentiert Peter seine Grand Unified Theory zur Server-Client-Kommunikation mit TypeScript.
Schaunotizen
[00:01:41] Server-Client-Kommunikation
Der Einstieg in hippes TypeScript gelingt uns wie immer mit einem Abstecher in die Kreidezeit, in der ExtJS im UI regierte und auf der Netzwerkseite REST, RPC und SOAP via XMLHttpRequest die Mittel der Wahl waren. Inspiriert von unseren Revisionen zu semantisch-akademischem Data-Fetching und OpenAPI-MSW besprechen wir in der Folge weitere Ansätze, Client-Server-Kommunikation mit TypeScript zu verbinden. Nach einem Start bei absoluten Kleinigkeiten, wie dem Umbiegen vom JSON.parse()-Ergebnis auf any (via ts-reset), landen wir relativ bald bei OpenAPI, GraphQL (inkl. freaky Addons wie PostGraphile) und tRPC. Nebenher kommen auch die kommende Temporal-API, das QUERY Verb in HTTP, das TS-affine ORM Prisma und der Problembereich der Objektvalidierung (vertreten durch Zod, Valibot und JSON Schema zur Sprache.


