Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

October 07, 2025 Revision 683: ARIA-Glücksrad
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 20 min
September 30, 2025 Revision 682: Nuxt 4 und die Akquisition von NuxtLabs
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:52:40] 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 16 min
September 23, 2025 Revision 681: JSCraftCamp – Blaupause für Community-Events
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!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 19 min
September 16, 2025 Revision 680: TypeScript goes native!
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 ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du?
Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt!
Schaunotizen
[00:02: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..
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
48 min
September 12, 2025 Revision 679: Hackerkiste Augsburg
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
59 min
September 09, 2025 Revision 678: programmier.con – Behind the Scenes
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
57 min
September 02, 2025 Revision 677: Local AI
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.
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!
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 40 min
August 26, 2025 Revision 676: Local First
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 55 min
August 19, 2025 Revision 675: Green Web
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 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: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 heißt 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 weiß 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 19 min
August 12, 2025 Revision 674: Security Awareness ohne Moralkeule
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…
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
59 min