Alle paar Monate setzen sich Peter und Schepp für eine neue Runde „Neues in den Browsern“ zusammen: Was hat Chrome gepusht, wo hat Safari nachgezogen, was ist frisch in Firefox – und vor allem: Was davon ist heute schon praxistauglich? Wir sortieren Release Notes, testen Features im Alltag und teilen konkrete Einsatzideen aus echten Projekten. In dieser Ausgabe geht’s u. a. um den IntersectionObserver mit scrollMargin, präziseres Rechnen mit Math.sumPrecise, explizites Ressourcen-Management, Scheduling für bessere INP-Werte, sowie Dialog/Popover-Feinschliff, @starting-style, View Transitions und eine schnelle Lightning-Round am Schluss mit kleinen, feinen Browser-Updates. 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 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:03:25] INTERSECTIONOBSERVER: SCROLLMARGIN IN ALLEN BROWSERN Endlich auch in Firefox: Beobachtungsbereich in versteckte Scrollzonen erweitern – z.B. für Lazy-Loading in Slidern (früheres Laden vor Sichtbarkeit). Abgrenzung zu rootMargin, graceful Degradation. Use-Cases: Performance-Moderation, Header ein-/ausblenden, lazy Komponenten initialisieren. [00:15:42] JAVASCRIPT: MATH.SUMPRECISE Verhindert aufgesammelte Floating-Point-Fehler beim Aufsummieren (aktuell in Firefox, Standardisierung läuft). Kontext: 0.1 + 0.2 ≠ 0.3, Reihenfolge-Unterschiede bei Floats. Weiteres: Falsehoods programmers believe about money – Sarah Dayan, Floating Point visually explained. [00:29:07] EXPLICIT RESOURCE MANAGEMENT (USING, SYMBOL.DISPOSE) Deterministische Aufräumlogik (z.B. Temp-Dateien/Streams): Klassen implementieren Symbol.dispose/Symbol.asyncDispose, verwendet mit using. Abgrenzung zu GC-/Finalization-Registry; im Frontend selten nötig, im Backend super nützlich. [00:30:12] WEAKREFS/WEAKMAPS/WEAKSETS State an DOM-Knoten hängen, ohne Leaks; nicht iterierbar by Design. Talk-Empfehlung: Dan Shappir – Strength in weakness. [00:35:57] PARTYTOWN & ATOMICS MIT SHAREDARRAYBUFFER Third-party-Skripte in Web-Worker „so tun als ob DOM“ – Synchronisation über Atomics. (Historisch Fallback: synchrone XHR via SW-MitM – bitte nicht mehr.) [00:39:46] PRIORITIZED TASK SCHEDULING API await scheduler.yield() setzt freiwillige Sollbruchstellen in heavy Main-Thread-Tasks. Hilft INP („Interaction to Next Paint“), ohne jeden Schritt in Microtasks zu verpacken. Safari hinkt noch; Alternative/Ergänzung: requestIdleCallback. [00:52:50] NAVIGATOR.DEVICEMEMORY (CHROMIUM) & RUMVISION: DEVICE MEMORY ALS PROXY RAM-Buckets (1/2/4/8+ GB) als Proxy für Geräteleistung: Auf schwachen Geräten Third-Party (Analytics/Sentry) später oder gar nicht laden. Hintergrund/Lesetipp: INP-Analyse – RUMVision. SEO-Seitenthema: Scraper-Traffic & „Great Decoupling“ → Analyse von Brodie Clark. [01:02:29] DIALOG & POPOVER: INVOKER-API, FOKUS & FEINSCHLIFF Invoker-/Command-Mechanik (commandForElement) für ohne JS-Boilerplate öffnen/schließen; nicht alle DOM-Methoden „automatisch“ als Command. Neues: closedBy (wer schloss den Dialog?) und showPopover({source}) – wichtig fürs Fokus-Return. Fokusmanagement bleibt knifflig. [01:18:15] @STARTING-STYLE Saubere „from-state“ Transitions (z.B. Dialog-Entry) – alle großen Browser dabei. Stolpersteine: Josh W. Comeau: The big gotcha. [01:19:17] VIEW TRANSITIONS API Nutzen für MPA-Flows (z.B. Button → Dialog „verwandeln“, List-Reorders). Praktisch auch für Exit-Animationen, wo Dialog selbst limitiert ist. [01:24:43] HTTP: CLEAR-SITE-DATA Gezielt Caches/Storage per Header leeren (Logout, harte Resets). [01:29:51] CSS RANDOM() UND TREE-COUNTING FUNKTIONEN. Zufall in CSS für Effekte/Variationen; siehe auch Kizu: Tree counting & random. [01:32:35] URL PATTERN API Bequemes URL-Matching in JS; neu in Firefox 142 & Safari 26. [01:34:00] CSS :HEADING (FIREFOX) Ein Selektor für alle Überschriften-Level – vereinfachtes Typo-Styling. [01:35:00] CSS FIELD-SIZING Eingabefeld-Autogröße und positionsgenaue Overlays/Tooltips – feineres UI-Layouting. [01:35:50] ANCHOR POSITIONING Feineres UI-Layouting für Overlays/Tooltips. [01:37:35] CSS ANIMATION-TIMELINE Scroll-/View-gekoppelte Timelines – jetzt auch in Safari. [01:38:10] INTEROP 2025 Gemeinsam priorisierte Feature-Arbeit der Browser-Teams – Grundlage dafür, dass vieles „überall benutzbar“ wird.

Sobald „TypeScript“ im Titel steht, ist das quasi die Lizenz zum Abschweifen. Schnallt euch also an, die Alten Herren nehmen euch mit in den statisch typisierten Mindpalast. UNSER SPONSOR Ende Oktober ist es so weit: Die programmier.con lädt ein – und zwar nach Bad Nauheim, nördlich von Frankfurt! Zwei Tage, zwei Tracks, ein Abendprogramm – und jede Menge praxisnahe Talks zu Webentwicklung und angewandter AI. Von Svelte über lokale LLMs bis zu Developer Experience, A/B-Testing, Security und AI-Agenten: Die programmier.con bringt die Community zusammen – und das auf Augenhöhe. Die meisten Vorträge sind auf Deutsch, internationale Highlights wie Svelte-Macher Rich Harris inklusive. 🎟 Dank Sponsoring gibt’s die Tickets aktuell schon ab 249 € (zzgl. MwSt.). 👉 Alle Infos und Tickets auf con.programmier.bar SCHAUNOTIZEN [00:01:35] TYPESCRIPT 5.9 Da das nächste TS-Release gelandet ist, sinnieren Peter und Stefan mal wieder über Architektur, Fehlermeldungs-Ergonomie und frische TypeScript-Details. Ausgangspunkt: Browser-Errors vs. Rust („FromEntries + Sparse Array“ lässt grüßen) und warum viele DevTools dabei schwächeln. Danach geht’s in die 5.9-Notes: das verschlankte tsc --init, „Deferred Module Evaluation“ (import defer) als reine Syntax-Durchreiche, sowie der neue Zielwert module: node20 inkl. Import-Attributes (vormals Assertions) für JSON/CSS/WASM & Co. Wir sprechen über Modul-Laden in Browsern vs. Node, warum Bundler zunehmend nach Legacy riechen, ob Import-Maps und ein „print module graph“ aus TSC den Build-Step ablösen könnten – und wieso Lighthouse-Scores dabei wenig helfen. Auf Editor-Seite freuen wir uns über MDN-Kurzbeschreibungen in DOM-Tooltips, expandierbare Typ-Hovers (endlich beides: kompakt und detailliert) und ein konfigurierbares Hover-Limit. Unter der Haube gibt’s Performance-Gewinne und ein wichtiges Typing-Fix: ArrayBuffer ist nicht länger (fälschlich) Supertyp diverser Typed Arrays. Am Ende blicken wir nach vorn: 6.x als „Glattbügel-Serie“ auf dem Weg zu TS 7 (Go-Rewrite), nebst den unvermeidlichen Ecosystem-Reibungen zwischen Node, Deno, Web-Streams & Freunden.

