Working Draft

Peter, Stefan und Vanessa besprechen die Ergebnisse des State of JS 2024, 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 oder CSS. 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. [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 0, leere Zeichenketten oder NaN. Beide Operatoren lassen sich beliebig verketten. MDN. Eng damit verbunden ist die Kurzschreibweise für logische Zuweisungen (||=), die es ermöglicht, Werte nur dann zu setzen, wenn sie bislang einen falschen Zustand haben. MDN. Ein weiteres kleines, aber oft übersehenes Detail ist die sogenannte Hashbang-Syntax (#!). Diese ist vor allem in Kommandozeilen-Werkzeugen von Bedeutung, die in JavaScript geschrieben sind. Sie ermöglicht es, Skripte ohne expliziten Aufruf der Laufzeitumgebung auszuführen, etwa beim Starten eines Programms aus einer Paketkonfigurationsdatei heraus. [00:34:40] Logical Assignment Inneren Feldern von Objekten lassen sich nun auch neue Werte zuweisen, wenn ihr aktueller Wert falsy ist. Also wiederum nun wieder alle falsy Werte im Gegensatz zu dem vorher besprochenem Thema. [00:41:12] String Features, Array Features Beim Blick auf die neuen Möglichkeiten zur Verarbeitung von Zeichenketten zeigt sich, dass diese nur selten gebraucht werden. Ein Beispiel ist die Methode replaceAll, die etwa genutzt werden kann, um überflüssige Leerzeichen aus nutzergenerierten Inhalten zu entfernen. Zum Thema Array Features gibt es eine Liste von Funktionen, die es eigentlich vorher auch schon so gab – nur jetzt sind die Objekte immutable geworden. Also die Funktion ändert nicht mehr das Originalobjekt, sondern gibt ein neues Array wieder. Doch ihr Nutzen hält sich unserer Hosts nach in Grenzen. Besonders in reaktiven Anwendungsarchitekturen wie React könnten sie jedoch für die Verarbeitung unveränderlicher Daten hilfreich sein. [00:46:36] Async Features, Set Features, Group Features, Language Pain Points In der asynchronen Programmierung zeigt sich, dass Promise.allSettled hilfreich ist, wenn auf mehrere Dateien für die Lokalisierung einer Anwendung gewartet werden muss. Neue Funktionen für Mengen (Sets) sind zwar interessant, aber wären mit einer besseren grafischen Darstellung leichter verständlich gewesen. Die Beantwortung der Nutzungshäufigkeit von groupBy wird kritisch hinterfragt. Nur ein Drittel der Befragten gibt an, diese Funktion zu verwenden – doch möglicherweise liegt das auch daran, dass viele bereits eigene Lösungen im Einsatz haben. Schließlich geht es um den Einsatz von Programmiersprachen und Werkzeugen. Die Nutzung von TypeScript ist ungebrochen hoch, mit einer Umfragequote von nahezu 100 Prozent. Künstliche Intelligenz spielt im Entwicklungsalltag eine eher untergeordnete Rolle: Ein Fünftel verzichtet ganz darauf. JavaScript wird von 95 Prozent der Befragten im Beruf eingesetzt, 40 Prozent programmieren auch in der Freizeit damit – wobei hier eine gewisse Überschneidung wahrscheinlich ist. [00:55:21] Browser APIs Abschließend widmen sich den Hosts den Antworten zum Thema der Browser APIs. Es gint viel Begeisterung für die bevorstehende Temporal-API, die die Arbeit mit Zeitwerten erheblich vereinfachen wird. MDN. Ein oft geäußerter Wunsch bleibt die Einführung statischer Typisierung direkt in JavaScript sowie umfangreichere Standardbibliotheken. Links State of JS – Outreach Ähnliche Revisionen Revision 633: State of CSS 2024, Teil 1/3 Revision 634: State of CSS 2024, Teil 2/3 Revision 635: State of CSS 2024, Teil 3/3

In dieser Episode sprechen wir mit Stefan Judis über Playwright. Stefan ist Entwickler, Blogger, Autor des „Web Weekly“-Newsletters und Speaker mit einer Leidenschaft für Web-Technologien, insbesondere für Web-Performance, neue Features in modernen Browsern und Barrierefreiheit. 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. Schaunotizen [00:02:09] Playwright 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 Die Hauptseite von Playwright mit Dokumentation und Ressourcen. Playwright GitHub Repository Das offizielle GitHub-Repository von Playwright mit Quellcode und Beitragsrichtlinien. Playwright Tutorial auf LambdaTest Ein ausführliches Tutorial zur Nutzung von Playwright für automatisierte Tests. Playwright Tutorial auf BrowserStack Ein Leitfaden zur Verwendung von Playwright für Testautomatisierung. Playwright Trace Viewer Ein Tool zur detaillierten Analyse von Testläufen, um Fehler besser nachzuvollziehen. Parallelisierung in Playwright Eine Dokumentation zur effizienten Nutzung der Parallelisierungs-Funktionen von Playwright. Element-Selektoren in Playwright Übersicht über die verschiedenen Selektoren und deren Nutzung. Web Weekly Newsletter Stefan Judis‘ wöchentlicher Newsletter mit aktuellen Themen rund um Webentwicklung. Unterstütze Stefan auf Patreon Hilf Stefan dabei, weiterhin großartige Inhalte zu erstellen, indem du ihn auf Patreon unterstützt! Playwright Tips Stefans Playlist für Checkly mit Videos zu Playwright.

Marco Bretschneider, ein Entwickler mit Expertise im ARIA-Standard, teilt spannende Einblicke in die Barrierefreiheit von Webinhalten. Er erklärt, wie ARIA die Interaktion mit assistiven Technologien verbessert, insbesondere durch korrekte Implementierung von Tab- und Switch-Komponenten. Die Bedeutung von semantischem HTML und der Einfluss von JavaScript auf die Benutzererfahrung werden ebenfalls thematisiert. Zudem spricht er über die Herausforderungen, ARIA im Team zu kommunizieren und wie regelmäßige Diskussionen in seiner Firma wertvolle Erkenntnisse liefern.

In dieser Episode sprechen wir mit der freiberuflichen UX/UI-Designerin und Nachhaltigkeitsforscherin Sandy Dähnert (Web / LinkedIn) ü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. 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 oder EcoGrader, 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 Richtlinien und Best Practices für nachhaltiges Webdesign Green the Web Sandys Webseite mit Ressourcen über nachhaltiges Design, Tools und Best-Practice-Beispielen. Der Green the Web Podcast Sandys Podcast über nachhaltiges UX/UI Design. Green.io Konferenz Eine Veranstaltung zum Thema nachhaltiges Design und Entwicklung. Website Carbon Analysiert den CO2-Fußabdruck von Webseiten und gibt Empfehlungen zur Reduktion. EcoGrader Ein weiteres Tool zur Bewertung der ökologischen Fußabdrücke von Webseiten. Cost of a pixel color (Android Dev Summit ’18) Dieser Vortrag zeigt, wie der Dark Mode den Energieverbrauch von OLED-Displays reduziert, und auch, dass blaue Pixel mehr Strom verbrauchen als andere Farben. Introducing the energy saving concept of Lower Carbon Graphics Developing and implementing a new idea which we believe has already saved energy in homes across the UK. Switching from light to dark mode on apps and websites uses more energy BBC R&D find energy saving recommendation doesn’t take into account user behaviour

Schepp und Hans erörtern in dieser Revision, anlässlich eines Gastbeitrags zum Adventskalender des Engineering Kiosk Podcasts, die vielfältigen Aspekte von Engineering KPIs, deren Bedeutung für Benutzerinteraktion und Nutzererfahrung sowie die Notwendigkeit regelmäßiger Anpassungen im Einklang mit Unternehmenszielen. Schaunotizen [00:01:13] Engineering KPIs Los geht’s mit einem Rückblick auf die Weihnachtsepisode beim Engineering Kiosk, in der sie erste Gedanken zu KPIs geteilt hatten. Schnell wird klar: KPIs sind genauso vielfältig wie die Perspektiven der beiden. Hans bringt ein Beispiel aus der Praxis und erklärt, wie man die Performance eines Produkts messen kann – etwa in einem Online-Shop: Wie viele Besucher:innen kaufen wirklich etwas? Oder bei einer Video-Streaming-Plattform: Wie viele schauen regelmäßig und wie lange bleiben sie dran? Solche KPIs helfen nicht nur Entwicklerteams, sondern auch Produktverantwortlichen, die richtigen Entscheidungen zu treffen. Schepp wiederum macht deutlich, dass KPIs mehr als reine Technik sein sollten. Sie sollen auch die Benutzererfahrung verbessern. Ein Highlight in der Diskussion: die Core Web Vitals wie Largest Contentful Paint oder Cumulative Layout Shift – unverzichtbare Metriken für die Optimierung der User Experience (höre dazu auch Revision 533: Frontend Performance Metriken – Die Core Web Vitals). Am Ende sind sich beide einig: KPIs sollten immer aus der Sicht der Nutzer:innen betrachtet werden. Ein weiterer wichtiger Punkt ist das regelmäßige Überprüfen und Anpassen bestehender KPIs. Hans plädiert für regelmäßige Meetings, um Metriken und Ziele auf Kurs zu halten. Auch das Thema Alerting thematisieren wir: Was tun, wenn KPIs plötzlich aus der Reihe tanzen? Schnelles Handeln ist hier entscheidend. Aber Achtung: Zu viele Metriken gleichzeitig sind kontraproduktiv. Ein Fokus auf die wirklich relevanten KPIs den größten Nutzen bringt – für Unternehmen und Nutzer:innen.

Mit Matthias Ott (Web, Mastodon, Newsletter) quatschen Schepp und Peter über das Indie Web im Allgemeinen und persönliche Websites im Besonderen. Schaunotizen [00:01:01] Personal Web Sites Matthias ist der Schöpfer des Newsletters Own Your Web, in dem (unter anderem) die persönliche, selbstentwickelte und keinen Regeln gehorchende Webseite eine prominente Rolle spielt. Warum man eine Personal Web Site statt Social Media haben wollen könnte und wie diese gebaut sein könnte, ist Kernthema der Sendung. Faustregel: alles kann, nichts muss! Wir schauen uns ein paar Beispiele an (von Lynn Fisher bis CSS-Tricks), sprechen über technische wie inhaltliche Herausforderungen (z.B. Leser-Kommentare) Publikations-Paradigmen wie POSSE und den Umgang mit großen Plattformen. Wir enden mit einer Diskussion rund um RSS als Abo-Kanal, Syndikations-Mechanismus (z.B. via RSS Parrot) und Styling-Ziel für eine sehr hippe und coole Technologie namens XSLT.

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.

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.

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.

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.