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.

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.

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.

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 <label> 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 <dialog>): 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 <dialog> mit .showModal() verwenden (der Browser inertet den Rest). Weiterführend: <dialog>, 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.

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.

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!

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..

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.

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.

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.

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.

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.

[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…

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.

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 <select> 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 <select>

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.

Schaunotizen

[00:02:21] Farbsehschwäche und Farbblindheit

Wie beginnen mit den Grundlagen (Definition, Entstehung und Häufigkeit der Farbfehlsichtigkeiten) und steigen danach sogleich in Alltagsbeispiele ein. Bananen stellen sich als ein größeres Problem als der Straßenverkehr heraus, Luft- und Wasserstraßen bleiben für die Farbefehlsichtigen durch den Lanterntest gleich ganz gesperrt. Best und Worst Practices in Web und Webentwicklung kommen natürlich auch nicht zu kurz; wer die drei Regeln einhält, ist meist schon ganz gut aufgestellt. In Hinblick auf das Big Picture kauen wir mögliche Effekte des European Accessibility Act durch und überlegen wie wir in ganz alltäglichen Web-Projekten Farbsehschwächen-Kompatibilität erhöhen können.

Schaunotizen

[00:01:31] Design-Systeme im Jahr 2024

Was wir in unserem Gespräch zunächst einmal feststellen, ist dass die Bedeutung von Design-Systemen stetig zuzunehmen scheint. Gefühlt ist das Ganze vor 10 Jahren langsam bei den ersten großen Playern losgegangen, und mittlerweile gibt es sie überall. Wir vermuten, das hat ganz stark mit Tools wie React und Figma zu tun, die Design-System-freundliche Ansätze verfolgen.

Es liegt aber auch daran, dass Design-Systeme mit vielen Vorteilen locken: Sie unterstützen bei der Zusammenarbeit zwischen Entwicklung und Design, weil sie ein gemeinsames Verständnis der Sprache des anderen etablieren helfen. Dem Management wiederum bieten sie Vorteile in Form von Skalierung einerseits und Kostenersparnis andererseits. Auch schneiden wir das Thema ROI eines Designsystems an und sprechen darüber wie die Einführung in einer Organisation erleichtert werden kann, um eine bessere Adaption zu erzielen. Wir sind uns aber darin einig, dass ein wesentlicher Teil des Erfolgs nicht von technischen Aspekten, sondern auch von Stakeholder-Management und Kommunikation abhängt.

Apropos Technik: natürlich diskutieren wir über Vor- und Nachteile verschiedener Frontend-Stacks wie React und Web-Komponenten, welches Framework für die Zukunft relevant sein wird und wie der Transfer von Code zwischen verschiedenen Frameworks erleichtert werden könnte. Weiterhin erörtern wir, wer in einem Unternehmen oder Team für das Design-System verantwortlich sein sollte und wie Entscheidungen in diesem Zusammenhang getroffen werden können. Und schließlich weisen wir darauf hin, dass Design-Systeme am Ende immer nur so gut sind wie die sie Nutzenden ein Verständnis der darunter liegenden Konzepte haben.

Das zeigen auch Jonas‘ und Daniels Erfahrungen beim Einsatz ihres Open-Source Design-System-Frameworks kickstartDS bei Kunden: So mächtig das Framework auch ist, so unklar ist vielen unerfahrenen Neu-Design-System-Nutzenden, wie sie zu einem großen ganzen zusammenfügen und es an Ihre bestehenden Systeme anbinden können. Deshalb stand das letzte Jahr bei kickstartDS ganz im Zeichen der Weiterentwicklung hin zu einem nunmehr schlüsselfertigen Frontend, mit typischen UI-Komponenten, Adaptern für Storyblok, Eleventy & Co. und einem anschaulichen Showcase obendrauf.

[00:00:00] Keine Schaunotizen

Jonas‘ Artikel zum Thema JSON-Schema

Part 1: https://www.kickstartds.com/blog/unlocking-the-frontend-pt1/
Part 2: https://www.kickstartds.com/blog/unlocking-the-frontend-pt2/

Ruhmesmeile

Jonas‘ und Daniels Web-Agentur aus Bonn

Schaunotizen

[00:02:12] Requirement Engineering mit Event Modelling

Martin identifiziert das Ermitteln und Kommunizieren von Requirements als das größte Problem im Software-Engineering und stellt seinen Event-Modelling-Ansatz als Lösungsvorschlag vor. Mit uns spielt er einen entsprechenden Workshop durch, der alle Stakeholder an einen Tisch holt und die umzusetzende Software als eventgetriebenes System planen lässt. Von der Philosophie des Ansatzes über Parallelen zu Domain Driven Design (siehe Revision 556) bis hin zur Weiterentwicklung des Modells über die Zeit wird keine Plaungsphase außer acht gelassen.

Diesmal sind Pepo (Pascal Szewczyk) und Pia Hofmeier mit dabei. Wir sprechen über mentale Gesundheit.

Schaunotizen

[00:02:04] Mentale Gesundheit

Das Thema mentale Gesundheit am Arbeitsplatz ist für uns sehr wichtig. Wir sind deshalb froh, dass wir Pepo und Pia für die Sendung gewinnen konnten. Peter schildert seine Erfahrungen mit Depression als Betroffener und zeigt anhand einiger Beispiele, welchen Einfluss und Auswirkungen die Depression auf seine Arbeit und das Leben allgemein hat. Pia hilft uns dies allgemein einzuordnen und wir sprechen darüber, wie man mit Menschen mit Depression umgehen und diesen helfen kann.

Wir hoffen, dass wir mit dieser Sendung mehr Sensibilität für das Thema schaffen können und Betroffenen sowie Helfenden, das Gespräch darüber erleichtern können.

Schaunotizen

[00:01:42] UX auf der Kommandozeile

In unserem Gespräch erkunden wir die Vielfalt der „Command Line Interface“- aka CLI-Tools und deren Einsatzmöglichkeiten in unterschiedlichen Szenarien. Von der einfachen Verwendung für Git-Operationen, über Brew bis hin zu spezialisierten Anwendungen für Cloud-Dienste und Content-Management-Systeme, die Kommandozeile ist ein mächtiges Werkzeug in der Entwicklerwelt.

Martin betont, wie wichtig eine gute Developer Experience ist, um effektiv und effizient mit Kommandozeilenprogrammen arbeiten zu können. Wir sprechen über die Herausforderungen und Lösungen bei der Erstellung benutzerfreundlicher CLI-Programme, die sowohl für Einsteiger als auch für erfahrene Entwickler geeignet sind.

Wir lernen, dass wir grundsätzlich jede Programmiersprache zum Schreiben von Kommandozeilen-Werkzeugen hernehmen können, es aber deutlich angenehmer wird, wenn wir uns Hilfe von darauf spezialisierten Frameworks holen, die von Haus aus Lösungen für viele typische Anwendungsszenarien anbieten:

• JavaScript: Open CLI Framework (OCLIF), commander.js
• Go: Cobra
• PHP: symfony/console
• Python: Click

In OCLIF tauchen wir tiefer ein und lernen Dinge über Flags, über interaktive vs. non-interaktive CLI-Programme, dass eine Ausgabe rückwärtskompatibel, da „grep-bar“ sein sollte, und dass CLI-Werkzeuge responsive sein müssen, nämlich in der Form, dass sie automatisch bemerken, ob sie in einem ausgabefähigen Terminal („TTY“) laufen oder nicht, und sich daran anpassen.

Gegen Ende werden wir fast des Wahnsinns fette Beute, als wir nämlich hören, dass es sogar ein React-basiertes Framework zum Bauen von CLI-Tools namens Ink gibt. 🤯

Schaunotizen

[00:03:00] Werkzeuge im Meatspace

Wenn ihr schon immer mal wissen wolltet, auf welcher Seite der Hilti-vs.-Bosch-Debatte wir stehen und ob „entspinnifizieren“ mit Kabel oder Akku besser geht, klären wir das ein für allemal. Außerdem geht es kurz um Fahrräder und das Reinigen von Fahrrädern, wahlweise mit spezialisiertem Tooling oder ausgedienten Spülbürsten.

[00:18:50] Kaffee, Kaffeezubehör und Koffein-Trägersubstanzen

Hans nerdet über Espresso ab und wir debattieren über den Wert von unterschiedlichen Kaffees in unterschiedlichen Lebenslagen. Wir klären, wie viel Esspresso kommt aus dem „„„„„Esspressokocher“““““ herauskommt, überlegen ob die 9Barista Espresso Machine ihren Mondpreis wert sein könnte und debattieren die Qualitätsunterschiede von Kaffeemühlen. In qualifiziert gibt’s mehr von dem Thema auf Youtube bei James Hoffmann.

[00:46:23] Software-Empfehlungen

Wir empfehlen und diskutieren unterschiedlichste Software-Produkte aus allen möglichen Kategorien, beginnend bei den Bildschirm-Wach-Haltern Amphetamine (Mac) und Caffeine (Linux). Der Zettelwirtschaft treten wir mit Obsidian und Passwordmanagern wie 1Password entgegen, warnen aber auch davor, sich darauf zu sehr zu verlassen (1Password im speziellen hat erhöhtes Risiko für Enshittificaton und/oder Exitus). Zum reviewen und mergen von Code stellen Graphite, Git Tower und Sourcetree ernstzunehmende Alternativen füreinander dar, während die einzige Alternative zu DevUtils räudige Textareas auf shady Websites sind. Hans spricht sich für den „Pocket Coach“ Ahead aus, Vanessa für den CV-Generator Oh My CV!, aber im allgemeinen taugt auch schieres HTML/CSS als LaTeX-Ersatz für schöne Dokumente. Für visuelles empfehlen wir Mermaid (ASCII->Diagramm-Transformator) (Online-Grafiktool) (Offline-Vektorgrafikeditor) und („visueller Workspace“), für Präsentationen unter anderem Pitch und Slidev. Nachdem wir eine Lanze für selbstgeschriebene Software gebrochen haben (xkcd) beenden wir die Sendung mit den Mastodon-Clients Ivory (iOS) und Elk (Web) dem Kalender Cron, dem Task-Manager Things, dem Mail-Client Superhuman und einer Diskussion rund um Podcast-Apps wie Overcast und Spotify.

Schaunotizen

[00:02:20] Komponentenbasierte Frontends in TYPO3

Diese Revision interessiert uns, ob, und wie man im Content-Management-System TYPO3 ein komponentenbasiertes Frontend konstruieren kann. Bevor wir in diese Frage eintauchen, lassen wir uns von unseren Gästen den Werdegang, die Philosophie und die aktuelle Stellung von TYPO3 im Markt erklären. Nach einigen Höhen und Tiefen ist TYPO3 nun schon seit Längerem wieder in guten Fahrwassern und es sind zahlreiche gute Dinge hineingeflossen und neue in der Roadmap geplant. Was TYPO3 im Core nicht mitbringt, rüsten zahlreiche TYPO3-Extensions nach, von denen einige auch den offiziellen Segen des Core-Teams haben – was bedeutet, dass sie gut gepflegt sind. Das mächtige Template-System basiert auf XML und nennt sich Fluid. Headless lässt es sich ebenso betreiben wie mit „Head“. Und natürlich besitzt TYPO3 seine Version von Hotwire namens „Topwire„.

TYPO3 mischt im deutschsprachigen Markt als einziges Open Source System im Enterprise-Umfeld mit und hat so einen guten Ruf, dass sogar der Bund drauf setzt. In den letzten Jahrzehnten hat sich rund um TYPO3 eine große Community geformt, die sich regelmäßig Online austauscht, sich zu Meetups trifft, oder auf den jährlich stattfindenden TYPO Developer Days.

Als vom Backend her entwickeltes System, ist TYPO3 nicht „out of the Box“ auf die komponentenbasierte Entwicklung von Frontends ausgelegt. In diese Lücke stieß nun Simon und lotete aus, was sich machen ließ. Was nicht passt, wird passend gemacht und so ergibt es sich, dass man für sein Frontend letztendlich doch Komponenten-Bibliotheken/-Styleguides einsetzen kann, und/oder Bootstrap, und man alles mit Vite verdrahten kann, das einem alle Assets zusammenschnürt.

Schaunotizen

[00:01:33] WebAssembly – Vergangenheit, Gegenwart und Zukunft

Wir beginnen mit einem kleinen Recap, was WebAssembly denn überhaupt ist: WebAssembly ist eine von JavaScript-Engines abgeleitete, plattformunabhängige Ausführungsumgebung, die es ermöglicht, Code aus anderen Programmiersprachen dafür umzuwandeln und ihn dann nahezu in Originalgeschwindigkeit auszuführen.

Die ersten Umgebungen, die WebAssembly unterstützt haben, waren die Browser. Alle aktuellen Browser, aber auch Node, Deno oder Bun unterstützen die Ausführung von WebAssembly. Mit Hilfe von wasm-bindgen kann WASM-Code mit JavaScript kommunizieren und zusammenarbeiten.

Neuerdings gibt es, dank des WASI-Standards aber auch eigenständige Ausführungsumgebungen für WebAssembly, um Code plattformunabhängig auszuführen – die bekannteste derzeit: Wasmer inklusive Packet-Registry.

Die Zukunft von WebAssembly sieht Martina in der Nutzung als „Serverless Functions“, also in Form von schnell erzeugtem „Fire and Forget“-Code, der irgendwo in der Cloud läuft.

Keine Schaunotizen

Das V8 Blog

Hier posten die V8-Ingenieure regelmäßig über die Verbesserungen an der Engine.

Debug C/C++ WebAssembly

Hier findet Ihr beschrieben, wie Ihr mit den Chrome Devtools WebAssembly-Code debuggen könnt. Ein Video-Tutorial gibt es auch.

1. Web Components
2. Erwartungen an den Framework-Jungle 2024
3. Design Systeme

Unsere Teilnehmerschar bestand aus ehemalige Gästen wie z.B. Marvin Hagemeister, Jens Grochtdreis oder Alexander Lichter, aber auch aus vielen neuen Gesichtern. Darüber haben wir uns sehr gefreut!

Schaunotizen

[00:10:38] Web Components

Wir starteten mit den Web Components. Zunächst ging es darum, ob Web Components überhaupt „einsatzbereit“ seien. Und wir diskutierten, wie sich Web Components mit anderen Frontend-Frameworks verbinden lassen. Zum Glück gab es bereits Artikel darüber, wie Frameworks und „Custom Components“ erfolgreich kombiniert werden können, wie z.B. der „Custom Components Everywhere„. Besonders spannend war, dass die Seite Reddit anscheinend teilweise bereits mit Web Components erstellt wurde. Dies war jedoch noch nicht für alle Benutzer verfügbar – in diesem Fall half der Inkognito-Modus und das Ausloggen -, aber dann konnten die Teilnehmer die neue Webseite mit Web Components betrachten. Wir haben natürlich über den Shadow DOM und die damit einhergehenden Probleme gesprochen. Wenn jemand noch auf der Suche nach überzeugenden Argumenten für Web Components auf Management-Ebene war, empfahlen wir das Lesen dieses Web Components Elevator Pitchs.

• https://nolanlawson.com/2023/12/30/shadow-dom-and-the-problem-of-encapsulation/
• https://blog.jim-nielsen.com/2023/html-web-components-an-example/
• https://custom-elements-everywhere.com/
• https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/
• https://gomakethings.com/the-elevator-pitch-for-web-components/
• https://openui5.org/
• https://sap.github.io/ui5-webcomponents/
• https://livebook.manning.com/book/micro-frontends-in-action/
• https://caniuse.com/declarative-shadow-dom

[00:56:54] Erwartungen an den Framework-Jungle 2024

Die Diskussion ging nahtlos zum Thema Frontend-Frameworks über. Zuerst haben wir darüber gesprochen, ob die Teilnehmer:innen zu dieser Zeit „FOMO“ (Fear of missing out) in Bezug auf die aktuellen Frontend Frameworks empfanden. Danach haben wir erörtert, wie viele verschiedene Frameworks tatsächlich in der „Realität“, also in Arbeitsprojekten, verwendet wurden. Einige Personen haben ihre Erfahrungen geteilt, wie sie Frameworks oder Bibliotheken wie NPM-Pakete komplett ausgetauscht haben. Wir haben die Vor- und Nachteile der Verwendung von Bibliotheken im Allgemeinen besprochen. Marvin hat in diesem Zusammenhang passenderweise den Link zu einem XKCD-Comic über Bibliotheken im Web geteilt.

• https://workingdraft.de/595/ (HTML over the Wire)
• https://workingdraft.de/576/ (Qwik)
• https://workingdraft.de/584/ (Solid & Solidstart)
• https://workingdraft.de/552/ (Frontend-Development im Jahr 2023)
• https://workingdraft.de/405/ (rollup.js)
• https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-8/
• https://vinxi.vercel.app/
• https://github.com/unjs/
• https://workingdraft.de/565/ (Quo Vadis Frontend-Tooling?)
• https://socket.dev/blog/when-everything-becomes-too-much

[01:59:55] Design Systeme

Mit einer fulminannten Überleitung von Hans gelangten wir zum Thema Design Systeme. Sowohl in der Live-Diskussion als auch im Chat gingen viele Themen hin und her. Wir sprachen darüber, wer in Projekten für die Instandhaltung von Pattern Libraries verantwortlich ist. Es stellte sich auch heraus, dass es bei dem Thema viel um Kommunikation geht. Die Teilnehmenden nannten Tools wie Storybook, story.to.design, Histoire, UXPin und Ladle. Schließlich eröffnete Hannah die Diskussion darüber, wer tatsächlich mit „Design Systemen“ und nicht nur Pattern Libraries im Designbereich, beispielsweise mit Figma, arbeitete.

• https://histoire.dev/guide/getting-started.html
• https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
• https://story.to.design/
• https://www.uxpin.com/
• https://ladle.dev/
• https://fractal.build/
• https://www.youtube.com/watch?v=qtAu1V6v6YQ (Exploring the Anatomy of Design Systems)
• https://esilva.net/sociotechnical/sociotechnical-architecture_why-and-what.html

Schaunotizen

[00:02:57] Das class-Attribut

Zunächst einmal wollen wir wissen, wie lange es dieses Attribut schon im HTML-Standard gibt. Stellt sich aber heraus, es ist gar nicht so einfach, das herauszufinden! Hans erinnert sich an die Möglichkeit, mit bestimmten Attribut-Selektoren nur nach Teilen des Klassennamens suchen zu lassen und so Klassen „(de-)composable“ zu machen. Dank MDN lernen wir, dass Klassennamen case-sensitiv sind. Wir outen uns als große Fans des classList-DOM-Interfaces. Wir kommen sodann zurück zur Anfangsfrage, da Peter zwischenzeitlich erfolgreich recherchiert hat, seit wann es das Attribut gibt. Wir erfahren, dass es nach dem ersten Proposal von HTML und vor HTML 2.0 noch ein Proposal namens HTML+ gab und dass das class-Attribut schon Teil von HTML 2.0 aus 1995 war. Das ganze erscheint uns vorausschauend auf das 1996 standardisierte CSS.

[00:09:19] <style>

Hans erinnert sich, dass es mal ein scope-Attribut gab, mit dem sich der Wirkungsbereich eines <style>-Elements auf den DOM-Zweig begrenzen ließ, in dem es selbst eingehängt war. Weil aber zu wenig Browser das Attribut implementiert haben (und vermutlich wegen der Erfindung von Shadow-DOM) wurde es später wieder aus dem HTML-Vokabular entfernt. Es schicken sich nun aber als Ersatz die „Scoped Styles“ in Form der @scope-Rule an, die in Chrome und der Safari Technology Preview schon unterstützt werden. Peter hätte gerne die Möglichkeit, so ein Verhalten by default zu aktivieren – möglicherweise per HTML customized built-ins. Aber die wollte das Webkit-Team nie implementieren und so kann man sie als gescheitert ansehen. Wir schauen uns anschließend noch an, welche Attribute oder Eigenschaften <style>-Element unterstützen. Peter weiß zu berichten, dass es eine per JavaScript zugängliche Eigenschaft namens .disabled gibt, mit der man einzelne Stylesheets imperativ aktivieren oder deaktivieren kann. Außerdem arbeitet man ganz neu an einem blocking-Attribut, mit dem man dem Browser z.B. mitteilen kann, dass das Rendern (nicht aber das Parsen) einer Seite so lange ausgesetzt werden soll, bis die mit einem blocking="render" markierte Ressource geladen ist. Wollen könnte man das im Zusammenspiel mit den neuen Multi-Page-View-Transitions.

[00:27:26] SVG Text Positioning (dy)

Zufällig weiß Schepp, was dieses Attribut macht, weil er für den örtlichen, jährlich stattfindenden Trödelmarkt immer das Stand-Layout mit per JavaScript generiertem SVG erstellt. Und dabei verwendet er das dy-Attribut zu Hauf, um Dinge relativ zur letzten verwendeten Position zu zeichnen. Ein weiteres sehr praktisches Attribut in SVG ist lengthAdjust, mit dem man Text in die Breite einer Box genau einpassen kann.

[00:37:32] border-top-style

Schepp meint, hier benutzt er ausschließlich solid oder none. Alle anderen Styles hält er für überflüssig. Peter hält dagegen, dass er gerne die dotted-Variante nutzt, dem Schepp aber dashed vorziehen würde. Hans führt die Property zu dem Thema, dass man mit border-Tricksereien immer Tooltip-Pfeile gebaut hat. Und wenn man einen Tooltip-Schatten möchte, der das Pfeilchen mit umfasst, dann nimmt man statt box-shadow besser filter: drop-shadow(), was wiederum nur einen Shortcut für einen SVG-Filter darstellt.

[00:43:19] CSS‘ <position>-Datentyp

Dieser Datentyp besteht aus zwei Positionsangaben (als Keyword wie z.B. center, als absoluter oder als Prozentwert) und wird z.B. in der CSS-Eigenschaft background-position verwendet. Zudem lässt sich seit einigen Jahren vor jede Nicht-Keyword-Längenangaben mit einem… Keyword die Ausrichtung bestimmen, von der aus sie arbeitet: bottom 12vmin right -6px. Schepp weist zudem noch auf die gerne übersehene Tatsache hin, dass die Positionsangaben nicht nur auf die Position in einem Container einwirkt, sondern sie auch den Ankerpunkt in dem zu positionierenden Objekt verschiebt. Andernfalls könnte ein Objekt nicht gleichzeitig bei einem Wert von 0% links, und bei einem Wert von 100% rechts am Container anliegend positioniert werden – siehe absolute Positionierung. Zur Verdeutlichung dessen hat er dieses Codepen erstellt. Wir sind uns außerdem darin einig, dass der Default für background-repeat irgendwie doof ist. Aber das hat ja sogar die CSS Working Group selbst erkannt. Am Ende spannen wir den Bogen nochmal zu SVG zurück, weil das keine Hintergrundbilder kennt, oder sie nicht so unterstützt wie HTML und man z.B. für einen vollflächig eingefärbten Hintergrund ein gefärbtes Rechteck über die gesamte SVG-Canvas ziehen muss. Peter weiß noch zu berichten, dass wenn man dem <body>-Element ein Hintergrundbild gibt, dieses in aller Regel „nach oben“ ans <html>-Element promoted wird und es daher auch bei komplett leerer Webseite und in der Höhe kollabiertem <body>-Element zu einem vollflächigen Hintergrund kommt.

[00:58:08] CSS‘ <url>-Datentyp

In die url()-Funktion lässt sich nicht nur eine Bild-URL einbauen, sondern auch Data-URIs. Und welche ist uns da die liebste? Natürlich Inline-SVG! Hans muss plötzlich an altertümliche Internet-Explorer-Hackereien mit der (deprecateten) behavior-Eigenschaft und CSS3Pie zurückdenken. Und an die Webseite browserhacks.com. Sodann driften wir in eine Diskussion darüber ab, ob Webentwicklung wohl eher früher oder eher heute komplexer war/ist. Schwer zu sagen. Den Faden wieder aufnehmend, verweist Schepp auf ein Blogpost von Stefan Judis, das sich damit befasst, dass man in der url()-Funktion keine Custom Properties verwenden kann, was daran liegt, dass der Inhalt von url() einfach nicht eindeutig parsebar ist, was wiederum daran liegt, dass man Inhalte genau so gut mit wie ohne doppelte Anführungszeichen hineinsetzen kann. Ein schöner Spec-Fuckup! Repariert wird das durch die Nachfolger-Funktion src(), die im Grunde ein Alias von url() ohne extra Parserregeln ist, die derzeit aber noch in keinem Browser implementiert ist. Dieses Spec-Fuckup entführt uns gedanklich zu den CSS-Pseudoklassen :empty und :blank, die ebenfalls nicht ganz zu Ende gedacht waren.

Keine Schaunotizen

JScript

Microsofts Take von JavaScript

Dynamic HTML (DHTML)

Die ersten Gehversuche in dynamisch gescripteten Webseiten

Anmeldung zur Revision 600 im Online Format

Hier geht’s zur Anmeldung auf MeetUp

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!

Schaunotizen

[00:00:32] „Next Level“ End-to-End-Testing

Natürlich war Preact der initiale Grund für Marvin, sich mit End-to-End-Testing-Frameworks zu beschäftigen, denn Marvin suchte nach einem Tool, das das von Preact erzeugte DOM extrahieren und gegen einen Snapshot testen konnte. Darüberhinaus arbeitet Marvin zur Zeit bei der Firma, die hinter den Tonie Boxen steckt. Und auch dort war man auf der Suche nach einem Testing-Framework, das den gesamten Flow von Inbetriebnahme einer neuen Tonie Box, über das Flashen per Web-Oberfläche hin zum Kauf und Teilen von Hörbüchern abtesten konnte. Karma mit dem darunter befindlichen WebDriver war für das Preact-Szenario nicht geeignet, weil es an bestimmten Stellen durch den genutzten Stack limitiert wird. An Jest wiederum stört, dass dieses keine echte Browser zum Testen nutzt, sondern nur ein simuliertes DOM (jsdom), das aber manche Dinge, wie zum Beispiel Intersection Observer nicht implementiert. Und wenn man Jest mit Puppeteer verknüpft, dann kann man keine zwei parallelen Browser-Instanzen steuern. Was macht man also, wenn man nichts vernünftiges findet? Genau! Sein eigenes Testing-Framework programmieren: pentf.

Keine Schaunotizen

Replay

„A new debugger for recording and replaying the web.“

Playwright

„Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API.“

Schaunotizen

[00:01:35] Neos

Wir steigen mit der Geschichte von Neos ein und sprechen über die Verbindung zu TYPO3. Robert und Sebastian erklären die architektonischen Ansätze und die Frontend-Transformation von Ext.js zu Ember und schließlich zu React. Wir machen auch einen kleinen Ausflug zu Domain Driven Design (hört auch mal in die Revision 314). Außerdem erklären die beiden das Konzept hinter Atomic Fusion, der Templating-Sprach von Neos. Und natürlich darf die Community-Arbeit nicht zu kurz kommen, die bei Neos eine große Rolle spielt.

Keine Schaunotizen

YouTube Channel

Gute Videos zu Vorträgen des Neos-Teams

Installation-Guide

Hier geht’s lang, zum Cold-Start mit Neos

Die Foundation

Ihr könnt das Open Source Projekt über die Foundation finanziell unterstützen

]]> 61:47 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/440/ Tue, 01 Sep 2020 09:06:43 +0000 440 full http://workingdraft.de/?p=4860 Willkommen zur zweiten Late Night DadOps Folge mit Stefan und Kahlil. Die beiden haben sich mal wieder zu später Stunde vor die Mics geklemmt um über Dinge zu sprechen die sie gerade bewegen.