Diese Revision plaudern wir mit Alexander Lichter (LinkedIn / Mastodon) und Ulrich-Matthias „Ulima“ Schäfer (LinkedIn) über Ecosystem Performance, kurz „e18e“: Warum es sich lohnt, das JavaScript-Ökosystem aufzuräumen, wie die Community organisiert ist und wo jede:r sofort mitmachen kann. UNSER SPONSOR PDFs aus HTML – schnell, skalierbar, datenschutzkonform.Mit EuroPDF erstellt ihr hochwertige PDFs direkt aus modernem HTML, CSS und JavaScript – inklusive Fußzeilen, Seitennummern, sauberen Tabellenumbrüchen und Barrierefreiheit. Perfekt für Rechnungen bis hin zu komplexen Reports. Auch tausende PDFs pro Tag? Kein Problem. EuroPDF ist das einzige europäische SaaS, das PrinceXML einsetzt – mit durchgängig europäischer Infrastruktur bleiben eure Daten in Europa. Hinter EuroPDF steht Die Antwort: ein Team mit 20+ Jahren Erfahrung in maßgeschneiderter Webentwicklung für Firmenkunden. Sichere dir 20 % Ersparnis auf deine Subscription mit dem Code WORKINGDRAFT unter europdf.eu/workingdraft. SCHAUNOTIZEN [00:02:00] ECOSYSTEM PERFORMANCE (E18E) Im Fokus der e18e-Bewegung stehen die Themen Cleanup, Speedup, Level-Up: alte Dependencies durch moderne, kleinere Alternativen ersetzen (z. B. Lodash-Funktionen/-ES, Tiny Globby statt Globby), Dev-Tooling messbar beschleunigen (u. a. neue Prettier-CLI, schnellere Lint-Setups) und Bibliotheken so gestalten, dass sie klaren Scope haben und aktuelle Node-LTS/ESM-Realität widerspiegeln. Wir sprechen über Grenzen (Deep-Deps, Battle-testing, Baseline-Support), über Publint für saubere Exports und über die neue e18e-CLI, die Codemods und Checks bündelt. Außerdem: Wie man Einstiegshürden senkt (gute Doku, Replacement-Guides), warum Dev-Dependencies oft den größten Hebel haben, und welche Trade-offs Toolchains heute treiben (ESLint ↔︎ oxlint/Biome, Type-aware-Linting, Plugins in JS vs. Rust/Go). Praxisstories gibt’s zu Renovate, Pre-Commit-Hooks („no-verify“ lässt grüßen) und zu Contribution-Etikette gegenüber Maintainer:innen. LINKS E18E.DEV – WEBSITE & GUIDES Offizielle Infos, Replacement-Guides, Manifest und Community-Einstieg. GITHUB.COM/43081J – JAMES GARBUTT Initiator, Maintainer und Treiber vieler e18e-Tools. PUBLINT.DEV – PUBLINT Prüft, ob deine Package-Exports sauber konsumierbar sind (CJS/ESM/Typings). NPMGRAPH.JS.ORG – NPMGRAPH Visualisiert Abhängigkeitsbäume und hilft, Ersetzungs-Kandidaten zu finden. DOCS.RENOVATEBOT.COM – RENOVATE Automatisiert Dependency-Updates; sinnvoll konfiguriert spart es viel Pflegearbeit. GITHUB.COM/ANTFU/TINYGLOBBY – TINY GLOBBY Kleiner, schneller Globbing-Ersatz, häufige Cleanup-Empfehlung. LODASH.COM – LODASH Beispiel für gezieltes Function-Importing bzw. Ersatz durch spezialisierte Utilities. PORFFOR.DEV – PORFFOR Experimentelle JS/TS-Engine mit AOT-WASM-Ansatz – spannendes Performance-Forschungsprojekt.

Wir drehen wieder am „Glücksrad“ – diesmal allerdings ausschließlich mit ARIA-Attributen! Schepp hat sich als Mitspielende Accessibility Engineer Daniela Kubesch (LinkedIn / Bluesky / Mastodon) und Frontend/Design-Systems Engineer Marco Bretschneider eingeladen. Der Zufall spuckt ARIA-Attribute aus und wir sezieren sodann deren Einsatzfälle, Stolpersteine und ggf. sinnvolle Alternativen: von aria-placeholder über erklärende Verknüpfungen mit aria-details (plus ariaDetailsElements) bis hin zu großen, virtuellen Listen mit aria-posinset/aria-setsize. Außerdem sprechen wir über gute modale Dialoge (aria-modal &

) und wagen einen Blick nach vorn mit dem brandneuen aria-brailleroledescription aus WAI-ARIA 1.3. UNSER SPONSOR Ende Oktober ist es so weit: Die programmier.con lädt ein – und zwar nach Bad Nauheim, nördlich von Frankfurt! Zwei Tage, zwei Tracks, ein Abendprogramm – und jede Menge praxisnahe Talks zu Webentwicklung und angewandter AI. Von Svelte über lokale LLMs bis zu Developer Experience, A/B-Testing, Security und AI-Agenten: Die programmier.con bringt die Community zusammen – und das auf Augenhöhe. Die meisten Vorträge sind auf Deutsch, internationale Highlights wie Svelte-Macher Rich Harris inklusive. 🎟 Dank Sponsoring gibt’s die Tickets aktuell schon ab 249 € (zzgl. MwSt.). 👉 Alle Infos und Tickets auf con.programmier.bar SCHAUNOTIZEN [00:19:52] ARIA-PLACEHOLDER Entspricht inhaltlich dem HTML-placeholder – verschwindet also, sobald Nutzer:innen tippen. In der Praxis deshalb eher nicht verwenden: wichtige Hinweise gehören dauerhaft sichtbar neben/unter das Feld. Als Notnagel kann der Placeholder in der Accessible-Name-Ermittlung herangezogen werden, falls kein Label vorhanden ist (trotzdem immer ein richtiges setzen). Möglicher Spezialfall: contenteditable. Weiterführend: HTML placeholder, Accessible Name Computation. [00:27:58] ARIA-DETAILS & ARIADETAILSELEMENTS (DOM) Verknüpft ein Widget mit einer längeren, „reichen“ Zusatzbeschreibung (z. B. FAQ-Inhalt, Größentabelle, Bildbeschreibung). Anders als aria-describedby beeinflusst aria-details nicht den Accessible Name; Screenreader können die Details kontextuell anbieten. Über die DOM-Property element.ariaDetailsElements lässt sich die referenzierte(n) Beschreibung(en) als Elemente abrufen (nützlich für Tests/Tooling). Wichtig: Informationen auch visuell zugänglich machen! Weiterführend: aria-describedby, aria-labelledby, aria-description. [00:41:36] ARIA-POSINSET & ARIA-SETSIZE Für „Teilmengen“ großer Sets (virtuelle Listen/Tabellen, Pagination): aria-setsize gibt die Gesamtzahl der Elemente an (falls unbekannt: -1), aria-posinset markiert die Position des jeweils sichtbaren Items. Typische Anwendung bei endlosem Scrollen oder chunkweisem Nachladen („250 von 3000 geladen“). Setzt man auf den einzelnen Listeneinträgen/Zeilen; die Information landet zuverlässig im Accessibility Tree. Weiterführend: listitem role, row role. [00:52:48] ARIA-MODAL Kennzeichnet einen modalen Dialog (meist mit role="dialog" oder nativem

): Inhalte außerhalb sind für Assistive Technologien „inert“ also deaktiviert, der Fokus bleibt im Dialog. Gute Praxis: Dialog immer beschriften (aria-labelledby), eine kurze Erklärung mit aria-describedby verknüpfen, Fokus beim Öffnen auf ein sinnvolles Start-Ziel setzen (nicht zwingend das erste Input). Bei modalen Dialogen beginnt die Überschriftenhierarchie sinnvoll erneut (z. B. H1 im Dialog). Für die visuelle/Pointer-Sperre der Seite am besten das native

mit .showModal() verwenden (der Browser inertet den Rest). Weiterführend:

, inert, WAI-ARIA APG: Dialog (Modal) Pattern. [01:06:44] ARIA-BRAILLEROLEDESCRIPTION (NEU IN WAI-ARIA 1.3) Liefert eine speziell für Refreshable Braille Displays geeignete, kurze Rollenbeschreibung (z. B. Abkürzungen wie „BTN“ statt „Button“). Wird von AT/Plattform-APIs ausgewertet; im Markup sparsam und nur mit etablierten, verständlichen Kürzeln einsetzen. Ergänzt die bestehende Rollenkommunikation (ähnlich zu aria-roledescription, aber gezielt für Braille-Ausgaben). Weiterführend: WAI-ARIA 1.3: aria-brailleroledescription, aria-roledescription. LINKS REVISION 651: ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA) Folge, in der Schepp mit Marco über den grundsätzlichen Sinn, den Einsatz und dia Stolperfallen von ARIA spricht. A11YPHANT a11yphant ist eine von Daniela bereitgestellte, kostenlose, offene Lernplattform für Web-Accessibility. Statt langer Texte übst du die Basics direkt in interaktiven Coding-Challenges und kurzen Quizzes – ohne Account startklar, optional mit Anmeldung zum Fortschrittsspeichern.

