In dieser Revision ist Melanie Patrick [https://www.linkedin.com/in/mgapatrick/] zu Gast – und bringt Skills mit, die man im Webdev-Alltag gerne mal unterschätzt: Organisation, Struktur, Planung und Kommunikation. Kurz: Life Hacks aus dem Büroalltag, die jede:r gebrauchen kann!

Schaunotizen

[00:01:14] Meetings, Memos, Mindset: Büro-Lifehacks für Webdevs Wir sprechen über Tools und Tricks, die das Chaos im Kopf und auf dem Desktop minimieren – von einfachen Backups bis hin zu cleveren Ablagesystemen. Melanie erzählt, wie man sich in stressigen Situationen selbst austrickst, wie man Meetings effizient gestaltet und warum man auch als Entwickler:in etwas von der „Sekretärinnen-Schule“ lernen kann.

Nebenbei geht’s um klassische Software-Fails, digitale To-do-Listen, Passwort-Strategien und wie man durch gute Vorbereitung im Team einfach mehr Ruhe reinbringt. Ein Gespräch über Verantwortung, Vertrauen, Teamplay – und warum gute Organisation nichts mit Kontrollzwang zu tun hat.

Revision 659: Meetings, Memos, Mindset: Büro-Lifehacks für Webdevs

Peter, Stefan und Vanessa nehmen sich auch in dieser Woche wieder die Ergebnisse des State of JS 2024 [https://2024.stateofjs.com/en-US] vor. In Teil 1 [https://workingdraft.de/653/] haben wir uns auf die neuen JavaScript-Features gestürzt, in Teil 2 [https://workingdraft.de/655/] ging’s um Pain Points in JavaScript und den Browser-APIs, dazu die Leseliste und die Libs. Teil 3 [https://workingdraft.de/656/] war dann ganz den Meta-Frameworks und dem Testing gewidmet. Jetzt im letzten Teil schauen wir noch auf die Themen „Mobile & Desktop“, „Build Tools“, „Monorepo Tools“ und „Sonstige Tools“.

Unser Sponsor



Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller
Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um
voneinander zu lernen.

Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und
Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends
von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.

Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc [https://mittwald.de/hitc?ref=workingdraft.de].

Schaunotizen

[00:02:49] Mobile & Desktop App oder Webseite? Bei uns gehen die Meinungen auseinander: Vanessa nutzt gern installierbare Desktop-Apps, während Stefan lieber einfach einen Tab offen lässt. Einig sind wir uns: Egal ob App oder Web – das Verhalten sollte konsistent bleiben. Besonders spannend wird’s beim Blick auf Electron [https://www.electronjs.org/] vs. Tauri [https://tauri.app/]. Tauri basiert auf Rust und hat in den letzten Jahren deutlich an Aufmerksamkeit gewonnen – nicht zuletzt, weil es deutlich schlanker daherkommt. [00:09:29] Build Tools Webpack ist zwar noch immer weit verbreitet, aber wir sind uns nicht sicher, ob das heute noch gerechtfertigt ist. Stefan kritisiert den „JavaScript-first“-Ansatz und die vielen Loader. Peter ist entspannter unterwegs: Hauptsache, es funktioniert. Unsere Build-Tool-Favoriten: tsc, esbuild und Vite [https://vite.dev/]. Wir sprechen auch über dts-Bundler [https://www.npmjs.com/package/dts-bundle-generator] für Typdefinitionen und den (möglichen) Verzicht auf Bundler mit Import Maps. [00:25:37] Monorepo Tools Monorepos – Fluch oder Segen? Vanessa beschreibt typische Stolpersteine bei Multirepos, etwa mit npm link oder Symlinks. Wir finden: Monorepos sind weniger eine technische Entscheidung als eine organisatorische. Peter erzählt von seinem persönlichen „Sirpepe-Universum“-Monorepo – der zeigt, dass das Konzept auch für Einzelpersonen nützlich sein kann. [00:55:26] Sonstige Tools Wir diskutieren Tools wie Lodash [https://lodash.com/] und Axios [https://github.com/axios/axios] – früher unverzichtbar, heute eher „meh“. Mit der neuen

Revision 658: State of JS 2024, Teil 4/4

In dieser Revision sprechen wir mit Marius Kleidl (Web [https://www.accoplex.com/] / LinkedIn [https://www.linkedin.com/in/marius-kleidl/]), Webentwickler bei Transloaded [https://transloadit.com/] und Mitwirkender am Open-Source-Projekt TUS [https://tus.io/], über das Thema Resumable Uploads – also Datei-Uploads, die fortgesetzt werden können, wenn zwischendurch mal die Verbindung abraucht oder das Tab versehentlich geschlossen wird.

Schaunotizen

[00:01:13] Resumable Uploads Wir starten mit der Frage, warum klassische Upload-Methoden im Web oft unzuverlässig sind – vor allem bei großen Dateien wie Videos. Gerade bei instabilen Verbindungen oder auf Mobilgeräten ist Frust vorprogrammiert: Einmal abbrechen heißt meistens von vorne anfangen. Mit Resumable Uploads gehört das der Vergangenheit an. Stattdessen kann der Upload pausieren, später fortgesetzt werden – ganz ohne Datenverlust.

Im Zentrum der Folge steht TUS [https://tus.io/], ein Open-Source-Protokoll für Resumable Uploads, das Marius mitentwickelt. Wir reden über die Entstehung des Projekts, die technischen Grundlagen und wie man TUS in eigene Anwendungen integriert – sei es in Node.js, Go oder mit vorhandenen Client-Libraries. Besonders spannend: Die Spezifikation wird derzeit mit der IETF abgestimmt [https://datatracker.ietf.org/doc/draft-ietf-httpbis-resumable-upload/], mit dem Ziel, Resumable Uploads langfristig als offiziellen HTTP-Standard zu etablieren.

Marius gibt uns außerdem einen Einblick in die Community-Arbeit hinter TUS, den Beitrag anderer Open-Source-Projekte und wie Entwickler:innen durch eigene Implementierungen zur Verbesserung beitragen können. Wir streifen Themen wie Caching, Storage-Backends und was eigentlich alles im Hintergrund passieren muss, damit so ein Upload wirklich „resumable“ ist.

Natürlich kommen auch die praktischen Fragen nicht zu kurz: Was muss man beachten, wenn man Resumable Uploads in ein bestehendes Projekt integriert? Wie sieht die Kommunikation zwischen Client und Server aus? Und wie viel Aufwand steckt wirklich dahinter?

Links

TUS-Projekt [https://tus.io/] Die offizielle Webseite des TUS-Projekts, welches Resumable Uploads ermöglicht. Transloaded [https://transloaded.com/] Der Dienstleister für File-Processing, der Resumable Uploads unterstützt und individuelle Lösungen anbietet. API-File-Uploader [https://api-file-uploader.com/] Ein Open-Source-Projekt, das eine flexible API für den Datei-Upload aus verschiedenen Quellen bereitstellt.

Revision 657: Resumable Uploads

Peter, Stefan und Vanessa besprechen auch diese Woche wieder die Ergebnisse des State of JS 2024 [https://2024.stateofjs.com/en-US]. In Teil 1 [https://workingdraft.de/653/] stürzten sich die Hosts vor allem auf die neuen JavaScript Features, in Teil 2 [https://workingdraft.de/655/] besprachen sie die Pain Points von JavaScript und Browser APIs,  die Leseliste und die Bibliotheken. In diesem vorletzten Teil schaffen die Hosts ganze zwei weitere Seiten der Umfrage: Meta-Frameworks und Testing.

Schaunotizen

[00:01:17] Meta-Frameworks Die Hosts wenden sich zunächst der Frage zu, was Meta Frameworks denn eigentlich sind. Bekannte Namen sind Nuxt [https://nuxt.com/], Next.js [https://nextjs.org/], Remix [https://remix.run/], SvelteKit [https://svelte.dev/], etc. Doch was genau was so ein Meta Framework aus? Ist es eine „All in One“ Lösung? Muss es zwangsweise auf einem anderen Framework basieren? Das bringt uns auch zu einer Endlos-Diskussion: Ist React ein Framework oder eine Library (deutsch: Bibliothek)? Wobei, React hat diese Frage nun selbst beantwortet: Es ist eine Library [https://react.dev/#:~:text=with%20a%20framework-,React%20is%20a%20library,-.%20It%20lets%20you]. Nun gut, die Hosts einigen sich darauf, dass man eine gewisse Erwartungshaltung an Meta-Frameworks hat: Sie kommen mit einem Router [https://entwickler.de/javascript/vuejs-unter-der-lupe-der-vue-router], Zustandsverwaltung (State Management) [https://entwickler.de/webentwicklung/die-sache-mit-dem-state], SSR und SSG [https://www.it-schulungen.com/wir-ueber-uns/wissensblog/was-ist-ssr-und-ssg.html] und weiteren bereits eingebauten Features. Meta-Frameworks kommen mit diesen vielen nützlichen Features, keine Frage. Dennoch stellt man auch eine neue Abhängigkeit her. Das Benutzen dieser Meta-Frameworks kann es schwieriger machen, Bugs zu finden und zu fixen. Wie so oft, wenn man nicht mehr die Kontrolle über den kompletten Code hat. Sie können auch mit Sicherheitslücken kommen, wie es kürzlich der Fall bei Next.js [https://www.heise.de/en/news/Next-js-Critical-gap-allows-web-apps-to-be-compromised-10327299.html] war. Wie auch in den beiden vorherigen Teilen sind sich die Hosts wieder in einem Punkt sicher: Es kommt auf die Entwickler:innen an, nicht auf das Meta-Framework. Kleine Bibliotheken wie Eleventy [https://www.11ty.dev/] sind dennoch immer eine gute Wahl. Das liegt bei Eleventy daran, dass man HTML und CSS losgelöst von dem Tool schreibt. Das ermöglicht eine leichte Migration in der Zukunft. [00:43:32] Testing Bei dem Thema Testing leben die Hosts in verschiedenen Welten. Während Vanessa sich schon seit Jahren mi Tests in der Welt von Frontend Frameworks beschäftigt, hat der in der Rust [https://www.rust-lang.org/]-Welt lebende Stefan kaum Berührungspunkte mit Framework-Component Testing und kann die ganze Problematik daher gar nicht so genau nachvollziehen. Vanessa klärt also zunächst einmal über die ganze Tragödie von Unit Tests [https://entwickler.de/testing/unit-testing-nach-frontend-art] über Component Tests [https://web.dev/learn/testing/get-started/component-testing?hl=de] zu End to End Tests [https://www.testautomatisierung.org/lexikon/e2e-testing/] oder doch auch Visual Regression Tests [https://bleech.de/blog/wie-funktioniert-visual-regression-testing/] und Snapshot Tests [https://www.novatec-gmbh.de/insights/blog/wann-snapshot-testing-dich-ueberschnappen-lassen/] auf. Die Umfrage verrät, dass aktuell viel Jest [https://jestjs.io/] eingesetzt wird, jedoch niemand mehr so richtig glücklich mit diesem Tool ist. Vitest [https://vitest.dev/] ist stark auf dem Vormasch, genauso wie

Revision 656: State of JS 2024 – Teil 3/4

Peter, Stefan und Vanessa besprechen weiterhin die Ergebnisse des State of JS 2024 [https://2024.stateofjs.com/en-US], so wie in der Vergangenheit auch bereits der State of CSS (Revision 633-635) besprochen wurden. In Teil 1 [https://workingdraft.de/653/] stürzten sich die Hosts vor allem auf die neuen JavaScript Features. Nun geht es weiter mit den Schmerzpunkten von JavaScript und Browser APIs,  der Leseliste und den Bibliotheken.

Schaunotizen

[00:01:35] JavaScript Pain Points Die JavaScript Pain Points Angaben in der Umfrage kamen durch eine Freitext Eingabe in der Umfrage zustande, Wie Peter, Stefan und Vanessa finden, eine wichtige Zusatzinformation, um die Ergebnisse etwas besser interpretieren zu können. Denn diese sind bei näherem Betrachten der eigentlichen Antworten gar nicht mehr so konkret wie die Liste an Kurzantworten erst erscheinen lässt. Ein viel besprochenes Thema ist EcmaScript Module & Common JS. Das ES Module ist ein standardisiertes JavaScript-Modulsystem, das in ECMAScript 2015 (ES6) eingeführt wurde. Es wird in modernen Browsern und Node.js unterstützt. Das CJS Modulsystem wird hauptsächlich in Node.js verwendet. Es wurde entwickelt, bevor JavaScript ein offizielles Modulsystem hatte. Vor allem die Migration von CJS auf ESM wird als komplex und kompliziert genannt. Ebenfalls benannt wird das Fehlen von Typen. Hierbei kommen Peter und Stefan zu dem Schluss, dass man TypeScript „einfach“ dazu installieren, oder notfalls per IDE Extension hinzufügen kann. Sie sind also anderer Meinung als die Umfrage Ergebnisse. Der nächste Schmerzpunkt, der genannt wird, ist der, der fehlenden Standardbibliothek. Hier argumentiert Stefan, dass das eigentlich kein Problem von der Sprache JavaScript, sondern der Runtime sei. Er streut nebenbei das Wissen herein, dass es ein Standard Committee gibt, dass sich nun um serverseitige Runtimes kümmern wird: das TC55 [https://ecma-international.org/technical-committees/tc55/]. Stefan erzählt weiterhin, Rust [https://www.rust-lang.org/] hätte noch viel weniger Standards, da wäre alles frei konfigurierbar. Der letzten besprochenen Schmerzpunkt ist die asynchrone Programmierung. Da hätte Stefan gerne viele mehr Prozente gesehen. Denn gerade seit es async/await [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/async_function] gibt, gibt es viele Verständnislücken über die asynchrone Programmierung. Er weist auf den hilfreichen Blogartikel „What color is your function [https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/]“ von Bob Nystrom hin. [00:30:35] Browser API Pain Points Die Liste der Schmerzpunkte über Browser APIs ist doch sehr erheiternd zu lesen: Safari und Firefox. Und eigentlich auch Chrome. Peter, Stefan und Vanessa arbeiten sich durch die Liste und finden heraus: Das Hautproblem sei wohl, dass Chrome einige APIs freischaltet, die die anderen Browser noch nicht unterstützen. Dadurch gibt es Indifferenzen zwischen den Browsern. Doch ob es wirklich die Lösung ist, dass Chrome sich besser absprechen könnte? [00:00:00] Readlist In Teil 1 [https://workingdraft.de/653/] besprachen die Hosts das JavaScript Feature error.cause [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Error/cause]. Umso schöner nun zu sehen, dass viele der Ausfüllenden der Umfrage sich auch dieses Feature auf die Leseliste gesetzt haben. [00:44:04] Bibliotheken Über die Bibliotheken gibt es massig viele Daten anzuschauen. Doch für wen sind diese nun eigentlich interessant? Vermutlich eher, wenn man Inhalte für Blogartikel und Vorträge sammelt. Dennoch wüten sich Peter, Stefan und Vanessa durch die Daten. Webpack ist das meistebenuzte Tool, jedoch nicht das Beliebteste. React und Vite ste

Revision 655: State of JS 2024 – Teil 2

Wusstet ihr, dass man mit der richtigen TypeScript-Config plötzlich wieder Lust auf JavaScript bekommt? Kein Witz – wir haben’s ausprobiert!

Schaunotizen

[00:01:08] TypeScript 5.8 [https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/] Wir steigen ein mit einem TypeScript-Feature, das Stefan so begeistert hat, dass er direkt eine ganze Revision darüber machen wollte: die „Erasable Syntax Only“-Option. Wir diskutieren, warum diese Einstellung TypeScript endlich wieder zu einem erfreulichen Tool macht – besonders in Verbindung mit einer besseren Developer Experience und weniger magischem Code.

Danach nehmen wir TypeScript in Node-Projekten auseinander, sprechen über das Für und Wider von Linting vs. Type-Checking zur Laufzeit und streifen dabei auch Themen wie Build-Systeme, tsc vs. esbuild und warum man manchmal doch wieder Bock auf „einfaches JavaScript“ bekommt.

Zum Ende hin geht’s noch kurz um die Realität in Teams, in denen nicht alle TypeScript gleich intensiv nutzen – und um die Frage, ob TypeScript bald nur noch Linter mit Typen sein sollte.

Revision 654: TypeScript 5.8 – in Zukunft nur noch smarter Linter?

Peter, Stefan und Vanessa besprechen die Ergebnisse des State of JS 2024 [https://2024.stateofjs.com/en-US], so wie in der Vergangenheit auch bereits der State of CSS (Revision 633-635) besprochen wurden. In Teil 1 stürzen sich die Hosts vor allem auf die neuen JavaScript Features.

Schaunotizen

[00:03:44] State of JS 2024 – Teil 1 Peter, Stefan und Vanessa sind sich zumindest bei Einem einig: Die Motivation, um die Umfragen „State of X“ auszufüllen, ist die eigene Weiterbildung. Dieses Jahr gab es 14.000 Personen, die die Umfrage ausgefüllt haben. Ob die Ergebnisse generell nur eher etwas über Enthusiasten aussagt? Egal ob JS, HTML [https://2024.stateofhtml.com/en-US] oder CSS [https://2024.stateofcss.com/en-US]. Gar nicht mehr zu einig waren sie sich dann darin, wie interessant die einzelnen abgefragten JavaScript Features sind, oder auch wie interessant die Ergebnisse davon. Zuerst widmen sich die Hosts der Funktion groupBy. Doch vielmehr als nur über die Funktion zu sprechen, besprechen Peter, Stefan und Vanessa, ob es sich lohnt, bestehende Alternativen mit der nun nativen Funktion auszutauschen. Stefan spricht sich für eine Verschlankung der Codebasis aus und plädiert dafür, neue Sprachfunktionen zu nutzen, sobald sie verfügbar sind. Peter wirft die Frage auf, welcher bestehende Code dadurch ersetzt würde. Ein Beispiel dafür ist eine selbstgeschriebene groupBy-Funktion, die nicht ersetzt wird, weil sie gut funktioniert und leicht anders arbeitet als mögliche Alternativen. Zudem gibt es hier kein Risiko. Anders sieht es aus, wenn externe Programmbibliotheken ins Spiel kommen – hier könnten unvorhergesehene Änderungen auftreten, und generell ist das Ziel, die Anzahl an Abhängigkeiten möglichst gering zu halten.Im Gespräch über die bekannte Bibliothek Lodash wird darauf hingewiesen, dass man das Rad nicht neu erfinden möchte. Gleichzeitig merkt Peter an, dass es in bestimmten Fällen doch notwendig sein kann, eigene Lösungen zu schreiben, um spezielle Anforderungen zu erfüllen. Insgesamt herrscht jedoch Einigkeit darüber, dass Lodash nicht mehr zeitgemäß ist. Viele seiner Funktionen stammen aus einer anderen Entwicklungsära und lassen sich mittlerweile durch native Sprachmittel ersetzen. [00:21:03] Syntax features: Private Fields, error.cause Neben diesen strategischen Überlegungen geht es auch um aktuelle Neuerungen in JavaScript. Private Felder für Klassen erweisen sich als nützlich, um Objekte zu erweitern – etwa durch zusätzliche Methoden für Zeichenketten oder Mengen. Die Fehlerbehandlung wird mit der cause-Eigenschaft verbessert. Damit ist es möglich, einen abgefangenen Fehler mit einer neuen Meldung erneut auszulösen und dabei die ursprüngliche Ursache zu erhalten, was insbesondere für Fehlerprotokollierung nützlich ist. Wer sich näher damit beschäftigen möchte, findet eine ausführliche Beschreibung bei MDN [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Error/cause]. [00:30:36] Nullish Coalescing Ein weiteres Thema ist der sogenannte Nullish Koaleszenzoperator (??), die sich vom logischen Oder-Operator (||) dadurch unterscheidet, dass sie nur bei null und undefined greift, während || auf alle falschen Werte reagiert – also auch auf false, die Zahl

Revision 653: State of JS 2024 – Teil 1

In dieser Episode sprechen wir mit Stefan Judis [https://www.stefanjudis.com/] über Playwright. Stefan ist Entwickler, Blogger [https://www.stefanjudis.com/blog/], Autor des „Web Weekly“-Newsletters [https://webweekly.email/] und Speaker mit einer Leidenschaft für Web-Technologien, insbesondere für Web-Performance, neue Features in modernen Browsern und Barrierefreiheit.

Schaunotizen

[00:02:09] Playwright [https://playwright.dev/] Playwright ist ein ein leistungsfähiges End-to-End-Testing-Framework von Microsoft und darauf ausgelegt, stabile und zuverlässige Tests für Webanwendungen zu ermöglichen. Im Gegensatz zu älteren Test-Frameworks wie Selenium unterstützt Playwright moderne Features wie automatische Wartezeiten, Testisolierung und die Möglichkeit, mit mehreren Browser-Kontexten gleichzeitig zu arbeiten. Entwickler können Tests für Chromium (Chrome und Edge), WebKit (Safari) und Firefox schreiben – und das mit nur einer einzigen API.

Ein zentrales Feature ist die Fähigkeit, Tests parallel auszuführen, was die Laufzeit von Test-Suites erheblich reduziert und die Continuous-Integration-Pipelines beschleunigt. Besonders für Teams, die viele Tests automatisieren, bietet Playwright hier große Vorteile.

Ein wichtiger Aspekt, über den wir sprechen, ist die Art und Weise, wie Playwright UI-Tests durchführt. Die Auswahl von Elementen ist dabei besonders robust gelöst: Playwright nutzt sogenannte „Auto-Waits“, das heißt, es wartet automatisch, bis ein Element im DOM vorhanden, sichtbar und interaktiv ist, bevor eine Interaktion stattfindet. Das reduziert eine der größten Frustquellen beim End-to-End-Testing – nämlich Tests, die aufgrund von Timing-Problemen fehlschlagen.

Zusätzlich erlaubt Playwright komplexe Selektoren, darunter CSS-, XPath- und Text-Selektoren, aber auch speziellere Methoden wie getByRole, um barrierefreie Elemente gezielt zu testen. Besonders praktisch ist auch, dass Playwright Shadow DOM und iFrames unterstützt, womit es sich besonders gut für moderne Webanwendungen eignet, die diese Techniken intensiv nutzen.

Ein weiteres Thema sind Race Conditions. Da Playwright nicht nur die UI testet, sondern auch Interaktionen mit dem DOM und asynchrone Prozesse genau beobachten kann, hilft es, Probleme aufzudecken, die durch nicht deterministisches Verhalten entstehen. Gerade bei Single-Page-Applications oder Anwendungen mit vielen dynamischen Inhalten kann Playwright dazu beitragen, Bugs zu finden, die sonst nur schwer zu reproduzieren sind.

Wir sprechen außerdem über die Möglichkeiten von visuellem Regressiontesting mit Playwright. Theoretisch lassen sich Screenshots und sogar Videoaufnahmen von Testläufen erstellen, um Änderungen in der Benutzeroberfläche zu erkennen und zu überprüfen. Allerdings haben wir selbst diese Funktionalität noch nicht ausprobiert – deshalb interessiert uns: Nutzt ihr visuelles Regressiontesting mit Playwright? Welche Erfahrungen habt ihr damit gemacht?

Stefan gibt außerdem Tipps, wie sich Playwright in bestehende Continuous-Integration/Continuous-Deployment-Pipelines einbinden lässt. Besonders für Teams, die bereits mit CI/CD arbeiten, ist es wichtig, dass Test-Frameworks sich reibungslos in bestehende Workflows einfügen. Playwright bietet hier viele Optionen, darunter die Integration mit GitHub Actions, Jenkins und anderen CI-Systemen.

Ein weiteres Highlight ist die Playwright Trace Viewer-Funktion. Damit lassen sich Tests detailliert analysieren, indem sämtliche Interaktionen, DOM-Änderungen und Konsolen-Ausgaben einer Testausführung gespeichert und später Schritt für Schritt durchgegangen werden können. Das erleichtert die Fehlersuche nach einem gescheiterten Pipeline-Durchlauf erheblich.

Links

Playwright [https://playwright.dev/] Die Hauptseite von Playwright mit Dokumentation und Ress

Revision 652: Automatisiertes Testing mit Playwright

In dieser Episode sprechen wir mit Marco Bretschneider [https://www.linkedin.com/in/marco-bretschneider-norderstedt/] über den ARIA-Standard und dessen Bedeutung für Barrierefreiheit bei dynamischen Webinhalten. Ein Accessibility-Audit war für sein Team der Ausgangspunkt, ARIA intensiver zu nutzen – daraus entstanden in seiner Firma die „ARIA of the week“-Sessions, die bis heute wertvolle Ergebnisse liefern.

Schaunotizen

[00:01:15] Accessible Rich Internet Applications (ARIA) [https://www.w3.org/WAI/standards-guidelines/aria/] Wir starten mit einem historischen Exkurs zur Entstehung von ARIA und werfen einen Blick darauf, welche bestehenden Standards als Vorbild dienten. ARIA wurde nämlich stark von Accessibility-APIs aus der Desktop-Welt inspiriert, darunter Microsoft Active Accessibility (MSAA) [https://en.wikipedia.org/wiki/Microsoft_Active_Accessibility] und Apples Accessibility API [https://developer.apple.com/documentation/accessibility/accessibility-api/]. Diese Ansätze wurden auf das Web übertragen, um mit Technologien wie JavaScript, React und Angular umzugehen, die für assistive Technologien lange Zeit schwer zugänglich waren.

Marco erklärt, wie ARIA den Accessibility-Tree eines Browsers beeinflusst und assistiven Technologien wie Screenreadern wichtige Zusatzinformationen liefert, die mit reinem HTML nicht immer verfügbar sind.

Anschließend gehen wir auf die Funktionsweise einer Auswahl des ARIA-Vokabulars ein. Wir sprechen etwa darüber, wie Tabs mit Rollen wie role="tablist" und Attributen wie aria-controls korrekt umgesetzt werden und warum bestimmte Tastatur-Interaktionen bei ARIA ein absolutes Muss sind. Außerdem reden wir über die Unterschiede zwischen Toggle-Buttons, Checkboxen und Switches sowie die Einsatzmöglichkeiten von Live-Regions mit aria-live.

Am Ende bleibt die zentrale Erkenntnis: ARIA ist ein mächtiges Werkzeug, aber es muss gezielt und mit Bedacht eingesetzt werden. Wichtig ist ein grundlegendes Verständnis des Accessibility-Trees. Gut umgesetztes ARIA macht dynamische Webinhalte nicht nur zugänglicher, sondern erleichtert auch Entwickler*innen die Arbeit, indem es Barrierefreiheit strukturiert und nachvollziehbar macht.

Links

Inclusive Front-End Design Patterns [https://www.smashingmagazine.com/printed-books/inclusive-front-end-design-patterns/] Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen. Open UI [https://open-ui.org/] Eine Initiative zur Standardisierung von UI-Komponenten, die auch Barrierefreiheit im Blick hat. Inclusive Components [https://inclusive-components.design/] Eine Website, die praktische Anleitungen und Beispiele bietet, um zugängliche UI-Komponenten zu entwickeln. W3C ARIA Authoring Practices: Tabs [https://www.w3.org/WAI/ARIA/apg/patterns/tabs/] Offizielle W3C-Dokumentation zu Best Practices für die Umsetzung von Tabs mit ARIA. HTML Spec: Link Type Next [https://html.spec.whatwg.org/multipage/links.html#link-type-next] Die offizielle HTML-Spezifikation zu den Link-Typen rel="next" und rel="prev". Was ist Usability wirklich? (ProContext) [https://www.procontext.de/aktuelles/2010/02/was-ist-usability-wirklich.html] Ein Artikel, der das Konzept der Gebrauchstauglichkeit-Messung und die Stufen der Usability erklärt. Inclusive Front-End Design Patterns [https://www.smashingmagazine.com/printed-books/inclusive-front-end-design-patterns/] Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen. HT [https://html.spec.whatwg.org/multipage/]

Revision 651: Accessible Rich Internet Applications (ARIA)

In dieser Episode sprechen wir mit der freiberuflichen UX/UI-Designerin und Nachhaltigkeitsforscherin Sandy Dähnert (Web [https://www.sandydaehnert.de/] / LinkedIn [https://www.linkedin.com/in/sandy-daehnert/]) über die Herausforderungen und Chancen im nachhaltigen UX- und UI-Design.

Unser Sponsor



Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um voneinander zu lernen.

Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.

Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc [https://mittwald.de/hitc?ref=workingdraft.de].

Schaunotizen

[00:02:08] Sustainable Web Design Sandy beschäftigt sich seit 2018 intensiv mit diesem Thema und erklärt uns, was nachhaltiges Design bedeutet – und warum es weit über den ökologischen Aspekt hinausgeht. Wir richten unseren Blick auf die drei Dimensionen der Nachhaltigkeit: ökologisch, ökonomisch und sozial. Dabei wird schnell klar, dass der Fokus oft nur auf der Umwelt liegt, während Themen wie Barrierefreiheit, Diversität und ethisches Design genauso wichtig sind.

Ein zentraler Punkt unserer Diskussion ist die Rolle der Nutzerforschung. Wir müssen verstehen, wie unterschiedliche Interessen und Bedürfnisse die Gestaltung von Interfaces beeinflussen. Eine divers zusammengesetzte Nutzergruppe sorgt nicht nur für bessere Produkte, sondern macht auch unsere Verantwortung als Designer:innen deutlich. Sandy schlägt darüberhinaus aber auch vor, Personas nicht nur für Menschen, sondern auch für nicht-menschliche Elemente wie die Natur zu erstellen (sogenannte „Non-Human-Personas“), um die Auswirkungen unserer Designs auf die Umwelt besser zu berücksichtigen.

Natürlich schauen wir uns auch technische Entscheidungen an, die einen CO₂-Fußabdruck hinterlassen. Wie viel Daten eine Website überträgt, welche Hosting-Anbieter wir wählen und wie sich Design-Entscheidungen auf den Stromverbrauch auswirken – all das spielt eine Rolle. Sandy zeigt uns, dass minimalistisches Design nicht nur ästhetische Vorteile hat, sondern auch einen positiven Einfluss auf die Umwelt haben kann. Wir sprechen über Tools wie Website Carbon [https://www.websitecarbon.com] oder EcoGrader [https://www.ecograder.com], die uns dabei helfen, die Performance und Nachhaltigkeit von Webseiten zu analysieren.

Zum Schluss reflektieren wir noch über unsere Verantwortung als Designer:innen und Unternehmen. Wir diskutieren, wie wir ethische Überlegungen in den Designprozess integrieren können, welche konkreten Schritte sich umsetzen lassen und warum es wichtig ist, sich kontinuierlich weiterzubilden. Nur wenn wir verschiedene Perspektiven einbeziehen und bewusste Entscheidungen treffen, können wir die Herausforderungen der Nachhaltigkeit meistern und echten Wandel vorantreiben. 🌱

Links

W3C Web Sustainability Guidelines [https://w3c.github.io/sustyweb/] Richtlinien und Best Practices für nachhaltiges Webdesign Green the Web [https://greentheweb.com] Sandys Webse

Revision 650: Sustainable Web Design

Der wöchentliche Podcast für Webdesigner:innen und -entwickler:innen. Supported
uns bei Patreon: https://patreon.com/workingdraft

Working Draft