[00:00:28] Schaunotizen

Thema dieses mal ist der Karrierepfad des Engineering Managers. Kahlil wechselte Ende letzten Jahres in diesen Beruf und gibt einen Einblick in seine Eindrücke bisher und was das eigentlich ist.

Stefan hat über die letzten Jahre bei Dynatrace die Karrieremöglichkeiten dort mit entwickelt um den Entwicklern dort bessere Entwicklungsmöglichkeiten zu bieten. Er plaudert aus dem Nähkästchen.

[01:15:43] Keine Schaunotizen

Podcast: Managing UP

Ein sehr schöner Podcast in dem langjährige Engineering Manager über die Herausforderungen sprechen kreative und technische Teams zu managen.

]]> 78:44 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/439/ Tue, 25 Aug 2020 08:59:39 +0000 439 full http://workingdraft.de/?p=4849 Florian Herlings betätigt sich bei SPICED Academy als Coach bei Coding Bootcamps und plaudert in dieser Revision zum Vorteil von Hans und Peter aus dem Nähkästchen.

Schaunotizen

[00:00:28]

Florian erzählt vom Dasein als Coach für Coding Bootcamps, nachdem wir die andere Seite in Revision 430 (Berufseinstieg per Coding Bootcamp) schon kennenlernen durften. Der Weg der vom Entwickler zum Coach, der Arbeitsalltag, das Up-To-Date-Bleiben und von die Veränderungen, die einem Coach selbst durch seine Tätigkeit zuteil werden, sind allesamt Thema. Auch die Unterschiede von Bootcamp-Coaching zur Erklärbär-Tätigkeit von Peter (der fast ausschließlich Schulungen für erfahrene Nerds macht) werden besprochen, vor allem was die Wissensvermittlung angeht. Gemeinsamkeiten gibt es aber auch!

]]> 61:10 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/438/ Wed, 19 Aug 2020 09:24:22 +0000 438 full http://workingdraft.de/?p=4824 Marcel Poelker (Twitter) ist CTO von Taledo (Twitter, Insta), einer digitalen Recruiting-Plattform, und erzählt Schepp und Peter in dieser Revision, wie der Weg vom Nerd zum Startup-Gründer aussieht.