Nuxt 4 markiert einen wichtigen Meilenstein für das populäre Vue-Framework. Obwohl das Release keine großartigen Breaking Changes mitbringt, steckt unter der Haube viel Neues, das den Workflow und die Performance nachhaltig verbessern soll. UNSER SPONSOR Ende Oktober ist es so weit: Die programmier.con lädt ein – und zwar nach Bad Nauheim, nördlich von Frankfurt! Zwei Tage, zwei Tracks, ein Abendprogramm – und jede Menge praxisnahe Talks zu Webentwicklung und angewandter AI. Von Svelte über lokale LLMs bis zu Developer Experience, A/B-Testing, Security und AI-Agenten: Die programmier.con bringt die Community zusammen – und das auf Augenhöhe. Die meisten Vorträge sind auf Deutsch, internationale Highlights wie Svelte-Macher Rich Harris inklusive. 🎟 Dank Sponsoring gibt’s die Tickets aktuell schon ab 249 € (zzgl. MwSt.). 👉 Alle Infos und Tickets auf con.programmier.bar Für diese Folge haben wir nochmal Alexander Lichter (LinkedIn / Mastodon) zu Gast, der uns als Nuxt-Core-Team-Member tiefere Einblicke in den Nuxt 4 Release, die technischen Hintergründe und die aktuelle Situation mit Vercel gibt. SCHAUNOTIZEN [00:01:41] NUXT 4 Das neue Nuxt bringt, anders als seine Vorversion, keine umfangreichen Breaking Changes mit. Einzige sichtbare Änderung ist die neue Verzeichnisstruktur, die man aber nicht übernehmen muss – bestehende Strukturen funktionieren weiterhin problemlos. Der Hauptfokus lag unter der Haube. Die CLI wurde verbessert, wie auch das Data Fetching. Die neue Version der Nitro-Engine, die für API-Routing, Build-Prozesse, Middleware und Deployment zuständig ist, steckt leider noch in der Entwicklung und hat das Nuxt 4 Release deutlich verzögert. Bis heute gibt es keine finale Version von Nitro, was auch hier und da Auswirkungen auf das weitere Ökosystem hat. Alex erklärt, wie die Abhängigkeit von Nitro entstand und welche Herausforderungen das für Entwickler:innen von Frameworks bedeutet, die darauf setzen. [00:00:00] DIE AKQUISITION VON NUXTLABS DURCH VERCEL Sodann schwenken wir um auf das heißdiskutierte Thema der Akquisition von NuxtLabs, also der Wiege von Nuxt, durch Vercel. Wir beleuchten, was es heißt, dass Nuxt ein Multi-Company Open-Source-Projekt ist und wie die Übernahme von NuxtLabs durch Vercel die Entwicklung in diesem Kontext beeinflusst. Wir spekulieren über Vercels Motivation, NuxtLabs zu übernehmen und warum das Unternehmen aktuell möglicherweise versucht, seinen Ruf im Open-Web-Bereich zu verbessern – auch durch die Unterstützung von Community-Projekten wie TanStack. Überraschend ist, dass trotz der Übernahme Netlify weiterhin Hauptdeployment-Partner von Nuxt bleibt. LINKS OFFIZIELLER BLOGPOST: NUXT 4 RELEASE Detaillierte Infos zu neuen Features und der optionalen Verzeichnisstruktur. NUXT 4 ROADMAP Übersicht über geplante Weiterentwicklungen und Zeitplan. GITHUB DISKUSSION ZU NUXT 4 Community-Diskussionen und Q&A rund um das Release.

In dieser Folge nehmen wir euch mit hinter die Kulissen des JSCraftCamp – einer der sympathischsten Community-Konferenzen im deutschsprachigen Raum. Gemeinsam mit den Organisatoren Wolfram Kriesing und Jörn Bernhardt sprechen wir über das Konzept, die Organisation und was das Event so besonders macht. SCHAUNOTIZEN [00:01:03] DAS JSCRAFTCAMP Wie einleitend erwähnt, sprechen wir in dieser Folge mit Wolfram und Jörn über das JSCraftCamp – ein kostenloses Barcamp für JavaScript-Interessierte, das seit 2016 jährlich in München stattfindet. Wir erfahren, wie sich das Event über die Jahre entwickelt hat, warum es sich wie ein Klassentreffen anfühlt und wie neue Teilnehmende durch Pull Requests über GitHub direkt in die Community einsteigen. Wir reden darüber, wie das Orga-Team die Sessions plant (Spoiler: gar nicht – das machen alle zusammen vor Ort, siehe Sessionplan), wie neun parallele Tracks trotzdem überschaubar bleiben und warum es keine festen Themenvorgaben gibt. Auch Themen abseits von JavaScript, wie CSS, Projektmanagement oder das Programmieren mit Kindern, sind willkommen. Wolfram und Jörn geben Einblicke in ihre GitHub-basierte Orga-Struktur, sprechen über Herausforderungen bei der Sponsorensuche, Nachhaltigkeit beim Catering und warum veganes Mittagessen alle glücklich macht. Außerdem berichten sie von ihren Ideen zur besseren Inklusion und Diversität, von spontanen Sessions mit Kindern, Kaffee-Fails, T-Shirt-Verteilung per Motivationstrick – und wie jede:r ihr Format einfach forken kann. LINKS JSCRAFTCAMP DISCORD Hier bleiben die Organisatoren und Teilnehmenden des JSCraftCamp unterjährig in Kontakt, und hier wird das Camp im Offenen geplant. CSSBATTLE The funnest multiplayer game with 300K+ web designers & developers. Replicate the target images using CSS – the shorter your code, the higher your score! Happy coding!

Stefan und Peter geben ihre Einschätzungen rund um das Rewrite des TypeScript-Compilers zum besten! 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:03] TYPESCRIPT GOES NATIVE! TypeScript bekommt einen Rewrite in Go und nach der Veröffentlichung der ersten Previews sehen wir Besprechungsbedarf. Wir diskutieren, ob und unter welchen Umständen ein Komplett-Rewrite sinnvoll ist und ob Go eine bessere Wahl als denkbare Alternativen wie Rust oder C# ist. Dabei sprechen wir unter anderem über die Limitierungen von JavaScript-Tools unter heutigem Umständen, XXL-Enums, Effekte auf andere Tools aus dem TS-Universum (u.A. Deno, Bun und Supabase) und Perspektiven für neue TypeScript-Features in der mittelfernen Zukunft..

In dieser Folge sprechen wir mit Andreas Kottre (CEO & Technical Lead bei typedigital) & Tim Olbrich (Geschäftsführer und Inhaber der Bitory GmbH) von der Hackerkiste Augsburg, einem einzigartigen Event, das seit 2017 regelmäßig die Web- und Tech-Community zusammenbringt. Wir tauchen ein in das besondere Setting: eine ehemalige Siemens-Halle, die zum kleinen Festival-Dorf mit Plaza, weitläufigem Gelände, großen Stages und verwinkelten Bereichen wurde. Außerdem ergründen wir den barcampartigen Rahmen mit 10-Min-Talks, Call for Papers, First-Time-Speakers-Betreuung – und am Ende erwartet euch eine grandiose Verlosung! SCHAUNOTIZEN [00:00:58] HACKERKISTE AUGSBURG Inhaltlich bietet die Hackerkiste ein volles Programm: Rund dreißig Speaker:innen und ein Dutzend Barcamp-Sessions locken jedes Jahr etwa dreihundert Teilnehmende nach Augsburg. Das Format ist bietet mehrere Stages, inklusive ausführlichen Vorträgen auf den großen Stages und Lightning Talks. Es gibt dabei Sage und Schreibe ganze vier Tracks zu besuchen! Lightning Talks dauern nur (bis zu) zehn Minuten, eingebettet in halbstündige Sessions, die zum Austausch einladen und Barcamp-Charakter haben. Angesprochen sind Entwickler:innen, UX-Interessierte, Community-Macher:innen und alle, die Lust auf neue Impulse haben.Besonders spannend ist der Umgang mit neuen Speaker:innen. Über den Call for Papers können sich erfahrene Vortragende genauso wie Newcomer melden. Wer zum ersten Mal auf die Bühne geht, wird von Stage Hosts betreut und bekommt Unterstützung bei Vorbereitung, Ablauf und Stressmanagement. So wird der Einstieg leicht gemacht, ohne dass die Qualität leidet. Neben der eigentlichen Konferenz prägt die Hackerkiste auch das Community-Leben in Augsburg. Unter anderem veranstalten die Organisator:innen das Meetup Web and Wine, das nicht nur technische Themen, sondern auch Metaebenen wie den Umgang mit Stress aufgreift. Damit wird deutlich, dass es bei der Hackerkiste nicht allein um Technologie, sondern auch um Austausch und Gemeinschaft geht. Und weil wir es bis zum Schluss spannend machen wollen: Am Ende dieser Revision wartet noch eine Verlosung auf euch. Mehr verraten wir hier nicht. Außer, dass es sich lohnt, dranzubleiben.

