In dieser Revision drehen wir nochmal das Glücksrad – allerdings zum Themenbereich TypeScript und React. Gemeinsam mit unserem Gast Kiki (Hans-Christian Otto) [https://hans-christian-otto.de/], seines Zeichens Paramount Leader von Suora [https://www.suora.com/], picken wir zufällige React- und TypeScript-Themen und arbeiten uns von dort aus tief in Parallelwelten, Typsysteme, Debugging-Philosophie und die Grenzen statischer Analyse vor. Es geht um React DevTools, Web Components, any vs. unknown, TypeScript-Overloads, Decorators und die Frage, warum HTML kaputt sein darf – und vermutlich immer bleiben wird.

[00:03:37] React useDebugValue [https://react.dev/reference/react/useDebugValue] useDebugValue ist ein React-Hook, mit dem sich Zusatzinformationen in den React DevTools anzeigen lassen. Im Kern eine Art strukturierter Debug-Output, der besonders hilft, wenn dieselbe Komponente mehrfach im Tree auftaucht. [00:27:28] Debugging in React & DevTools [https://react.dev/learn/debugging-react] Wir vergleichen klassisches Browser-Debugging mit React-Debugging und diskutieren, warum React eigene DevTools braucht: synthetische Events, virtueller DOM und eine parallele Realität zur Web-Plattform. [00:39:00] Web Components & Custom Elements [https://developer.mozilla.org/en-US/docs/Web/API/Web_components] Exkurs in die Welt der Web Components: Warum Debugging dort oft einfacher ist, weil es keine virtuelle Abstraktion gibt – und was passiert, wenn ein Custom Element nie registriert wird. Spoiler: Der Browser bleibt erstaunlich gelassen. [00:00:00] Kaputtes HTML & Browser-Parsing [https://html.spec.whatwg.org/] Wir diskutieren, warum Browser kaputtes HTML akzeptieren müssen, weshalb XHTML sich nie durchgesetzt hat und warum ein strikt validierender Browser automatisch ein schlechter Browser wäre. [00:00:00] React isValidElement() [https://react.dev/reference/react/isValidElement] Ein eher unbekanntes React-API zur Laufzeitprüfung von React-Elementen. Wir schauen unter die Haube, stolpern über interne Marker wie $$typeof und landen bei Cross-Realm-Problemen. [00:46:26] TypeScript any vs. unknown [https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-unknown-type] Ein zentrales Thema der Folge: any als kompletter Opt-out aus dem Typsystem versus unknown als sichere Grenze. Wir erklären Typ-Hierarchien und warum unknown fast immer die bessere Wahl ist. [00:00:00] TypeScript: unknown als Sicherheitsgrenze [https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#unknown-on-catch-variables] Wir sprechen über reale Einsatzszenarien, etwa bei fetch(), und warum ein sauberer Typ-Reset oft sinnvoller ist als das blinde Akzeptieren von any. [00:48:56] TS-Reset & Fetch-Typen [https://github.com/total-typescript/ts-reset] Ein Community-Projekt, das TypeScript-Defaults bewusst verschärft. Wir diskutieren Chancen, Risiken und warum solche Tools sowohl helfen als auch schaden können. [00:00:00] TypeScript Function Overloads [https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads] Ein Pattern für robuste APIs: nach außen präzise Typen für gute Autocompletion, nach innen unknown für saubere Validierung. Besonders relevant für Library-Autor:innen. [01:23:42] TypeScript Decorators [https://www.typescriptlang.org/docs/handbook/decorators.html] Wir sprechen über Legacy-Decorators, Standard-Decorators und warum "experimentalDecorators" oft mehr Probl

Revision 694: React- & TypeScript-Glücksrad, mit Hans-Christian Otto

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 <option>, <datalist> 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] <b> [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b] und <i> [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i] (sowie <strong>/<em>) Warum <b> (Aufmerksamkeitsmarkierung) und <i> (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] <option> [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option], <optgroup> & <datalist> [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist] Arbeitspferd im Formular: Gruppenbildung via <optgroup>, deaktivierbare Optionen, label-Attribut (ersetzt sichtbaren Inhalt). <datalist> als unterschätztes Type-Ahead für viele <input>-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 Sc

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

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.

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 <a>-Element, ein gültiges href-Attribut und ein klarer Accessible Name [https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/]. Erst dadurch entstehen Fokussierbarkeit, Tastaturaktivierung, sinnvolle Screenreader-Ausgaben, das korrekte Verhalten in Linklisten, die bekannten Linkzustände und das erwartete Interaktionsmodell. Alles, was davon abweicht, bricht die Erwartungen der Nutzenden – besonders sichtbar wird das bei Links, die eigentlich Buttons darstellen sollen.

javascript:void(0) sehen wir zudem als ein typisches Beispiel für Cargo-Kult: Ein historisches Muster, das weiterlebt, obwohl kaum jemand noch weiß, wozu es ursprünglich gedacht war. Technisch betrachtet evaluiert eine solche URL einfach JavaScript – im Fall von void wird allerdings bewusst undefined zurückgegeben, also „nichts“.

Wir benennen die vielen praktischen Probleme, die solcher Code hervorruft: Kontextmenüs bieten unsinnige Optionen an, Mittelklicks öffnen leere Tabs, Screenreader kündigen Elemente als Links an, die sich gar nicht wie Links verhalten, Tastaturnutzende stoßen auf widersprüchliche Aktivierungsmuster und in Listen assistiver Technologien erscheint „Navigierbares“, das kein Ziel hat. Wir diskutieren, wie solche Muster häufig entstehen – sei es aus historisch schwer zu stylenden Buttons, aus Einschränkungen in Component-Libraries, aus unglücklichen Framework-Abstraktionen oder schlicht aus fehlendem Basiswissen über HTML.

Aus dieser Perspektive wird klar: In den allermeisten Fällen wäre ein echtes <button>-Element die richtige Wahl. Moderne Browser machen das Styling per all: unset; und wenigen Ergänzungen längst unkompliziert. Wir sprechen darüber, wie hybride Komponenten sinnvoll funktionieren können, warum überflüssige Rollen, Tabindex-Werte oder ARIA-Attribute eher schaden als helfen, und wie man mit einfachen Debug-Strategien – etwa Selektoren wie a[href^="javascript:"] oder Werkzeugen wie a11y.css [https://ffoodd.github.io/a11y.css/] – problematische Stellen sichtbar machen kann.

Im weiteren Verlauf streifen wir verwandte Themen, etwa die alte Debatte um Cursor-Darstellungen bei Buttons, Überlegungen rund um target="_blank" und seine UX-Probleme (Warum target=“_blank“ nervt [https://www.peterkroener.de/warum-target_blank-nervt-und-verboten-gehoert/]), sowie die Frage, welche Rollen historische Mechanismen wie <area>-Elemente heute noch spielen können (MDN [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/area]). Wir stellen fest, dass viele Entwickler*innen HTML fast nur noch durch die Framework-Brille wahrnehmen– und dass genau diese Abstraktionsschichten es erschweren, zu verstehen, was die Basiselemente der Plattform eigentlich können.

Eine zentrale Erkenntnis des Gesprächs lautet: Gu

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

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.de/] für das Lied über den Working Draft. Könnt ihr am Ende der Sendung hören :)


Unser Sponsor



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du?
Geh jetzt auf mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt!

Schaunotizen

[00:01:11] Vom Chemiker zum Experten für digitale Nachhaltigkeit Torsten kam als Chemiker zur digitalen Nachhaltigkeit. Geboren 1968 bei 363 ppm CO₂ [https://www.statista.com/statistics/1091926/atmospheric-concentration-of-co2-historic/] – 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:42:18] 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 si

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

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



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.

I

Revision 690: AI Frontend Generatoren

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.

Revision 689: React – Heilsbringer oder Höllenmaschine?

Diese Revision greifen wir eine Hörerfrage [https://podcasts.social/@HaraldKi@nrw.social/115407170348504827] zu Browser-Engine-Diversity auf und ordnen sie gemeinsam ein: Wie steht es um Vielfalt, Governance und Einfluss großer Konzerne auf Blink, WebKit und Gecko? Wie steht es um die Zukunft von Mozilla? Und wir gehen den praktischen Fragen nach – von Marktanteilen über Contribution-Realität bis hin zu Modellen, wie Features trotzdem in alle Browser kommen.

Wir sind auf der T3CON

Am 25. November sind wir auf dem Community-Day der TYPO3 Conference T3CON in Düsseldorf. Schaut auch gerne vorbei! Mehr Infos auf t3con.typo3.com [https://t3con.typo3.com/?ref=workingdraft.de].

Schaunotizen

[00:01:11] Browser-Engine-Diversity In der Folge schildern wir zunächst die Ausgangsfrage: Was passiert, wenn eine Engine ausfällt? Und ist es überhaupt möglich, eine neue Engine „from Scracth“ zu bauen? [https://podcasts.social/@HaraldKi@nrw.social/115407170348504827].

Wir sprechen über die faktische Kontrolle bei Blink, WebKit und Mozilla [https://bkardell.com/blog/2023-Mid-Season-Power-Rankings.html], vergleichen das Governance-Modell mit dem Linux-Kernel [https://lwn.net/Articles/915435/] und diskutieren, warum „Open Source“ auf dem Papier nicht automatisch breite Mitbestimmung bedeutet.

Wir beleuchten die Interop-Initiative [https://github.com/web-platform-tests/interop/tree/main], den Einfluss von Firmeninteressen auf Prioritäten und warum externe Beiträge in der Praxis selten sind – trotz positiver Beispiele. Dazu zählen Igalia [https://www.igalia.com/] als Dienstleister für Implementierungen quer durch die Engines sowie Yoav Weiss [https://blog.yoav.ws/posts/so_you_want_to_push_a_web_platform_feature/]‚ Weg zur Umsetzung des <picture>-Elements in Blink [https://www.indiegogo.com/it/projects/yoavweiss/picture-element-implementation-in-blink] bis hin zu seinen aktuellen Arbeiten an Speculation Rules in WebKit [https://www.youtube.com/watch?v=VEYxyNxfqG8].

Wir schauen auf Marktanteile [https://gs.statcounter.com/browser-market-share/all/germany#monthly-201510-202510], reden über iOS-Restriktionen und darüber, warum wir uns eher regulatorische Einbußen bei Apple vorstellen können, als ein „Firefox geht hops“.

Zum Thema neue Engines fallen uns Servo [https://www.igalia.com/chats/servo] und Ladybird [https://www.igalia.com/chats/ladybird] ein: technisch überhaupt erst machbar dank präziser Specs und Tests – „nur sehr viel Arbeit“. Aber die Frage nach dem nachhaltigen Geschäftsmodell bleibt.

Am Ende geben wir konkrete Tipps: Issues schreiben, sich in Standards einbringen, gezielt Implementierungen finanzieren – und dabei die eigene Zeit trotzdem nicht verschenken.

Revision 688: Browser-Engine-Diversity

In dieser Revision haben wir Webentwickler, Engineering-Manager und Autor Jens Oliver Meiert [https://meiert.com/] (Mastodon [https://mas.to/@j9t] / Bluesky [https://bsky.app/profile/meiert.com] / LinkedIn [https://www.linkedin.com/in/meiert/]) zu Gast und besprechen, weshalb HTML-Konformität die Basis professioneller Frontend-Arbeit ist, wo Validatoren und Tooling heute klemmen, wie optionales Markup und sinnvolle Minifizierung echte Gewinne bringen – und weshalb sauberes HTML die Voraussetzung bleibt, bevor wir über Semantik, Accessibility und DX diskutieren.

Schaunotizen

[00:01:10] 0 of the Global Top 200 Websites Use Valid HTML [https://meiert.com/blog/html-conformance-2025/] Anlass unseres Gesprächs ist Jens´ alljährlich stattfindende Datenerhebung zu der HTML-Konformität der Top 200 Webseiten. Das Ergebnis ist Jahr für Jahr niederschmetternd. In 2025 schafft es keine der getesteten Webseiten keine HTML-Fehler zu haben. Wir vergleichen Beispiele mit wenigen Fehlern à la Wikipedia mit Seiten, die Hunderte Issues auf der Startseite sammeln, und was das als Proxy über Codequalität verrät.

Wir reden über die Tücken von Tools und Validatoren, über False Positives, neue Elemente wie <search> und darüber, wieso die Entfernung des ehemaligen WCAG-Kriteriums „Parsing“ [https://www.tpgi.com/understanding-the-removal-of-4-1-1-parsing-in-wcag-2-2/] zwar die Zugänglichkeit nicht torpediert, die Disziplin „valide liefern“ aber trotzdem nicht optional macht.

Wir schauen auf HTML-Minifizierung in der Praxis, auf Projekte wie den aktiven Fork von HTML-Minifier [https://github.com/terser/html-minifier-terser], und darauf, wie viel Performance schon dadurch möglich wird, dass wir Defaults nutzen und Überflüssiges streichen. Kurz: Wir plädieren dafür, HTML wieder ernst zu nehmen – als Sprache, die wir prüfen, optimieren und bewusst schreiben, bevor wir über Semantik-Feinschliff, Accessibility und DX diskutieren.

Links

Blog von Jens Oliver Meiert [https://meiert.com/en/] Seine Essays und Forschungsnotizen zu HTML, CSS, Standards und Professionalität in der Webentwicklung liefern den Tiefgang zur Folge. Frontend Dogma [https://frontenddogma.com/] Jens’ kuratierte Quelle und Archiv für Frontend-Artikel – ideal, um Trends, Historie und Handwerk im Blick zu behalten. W3C Markup Validator [https://validator.w3.org/] Unser Referenzwerkzeug, um HTML-Konformität zu prüfen und Fehler schnell sichtbar zu machen. WHATWG HTML Standard [https://html.spec.whatwg.org/] Die maßgebliche, lebende Spezifikation für HTML – inklusive Neuerungen wie dem <search>-Element. Understanding the Removal of 4.1.1 Parsing in WCAG 2.2 [https://www.tpgi.com/understanding-the-removal-of-4-1-1-parsing-in-wcag-2-2/] Hintergrund, warum die WCAG das alte Kriterium 4.1.1 gestrichen hat und was das für den Zusammenhang zwischen Validität und Zugänglichkeit bedeutet. WebAIM Million [https://webaim.org/projects/million/] Jährliche Bestandsaufnahme von Accessibility-Fehlern auf den Top-Websites – gut als Vergleich zu Validierungsbefunden geeignet. HTML Minifier Next [https://github.com/j9t/html-minifier-next] Aktiv gepflegter Fork des ursprünglichen HTML-Minifiers, mit dem wir optionales Markup und Defaults konsequent in kleinere, schnellere Dokumente übersetzen.

Revision 687: Valides HTML, mehr als Liebhaberei?

Alle paar Monate setzen sich Peter und Schepp für eine neue Runde „Neues in den Browsern“ zusammen: Was hat Chrome gepusht, wo hat Safari nachgezogen, was ist frisch in Firefox – und vor allem: Was davon ist heute schon praxistauglich? Wir sortieren Release Notes, testen Features im Alltag und teilen konkrete Einsatzideen aus echten Projekten. In dieser Ausgabe geht’s u. a. um den IntersectionObserver mit scrollMargin, präziseres Rechnen mit Math.sumPrecise, explizites Ressourcen-Management, Scheduling für bessere INP-Werte, sowie Dialog/Popover-Feinschliff, @starting-style, View Transitions und eine schnelle Lightning-Round am Schluss mit kleinen, feinen Browser-Updates.

Unser Sponsor



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du?
Geh jetzt auf mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt!

Schaunotizen

[00:03:25] IntersectionObserver: scrollMargin in allen Browsern [https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/scrollMargin] 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 [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 [https://www.youtube.com/watch?v=m6ID-dv2f34], Floating Point visually explained [https://fabiensanglard.net/floating_point_visually_explained/]. [00:29:07] Explicit Resource Management (using, Symbol.dispose) [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Resource_management] 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]

Revision 686: Neues in den Browsern

Sobald „TypeScript“ im Titel steht, ist das quasi die Lizenz zum Abschweifen. Schnallt euch also an, die Alten Herren nehmen euch mit in den statisch typisierten Mindpalast.

Unser Sponsor



Ende Oktober ist es so weit: Die programmier.con lädt ein – und zwar nach Bad Nauheim, nördlich von Frankfurt! Zwei Tage, zwei Tracks, ein Abendprogramm – und jede Menge praxisnahe Talks zu Webentwicklung und angewandter AI.

Von Svelte über lokale LLMs bis zu Developer Experience, A/B-Testing, Security und AI-Agenten: Die programmier.con bringt die Community zusammen – und das auf Augenhöhe. Die meisten Vorträge sind auf Deutsch, internationale Highlights wie Svelte-Macher Rich Harris inklusive.

🎟 Dank Sponsoring gibt’s die Tickets aktuell schon ab 249 € (zzgl. MwSt.).

👉 Alle Infos und Tickets auf con.programmier.bar [https://www.programmier.bar/konferenzen/programmier-con-web-ai-edition-2025?ref=workingdraft.de]

Schaunotizen

[00:01:35] TypeScript 5.9 [https://devblogs.microsoft.com/typescript/announcing-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.

Revision 685: TypeScript 5.9

Der wöchentliche Podcast für Webdesigner:innen und -entwickler:innen. Supported
uns bei Patreon: https://patreon.com/workingdraft