Schaunotizen

[00:00:30] Von Studium bis Startup

Wir machen einen Rundumschlag der Startup-Gründung von der Ideenfindung bis zum fertigen Produkt! Beginnend mit Marcels Werdegang (von der Uni via Festanstellung zur Gründung) und dem Finden der Co-Gründer plaudern wir über die Anfänge eines bootstrapped Startups. Wir besprechen, wie man über Irrungen und Wirrungen das passende Projekt findet, das Henne-Ei-Problem löst und Product-Market-Fit erreicht. Die Gewichtung von Fragen wie der Wahl der passenden Technologien (im Falle Taledos Ruby on Rails) und Investoren führt uns bis in die Details der täglichen Entscheidungen, etwa bzgl. der Preisgestaltung von Produkten.

[00:00:00] Keine Schaunotizen

Igalia Open Prioritization

Einer neuer Ansatz Webbrowser-Feature-Priorisierung zu crowdfunden. Das ist doch mal etwas wirklich neues!

]]> 51:14 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/437/ Wed, 12 Aug 2020 10:28:49 +0000 437 full http://workingdraft.de/?p=4833 Nach SelfHTML feierten am 23. Juli 2020 auch die MDN Web Docs ein Jubiläum, nämlich ihr fünfzehnjähriges Bestehen. Für uns ein toller Anlass, einen Gast einzuladen, mit dem wir schon länger sprechen wollten: Kadir Topal, Mozilla-Urgestein und Product Lead der MDN Web Docs.