Wir haben Jan Gregor Emge-Triebel (LinkedIn / Mastodon) von der programmier.bar zu Gast. Bekannt ist die programmier.bar durch ihren Podcast, Meetups und neuerdings eine eigene Konferenz: die programmier.con! SCHAUNOTIZEN [00:01:06] PROGRAMMIER.CON In dieser Folge schauen wir gemeinsam hinter die Kulissen der Veranstaltungsorganisation: Wie läuft das bei einem Team, das zwar einen Tech-Hintergrund hat, aber keine Eventagentur ist? Und was war der Antrieb, überhaupt eine eigene Konferenz zu machen? Natürlich reden wir auch über Community-Arbeit ganz generell – und was es bedeutet, wenn eine Firma Zeit und Raum schafft, sich aktiv in die Szene einzubringen. Die Programmierbar macht das nicht nur mit ihrer Konferenz, sondern auch mit ihren regelmäßigen Formaten wie dem Backend- und dem Frontend-Meetup. Am Ende steht die Einladung: Kommt vorbei, sprecht Jan an! LINKS PROGRAMMIER.CON – WEB & AI EDITION 2025 Am 29. und 30. Oktober 2025 bringt die programmier.con in Bad Nauheim die Web- und KI-Community zu zwei Tagen voller Vorträge, Keynotes und Austausch zusammen. FLUTTERDAY 2024 Der Flutter Day war eine deutschsprachige Konferenz mit spannenden Talks von Expert:innen und bot technisch anspruchsvolle, aber zugleich zugängliche Themen für Flutter-Interessierte und Web-Entwickler:innen. PROGRAMMIER.BAR – DER PODCAST Der programmier.bar Podcast bietet Deep Dives, News und CTO-Gespräche und beleuchtet, was die Web-, App- und Tech-Welt bewegt. DAS PROGRAMMIER.BAR MEETUP In schönen Bad Nauheim teilen Sprecher:innen ihre Erfahrungen zu Web- und App-Entwicklung, danach gibt’s Austausch in entspannter Runde mit Snacks und Drinks.

Local AI, also KI-Modelle, die direkt auf dem Gerät laufen, statt in der Cloud, gewinnen aktuell enorm an Bedeutung. Einen neue Ansatz dafür bieten die neuen Chrome Built-in AI APIs, mit denen Entwickler:innen direkt im Browser auf mächtige KI-Funktionalitäten zugreifen können – ganz ohne eigene Modelle zu laden oder Cloud-Anfragen ausführen zu müssen. Diese lokal ausgeführten Modelle schützen die Privatsphäre, ermöglichen Offline-Nutzung und sparen Ressourcen – was für Nutzer:innen und Firmen gleichermaßen attraktiv sein kann. Für diese Folge haben wir Thomas Steiner (Web / Mastodon / Bluesky), eingeladen, der nicht nur Google Developer Relations Engineer ist, sondern auch tief im Thema steckt. Gemeinsam mit Vanessa und Schepp spricht Thomas darüber, wie die Chrome APIs funktionieren, welche Features sie bieten und welche Herausforderungen es aktuell noch gibt. Außerdem beleuchten wir die Perspektiven anderer Browser-Hersteller und die Zukunft der Local AI im Web. SCHAUNOTIZEN [00:01:37] LOCAL AI Warum ist Local AI wichtig? Thomas erklärt, dass lokale Ausführung vor allem Datensicherheit bedeutet – Daten werden nicht an einen Server geschickt. Obendrein sind entsprechende Anwendungen auch offline nutzbar und für Firmen günstiger, weil keine Cloud-Anfragen nötig sind. Der Browser stellt dabei ein generisches KI-Modell bereit, etwa Gemini Nano, das mit nur 4,29 GB auf der Festplatte auch auf Durchschnittsgeräten läuft.Die APIs sind einfach per wenigen Zeilen JavaScript nutzbar und bieten mächtige Funktionen, z.B. Übersetzung (Translation API), Schreiben (Writer API), Korrektur (Proofreader API) und generelle Eingabe per Prompt API. Multimediale Eingaben wie Bilder oder Audio werden unterstützt, was spannende Usecases erlaubt: zum Beispiel Audio transkribieren, bestimmte Audioinhalte filtern, Bilder für assistive Technologien beschreiben oder Personalausweise clientseitig auf Plausibilität prüfen.Ein Grund für mehrere dedizierte APIs statt nur einer Prompt API liegt darin, dass Gemini Nano ein vergleichsweise kleines, aber leistungsfähiges LLM ist. Das erlaubt die Nutzung auf Geräten mit begrenzter Hardware – aktuell läuft die KI auf GPU, aber es wird daran gearbeitet, dass sie auch auf CPU-only Geräten läuft, z.B. günstigen Android-Geräten. Techniken wie „early exit“ helfen, auf mobilen Geräten Energie zu sparen, indem man Antworten frühzeitig abschließt. Derzeit werden entsprechend nur MacOS, Windows und Linux unterstützt, Chrome OS fehlt neben Android ebenfalls noch. iPad und iOS sind durch WebKit noch eingeschränkt, hier fehlen derzeit viele Freiheiten. Wir diskutieren auch den Gegenwind von anderen Browserherstellern: Bedenken gibt es wegen möglichem Fingerprinting, obwohl die Modelle statisch sind und nicht lernen. Ein weiteres Thema ist die Testbarkeit nicht-deterministischer KI-Features, hier experimentiert man mit Quizfragen, um die Qualität zu prüfen. Außerdem sind die lokal verfügbaren Modelle derzeit auf Englisch beschränkt, was der globalen Web-Community nicht gerecht wird. Zum Schluss wagen wir einen Ausblick: Wenn man den Anwendungsfall klar entkoppelt, z.B. reine Übersetzung, steigt die Chance, dass auch andere Browser wie Apple Safari eigene KI-APIs nachziehen. Die Entwicklung ist dynamisch, und mit Initiativen wie dem W3C Web Machine Learning Group und Firebase AI entstehen Standards für die Zukunft. LINKS WORKING DRAFT FOLGE 399 Frühere Episode mit Thomas Steiner zu Project Fugu. WORKING DRAFT FOLGE 563 Follow-up-Folge zu Project Fugu. CHROME AI ÜBERSICHT Grundlegende Infos zu den Chrome Built-in AI APIs. CHROME BUILT-IN AI APIS Dokumentation zu den einzelnen API-Methoden wie Writer, Translator, Prompt API u.a. GEMINI NANO Infos zum kleinen, effizienten KI-Modell, das lokal läuft. WRITER API API für Textgenerierung und -verbesserung im Browser. PROMPT API Flexible Schnittstelle für KI-Anfragen via Prompts. TRANSLATOR API API zur Übersetzung mit lokalen (KI-)Modellen. CHROME ROADMAP Überblick zu kommenden Features und API-Entwicklungen. CHROMIUM BUG TRACKER Offene Tickets und Diskussionen rund um die KI-Integration in Chromium. CHROME EARLY PREVIEW PROGRAM Wie man frühzeitig Zugriff auf neue AI-Funktionalitäten im Browser bekommt. FIREBASE AI Google Cloud-basierte KI-Dienste, die das Ökosystem ergänzen. W3C WEB MACHINE LEARNING GROUP Arbeitsgruppe zur Standardisierung von KI-Funktionalitäten im Web.

