Working Draft

Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer
  • 0.0 (0)
  • TECHNOLOGY
  • UPDATED WEEKLY
Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen. Mal mit, mal ohne Gast begeben wir uns in die Tiefen von HTML, CSS, JavaScript oder auch Frameworks wie React, Vue und Angular. Wir diskutieren über gute UX, Web Performance und Barrierefreiheit, sowie ab und an auch über Browser und Webstandards. Supported uns bei Patreon: https://patreon.com/workingdraft

  1. 4 DAYS AGO

    Revision 644: Das Barrierefreiheitsstärkungsgesetz (BFSG)

    In dieser Episode spricht Schepp mit Gästin und IAAP zertifizierter Barrierefreiheitsexpertin Sonja Weckenmann (LinkedIn) über das Barrierefreiheitsstärkungsgesetz (BFSG) – ein Gesetz, das darauf abzielt, Barrieren für Menschen mit Behinderungen abzubauen, und das am 28. Juni 2025 in Kraft tritt. Also höchste Eisenbahn, sich damit zu beschäftigen! SCHAUNOTIZEN [00:01:08] DAS BARRIEREFREIHEITSSTÄRKUNGSGESETZ Zum Start gibt Sonja uns Einblicke in die Hintergründe und Ziele des BFSG und erklärt, warum es einen wichtigen Schritt in Richtung einer inklusiveren digitalen Welt darstellt. Anschlisßend diskutieren wir, welche digitalen Produkte und Dienstleistungen unter die Regelungen fallen und welche Branchen besonders davon betroffen sind. Dabei wird deutlich, dass das Gesetz weitreichende Auswirkungen haben kann – von der Gestaltung von Websites über digitale Verkaufsplattformen bis hin zu mobilen Apps. Ein weiterer Schwerpunkt ist die praktische Umsetzung der Anforderungen, die das BFSG an Unternehmen stellt. Sonja erläutert, welche Maßnahmen erforderlich sind, um den gesetzlichen Vorgaben zu entsprechen. Neben der Theorie widmen sich Sonja und Schepp noch den typischen Stolpersteinen bei der Umsetzung. Sie sprechen darüber, wie sich Barrierefreiheit in bestehende digitale Systeme integrieren lässt und welche internen Prozesse angepasst werden müssen, um langfristig erfolgreich zu sein. LINKS RICHTLINIE (EU) 2019/882 (EAA) Die Grundlage des Barrierefreiheitsstärkungsgesetzes – der European Accessibility Act im EU-Amtsblatt. BARRIEREFREIHEITSSTÄRKUNGSGESETZ (BFSG) Der Gesetzestext, der Barrierefreiheit im digitalen Bereich in Deutschland regelt. VERORDNUNG ZUM BARRIEREFREIHEITSSTÄRKUNGSGESETZ (BFSGV) Die Verordnung zum BFSG mit genauen Vorgaben und Details zur Umsetzung. ACCESSIBILITY REQUIREMENTS FOR ICT PRODUCTS AND SERVICES (EN 301 549, V3.2.1 (2021-03)) PDF Europäische Norm für barrierefreie Produkte und Dienstleistungen im Bereich Informations- und Kommunikationstechnologie. EN 301 549 V3 – HARMONIZED EUROPEAN STANDARD FOR ICT ACCESSIBILITY, ETSI Mehr zur Norm EN 301 549 und wie sie im europäischen Kontext angewendet wird. WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 2.2 Die neuesten Leitlinien für barrierefreie Webinhalte – ein unverzichtbarer Standard für Entwickler:innen. EUROPEAN ACCESSIBILITY ACT – BARRIEREFREIHEIT FÜR DIE PRIVATWIRTSCHAFT, BLOGARTIKEL, TOLLWERK.DE, JOSCHI KUPHAL, 17. JANUAR 2024 Ein tiefer Einblick in die Auswirkungen des EAA auf die Privatwirtschaft – praxisnah und verständlich erklärt. BEI HEISE WURDEN ONLINE-SHOPS AUF BARRIEREFREIHEIT GETESTET Ein spannender Bericht darüber, wie deutsche Online-Shops bei der Barrierefreiheit abschneiden. BITV-PRÜFERBUND Die Anlaufstelle für die Überprüfung von Websites auf Barrierefreiheit nach der deutschen BITV. OVERLAY FACTSHEET Warum Accessibility-Overlays oft mehr Schaden als Nutzen bringen – Fakten und Hintergründe. „WO WIR SIND IST VORNE“ PODCAST: ACCESSIBILITY-OVERLAYS MIT DANIELA KUBESCH In dieser Folge wird sich kritisch mit Accessibility-Overlays auseinandergesetzt.

    1h 1m

  2. JAN 7

    Revision 643: Das Web Accessibility Cookbook

    Wir haben diesmal Manuel Matuzović zu Gast – Frontend-Entwickler, Berater, Auditor, Trainer und Autor des „Web Accessibility Cookbook“. Gemeinsam tauchen wir ein in die Welt der Barrierefreiheit und hangeln uns dazu am Aufbau seines Buches entlang. SCHAUNOTIZEN WAS MACHT EINE SAUBERE HTML-DOKUMENTSTRUKTUR AUS? Manuel erklärt, warum die Struktur eines HTML-Dokuments mehr ist als nur ein technisches Detail. Von Head-Elementen bis zu einer sinnvollen Organisation des Bodys – wir beleuchten, wie man das Fundament für zugängliche und benutzerfreundliche Webseiten legt. WIE NUTZT MAN LANDMARKS WIE HEADER, MAIN UND FOOTER RICHTIG? Landmarks bieten Orientierungshilfen für Nutzer:innen mit Screenreadern. Wir sprechen darüber, wann sie Sinn machen, wie man sie richtig einsetzt und warum eine gut strukturierte Seitenhierarchie für alle Nutzer:innen wichtig ist. WARUM SIND LINKS UND BUTTONS ÖFTER KAPUTT, ALS SIE SEIN SOLLTEN? Links, die ins Leere führen, und Buttons, die nicht klicken wollen – wir reden darüber, warum diese Probleme so häufig sind und wie man sie vermeidet, um barrierefreie und funktionale Interfaces zu schaffen. WIE WERDEN FORMULARE UND TABELLEN BARRIEREFREI? Formulare und Tabellen können komplex und frustrierend sein – für Entwickler:innen und Nutzer:innen gleichermaßen. Wir diskutieren Best Practices, häufige Fehler und wie man diese wichtigen Elemente zugänglicher gestaltet. ACCESSIBILITY BEI CUSTOM ELEMENTS UND SHADOW DOM? Web Components sind ein mächtiges Tool, aber sie kommen mit Herausforderungen. Wir sprechen über Vor- und Nachteile von Shadow DOM, warum es manchmal besser ist, darauf zu verzichten, und welche Rolle Custom Elements bei modernen Webprojekten spielen. GEWINNSPIEL! Manuel verlost zwei digitale Exemplare seines Buchs! 🎉 Schreib uns bis 31. Januar, was dein Lieblingselement in HTML ist und warum – auf Slack, per Mail oder auf unseren Social-Media-Kanälen Bluesky oder Mastodon. LINKS WEB ACCESSIBILITY COOKBOOK Praktischer Leitfaden, der Entwickler:innen dabei unterstützt, barrierefreie Websites zu gestalten, mit klaren Beispielen, Best Practices und einfache Erklärungen für komplexe Themen. HTMHELL ADVENT CALENDAR 2024 Jeden Tag ein Türchen voller Accessibility-Tipps. Besser als Schokolade (okay, fast). POLYPANE Der Schweizer Taschenmesser-Browser für alle, die Frontend ernst nehmen. Accessibility? Check. Multi-Viewport? Check. MANUEL IM FEBRUAR BEIM CSS CAFÉ Eine Tasse Kaffee und ein tiefes Gespräch über Farben, Farbräume und warum das alles nicht so einfach ist, wie es aussieht.

    1h 28m

  3. 12/31/2024

    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!✨

    8 min

  4. 12/19/2024

    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 100% CO2-neutrales Hosting. 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.

    1h 52m

  5. 12/10/2024

    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 100% CO2-neutrales Hosting. 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.

    1h 40m

  6. 12/03/2024

    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

    1h 22m

  7. 11/26/2024

    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.

    2h 2m

  8. 11/19/2024

    Revision 638: Web Component vs. Frontend Framework (und allgemeines Framework/CMS-Drama)

    Stefan und Peter hatten vorgehabt, das Thema „Web Components vs. Frameworks“ gründlich durchzudiskutieren, doch das allgegenwärtige Framework- und CMS-Drama nahm dann die Hauptrolle ein. 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 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! SCHAUNOTIZEN [00:02:07] FRAMWORK-DRAMA Vor dem Hintergrund des jüngsten WordPress-Chaos und dem faust-style VC-Deal des weiteren Vite-Universums quatschen wir über die Stabilität und Vertrauenswürdigkeit unserer Plattformen und Frameworks. Wir vergleichen den klassischen Lock-In Long Con von Vercel mit dem BDFL-Modell von WordPress und „richtigen“ OSS-Projekten wie jenen, die via OpenJS finanziert werden. Gegen Ende kommen wir tatsächlich zum ursprünglich geplanten Thema „Web Components vs. Frameworks“, angestachelt durch den provokanten Artikel "Web Components Are Not the Future" aus der Feder des gänzlich unparteiischen Ryan Carniato (bekannt für SolidJS).

    1h 12m
See All (664)

About

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen. Mal mit, mal ohne Gast begeben wir uns in die Tiefen von HTML, CSS, JavaScript oder auch Frameworks wie React, Vue und Angular. Wir diskutieren über gute UX, Web Performance und Barrierefreiheit, sowie ab und an auch über Browser und Webstandards. Supported uns bei Patreon: https://patreon.com/workingdraft

Information

  • Creator
    Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer
  • Years Active
    2010 - 2025
  • Episodes
    664
  • Rating
    Clean
  • Copyright
    © CreativeCommons Attribution-Noncommercial-Share Alike 2.5 http://creativecommons.org/licenses/by-nc-sa/2.5/
  • Show Website
    Working Draft

You Might Also Like

To listen to explicit episodes, sign in.

Stay up to date with this show

Sign in or sign up to follow shows, save episodes, and get the latest updates.
Select a country or region

Africa, Middle East, and India

Asia Pacific

Europe

Latin America and the Caribbean

The United States and Canada