Schaunotizen

[00:01:50] 15 Jahre MDN Web Docs

Zusammen mit Kadir rollen wir den Werdegang der MDN Web Docs auf – von ihren Anfängen als Netscape DevEdge unter AOL, über das „Mozilla Developer Network“ hin zur Browser-agnostischen und allumfassenden Dokumentation fürs Web, wie sie sich heute darstellt, und die zu gleichen Teilen von allen Browser-Herstellern co-finanziert und gemanaged wird (außer Apple natürlich).

Dann widmen wir uns neueren Entwicklungen, die den Status der MDN Web Docs als Anlaufpunkt für Webentwickler zementiert haben. Das wären zum einen die ab 2018 in den Beschreibungstexten eingebetteten interaktiven Code-Samples. Desweiteren die 2019 verkündete, zusammen mit Can I Use von Grund auf neu konzipierten Kompatibilitätstabellen, aka „MDN browser compatibility data“, die auf GitHub liegen, und dort von jederfrau, aber vor allem den Browser-Herstellern regelmäßig erweitert werden. Mittlerweile finden sie nicht nur bei MDN und Can I Use selbst Verwendung, sondern auch in Lintern, Prefixern und IDEs wie Visual Studio Code. Und drittens sind es regelmäßige (remote) Nutzertests und die jährlich stattfindende „MDN Developer Needs Assessment“_umfrage, deren Ergebnisse im Web DNA Report mündet und die sogar Google dazu bewegt haben, Geld in die Hand zu nehmen, um konkurrierende Browser besser zu machen.