Elf Jahre (und 501 Revisionen) nach seinem letzten Besuch in Revision 175 war Jan Lehnardt (LinkedIn / Mastodon / Bluesky) wieder bei uns zu Gast. Mit Schepp und Vanessa spricht er über die Idee hinter „Local First“. SCHAUNOTIZEN [00:01:09] LOCAL FIRST Was heißt eigentlich „Local First“? Wir starten mit einer Rückblende auf das Jahr 2013: Damals war „Offline First“ das neue heiße Ding – erdacht von Jan höchstselbst und in Worte gegossen von Jans Mitstreiter Alex Feyerke im A List Apart Essay. Aus seiner Arbeit an CouchDB und PouchDB heraus entstand der Gedanke, dass Applikationen auch ohne Verbindung zum Internet sinnvoll funktionieren sollten. Dabei nutzt man ein System verteilter Datenbanken, sei es im Internet, im Intranet oder auf dem Anwendergerät selbst zwischen denen Daten in Form von Dokumenten synchronisiert werden. Ähnlich wie es mit Git möglich ist. Anders als bei Git, treten Merge-Konflikte allerdings schon dann auf, wenn gleichzeitig dasselbe Dokument verändert wurde. Diese Konflikte gilt es dann manuel zu lösen. Wir sprechen über spannende Anwendungsfälle, die der „Offline First“-Ansatz überhaupt erst möglich gemacht hat – von Ebola-Krisenhilfe über die COVID-Impf-Infrastruktur in Bayern bis hin zur Koordination und Planung humanitärer Konvois in Krisengebieten. „Local First“ setzt im Grunde auf ähnliche Prinzipien wie einige Jahre zuvor „Offline First“, wie es auch die sieben Prinzipien von „Local First“ dokumentieren. Technisch ist „Local First“ allerdings etwas anspruchsvoller, weil es stärker darauf ausgerichtet ist, dass Nutzende an ein und demselben Dokument gleichzeitig arbeiten können. Realisiert wird das über Conflict-free Replicated Data Types (CRDT). y.js, JSON CRDTs, Operational Transforms (wie einst bei Google Wave) und Automerge sind Werkzeuge, die einem hier feingranulare Synchronisation und Konfliktlösungen ermöglichen. Jan erklärt, dass auch CouchDB mittlerweile gelernt hat, Konflikte automatisch zu lösen und es damit auch besser für gleichzeitige Arbeiten am selben Dokument gerüstet ist. LINKS JANS LETZTER BESUCH (REVISION 175) 2014 sprachen wir mit Jan über CouchDB, Hoodie und das Web der Zukunft. OFFLINE FIRST ESSAY BEI A LIST APART Alex‘ und Jans Ursprungsidee aus 2013 für resilientere Apps – und der Startpunkt für Local First. DAS LOCAL-FIRST ESSAY Das Manifest von Ink & Switch, das die Prinzipien für Local First formuliert hat. HOW TO SYNC ANYTHING Ein tiefgehender Artikel über Synchronisationsstrategien und verteilte Datenmodelle. JANS TALK BEI DER LOCAL FIRST CONF Einblicke in die Herausforderungen und Fortschritte im Bereich Local First – Stand 2025. COZY CLOUD Ein Beispiel für eine Local-First Cloud-Infrastruktur. LINEAR Ein Tool, das auf lokale Performance setzt – und damit auch UX-Gold gewinnt. THE UX OF LOCAL FIRST (EILEEN WAGNER) Wie sich UX für Local First anfühlen kann – Vortrag von der Local First Conf. HEISE: CORONA-TESTDATEN ÖFFENTLICH Beispiel für schlechte Sicherheitspraktiken während der Pandemie – was man besser machen muss. MARTIN KLEPPMANN: LOCAL-FIRST SOFTWARE (PDF) Wissenschaftliche Grundlage hinter dem Local-First-Gedanken. YJS Yjs stellt Shared Types zur Verfügung, die wie jeder andere Datentyp manipuliert werden können, sich aber automatisch synchronisieren können. AUTOMERGE Ein Framework für CRDT-basierte Synchronisation ohne zentrale Server. COUCHDB KONFLIKTLÖSUNG WIE GIT Blogpost von Neighbourhoodie über moderne Konfliktlösungsansätze in CouchDB. TIPTAP & Y.JS Tiptap-Editor mit y.js für Echtzeit-Kollaboration – ein Praxisbeispiel für Local First Tools. LORA NETZWERK Low Range Wide Area Network – effizient, energiearm und offlinefähig. SYNC CONF (DISCORD) Austausch über Synchronisationsstrategien, Technik und Patterns für verteilte Systeme. LOCAL FIRST SOFTWARE (DISCORD) Die Community zum Thema Local First – inkl. Jobbörse und Projektvorstellungen. OFFLINE FIRST SLACK Slack-Community mit über 11.000 Mitgliedern zum Thema Offline- und Local-First-Software.

Was macht eigentlich ein Webprojekt klimafreundlich(er)? In dieser Revision sprechen wir mit Björn Ganslandt über nachhaltige Webentwicklung – von Hosting über Frontend-Optimierung bis zur Frage, was eigentlich AI in puncto Energieverbrauch bedeutet. Björn ist Entwickler, Berater und Community-Mensch und bringt viele praktische Erfahrungen aus seiner Arbeit rund um Green IT mit. 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:08:28] WIE WÄHLE ICH EINEN GRÜNEN HOSTER AUS? Wir besprechen, worauf man achten kann: Nutzt der Hoster wirklich erneuerbare Energie – oder kompensiert er nur nachträglich? Wie transparent sind diese Angaben? Hilfreich ist hier das Verzeichnis der Green Web Foundation, das grüne Hoster listet und deren Energiequellen einordnet. [00:12:54] WAS HEISST ES ÜBERHAUPT, WENN EIN HOSTER MIT ERNEUERBARER ENERGIE BETRIEBEN WIRD? Grün ist nicht gleich grün: Viele Hoster betreiben ihre Server zwar mit Ökostrom, dieser kommt aber womöglich aus dem allgemeinen Netzmix. Rechenzentren in Windkraftanlagen – wie bei WindCores und WindCloud – oder Abwärmenutzung bei Leafcloud zeigen Alternativen auf. [00:21:11] WO ENTSTEHEN EMISSIONEN, WENN DATEN ÜBER DAS NETZWERK GEHEN? Datenübertragung ist ein oft übersehener Faktor: Die Emissionen entstehen im gesamten Übertragungsweg – vom Rechenzentrum über Backbone und Knotenpunkte bis hin zum Endgerät. Tools wie Electricity Maps oder das Realtime Carbon Dashboard der Green Web Foundation helfen, die Herkunft des Stroms zeit- und ortsgenau zu verstehen und Übertragungsvolumina anzupassen. [00:33:51] WAS KANN ICH IM FRONTEND TUN, UM EMISSIONEN ZU VERRINGERN? Weniger ist mehr: Kleinere Bildformate (z. B. AVIF statt PNG) und weniger JavaScript helfen. Doch welches Bildformat ist nun wirklich besser? Studien wie von Greenspector oder Fershad Iranis Firefox-Profiling liefern Zahlen dazu. [00:41:20] „GRID AWARENESS“ Neben Tools wie co2.js oder dem Carbon Aware SDK, die einem sagen wie CO²-intensiv die Stromerzeugung beim Besucher gerade ist, geht es bei der „Grid Awareness“ auch um das richtige Timing: Updates, Deployments und schwere Rechenaufgaben sollten möglichst in Phasen mit grünem Strom erfolgen. Auch Microsofts Xbox-Team macht das inzwischen so. [00:55:47] WAS WEISS MAN ÜBER DIE ENERGIENUTZUNG VON AI – UND WAS NICHT? Vieles ist noch spekulativ: Training von Modellen verbraucht massiv Energie, das weiß man. Aber was ist mit der Nutzung? Wie messen wir das? Und wie viel Energie spart AI möglicherweise auch ein – etwa durch effizientere Prozesse oder optimierte Codegenerierung? Hier fehlt oft die Vergleichsbasis, aber einige erste Studien und Diskussionen gibt es bereits. LINKS A-TAG WIEN Barrierefreiheitskonferenz mit wachsendem Fokus auf Nachhaltigkeit in der Webentwicklung. CSS IN VIENNA Regelmäßiges Treffen der CSS-Community in Wien. CLIMATEACTION.TECH Slack-Community mit über 11.000 Techies, die sich für nachhaltige Digitalisierung einsetzen. PERMACOMPUTING (MEETUP(S)) Meetup über digitale Langlebigkeit, Low-Tech und resiliente Softwareansätze. GREEN WEB FOUNDATION Hoster-Verzeichnis und Tools zur Bewertung von Infrastruktur nach Klima-Kriterien. WEB ALMANAC 2024 – SUSTAINABILITY Umfassende Datenanalyse zum Status quo nachhaltiger Webentwicklung weltweit. DAS ÜBLE GESCHÄFT MIT CARBON-OFFSETS Schlechtes Gewissen, weil fettes Auto gekauft? Mit Carbon-Offsets kann man sich freikaufen – so einfach ist es aber nicht. PRIMAKLIMA E. V. Anbieter für CO₂-Kompensation durch Waldprojekte – mit glaubwürdigem Ansatz. ELECTRICITY MAPS Zeigt live den CO₂-Ausstoß von Strommixen weltweit – hilfreich für „grünes Timing“. AGORA ENERGIEWENDE AGORAMETER Forschung und Visualisierung zur deutschen Energiewende und Stromherkunft. REALTIME CLOUD CARBON DASHBOARD Zeigt PUE-Werte (Power Usage Effectiveness) und Energiequellen von Cloud-Anbietern. WINDCORES Betreibt Server direkt in Windkraftanlagen – ohne Umweg übers Netz. WINDCLOUD Norddeutscher Anbieter mit grüner Energie und Nutzung der Serverabwärme. LEAFCLOUD Betreibt Server unter anderem in Schwimmbädern – Serverabwärme heizt das Wasser. CARBON AWARE SDK Open-Source-SDK, mit dem sich CO₂-sensitive Workflows in Software integrieren lassen. CO2.JS Bibliothek zur CO₂-Schätzung im Code – funktioniert auch mit Cloudflare Worker. FERSHAD IRANI: AVIF VS WEBP IM FIREFOX PROFILER Vergleich der Bildformate aus Sicht der Energieeffizienz im echten Rendering-Kontext. GREENSPECTOR: WHICH IMAGE FORMAT CHOOSE TO REDUCE ENERGY CONSUMPTION AND ENVIRONMENTAL IMPACT? Vergleicht Bildformate hinsichtlich ihrer tatsächlichen Energie- und CO₂-Kosten. BRANCH MAGAZINE Online-Magazin zu digitaler Nachhaltigkeit – kuratiert von der Green Web Foundation und Co. COP WEBSITE FAIL Berüchtigtes Beispiel: Die offizielle Konferenzseite der Klimakonferenz war alles andere als klimafreundlich. RUMVISION: DEVICE MEMORY ALS PROXY Der Artikel zeigt, wie sich Geräteeigenschaften wie Arbeitsspeicher auf die Ladezeit von Websites auswirken. DEVICE MEMORY API Die Device Memory API erlaubt es Websites, die ungefähre RAM-Größe eines Geräts auszulesen, um Inhalte entsprechend anzupassen. COST OF A PIXEL COLOR (ANDROID DEV SUMMIT ’18) Google zeigte hier, wie viel Energie dunkle Interfaces im Android-System einsparen können und dass die Farbe Blau mehr Strom frisst als die Farbe Rot. BBC-TESTREIHE ZUR BILDSCHIRMHELLIGKEIT BEI DARK MODE Die BBC untersuchte, ob und wie stark sich durch Dark Mode der Energieverbrauch senken lässt – mit gemischtem Ergebnis. WAGTAIL CMS BLOGPOST ZU DARK MODE Erfahrungsbericht und technische Hintergründe zur Implementierung eines Dark Modes im beliebten Python-CMS. W3C WEB SUSTAINABILITY GUIDELINES Die Nachhaltigkeitsrichtlinien fürs Web betonen: Barrierefreiheit ist auch eine Frage der Langlebigkeit und Effizienz. MISTRAL LEGT ERSCHRECKENDE UMWELTBILANZ FÜR KI-MODELLE VOR Training und Ausführung von Abfragen tragen 85,5 Prozent der CO2-Emissionen und 91 Prozent des Wasserverbrauchs. Millionen von Abfragen summieren sich zu messbaren Umweltfolgen. PYTHON CODECARBON FÜR GPU CodeCarbon misst den Energieverbrauch von Python-Skripten – auch für GPU-lastige AI-Workloads wie Llama. ECOLOGITS CALCULATOR (HUGGINGFACE) Ein Verbrauchsrechner für AI-Modelle bei Huggingface – aktuell noch experimentell, aber in Entwicklung. AI SUMMIT: „WITHIN BOUNDARIES“-STATEMENT Diskussionspapier zur Frage, wie weit AI gehen darf – auch mit Blick auf ökologische Grenzen. HUGGINGFACE AI ENERGY SCORE Eine grobe Klassifikation von Modellen nach Energiebedarf – mit dem Ziel, Transparenz zu schaffen. REBOUND EFFEKTE Effizienz allein reicht nicht: Der Rebound-Effekt beschreibt, wie Einsparungen durch Mehrnutzung wieder aufgefressen werden. GREEN SOFTWARE MEETUP DÜSSELDORF Lokales Meetup für alle, die Software nachhaltiger machen wollen – von Öko-Strom bis Bildformat. GREEN.IO CONFERENCE Konferenz mit Fokus auf grüne Softwareentwicklung – spannender Austausch zwischen Tech und Umweltaktivismus. BITS & BÄUME CCC-nahe Konferenz zu Digitalisierung und Nachhaltigkeit – mit vielen zivilgesellschaftlichen Perspektiven.

