Working Draft

Revision 693: HTML Glücksrad, mit Jens Oliver Meiert

Wir drehen wieder am „Glücksrad [https://workingdraft.de/gluecksrad/]“ – diesmal strikt mit HTML-Vokabular. Schepp hat sich Jens Oliver Meiert [https://meiert.com/] eingeladen (Frontend Dogma [https://frontenddogma.com/], Web Glossary [https://webglossary.info/], Revision 687 [https://workingdraft.de/687/]). MDN-Daten liefern die Zufalls-Themen; wir sezieren Einsatzfälle, Historie, Stolpersteine und moderne Patterns – von id über contenteditable bis hin zu , und dem noch jungen Global-Attribut writingsuggestions. Außerdem streifen wir HTML-Geschichte (HTML 2, XHTML 2), IE-Altlasten (designMode, Drag and Drop), XSLT-Rückbau, AJAX-Begriffsgeschichte und aktuelle Bildformate. SCHAUNOTIZEN [00:03:27] id (MDN) [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id] & Spec: The id attribute [https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute] Historischer Abriss von name-Sprungmarken zu id; warum id als CSS-Selektor teils verpönt wurde (Spezifität), und wann er weiterhin sinnvoll ist (einzigartige Ziele, Relation über for/aria-*). Praktische Kniffe: Attribute-Selektoren, Spezifitäts-Dämpfung via :where(); bei Komponenten Duplikate durch generierte Suffixe/UUIDs vermeiden. [00:15:39] contenteditable [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable], designMode & Rich-Text Use-Cases von Inline-Eingaben bis Comboboxen. Placeholder-Pattern: [contenteditable]:empty::before für Pseudo-Placeholder. contenteditable="plaintext-only" verhindert Stil-Paste. Historische Wurzeln: IE-designMode, vieles später standardisiert. Schepps Blog-Nugget zur IE-Ära: Today the Trident Era ends [https://schepp.dev/posts/today-the-trident-era-ends/]. Und die Liste an historischen CSS Fehler [https://wiki.csswg.org/ideas/mistakes]n. [00:24:36] [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b] und [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i] (sowie /) Warum (Aufmerksamkeitsmarkierung) und (idiomatische/andere Stimme) legitime Semantik haben und nicht bloß „Präsentation“ sind. Wir sprechen über historischen Kontext aus frühen HTML-Spezifikationen; Blick in die alten Spec-Dokumente: W3C HTML Spec (Archiv) [https://www.w3.org/MarkUp/html-spec/html-spec_toc.html]. [00:35:53] [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option], & [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist] Arbeitspferd im Formular: Gruppenbildung via , deaktivierbare Optionen, label-Attribut (ersetzt sichtbaren Inhalt). als unterschätztes Type-Ahead für viele -Typen (Range, Date etc.) – aber Achtung bei tausenden Einträgen (Performance, Match-Heuristiken variieren je nach Browser). Inspiration: „Retropolis“ bei unseren Freunden von Wo wir sind ist vorne [https://wowirsindistvorne.show/retropolis/]. [00:43:40] writingsuggestions [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/writingsuggestions] Noch jung und teils experimentell: steuert Schreibvorschläge („ghost text“) in editierbaren Feldern. Support-Lage: Chromium/WebKit ja, Firefox noch nicht – sinnvoll dort, wo Inline-Completion UX-Gewinn bringt. [00:47:48] XSLT-Rückbau in Browsern Ökosystem-Abhängigkeiten, Wartbarkeit und Security als Gründe; nostalgischer Blick auf XSLT-basierte Transformations-Pipelines („Sliding Doors“, frühe „Transpile“-Ansätze), warum der Rückbau für die meisten Web-Apps heute verkraftbar ist. Mehr dazu in dieser Folge der Igalia Chats [https://www.igalia.com/chats/xslt-liam] [00:52:13] AJAX, XML HttpRequest & Naming Der Begriff „AJAX“ (populär geworden durch Jesse James Garrett 2005 [https://almaer.com/blog/ajax-a-new-approach-to-web-applications]) als Zündfunke für „app-iges“ Web – plus Seitenblick auf noch frühere Publikationen. Für Geschichtsnerds: Internet History Podcast [https://www.internethistorypodcast.com/]. [00:55:37] Bildformate heute: JPEG XL, WebP, AVIF Trade-offs zwischen Decoder-Sicherheit, Multithreading-Decoding, Migrationspfaden (aus JPEG ableitbar) und Browser-Adoption; warum selbst „alte“ Formate wie PNG noch Updates/Use-Cases haben (APNG, Transparenz). Jake Archibald hat zum Thema „progressive Image Rendering“ ein tolles Blogpost verfasst [https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/], in dem auch JPEG XL [https://cloudinary.com/blog/how_jpeg_xl_compares_to_other_image_codecs] vorkommt.

Revision 692: javascript:void(0), mit Manuel Matuzović

In dieser Revision sprechen wir mit unserem Gast Manuel Matuzović [https://www.matuzo.at/] über moderne HTML-Praktiken, alte Muster, die sich hartnäckig halten, und darüber, warum manche Links eigentlich Buttons sein sollten. Dabei tauchen wir tief in Semantik, Barrierefreiheit und die Frage ein, warum bestimmte Patterns – trotz aller Probleme – immer wieder im Web auftauchen. UNSER SPONSOR https://mittwald.de/workingdraft?ref=workingdraft.de 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 [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt! SCHAUNOTIZEN [00:01:45] javascript:void(0) Aufhänger dieser Revision ist ein Muster, das uns seit Jahren immer wieder begegnet: Die verbreitete Nutzung von href="javascript:void(0)" und verwandten Dingen in Links. Wir beklagen, dass dieses Pattern nicht nur technisch fragwürdig ist, sondern auch aus Sicht von Barrierefreiheit, Nutzererwartungen und allgemeiner HTML-Semantik massive Probleme nach sich zieht. Dafür arbeiten wir uns zunächst Schritt für Schritt daran entlang, was einen echten, barrierefreien Link überhaupt ausmacht. Dazu gehören ein

Revision 691: Digitale Nachhaltigkeit – Warum das Web grüner werden muss, mit Dr. Torsten Beyer

In dieser Revision sprechen wir mit Dr. Torsten Beyer [https://dr-beyer.de/], Chemiker und Experte für digitale Nachhaltigkeit, über seinen Weg vom Labor zum grünen Web, die oft übersehenen Umweltkosten des Internets und darüber, wie wir als Webentwickler:innen konkret zur CO₂-Reduktion beitragen können. Wen das Thema weiter interessiert, sollte sich auch die Revision 675: Green Web [https://workingdraft.de/675/] geben. Ein riesen Dank geht raus an Andreas Sander [https://andi1984.dev/] für das Lied über den Working Draft. Könnt ihr am Ende der Sendung hören :) UNSER SPONSOR https://mittwald.de/workingdraft?ref=workingdraft.de 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 [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt! SCHAUNOTIZEN [00:01:55] Vom Chemiker zum Experten für digitale Nachhaltigkeit Torsten kam als Chemiker zur digitalen Nachhaltigkeit. Geboren 1968 bei 323 ppm CO₂ [https://borninppm.com/] – circa als das Internet beim Militär erfunden wurde – beobachtet er seitdem beide Kurven steigen. Wir sprechen darüber, wie Flatrates und „unbegrenzter“ Traffic seit 1969 ein falsches Bewusstsein für Daten schufen. Dazu das Jevons-Paradoxon [https://de.wikipedia.org/wiki/Jevons-Paradoxon]: Speicher wurde drastisch günstiger (vom Commodore 64 zur Mini-SD), aber statt zu sparen, führt das zu Mehrnutzung, die die Einsparungen auffrisst. [00:29:42] Bewusstsein schaffen durch Analyse Torsten gibt einen Überblick über Methoden zur Analyse des CO₂ Fußabdrucks von Websites: * The Green Web Foundation [https://www.thegreenwebfoundation.org/] – Verzeichnis grüner Hoster, freiwillig. Wenn kein Eintrag: Hoster kontaktieren! * Website Carbon [https://www.websitecarbon.com/] – nicht empfehlenswert, fragwürdige Methodik. * Digital Beacon [https://digitalbeacon.co/] – besser, aber Tests nur bis Cookie-Banner. Guter Einstieg. * Log-Analyse – beste Methode für echten Traffic-Impact. Unterschätzt: Laut Imperva Bot Report [https://www.imperva.com/blog/2025-imperva-bad-bot-report-how-ai-is-supercharging-the-bot-threat/] sind 51% des Traffics Bots – steigend durch KI. SEO Soon [https://seosoon.de/ki-bot-check/] zeigt, ob KI-Bots gesperrt sind. [00:47:22] Webseiten-Siegel und ihre Problematik Torsten kritisiert käufliche Siegel, die „Klimaneutrale Website“ propagieren, aber eigentlich nur Bäume pflanzen und eine echte Optimierung und Beurteilung vornehmen. Sein Projekt Web4Nature [https://web4nature.de/] setzt auf messbare Kriterien: nur Websites unter 1 MB erhalten das Siegel. Sogar die allererste Website [https://info.cern.ch/hypertext/WWW/TheProject.html] von 1991 ließe sich um 30% optimieren. Es geht immer besser. [01:05:40] Nachhaltiges Podcasten Auch Podcasts haben einen CO₂-Fußabdruck. Torsten spricht über seinen Podcast Web, But Green! [https://dr-beyer.de/news/podcast.php] und sein Buch. KEINE SCHAUNOTIZEN Beispiel für gute Nachhaltigkeitskommunikation großer Unternehmen: Unilever Sustainability Notice [https://notices.unilever.com/corporate/en/sustainability/] Torstens Artikel: [1] [https://www.websiteboosting.com/magazin/75/nachhaltige-websites-wie-wir-alle-mehr-fuer-die-umwelt-tun-koennen.html], [2] [https://www.notion.so/Digitale-Nachhaltigkeit-2bc0bf8859508089acaec587de5cd67b?pvs=21], [3] [https://www.websiteboosting.com/magazin/87/nachhaltiges-crawlen-von-websites.html], [4] [https://www.websiteboosting.com/magazin/88/der-co2-doc-fragt-was-ist-green-hosting.html]

Revision 690: AI Frontend Generatoren

Hans und Schepp sprechen darüber, wie weit „Vibe-Coding“ im Vergleich zu AI-Assist in der IDE wirklich trägt. Hans bringt sein Experiment mit, dokumentiert im Blogpost [https://www.hansreinl.de/blog/ai-code-generators-frontend-comparison], und wir ordnen ein, wo AI uns Tempo schenkt, wo wir kontrollieren und nachschärfen müssen und warum die Dead Framework Theory [https://aifoc.us/dead-framework-theory/] im Code-Output der Generatoren so sichtbar wird. UNSER SPONSOR https://mittwald.de/workingdraft?ref=workingdraft.de 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 [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt! SCHAUNOTIZEN [00:01:42] AI Code Generators Frontend Comparison [https://www.hansreinl.de/blog/ai-code-generators-frontend-comparison] Als Testbett nutzt Hans wir eine kleine Reader-Web-App („Speak it“), die Webseiten- und PDF-Texte per Web-Speech-API vorliest. Dabei startet er jeweils mit einer kompakten Markdown-Featureliste und lässt daraus ein MVP bauen. Wir vergleichen anschließend, wie gut sich die Apps ausrollen lassen, wie sauber der Code ist und wie viel Nacharbeit bei Accessibility, Security, State-Management und Architektur nötig bleibt. Parallel diskutieren wir „AI-infused Coding“ in der IDE: Da hilft die AI beim Refactoring, beim Verstehen von Brownfield-Code und bei Fleißarbeit, während Vibe-Coding komplette Gerüste hinstellt – die Qualität steht und fällt aber mit Specs, Review und Tests. Bei den Tools landet v0 [https://v0.dev] vorne, vor allem wegen der sehr nahtlosen Integration in das Vercel-Ökosystem: Prompt rein, Code raus, Previews, Deploy, plus Plug-and-Play-Anbindung von Diensten wie Supabase [https://supabase.com] für Auth und Daten und Stripe für Billing. Lovable wirkt stabil, setzt ebenfalls sinnvoll auf Supabase und punktet mit einem europäischen Setup. Replit [https://replit.com] überrascht mit einem Design-First-Flow, bei dem wir erst UI und Flows grob abstecken und danach generieren lassen. In der IDE-Ecke ist Cursor [https://cursor.com] aktuell Hans’ Favorit, während GitHub Copilot [https://github.com/features/copilot] sich mehr wie ein solider Pair-Programming-Assistent für Funktionen und kleine Refactors anfühlt. Claude Code glänzt im Reasoning, bleibt aber – wie alle – auf gute Prompts, klare Ziele und unseren Code-Review angewiesen. Base44 fällt für uns ab, weil Sichtbarkeit und Versionierung ohne größere Subscription eingeschränkt sind. Im Code sehen wir überall das gleiche Muster: React beziehungsweise Next.js mit TypeScript und oft Tailwind. Das ist bequem, beschleunigt Onboarding und führt schnell zu ansehnlichen Ergebnissen, zementiert aber die Stack-Monokultur, die die Dead Framework Theory [https://aifoc.us/dead-framework-theory/] beschreibt. Spannend: v0 erzeugt im Vergleich recht kompakten, fokussierten Output, während andere Generatoren deutlich verboser werden – bei ähnlicher Feature-Abdeckung. Lighthouse-Werte sehen oft gut aus, verleiten aber zur falschen Sicherheit; wir finden typische A11y-Lücken wie fehlende Labels, suboptimale Focus-Flows und zu dezent deklarierte Namen. Unser Fazit bleibt: AI liefert Tempo und Gerüst, aber wir sichern Qualität mit Review, Tests, Monitoring und gezielten Verbesserungen. Preislich bewegen sich viele Angebote um 20–25 Dollar im Monat. Für uns zählt, was wir dafür praktisch bekommen: gute Exporte, nachvollziehbare Diffs, belastbare Integrationen, EU-Hosting-Optionen und die Möglichkeit, bestehende Designsysteme einzubinden. Gerade im europäischen Kontext achten wir auf Datenstandorte und DSGVO-Konformität; mit Azure-gehosteten OpenAI-Modellen lässt sich beispielsweise vollständig in EU-Regionen arbeiten. Unterm Strich nutzen wir Vibe-Coding wie eine Welle: Wir lassen uns Scaffolding, CRUD-Wege und Settings-Screens generieren, steigen bei komplexen Stellen oder übertriebener Abstraktion selbst ein und wechseln dann wieder zurück zur AI, wenn es um Tempo und Variationen geht. Zum Weiterlesen und Nachbauen: Hans’ vollständiger Vergleich steht im Blogpost [https://www.hansreinl.de/blog/ai-code-generators-frontend-comparison]. Die Tools aus der Folge findet ihr unter v0 [https://v0.dev], Replit [https://replit.com], Cursor [https://cursor.com], GitHub Copilot [https://github.com/features/copilot] und Supabase [https://supabase.com]; die Hintergründe zur Stack-Monokultur bündelt die Dead Framework Theory [https://aifoc.us/dead-framework-theory/]. Wir bleiben dran und schauen, wie sich Qualität, Kosten und Integrationen in den nächsten Monaten weiter entwickeln.

Revision 689: React – Heilsbringer oder Höllenmaschine?

Um ein für allemal zu klären, ob React die beste oder die schlimmste Erfindung seit geschnitten Brot ist, luden sich Stefan und Peter den bekennenden React-Ultra Hans-Christian Otto ein! SCHAUNOTIZEN [00:01:11] React Um den eher semibrillianten Artikel React Won by Default [https://www.lorenstew.art/blog/react-won-by-default/] entspann sich eine Pro/Contra-React-Diskussion in unserem Community-Slack [https://draft.community/] (schaut gerne vorbei!), die wir in dieser Revision fortführen. Nach einem Definitionsversuch des Begriffs „React“, der entweder nur die Library oder ein ganzes Ökosystem meinen kann, versuchen wir uns am Herausarbeiten der Vor- und Nachteile. Dass man mit React gigantischen Blödsinn anstellen kann (illustriert durch das Next.js-basierte trumpcard.gov [https://trumpcard.gov]), ist ebenso unbestreitbar wie das verunglückte Design mancher APIs (v.A. useEffect() [https://www.theregister.com/2025/09/18/cloudflare_ddosed_itself/]). Unser Gast argumentiert mit Verve, wie man mit React genau so gut auch Nicht-Blödsinn umsetzen kann, in etwa durch die Wahl eines geeigneten Stacks.