Für die Zukunft ist geplant, Einsteiger-Leitfäden in der MDN Learning Area bereitzustellen, die nicht mehr nur Browser-Technologien zum Fokus haben, sondern die beim Einstieg in JavaScript-Frameworks oder Node.js helfen.

Keine Schaunotizen

Contributing to MDN

Sollten wir Euer Interesse geweckt haben und Ihr Euch fragt, wie Ihr Euch in das Projekt einbringen könnt, dann ist hier der richtige Anlaufpunkt für Euch.

MDN Web Docs Store

Wenn Ihr das MDN-Projekt lieber finanziell unterstützen möchtet, dann schaut Euch im MDN Web Docs Store um und vielleicht findet Ihr dort das eine oder andere an Merch, das Euch gefällt?

]]> 66:41 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/436/ Wed, 05 Aug 2020 09:13:22 +0000 436 full http://workingdraft.de/?p=4813 Vor einiger Zeit fragten wir auf Twitter, wer von euch eigentlich Tests im Frontend schreibt. Die Antwort war mehr als verblüffend und somit geht’s in der neusten Revision Working Draft mal wieder um Testing, um genau zu sein Unit-Testing im Frontend. Unser Gast Tim Seckinger gibt uns noch mal eine Übersicht über Testing im Allgemeinen und baut auf der Revision 375 auf, in der wir auch über Testing gesprochen haben.

Schaunotizen

[00:00:28] Frontend Unit-Testing

Los geht es mit einer kurzen Betrachtung des Themas Testing im Allgemeinen: Welche Arten des Testing gibt es eigentlich und wozu braucht man was? Ein kleiner Ausflug, welche Unterschiede Unit-Tests zu Integration-Tests haben, darf nicht fehlen. Schließlich landen wir beim Thema CI/CD und wie man Testing am besten in eine Pipeline integrieren kann. Das Thema Test Driven Development schneiden wir an und kommen schließlich zu dem Schluss, dass es noch so viele weitere Themen gibt, über die wir reden müssen und beschließen deshalb eine zweite Revision zum Thema, die schon bald folgen wird.