Heute ist Katharina Hoffmann (ein paar Blogposts gibts hier) zu Gast, um das Thema Security mal richtig zu beleuchten. Und dabei geht es kaum drum, wie man seinen Node.js Service baut, damit keine Script-Injections in die Datenbank kommen, sondern um viel mehr. [00:01:08] SCHAUNOTIZEN SECURITY AWARENESS OHNE MORALKEULE – WIE MAN MENSCHEN WIRKLICH ERREICHT Irgendwie muss man sich dem Thema Security doch in jedem Kontext annehmen. Aber als Hoster, wie Mittwald es ist, sollte man die ganze Sache schon etwas geordneter annehmen. Das tun sie auch – also Katharina tut es. Und darüber spricht sie mit uns: Wie baut man eigentlich die richtige Security Kompetenz über Teamgrenzen hinweg auf, beispielsweise warum man die Reinigungskräfte nicht vergessen sollte? Und wie schafft man es, dass auch alle Leute Lust darauf bekommen, das Thema ernster zu nehmen. Welche Guidelines braucht es eigentlich? Und wie finden heutzutage die Angriffe auf Firmen so statt? Stichwort Social Engineering. Aber hört selbst…

Vanessa und Stefan haben Alexander Lichter zu Gast, seines Zeichens Vue.js Community Größe und Dev Rel bei void(o).Um das von Vue.js und Vite Erfinder Evan You gegründete Startup für „Next Generation Tooling“ geht es auch in der heutigen Revision. SCHAUNOTIZEN [00:01:00] VOIDZERO Wir erfahren welche Projekte void(0) unterstützt, betreut, oder sogar ganz verantwortet. Wir reden über Open Source Governance, den meme-tauglichen „Rewrite in Rust“ und hinterfragen dabei unter anderem kritisch welchen Einfluss ein VC gefördertes Startup auf kritischen JavaScript Infrastruktur haben darf. Vergleiche mit einem bekannten Serverless Hosting Unternehmen aus San Francisco und deren berühmt-berüchtigte Unterwanderung der React.js Szene bleiben da natürlich nicht aus, der Vollständigkeit halber sei aber erwähnt, dass wir die Folge vor dem nicht weniger überraschenden Kauf von NuxtLabs aufgezeichnet haben. LINKS * oxc. Ein JavaScript Transpiler und Minifier, in Rust geschrieben. * Rolldown. Modulbundling in Rust. * Vitest. Ein schnelles Testframework aus der Vue.js und Vite Ecke * Vite. Ein ganz beliebter Development Server. * Nuxt. Das Meta-Framework von Vue.js * swc. Der Speedy Web Compiler macht auch viel in Rust und ist schnell.

It’s not every day we get to talk to someone who actually helps shape the CSS of tomorrow – which is why we were thrilled to welcome back Adam Argyle (LinkedIn / Bluesky / Mastodon), creative tinkerer, punk engineer and a big fan of CSS, JS and great UX! Together with Schepp and Vanessa, Adam takes us on a tour of what’s new and what’s next in CSS. From cutting-edge selectors and scroll state features to color functions, motion preferences, and even the future of form controls – this episode is packed with practical insights and exciting perspectives. SHOW NOTES [00:01:03] CONTRAST-COLOR() & CSS COLOR TOOLING We kick things off by talking about the new contrast-color() function and why it’s a big deal for authoring accessible themes. Adam explains how tools like his Observable playground help explore the complexities of calculating good contrast. We also touch on the prefers-contrast media query and how it relates to other preference queries like prefers-reduced-data or forced-colors. [00:37:40] CONTROL-VALUE() Adam introduces the control-value() function that allows you to style components based on their value – like coloring inputs depending on current value – and we talk about a future where CSS can directly react to user interaction or state without JavaScript. This ties into upcoming functions like sibling-index() and sibling-count(), with a great demo on nerdy.dev. [00:43:07] SCROLL EXPERIENCE What if you could style elements differently based if they are overflowing, or if they are snapped or stuck? That’s what scroll-state() unlocks. Adam walks us through why it matters for carousels and nested scroll containers. We also touch on related concepts like scroll-snap, the scrollsnapchanging, scrollsnapchange and scrollend events, ::scroll-marker and ::scroll-button() pseudo elements. Links include a full CSS-only Nintendo-style home screen on nerdy.dev and Chrome’s carousel demo. [01:17:29] MIXINS, FUNCTIONS & IF-STATEMENTS Mixins and functions are finally coming to CSS to make code and mechanics reusable! So are if-statements. Una did a short video on those. [01:20:10] @STARTING-STYLE, TRANSITION-BEHAVIOR & 3D VIEW TRANSITIONS We discuss how @starting-style and transition-behavior: allow-discrete open new possibilities for complex animations. Adam references his CSS Day slides and what he calls “pleasant to use” transitions, including view transitions and split-text effects. We talk about the challenges of layering interactivity and animation, and where tools like GSAP might still help. [01:21:36] CUSTOM FORM CONTROLS The customizable element finally becomes a reality! We dive into how Chrome is exposing a lot of its UI internals via new pseudo-elements. More info on the Chrome Dev Blog. [01:23:26] THE FUTURE: CSS 4? CSS 5? Do we still believe in the CSS Level model? Adam shares his views on what CSS 4 or 5 might mean today and what „groupings“ of features could look like. We also touch on Apple’s contributions to modern CSS and the coordination between browser vendors. For more on the terminology mess: listen to our episode 640 (German). LINKS CONTRAST-COLOR() Automatically computes a legible foreground color based on a background. CONTRAST-COLOR PLAYGROUND Adam’s interactive tool to visualize color contrast behavior. SIBLING-INDEX() A future CSS function to style elements based on their position within siblings. NINTENDO SWITCH HOME SCREEN DEMO Fully CSS-driven demo showcasing advanced scroll and interaction techniques. CHROME CSS CAROUSEL DEMO Google’s showcase of scroll snapping and scroll-triggered UI using pure CSS. CSS DAY 2025 SLIDES Adam’s slide deck with plenty of demos and visuals from his CSS Day presentation. A CUSTOMIZABLE Chrome exposes pseudo-elements for fully styling native dropdowns. „OH SNAP!“ TALK BY ADAM ARGYLE Adam’s in-depth talk about scroll, snapping and modern interaction affordances in CSS.

Wir sprechen mit Rainer Hahnekamp (Web / LinkedIn / Bluesky), über den neuen SignalStore – eine Spielart von NgRx, die Angular Signals nutzt und derzeit für frischen Wind im State-Management sorgt. Als aktiver Contributor bei NgRx kennt Rainer nicht nur die technische Seite, sondern auch die Prozesse hinter den Kulissen des Angular Frameworks. SCHAUNOTIZEN [00:001:11] NGRX SIGNALSTORE Wir klären, wie sich der SignalStore von bisherigen NgRx-Ansätzen unterscheidet, wie viel Redux noch drinsteckt und wie sich das Ganze im Vergleich zu RxJS verhält. Besonders spannend: Auch wenn Signals vieles vereinfachen, sind Observables damit längst nicht überholt. Ein weiteres Thema sind Angular Zones – und wie man mit oder auch bewusst ohne sie performant Anwendungen bauen kann. Außerdem werfen wir einen Blick auf das neue „Resources“-Feature in Angular, das – ähnlich wie Signals – den Framework-Kern modernisieren soll. Zum Schluss geht’s noch um Open Source: Wie wird man eigentlich Contributor bei Projekten wie NGRX? Was braucht es, damit ein neues Feature wie der Signal Store überhaupt entstehen kann? LINKS NG NEWS Ein wöchentlicher Video-Newsletter mit den wichtigsten Angular-Neuigkeiten, abgehandelt in 100 Sekunden ANGULAR: THE DOCUMENTARY | AN ORIGIN STORY Die Angular-Dokumentation im Videoformat – verständlich und unterhaltsam aufbereitet von Cult.Repo (formerly Honeypot). ANGULAR ARCHITECTS Schulungen, Workshops und Blogposts zum Thema Angular MINKO GECHEV | CONVERGING WEB FRAMEWORKS Vortrag von Minko Gechev über den konvergierenden Trend bei modernen Webframeworks.

In dieser Folge widmen wir uns erneut ganz WebKit – und dem, was sich dort aktuell alles tut und in den letzten Monaten getan hat. Schepp und Peter diskutieren neue Features, (alte) Probleme sowie APIs, die bereits in Safari gelandet sind oder bald landen werden. SCHAUNOTIZEN [00:01:09] GOOGLE I/O 2025 & CSS-ONLY CAROUSELS Zum Einstieg beklagen wir wie themenarm die Google I/O dieses Jahr für uns Frontend-Menschen war. Das einzig wirklich spannende Ding waren die Vorstellung der CSS-Primitiven für den Bau von Karussells. Allerdings steckt in dem Thema noch sehr viel Arbeit an der Barrierefreiheitsfront, wie Sara Soueidan dargelegt hat. Der Rest bestand aus eilig herbei-geprototypeten Demos. [00:19:34] MULTIPAGE VIEW TRANSITIONS Mit nur zwei Zeilen Code aus dem WebKit-Blogpost lassen sich flüssige Seitenübergänge realisieren. Wir berichten von unseren eigenen Versuchen mit View Transitions und verweisen auf die Library ramjet, die ähnliche Effekte wie die View Transitions schon seit zehn Jahren ermöglicht. [00:25:46] (ROOT) LINE-HEIGHT UNITS: LH/RLH WebKit führt neue Einheiten für die Zeilenhöhe ein, die konsistentere Text-Layouts erlauben. Wir schweifen an dieser Stelle kurz ab und sprechen darüber, wie das CSS Typed OM funktioniert. [00:29:24] MARGIN-TRIM Mit margin-trim lassen sich über den Rand ragende Margins von Kind-Elementen abschneiden, was bestimmte Layouts gegenüber der :first-child/:last-child-Technik deutlich robuster umsetzbar werden lässt. [00:33:52] TEXT-WRAP: PRETTY Das neue Umbruch-Verhalten text-wrap: pretty sorgt für elegantere Zeilenumbrüche und optimierte Worttrennung. Die WebKit-Menschen haben es aber nicht dabei belassen, mit Chrome nachzuziehen, sondern haben noch kräftig „Gold-Plating“ betrieben ‐ mit sehenswertem Ergebnis! Wem das nicht reicht, der kann in Zukunft vielleicht auf Machine-Learning zurückgreifen, um Text nach seinen Vorstellungen zu formatieren, wie es jemand in diesem Video namens „Badness 0“ demonstriert. [00:35:20] WEBKIT-BUG BEI LIGATUREN So stark WebKit allerdings bei Typografie sonst ist, bei einer Sache verkackt er hart: Bei der Berechnung der Laufweite von Ligaturen. Ligaturen sind eine fantastische Sache und ermöglichen es, Fonts regelrecht zu programmieren. Schrift-Entwicklerin Ulrike Rausch bildet hier die Speerspitze mit ihren „Liebe“-Fonts und dem Font „Liebe Heide“ im Speziellen. Ein wenig in das Thema eingetaucht ist Schepp neulich auch, als er mit Hilfe eines SVG und OpenType.js (master Branch) eine Ligatur in eine Schrift eingebaut hat, welche alle Vorkommen eines bestimmten Wortes im Text-Rendering automatisch durch die SVG-Grafik ersetzt. Diese Grafik läuft allerdings weiter als der damit ersetzte Text. Chrome und Firefox bemerken das und passen den Textfluss entsprechend an. Nur WebKit leider nicht, wo nachfolgender Text rechts in die Grafik ragt oder ohne Abstand an der Grafik klebt. Text Rendering Hates You! [00:56:35] NEUE FARB-FEATURES Safari kennt nun die (neue) contrast-color()-Funktion, welche automatisch eine kontrastreiche Schriftfarbe basierend auf einer Input-Farbe zurückgibt. Dabei beschränkt sie sich derzeit noch auf die Rückgabe von Weiß oder Schwarz. Wir sprechen über die bewegte Vergangenheit dieser Funktion, die eigentlich mal als color-contrast()-Funktion das Licht der Welt erblicken sollte, und was die Web Accessibility Initiative (WAI) und die Farbkontraste-Berechnung nach APCA mit den aktuellen Limitationen zu tun haben. Das Kontraste-Thema führt uns auch zu Lighthouse und seinen Barrierefreiheits-Checks, die viele Problemfälle nicht erkennnen (können). Aus dieser Tatsache hat Manuel Matuzović sogar ein ganzes Projekt gemacht: Building the most inaccessible site possible with a perfect Lighthouse score (hier als Video). Ebenfalls neu ist ein Upgrade des Color-Inputs, welcher jetzt die HTML-Attribute colorspace sowie das boolsche alpha versteht. Wir finden das gut, allerdings sind wir der Meinung, dass insbesondere die neuen Farbräume mit Bedacht eingesetzt werden sollten, weil eine ganze Kette von Erfordernissen für einen erfolgreichen Einsatz erfüllt sein möchte. Hier stößt man aber auf das Problem, dass HTML selbst keine Möglichkeit zum Feature-Testen und des Alternativ-Pfads kennt, anders als JavaScript oder CSS. Das Problem hat man genauso bei dem relativ neuen switch-Attribut bei Checkbox-Inputs. Schepp hat das Problem in der Praxis darüberhinaus auch bei Hauptmenüs, die auf Desktop-Geräten einfache