[00:00:00] Keine Schaunotizen

Jest Contributor

Jest sucht Contributor, die helfen das Projekt voran zu treiben und Bugs lösen. Wenn du dich berufen fühlst, schau mal auf der GitHub-Seite vorbei. Dort gibts weitere Infos.

]]> 78:06 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/435/ Tue, 28 Jul 2020 08:30:21 +0000 435 full http://workingdraft.de/?p=4780 Peter lies sich in dieser Revision das Open/Decentralized/Federated/Indie Web erklären und konnte dabei auf den Input von Matthias Pfefferle (Blog, Twitter) und Sebastian Lasse (Mastodon, Autor von Redaktor) zurückgreifen.

Schaunotizen

[00:00:29] Das Open/Decentralized/Federated/Indie Web

Beginnend mit einem Versuch, die Begriffe Open, Decentralized, Federated, Indie etc. zu definieren steigen wir, wie die Nerds die wir sind, recht bald in die technischen Untiefen herab. Neben Protkollen wie ATOM, RSS und ActivityPub sind auch die solche Protokolle nutzenden Software wie Mastodon, Diaspora, oStatus, Identica, Status.net, Tent.io, Friendica ein Thema. Dezentral betriebene Software-Instanzen mit konpatiblen Protokollen bilden das Fediverse, dessen technische Inkompatibilitäten (u.A. betreffend Peer Tube und WebFinger, registerProtocolHandler) ebenso wie nichttechnische Aspekte (unter anderem Monetarisierung, Gouvernance, Nazis, Fake News (siehe Eunomia), End-User-Features wie den universellen Follow-Button und Förderungsmöglichkeiten) durchgekaut werden. Gegen Ende legen wir den Fokus auf das Indie Web (komplett mit IndieWebCamps und Homebrew Website Clubs), Self-Hosting und wagen Rückgriffe auf das Web 2.0 mit Bestandteilen wie Flickr, Ping- und Trackbacks (in neu und cool: Webmention) und die von uns erst kürzlich abfällig betrachteten Microformats. Zuletzt darf der Verweis auf die mehrfacht erwähnte Offizielle ActivityPub Konferenz 2020 nicht fehlen – die Anmeldungs-Phase läuft! Ceterum censeo faciem liber esse delendam.

]]> 77:58 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/434/ Tue, 21 Jul 2020 12:39:35 +0000 434 full http://workingdraft.de/?p=4791 Beinahe schon Tradition: Stefan und Peter analysieren die nächste TypeScript Version im Detail. Das erwartet euch in Version 4.

Schaunotizen

[00:01:39] TypeScript 4.0

Die nächste TypeScript Version steht vor der Tür! Bevor wir allerdings über den kommenden Release reden sprechen wir über „Development in the open“, und wie das TypeScript Team mit neuen Features umgeht. Veröffentlicht wird ja nun vier mal im Jahr, und was kommt kann man sehr gut auf deren Roadmap sehen, z.B. ein Versuch zu nominalen Typen. Im Detail sehen wir uns allerdings das Herzstück Variadic Tuple Types an, das Stefan dazu gebracht hat die TypeScript Quelldateien mal selbst zu kompilieren und gehörig Bugs und Feedback einzutragen. Wir sprechen über bewusst unfertige Types, was spannend an strukturellen Typsystemen ist, und natürlich warum wir OOP doof finden. Das tun andere übrigens auch. Zu Recht! Abschließend gehen wir auf Editor-Verbesserungen ein, Short circuit assignements und Updates bei JSX. Tolles Release!

]]> 75:51 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/433/ Wed, 15 Jul 2020 13:53:16 +0000 433 full http://workingdraft.de/?p=4785 Kahlil und Stefan gehen in eine Late-Night-DadOps-Episode, um über Eleventy und moderne, statische Seitengeneratoren zu reden. Latenzen und Lags inklusive!

Schaunotizen

[00:02:12] Eleventy

Eleventy — oder kurz 11ty — ist ein neuer, Node-basierter, statischer Seitengenerator der gerade in der Jamstack Community ziemlich viel Hype und Liebe erfährt. Von außen ähnlich dem Urgestein Jekyll, hat 11ty einige Dinge unter der Haube, die irrsinnig interessant sind und Entwickler sehr produktiv machen. Das Arbeiten mit Kollektionen, die mächtigen Pagination-Features (mit denen man so Dinge wie Vorschaubilder generieren kann) und die Mächtigkeit der unterschiedlichen Template-Systeme machen 11ty ein Schweizer Messer mit niedriger Lernkurve. Wir reden außerdem über das Lernen durch Code (Stefan hat sehr viel von Chris Coyiers Conference Website und dem Template von Max Böck gelernt), und über Schreiben, Veröffentlichen, und Lernen in der Öffentlichkeit.

]]> 81:07 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/432/ Tue, 07 Jul 2020 07:15:12 +0000 432 full http://workingdraft.de/?p=4768 Lange geplant, jetzt in die Tat umgesetzt, haben wir diese Revision Harald Kirschner zu Gast, um über den gesamten Firefox Cosmos zu sprechen. Harald ist aktuell nicht nur Produkt Manager für die Firefox Developer Tools und Performance Tooling zuständig, sondern hat zuvor maßgeblich am Projekt „Quantum“ mitgewirkt, bei dem Firefox‘ Infrastruktur nach und nach durch modernere und performantere Bausteine ersetzt wurde.

[00:00:33] Schaunotizen

Der Next-Gen-Firefox für Android: Firefox Preview

„Quantum“ ist ein gutes Stichwort, denn dieses vor einem halben Jahrzehnt begonnene Projekt hat „Firefox Preview“ (interner Projektname „Fenix“) erst möglich gemacht: Einen mobilen Browser, der ganz ohne Tricksen und Abkürzen wahnsinnig schnell ist. Ein wesentlicher Bestandteil von „Quantum“, der das möglich gemacht hat, ist „Web Render“, eine neugedachte und fürs Web optimierte Render-Engine, die auf OpenGL basiert, multithreaded ist, und die für das Abbilden eines Rendertrees optimiert ist anstatt einen General-Purpose-Ansatz zu verfolgen. Und auf Firefox Preview wiederum basiert der neue GeckoView, der es anderen Produkten leicht macht, Gecko als Web-Engine zu integrieren.

Firefox + Puppeteer

Version 3 von Puppeteer bringt eine experimentelle Unterstützung von Firefox mit. Wir sprechen darüber, dass Puppeteer eigentlich das Chrome Debugging Protocol (CDP) nutzt und Firefox für die Anbindung an Puppeteer vom Mozilla-Team um CDP-Fähigkeiten erweitert wurde (und weiterhin wird). Wir sprechen außerdem kurz über Playwright, hinter dem auch viele der Puppeteer-Leute stecken, das eigens dafür gepatchedte Firefoxe und WebKits mitliefert. Und schließlich sprechen wir über CDP selbst, über die Frage, warum die Debugging Protokolle der verschiedenen Browser nicht kompatibel gemacht werden, sowie über die Unterschiede von CDP und der standardisierten Web Driver Schnittstelle, und wie Web Driver 3 irgendwann alles besser machen wird.