Dieses Interview ist der letzte von 3 Teilen unserer Serie On Tour @ #headinthecloud. Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in Espelkamp stattfand. WEB SUSTAINABILITY Mit Thorsten Jonas & Marvin Hötger. Eigentlich muss man sich vielmehr Gedanken machen, welchen Einfluss unsere Webseiten auf die Umwelt haben. Durch Chatbots, Bilder und vieles mehr kann man als Entwickler großen Einfluss auf den CO₂-Fußabdruck einer Webseite haben. Thorsten erklärt, warum das der Fall ist und welche Maßnahmen man noch so ergreifen kann. Marvin gibt einige Beispiele aus der Praxis. Das Video zum Talk wird zeitnah auf dem YouTube Kanal von Mittwald verfügbar sein.

In dieser Revision sprechen Vanessa und Schepp mit Jannik Lehmann (LinkedIn), Senior Frontend Developer bei GitLab, darüber, wie man Chat-Applikationen mit gängigen LLM-APIs erstellt. Dabei geht er auf verschiedenste Stolpersteine ein, spricht über Streaming und warum der Kontext so wichtig ist. 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:01:42] CHAT-APPLIKATIONEN MIT GÄNGIGEN LLM-APIS LLM-APIs unterscheiden sich in zwei zentralen Punkten von klassischen APIs: Erstens sind die Antworten nicht deterministisch – das bedeutet, dass ein identischer Prompt bei jedem Request ein anderes Ergebnis liefern kann. Zweitens kommen die Antworten gestreamt an – oft in Form von Text-Chunks, die schrittweise per Server Sent Events (SSE) an den Client geliefert werden. Ein typischer Request beginnt mit einem einfachen Prompt als Plaintext. Die Antwort wird dann dynamisch in Markdown-Form gestreamt. Doch genau dieses gestreamte Markdown bringt etliche Stolperfallen mit: Von XSS- und Prompt-Injection-Risiken über unvollständige Mermaid-Diagramme bis hin zu halbfertigen Flowcharts und weiteren seltsamen Markdown-Konstrukten, die ein LLM ausgeben kann. Hier lohnt ein Exkurs in das Thema streambare vs. nicht streambare Dateiformate: HTML ist beispielsweise streambar, da der Browser Bit für Bit lesen und direkt rendern kann. Deshalb gibt es auch Metriken wie „First Meaningful Paint“ und Gründe dafür, warum ein Script-Tag lieber am Ende statt am Anfang einer HTML-Datei stehen sollte. Markdown hingegen ist nicht streambar – es braucht oft Kontext über mehrere Zeilen hinweg, bevor eine Darstellung sinnvoll möglich ist. Genau deshalb ist Markdown als Streaming-Format nicht ganz trivial zu handhaben. Ein weiteres zentrales Thema ist der Kontext – oder vielmehr: wie wir mit ihm umgehen. Denn LLMs sind per se stateless. Das bedeutet: Jeder einzelne Request muss alles enthalten, was das Modell wissen soll – den Prompt, die bisherige Konversation, den System Prompt und ggf. auch hochgeladene Dateien. Aus Erfahrung wissen wir: Alle nutzen am Ende dieselben Modelle, aber wie der Kontext behandelt wird, entscheidet darüber, ob der AI-Assistent genial oder nutzlos wirkt. Apropos Kontext: LLMs haben ein beschränktes Kontextfenster – je nach Modell unterschiedlich groß, aber immer begrenzt. Was tun, wenn dieses Limit erreicht ist? Strategien wie Sliding Windows (ältere Nachrichten rauswerfen), automatische Zusammenfassungen oder manuelle Priorisierung helfen weiter. Wichtig ist: Mehr Kontext kostet nicht nur mehr Tokens, sondern macht die Anwendung auch langsamer und teurer. Unser Fazit: Die Komplexität solcher Systeme ist hoch – aber genau deshalb ist es so wichtig, mit kleinsten Prototypen zu starten. Sie helfen, zentrale Probleme frühzeitig sichtbar zu machen. Wer Lust bekommen hat, sich einmal ein wenig inspirieren zu lassen, dem sei der GitLab Duo Chat ans Herz gelegt. Es befindet sich als Open-Source-Projekt im GitLab Repository – man freut sich über jeden Merge Request. LINKS SERVER-SENT EVENTS AUF MDN Eine Einführung in Server-sent Events für die Einweg-Kommunikation vom Server zum Client. HTMLPURIFIER Ein Filter zur sicheren Bereinigung von HTML – ideal bei Benutzereingaben. CHROME PLATFORM STATUS: SANITIZER API Die Sanitizer API erlaubt sicheres Einfügen von HTML-Inhalten direkt im Browser – ohne eigenes Parsen. TAILWIND CSS TYPOGRAPHY Tailwinds Lösung für schöne Standard-Typografie mit dem `@tailwindcss/typography` Plugin. CONTENT SECURITY POLICY AUF MDN Leitfaden zu CSP zur Vermeidung von XSS und zur Härtung von Webanwendungen. LANGCHAIN Ein Framework, das beim Bau komplexer Anwendungen mit Sprachmodellen hilft. GITLAB Der Quellcode der beliebten DevOps-Plattform GitLab – vollständig open source. CONTRIBUTOR SUCCESS TEAM BEI GITLAB Das Team hinter GitLabs Bemühungen, externe Beiträge erfolgreich zu integrieren.

In dieser Folge reden wir mit Jürgen Geuter (Web / Mastodon / LinkedIn), besser bekannt als „Tante“, darüber, wie KI den Alltag von Entwickler:innen verändert – oder eben auch nicht. Zwischen Pragmatismus, Kritik und ein paar Zukunftsfragen schauen wir gemeinsam auf den aktuellen Stand: Was bringt der Einsatz von KI in der Softwareentwicklung tatsächlich, was ist Wunschdenken – und wo wird’s vielleicht sogar gefährlich? UNSER SPONSOR Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten? Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf workshops.de/ki. Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen! SCHAUNOTIZEN [00:004:21] KI IN DER PRAXIS: WO HILFT SIE – UND WO (NOCH) NICHT? Wir sprechen darüber, was KI für Entwickler:innen heute leisten kann – jenseits aller Visionen. Tante gibt Einblick in seine Erfahrungen mit Tools wie GitH ub Copilot und reflektiert, wie sehr sie wirklich in den Entwicklungsprozess eingreifen. Spoiler: Für viele bleibt KI eher eine Ergänzung als ein Ersatz. [00:30:11] DER NEUE ALLTAG: PRODUKTIVITÄT, FRUST UND NEUE ABHÄNGIGKEITEN Auch wenn manche mit KI produktiver arbeiten: Wir beleuchten, wo sie auch Probleme schafft – etwa durch falsche Sicherheit, fehlerhafte Vorschläge oder ein fragiles Vertrauen in Tools, die sich oft wie Blackboxes verhalten. [00:00:00] KI ALS RISIKOFAKTOR – VON BIAS BIS FEHLNUTZUNG Tante erklärt, warum es bei KI nicht nur um Code geht, sondern auch um Verantwortung: Wer trägt die Konsequenzen für Vorschläge, die sich später als falsch herausstellen? Und was passiert, wenn man sie unreflektiert übernimmt? [00:52:55] ARBEITSWELT IM WANDEL: WAS BLEIBT VOM BERUF, WENN KI IMMER MEHR ÜBERNIMMT? Wird die Rolle von Entwickler:innen verschwinden – oder nur transformiert? Wir diskutieren, wie sich Erwartungen, Lernwege und Arbeitsabläufe verändern könnten. Und welche Kompetenzen in Zukunft wichtiger werden als Syntaxwissen. LINKS TANTE.CC Jürgens Blog mit Essays zu Technologie, Gesellschaft und digitaler Verantwortung.