Firefox Profiler

Intern hat Mozilla lange einen sehr mächtigen Profiler genutzt, um seine Fortschritte beim „Quantum“-Umbau besser messen zu können. Dieser steht uns jetzt allen zur Verfügung, und zwar nicht nur in Form eines mitgelieferten Devtools-Panels, sondern als externe Web-basierte App, die lokale Messungen anzeigt. Kollaborativ kann man die dann auch hochladen und mit anderen Entwickler per URL teilen und vergleichen. Die typischen Flame Charts und Call Trees lösen alles bis ins kleinste Detail auf und für die Abenteuerlichen können auch Firefox-Internals angezeigt werden.

Keine Schaunotizen

Firefox Developer Tools – Community & Documentation

Wer Lust bekommen hat, das Devtools-Team zu unterstützen und vielleicht sogar neue Features zu implementieren, findet hier alle relevanten Ressourcen für einen gelungenen Einstieg.

„Developer in the Middle“ (DITM) Erweiterung für Firefox

Diese Erweiterung ermöglicht es, Ressourcen einer Seite on-the-fly durch lokal oder anderswo liegende zu ersetzen.

CSS Grid Video Tutorial

Das beste Videotraining, um CSS Grid lernen, vom grandiosen Wes Bos.

Flexbox Zombies

Spielerisch CSS Flexbox lernen? Das geht! Dave Geddes hat nämlich ein Flexbox-Lernspiel gebaut.

]]> 77:44 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/431/ Tue, 30 Jun 2020 09:04:36 +0000 431 full http://workingdraft.de/?p=4758 Anlässlich seines 25-jährigen Jubiläums und weil einige von uns ohne niemals zur Webentwicklung gekommen wären, luden wir Matthias Scharwies und Gunnar Bittersmann (bittersmann.de / @g16n) vom SelfHTML-Projekt in die Sendung ein.

Schaunotizen

[00:00:27] SelfHTML wird 25

Mit SelfHTML hat Schepp Ende der Neunziger Webseiten Coden gelernt und Rodney war damals sogar Contributor und Teil der SelfHTML-Community. Und nicht zuletzt liefen Schepp und Rodney sich im SelfHTML-Forum überhaupt das erste Mal über den Weg. Mit Matthias und Gunnar ließen wir die Geschichte des Projekts Revue passieren, von seinen Anfängen auf Diskette, dem später davon abgeleiteten Buch, von den Schwierigkeiten, so ein Projekt ohne Versionierungssystem mit mehreren Leuten zu bearbeiten und auf Stand zu halten, bis hin zur großen Implosion und der anschließenden Auferstehung mit modernem, handgeschriebenen Forensystem. Wir sprachen außerdem über die tolle Community und die nicht minder coolen, jährlichen „SelfTreffen“.

]]> 60:55 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/430/ Tue, 23 Jun 2020 10:36:52 +0000 430 full http://workingdraft.de/?p=4746 Zur Abwechslung beschäftigen wir uns in dieser Revision einmal nicht mit Technik, sondern mit dem relativ neuen Phänomen der Coding Bootcamps. Mit dabei sind Marie von der Wehl ([email protected] / @MarWehl), die ein solches Bootcamp im vergangenen Jahr bei neue fische in Hamburg durchlaufen ist, sowie Franziska Gertz ([email protected] / @frau_scholle), die als Teamlead für UI Engineers bei sum.como von vielen Vorzügen der Bootcamp-Abgänger zu berichten weiß.

Schaunotizen

[00:00:27] Coding Bootcamps

Von Marie erfahren wir zunächst, wie sie als Logopädin auf die Idee kommt, es doch lieber mit der Programmiererei zu versuchen, und wie sie auf das Angebot der „neuen fische“ gestoßen ist. Wir reden darüber, wie der erste Kontakt zum Anbieter zustande kam und wie anschließend die Ausbildung im Schnelldurchlauf sowohl vom Ablauf her als auch inhaltlich vonstatten ging. Natürlich wollen wir auch wissen, wie sich solche Bootcamps ihre Leistung entlohnen lassen. Und schließlich interessiert uns, wie Marie sich nach der abgeschlossenen Ausbildung auf dem Arbeitsmarkt geschlagen hat.

Von Franzi wiederum bekommen wir attestiert, dass diese Bootcamps tatsächlich tollen Output liefern und ihre Firma derweil einige „neue fische“-Abgänger beschäftigt, nämlich ganze drei Entwicklerinnen und zwei Entwickler. Franzi und ihr gesamtes Team genießen die Begeisterung und den Wissensdurst, den alle Bootcamp-Abgänger gleichermaßen in die Firma einbringen (und den man bei Marie hört). Gleichzeitig ist aber auch klar, dass so ein Bootcamp nur der Anfang ist und so unterstützt und begleitet ihr Team die Neueinsteiger:innen, so dass sie sich bestmöglich in der Praxis einfinden (oder auch in Vue anstelle des im Bootcamp behandelten React).

Uns hat das Befragen der beiden sehr viel Spaß gemacht und wenn Ihr oder bekannte von Euch ebenfalls über ein Coding Bootcamp nachdenken, dann hört diese Folge und kommt gerne auf Marie oder Franzi mit weiteren Fragen zu. Und wenn Ihr selbst ein solches Bootcamp absolviert habt, dann würde uns interessieren, wie Eure Erfahrung war. Hinterlasst gerne eine Nachricht in unserem Kommentarbereich!

]]> 64:25 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/429/ Tue, 16 Jun 2020 07:00:37 +0000 429 full http://workingdraft.de/?p=4724 Schepp, Kahlil und Peter diskutierten in epischer Breite die Erfolge und Misserfolge von HTML5 und viele andere Dinge

Schaunotizen

[00:01:40] HTML5 in Vergangenheit, Gegenwart und Zukunft

Vor 10 Jahren erblickte Peters HTML5-Buch das Licht der Welt, woraufhin er ein HTML5-Fazit verfasste. Diese Revision sollte die Talkshow-Audioversion des Artikels werden, doch wir sprachen am Ende nicht nur über HTML-Parser, SGML vs. HTML vs. XHTML, HTML5-Formularvalidierung sowie Video- und Audio-Elemente, sondern vor allem über TinyMCE, PWA, Service Worker, Push Notifications, Abstraktion und Über-Abstraktion, Unknown unknowns in Webstandards, das Extensible Web Manifesto, Performance, Podcasts und Musicals.

]]> 115:35 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/428/ Tue, 09 Jun 2020 07:00:49 +0000 428 full http://workingdraft.de/?p=4714 Hans und Rodney unterhalten sich über Deno, das ziemlich genau zwei Jahre nach dem ersten Commit in Version 1.0 veröffentlicht wurde.

[00:00:27] Schaunotizen

Deno

Mit Deno versucht Ryan Dahl bei der Entwicklung von Node.js gemachten Fehler zu korrigieren. Wir erklären wie Deno auf ein Package Management verzichtet und stattdessen auf das direkte Referenzieren von einzelnen Ressourcen „im Internet“ setzt (ähnlich wie Browser ES6 Module Specifiers auflösen). Deno setzt außerdem von Haus aus auf TypeScript (erlaubt aber dennoch schnödes JavaScript). Compiler und Bundler sind mit an Board und dürften Diskussionen um Tooling erstmal etwas dämpfen. Mit einer ausbalancierten Runtime API und breiter gehenden Standard Library erlaubt Deno schon eine ganze Menge direkt ab Werk. Wir machen uns zwar stellenweise über das eine oder andere Fundstück in der Standard Library lustig, glauben jedoch, dass diese Art des betreuten Wohnens angenehmer sein dürfte, als wir das vom SIY (Search for It Yourself) des Node/NPM Campingplatzes gewohnt sind. Wenigstens einer von mehr zu bieten, als nur mal eben die Doku zu überfliegen: Hans von seinen ersten Gehversuchen mit Deno. Am Ende bleiben wir aber vermutlich doch eher auf der konservativen Seite und warten mal ab was im nächsten Jahr mit Deno passiert, bevor wir uns von Node.js trennen.

]]> 61:35 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/427/ Tue, 02 Jun 2020 08:13:48 +0000 427 full http://workingdraft.de/?p=4687 Schepp führt Hans und Peter durch eine Präsentation über neue CSS-Features, die er für das Meetup Web Design Cologne vorbereitet hatte.

[00:00:29] Schaunotizen

CSS Next

Ungeachtet der komplizierten Frage, ob es so etwas wie ein CSS4 gibt oder geben sollte (siehe auch Revision 420) starten wir einen wilden Ritt durch neue CSS-Features! Wir sprechen über LCH-Farben, neue Lösungen für Floats und Clearfixes, attr() 2.0, Seitenverhältnisse (auch für Video) Scrollbar-Styling (mit Shoutout an den IE6) und Houdini, speziell das Typed CSSOM und die Paint-API. Mehr neue Features findet ihr unter cssdb.org und in Schepps Präsentation (Chrome Canary empfohlen).

]]> 92:02 Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/426/ Tue, 26 May 2020 09:22:13 +0000 426 full http://workingdraft.de/?p=4683 Eine nie dagewesenen Neuheit: HTML5-Glücksrad mit Gast! Der aus Funk, Fernsehen und Revision 424 bekannte Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, scrollte mit Schepp und Peter durch die HTML-Specs, um frei über Webstandards und Trends zu assoziieren.

Glücksrad

[00:00:29] event.submitter

Hätten Sie’s gewusst? event.submitter (MDN) verrät, welcher Button zum Absenden eines Formulars verwendet wurde. Wir fragen uns, wozu das gut sein könnte, lernen die requestSubmit()-Methode kennen und Peter gelingt es erneut, sich über React zu echauffieren.

[00:12:00] Microdata

Sind Microformats (zuvor Thema in den Revisionen 262 und 287) und damit das Semantic Web wie auch RSS und APIs als Gefallene des Web2.0-Kriegs zu rubrizieren? Uns fallen nur wenige aktuelle Use Cases für HTML5-Microdata oder Microformats oder JSON-LD ein. Sie sind Bewohner einer längst untergegangenen Welt.

[00:18:48] Server-Sent Events aka Event Source

Ein (soweit wir es sagen können) kaum genutzter Webstandard lässt uns zu localForage, Accessibility und dem jüngsten Dependency-Desaster in JavaScript abschweifen.

[00:37:28] Tracks

Für den Einsatz mit dem <track>-Element ersann man das ureigene WebVTT-Format, das uns dezent an SMIL erinnert (auch wenn SMIL, des größeren Alters zum Trotz noch weniger gut als WebVTT unterstützt wird).

[00:48:42] Sections, Headlines und Outlines

Wir lassen das Outline-Drama revue passieren. Vom an sich sehr eleganten Algorithmus ist außer ein paar Browser-Standardstyles nicht viel geblieben.

[01:03:32] <meter> und <progress>

Warum gibt es Extra-Elemente für Fortschrittsbalken und Klapp-Dialoge a la <details>, aber kein eingebautes Tab Widget? Peter versucht sich an einer Erklärung.

Am Ende landen wir unsersehens in den ECMAScript-Specs und staunen über die diversen weniger bekannten Rudimente in JavaScript. Vielleicht machen wir nächstes Mal ein JavaScript-Glücksrad?

]]> 86:06 -Element ersann man das ureigene WebVTT-Format, das uns dezent an SMIL erinnert (auch wenn SMIL, des größeren Alters zum Trotz noch weniger gut als WebVTT unterstützt wird). [00:48:42] SECTIONS, HEADLINES UND OUTLINES Wir lassen das Outline-Drama revue passieren. Vom an sich sehr eleganten Algorithmus ist außer ein paar Browser-Standardstyles nicht viel geblieben. [01:03:32] UND Warum gibt es Extra-Elemente für Fortschrittsbalken und Klapp-Dialoge a la

, aber kein eingebautes Tab Widget? Peter versucht sich an einer Erklärung. Am Ende landen wir unsersehens in den ECMAScript-Specs und staunen über die diversen weniger bekannten Rudimente in JavaScript. Vielleicht machen wir nächstes Mal ein JavaScript-Glücksrad?]]> Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer no no Vanessa Otto Peter Kröner Hans Christian Reinl Stefan Baumgartner Christian »Schepp« Schaefer https://workingdraft.de/425/ Tue, 19 May 2020 08:17:27 +0000 425 full http://workingdraft.de/?p=4680 Nachdem Peter, motiviert durch Warhol, mal wieder einige Zeit im absurden Paralleluniversum semi-relevanter Teile der HTML-Spezifikation verbracht hatte, musste er in dieser Revision Schepp und Hans davon im Detail erzählen.

Schaunotizen

[00:00:30] Welche Elemente sind eigentlich immer unsichtbar?

Auf der Suche nach permanent unsichtbaren HTML-Elementen kommen wir zu manch überraschender Erkenntnis. Vieles, das wir für unsichtbar hielten, kann sichbare Effekte haben, anderem hingegen ist auch mit dem größten CSS-Brecheisen (das wäre die content-Eigenschaft) keine optische Nebenwirkung zu entlocken. Als wahrhaft unsichtbar erweisen sich ausschließlich <audio>-Elemente ohne controls-Attribut, <input type="hidden">, <noscript> wenn Scripting aktiviert ist, <form>-Elemente, die direkte Kinder von <table>, <thead>, <tbody>, <tfoot> oder <tr> sind, sowie Inhalte von Replaced Elements (d.h. <source> und <track> in <video> bzw. <audio> und Fallback-Inhalt in unterstützen <video>-, <audio>– und <canvas>-Elementen).

]]> 55:17 -Elemente ohne controls-Attribut, ,