Working Draft

Revision 706: v0 und Vercel, mit Leo Reuter

Tue, 31 Mar 2026 06:00:02 +0000

In dieser Revision sprechen wir mit Leo Reuter von Vercel (LinkedIn / E-Mail) über den Wandel von Deployment- und Hosting-Plattformen hin zu AI-gestützten Entwicklungswerkzeugen.

Ausgangspunkt ist dabei unsere bisherige Beschäftigung mit Vibe Coding und der Frage, wie sich solche Werkzeuge in reale Entwicklungsprozesse einfügen, statt nur schnelle Demos und Prototypen zu erzeugen.

Gemeinsam schauen wir uns an, wo v0 heute steht, wie sich das Tool von einem Generator für einzelne React-Komponenten zu einem System für komplette Anwendungen entwickelt hat und warum Themen wie bestehende Codebasen, Designsysteme, Branch-Workflows und Skills inzwischen wichtiger sind als das bloße Erzeugen von UI aus natürlicher Sprache.

[00:02:48] v0 und Vercel: Leo stellt zunächst seinen Weg vom Frontend-Engineering über langfristige Projektarbeit bis zu seiner Rolle als Solution Architect bei Vercel vor. Von dort aus steigen wir in die Geschichte von Next.js und Vercel ein: Ausgangspunkt war der Wunsch nach mehr Guardrails im React-Ökosystem, etwa für Routing und Framework-Konventionen, und später die Frage, wie sich solche Anwendungen ohne den üblichen DevOps-Aufwand produktionsreif deployen lassen. Wir sprechen darüber, wie Vercel genau diese Lücke gegenüber klassischen Hyperscalern geschlossen hat und warum schnelle Rollbacks, Preview-Deployments und einfache Infrastruktur bis heute ein wichtiges Argument sind.
[00:09:12] Von Komponenten zu kompletten Anwendungen: Danach geht es um die AI-Produkte rund um Vercel und vor allem um v0. Leo beschreibt, wie intern zunächst mit frühen GPT-Modellen experimentiert wurde, um einzelne Komponenten zu erzeugen, und wie daraus Schritt für Schritt ein Tool entstand, das heute komplette Full-Stack-Anwendungen aus natürlicher Sprache erzeugen kann. Wir diskutieren, was inzwischen alles möglich ist, von Rapid Prototyping über Datenbank- und Payment-Anbindungen bis hin zu realistischen Produktideen, und wo die Grenze zwischen schneller Visualisierung und belastbarer Software verläuft.
[00:12:50] Vom Prototyp zur produktiven Anwendung: Ein Schwerpunkt der Folge ist die Frage, was „production-ready“ in diesem Kontext überhaupt bedeutet. Leo erklärt, dass v0 lange vor allem für schnelles Prototyping genutzt wurde, der Übergang in produktive Systeme aber oft daran scheiterte, dass Designsysteme, Komponenten oder der eigentliche Tech-Stack nicht übereinstimmten. Genau deshalb spielt der Git-Import inzwischen eine so große Rolle: Bestehende Projekte lassen sich in v0 laden, dort bearbeiten und über Branches und Pull Requests wieder in den normalen Entwicklungsprozess zurückführen. Wir vergleichen diesen Browser-zentrierten Ansatz mit lokalen AI-Coding-Tools und arbeiten heraus, warum v0 gerade für weniger technische Rollen interessant ist, die nicht erst lokale Entwicklungsumgebungen, Environment-Variablen und Build-Prozesse aufsetzen wollen.
[00:17:31] Architektur, Laufzeit und Tech-Stack-Fragen: Im weiteren Verlauf sprechen wir über die technische Architektur hinter v0. Leo beschreibt den Wechsel von einer browserbasierten Laufzeit hin zu Micro-VMs mit vollständiger Entwicklungsumgebung in einer Sandbox, was mehr Stabilität und vor allem mehr Offenheit gegenüber verschiedenen Frameworks ermöglichen soll. Damit wird v0 nicht nur für bestimmte Standard-Setups, sondern perspektivisch auch für andere bestehende Projekte interessanter. In diesem Zusammenhang reden wir auch darüber, warum sich im AI-Umfeld ein Stack aus TypeScript, React, Next.js und Tailwind CSS so stark durchgesetzt hat: Einerseits, weil Modelle mit Utility-Klassen direkt im Markup besser zurechtkommen, andererseits, weil genau dieser Stack in den öffentlichen Trainingsdaten besonders stark vertreten ist.
[00:25:52] Composite Models, Planning und Designsy steme: Außerdem werfen wir einen Blick darauf, wie v0 intern arbeitet. Leo erklärt, dass hinter v0 kein eigenes Foundation Model steckt, sondern ein Composite-Ansatz, bei dem verschiedene Modellteile zusammenspielen, darunter auch ein eigener Auto-Fixer für Korrekturen. Wir sprechen über agentisches Arbeiten, über Planning Modes und darüber, warum es gerade bei größeren Brownfield-Projekten sinnvoll ist, Features erst gemeinsam mit dem Tool zu planen, bevor Code erzeugt wird. Von dort aus landen wir fast zwangsläufig bei Designsystemen: Heute lassen sich in v0 bereits Themes und Tokens hinterlegen, künftig soll aber vor allem die Wiederverwendung echter Unternehmens-Komponenten deutlich besser werden. Genau das ist für größere Organisationen spannend, die bestehende Component Libraries zusammenbringen müssen und vermeiden wollen, dass AI-generierter Code zwar ähnlich aussieht, aber nicht auf den tatsächlich verwendeten UI-Bausteinen basiert.
[00:49:16] Skills, Demokratisierung und die Rolle von Entwicklerinnen und Entwicklern: Zum Ende der Folge geht es um Skills als wiederverwendbares Wissen für Agenten. Leo erklärt, wie Markdown-basierte Skills zusätzlichen Kontext bereitstellen können, ohne dauerhaft das gesamte Kontextfenster zu belegen, und wie sich damit Best Practices oder domänenspezifisches Wissen in Tools einspeisen lassen. Von dort aus diskutieren wir die größere Frage, was solche Werkzeuge für den Beruf bedeuten. Unsere gemeinsame Stoßrichtung ist dabei klar: Nur weil mehr Menschen Software erzeugen können, verschwindet Softwareentwicklung nicht. Vielmehr verschieben sich Anforderungen und Werkzeuge, ähnlich wie früher bei Browser-Hacks, Test-Setups oder Designsystemen. Wer sich mit den neuen Möglichkeiten auseinandersetzt, hat eher Vorteile, während Verweigerung gegenüber diesen Veränderungen langfristig problematischer sein dürfte als der Einstieg von Junior-Entwicklerinnen und -Entwicklern in eine AI-geprägte Arbeitswelt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 705: Browser-News-Roundup

Tue, 24 Mar 2026 06:59:57 +0000

Nach rund 20 Wochen Pause haben wir uns mal wieder zusammengesetzt und durch die aktuellen Browser-Releases gewühlt. Diesmal haben uns vor allem Firefox und Safari angeschaut, während Chrome eher im Hintergrund mitlief.

Dabei sind wir über eine ganze Reihe spannender Neuerungen gestolpert – von großen CSS-Features über neue APIs bis hin zu kleineren, aber wichtigen Verbesserungen im Detail. Wir gehen die Highlights durch und diskutieren, was davon wirklich relevant ist und wo noch Fragen offen bleiben.

Schaunotizen

[00:03:39] Anchor Positioning wird interoperabel: Mit Anchor Positioning ist ein lange erwartetes CSS-Feature jetzt in allen Browsern angekommen. Es erlaubt, Elemente direkt relativ zu anderen Elementen zu positionieren – etwa für Popovers, Tooltips oder Dropdowns – ohne Wrapper-Hacks oder komplexes JavaScript. Der Browser übernimmt dabei auch das Umschalten von Positionen, wenn Inhalte am Viewport-Rand abgeschnitten würden. Besonders hilfreich ist der Artikel von Temani Afif, der typische Edge Cases beschreibt. Ergänzend verweisen wir auf einen Talk von Bramus van Damme, der sich ausführlich mit dem Feature beschäftigt.
[00:30:27] CSS Module Scripts in Firefox: Firefox unterstützt nun ebenfalls CSS Module Scripts, sodass Styles direkt über ECMAScript-Module importiert werden können. Das ermöglicht neue Patterns für komponentenbasiertes Arbeiten, etwa in Kombination mit adoptedStyleSheets. Gleichzeitig diskutieren wir die Auswirkungen auf Performance und Architektur, insbesondere bei hybriden Ansätzen wie „Islands of Reactivity“, wo klassische Stylesheets und modulbasierte Styles zusammenkommen.
[00:47:09] Navigation API und URL Pattern API: Die Navigation API ist jetzt auch in Firefox verfügbar und ersetzt die alte History API durch ein moderneres, eventbasiertes Modell. Navigationen können abgefangen, kontrolliert und mit eigenen Logiken versehen werden. Zusammen mit URL Pattern Matching entsteht so eine solide Grundlage für clientseitiges Routing ohne Frameworks. Die API ist Teil der Interop-Bemühungen, wie sie etwa im Interop 2026-Programm definiert sind.
[00:51:49] Customizable Select und neue Form Controls: Safari bringt Fortschritte bei anpassbaren Form-Controls. Das -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.
[00:43:40] 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
[00:52:13] AJAX, XML HttpRequest & Naming: Der Begriff „AJAX“ (populär geworden durch Jesse James Garrett 2005) als Zündfunke für „app-iges“ Web – plus Seitenblick auf noch frühere Publikationen. Für Geschichtsnerds: Internet History Podcast.
[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, in dem auch JPEG XL vorkommt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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

Tue, 09 Dec 2025 06:59:51 +0000

In dieser Revision sprechen wir mit unserem Gast Manuel Matuzović ü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

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

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

Schaunotizen

[00: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 -Element, ein gültiges href-Attribut und ein klarer Accessible Name. 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

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

Tue, 02 Dec 2025 18:44:28 +0000

In dieser Revision sprechen wir mit Dr. Torsten Beyer, 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 geben.

Unser Sponsor

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₂ – 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: 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 – Verzeichnis grüner Hoster, freiwillig. Wenn kein Eintrag: Hoster kontaktieren!
Website Carbon – nicht empfehlenswert, fragwürdige Methodik.
Digital Beacon – besser, aber Tests nur bis Cookie-Banner. Guter Einstieg.
Log-Analyse – beste Methode für echten Traffic-Impact.

Unterschätzt: Laut Imperva Bot Report sind 51% des Traffics Bots – steigend durch KI. SEO Soon 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 setzt auf messbare Kriterien: nur Websites unter 1 MB erhalten das Siegel.

Sogar die allererste Website 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! und sein Buch.

Keine Schaunotizen

Beispiel für gute Nachhaltigkeitskommunikation großer Unternehmen: Unilever Sustainability Notice
Torstens Artikel: [1], [2], [3], [4]

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 690: AI Frontend Generatoren

Tue, 25 Nov 2025 06:59:55 +0000

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, und wir ordnen ein, wo AI uns Tempo schenkt, wo wir kontrollieren und nachschärfen müssen und warum die Dead Framework Theory im Code-Output der Generatoren so sichtbar wird.

Unser Sponsor

Schaunotizen

[00:01:42] 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 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 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 ü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 aktuell Hans’ Favorit, während GitHub 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 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. Die Tools aus der Folge findet ihr unter v0, Replit, Cursor, GitHub Copilot und Supabase; die Hintergründe zur Stack-Monokultur bündelt die Dead Framework Theory. Wir bleiben dran und schauen, wie sich Qualität, Kosten und Integrationen in den nächsten Monaten weiter entwickeln.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 689: React – Heilsbringer oder Höllenmaschine?

Wed, 19 Nov 2025 06:59:48 +0000

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 entspann sich eine Pro/Contra-React-Diskussion in unserem Community-Slack (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), ist ebenso unbestreitbar wie das verunglückte Design mancher APIs (v.A. useEffect()). 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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 688: Browser-Engine-Diversity

Tue, 11 Nov 2025 06:59:36 +0000

Diese Revision greifen wir eine Hörerfrage 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.

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

Wir sprechen über die faktische Kontrolle bei Blink, WebKit und Mozilla, vergleichen das Governance-Modell mit dem Linux-Kernel und diskutieren, warum „Open Source“ auf dem Papier nicht automatisch breite Mitbestimmung bedeutet.

Wir beleuchten die Interop-Initiative, den Einfluss von Firmeninteressen auf Prioritäten und warum externe Beiträge in der Praxis selten sind – trotz positiver Beispiele. Dazu zählen Igalia als Dienstleister für Implementierungen quer durch die Engines sowie Yoav Weiss‚ Weg zur Umsetzung des -Elements in Blink bis hin zu seinen aktuellen Arbeiten an Speculation Rules in WebKit.

Wir schauen auf Marktanteile, 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 und 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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 687: Valides HTML, mehr als Liebhaberei?

Tue, 04 Nov 2025 06:59:21 +0000

In dieser Revision haben wir Webentwickler, Engineering-Manager und Autor Jens Oliver Meiert (Mastodon / Bluesky / LinkedIn) 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

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

und darüber, wieso die Entfernung des ehemaligen WCAG-Kriteriums „Parsing“ 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, 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.

Revision 686: Neues in den Browsern

Tue, 28 Oct 2025 06:59:19 +0000

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

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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 685: TypeScript 5.9

Tue, 21 Oct 2025 06:59:38 +0000

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.

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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 684: Ecosystem Performance (e18e)

Tue, 14 Oct 2025 06:00:13 +0000

Diese Revision plaudern wir mit Alexander Lichter (LinkedIn / Mastodon) und Ulrich-Matthias „Ulima“ Schäfer (LinkedIn) über Ecosystem Performance, kurz „e18e“: Warum es sich lohnt, das JavaScript-Ökosystem aufzuräumen, wie die Community organisiert ist und wo jede:r sofort mitmachen kann.

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.

Revision 683: ARIA-Glücksrad

Tue, 07 Oct 2025 06:59:41 +0000

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

) und wagen einen Blick nach vorn mit dem brandneuen aria-brailleroledescription aus WAI-ARIA 1.3.

Schaunotizen

[00:19:52] aria-placeholder: Entspricht inhaltlich dem HTML-placeholder – verschwindet also, sobald Nutzer:innen tippen. In der Praxis deshalb eher nicht verwenden: wichtige Hinweise gehören dauerhaft sichtbar neben/unter das Feld. Als Notnagel kann der Placeholder in der Accessible-Name-Ermittlung herangezogen werden, falls kein Label vorhanden ist (trotzdem immer ein richtiges setzen). Möglicher Spezialfall: contenteditable. Weiterführend: HTML placeholder, Accessible Name Computation.
[00:27:58] aria-details & ariaDetailsElements (DOM): Verknüpft ein Widget mit einer längeren, „reichen“ Zusatzbeschreibung (z. B. FAQ-Inhalt, Größentabelle, Bildbeschreibung). Anders als aria-describedby beeinflusst aria-details nicht den Accessible Name; Screenreader können die Details kontextuell anbieten. Über die DOM-Property element.ariaDetailsElements lässt sich die referenzierte(n) Beschreibung(en) als Elemente abrufen (nützlich für Tests/Tooling). Wichtig: Informationen auch visuell zugänglich machen! Weiterführend: aria-describedby, aria-labelledby, aria-description.
[00:41:36] aria-posinset & aria-setsize: Für „Teilmengen“ großer Sets (virtuelle Listen/Tabellen, Pagination): aria-setsize gibt die Gesamtzahl der Elemente an (falls unbekannt: -1), aria-posinset markiert die Position des jeweils sichtbaren Items. Typische Anwendung bei endlosem Scrollen oder chunkweisem Nachladen („250 von 3000 geladen“). Setzt man auf den einzelnen Listeneinträgen/Zeilen; die Information landet zuverlässig im Accessibility Tree. Weiterführend: listitem role, row role.
[00:52:48] aria-modal: Kennzeichnet einen modalen Dialog (meist mit role="dialog" oder nativem ): Inhalte außerhalb sind für Assistive Technologien „inert“ also deaktiviert, der Fokus bleibt im Dialog. Gute Praxis: Dialog immer beschriften (aria-labelledby), eine kurze Erklärung mit aria-describedby verknüpfen, Fokus beim Öffnen auf ein sinnvolles Start-Ziel setzen (nicht zwingend das erste Input). Bei modalen Dialogen beginnt die Überschriftenhierarchie sinnvoll erneut (z. B. H1 im Dialog). Für die visuelle/Pointer-Sperre der Seite am besten das native mit .showModal() verwenden (der Browser inertet den Rest). Weiterführend: , inert, WAI-ARIA APG: Dialog (Modal) Pattern.
[01:06:44] aria-brailleroledescription (neu in WAI-ARIA 1.3): Liefert eine speziell für Refreshable Braille Displays geeignete, kurze Rollenbeschreibung (z. B. Abkürzungen wie „BTN“ statt „Button“). Wird von AT/Plattform-APIs ausgewertet; im Markup sparsam und nur mit etablierten, verständlichen Kürzeln einsetzen. Ergänzt die bestehende Rollenkommunikation (ähnlich zu aria-roledescription, aber gezielt für Braille-Ausgaben). Weiterführend: WAI-ARIA 1.3: aria-brailleroledescription, aria-roledescription.

Revision 682: Nuxt 4 und die Akquisition von NuxtLabs

Tue, 30 Sep 2025 06:59:33 +0000

Nuxt 4 markiert einen wichtigen Meilenstein für das populäre Vue-Framework. Obwohl das Release keine großartigen Breaking Changes mitbringt, steckt unter der Haube viel Neues, das den Workflow und die Performance nachhaltig verbessern soll.

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.

Revision 681: JSCraftCamp – Blaupause für Community-Events

Tue, 23 Sep 2025 06:59:00 +0000

In dieser Folge nehmen wir euch mit hinter die Kulissen des JSCraftCamp – einer der sympathischsten Community-Konferenzen im deutschsprachigen Raum. Gemeinsam mit den Organisatoren Wolfram Kriesing und Jörn Bernhardt sprechen wir über das Konzept, die Organisation und was das Event so besonders macht.

Schaunotizen

[00:01:03] Das JSCraftCamp

Wie einleitend erwähnt, sprechen wir in dieser Folge mit Wolfram und Jörn über das JSCraftCamp – ein kostenloses Barcamp für JavaScript-Interessierte, das seit 2016 jährlich in München stattfindet. Wir erfahren, wie sich das Event über die Jahre entwickelt hat, warum es sich wie ein Klassentreffen anfühlt und wie neue Teilnehmende durch Pull Requests über GitHub direkt in die Community einsteigen.

Wir reden darüber, wie das Orga-Team die Sessions plant (Spoiler: gar nicht – das machen alle zusammen vor Ort, siehe Sessionplan), wie neun parallele Tracks trotzdem überschaubar bleiben und warum es keine festen Themenvorgaben gibt. Auch Themen abseits von JavaScript, wie CSS, Projektmanagement oder das Programmieren mit Kindern, sind willkommen.

Wolfram und Jörn geben Einblicke in ihre GitHub-basierte Orga-Struktur, sprechen über Herausforderungen bei der Sponsorensuche, Nachhaltigkeit beim Catering und warum veganes Mittagessen alle glücklich macht. Außerdem berichten sie von ihren Ideen zur besseren Inklusion und Diversität, von spontanen Sessions mit Kindern, Kaffee-Fails, T-Shirt-Verteilung per Motivationstrick – und wie jede:r ihr Format einfach forken kann.

Revision 680: TypeScript goes native!

Tue, 16 Sep 2025 06:59:09 +0000

Stefan und Peter geben ihre Einschätzungen rund um das Rewrite des TypeScript-Compilers zum besten!

Unser Sponsor

Schaunotizen

[00:02:03] TypeScript goes native!: TypeScript bekommt einen Rewrite in Go und nach der Veröffentlichung der ersten Previews sehen wir Besprechungsbedarf. Wir diskutieren, ob und unter welchen Umständen ein Komplett-Rewrite sinnvoll ist und ob Go eine bessere Wahl als denkbare Alternativen wie Rust oder C# ist. Dabei sprechen wir unter anderem über die Limitierungen von JavaScript-Tools unter heutigem Umständen, XXL-Enums, Effekte auf andere Tools aus dem TS-Universum (u.A. Deno, Bun und Supabase) und Perspektiven für neue TypeScript-Features in der mittelfernen Zukunft..

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 679: Hackerkiste Augsburg

Fri, 12 Sep 2025 06:59:16 +0000

In dieser Folge sprechen wir mit Andreas Kottre (CEO & Technical Lead bei typedigital) & Tim Olbrich (Geschäftsführer und Inhaber der Bitory GmbH) von der Hackerkiste Augsburg, einem einzigartigen Event, das seit 2017 regelmäßig die Web- und Tech-Community zusammenbringt. Wir tauchen ein in das besondere Setting: eine ehemalige Siemens-Halle, die zum kleinen Festival-Dorf mit Plaza, weitläufigem Gelände, großen Stages und verwinkelten Bereichen wurde. Außerdem ergründen wir den barcampartigen Rahmen mit 10-Min-Talks, Call for Papers, First-Time-Speakers-Betreuung – und am Ende erwartet euch eine grandiose Verlosung!

Schaunotizen

[00:00:58] Hackerkiste Augsburg

Inhaltlich bietet die Hackerkiste ein volles Programm: Rund dreißig Speaker:innen und ein Dutzend Barcamp-Sessions locken jedes Jahr etwa dreihundert Teilnehmende nach Augsburg. Das Format ist bietet mehrere Stages, inklusive ausführlichen Vorträgen auf den großen Stages und Lightning Talks. Es gibt dabei Sage und Schreibe ganze vier Tracks zu besuchen! Lightning Talks dauern nur (bis zu) zehn Minuten, eingebettet in halbstündige Sessions, die zum Austausch einladen und Barcamp-Charakter haben. Angesprochen sind Entwickler:innen, UX-Interessierte, Community-Macher:innen und alle, die Lust auf neue Impulse haben.Besonders spannend ist der Umgang mit neuen Speaker:innen. Über den Call for Papers können sich erfahrene Vortragende genauso wie Newcomer melden. Wer zum ersten Mal auf die Bühne geht, wird von Stage Hosts betreut und bekommt Unterstützung bei Vorbereitung, Ablauf und Stressmanagement. So wird der Einstieg leicht gemacht, ohne dass die Qualität leidet.

Neben der eigentlichen Konferenz prägt die Hackerkiste auch das Community-Leben in Augsburg. Unter anderem veranstalten die Organisator:innen das Meetup Web and Wine, das nicht nur technische Themen, sondern auch Metaebenen wie den Umgang mit Stress aufgreift. Damit wird deutlich, dass es bei der Hackerkiste nicht allein um Technologie, sondern auch um Austausch und Gemeinschaft geht.

Und weil wir es bis zum Schluss spannend machen wollen: Am Ende dieser Revision wartet noch eine Verlosung auf euch. Mehr verraten wir hier nicht. Außer, dass es sich lohnt, dranzubleiben.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 678: programmier.con – Behind the Scenes

Tue, 09 Sep 2025 08:34:00 +0000

Wir haben Jan Gregor Emge-Triebel (LinkedIn / Mastodon) von der programmier.bar zu Gast. Bekannt ist die programmier.bar durch ihren Podcast, Meetups und neuerdings eine eigene Konferenz: die programmier.con!

Schaunotizen

[00:01:06] programmier.con

In dieser Folge schauen wir gemeinsam hinter die Kulissen der Veranstaltungsorganisation: Wie läuft das bei einem Team, das zwar einen Tech-Hintergrund hat, aber keine Eventagentur ist? Und was war der Antrieb, überhaupt eine eigene Konferenz zu machen?

Natürlich reden wir auch über Community-Arbeit ganz generell – und was es bedeutet, wenn eine Firma Zeit und Raum schafft, sich aktiv in die Szene einzubringen. Die Programmierbar macht das nicht nur mit ihrer Konferenz, sondern auch mit ihren regelmäßigen Formaten wie dem Backend- und dem Frontend-Meetup.

Am Ende steht die Einladung: Kommt vorbei, sprecht Jan an!

Revision 677: Local AI

Tue, 02 Sep 2025 06:59:47 +0000

Local AI, also KI-Modelle, die direkt auf dem Gerät laufen, statt in der Cloud, gewinnen aktuell enorm an Bedeutung. Einen neue Ansatz dafür bieten die neuen Chrome Built-in AI APIs, mit denen Entwickler:innen direkt im Browser auf mächtige KI-Funktionalitäten zugreifen können – ganz ohne eigene Modelle zu laden oder Cloud-Anfragen ausführen zu müssen. Diese lokal ausgeführten Modelle schützen die Privatsphäre, ermöglichen Offline-Nutzung und sparen Ressourcen – was für Nutzer:innen und Firmen gleichermaßen attraktiv sein kann.

Für diese Folge haben wir Thomas Steiner (Web / Mastodon / Bluesky), eingeladen, der nicht nur Google Developer Relations Engineer ist, sondern auch tief im Thema steckt. Gemeinsam mit Vanessa und Schepp spricht Thomas darüber, wie die Chrome APIs funktionieren, welche Features sie bieten und welche Herausforderungen es aktuell noch gibt. Außerdem beleuchten wir die Perspektiven anderer Browser-Hersteller und die Zukunft der Local AI im Web.

Schaunotizen

[00:01:37] Local AI

Warum ist Local AI wichtig? Thomas erklärt, dass lokale Ausführung vor allem Datensicherheit bedeutet – Daten werden nicht an einen Server geschickt. Obendrein sind entsprechende Anwendungen auch offline nutzbar und für Firmen günstiger, weil keine Cloud-Anfragen nötig sind. Der Browser stellt dabei ein generisches KI-Modell bereit, etwa Gemini Nano, das mit nur 4,29 GB auf der Festplatte auch auf Durchschnittsgeräten läuft.Die APIs sind einfach per wenigen Zeilen JavaScript nutzbar und bieten mächtige Funktionen, z.B. Übersetzung (Translation API), Schreiben (Writer API), Korrektur (Proofreader API) und generelle Eingabe per Prompt API. Multimediale Eingaben wie Bilder oder Audio werden unterstützt, was spannende Usecases erlaubt: zum Beispiel Audio transkribieren, bestimmte Audioinhalte filtern, Bilder für assistive Technologien beschreiben oder Personalausweise clientseitig auf Plausibilität prüfen.Ein Grund für mehrere dedizierte APIs statt nur einer Prompt API liegt darin, dass Gemini Nano ein vergleichsweise kleines, aber leistungsfähiges LLM ist. Das erlaubt die Nutzung auf Geräten mit begrenzter Hardware – aktuell läuft die KI auf GPU, aber es wird daran gearbeitet, dass sie auch auf CPU-only Geräten läuft, z.B. günstigen Android-Geräten. Techniken wie „early exit“ helfen, auf mobilen Geräten Energie zu sparen, indem man Antworten frühzeitig abschließt.

Derzeit werden entsprechend nur MacOS, Windows und Linux unterstützt, Chrome OS fehlt neben Android ebenfalls noch. iPad und iOS sind durch WebKit noch eingeschränkt, hier fehlen derzeit viele Freiheiten.

Wir diskutieren auch den Gegenwind von anderen Browserherstellern: Bedenken gibt es wegen möglichem Fingerprinting, obwohl die Modelle statisch sind und nicht lernen. Ein weiteres Thema ist die Testbarkeit nicht-deterministischer KI-Features, hier experimentiert man mit Quizfragen, um die Qualität zu prüfen. Außerdem sind die lokal verfügbaren Modelle derzeit auf Englisch beschränkt, was der globalen Web-Community nicht gerecht wird.

Zum Schluss wagen wir einen Ausblick: Wenn man den Anwendungsfall klar entkoppelt, z.B. reine Übersetzung, steigt die Chance, dass auch andere Browser wie Apple Safari eigene KI-APIs nachziehen. Die Entwicklung ist dynamisch, und mit Initiativen wie dem W3C Web Machine Learning Group und Firebase AI entstehen Standards für die Zukunft.

Revision 676: Local First

Tue, 26 Aug 2025 06:59:40 +0000

Elf Jahre (und 501 Revisionen) nach seinem letzten Besuch in Revision 175 war Jan Lehnardt (LinkedIn / Mastodon / Bluesky) wieder bei uns zu Gast. Mit Schepp und Vanessa spricht er über die Idee hinter „Local First“.

Schaunotizen

[00:01:09] Local First

Was heißt eigentlich „Local First“? Wir starten mit einer Rückblende auf das Jahr 2013: Damals war „Offline First“ das neue heiße Ding – erdacht von Jan höchstselbst und in Worte gegossen von Jans Mitstreiter Alex Feyerke im A List Apart Essay. Aus seiner Arbeit an CouchDB und PouchDB heraus entstand der Gedanke, dass Applikationen auch ohne Verbindung zum Internet sinnvoll funktionieren sollten. Dabei nutzt man ein System verteilter Datenbanken, sei es im Internet, im Intranet oder auf dem Anwendergerät selbst zwischen denen Daten in Form von Dokumenten synchronisiert werden. Ähnlich wie es mit Git möglich ist. Anders als bei Git, treten Merge-Konflikte allerdings schon dann auf, wenn gleichzeitig dasselbe Dokument verändert wurde. Diese Konflikte gilt es dann manuel zu lösen.

Wir sprechen über spannende Anwendungsfälle, die der „Offline First“-Ansatz überhaupt erst möglich gemacht hat – von Ebola-Krisenhilfe über die COVID-Impf-Infrastruktur in Bayern bis hin zur Koordination und Planung humanitärer Konvois in Krisengebieten.

„Local First“ setzt im Grunde auf ähnliche Prinzipien wie einige Jahre zuvor „Offline First“, wie es auch die sieben Prinzipien von „Local First“ dokumentieren. Technisch ist „Local First“ allerdings etwas anspruchsvoller, weil es stärker darauf ausgerichtet ist, dass Nutzende an ein und demselben Dokument gleichzeitig arbeiten können. Realisiert wird das über Conflict-free Replicated Data Types (CRDT).

y.js, JSON CRDTs, Operational Transforms (wie einst bei Google Wave) und Automerge sind Werkzeuge, die einem hier feingranulare Synchronisation und Konfliktlösungen ermöglichen. Jan erklärt, dass auch CouchDB mittlerweile gelernt hat, Konflikte automatisch zu lösen und es damit auch besser für gleichzeitige Arbeiten am selben Dokument gerüstet ist.

Revision 675: Green Web

Tue, 19 Aug 2025 06:59:05 +0000

Was macht eigentlich ein Webprojekt klimafreundlich(er)? In dieser Revision sprechen wir mit Björn Ganslandt über nachhaltige Webentwicklung – von Hosting über Frontend-Optimierung bis zur Frage, was eigentlich AI in puncto Energieverbrauch bedeutet. Björn ist Entwickler, Berater und Community-Mensch und bringt viele praktische Erfahrungen aus seiner Arbeit rund um Green IT mit.

Unser Sponsor

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

Schaunotizen

[00:08:28] Wie wähle ich einen grünen Hoster aus?: Wir besprechen, worauf man achten kann: Nutzt der Hoster wirklich erneuerbare Energie – oder kompensiert er nur nachträglich? Wie transparent sind diese Angaben? Hilfreich ist hier das Verzeichnis der Green Web Foundation, das grüne Hoster listet und deren Energiequellen einordnet.
[00:12:54] Was heißt es überhaupt, wenn ein Hoster mit erneuerbarer Energie betrieben wird?: Grün ist nicht gleich grün: Viele Hoster betreiben ihre Server zwar mit Ökostrom, dieser kommt aber womöglich aus dem allgemeinen Netzmix. Rechenzentren in Windkraftanlagen – wie bei WindCores und WindCloud – oder Abwärmenutzung bei Leafcloud zeigen Alternativen auf.
[00:21:11] Wo entstehen Emissionen, wenn Daten über das Netzwerk gehen?: Datenübertragung ist ein oft übersehener Faktor: Die Emissionen entstehen im gesamten Übertragungsweg – vom Rechenzentrum über Backbone und Knotenpunkte bis hin zum Endgerät. Tools wie Electricity Maps oder das Realtime Carbon Dashboard der Green Web Foundation helfen, die Herkunft des Stroms zeit- und ortsgenau zu verstehen und Übertragungsvolumina anzupassen.
[00:33:51] Was kann ich im Frontend tun, um Emissionen zu verringern?: Weniger ist mehr: Kleinere Bildformate (z. B. AVIF statt PNG) und weniger JavaScript helfen. Doch welches Bildformat ist nun wirklich besser? Studien wie von Greenspector oder Fershad Iranis Firefox-Profiling liefern Zahlen dazu.
[00:41:20] „Grid Awareness“: Neben Tools wie co2.js oder dem Carbon Aware SDK, die einem sagen wie CO²-intensiv die Stromerzeugung beim Besucher gerade ist, geht es bei der „Grid Awareness“ auch um das richtige Timing: Updates, Deployments und schwere Rechenaufgaben sollten möglichst in Phasen mit grünem Strom erfolgen. Auch Microsofts Xbox-Team macht das inzwischen so.
[00:55:47] Was weiß man über die Energienutzung von AI – und was nicht?: Vieles ist noch spekulativ: Training von Modellen verbraucht massiv Energie, das weiß man. Aber was ist mit der Nutzung? Wie messen wir das? Und wie viel Energie spart AI möglicherweise auch ein – etwa durch effizientere Prozesse oder optimierte Codegenerierung? Hier fehlt oft die Vergleichsbasis, aber einige erste Studien und Diskussionen gibt es bereits.

Revision 674: Security Awareness ohne Moralkeule

Tue, 12 Aug 2025 06:00:27 +0000

Heute ist Katharina Hoffmann (ein paar Blogposts gibts hier) zu Gast, um das Thema Security mal richtig zu beleuchten. Und dabei geht es kaum drum, wie man seinen Node.js Service baut, damit keine Script-Injections in die Datenbank kommen, sondern um viel mehr.

[00:01:08] Schaunotizen

Security Awareness ohne Moralkeule – wie man Menschen wirklich erreicht: Irgendwie muss man sich dem Thema Security doch in jedem Kontext annehmen. Aber als Hoster, wie Mittwald es ist, sollte man die ganze Sache schon etwas geordneter annehmen. Das tun sie auch – also Katharina tut es. Und darüber spricht sie mit uns: Wie baut man eigentlich die richtige Security Kompetenz über Teamgrenzen hinweg auf, beispielsweise warum man die Reinigungskräfte nicht vergessen sollte? Und wie schafft man es, dass auch alle Leute Lust darauf bekommen, das Thema ernster zu nehmen. Welche Guidelines braucht es eigentlich? Und wie finden heutzutage die Angriffe auf Firmen so statt? Stichwort Social Engineering.
Aber hört selbst…

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Revision 673: VoidZero

Tue, 05 Aug 2025 06:01:55 +0000

Vanessa und Stefan haben Alexander Lichter zu Gast, seines Zeichens Vue.js Community Größe und Dev Rel bei void(o).Um das von Vue.js und Vite Erfinder Evan You gegründete Startup für „Next Generation Tooling“ geht es auch in der heutigen Revision.

Schaunotizen

[00:01:00] VoidZero: Wir erfahren welche Projekte void(0) unterstützt, betreut, oder sogar ganz verantwortet. Wir reden über Open Source Governance, den meme-tauglichen „Rewrite in Rust“ und hinterfragen dabei unter anderem kritisch welchen Einfluss ein VC gefördertes Startup auf kritischen JavaScript Infrastruktur haben darf. Vergleiche mit einem bekannten Serverless Hosting Unternehmen aus San Francisco und deren berühmt-berüchtigte Unterwanderung der React.js Szene bleiben da natürlich nicht aus, der Vollständigkeit halber sei aber erwähnt, dass wir die Folge vor dem nicht weniger überraschenden Kauf von NuxtLabs aufgezeichnet haben.

Revision 672: New Stuff coming to CSS

Tue, 29 Jul 2025 06:58:39 +0000

It’s not every day we get to talk to someone who actually helps shape the CSS of tomorrow – which is why we were thrilled to welcome back Adam Argyle (LinkedIn / Bluesky / Mastodon), creative tinkerer, punk engineer and a big fan of CSS, JS and great UX!

Together with Schepp and Vanessa, Adam takes us on a tour of what’s new and what’s next in CSS. From cutting-edge selectors and scroll state features to color functions, motion preferences, and even the future of form controls – this episode is packed with practical insights and exciting perspectives.

Show Notes

[00:01:03] contrast-color() & CSS color tooling: We kick things off by talking about the new contrast-color() function and why it’s a big deal for authoring accessible themes. Adam explains how tools like his Observable playground help explore the complexities of calculating good contrast. We also touch on the prefers-contrast media query and how it relates to other preference queries like prefers-reduced-data or forced-colors.
[00:37:40] control-value(): Adam introduces the control-value() function that allows you to style components based on their value – like coloring inputs depending on current value – and we talk about a future where CSS can directly react to user interaction or state without JavaScript. This ties into upcoming functions like sibling-index() and sibling-count(), with a great demo on nerdy.dev.
[00:43:07] Scroll Experience: What if you could style elements differently based if they are overflowing, or if they are snapped or stuck? That’s what scroll-state() unlocks. Adam walks us through why it matters for carousels and nested scroll containers. We also touch on related concepts like scroll-snap, the scrollsnapchanging, scrollsnapchange and scrollend events, ::scroll-marker and ::scroll-button() pseudo elements. Links include a full CSS-only Nintendo-style home screen on nerdy.dev and Chrome’s carousel demo.
[01:17:29] Mixins, Functions & if-Statements: Mixins and functions are finally coming to CSS to make code and mechanics reusable! So are if-statements. Una did a short video on those.
[01:20:10] @starting-style, transition-behavior & 3D view transitions: We discuss how @starting-style and transition-behavior: allow-discrete open new possibilities for complex animations. Adam references his CSS Day slides and what he calls “pleasant to use” transitions, including view transitions and split-text effects. We talk about the challenges of layering interactivity and animation, and where tools like GSAP might still help.
[01:21:36] Custom form controls: The customizable; 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.


Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/



Revision 671: Angular v20 und der NgRx SignalStore
Tue, 22 Jul 2025 06:59:09 +0000
Wir sprechen mit Rainer Hahnekamp (Web / LinkedIn / Bluesky), über den neuen SignalStore – eine Spielart von NgRx, die Angular Signals nutzt und derzeit für frischen Wind im State-Management sorgt. Als aktiver Contributor bei NgRx kennt Rainer nicht nur die technische Seite, sondern auch die Prozesse hinter den Kulissen des Angular Frameworks.
Schaunotizen

[00:001:11] NgRx SignalStore
Wir klären, wie sich der SignalStore von bisherigen NgRx-Ansätzen unterscheidet, wie viel Redux noch drinsteckt und wie sich das Ganze im Vergleich zu RxJS verhält. Besonders spannend: Auch wenn Signals vieles vereinfachen, sind Observables damit längst nicht überholt.
Ein weiteres Thema sind Angular Zones – und wie man mit oder auch bewusst ohne sie performant Anwendungen bauen kann. Außerdem werfen wir einen Blick auf das neue „Resources“-Feature in Angular, das – ähnlich wie Signals – den Framework-Kern modernisieren soll.
Zum Schluss geht’s noch um Open Source: Wie wird man eigentlich Contributor bei Projekten wie NGRX? Was braucht es, damit ein neues Feature wie der Signal Store überhaupt entstehen kann?

Links

ng News
Ein wöchentlicher Video-Newsletter mit den wichtigsten Angular-Neuigkeiten, abgehandelt in 100 Sekunden
Angular: The Documentary | An origin story
Die Angular-Dokumentation im Videoformat – verständlich und unterhaltsam aufbereitet von Cult.Repo (formerly Honeypot).
Angular Architects
Schulungen, Workshops und Blogposts zum Thema Angular
Minko Gechev | Converging Web Frameworks
Vortrag von Minko Gechev über den konvergierenden Trend bei modernen Webframeworks.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 670: Neuerungen in WebKit
Tue, 15 Jul 2025 06:58:04 +0000
In dieser Folge widmen wir uns erneut ganz WebKit – und dem, was sich dort aktuell alles tut und in den letzten Monaten getan hat. Schepp und Peter diskutieren neue Features, (alte) Probleme sowie APIs, die bereits in Safari gelandet sind oder bald landen werden.
Schaunotizen

[00:01:09] Google I/O 2025 & CSS-only Carousels
Zum Einstieg beklagen wir wie themenarm die Google I/O dieses Jahr für uns Frontend-Menschen war. Das einzig wirklich spannende Ding waren die Vorstellung der CSS-Primitiven für den Bau von Karussells. Allerdings steckt in dem Thema noch sehr viel Arbeit an der Barrierefreiheitsfront, wie Sara Soueidan dargelegt hat. Der Rest bestand aus eilig herbei-geprototypeten Demos.
[00:19:34] Multipage View Transitions
Mit nur zwei Zeilen Code aus dem WebKit-Blogpost lassen sich flüssige Seitenübergänge realisieren. Wir berichten von unseren eigenen Versuchen mit View Transitions und verweisen auf die Library ramjet, die ähnliche Effekte wie die View Transitions schon seit zehn Jahren ermöglicht.
[00:25:46] (Root) Line-Height Units: lh/rlh
WebKit führt neue Einheiten für die Zeilenhöhe ein, die konsistentere Text-Layouts erlauben. Wir schweifen an dieser Stelle kurz ab und sprechen darüber, wie das CSS Typed OM funktioniert.
[00:29:24] margin-trim
Mit margin-trim lassen sich über den Rand ragende Margins von Kind-Elementen abschneiden, was bestimmte Layouts gegenüber der :first-child/:last-child-Technik deutlich robuster umsetzbar werden lässt.
[00:33:52] text-wrap: pretty
Das neue Umbruch-Verhalten text-wrap: pretty sorgt für elegantere Zeilenumbrüche und optimierte Worttrennung. Die WebKit-Menschen haben es aber nicht dabei belassen, mit Chrome nachzuziehen, sondern haben noch kräftig „Gold-Plating“ betrieben ‐ mit sehenswertem Ergebnis! Wem das nicht reicht, der kann in Zukunft vielleicht auf Machine-Learning zurückgreifen, um Text nach seinen Vorstellungen zu formatieren, wie es jemand in diesem Video namens „Badness 0“ demonstriert.
[00:35:20] WebKit-Bug bei Ligaturen
So stark WebKit allerdings bei Typografie sonst ist, bei einer Sache verkackt er hart: Bei der Berechnung der Laufweite von Ligaturen. Ligaturen sind eine fantastische Sache und ermöglichen es, Fonts regelrecht zu programmieren. Schrift-Entwicklerin Ulrike Rausch bildet hier die Speerspitze mit ihren „Liebe“-Fonts und dem Font „Liebe Heide“ im Speziellen. Ein wenig in das Thema eingetaucht ist Schepp neulich auch, als er mit Hilfe eines SVG und OpenType.js (master Branch) eine Ligatur in eine Schrift eingebaut hat, welche alle Vorkommen eines bestimmten Wortes im Text-Rendering automatisch durch die SVG-Grafik ersetzt. Diese Grafik läuft allerdings weiter als der damit ersetzte Text. Chrome und Firefox bemerken das und passen den Textfluss entsprechend an. Nur WebKit leider nicht, wo nachfolgender Text rechts in die Grafik ragt oder ohne Abstand an der Grafik klebt. Text Rendering Hates You!
[00:56:35] Neue Farb-Features
Safari kennt nun die (neue) contrast-color()-Funktion, welche automatisch eine kontrastreiche Schriftfarbe basierend auf einer Input-Farbe zurückgibt. Dabei beschränkt sie sich derzeit noch auf die Rückgabe von Weiß oder Schwarz. Wir sprechen über die bewegte Vergangenheit dieser Funktion, die eigentlich mal als color-contrast()-Funktion das Licht der Welt erblicken sollte, und was die Web Accessibility Initiative (WAI) und die Farbkontraste-Berechnung nach APCA mit den aktuellen Limitationen zu tun haben. Das Kontraste-Thema führt uns auch zu Lighthouse und seinen Barrierefreiheits-Checks, die viele Problemfälle nicht erkennen (können). Aus dieser Tatsache hat Manuel Matuzović sogar ein ganzes Projekt gemacht: Building the most inaccessible site possible with a perfect Lighthouse score (hier als Video).
Ebenfalls neu ist ein Upgrade des Color-Inputs, welcher jetzt die HTML-Attribute colorspace sowie das boolsche alpha versteht. Wir finden das gut, allerdings sind wir der Meinung, dass insbesondere die neuen Farbräume mit Bedacht eingesetzt werden sollten, weil eine ganze Kette von Erfordernissen für einen erfolgreichen Einsatz erfüllt sein muss. Hier stößt man aber auf das Problem, dass HTML selbst keine Möglichkeit zum Feature-Testen und des Alternativ-Pfads kennt, anders als JavaScript oder CSS. Das Problem hat man genauso bei dem relativ neuen switch-Attribut bei Checkbox-Inputs. Schepp hat das Problem in der Praxis darüber hinaus auch bei Hauptmenüs, die auf Desktop-Geräten einfache 
-Elemente sein sollten, auf Mobile aber -Elemente, wenn sie sich UI-mäßig in Offcanvas-Menüs umwandeln. Peter berichtet, wie er Menüs unkompliziert (aber semantisch grenzwertig) mit dem -Element auf- und zuklappen lässt. Für solch einen Ansatz spielt einem auch das neue ::details-content-Pseudo-Element in die Karten.
[01:15:42] Declarative WebPush
Mit der Declarative Web Push API lassen sich Push-Nachrichten in Zukunft ganz ohne (schwer zu handhabende) Service Worker konfigurieren. Juhuuu! Wer dennoch lieber Service Worker verwenden möchte, dem empfehlen wir zumindest den Einsatz der Library Workbox, um es erträglich zu machen.
[01:18:51] SVGs d-Property in CSS
WebKit erlaubt nun endlich als letzter Browser im Bunde, das d-Attribut von SVG-Pfaden direkt via CSS zu verändern. Auf diesen Tag hat Peter sehr lange hingefiebert ‐ und sich anderweitig beholfen! Schepp bringt das auf die Idee, ob die Custom Highlight API nicht auch ein guter Kandidat für Peters Problem hätte sein können.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


On Tour @ #headinthecloud – Web Sustainability mit Thorsten Jonas & Marvin
Hötger
Thu, 10 Jul 2025 06:00:28 +0000
Dieses Interview ist der letzte von 3 Teilen unserer Serie On Tour @ #headinthecloud. Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in Espelkamp stattfand.
Web Sustainability
Mit Thorsten Jonas & Marvin Hötger.
Eigentlich muss man sich vielmehr Gedanken machen, welchen Einfluss unsere Webseiten auf die Umwelt haben. Durch Chatbots, Bilder und vieles mehr kann man als Entwickler großen Einfluss auf den CO₂-Fußabdruck einer Webseite haben. Thorsten erklärt, warum das der Fall ist und welche Maßnahmen man noch so ergreifen kann. Marvin gibt einige Beispiele aus der Praxis.
Das Video zum Talk wird zeitnah auf dem YouTube Kanal von Mittwald verfügbar sein. Den Sustainable UX Podcast wiederum findet ihr hier.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 669: Chat-Applikationen mit gängigen LLM-APIs
Tue, 08 Jul 2025 07:35:33 +0000
In dieser Revision sprechen Vanessa und Schepp mit Jannik Lehmann (LinkedIn), Senior Frontend Developer bei GitLab, darüber, wie man Chat-Applikationen mit gängigen LLM-APIs erstellt. Dabei geht er auf verschiedenste Stolpersteine ein, spricht über Streaming und warum der Kontext so wichtig ist.

Unser Sponsor


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


Schaunotizen

[00:01:42] Chat-Applikationen mit gängigen LLM-APIs
LLM-APIs unterscheiden sich in zwei zentralen Punkten von klassischen APIs: Erstens sind die Antworten nicht deterministisch – das bedeutet, dass ein identischer Prompt bei jedem Request ein anderes Ergebnis liefern kann. Zweitens kommen die Antworten gestreamt an – oft in Form von Text-Chunks, die schrittweise per Server Sent Events (SSE) an den Client geliefert werden.
Ein typischer Request beginnt mit einem einfachen Prompt als Plaintext. Die Antwort wird dann dynamisch in Markdown-Form gestreamt. Doch genau dieses gestreamte Markdown bringt etliche Stolperfallen mit: Von XSS- und Prompt-Injection-Risiken über unvollständige Mermaid-Diagramme bis hin zu halbfertigen Flowcharts und weiteren seltsamen Markdown-Konstrukten, die ein LLM ausgeben kann.
Hier lohnt ein Exkurs in das Thema streambare vs. nicht streambare Dateiformate: HTML ist beispielsweise streambar, da der Browser Bit für Bit lesen und direkt rendern kann. Deshalb gibt es auch Metriken wie „First Meaningful Paint“ und Gründe dafür, warum ein Script-Tag lieber am Ende statt am Anfang einer HTML-Datei stehen sollte. Markdown hingegen ist nicht streambar – es braucht oft Kontext über mehrere Zeilen hinweg, bevor eine Darstellung sinnvoll möglich ist. Genau deshalb ist Markdown als Streaming-Format nicht ganz trivial zu handhaben.
Ein weiteres zentrales Thema ist der Kontext – oder vielmehr: wie wir mit ihm umgehen. Denn LLMs sind per se stateless. Das bedeutet: Jeder einzelne Request muss alles enthalten, was das Modell wissen soll – den Prompt, die bisherige Konversation, den System Prompt und ggf. auch hochgeladene Dateien. Aus Erfahrung wissen wir: Alle nutzen am Ende dieselben Modelle, aber wie der Kontext behandelt wird, entscheidet darüber, ob der AI-Assistent genial oder nutzlos wirkt.
Apropos Kontext: LLMs haben ein beschränktes Kontextfenster – je nach Modell unterschiedlich groß, aber immer begrenzt. Was tun, wenn dieses Limit erreicht ist? Strategien wie Sliding Windows (ältere Nachrichten rauswerfen), automatische Zusammenfassungen oder manuelle Priorisierung helfen weiter. Wichtig ist: Mehr Kontext kostet nicht nur mehr Tokens, sondern macht die Anwendung auch langsamer und teurer.
Unser Fazit: Die Komplexität solcher Systeme ist hoch – aber genau deshalb ist es so wichtig, mit kleinsten Prototypen zu starten. Sie helfen, zentrale Probleme frühzeitig sichtbar zu machen. Wer Lust bekommen hat, sich einmal ein wenig inspirieren zu lassen, dem sei der GitLab Duo Chat ans Herz gelegt. Es befindet sich als Open-Source-Projekt im GitLab Repository – man freut sich über jeden Merge Request.


Links

Server-sent Events auf MDN
Eine Einführung in Server-sent Events für die Einweg-Kommunikation vom Server zum Client.
HTMLPurifier
Ein Filter zur sicheren Bereinigung von HTML – ideal bei Benutzereingaben.
Chrome Platform Status: Sanitizer API
Die Sanitizer API erlaubt sicheres Einfügen von HTML-Inhalten direkt im Browser – ohne eigenes Parsen.
Tailwind CSS Typography
Tailwinds Lösung für schöne Standard-Typografie mit dem `@tailwindcss/typography` Plugin.
Content Security Policy auf MDN
Leitfaden zu CSP zur Vermeidung von XSS und zur Härtung von Webanwendungen.
LangChain
Ein Framework, das beim Bau komplexer Anwendungen mit Sprachmodellen hilft.
GitLab
Der Quellcode der beliebten DevOps-Plattform GitLab – vollständig open source.
Contributor Success Team bei GitLab
Das Team hinter GitLabs Bemühungen, externe Beiträge erfolgreich zu integrieren.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 668: KI im Alltag: Werkzeug, Hype oder Risiko?
Tue, 01 Jul 2025 06:59:30 +0000
In dieser Folge reden wir mit Jürgen Geuter (Web / Mastodon / LinkedIn), besser bekannt als „Tante“, darüber, wie KI den Alltag von Entwickler:innen verändert – oder eben auch nicht. Zwischen Pragmatismus, Kritik und ein paar Zukunftsfragen schauen wir gemeinsam auf den aktuellen Stand: Was bringt der Einsatz von KI in der Softwareentwicklung tatsächlich, was ist Wunschdenken – und wo wird’s vielleicht sogar gefährlich?

Unser Sponsor

Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?

Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf workshops.de/ki.

Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!

Schaunotizen

[00:004:21] KI in der Praxis: Wo hilft sie – und wo (noch) nicht?
Wir sprechen darüber, was KI für Entwickler:innen heute leisten kann – jenseits aller Visionen. Tante gibt Einblick in seine Erfahrungen mit Tools wie GitH ub Copilot und reflektiert, wie sehr sie wirklich in den Entwicklungsprozess eingreifen. Spoiler: Für viele bleibt KI eher eine Ergänzung als ein Ersatz.
[00:30:11] Der neue Alltag: Produktivität, Frust und neue Abhängigkeiten
Auch wenn manche mit KI produktiver arbeiten: Wir beleuchten, wo sie auch Probleme schafft – etwa durch falsche Sicherheit, fehlerhafte Vorschläge oder ein fragiles Vertrauen in Tools, die sich oft wie Blackboxes verhalten.
[00:00:00] KI als Risikofaktor – von Bias bis Fehlnutzung
Tante erklärt, warum es bei KI nicht nur um Code geht, sondern auch um Verantwortung: Wer trägt die Konsequenzen für Vorschläge, die sich später als falsch herausstellen? Und was passiert, wenn man sie unreflektiert übernimmt?
[00:52:55] Arbeitswelt im Wandel: Was bleibt vom Beruf, wenn KI immer mehr übernimmt?
Wird die Rolle von Entwickler:innen verschwinden – oder nur transformiert? Wir diskutieren, wie sich Erwartungen, Lernwege und Arbeitsabläufe verändern könnten. Und welche Kompetenzen in Zukunft wichtiger werden als Syntaxwissen.

Links

tante.cc
Jürgens Blog mit Essays zu Technologie, Gesellschaft und digitaler Verantwortung.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


On Tour @ #headinthecloud – Women in Tech mit Myrna Gönnemann, Luisa Faßbender &
Anna Maier
Thu, 26 Jun 2025 06:00:34 +0000
Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud. Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in Espelkamp stattfand.
Women in Tech
Mit Myrna Gönnemann, Luisa Faßbender & Anna Maier.
Wie ist es eigentlich in der Tech-Szene als Frau aktiv zu werden? Das besprechen wir mit Myrna, Luisa und Anna. Praktische Tipps, wie man es als Arbeitgeber und Konferenz-Veranstalter inklusiver werden kann. Myrna und Luisa berichten aus ihrer Erfahrung im TYPO3 Team.
Das Video zum Talk wird zeitnah auf dem YouTube Kanal von Mittwald verfügbar sein.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 667: Kann eine KI Entwickler:innen ersetzen?
Tue, 24 Jun 2025 06:59:29 +0000
Nach mehreren Folgen im KI-Block zu Tools und Technik sprechen wir diesmal mit Markus Oberlehner über eine grundlegendere Frage: Kann eine KI Entwickler:innen ersetzen? Markus war schon zweimal bei uns zu Gast – in Revision 473 zu Vue 3 und Revision 535 über Testing mit Cypress und Vitest. Diesmal geht’s um das Spannungsfeld zwischen KI-Hype, echtem Mehrwert im Alltag und langfristigen Auswirkungen auf die Branche.

Unser Sponsor

Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?

Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf workshops.de/ki.

Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!


Schaunotizen

[00:01:33] Kann eine KI Entwickler:innen ersetzen?
Markus erzählt, wie er anfangs begeistert war – besonders mit dem Sprung von ChatGPT 3 zu [ChatGPT 4](https://openai.com/gpt-4). Für einen Moment schien es, als müsste bald niemand mehr selbst coden. Doch dann kam die Ernüchterung. Neue [agentic Modelle](https://www.talkdesk.com/de-de/blog/agentic-ai/) und Tools wie [Gemini 2.5](https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/), [Claude 4](https://www.anthropic.com/news/claude-4) oder [DeepSeek R1](https://deepseek-r1.com/de/) machen Hoffnung – aber die Realität bleibt durchwachsen.
Die zentrale Frage ist: Ersetzt KI den ganzen Job – oder „nur“ das Coden? Wir sind uns einig: Entwickler:innen machen weit mehr als nur Code zu schreiben. Kommunikation, Konzeption, QA-Abstimmung – all das bleibt. Dass KI etwa 20 % der Arbeit übernehmen kann, klingt für Markus realistisch. Beim schnellen Prototyping hilft KI bereits enorm.
Aktuell arbeitet Markus wieder mit [GitHub Copilot](https://github.com/features/copilot), nachdem er [Cursor](https://www.cursor.so/) eine Weile ausprobiert hatte. Autovervollständigung ist für ihn mittlerweile Alltag. Aber: Macht das wirklich produktiver? Ob KI-Nutzung ein echter Wettbewerbsvorteil ist, bleibt unklar.
Spannend wird es bei der Frage: Was passiert, wenn KI Junior-Entwickler:innen ersetzt? Denn wo keine Juniors nachrücken, fehlen später auch Seniors. KI könnte also nicht nur Arbeitskraft, sondern auch Ausbildungspfade gefährden.
Ein sinnvolles Einsatzgebiet sieht Markus bei Aufgaben, die sonst eher lästig sind – etwa Refactorings oder Library-Upgrades. Doch genau da hapert’s noch. Seine Erfahrungen bei der Migration von [Nuxt 2 auf 3](https://nuxt.com/docs/migration/overview) waren eher ernüchternd. Auch bei komplexen Kombinationen – etwa [React 19](https://react.dev/blog/2024/12/05/react-19) mit [Next.js 15](https://nextjs.org/blog/next-15) oder [Remix](https://remix.run/) – liefern KI-Tools oft Mischmasch aus alten und neuen Patterns.
Unterschiede gibt’s auch zwischen den Frameworks: [React](https://react.dev/) wird gut unterstützt, [Vue](https://vuejs.org/) weniger, bei [Svelte](https://svelte.dev/) wird’s noch dünner. Der Grund: KI kann nur gut, was sie oft genug gesehen hat.
Markus‘ Fazit ist realistisch: Für schnelle MVPs ist KI ein gutes Tool. Für langfristige Architektur oder Legacy-Code eher nicht. Zwischen Hype und Ernüchterung bleibt KI ein mächtiges Werkzeug – aber nur, wenn man es gezielt und reflektiert einsetzt.

Links

Microsoft CEO says up to 30% of the company’s code was written by AI
Ein Interview mit Satya Nadella über den aktuellen Einfluss von KI auf Softwareentwicklung bei Microsoft.
1,3 Millionen Dollar gespart: 37signals zieht Daten von AWS auf eigene Server um
Ein Erfahrungsbericht darüber, wie 37signals mit eigener Infrastruktur massiv Kosten senkt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


On Tour @ #headinthecloud – Platform Engineering mit Mathias Gebbe & Aljoscha
Bollmann
Thu, 19 Jun 2025 07:00:43 +0000
Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud. Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in Espelkamp stattfand.
Women in Tech
Mit Mathias Gebbe & Aljoscha Bollmann.
Aljoscha und Matze sprechen über die Learnings ihres Platform Engineering Teams – was hat gut geklappt, was funktioniert vielleicht auch nicht so einfach. Neben praktischen Tipps, gibt’s auch einige Insights aus der Arbeit für den Logistik-Dienstleister Hellmann und vor allem erfahrt ihr auch, was es mit Stück-, Gefahr- und Sammelgut auf sich hat.
Das Video zum Talk wird zeitnah auf dem YouTube Kanal von Mittwald verfügbar sein.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 666: KI in der Webentwicklung
Tue, 17 Jun 2025 06:59:36 +0000
In unserem KI-Block geht’s diesmal wieder um den Einsatz von Künstlicher Intelligenz in der Webentwicklung – von Codegenerierung über Tool-Integrationen bis hin zu lokalen Modellen und neuen Standards, die die Zusammenarbeit zwischen Mensch und Maschine verändern könnten. Dazu haben wir Max Marschall eingeladen (Consultant bei ThinkTecture, LinkedIn), der mit Vanessa und Schepp über seine Erfahrungen spricht. Wir diskutieren Tooling, werfen einen kritischen Blick auf technische und ethische Grundlagen – und Max bringt’s auf den Punkt: Wir arbeiten immer mehr mit „Sprache als Interface“.

Unser Sponsor

Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?

Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf workshops.de/ki.

Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!


Schaunotizen

[00:06:15] LLMs
Wir sprechen über die Basis fast aller heutigen KI-Anwendungen: LLMs. Schepp erinnert sich an seine ersten Gehversuche mit der Tabnine-Erweiterung für JetBrains, Max bringt die aktuelle Entwicklung ein – von klassischem Machine Learning bis zu ChatGPT. Dabei bleibt klar: Die Vorschläge sollte man nicht blind übernehmen. Und auch das Thema Urheberrecht beim Training von Modellen lassen wir nicht außen vor.
[00:13:15] Komplexität der Aufgaben
Je komplexer die Aufgabe, desto schwieriger tut sich KI. Das stellen Max und Vanessa schnell fest. Bei einfachen Problemen funktioniert’s oft erstaunlich gut – bei größeren Projekten sinkt der Nutzen oder es schleichen sich Fehler ein.
[00:21:42] Agentic Code Editors
Wir werfen einen Blick auf Editoren, die mehr können als einfache Prompts: sogenannte Agentic Code Editors. Max hat verschiedenste Tools ausprobiert – von NeoVim über VS Code bis JetBrains. Tools wie Windsurf oder Cursor liefern echte Kontextunterstützung. Vanessa bleibt lieber bei ChatGPT, weil dort klar ist: Kontext gibt’s keinen. Wir reden auch über @commands zur gezielten Aufgabensteuerung und Use Cases wie Variablennamen oder Talktitel finden.
[00:30:47] Coding Rules
Wir sprechen über CodingRules.ai und ähnliche Tools, mit denen wir einmal definieren können, welche Stilregeln gelten – z. B. ob fat arrow functions oder ECMAScript-Imports verwendet werden sollen. Max nutzt solche Tools projektbezogen – und schaltet z. B. in einen „Architekturmodus“ oder „Doku-Modus“ um.
[00:34:45] Memory Bank
Langfristiger Kontext ist das Stichwort: Mit Tools wie Cursor Memory Bank oder Cline.bot lassen sich Informationen dauerhaft speichern – z. B. welche Tools im Projekt verwendet werden. Cline legt dafür Markdown-Dateien an, wie in den Cline Docs beschrieben.
[00:39:56] Lokale LLMs
Datenschutz ist ein großes Thema – gerade im Unternehmenskontext. Wir sprechen über lokale LLMs mit Ollama oder ChatGPT via Azure. So lassen sich Modelle datenschutzkonform nutzen – ohne dass Inhalte ins Training einfließen.
[00:45:18] MCP (Model Context Protocol)
Max bringt MCP ins Spiel – das Model Context Protocol von Anthropic. Eine neue Schnittstelle, mit der sich LLMs standardisiert mit externen Tools wie Datenbanken oder Backends verbinden lassen.
[00:51:02] Generatoren
Wir reden über Tools wie V0, Lovable, Bolt.new und Builder.io. Sie liefern per Prompt komplette Frontends – oft als React-Komponenten. Das spart Zeit, ist aber in der Praxis oft auf generische Anwendungen begrenzt. Kevin hat in Revision 665 ähnliche Erfahrungen gemacht.
[01:00:31] Chrome Dev Tools
Auch die Chrome DevTools bekommen KI-Funktionen. Max berichtet, dass man dort künftig Fragen zum Code stellen oder Styles ändern kann – spannend, auch wenn er selbst das lieber direkt in der IDE macht. Firefox testet laut Support-Artikel eigene KI-Features.
[01:13:39] CLI Integration
Wer im Terminal zu Hause ist, schaut sich Tools wie Aider oder Warp an. Wir sprechen über diesen Medium-Artikel mit 5 Must-Have CLI-AI-Tools, in dem praktische Tools gesammelt sind.
[01:15:57] Platform Tooling
Auch rund um GitHub, Jira & Co. zieht KI ein. Automatische Pull Request Reviews, Ticket-Zusammenfassungen, Textoptimierungen – das verändert unsere Workflows und spart Zeit.

Links

LLM Visualization

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 665: Wie ich mit KI 3x schneller Apps programmiere
Tue, 10 Jun 2025 06:59:13 +0000
Weiter in unserem KI-Block geht es mit Kevin Chromik (Webseite, LinkedIn), Content Creator (YouTube). Kevin berichtet Hans und Vanessa seine Erfahrungen darüber, wie er mit KI Tools 3x schneller Apps programmieren kann.

Unser Sponsor


Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller

Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um

voneinander zu lernen.
Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und

Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends

von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.
Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.


Schaunotizen

[00:01:30] Wie ich mit KI 3x schneller Apps programmiere
3x schneller entwickeln! Ja, das ist eine YouTube-Clickbait Headline! Es wird schnell klar: Die KI übernimmt zwar nicht alles, aber sie kann an vielen Stellen den Entwicklungsprozess deutlich beschleunigen – manchmal sogar um das Dreifache. Kevin berichtet über eine App, die er zusammen mit einem anderem YouTuber in Flutter mit Hilfe von KI-Tools gebaut hat. Der Anwendungsfall ist hierbei, dass sie nur zu zweit an dieser App schreiben, und beide zuvor nicht mit Flutter gearbeitet haben. Sie müssen bei dieser App auch keinen strikten Design Richtlinien folgen, sondern können der KI mehr Freiheiten geben.
Ein großes Thema ist die Frage nach dem Kontext: Tools wie ChatGPT liefern oft brauchbare Antworten, kennen aber die eigene Codebase nicht. Das macht ihre Vorschläge schnell unbrauchbar oder zumindest nicht optimal integrierbar. Ganz anders sieht es bei Tools wie Cursor oder Windsurf aus, die direkt in die IDE eingebunden werden – z. B. in VS Code – und Zugriff auf das gesamte Projekt haben. Damit können sie nicht nur präziser helfen, sondern auch bessere Architekturvorschläge machen oder konkrete Codeabschnitte erklären.
Besonders spannend ist Kevins Ansatz, KI nicht unbedingt zum „schnelleren Programmieren“ im klassischen Sinne zu nutzen, sondern vielmehr für alles drumherum. Beim Prototyping etwa hilft KI, Ideen schnell zu visualisieren – auch wenn der produzierte Code am Ende verworfen wird. Kevin erzählt von einem Beispiel, als er ein Award-System in seine Habit-Tracker-App einbauen wollte: Die Idee war noch nicht ausgereift, doch Windsurf konnte dennoch eine erste Oberfläche erzeugen, mit der man experimentieren konnte – inklusive Animationen. Der Code war nicht perfekt, aber als Sparringspartner war die KI extrem hilfreich.
Wir sprechen auch über den Unterschied zwischen eigenen Programmiersprachen und fremden: Ist man mit KI auch in der eigenen Sprache wirklich schneller? Und wie sinnvoll ist KI eigentlich für Junior-Entwickler:innen? Kevin und Vanessa sehen hier Chancen, aber auch Risiken. Während Stack Overflow oft ein notwendiger Umweg ist, bei dem man sich zwangsläufig mit dem Problem auseinandersetzt, liefern KI-Tools direkte Lösungen – ohne Umweg, ohne Kontext. Das kann zu schnellen Ergebnissen führen, aber auch dazu, dass Lernprozesse übersprungen werden.
Trotzdem: Gute Tools wie Windsurf ermöglichen inzwischen Rückfragen zur Codebase wie „Erklär mir mal die Architektur dieser App“ – und das kann gerade für weniger erfahrene Entwickler:innen ein echter Gewinn sein.
Ein weiteres Thema ist Codequalität. Kevin berichtet, dass er seine Habit-Tracker-App bewusst mit einer sauberen Architektur gebaut hat – auch wenn sie funktional simpel ist. Er merkt an: Je besser man selbst entwickelt, desto mehr stört einen der Output von KI, weil viele Vorschläge einfach qualitativ nicht mithalten können. Viel Code im Netz ist schlicht schlecht – und KI reproduziert diesen leider oft. Gute Entwickler:innen sind in den meisten Fällen noch deutlich besser als jede KI.
Zum Abschluss diskutieren wir noch mit Hans, ob man heute noch zusätzliche Libraries braucht – oder ob KI-Tools wie V0 von Vercel mit ihren fertigen Komponenten schon ausreichen, um direkt damit zu starten.

Links

Windsurf vs. Cursor (Builder.io)
Ein Vergleich zweier KI-gestützter Entwicklungsumgebungen, die im Podcast thematisiert werden.
Cucumber
Testing-Tool für verhaltensgesteuerte Entwicklung – im Gespräch als potenzieller KI-Anwendungsfall erwähnt.
v0 von Vercel
KI-gestütztes Tool zum Erzeugen von UI-Komponenten – im Gespräch als Beispiel für automatisierte Entwicklung.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 664: TYPO3-Extensions bauen mit AI
Tue, 03 Jun 2025 06:59:55 +0000
Extensions für TYPO3 entwickeln – klingt erstmal nach Handarbeit. Aber was passiert, wenn man gängige KI-Tools wie ChatGPT oder Codegenerierungsdienste an den Prozess lässt? Martin Helmich hat’s ausprobiert – und berichtet von den praktischen Herausforderungen, Erfolgen und Fallstricken beim Einsatz von KI im TYPO3-Kontext.   

Unser Sponsor
  

Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?

Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!
Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf workshops.de/ki.

Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!

[00:01:36] TYPO3-Extensions bauen mit AI
Martin erklärt, wie er ein KI-gestütztes Projekt aufgesetzt hat, das TYPO3-Extensions auf Basis von Prompts generiert. Ziel war es nicht, produktiven Code zu erzeugen, sondern auszuloten, was mit heutigen Tools bereits möglich ist – und wo man mit durchdachten Prompts tatsächlich Zeit und Struktur gewinnt.
Wir diskutieren, welche Aufgaben sich für KI besonders eignen – z. B. die Generierung von TCA-Definitionen, Sprachdateien oder Konfigurationsklassen – und wie sich generierter Code später weiterverwenden lässt. Dabei wird klar: Ohne ein tiefes Verständnis des TYPO3-Ökosystems bringt die beste KI wenig.
Ein spannender Punkt: Wie lassen sich Prompt-Vorlagen standardisieren? Könnte man daraus ein öffentliches Tool bauen, das TYPO3-Entwicklung beschleunigt – ohne dass es gleich „AI-first“ wird?
Daneben geht’s um die Frage, wie man mit Blackbox-Code umgeht, der nicht aus dem Editor kommt, sondern aus einem Prompt. Und wie viel man einer KI zutrauen will, wenn es nicht nur um technische Korrektheit, sondern auch um konzeptuelle Entscheidungen geht.
Zum Schluss wagen wir noch einen kleinen Ausblick: Wo geht das hin – in TYPO3, aber auch allgemein im Web-Stack? Und was braucht es, damit KI bei der Extension-Entwicklung mehr wird als nur ein Gimmick?

Links

TYPO3 Association
Martin ist dort im Vorstand aktiv
Smart Extension Builder von Mittwald
KI-gestütztes Tool zum Generieren von TYPO3-Extensions
Dify
Tool zum Erstellen eigener KI-Anwendungen – als Backend für Martins Projekt im Einsatz
Rector
Automatisiertes Refactoring-Tool für PHP
WebDev Arena
Plattform zum Vergleichen von KI-Modellen beim Webdesign – man gibt einen Prompt ein und sieht, wie verschiedene Modelle daraus eine Website bauen (erwähnt in Front-End Fire #94).

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 663: Agentic AI – was kommt nach Prompting?
Tue, 27 May 2025 06:59:39 +0000
Schon wieder eine neue Buzzword-KI? Nicht ganz. In dieser Folge sprechen wir mit Robin Böhm über Agentic AI – ein Konzept, das gerade massiv Fahrt aufnimmt. Statt auf einen Prompt zu warten, werden KI-Agenten selbst aktiv: Sie analysieren Aufgaben, planen Schritte und setzen diese eigenständig um. Was bedeutet das für Entwickler:innen, Tools – und letztlich für uns als Nutzer:innen?

Unser Sponsor
  

Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?

Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!
Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf workshops.de/ki.

Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!

Schaunotizen

[00:01:36] Agentic AI
Robin gibt einen praxisnahen Überblick: Was macht eine KI „agentisch“? Wie wird festgelegt, was ein Agent darf – und was nicht? Wir steigen ein mit einem technischen Abriss der Konzepte, die aktuell unter dem Schlagwort Agentic AI diskutiert werden: Fähigkeiten, Kontrollinstanzen, Kontextverwaltung und mehr.
Dabei geht es auch um Frameworks wie LangChain, den Umgang mit JSON-Kommandostrukturen, und um frühe Ansätze für Protokolle, mit denen Agenten sich gegenseitig über ihre Fähigkeiten austauschen können. Robin vergleicht den aktuellen Stand mit „Super Nintendo-Level“ – was aber nicht heißt, dass das Ganze ungefährlich wäre. Denn die nächste Iteration ist vielleicht nicht weit entfernt.
Wir diskutieren, wie Agentic AI bereits heute in Projekten auftaucht, wo es echte Automatisierungsvorteile gibt – und wo wir dringend Grenzen ziehen müssen. Besonders spannend wird es, wenn Robin beschreibt, wie sich unsere Erwartungen an „Tools“ verändern: Weg vom klassischen Button-Klick, hin zur Zieldefinition – und der Agent übernimmt.
Am Ende steht die Frage: Wie behalten wir als Entwickler:innen die Kontrolle – und wie gestalten wir diese Systeme so, dass sie nicht nur mächtig, sondern auch nachvollziehbar und verantwortungsvoll sind?

Keine Schaunotizen

LangChain
Ein populäres Framework für agentenbasierte KI-Anwendungen – bringt Tools, Speicher und Entscheidungslogik zusammen.
ReAct Prompting
Ein Konzept, das Denk- und Aktionsschritte kombiniert – oft Basis für agentisches Verhalten bei LLMs.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 662: Entwickeln mit KI
Tue, 20 May 2025 06:00:09 +0000
Diesmal zu Gast: Jens Jacobsen (benutzerfreun.de, LinkedIn), Autor & Digital-Experte. Jens schrieb das Buch Websites entwickeln mit KI und erzählt Peter und Vanessa, wie das am besten geht, und warum er lieber von Webseiten „besser“, anstatt „schneller“ entwickeln spricht. Das Buch richtet sich an alle mit einem gewissen technischen Verständnis – etwa Produktmanager:innen, Entwickler:innen oder Designer:innen – aber auch erfahrenere Techies werden darin wertvolle Einblicke finden.

Unser Sponsor
  

Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?

Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!
Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf workshops.de/ki.

Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!

Schaunotizen

[00:01:30] Entwickeln mit KI
Im Gespräch geht es darum, warum es nicht ausreicht, sich in einer Minute eine Website „zusammenklicken“ zu lassen – selbst wenn einem viele Tools genau das versprechen. Zwar entsteht dann formal eine Webseite, doch in den seltensten Fällen eine gute. Jens betont, wie wichtig es ist, sich zunächst Gedanken über das Geschäftsmodell zu machen, bevor man überhaupt an die technische Umsetzung denkt. Besonders bei Portfolio-Seiten oder kleinen Online-Shops kann man zwar viel mit KI erledigen, aber ohne Substanz nützt das beste Tool wenig.

Wir diskutieren auch die wachsende Zahl an KI-Tools: Jens hat über 70 davon getestet – und nur drei haben ihn wirklich überzeugt. Die meisten Tools funktionieren nach einem simplen Prinzip: Man gibt einen Titel, vielleicht ein paar Stichpunkte ein, und bekommt daraufhin eine generische Website auf Basis eines Templates. Jens warnt davor, sich von solchen „auf Knopfdruck“-Lösungen blenden zu lassen. Gute Tools hingegen stellen erst einmal Fragen – etwa zur Zielgruppe oder zur Struktur der Seite – und entwickeln daraus eine erste Sitemap oder sogar Wireframes.
Auch das Thema Arbeitswelt spielt eine Rolle: Wird KI langfristig Jobs im UX-Design oder Vertrieb gefährden, weil es inzwischen KI-gestütztes User-Testing und automatisierte Verkaufsanalysen gibt? Peter merkt dazu an: „Wenn’s nichts kostet, kann man’s auch siebenmal ausprobieren.“ Eine Realität, die einerseits Chancen schafft, andererseits aber auch Druck auf klassische Rollen im Unternehmen ausüben könnte. Doch Jens kontert damit, dass man dann eben sieben Versionen von irgendeiner Webseite hätte, aber nicht einer, die den eigentlichen Zweck tatsächlich richtig erfüllt.
Am Ende bleibt festzuhalten: Man muss heutzutage wohl leider nicht mehr programmieren können, um mit KI Webseiten zu erstellen – aber ein gewisses technisches Verständnis hilft. Das heißt aber noch lange nicht, dass eine sinnvolle Webseite dabei herauspurzelt. Nur eben irgendeine. Die eigentliche Arbeit – worum es geht, die Texte, die Bilder – dabei kann KI sehr hilfreich sein und als ein Sparring-Partner dienen. Wer nicht nur auf schnelle Ergebnisse, sondern auf durchdachte, nachhaltige Weblösungen setzt, findet in Jens‘ Buch einen hilfreichen Wegweiser durch die Tool-Landschaft und den KI-Dschungel.


Links

📘 Das Buch von Jens: Websites entwickeln mit KI
Ein praktischer Guide für alle, die Webseiten effizient mit KI planen und umsetzen wollen – ohne dabei Qualität und Strategie aus dem Blick zu verlieren.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 661: SelfHTML wird 30 – ein Web-Urgestein feiert Geburtstag 🥳
Tue, 13 May 2025 06:59:13 +0000
SelfHTML gehört zu den ganz Großen der deutschsprachigen Weblandschaft – und das seit 1995. Wer sich in den Nullerjahren HTML, CSS oder JavaScript beigebracht hat, ist an dieser Seite kaum vorbeigekommen. Grund genug, dieses Jubiläum mit einer eigenen Folge zu feiern!
In dieser Revision spricht Schepp mit Matthias Scharwies – aktiver Maintainer, Mitgestalter der Community und einer der Menschen, die SelfHTML bis heute weiterentwickeln. Wir sprechen über die Geschichte, die Gegenwart und die Zukunft einer der traditionsreichsten Dokumentationen rund ums Web.
Schaunotizen

[00:01:12] SelfHTML wird 30!
Matthias erzählt, wie SelfHTML in den 90ern entstanden ist, wie es zu einem Fixpunkt für Web-Einsteiger:innen wurde und welche Meilensteine das Projekt seitdem erlebt hat. Vom klassischen HTML-Handbuch bis zum heutigen Community-Wiki – vieles hat sich verändert, aber der Geist ist geblieben.
Wir reden darüber, wie sich das Projekt über die Jahre hinweg geöffnet hat, wie Beiträge organisiert sind, wie man selbst mitmachen kann – und warum das Forum nach wie vor ein guter Ort ist, um Fragen zu stellen. Auch spannende Randgeschichten aus der Redaktion kommen zur Sprache.
Ein Highlight im Jubiläumsjahr ist das SelfHTML-Treffen 2025 in Mannheim, das als Unconference stattfindet. Matthias gibt einen Ausblick darauf, was dort geplant ist, warum sich ein Besuch lohnt – und wie viel Motivation und Energie aus solchen persönlichen Begegnungen entstehen kann.
Natürlich schauen wir auch nach vorn: Was fehlt aktuell? Wie lassen sich neue Webstandards wie „Open UI“ einbauen? Und wie bleibt man bei einem so gewachsenen Projekt überhaupt handlungsfähig? Matthias gibt Einblicke in Tools, Arbeitsweisen und den pragmatischen Umgang mit Legacy-Strukturen.

Links

SelfHTML Wiki
Die aktuelle Community-gepflegte Version der SelfHTML-Dokumentation – mit allem, was man über HTML, CSS und JavaScript wissen sollte.
Das SelfHTML Forum
Der Diskussionsbereich für alle, die Fragen haben oder mitdiskutieren wollen – seit Jahren aktiv und gut moderiert.
SelfHTML-Treffen 2025 in Mannheim
Das Community-Event zum 30. Jubiläum: eine Unconference, bei der sich die Szene trifft, diskutiert, plant – und feiert.
Can I use
Ein beliebtes Tool, das in der Folge erwähnt wird – hilfreich, um herauszufinden, welche Webfeatures in welchen Browsern funktionieren.
Open UI
Ein Community-Projekt zur Standardisierung von UI-Komponenten im Web.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 660: PHP im Jahr 2025 – Ökosystem zwischen Kontinuität und Wandel
Wed, 07 May 2025 10:00:33 +0000
PHP ist eine dieser Sprachen, die man leicht unterschätzt – und die trotzdem nicht weggeht. Im Gegenteil: Sie hat sich über Jahrzehnte hinweg weiterentwickelt und ist heute das Fundament unzähliger produktiver Anwendungen. Grund genug für uns, einen genaueren Blick auf den Status quo und die Entwicklung dahinter zu werfen.

Unser Sponsor
  

    Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller

    Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um

    voneinander zu lernen.
    Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und

    Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends

    von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.
    Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.

Für diese Revision haben wir uns einen der zentralen Köpfe der PHP-Welt eingeladen: Sebastian Bergmann, Erfinder von PHPUnit, langjähriger Open-Source-Maintainer und pragmatischer Beobachter des Ökosystems (Web / LinkedIn / Mastodon). Gemeinsam mit Schepp und Hans spricht er über Technologie, Verantwortung und das Leben als jemand, der seit Jahrzehnten mit und an PHP arbeitet.
Schaunotizen

[00:01:03] PHP im Jahr 2025
Wir starten mit Sebastians Weg in die PHP-Welt: Wie kam es zur Entstehung von PHPUnit? Was war der Stand der Dinge damals – und warum hat sich Sebastian überhaupt entschlossen, ein eigenes Test-Framework zu bauen? Wir sprechen über die Anfangsjahre von PHP, über JUnit als Vorbild und den wilden Westen früher PHP-Projekte.
Danach werfen wir einen Blick auf das Jetzt: Wie steht es um das Vertrauen in PHP als Sprache? Welche Rolle spielen moderne Tools wie Composer, Frameworks wie Symfony oder Laravel – und was macht eigentlich die PHP Foundation genau? Sebastian schildert, wie sich das Ökosystem professionalisiert hat, aber an vielen Stellen trotzdem auf Freiwilligenarbeit beruht.
Natürlich reden wir auch über Tests: Was bedeutet gutes Testing im Jahr 2025? Wie sieht das Zusammenspiel mit Tools wie PHPStan oder Psalm aus? Und wie geht man mit Legacy-Code um, der eigentlich nie für Tests gedacht war? Sebastian teilt Einblicke aus seiner Beratungsarbeit mit Teams und erklärt, wie man pragmatisch Qualität sichert.
Ein wichtiger Teil des Gesprächs dreht sich um Open Source im Dauerbetrieb: Was bedeutet es, ein Projekt wie PHPUnit über Jahrzehnte hinweg zu pflegen? Wie hält man durch? Welche Erwartungen kommen von außen – und was kann die Community beitragen, damit das Ganze nicht auf Einzelpersonen lastet?
Zum Schluss schauen wir nach vorn: Welche Entwicklungen im PHP-Core lohnen sich im Auge zu behalten? Was fehlt der Sprache noch? Und was wünscht sich Sebastian von der nächsten Generation an Entwickler:innen, die vielleicht bald ihre ersten Pull Requests schreiben?

Links

PHPUnit
Das führende Test-Framework für PHP – entwickelt und gepflegt von Sebastian Bergmann seit über 25 Jahren.
PHP Foundation
Die Stiftung hinter der aktiven Weiterentwicklung der Sprache. Hier arbeiten festangestellte Entwickler:innen am PHP-Core.
Composer
Das Dependency-Management-Tool der Wahl für PHP – unerlässlich für moderne Projektstrukturen.
Symfony
Ein weitverbreitetes PHP-Framework mit Fokus auf Wiederverwendbarkeit, Konventionen und Skalierbarkeit.
Laravel
Ein modernes Full-Stack-Framework für PHP mit einem großen Ökosystem und starker Community.
PHPStan
Ein statischer Code-Analyzer, der potenzielle Fehler in PHP-Projekten schon zur Entwicklungszeit erkennt.
Psalm
Ein weiteres beliebtes Tool zur statischen Analyse von PHP-Code – mit Fokus auf Type Safety.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 659: Meetings, Memos, Mindset: Büro-Lifehacks für Webdevs
Tue, 29 Apr 2025 11:51:21 +0000
In dieser Revision ist Melanie Patrick zu Gast – und bringt Skills mit, die man im Webdev-Alltag gerne mal unterschätzt: Organisation, Struktur, Planung und Kommunikation. Kurz: Life Hacks aus dem Büroalltag, die jede:r gebrauchen kann!
Schaunotizen

[00:01:14] Meetings, Memos, Mindset: Büro-Lifehacks für Webdevs
Wir sprechen über Tools und Tricks, die das Chaos im Kopf und auf dem Desktop minimieren – von einfachen Backups bis hin zu cleveren Ablagesystemen. Melanie erzählt, wie man sich in stressigen Situationen selbst austrickst, wie man Meetings effizient gestaltet und warum man auch als Entwickler:in etwas von der „Sekretärinnen-Schule“ lernen kann.
Nebenbei geht’s um klassische Software-Fails, digitale To-do-Listen, Passwort-Strategien und wie man durch gute Vorbereitung im Team einfach mehr Ruhe reinbringt. Ein Gespräch über Verantwortung, Vertrauen, Teamplay – und warum gute Organisation nichts mit Kontrollzwang zu tun hat.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 658: State of JS 2024, Teil 4/4
Tue, 22 Apr 2025 09:58:02 +0000
Peter, Stefan und Vanessa nehmen sich auch in dieser Woche wieder die Ergebnisse des State of JS 2024 vor. In Teil 1 haben wir uns auf die neuen JavaScript-Features gestürzt, in Teil 2 ging’s um Pain Points in JavaScript und den Browser-APIs, dazu die Leseliste und die Libs. Teil 3 war dann ganz den Meta-Frameworks und dem Testing gewidmet. Jetzt im letzten Teil schauen wir noch auf die Themen „Mobile & Desktop“, „Build Tools“, „Monorepo Tools“ und „Sonstige Tools“.

Unser Sponsor
  

    Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller

    Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um

    voneinander zu lernen.
    Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und

    Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends

    von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.
    Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.

Schaunotizen

[00:02:49] Mobile & Desktop
App oder Webseite? Bei uns gehen die Meinungen auseinander: Vanessa nutzt gern installierbare Desktop-Apps, während Stefan lieber einfach einen Tab offen lässt. Einig sind wir uns: Egal ob App oder Web – das Verhalten sollte konsistent bleiben. Besonders spannend wird’s beim Blick auf Electron vs. Tauri. Tauri basiert auf Rust und hat in den letzten Jahren deutlich an Aufmerksamkeit gewonnen – nicht zuletzt, weil es deutlich schlanker daherkommt.
  
[00:09:29] Build Tools
Webpack ist zwar noch immer weit verbreitet, aber wir sind uns nicht sicher, ob das heute noch gerechtfertigt ist. Stefan kritisiert den „JavaScript-first“-Ansatz und die vielen Loader. Peter ist entspannter unterwegs: Hauptsache, es funktioniert. Unsere Build-Tool-Favoriten: tsc, esbuild und Vite. Wir sprechen auch über dts-Bundler für Typdefinitionen und den (möglichen) Verzicht auf Bundler mit Import Maps.
  
[00:25:37] Monorepo Tools
Monorepos – Fluch oder Segen? Vanessa beschreibt typische Stolpersteine bei Multirepos, etwa mit npm link oder Symlinks. Wir finden: Monorepos sind weniger eine technische Entscheidung als eine organisatorische. Peter erzählt von seinem persönlichen „Sirpepe-Universum“-Monorepo – der zeigt, dass das Konzept auch für Einzelpersonen nützlich sein kann.
  
[00:55:26] Sonstige Tools
Wir diskutieren Tools wie Lodash und Axios – früher unverzichtbar, heute eher „meh“. Mit der neuen Temporal API könnten auch Libraries wie Moment.js bald Geschichte sein. Vanessa empfiehlt VueUse, Stefan feiert weiterhin Express, und wir nehmen Bun kritisch unter die Lupe. Fazit: Viel Hype, aber oft wenig Substanz. Deno und Cloudflare Workers schneiden da besser ab – vor allem in echten Projekten.
  

Ähnliche Revisionen

Revision 656: State of JS 2024, Teil 3/4
Revision 655: State of JS 2024, Teil 2/4
Revision 653: State of JS 2024, Teil 1/4
Revision 652: Automatisiertes Testing mit Playwright
Revision 633: State of CSS 2024, Teil 1/3
Revision 634: State of CSS 2024, Teil 2/3
Revision 635: State of CSS 2024, Teil 3/3

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 657: Resumable Uploads
Tue, 15 Apr 2025 06:59:21 +0000
In dieser Revision sprechen wir mit Marius Kleidl (Web / LinkedIn / Mastodon / GitHub), Webentwickler bei Transloadit und Mitwirkender am Open-Source-Projekt TUS, über das Thema Resumable Uploads – also Datei-Uploads, die fortgesetzt werden können, wenn zwischendurch mal die Verbindung abraucht oder das Tab versehentlich geschlossen wird.
Schaunotizen

[00:01:13] Resumable Uploads
Wir starten mit der Frage, warum klassische Upload-Methoden im Web oft unzuverlässig sind – vor allem bei großen Dateien wie Videos. Gerade bei instabilen Verbindungen oder auf Mobilgeräten ist Frust vorprogrammiert: Einmal abbrechen heißt meistens von vorne anfangen. Mit Resumable Uploads gehört das der Vergangenheit an. Stattdessen kann der Upload pausieren, später fortgesetzt werden – ganz ohne Datenverlust.
Im Zentrum der Folge steht TUS, ein Open-Source-Protokoll für Resumable Uploads, das Marius mitentwickelt. Wir reden über die Entstehung des Projekts, die technischen Grundlagen und wie man TUS in eigene Anwendungen integriert – sei es in Node.js, Go oder mit vorhandenen Client-Libraries. Besonders spannend: Die Spezifikation wird derzeit mit der IETF abgestimmt, mit dem Ziel, Resumable Uploads langfristig als offiziellen HTTP-Standard zu etablieren.
Marius gibt uns außerdem einen Einblick in die Community-Arbeit hinter TUS, den Beitrag anderer Open-Source-Projekte und wie Entwickler:innen durch eigene Implementierungen zur Verbesserung beitragen können. Wir streifen Themen wie Caching, Storage-Backends und was eigentlich alles im Hintergrund passieren muss, damit so ein Upload wirklich „resumable“ ist.
Natürlich kommen auch die praktischen Fragen nicht zu kurz: Was muss man beachten, wenn man Resumable Uploads in ein bestehendes Projekt integriert? Wie sieht die Kommunikation zwischen Client und Server aus? Und wie viel Aufwand steckt wirklich dahinter?

Links

TUS-Projekt
Die offizielle Webseite des TUS-Projekts, welches Resumable Uploads ermöglicht.
Transloadit
Der Dienstleister für File-Processing, der Resumable Uploads unterstützt und individuelle Lösungen anbietet.
Uppy
Ein Open-Source-Projekt, das eine flexible API für den Datei-Upload aus verschiedenen Quellen bereitstellt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 656: State of JS 2024, Teil 3/4
Tue, 08 Apr 2025 06:59:07 +0000
Peter, Stefan und Vanessa besprechen auch diese Woche wieder die Ergebnisse des State of JS 2024. In Teil 1 stürzten sich die Hosts vor allem auf die neuen JavaScript Features, in Teil 2 besprachen sie die Pain Points von JavaScript und Browser APIs,  die Leseliste und die Bibliotheken. In diesem vorletzten Teil schaffen die Hosts ganze zwei weitere Seiten der Umfrage: Meta-Frameworks und Testing.
Schaunotizen

[00:01:17] Meta-Frameworks
Die Hosts wenden sich zunächst der Frage zu, was Meta Frameworks denn eigentlich sind. Bekannte Namen sind Nuxt, Next.js, Remix, SvelteKit, etc. Doch was genau was so ein Meta Framework aus? Ist es eine „All in One“ Lösung? Muss es zwangsweise auf einem anderen Framework basieren? Das bringt uns auch zu einer Endlos-Diskussion: Ist React ein Framework oder eine Library (deutsch: Bibliothek)? Wobei, React hat diese Frage nun selbst beantwortet: Es ist eine Library. Nun gut, die Hosts einigen sich darauf, dass man eine gewisse Erwartungshaltung an Meta-Frameworks hat: Sie kommen mit einem Router, Zustandsverwaltung (State Management), SSR und SSG und weiteren bereits eingebauten Features.
Meta-Frameworks kommen mit diesen vielen nützlichen Features, keine Frage. Dennoch stellt man auch eine neue Abhängigkeit her. Das Benutzen dieser Meta-Frameworks kann es schwieriger machen, Bugs zu finden und zu fixen. Wie so oft, wenn man nicht mehr die Kontrolle über den kompletten Code hat. Sie können auch mit Sicherheitslücken kommen, wie es kürzlich der Fall bei Next.js war.
Wie auch in den beiden vorherigen Teilen sind sich die Hosts wieder in einem Punkt sicher: Es kommt auf die Entwickler:innen an, nicht auf das Meta-Framework.
Kleine Bibliotheken wie Eleventy sind dennoch immer eine gute Wahl. Das liegt bei Eleventy daran, dass man HTML und CSS losgelöst von dem Tool schreibt. Das ermöglicht eine leichte Migration in der Zukunft.
[00:43:32] Testing
Bei dem Thema Testing leben die Hosts in verschiedenen Welten. Während Vanessa sich schon seit Jahren mi Tests in der Welt von Frontend Frameworks beschäftigt, hat der in der Rust-Welt lebende Stefan kaum Berührungspunkte mit Framework-Component Testing und kann die ganze Problematik daher gar nicht so genau nachvollziehen. Vanessa klärt also zunächst einmal über die ganze Tragödie von Unit Tests über Component Tests zu End to End Tests oder doch auch Visual Regression Tests und Snapshot Tests auf. Die Umfrage verrät, dass aktuell viel Jest eingesetzt wird, jedoch niemand mehr so richtig glücklich mit diesem Tool ist. Vitest ist stark auf dem Vormasch, genauso wie Playwright. In Revision 652 sprach kürzlich erst Stefan Judis über automatisiertes Testing mit Playwright.

Ähnliche Revisionen

Revision 655: State of JS 2024, Teil 2/4
Revision 653: State of JS 2024, Teil 1/4
Revision 652: Automatisiertes Testing mit Playwright
Revision 633: State of CSS 2024, Teil 1/3
Revision 634: State of CSS 2024, Teil 2/3
Revision 635: State of CSS 2024, Teil 3/3

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 655: State of JS 2024, Teil 2/4
Tue, 01 Apr 2025 09:21:49 +0000
Peter, Stefan und Vanessa besprechen weiterhin die Ergebnisse des State of JS 2024, so wie in der Vergangenheit auch bereits der State of CSS (Revision 633-635) besprochen wurden. In Teil 1 stürzten sich die Hosts vor allem auf die neuen JavaScript Features. Nun geht es weiter mit den Schmerzpunkten von JavaScript und Browser APIs,  der Leseliste und den Bibliotheken.
Schaunotizen

[00:01:35] JavaScript Pain Points
Die JavaScript Pain Points Angaben in der Umfrage kamen durch eine Freitext Eingabe in der Umfrage zustande, Wie Peter, Stefan und Vanessa finden, eine wichtige Zusatzinformation, um die Ergebnisse etwas besser interpretieren zu können. Denn diese sind bei näherem Betrachten der eigentlichen Antworten gar nicht mehr so konkret wie die Liste an Kurzantworten erst erscheinen lässt. Ein viel besprochenes Thema ist EcmaScript Module & Common JS. Das ES Module ist ein standardisiertes JavaScript-Modulsystem, das in ECMAScript 2015 (ES6) eingeführt wurde. Es wird in modernen Browsern und Node.js unterstützt. Das CJS Modulsystem wird hauptsächlich in Node.js verwendet. Es wurde entwickelt, bevor JavaScript ein offizielles Modulsystem hatte. Vor allem die Migration von CJS auf ESM wird als komplex und kompliziert genannt.
Ebenfalls benannt wird das Fehlen von Typen. Hierbei kommen Peter und Stefan zu dem Schluss, dass man TypeScript „einfach“ dazu installieren, oder notfalls per IDE Extension hinzufügen kann. Sie sind also anderer Meinung als die Umfrage Ergebnisse.
Der nächste Schmerzpunkt, der genannt wird, ist der, der fehlenden Standardbibliothek. Hier argumentiert Stefan, dass das eigentlich kein Problem von der Sprache JavaScript, sondern der Runtime sei. Er streut nebenbei das Wissen herein, dass es ein Standard Committee gibt, dass sich nun um serverseitige Runtimes kümmern wird: das TC55. Stefan erzählt weiterhin, Rust hätte noch viel weniger Standards, da wäre alles frei konfigurierbar.
Der letzten besprochenen Schmerzpunkt ist die asynchrone Programmierung. Da hätte Stefan gerne viele mehr Prozente gesehen. Denn gerade seit es async/await gibt, gibt es viele Verständnislücken über die asynchrone Programmierung. Er weist auf den hilfreichen Blogartikel „What color is your function“ von Bob Nystrom hin.
[00:30:35] Browser API Pain Points und Readlist
Die Liste der Schmerzpunkte über Browser APIs ist doch sehr erheiternd zu lesen: Safari und Firefox. Und eigentlich auch Chrome. Peter, Stefan und Vanessa arbeiten sich durch die Liste und finden heraus: Das Hautproblem sei wohl, dass Chrome einige APIs freischaltet, die die anderen Browser noch nicht unterstützen. Dadurch gibt es Indifferenzen zwischen den Browsern. Doch ob es wirklich die Lösung ist, dass Chrome sich besser absprechen könnte?
In Teil 1 besprachen die Hosts das JavaScript Feature error.cause. Umso schöner nun zu sehen, dass viele der Ausfüllenden der Umfrage sich auch dieses Feature auf die Leseliste gesetzt haben.
[00:44:04] Bibliotheken
Über die Bibliotheken gibt es massig viele Daten anzuschauen. Doch für wen sind diese nun eigentlich interessant? Vermutlich eher, wenn man Inhalte für Blogartikel und Vorträge sammelt. Dennoch wüten sich Peter, Stefan und Vanessa durch die Daten. Webpack ist das meistebenuzte Tool, jedoch nicht das Beliebteste. React und Vite stehen beide hoch im Kurs. Zum konkreten Thema der JavaScript Frameworks besprechen die Hosts, dass man wohl irgendwie eine Entscheidung treffen muss – und richtig falsch ist keine, aber wohl oft trifft man wohl auch nicht die Richtige, wie man an den Schmerzpunkten wieder sieht. Denn hier werden Frameworks auch oft als zu komplex beschrieben. Die Hosts finden, dass Entwickler und Entwicklerinnen generell flexibel sein müssen in ihrem Beruf. Und jederzeit zwischen Frameworks wechseln können sollten.

Links

State of JS – Outreach

Ähnliche Revisionen

Revision 653: State of JS 2024, Teil 1/4
Revision 633: State of CSS 2024, Teil 1/3
Revision 634: State of CSS 2024, Teil 2/3
Revision 635: State of CSS 2024, Teil 3/3




Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 654: TypeScript 5.8 – in Zukunft nur noch smarter Linter?
Sat, 29 Mar 2025 20:53:14 +0000
Wusstet ihr, dass man mit der richtigen TypeScript-Config plötzlich wieder Lust auf JavaScript bekommt? Kein Witz – wir haben’s ausprobiert! 
Schaunotizen

[00:01:08] TypeScript 5.8
Wir steigen ein mit einem TypeScript-Feature, das Stefan so begeistert hat, dass er direkt eine ganze Revision darüber machen wollte: die „Erasable Syntax Only“-Option. Wir diskutieren, warum diese Einstellung TypeScript endlich wieder zu einem erfreulichen Tool macht – besonders in Verbindung mit einer besseren Developer Experience und weniger magischem Code.
Danach nehmen wir TypeScript in Node-Projekten auseinander, sprechen über das Für und Wider von Linting vs. Type-Checking zur Laufzeit und streifen dabei auch Themen wie Build-Systeme, tsc vs. esbuild und warum man manchmal doch wieder Bock auf „einfaches JavaScript“ bekommt.
Zum Ende hin geht’s noch kurz um die Realität in Teams, in denen nicht alle TypeScript gleich intensiv nutzen – und um die Frage, ob TypeScript bald nur noch Linter mit Typen sein sollte.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 653: State of JS 2024, Teil 1/4
Tue, 18 Mar 2025 06:59:01 +0000
Peter, Stefan und Vanessa besprechen die Ergebnisse des State of JS 2024, so wie in der Vergangenheit auch bereits der State of CSS (Revision 633-635) besprochen wurden. In Teil 1 stürzen sich die Hosts vor allem auf die neuen JavaScript Features.
Schaunotizen

[00:03:44] State of JS 2024 – Teil 1
Peter, Stefan und Vanessa sind sich zumindest bei Einem einig: Die Motivation, um die Umfragen „State of X“ auszufüllen, ist die eigene Weiterbildung. Dieses Jahr gab es 14.000 Personen, die die Umfrage ausgefüllt haben. Ob die Ergebnisse generell nur eher etwas über Enthusiasten aussagt?

Egal ob JS, HTML oder CSS. Gar nicht mehr zu einig waren sie sich dann darin, wie interessant die einzelnen abgefragten JavaScript Features sind, oder auch wie interessant die Ergebnisse davon.

Zuerst widmen sich die Hosts der Funktion groupBy. Doch vielmehr als nur über die Funktion zu sprechen, besprechen Peter, Stefan und Vanessa, ob es sich lohnt, bestehende Alternativen mit der nun nativen Funktion auszutauschen. Stefan spricht sich für eine Verschlankung der Codebasis aus und plädiert dafür, neue Sprachfunktionen zu nutzen, sobald sie verfügbar sind. Peter wirft die Frage auf, welcher bestehende Code dadurch ersetzt würde. Ein Beispiel dafür ist eine selbstgeschriebene groupBy-Funktion, die nicht ersetzt wird, weil sie gut funktioniert und leicht anders arbeitet als mögliche Alternativen. Zudem gibt es hier kein Risiko. Anders sieht es aus, wenn externe Programmbibliotheken ins Spiel kommen – hier könnten unvorhergesehene Änderungen auftreten, und generell ist das Ziel, die Anzahl an Abhängigkeiten möglichst gering zu halten.Im Gespräch über die bekannte Bibliothek Lodash wird darauf hingewiesen, dass man das Rad nicht neu erfinden möchte. Gleichzeitig merkt Peter an, dass es in bestimmten Fällen doch notwendig sein kann, eigene Lösungen zu schreiben, um spezielle Anforderungen zu erfüllen. Insgesamt herrscht jedoch Einigkeit darüber, dass Lodash nicht mehr zeitgemäß ist. Viele seiner Funktionen stammen aus einer anderen Entwicklungsära und lassen sich mittlerweile durch native Sprachmittel ersetzen.
[00:21:03] Syntax features: Private Fields, error.cause
Neben diesen strategischen Überlegungen geht es auch um aktuelle Neuerungen in JavaScript. Private Felder für Klassen erweisen sich als nützlich, um Objekte zu erweitern – etwa durch zusätzliche Methoden für Zeichenketten oder Mengen. Die Fehlerbehandlung wird mit der cause-Eigenschaft verbessert. Damit ist es möglich, einen abgefangenen Fehler mit einer neuen Meldung erneut auszulösen und dabei die ursprüngliche Ursache zu erhalten, was insbesondere für Fehlerprotokollierung nützlich ist. Wer sich näher damit beschäftigen möchte, findet eine ausführliche Beschreibung bei MDN.
[00:30:36] Nullish Coalescing
Ein weiteres Thema ist der sogenannte Nullish Koaleszenzoperator (??), die sich vom logischen Oder-Operator (||) dadurch unterscheidet, dass sie nur bei null und undefined greift, während || auf alle falschen Werte reagiert – also auch auf false, die Zahl 0, leere Zeichenketten oder NaN. Beide Operatoren lassen sich beliebig verketten. MDN. Eng damit verbunden ist die Kurzschreibweise für logische Zuweisungen (||=), die es ermöglicht, Werte nur dann zu setzen, wenn sie bislang einen falschen Zustand haben. MDN.

Ein weiteres kleines, aber oft übersehenes Detail ist die sogenannte Hashbang-Syntax (#!). Diese ist vor allem in Kommandozeilen-Werkzeugen von Bedeutung, die in JavaScript geschrieben sind. Sie ermöglicht es, Skripte ohne expliziten Aufruf der Laufzeitumgebung auszuführen, etwa beim Starten eines Programms aus einer Paketkonfigurationsdatei heraus.
[00:34:40] Logical Assignment
Inneren Feldern von Objekten lassen sich nun auch neue Werte zuweisen, wenn ihr aktueller Wert falsy ist. Also wiederum nun wieder alle falsy Werte im Gegensatz zu dem vorher besprochenem Thema.
[00:41:12] String Features, Array Features
Beim Blick auf die neuen Möglichkeiten zur Verarbeitung von Zeichenketten zeigt sich, dass diese nur selten gebraucht werden. Ein Beispiel ist die Methode replaceAll, die etwa genutzt werden kann, um überflüssige Leerzeichen aus nutzergenerierten Inhalten zu entfernen. Zum Thema Array Features gibt es eine Liste von Funktionen, die es eigentlich vorher auch schon so gab – nur jetzt sind die Objekte immutable geworden. Also die Funktion ändert nicht mehr das Originalobjekt, sondern gibt ein neues Array wieder.

Doch ihr Nutzen hält sich unserer Hosts nach in Grenzen. Besonders in reaktiven Anwendungsarchitekturen wie React könnten sie jedoch für die Verarbeitung unveränderlicher Daten hilfreich sein.
[00:46:36] Async Features, Set Features, Group Features, Language Pain Points
In der asynchronen Programmierung zeigt sich, dass Promise.allSettled hilfreich ist, wenn auf mehrere Dateien für die Lokalisierung einer Anwendung gewartet werden muss.
Neue Funktionen für Mengen (Sets) sind zwar interessant, aber wären mit einer besseren grafischen Darstellung leichter verständlich gewesen.
Die Beantwortung der Nutzungshäufigkeit von groupBy wird kritisch hinterfragt. Nur ein Drittel der Befragten gibt an, diese Funktion zu verwenden – doch möglicherweise liegt das auch daran, dass viele bereits eigene Lösungen im Einsatz haben.

Schließlich geht es um den Einsatz von Programmiersprachen und Werkzeugen. Die Nutzung von TypeScript ist ungebrochen hoch, mit einer Umfragequote von nahezu 100 Prozent. Künstliche Intelligenz spielt im Entwicklungsalltag eine eher untergeordnete Rolle: Ein Fünftel verzichtet ganz darauf. JavaScript wird von 95 Prozent der Befragten im Beruf eingesetzt, 40 Prozent programmieren auch in der Freizeit damit – wobei hier eine gewisse Überschneidung wahrscheinlich ist.
[00:55:21] Browser APIs
Abschließend widmen sich den Hosts den Antworten zum Thema der Browser APIs. Es gint viel Begeisterung für die bevorstehende Temporal-API, die die Arbeit mit Zeitwerten erheblich vereinfachen wird. MDN. Ein oft geäußerter Wunsch bleibt die Einführung statischer Typisierung direkt in JavaScript sowie umfangreichere Standardbibliotheken.

Links

State of JS – Outreach

Ähnliche Revisionen

Revision 633: State of CSS 2024, Teil 1/3
Revision 634: State of CSS 2024, Teil 2/3
Revision 635: State of CSS 2024, Teil 3/3

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 652: Automatisiertes Testing mit Playwright
Tue, 11 Mar 2025 06:59:53 +0000
In dieser Episode sprechen wir mit Stefan Judis über Playwright. Stefan ist Entwickler, Blogger, Autor des „Web Weekly“-Newsletters und Speaker mit einer Leidenschaft für Web-Technologien, insbesondere für Web-Performance, neue Features in modernen Browsern und Barrierefreiheit.

Unser Sponsor


Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um voneinander zu lernen.
Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.
Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.


Schaunotizen

[00:02:09] Playwright
Playwright ist ein ein leistungsfähiges End-to-End-Testing-Framework von Microsoft und darauf ausgelegt, stabile und zuverlässige Tests für Webanwendungen zu ermöglichen. Im Gegensatz zu älteren Test-Frameworks wie Selenium unterstützt Playwright moderne Features wie automatische Wartezeiten, Testisolierung und die Möglichkeit, mit mehreren Browser-Kontexten gleichzeitig zu arbeiten. Entwickler können Tests für Chromium (Chrome und Edge), WebKit (Safari) und Firefox schreiben – und das mit nur einer einzigen API.
Ein zentrales Feature ist die Fähigkeit, Tests parallel auszuführen, was die Laufzeit von Test-Suites erheblich reduziert und die Continuous-Integration-Pipelines beschleunigt. Besonders für Teams, die viele Tests automatisieren, bietet Playwright hier große Vorteile.
Ein wichtiger Aspekt, über den wir sprechen, ist die Art und Weise, wie Playwright UI-Tests durchführt. Die Auswahl von Elementen ist dabei besonders robust gelöst: Playwright nutzt sogenannte „Auto-Waits“, das heißt, es wartet automatisch, bis ein Element im DOM vorhanden, sichtbar und interaktiv ist, bevor eine Interaktion stattfindet. Das reduziert eine der größten Frustquellen beim End-to-End-Testing – nämlich Tests, die aufgrund von Timing-Problemen fehlschlagen.
Zusätzlich erlaubt Playwright komplexe Selektoren, darunter CSS-, XPath- und Text-Selektoren, aber auch speziellere Methoden wie getByRole, um barrierefreie Elemente gezielt zu testen. Besonders praktisch ist auch, dass Playwright Shadow DOM und iFrames unterstützt, womit es sich besonders gut für moderne Webanwendungen eignet, die diese Techniken intensiv nutzen.
Ein weiteres Thema sind Race Conditions. Da Playwright nicht nur die UI testet, sondern auch Interaktionen mit dem DOM und asynchrone Prozesse genau beobachten kann, hilft es, Probleme aufzudecken, die durch nicht deterministisches Verhalten entstehen. Gerade bei Single-Page-Applications oder Anwendungen mit vielen dynamischen Inhalten kann Playwright dazu beitragen, Bugs zu finden, die sonst nur schwer zu reproduzieren sind.
Wir sprechen außerdem über die Möglichkeiten von visuellem Regressiontesting mit Playwright. Theoretisch lassen sich Screenshots und sogar Videoaufnahmen von Testläufen erstellen, um Änderungen in der Benutzeroberfläche zu erkennen und zu überprüfen. Allerdings haben wir selbst diese Funktionalität noch nicht ausprobiert – deshalb interessiert uns: Nutzt ihr visuelles Regressiontesting mit Playwright? Welche Erfahrungen habt ihr damit gemacht?
Stefan gibt außerdem Tipps, wie sich Playwright in bestehende Continuous-Integration/Continuous-Deployment-Pipelines einbinden lässt. Besonders für Teams, die bereits mit CI/CD arbeiten, ist es wichtig, dass Test-Frameworks sich reibungslos in bestehende Workflows einfügen. Playwright bietet hier viele Optionen, darunter die Integration mit GitHub Actions, Jenkins und anderen CI-Systemen.
Ein weiteres Highlight ist die Playwright Trace Viewer-Funktion. Damit lassen sich Tests detailliert analysieren, indem sämtliche Interaktionen, DOM-Änderungen und Konsolen-Ausgaben einer Testausführung gespeichert und später Schritt für Schritt durchgegangen werden können. Das erleichtert die Fehlersuche nach einem gescheiterten Pipeline-Durchlauf erheblich.

Links

Playwright
Die Hauptseite von Playwright mit Dokumentation und Ressourcen.
Playwright GitHub Repository
Das offizielle GitHub-Repository von Playwright mit Quellcode und Beitragsrichtlinien.
Playwright Tutorial auf LambdaTest
Ein ausführliches Tutorial zur Nutzung von Playwright für automatisierte Tests.
Playwright Tutorial auf BrowserStack
Ein Leitfaden zur Verwendung von Playwright für Testautomatisierung.
Playwright Trace Viewer
Ein Tool zur detaillierten Analyse von Testläufen, um Fehler besser nachzuvollziehen.
Parallelisierung in Playwright
Eine Dokumentation zur effizienten Nutzung der Parallelisierungs-Funktionen von Playwright.
Element-Selektoren in Playwright
Übersicht über die verschiedenen Selektoren und deren Nutzung.
Web Weekly Newsletter
Stefan Judis‘ wöchentlicher Newsletter mit aktuellen Themen rund um Webentwicklung.
Unterstütze Stefan auf Patreon
Hilf Stefan dabei, weiterhin großartige Inhalte zu erstellen, indem du ihn auf Patreon unterstützt!
Playwright Tips
Stefans Playlist für Checkly mit Videos zu Playwright.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 651: Accessible Rich Internet Applications (ARIA)
Tue, 04 Mar 2025 16:17:50 +0000
In dieser Episode sprechen wir mit Marco Bretschneider über den ARIA-Standard und dessen Bedeutung für Barrierefreiheit bei dynamischen Webinhalten. Ein Accessibility-Audit war für sein Team der Ausgangspunkt, ARIA intensiver zu nutzen – daraus entstanden in seiner Firma die „ARIA of the week“-Sessions, die bis heute wertvolle Ergebnisse liefern.
Schaunotizen

[00:01:15] Accessible Rich Internet Applications (ARIA)
Wir starten mit einem historischen Exkurs zur Entstehung von ARIA und werfen einen Blick darauf, welche bestehenden Standards als Vorbild dienten. ARIA wurde nämlich stark von Accessibility-APIs aus der Desktop-Welt inspiriert, darunter Microsoft Active Accessibility (MSAA) und Apples Accessibility API. Diese Ansätze wurden auf das Web übertragen, um mit Technologien wie JavaScript, React und Angular umzugehen, die für assistive Technologien lange Zeit schwer zugänglich waren.
Marco erklärt, wie ARIA den Accessibility-Tree eines Browsers beeinflusst und assistiven Technologien wie Screenreadern wichtige Zusatzinformationen liefert, die mit reinem HTML nicht immer verfügbar sind.
Anschließend gehen wir auf die Funktionsweise einer Auswahl des ARIA-Vokabulars ein. Wir sprechen etwa darüber, wie Tabs mit Rollen wie role="tablist" und Attributen wie aria-controls korrekt umgesetzt werden und warum bestimmte Tastatur-Interaktionen bei ARIA ein absolutes Muss sind. Außerdem reden wir über die Unterschiede zwischen Toggle-Buttons, Checkboxen und Switches sowie die Einsatzmöglichkeiten von Live-Regions mit aria-live.
Am Ende bleibt die zentrale Erkenntnis: ARIA ist ein mächtiges Werkzeug, aber es muss gezielt und mit Bedacht eingesetzt werden. Wichtig ist ein grundlegendes Verständnis des Accessibility-Trees. Gut umgesetztes ARIA macht dynamische Webinhalte nicht nur zugänglicher, sondern erleichtert auch Entwickler*innen die Arbeit, indem es Barrierefreiheit strukturiert und nachvollziehbar macht.

Links

Inclusive Front-End Design Patterns
Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.
Open UI
Eine Initiative zur Standardisierung von UI-Komponenten, die auch Barrierefreiheit im Blick hat.
Inclusive Components
Eine Website, die praktische Anleitungen und Beispiele bietet, um zugängliche UI-Komponenten zu entwickeln.
W3C ARIA Authoring Practices: Tabs
Offizielle W3C-Dokumentation zu Best Practices für die Umsetzung von Tabs mit ARIA.
HTML Spec: Link Type Next
Die offizielle HTML-Spezifikation zu den Link-Typen rel="next" und rel="prev".
Was ist Usability wirklich? (ProContext)
Ein Artikel, der das Konzept der Gebrauchstauglichkeit-Messung und die Stufen der Usability erklärt.
Inclusive Front-End Design Patterns
Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.
HTML Living Standard
Die aktuelle HTML-Spezifikation, die vom WHATWG gepflegt wird.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 650: Sustainable Web Design
Tue, 25 Feb 2025 06:59:49 +0000
In dieser Episode sprechen wir mit der freiberuflichen UX/UI-Designerin und Nachhaltigkeitsforscherin Sandy Dähnert (Web / LinkedIn) über die Herausforderungen und Chancen im nachhaltigen UX- und UI-Design.

Unser Sponsor


Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um voneinander zu lernen.
Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.
Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.


Schaunotizen

[00:02:08] Sustainable Web Design
Sandy beschäftigt sich seit 2018 intensiv mit diesem Thema und erklärt uns, was nachhaltiges Design bedeutet – und warum es weit über den ökologischen Aspekt hinausgeht. Wir richten unseren Blick auf die drei Dimensionen der Nachhaltigkeit: ökologisch, ökonomisch und sozial. Dabei wird schnell klar, dass der Fokus oft nur auf der Umwelt liegt, während Themen wie Barrierefreiheit, Diversität und ethisches Design genauso wichtig sind.
Ein zentraler Punkt unserer Diskussion ist die Rolle der Nutzerforschung. Wir müssen verstehen, wie unterschiedliche Interessen und Bedürfnisse die Gestaltung von Interfaces beeinflussen. Eine divers zusammengesetzte Nutzergruppe sorgt nicht nur für bessere Produkte, sondern macht auch unsere Verantwortung als Designer:innen deutlich. Sandy schlägt darüberhinaus aber auch vor, Personas nicht nur für Menschen, sondern auch für nicht-menschliche Elemente wie die Natur zu erstellen (sogenannte „Non-Human-Personas“), um die Auswirkungen unserer Designs auf die Umwelt besser zu berücksichtigen.
Natürlich schauen wir uns auch technische Entscheidungen an, die einen CO₂-Fußabdruck hinterlassen. Wie viel Daten eine Website überträgt, welche Hosting-Anbieter wir wählen und wie sich Design-Entscheidungen auf den Stromverbrauch auswirken – all das spielt eine Rolle. Sandy zeigt uns, dass minimalistisches Design nicht nur ästhetische Vorteile hat, sondern auch einen positiven Einfluss auf die Umwelt haben kann. Wir sprechen über Tools wie Website Carbon oder EcoGrader, die uns dabei helfen, die Performance und Nachhaltigkeit von Webseiten zu analysieren.
Zum Schluss reflektieren wir noch über unsere Verantwortung als Designer:innen und Unternehmen. Wir diskutieren, wie wir ethische Überlegungen in den Designprozess integrieren können, welche konkreten Schritte sich umsetzen lassen und warum es wichtig ist, sich kontinuierlich weiterzubilden. Nur wenn wir verschiedene Perspektiven einbeziehen und bewusste Entscheidungen treffen, können wir die Herausforderungen der Nachhaltigkeit meistern und echten Wandel vorantreiben. 🌱

Links

W3C Web Sustainability Guidelines
Richtlinien und Best Practices für nachhaltiges Webdesign
Green the Web
Sandys Webseite mit Ressourcen über nachhaltiges Design, Tools und Best-Practice-Beispielen.
Der Green the Web Podcast
Sandys Podcast über nachhaltiges UX/UI Design.
Green.io Konferenz
Eine Veranstaltung zum Thema nachhaltiges Design und Entwicklung.
Website Carbon
Analysiert den CO2-Fußabdruck von Webseiten und gibt Empfehlungen zur Reduktion.
EcoGrader
Ein weiteres Tool zur Bewertung der ökologischen Fußabdrücke von Webseiten.
Cost of a pixel color (Android Dev Summit ’18)
Dieser Vortrag zeigt, wie der Dark Mode den Energieverbrauch von OLED-Displays reduziert, und auch, dass blaue Pixel mehr Strom verbrauchen als andere Farben.
Introducing the energy saving concept of Lower Carbon Graphics
Developing and implementing a new idea which we believe has already saved energy in homes across the UK.
Switching from light to dark mode on apps and websites uses more energy
BBC R&D find energy saving recommendation doesn’t take into account user behaviour

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 649: Engineering KPIs
Tue, 18 Feb 2025 06:59:57 +0000
Schepp und Hans erörtern in dieser Revision, anlässlich eines Gastbeitrags zum Adventskalender des Engineering Kiosk Podcasts, die vielfältigen Aspekte von Engineering KPIs, deren Bedeutung für Benutzerinteraktion und Nutzererfahrung sowie die Notwendigkeit regelmäßiger Anpassungen im Einklang mit Unternehmenszielen.
Schaunotizen

[00:01:13] Engineering KPIs
Los geht’s mit einem Rückblick auf die Weihnachtsepisode beim Engineering Kiosk, in der sie erste Gedanken zu KPIs geteilt hatten. Schnell wird klar: KPIs sind genauso vielfältig wie die Perspektiven der beiden.
Hans bringt ein Beispiel aus der Praxis und erklärt, wie man die Performance eines Produkts messen kann – etwa in einem Online-Shop: Wie viele Besucher:innen kaufen wirklich etwas? Oder bei einer Video-Streaming-Plattform: Wie viele schauen regelmäßig und wie lange bleiben sie dran? Solche KPIs helfen nicht nur Entwicklerteams, sondern auch Produktverantwortlichen, die richtigen Entscheidungen zu treffen. Schepp wiederum macht deutlich, dass KPIs mehr als reine Technik sein sollten. Sie sollen auch die Benutzererfahrung verbessern. Ein Highlight in der Diskussion: die Core Web Vitals wie Largest Contentful Paint oder Cumulative Layout Shift – unverzichtbare Metriken für die Optimierung der User Experience (höre dazu auch Revision 533: Frontend Performance Metriken – Die Core Web Vitals). Am Ende sind sich beide einig: KPIs sollten immer aus der Sicht der Nutzer:innen betrachtet werden.
Ein weiterer wichtiger Punkt ist das regelmäßige Überprüfen und Anpassen bestehender KPIs. Hans plädiert für regelmäßige Meetings, um Metriken und Ziele auf Kurs zu halten. Auch das Thema Alerting thematisieren wir: Was tun, wenn KPIs plötzlich aus der Reihe tanzen? Schnelles Handeln ist hier entscheidend. Aber Achtung: Zu viele Metriken gleichzeitig sind kontraproduktiv. Ein Fokus auf die wirklich relevanten KPIs den größten Nutzen bringt – für Unternehmen und Nutzer:innen.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 648: Personal Web Sites
Mon, 10 Feb 2025 06:59:53 +0000
Mit Matthias Ott (Web, Mastodon, Newsletter) quatschen Schepp und Peter über das Indie Web im Allgemeinen und persönliche Websites im Besonderen.
Schaunotizen

[00:01:01] Personal Web Sites
Matthias ist der Schöpfer des Newsletters Own Your Web, in dem (unter anderem) die persönliche, selbstentwickelte und keinen Regeln gehorchende Webseite eine prominente Rolle spielt. Warum man eine Personal Web Site statt Social Media haben wollen könnte und wie diese gebaut sein könnte, ist Kernthema der Sendung. Faustregel: alles kann, nichts muss! Wir schauen uns ein paar Beispiele an (von Lynn Fisher bis CSS-Tricks), sprechen über technische wie inhaltliche Herausforderungen (z.B. Leser-Kommentare) Publikations-Paradigmen wie POSSE und den Umgang mit großen Plattformen. Wir enden mit einer Diskussion rund um RSS als Abo-Kanal, Syndikations-Mechanismus (z.B. via RSS Parrot) und Styling-Ziel für eine sehr hippe und coole Technologie namens XSLT.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 647: WCAG-Spezifikationen lesen und verstehen
Tue, 04 Feb 2025 06:59:03 +0000
Zur Fortsetzung der Barrierefreiheits-Mini-Podcast-Serie hatten Hans und Peter dieses Mal Nina Jameson zu Gast! Nina ist digitale Barrierefreiheitsexpertin und Co-Gründerin der Gehirngerecht Digital GmbH. Folgt ihr und ihrem Mitgründer auf LinkedIn oder hört euch einfach an, mit welcher Leichtigkeit sie unbedarfte Podcaster durch den WCAG-Dschungel führt!

Unser Sponsor


Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um voneinander zu lernen.
Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.
Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.


Schaunotizen

[00:02:17] WCAG-Spezifikationen lesen und verstehen
Wir kreisen in dieser Revision um die Web Content Accessibility Guidelines sowie verwandte Dokumente und Regulierungen. Nina erklärt die Struktur der Spezifikationen und wie sie für Otto Normalwebentwickler:in zu lesen und zu verstehen sind. Wir quatschen unter anderem über die Szenarien für die Anwendung der WCAG-Specs, wie die Erfolgskriterien funktionieren und sogar über die Spezifikation von Spezifikations-Conformance-Claims. Jenseits der W3C-Bleiwüsten-Wegweiser kommen wir nicht umhin, auch ein wenig über das leidige Thema der Umsetzung im Alltag zu sprechen. Was bringen European accessibility act und Barrierefreiheitsstärkungsgesetz, welche Webdev-Patterns stehen der Barrierefreiheit grundsätzlich entgegen und wie lässt sich Accessibility in die tägliche Webentwicklungs-Arbeit integrieren? Nina empfiehlt die Handreichungen der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik (z.B. für typische Bedienelemente, Rest stehe Publikationen auf bfit-bund.de) sowie die in der WCAG stets mitverlinkten Understanding– und How to Meet-Dokumente für die jeweiligen Erfolgskriterien. Am Ende streifen wir noch kurz das in Revision 646 bereits ausführlich beackerte Thema „automatisches Testing“. Nina empfiehlt axe DevTools, ARC Toolkit und die WAVE Web Accessibility Evaluation Tools, hat für Lighthouse hingegen nicht ganz so viel Enthusiasmus übrig.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 646: (Automatisiertes) Testing von Barrierefreiheit
Wed, 29 Jan 2025 06:00:19 +0000
In dieser Folge geht es darum, wie man Barrierefreiheit in der Web-Entwicklung richtig testet – mit Fokus auf praxisnahe Tipps. Anna Maier (LinkedIn / Mastodon), eine erfahrene Web-Entwicklerin und IT-Consultant, zeigt Hans und Schepp, worauf es wirklich ankommt.

Unser Sponsor


Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um voneinander zu lernen.
Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.
Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.


Schaunotizen

[00:02:00] (Automatisiertes) Testing von Barrierefreiheit
Wir starten direkt Mal mit der Feststellung, dass automatisierte Tests zwar ein guter Anfang, aber bei weitem nicht genug sind. Denn Tools wie WAVE oder Accessibility Insights können nämlich nur 20-30 Prozent der Barrieren erkennen. Anna erklärt, warum der Rest einfach menschliches Augenmaß und echte Nutzererfahrung braucht. Ohne manuelle Tests geht’s nicht – da kommen Maschinen einfach an ihre Grenzen.
Konsequenterweise lautet Annas Empfehlung, echte Nutzerinnen und Nutzer in den Testprozess einzubinden. Vor allem Menschen, die regelmäßig assistive Technologien wie Screenreader nutzen, liefern Einblicke, die kein Tool bieten kann. Außerdem gibt es Agenturen, die auf solche Benutzer-Tests spezialisiert sind. Das lohnt sich, um echte Probleme zu erkennen und zu lösen.
Wir sprechen über Linter-Tools, die schon während der Entwicklung helfen, typische Fehler zu vermeiden. Das ist ein einfacher Weg, Barrieren früh zu reduzieren.
Beim Thema AI-Tools bleibt Anna kritisch. Generische Lösungen können helfen, bieten aber oft nicht die nötige Tiefe. Stattdessen empfiehlt sie spezialisierte Tools, die auf Barrierefreiheit ausgerichtet sind. Sie ist optimistisch, dass solche Tools in Zukunft durch AI noch besser werden könnten, indem sie gezielte Vorschläge basierend auf echten Nutzeranalysen liefern.
Kurz gesagt: Automatisierte Tests sind nur der Einstieg. Für echte Barrierefreiheit braucht es manuelles Testing, Nutzerfeedback und gute Tools.

Links

WCAG Quick Reference
Eine umfassende Übersicht der Web-Content-Accessibility-Guidelines.
WAVE Tool
Ein Tool, das Web-Accessibility-Probleme identifiziert, um die Barrierefreiheit zu verbessern.
Accessibility Insights
Ein Tool zur Analyse von Webseiten auf Barrierefreiheit und zur Unterstützung bei manuellem Testen.
Annas Automated Accessibility Testing GitHub Repo
Ein Repository mit nützlichen Skripten und Beispielen zum automatisierten Testen von Barrierefreiheit.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 645: Barrierefreiheit kann so einfach sein
Tue, 21 Jan 2025 06:59:08 +0000
In dieser Episode sprechen Vanessa und Schepp mit ihrem Gast Paul Hempel über die praktische Umsetzung von Barrierefreiheit im Web aus Sicht eines normalen Frontend-Entwicklers. Paul, der langjährige Erfahrung als Entwickler mitbringt, zeigt uns, dass Barrierefreiheit weder kompliziert noch teuer sein muss und in jedem Projekt berücksichtigt werden kann.
Schaunotizen

[00:01:06] Barrierefreiheit kann so einfach sein
Paul betont, dass barrierefreie Entwicklung nicht nur Menschen mit Behinderungen zugutekommt, sondern auch den Entwicklungsprozess vereinfachen kann. Oft machen sich Entwickler:innen unnötig viel Arbeit, weil sie nicht wissen, was mit semantischem HTML und CSS bereits möglich ist.
Ein Schwerpunkt der Diskussion liegt auf der Tastaturnavigation, die nicht nur für Barrierefreiheit essenziell ist, sondern auch Poweruser:innen hilft, effizienter zu arbeiten. Paul zeigt anhand von Beispielen wie 
,  oder , wie Webstandards genutzt werden können, um Barrierefreiheit zu erhöhen und gleichzeitig den Code wartbarer und übersichtlicher zu machen.
Paul spricht außerdem über seine aktuellen Projekte, darunter die Entwicklung neuer, barrierefreier Web-Apps als Open-Source-Software im Rahmen von „Operaton„. Dabei betont er, dass die eigentliche Herausforderung nicht in der Umsetzung, sondern im Erlernen der Prinzipien liegt – und dass Barrierefreiheit Hand in Hand mit einem korrekten Einsatz von Webstandards geht.
Ein weiteres Thema ist die Dokumentation von UI-Patterns, etwa durch die WAI. Die offiziellen Guidelines können abstrakt wirken, sind aber eine wertvolle Grundlage, wenn sie mit praktischen Beispielen kombiniert werden. Paul empfiehlt daher, sich intensiv mit den Grundlagen wie Landmarks, Page Regions und semantischem HTML auseinanderzusetzen, um barrierefreie Anwendungen effizient und effektiv zu entwickeln.
Schließlich werfen wir einen Blick auf Standardprobleme wie Kontraste, Textskalierung und die Verwendung von REM/EM, die oft vernachlässigt werden, obwohl sie mit den richtigen Ansätzen einfach zu lösen sind. Paul gibt dabei praktische Tipps und verweist auf hilfreiche Tools und Ressourcen, die die Umsetzung erleichtern.

Links

Mein Talk: Accessibility ist einfach
Paul Hempels Vortrag, der zeigt, warum und wie Barrierefreiheit ganz einfach umgesetzt werden kann.
Operaton auf GitHub
Das Open-Source-Projekt für barrierefreie Web-Apps. Noch nicht öffentlich, aber bald als Beispiel verfügbar.
JavaLand
Die Konferenz für Java-Entwickler:innen – mit Talks zu Barrierefreiheit und mehr.
JavaLand 2025 – Konferenz
Details und Anmeldung zur nächsten JavaLand-Konferenz im April 2025.
WAVE von WebAim
Ein mächtiges Tool, um Barrierefreiheitsprobleme auf Webseiten aufzudecken.
WAI Patterns und Tutorials
Offizielle Dokumentation von WAI-ARIA zu UI-Patterns – detailliert und praxisnah.
Inclusive Components
Eine Sammlung von Patterns für barrierefreie UI-Komponenten mit großartigen Beispielen.
CSSWG Issues auf GitHub
Verfolge die neuesten Diskussionen und Standards rund um CSS.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 644: Das Barrierefreiheitsstärkungsgesetz (BFSG)
Tue, 14 Jan 2025 06:59:04 +0000
In dieser Episode spricht Schepp mit Gästin und IAAP zertifizierter Barrierefreiheitsexpertin Sonja Weckenmann (LinkedIn) über das Barrierefreiheitsstärkungsgesetz (BFSG) – ein Gesetz, das darauf abzielt, Barrieren für Menschen mit Behinderungen abzubauen, und das am 28. Juni 2025 in Kraft tritt. Also höchste Eisenbahn, sich damit zu beschäftigen!
Schaunotizen

[00:01:08] Das Barrierefreiheitsstärkungsgesetz
Zum Start gibt Sonja uns Einblicke in die Hintergründe und Ziele des BFSG und erklärt, warum es einen wichtigen Schritt in Richtung einer inklusiveren digitalen Welt darstellt.
Anschließend diskutieren wir, welche digitalen Produkte und Dienstleistungen unter die Regelungen fallen und welche Branchen besonders davon betroffen sind. Dabei wird deutlich, dass das Gesetz weitreichende Auswirkungen haben kann – von der Gestaltung von Websites über digitale Verkaufsplattformen bis hin zu mobilen Apps.
Ein weiterer Schwerpunkt ist die praktische Umsetzung der Anforderungen, die das BFSG an Unternehmen stellt. Sonja erläutert, welche Maßnahmen erforderlich sind, um den gesetzlichen Vorgaben zu entsprechen.
Neben der Theorie widmen sich Sonja und Schepp noch den typischen Stolpersteinen bei der Umsetzung. Sie sprechen darüber, wie sich Barrierefreiheit in bestehende digitale Systeme integrieren lässt und welche internen Prozesse angepasst werden müssen, um langfristig erfolgreich zu sein.

Links

Richtlinie (EU) 2019/882 (EAA)
Die Grundlage des Barrierefreiheitsstärkungsgesetzes – der European Accessibility Act im EU-Amtsblatt.
Barrierefreiheitsstärkungsgesetz (BFSG)
Der Gesetzestext, der Barrierefreiheit im digitalen Bereich in Deutschland regelt.
Verordnung zum Barrierefreiheitsstärkungsgesetz (BFSGV)
Die Verordnung zum BFSG mit genauen Vorgaben und Details zur Umsetzung.
Accessibility requirements for ICT products and services (EN 301 549, V3.2.1 (2021-03)) PDF
Europäische Norm für barrierefreie Produkte und Dienstleistungen im Bereich Informations- und Kommunikationstechnologie.
EN 301 549 V3 – Harmonized European Standard for ICT Accessibility, ETSI
Mehr zur Norm EN 301 549 und wie sie im europäischen Kontext angewendet wird.
Web Content Accessibility Guidelines (WCAG) 2.2
Die neuesten Leitlinien für barrierefreie Webinhalte – ein unverzichtbarer Standard für Entwickler:innen.
European Accessibility Act – Barrierefreiheit für die Privatwirtschaft, Blogartikel, tollwerk.de, Joschi Kuphal, 17. Januar 2024
Ein tiefer Einblick in die Auswirkungen des EAA auf die Privatwirtschaft – praxisnah und verständlich erklärt.
Bei Buzzmatic wurden Online-Shops auf Barrierefreiheit getestet
Ein spannender Bericht darüber, wie deutsche Online-Shops bei der Barrierefreiheit abschneiden.
BITV-Prüferbund
Die Anlaufstelle für die Überprüfung von Websites auf Barrierefreiheit nach der deutschen BITV.
Overlay Factsheet
Warum Accessibility-Overlays oft mehr Schaden als Nutzen bringen – Fakten und Hintergründe.
„Wo wir sind ist vorne“ Podcast: Accessibility-Overlays mit Daniela Kubesch
In dieser Folge wird sich kritisch mit Accessibility-Overlays auseinandergesetzt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 643: Das Web Accessibility Cookbook
Tue, 07 Jan 2025 06:59:27 +0000
Wir haben diesmal Manuel Matuzović zu Gast – Frontend-Entwickler, Berater, Auditor, Trainer und Autor des „Web Accessibility Cookbook“. Gemeinsam tauchen wir ein in die Welt der Barrierefreiheit und hangeln uns dazu am Aufbau seines Buches entlang.
Schaunotizen

Was macht eine saubere HTML-Dokumentstruktur aus?
Manuel erklärt, warum die Struktur eines HTML-Dokuments mehr ist als nur ein technisches Detail. Von Head-Elementen bis zu einer sinnvollen Organisation des Bodys – wir beleuchten, wie man das Fundament für zugängliche und benutzerfreundliche Webseiten legt.
Wie nutzt man Landmarks wie Header, Main und Footer richtig?
Landmarks bieten Orientierungshilfen für Nutzer:innen mit Screenreadern. Wir sprechen darüber, wann sie Sinn machen, wie man sie richtig einsetzt und warum eine gut strukturierte Seitenhierarchie für alle Nutzer:innen wichtig ist.
Warum sind Links und Buttons öfter kaputt, als sie sein sollten?
Links, die ins Leere führen, und Buttons, die nicht klicken wollen – wir reden darüber, warum diese Probleme so häufig sind und wie man sie vermeidet, um barrierefreie und funktionale Interfaces zu schaffen.
Wie werden Formulare und Tabellen barrierefrei?
Formulare und Tabellen können komplex und frustrierend sein – für Entwickler:innen und Nutzer:innen gleichermaßen. Wir diskutieren Best Practices, häufige Fehler und wie man diese wichtigen Elemente zugänglicher gestaltet.
Accessibility bei Custom Elements und Shadow DOM?
Web Components sind ein mächtiges Tool, aber sie kommen mit Herausforderungen. Wir sprechen über Vor- und Nachteile von Shadow DOM, warum es manchmal besser ist, darauf zu verzichten, und welche Rolle Custom Elements bei modernen Webprojekten spielen.

Gewinnspiel!
Manuel verlost zwei digitale Exemplare seines Buchs! 🎉 Schreib uns bis 31. Januar, was dein Lieblingselement in HTML ist und warum – auf Slack, per Mail oder auf unseren Social-Media-Kanälen Bluesky oder Mastodon.
Links

Web Accessibility Cookbook
Praktischer Leitfaden, der Entwickler:innen dabei unterstützt, barrierefreie Websites zu gestalten, mit klaren Beispielen, Best Practices und einfache Erklärungen für komplexe Themen.
HTMHell Advent Calendar 2024
Jeden Tag ein Türchen voller Accessibility-Tipps. Besser als Schokolade (okay, fast).
Polypane
Der Schweizer Taschenmesser-Browser für alle, die Frontend ernst nehmen. Accessibility? Check. Multi-Viewport? Check.
Manuel im Februar beim CSS Café
Eine Tasse Kaffee und ein tiefes Gespräch über Farben, Farbräume und warum das alles nicht so einfach ist, wie es aussieht.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Outtakes 2024
Tue, 31 Dec 2024 06:59:07 +0000
Seit nunmehr gut fünf Jahren unterstützt uns Autorin, Sprecherin und Radiomoderatorin Sabine bei der Post-Produktion unserer Podcastfolgen. Das hat nicht nur für lang ersehnte Entlastung bei uns Hosts gesorgt, sondern auch die Qualität unseres Audio deutlich nach oben geschraubt. Sabine gibt uns nämlich Tipps für besseres Sprechen und nimmt sich auch immer die Zeit, jede Folge im Detail abzuhören und überflüssige Pausen und „Ähms“ herauszuschneiden. 
Dafür von uns tausend Dank an Dich, Sabine!🙏🥰 Und ebenso tausend Dank an Euch Hörer*innen und Sponsor*innen, dass wir durch Euch die notwendigen finanziellen Mittel dafür haben ❤️. 
Sabines akribisches Durchhören der Episoden hat außerdem noch einen tollen Nebeneffekt: Wir bekommen am Ende eines jeden Jahres nun immer Outtakes, die sie über das Jahr verteilt sammelt und uns und Euch als Weihnachtsgeschenk zusammenschnürt 🎄🎁. Und die sind immer fantastisch – hört selbst und rutscht anschließend gut!✨
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 642: Unsere schlimmsten Hacks
Thu, 19 Dec 2024 11:46:11 +0000
Schepp, Peter und Hans-Christian Otto (bekannt aus den Revisionen zu SSR, Speaker-Dasein und Client-Server-Kommunikation) beichten einander ihre größten Verbrechen gegen Bits und Bytes.

Unser Sponsor


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


Schaunotizen

[00:02:27] Unsere schlimmsten Hacks
Wir beginnen mit dem Klassiker: Prototyp-Patching! Dieses hat bekanntlich gerne katastrophale Auswirkungen, die auch schon mal über in Browsern eingebaute Website-spezifische Patches hinausgehen. Während Kiki stolz auf seinen String.prototype-Patch ist, musste Schepp sogar schon mal document.write() überschreiben. Peter hält es mit Canvas-Patches, um Grafikkarten-Treiber-Bugs auszubügeln. Schepp erklärt, warum er als CSS-Trumpf lieber :not() als :root oder !important verwendet (siehe auch), was uns auf unerklärliche Weise überlegen lässt, ob IIFEs in PHP existieren (tun sie). Nach einer Lobpreisung des Switch-Statements und einer Runde gesunden Crockford-Dunkings berichtet Peter von seinen diversen … unüblichen Design-Entscheidungen in seiner Präsentationssoftware, was uns über document.currentScript und sein Fehlen in Modulen (Polyfill) sinnieren lässt. Gegen Ende geraten wir über einen Use Case des Number-Constructors in eine Diskussion rund um Dependencies und Package Manager, die der Aufnahme schließlich den Rest gibt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 641: Passwörter & Passkeys
Tue, 10 Dec 2024 06:59:00 +0000
In dieser Revision haben wir erneut die Entwicklerin und Trainerin Martina Kraus (LinkedIn / Bluesky) zu Gast und diskutieren mit ihr über das Thema Passwörter und die passwortlose Zukunft mit Passkeys.

Unser Sponsor


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


Schaunotizen

[00:02:15] Passwörter & Passkeys
In unserer Diskussion über Passwörter greifen wir zunächst die Empfehlung des Bundesamts für Sicherheit in der Informationstechnik (BSI) auf, das dazu rät, Passwörter nicht allzu komplex zu gestalten. Wir waren uns allerdings einig, dass die derzeitige Best Practice von mindestens zwölf Zeichen mit einer Kombination aus Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen eine gute Empfehlung sind, Komplexität hin oder her. Viele Nutzer können sich solche Passwörter allerdings schwer merken, was dazu führt, dass sie Passwörter wieder verwenden oder auf unsichere Weise speichern. Und auch auf Seitenbetreiber-Seite werden Passwörter nicht immer so sorgsam behandelt, wie es erforderlich wäre.
Genau hier kommen wir auf Alternativen wie Passkeys, die komplett ohne Passwörter auskommen und damit viele der Probleme von passwort-basierter Authentifizierung nicht kennen. Passkeys müssen nicht manuell eingegeben werden und sind individuell je spezifischer Website, dem sogenannte Origin. Sie bieten damit nicht nur eine bessere Sicherheit, sondern sind auch viel benutzerfreundlicher. Wir klären, wie Passkeys technisch funktionieren und welche Herausforderungen es bei deren Einführung möglicherweise gibt.
Links

passkeys.io
Alles, was man über Passkeys wissen möchte
learnpasskeys.io
Diese Seite bringt einem bei, wie die technische Implementation durchzuführen ist
Passkeys: A Shattered Dream
Das Blogpost, welches Schepp erinnert, das einen kritischen Blick auf den aktuellen Implementationsstand von Passkeys wirft.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 640: CSS4, CSS5 und CSS Next
Tue, 03 Dec 2024 06:59:25 +0000
In dieser Episode sprechen wir mit Quentin Albert (LinkedIn, GitHub, Twitter) über die Entwicklung von CSS4, CSS5 und CSS Next und ergründen, warum es nach all der Zeit nun doch mit den CSS-Versionsnummern weitergehen soll.
Schaunotizen

[00:01:29] CSS4, CSS5 und CSS Next
Obwohl CSS3 einst als finale Version angekündigt war, machen stetige Neuerungen immer deutlicher, dass dieser Begriff dem Stand der Dinge nicht mehr gerecht wird. Was meinen Blogposts, Artikel oder Lernkurse, wenn sie versprechen, einem „modernes CSS“ oder CSS3 beizubringen? Runde Ecken? Flexbox und Grid? Oder vielleicht sogar Container Queries? Sowohl fürs Marketing als auch beim Lernen von CSS fehlt es an Nuance und zeitgemäßer Begrifflichkeit. An diesem Punkt setzt die CSS-Next Community Group an.
Bei den CSS-Versionsnummern stehen der Kontext und die Origin-Story neuer Technologien im Vordergrund, während das schon existierende Baseline-Projekt der WebDX Community Group eher die praktische Implementierung unterstützt. Ein Beispiel wäre Subgrid: Obwohl es noch nicht überall einsetzbar ist und damit von Baseline als neu eingestuft wird, gehört es konzeptionell doch in denselben Bucket wie Grid, das es schon lange gibt. Dementsprechend gehört Subgrid wie Grid zu CSS4. Die Versionsnummer markieren dabei größere Umbrüche, respektive Äras in den Fähigkeiten von CSS.
Da es ja auch viel um Marketing geht ist ein weiterer zentraler Punkt die Entwicklung eines neuen Logos für CSS. Das alte „Schild mit der 3“, das erstmals 2011 im Windschatten von HTML5 aus der Bildfläche erschien, passt nicht mehr und soll durch ein modernes, barrierefreies und funktionales Design ersetzt werden. Quentin gibt Einblicke in die diesbezüglichen Diskussionen innerhalb der CSS-Next Community Group.
Abschließend blicken wir auf die nächsten Schritte: Die Integration der Levels in die offiziellen Spezifikationen der CSS Working Group schreitet voran, und erste Entwürfe liegen bereits vor. Des Weiteren lädt die CSS-Next Community Group alle ein, Teil dieser spannenden Weiterentwicklung von CSS zu werden, die nicht nur technische Neuerungen, sondern auch eine stärkere Zugänglichkeit für alle Nutzergruppen verfolgt.

Links

CSS-Next Community Group
GitHub-Repo der kleinen aber feinen Truppe, die zusammen die CSS-Next Community Group bilden.
List of CSS Features — Categorization
Spreadsheet aller CSS-Features und ihre Einsortierung in CSS4, CSS5 oder darüber hinaus.
RFC: Initial CSS Level Categorization
Dasselbe nochmal in einen offiziellen Request for Comments gegossen
New CSS logo?
Hier könnt Ihr die Evolution des neuen CSS Logos nachvollziehen

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 639: Server-Client-Kommunikation (mit TypeScript)
Tue, 26 Nov 2024 12:26:48 +0000
Hans-Christian Otto, seines Zeichens Big Boss bei Suora und bekannt aus den Revisionen zu SSR und Speaker-Dasein, präsentiert Peter seine Grand Unified Theory zur Server-Client-Kommunikation mit TypeScript.
Schaunotizen

[00:01:41] Server-Client-Kommunikation
Der Einstieg in hippes TypeScript gelingt uns wie immer mit einem Abstecher in die Kreidezeit, in der ExtJS im UI regierte und auf der Netzwerkseite REST, RPC und SOAP via XMLHttpRequest die Mittel der Wahl waren. Inspiriert von unseren Revisionen zu semantisch-akademischem Data-Fetching und OpenAPI-MSW besprechen wir in der Folge weitere Ansätze, Client-Server-Kommunikation mit TypeScript zu verbinden. Nach einem Start bei absoluten Kleinigkeiten, wie dem Umbiegen vom JSON.parse()-Ergebnis auf any (via ts-reset), landen wir relativ bald bei OpenAPI, GraphQL (inkl. freaky Addons wie PostGraphile) und tRPC. Nebenher kommen auch die kommende Temporal-API, das QUERY Verb in HTTP, das TS-affine ORM Prisma und der Problembereich der Objektvalidierung (vertreten durch Zod, Valibot und JSON Schema zur Sprache.


Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 638: Web Component vs. Frontend Framework (und allgemeines
Framework/CMS-Drama)
Tue, 19 Nov 2024 21:13:25 +0000
Stefan und Peter hatten vorgehabt, das Thema „Web Components vs. Frameworks“ gründlich durchzudiskutieren, doch das allgegenwärtige Framework- und CMS-Drama nahm dann die Hauptrolle ein.

Unser Sponsor


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


Schaunotizen

[00:02:07] Framwork-Drama
Vor dem Hintergrund des jüngsten WordPress-Chaos und dem faust-style VC-Deal des weiteren Vite-Universums quatschen wir über die Stabilität und Vertrauenswürdigkeit unserer Plattformen und Frameworks. Wir vergleichen den klassischen Lock-In Long Con von Vercel mit dem BDFL-Modell von WordPress und „richtigen“ OSS-Projekten wie jenen, die via OpenJS finanziert werden. Gegen Ende kommen wir tatsächlich zum ursprünglich geplanten Thema „Web Components vs. Frameworks“, angestachelt durch den provokanten Artikel "Web Components Are Not the Future" aus der Feder des gänzlich unparteiischen Ryan Carniato (bekannt für SolidJS).

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 637: Das Devtools Performance Tab
Tue, 12 Nov 2024 06:59:52 +0000
In dieser Episode tauchen wir tief in die Chrome DevTools ein und beschäftigen uns mit der Frage, wie wir das Performance-Tab optimal nutzen können, um wertvolle Einsichten in die Ladezeiten und Rendering-Prozesse unserer Webseiten zu gewinnen.
Schaunotizen

[00:01:20] Das Devtools Performance Tab
Wir nehmen alles mit, da bleibt kein Auge trocken: Recording mit Reload oder nicht? Was bedeuten die verschiedenen Tortenfarben? Wie funktioniert das mit den verschiedenen horizontalen Lanes und kann man dort auch die Core Web Vitals ablesen? Was zeigt der Callstack? Wann braucht man CPU-Throttling? Wofür macht man Screenshots und wann zeichnet man die Speicherauslastung mit auf? Welche Rolle spielen Browser-Extensions bei der Performance-Analyse?
Links

Performance of CSS Variables
Lisi Linhart stellte sich schon 2017 die Frage, ob und wenn ja wann CSS Variablen bzw. Custom Propeties einen Impact auf die Browser-Performance haben.
Benchmarking the performance of CSS @property
Im Jahr 2024 wiederholte Bramus van Damme Lisis Test und ging zusätzlich der Frage nach, welchen Einfluss @property-Deklarationen dabei haben.
Chromium Perf Test Runner
Low Level Performance-Tests in Chrome automatisiert ausführen
Webpagetest
Die Mutter aller Performance-Testing Tools.
SpeedCurve
SaaS, der auf Webpagetest aufbaut und es um viele nützliche Bestandteile ergänzt.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 636: Sprechen auf Konferenzen
Tue, 05 Nov 2024 06:59:29 +0000
Mit Hans-Christian Otto (Chef bei Suora und Tröter bei @muhdiekuh@ruhr.social) plaudern Schepp und Peter über das Wie und das Warum der Konferenz-Sprecherei.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

[00:02:24] Der Wanderzirkus
Von der Motivation des Speaker-Daseins (weniger Finanzielles, mehr Partnachklamm und Sugar Shack) über die CFP-Teilnahme bis hin zur Konzeption, Vorbereitung und Präsentation eines Talks lassen wir kein Thema aus und sind teils sehr unterschiedlicher Ansicht. Wer CFPs sucht, wird auf cfp.watch schnell fündig.


Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 635: State of CSS 2024, Teil 3/3
Tue, 29 Oct 2024 06:59:32 +0000
Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil drei.
Schaunotizen

[00:02:10] Math
Aus irgendeinem Grund steigen wir damit ein, ob und wie Tailwind CSS mathematische Funktionen unterstützt, was es indirekt via Arbitrary Properties tut. Danach ergehen wir uns in mögliche Use-Cases für die trigonomischen Funktionen, was meist etwas mit Kreisformen zu tun hat. Ansonsten vermuten wir noch einiges Potential in generativer Kunst. Ana Tudor ist nicht nur eine CSS-Göttin, sondern vermutlich auch diejenige, die die meisten Anwendungsfälle für die mathematischen Funktionen kennt.
Von den neuen Funktionen finden wir vermutlich die Gruppe rund um abs(), round() und mod() am interessantesten. Wir nennen im Zusammenhang mit selbst-skalierenden Schrift-Systemen als das Framework Utopia und Scott Kellum. Wir erwähnen, dass jede der mathematischen Funktionen calc() serienmäßig in sich eingebaut hat und dass ein Update der Spezifikation nun auch das Teilen durch Längeneinheiten unterstützt, was der Safari als erster Browser umsetzt.
Anschließend lassen wir uns dazu aus wie wir bei der Anwendung von min() und max() oft einen Knoten im Kopf bekommen und bei clamp() dankenswerterweise nicht.
Zu guter Letzt starten wir einen Aufruf an Euch, uns Beispiele für den Einsatz von hypot() zu nennen. Uns fällt da mangels Mathefähigkeiten nichts ein. Vielleicht im Rahmen des CSSBattle? Um Deadpools Nase zu zeichnen, zum Beispiel?
[00:19:58] Other Features
:has(), :is() und :where() überspringen wir ganz frech und stürzen uns direkt auf CSS Nesting und Cascade Layers, die die CSS-Syntax aus unserer Sicht ähnlich fundamental weiterentwickeln, wie ES6 es damals für JavaScript getan hat. Damit ist es nicht mehr lang, bis wir jegliche CSS Präprozessoren aus unseren Toolschains werfen können – sofern wir nicht auf Loops setzen. Wir erwähnen auch @scope, das Herangehensweisen wie BEM oder das Kapseln von Styles via generierter CSS-Klassen überflüssig machen. Die Gretchenfrage ist: Wann ist der richtige Zeitpunkt zum Umstieg? Denn beide Features ermöglichen keine Graceful Degradation, sondern alten Browsern fliegt das CSS bei Nicht-Unterstützung komplett um die Ohren.
Als nächstes schauen wir uns die beiden Funktionen image-set() und image() an. Erstere ist so etwas wie responsive Images in CSS und eigentlich ein alter (WebKit-)Hut. Die Funktion wurde nun aber spezifiziert und wurde in dem Zuge um eine Fähigkeit ergänzt, die die ursprüngliche Version nicht bieten konnte, nämlich die (Bild-)Format-Support-Queries. image() ist eine Art Schweizer Taschenmesser für alle Arten von Bild-Erzeugung in CSS. Bilder lassen sich aus Farben generieren, was uns zukünftig vom Missbrauch der linear-gradient()-Funktion abhalten wird. Wir können aber genauso Bild-Ausschnitte via Media-Fragment-Syntax erzeugen. Leider wird die Funktion bislang in keinem der Browser unterstützt, obwohl die Diskussionen darum schon vor 13 Jahren begannen. Irgendwie kommen wir durch dieses Thema auf ein artverwandtes, nämlich dass src() eine von Designfehlern befreite Re-Inkarnation von url() ist. Shout-out an Stefan Judis und seinen „Web Weekly“-Newsletter!
Abschließend sprechen wir doch noch einmal über :has(), weil es uns hier und da das Hirn verknotet, aber auch weil man dessen Einsatz wegen seiner Selector-Matching-Performance vorsichtig dosieren sollte – je nach Umfang des DOM-Trees.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 634: State of CSS 2024, Teil 2/3
Tue, 22 Oct 2024 06:59:11 +0000
Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil zwei.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

[00:03:42] Interactions
Wir steigen im Kapitel „Interactions“ wieder ein werfen als erstes einen Blick auf den Themenkomplex des Scroll-Snappings, eine Erfindung von Microsoft und erstmalig zu bewundern im Internet Explorer 10. Generell mögen wir das Feature sehr, sind uns aber einig, dass es einem manchmal auch in die Quere kommen kann – insbesondere wenn der Typ nicht auf proximity, sondern auf mandatory steht.
Weiter geht es mit scroll-behavior, das wir heutzutage eigentlich immer auf den Wert smooth setzen. Hier und da führt das aber zu unschönen Interaktionen, weswegen man es ggf. temporär, z.B. mit Hilfe einer Animation, aus und wieder an stellt. Wir sind uns außerdem einig, dass Firefox das weiche Scrollen deutlich schöner umsetzt als Chrome.
Nächster Punkt ist overscroll-behavior, mit dem man steuern kann, was beim Erreichen des Endes von Scroll-Bereichen passieren soll. Es ermöglicht uns, das Bounce-Verhalten und Gesten-Shortcuts zu beeinflussen, was besonders nützlich ist, wenn wir komplexe Interfaces erstellen. Außerdem kann man damit verhindern, dass durch ein Overlay hindurch die Seite Scroll-Kommandos erhält und sich so ungewollt unter dem Overlay hinweg scrollen lässt. Leider funktioniert die Property nur, wenn es auch wirklich etwas zu scrollen gibt, so dass man manchmal künstlich Scroll-Bereiche erzeugen muss.
Wir sprechen über scrollbar-gutter, das nun auch in Safari implementiert wurde.
Schließlich geht es um @starting-style und transition-behavior: allow-discrete, die brandneu sind und einem neue Möglichkeiten im Bereich der CSS Transitions erschließen.
[00:37:19] Typography
Weiter geht es mit dem nächsten Kapitel und wir beginnen mit dem font-display-Descriptor. Setzt man ihn nicht, machen die Browser, was sie wollen. Darum will man es immer setzen und das meist auf swap. Flankierend sollte man aber immer zusehen, dass man seine Fonts auf die gebräuchlichsten Zeichen eindampft (subsetted) und sie mit Hilfe von Resource-Hints preloaded.
Als nächstes reden wir über line-clamp, das relativ frisch standardisiert und in die Browser eingebaut wurde, ohne die alten WebKit-Hacks, wo man es nur in Kombination mit einem alten Flexbox-Dialekt ans Laufen bekommen hat.
Weiter geht es mit text-wrap: balance und text-wrap: pretty, die wir für eine fantastische Ergänzung des typografischen Werkzeugkastens halten. Und wir schauen uns kurz die neue Property hanging-punctuation an, welche derzeit nur in Safari funktioniert, insgesamt aber auch nur marginalen Effekt zeitigt.
Effektreicher ist die initial-letter-Eigenschaft, mit der man Initiale etwas schöner umsetzen kann, als mit dem bislang (und auch von uns auf unserer Webseite) gebräuchlichen Hack, das ::first-letter-Pseudoelement zu stylen.

[00:58:58] Accessibility
Das dritte von uns behandelte Kapitel dreht sich um Barrierefreiheit und den Einfluss, den man CSS darauf ausüben kann.
Da wäre zum einen die prefers-reduced-motion-Feature-Query, mit denen man Animationen und Transitions absichern kann. prefers-color-scheme berücksichtigt, ob jemand eine Seite lieber in hell oder dunkel betrachten mag. Mit prefers-reduced-data lässt sich eine schlankere Seite an Besucher ausliefern, die um weniger Datenumfang bitten – wobei wir nicht genau wissen, wieso man das nicht immer anstreben sollte. Mit Hilfe von prefers-contrast und forced-colors kann man auf besondere Darstellungswünsche von Besuchenden eingehen.
Für das Funktionsprinzip von :focus-visible möchten wir auf die Revision 547: The State of CSS (Teil 2) von 2022 verweisen. Ergänzen möchten wir aber die Info, dass die .focus()-Methode in ihrem Options-Objekt die Eigenschaft focusVisible ebenfalls unterstützt.
Ganz neu ist die light-dark()-Funktion in CSS, die man an allen Stellen einsetzen kann, an denen in CSS Farbwerte stehen. Als Parameter gibt man der Funktion zwei Farbangaben mit, von denen die erste bei aktiviertem Light-Mode angewendet wird und die zweite bei aktiviertem Dark-Mode.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 633: State of CSS 2024, Teil 1/3
Wed, 16 Oct 2024 11:55:17 +0000
Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil eins.

Unser Sponsor


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


Schaunotizen

[00:02:20] Layout
Wir beginnen mit der Frage, wann man Flex und wann Grid einsetzt und uns kommt dabei ein Vortrag von Kevin Powell in den Sinn, in dem er genau das bespricht. Sodann geht es um Subgrids und wie diese schon von Anfang an für die Grid-Spec in Planung waren, dank des unermüdlichen Einsatzes von Rachel Andrew. Als Ressourcen, um Grid spielerisch zu lernen, empfehlen wir…

CSS Grid Attack,
Grid Critters, sowie
Layout Breakouts Builder

Und um *wirklich* zu verstehen, was bei Flex und Grid hinter den Kulissen abgeht, empfehlen wir den ziemlich „deepen“ Talk „Demystify Modern CSS Layouts with DevTools“ von Hui Jing Chen.
Dann sprechen wir kurz über das sehr praktische margin-trim, um im Anschluss zunächst über Anchor Positioning und schließlich über Style Queries und State Queries zu sprechen.
[00:44:00] Shapes & Graphics
Dieses Kapitel ist eine wilde gemischte Tüte. Wir sprechen zunächst über die gar nicht mehr so neuen Blend Modes und Backdrop-Filter, allerdings führt uns das zum Thema des „Forced Colors Mode“ und wie man dort manche Überraschung erlebt.
Als nächstes widmen wir uns den neuen Linear-Easing-Functions, welche uns bei Transitions und Animations völlig neue Möglichkeiten eröffnen und gleichzeitig ein ziemlich cooler „Hack“ sind.
Schließlich sprechen wir über Intrinsic-Sizes in Form von min-content, max-content, fit-content.
[01:05:04] Colors
Das letzte Kapitel, über das wir in Teil eins sprechen, dreht sich um all die Neuerungen im Bereich Farben. Das sind einerseits neue Funktionen, wie die color()-Funktion, die das Adressieren von Farbräumen und -modellen vereinheitlicht.
Anschließend sprechen wir kurz über accent-color, mit dem man den Look von Formularelementen schnell und unkompliziert der eigenen Farbwelt näher bringt.
Wir reden über Wide Gamut Colors, also Farben, die einem umfangreicheren Farbraum entstammen, als ihn das altehrwürdige sRGB bietet. Man höre dazu auch unsere Folge Revision 623: Farben und Farbräume.
Zu guter Letzt sprechen wir über die Relative Color Syntax, die eine neue Syntax für Farbangaben darstellt, mit der man Varianten bestehender Farben erzeugen kann. Damit eignet sie sich besonders gut, um mit ihr Design Systeme automatisiert auf Basis von Grundfarben zu erzeugen.


Links

Windy
Browser-Erweiterung, mit der man jede Webseite nach TailwindCSS transformieren kann.
CSS Café
Ein mehrmals im Jahr tagendes, von Schepp mitveranstaltetes Online-Meetup zum Thema CSS

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 632: Server Side Rendering mit Frontend Frameworks
Tue, 08 Oct 2024 06:59:14 +0000
Mit Gast Hans-Christian Otto (Chef bei Suora und Tröter bei @muhdiekuh@ruhr.social) reden Peter und Vanessa über Server Side Rendering mit Frontend Frameworks. Im Verlauf wird Server Side Rendering mit SSR abgekürzt, und Hans-Christian Otto kurz Christian genannt.

Unser Sponsor


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


Schaunotizen

[00:02:15] Server Side Rendering mit Frontend Frameworks
SSR mit Frontend Frameworks ist ein komplexes Thema. Generell besprechen Christian, Peter und Vanessa kurz den Werdegang des Webs, von „Standard“ SSR über Hydration wie bei z.B. Vue.js zu der Resumability von Qwik. Und irgendwo dazwischen ist das SSR mit Frontend Frameworks angesiedelt. Im Zusammenhang mit Hydration und clientseitigem Rendern bespricht Christian das Problem mit SEO. Isomorphisches und dynamisches Rendern sind hier die Stichpunkte. Dabei gibt es zunächst einmal sog. Meta-Frameworks wie Nuxt oder Nextjs. Gestartet hat die Idee diese Revision aufzumachen, mit dem Hype um die React Server Components. React Server Components (RSC) sind eine neue Funktion von React, mit der Teile der Benutzeroberfläche auf dem Server gerendert werden. Sie ermöglichen es, schwere Berechnungen oder Datenverarbeitungen serverseitig durchzuführen und nur das fertig gerenderte HTML an den Client zu senden, wodurch weniger JavaScript auf dem Client ausgeführt werden muss. Server-Komponenten sind nicht interaktiv und eignen sich besonders für statische Inhalte, können aber mit clientseitigen Komponenten kombiniert werden, um interaktive Funktionen bereitzustellen. Peter geht speziell auf Web Components ein, da diese eine immer präsenter werdende Rolle in der Welt der Webentwicklung spielen. Lit ist hier nur ein Beispiel. Denn Web Components verhindern ein Vendor-Lock-In. Denn wie bei so vielem heißt es bei der Entscheidung für oder gegen SSR mit Frontend Frameworks – und wenn ja, mit welcher Technologie – auch: es kommt eben darauf an: Risikoabwägungen und Abhängigkeiten müssen für das jeweilige Projekt passen.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 631: Angeblich TypeScript
Tue, 01 Oct 2024 15:39:19 +0000
Schon gewusst? Wenn man „TypeScript“ an eine Podcast-Folge dranschreibt, kann man über Gott und die Welt reden und niemand kann etwas dagegen sagen! Muhahahaha!

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

[00:02:08] TypeScript 5.6
Da nahende neue TS-Release verleitet Stefan und Peter dazu, mal wieder über Software-Architektur, Abstraktion und ein paar neue TS-Features zu quatschen. Neben 0815-Webdev-Tech wie Iterator Helpers kommen auch TypeScript-Spezifika wie Sub/Supertyping-Probleme rund um ReadonlyArray und WeakMap zur Sprache. Tatsächlich bleiben wir ungewöhnlich nah am Thema, sieht man von einem Exkurs über Versuchs-Atomreaktoren ab. Stattdessen vergleichen wir Zod mit Valibot, vergleichen Techniken für bedingtes Declaration Mergining, vergleichen Nodes nativen TS-Support mit Denos Angebot, sinnieren über De-Facto-Standards wie TS-Syntax und JSX (und die damit einhergehenden Problemchen) und philosophieren über die Unterscheide der JS/NPM und Rust/Cargo-Ökosysteme.


Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 630: Akademisches Data Fetching und praktische Software-Architektur
Tue, 17 Sep 2024 08:08:10 +0000
Mit Marvin Luchs von Holisticon ergehen sich Schepp und Peter in freier HTTP-Assoziation.
Schaunotizen

[00:01:31] High-Level-HTTP-Philosophie
Marvin hatte seinerzeit eine mit Describing RESTful Web APIs using profiles written in RDF betitelte Masterarbeit geschrieben und wenig überraschend etwas zu HTTP, REST, RDF und Co zu sagen. Wir sezieren zunächst Begrifflichkeiten wie Hypermedia, REST und RDF schwenken dann zur Frage über, wie das Design dieser Technologien unsere langlebigen Software-Architekturen beeinflusst (oder beeinflussen kann/sollte). Wir quatschen im Zuge dessen über aktuelle Ansätze wie HATEOAS und Content Negotiation sowie weniger aktuelle Ansätze wie HAL. Neben aller Theorie kommen wir auch regelmäßig auf die Kontaktfläche der rigiden Standards und Theorien mit der analogen Welt zu sprechen.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 629: OpenAPI-MSW
Tue, 03 Sep 2024 09:10:45 +0000
Christoph Fricke (Twitter, Github) ist Berater und Webdev-Hexer bei Holisticon und erzählt uns von seinem Open-Source-Projekt!

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

OpenAPI-MSW
Christoph berichtet von seinen Bemühungen, OpenAPI mit Mock Service Worker zu verbinden – speziell im Zusammenspiel mit TypeScript. Wir quatschen über die Out-Of-The-Box-DX der OpenAPI/TS-Kombination, Verbesserungsmöglichkeiten, den unknown-Typ und seine Limitierungen, typescript-eslint, Type-Testing und natürlich die Frage, ob Typen die Volksfront von Judäa und Interfaces die Judäische Volksfront sind.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 628: Interviewing
Tue, 27 Aug 2024 16:50:32 +0000
In semi-geplanter Manier kommt es dazu, dass Hans vom thematisch gänzlich unbeleckten Peter gewissermaßen zu Interviewing interviewt wird.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

[00:02:31] Interviewing
Von einer Diskussion über Programmierquizzes und Praxisübungen bei Peters Workshops kommen wir dazu, über Interviewing zu quatschen. Hans spart nicht mit wertvollen Tipps zur Vorbereitung, wie etwa der STAR-Technik und empfiehlt den The Mentoring Club. Am Ende debattieren wir noch, ob und wann es sinnvoll sein kann, Teile des Interview-Prozesses an Plattformen wie Karat auszulagern und steifen die aktuelle Lage auf dem Jobmarkt.
[01:08:39] Werbeblock
Peter macht ausnahmsweise mal einen öffentlichen JavaScript-Workshop. Schickt eure Kolleg:innen vorbei!

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 627: Module Federation
Tue, 20 Aug 2024 06:59:23 +0000
Peter (der von Angular ungefähr so viel Ahnung hat, wie ein Laubfrosch von Artilleriemunition) durfte als Gast Manfred Styer (der von Angular ungefähr so viel Ahnung hat wie Manfred Styer) begrüßen und sich über Module Federation aufklären lassen!

Unser Sponsor


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


Schaunotizen

[00:02:21] Module Federation
Module Federation macht Laufzeitintegration für Microfrontends. Manfred erklärt, was es damit auf sich hat und welchen Grund (Spoiler: Bundler) dagegen sprechen, einfach auf ECMAScript-Module zurückzugreifen. Wir kommen natürlich nicht umhin, Sinn und Zweck sowie Theorie und Praxis von Microfrontends zu diskutieren und danach in das Big Picture von Software-Architektur (Silodefinition, Refactoring etc.) einzusteigen. Zwischendurch kommen wir auch mal dazu, das Verhältnis von Angular Core zu Federation zu klären (Letzteres ist ein Angular-Plugin aus der Feder von angulararchitects.io). Gegend Ende geht um die Hacken und blutige Details wie Argumente contra Microfrontends, Versionskonflikte im Reich von Module Federation, zone.js, Dart, Designsysteme, und Build-Performance.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 626: Abstraktion
Tue, 13 Aug 2024 07:24:31 +0000
Stefan und Peter treffen sich zur Selbsthilfegruppe der anonymen Abstrahierer!
Schaunotizen

[00:01:50] Abstraktion
Auslöser dieser Sendung war ein Mastodon-Mini-Rant von Stefan, der ein Übermaß an Abstraktion in einem seiner Projekte beklagte. Wir suchen nach der Ursache für Überabstraktion, grenzen echte Abstraktion von bloßer Umformulierung ab, erlauben Stefan seinen traditionellen OOP- und SOLID-Diss, empfehlen Talks von Dave Thomas und Daniel Terhorst-North und philosophieren ein bisschen über Risikoabwägung.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 625: TailwindCSS v4 Alpha
Tue, 06 Aug 2024 20:28:38 +0000
Nein, noch ist TailwindCSS v4 nicht heraus, und wir können noch die Füße still halten. Puh. Aber mit welchen Neuerungen können wir rechnen? Dies besprechen wir mit TailwindCSS-Dauergast Milan!

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

[00:02:41] TailwindCSS v4 Alpha
Nachdem wir in der Vergangenheit bereits zu TailwindCSS 1, TailwindCSS 2 und TailwindCSS 3 entsprechende Episoden aufgenommen haben, setzen wir uns erneut mit unserem letztmaligen Gast Milan zusammen. In der vorherigen Revision 624 sprachen wir bereits über die Neuigkeiten bei den Versionen 3.1, v3.2, v3.3, und v3.4 und berichteten über unsere Erfahrungen.
TailwindCSS v4 wird aktuell von dem recht kleinen Tailwind-Team von 6 Personen entwickelt. Das ganze Vorhaben halten sie in Blogartikeln fest und zeigen ihren Prozess Open Source.
Eine große Neuerung, in der wir tief ins Detail gehen, ist die Umstellung des Parsers in Rust. Zum anderen die Umstellung von PostCSS zu LightningCSS.
Wer Lust hat, es auszuprobieren, kann sich entweder die Alpha Version bei NPM besorgen, die seit März verfügbar ist. Oder aber man benutzt den Playground und stellt die ersion auf v4 um.
Außerdem berichten wir über die Neuigkeit im TailwindCSS Universum, wie zum Beispiel die Updates bei dem Prettier Plugin und Catalyst von TailwindUI.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 624: TailwindCSS: Neuigkeiten in v3 und Erfahrungsberichte
Tue, 16 Jul 2024 06:00:40 +0000
Nachdem wir in der Vergangenheit bereits zu TailwindCSS 1, TailwindCSS 2 und TailwindCSS 3 entsprechende Episoden aufgenommen haben, setzen wir uns erneut mit unserem letztmaligen Gast Milan zusammen. Wir besprechen die Neuerungen in der 3. Version von TailwindCSS und blicken retrospektiv auf unsere Erfahrungen zurück.

Unser Sponsor


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


Schaunotizen

[00:00:00] TailwindCSS: Neuigkeiten in v3 und Erfahrungsberichte
Anfangs geben wir einen Rückblick auf die Geschichte von TailwindCSS. Wie fing alles an, wie viele Personen arbeiten an dem CSS Framework, und was denkt die Community mittlerweile darüber. TailwindCS ist ein Utility-First CSS Framework. Damit unterscheidet es sich von Bootstrap, Bulma und Co. Es gibt keine Button Klassen oder andere Komponentenklassen. Dafür haben die Erfinder von TailwindCSS allerdings das Tool TailwindUI gebaut.
Wir besprechen, warum TailwindCSS sehr gut für eine komponentenbasierte Entwicklung geeignet ist, und was wir als die großen Vorteile von dem Framework empfinden. Im Anschluss gehen wir auf den technischen Werdegang von TailwindCSS ein, angefangen bei Less Dateien bis hin zu der großen Änderung auf PostCSS.
Im Weiteren besprechen wir die Neuigkeiten, die es in den Versionen v3.1, v3.2, v3.3, und v3.4 gab. Am Ende gibt es einen Cliffhanger für die folgende Revision 625, bei der wir – auch wieder mit Milan – über die Tailwind v4 Alpha Version sprechen werden.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 623: Farben und Farbräume
Thu, 11 Jul 2024 08:42:56 +0000
Schepp und Peter philosophieren zusammen mit Jon Uhlmann (zuletzt in den Revisionen 528 und 504 zu Gast) über die Möglichkeiten und Herausforderungen der neuesten Farb-Features in CSS.

[00:01:00] Farben und Farbräume
Zunächst legen wir die Limitierungen von des RGB-Farbmodells (unleserlich für alle außer David DeSandro) und des sRGB-Farbraums (modelliert weniger Farben, als moderne Geräte darstellen können) dar. In modernem CSS bestehen mit u.A. den oklch()- und oklab()-Notationen mehrere Möglichkeiten, größere Farbräume zu nutzen – und das sogar in allen halbwegs aktuellen Browsern! Jon hat im Rahmen seines Schaffens für Neos einen OKLCH-kompatiblen Farb-Picker auf Basis von Color.js gebaut und berichtet von seinem Eintauchen in die neuen Farbräume. Wir quatschen weiterhin über Gradients (und wie diese selbst auf den kartoffeligsten Displays von besseren Farbmodellen profitieren) color-mix(), sRGB gamut clipping, WCAG, Kontraste, Farbräume auf diversen Devices und Perspektiven für HDR in CSS.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 622: Glücksrad
Tue, 25 Jun 2024 07:51:56 +0000
Hans, Schepp und Peter drehen am Glückrad bis das Frameset kommt!
Schaunotizen

[00:03:02] break-inside
Die an sich nur mäßig insprierende CSS-Property verleitet Schepp dazu, Multicolumn Layout zu lobpreisen, das seiner Meinung nach so manches kann ( u.A. Quasi-Masonry), das mit Grid Layout nicht drin ist.
[00:11:00] paint-order
Wir stellen fest, dass paint-order unter anderem für Textumrandungen ganz praktisch ist. Es gäbe dafür auch -webkit-text-stroke, das mittlerweile in der Bibel für Web-Kompatibilität aufgeführt und deshalb in praktisch allen Browsern zu finden ist.
[00:18:35] unload-Event
Wir grenzen das abgeranzte unload-Event von seinen cooleren Kollegen beforeunload, pagehide und Beacon API ab, diskutieren Interaktionen mit dem bfcache und überkegen, was es bedeutet, eine Webseite oder -App zu „schließen“.
[00:29:17] MIDIAccess
Wir haben in Summe ca. null Erfahrung mit MIDI, wundern uns aber nicht über die API: schließlich gib’s auch Web USB und Web Serial – und dass letzteres noch extrem verbreitet ist, hat Peter beim Cathode Ray Dude gelernt.
[00:34:58] Location, Location, Location
Wir berichten von unseren Interaktionen mit der Location-API. Peter stringifiziert sie gern, der Rest bedient sich ausgefeilterer Features wie replace oder greift gleich zur History API.
[00:39:37] Destructuring Assignment
Wir präsentieren verschiedene Stunts rund um Destructuring.
[00:45:15] fetch()
Wir listen der Abwechslung halber die zahlreichen Vorteile von XMLHttpRequest auf, wozu u.A. synchrone Requests (benutzt von Partytown) und einfaches Abbrechen gehören.
[00:52:48] Popover API
Popover war bereits das fast einzige Thema von Glücksrad-Revision 615, aber über das abstrakte Invoker-Konzept hatten wir damals noch nicht philosophiert.
[01:01:52] 
Schepp fragt sich, ob Framesets mit Grid Layout kombiniert werden können (Antwort: nope!), wonach wir über Hypermedia, Frontpage, Dreamweaver und andere Artefakte aus der Jungsteinzeit sinnieren.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 621: Software Craftsmanship und Clean Code mit Nicole Rauch
Tue, 18 Jun 2024 08:07:51 +0000
Nicole Rauch sorgt in dieser Revision dafür, dass Vanessa und Peter endlich mal anfangen, brauchbaren Programmcode zu produzieren.

Unser Sponsor


makandra bietet umfassende Unterstützung für Entwicklerteams mit Infrastruktur- und Operations-Expertise. Das DevOps as a Service-Angebot umfasst Beratung und Unterstützung in allen Bereichen der Infrastruktur, von der Dimensionierung über Technologieentscheidungen bis hin zum Aufbau mit Infrastructure-as-Code, automatisierten Deployments und mehr. Darüber hinaus im Angebot: Maßgeschneiderte Schulungen zu Kubernetes, Terraform und AWS.
Sie suchen Unterstützung beim Monitoring Ihrer Infrastruktur oder fragen sich, ob Ihre Backup-Strategie für einen Disaster-Fall ausreichend ist? Sie suchen temporär Unterstützung, um Ihre Entwickler zu entlasten oder ein eigenes Infrastruktur-Team aufzubauen? Wir helfen gerne. Mehr Infos unter makandra.de/goto/workingdraft.


Schaunotizen

[00:02:19] Thema
Nicole berichtet von ihrem Einstieg in die wunderbare Welt von Software Craftsmanship und Clean Code, u. a. über die SoCraTes-Konferenzserie. Clean Code definiert sich laut Nicole darüber, was er nicht ist, nämlich räudiger Legacy-Code (siehe Cheat Sheet). Dessen Räudigkeit manifestiert sich meist durch schlechten Stil, fehlende Tests und mangelndes fachliches Verständnis-Fundament. Wie viel fachliches Know-How einem ohnehin überforderten Entwicklerhirn zuzumuten ist, (und inwiefern Entwicklungs-Techniken wie Entities, Value Objects, immutable Objekte, Test-Driven Development und das in Revision 556 beleuchtete Domain-Driven Design helfen können) wird eifrig diskutiert. Am Thema Coding Conventions kommen wir natürlich auch nicht vorbei und stellen fest, dass die Zeit der Yolo-Styles definitiv vorbei ist; neuere Sprachen wie Go und Rust liefern schließlich ab Werk Formatierungs-Tools mit. Zum Einüben von varausschauender Entwicklung empfiehlt Nicole Code Katas (z.B. via CodeKata, jskatas.org, Coding Dojo und das dank Retro-Style damit nicht verwechselbare Cyber Dojo). Dazu passen Pair- und Ensemble Programming, Strategien für den Umgang mit Schlipsen, die Clean-Code-Bemühungen torpedieren und was immer das Gegenteil von Refucktoring ist.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 620: Peak TypeScript
Tue, 11 Jun 2024 06:59:07 +0000
Es ist mal wieder Zeit für (angeblich) TypeScript und (tatsächlich) sehr viele andere Themen mit Stefan und Peter!

Unser Sponsor


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


Schaunotizen

[00:02:16] Peak TypeScript
Zum Start erzählen wir uns semi-frustrierende Geschichten aus der TypeScript-Praxis und diskutieren, ob TypeScript überhaupt bei der Fehlervermeidung hilft – und wenn nicht, wozu es sonst gut sein könnte. Das Ausbleiben von Revolutionen in neuen TypeScript-Releases lässt uns vermuten, dass wir Peak TypeScript erreicht haben. Wir quatschen ein wenig über Rust, Web Assembly, TypeScript-Externalitäten (z.B. Bugs in Non-TS-Projekten) und machen am Ende noch einen Speedrun durch die Feature-Listen von TS 5.3, 5.4 und 5.5

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 619: Svelte Next
Tue, 04 Jun 2024 06:59:35 +0000
In dieser Episode hat sich Schepp mit Svelte Core Team Member Simon Holthausen (LinkedIn / Mastodon / Twitter) zusammengesetzt, um über die kommende Version von Svelte zu sprechen: Svelte 5! Leider hatte Simon während der Aufnahme einen Frosch im Hals 🐸, aber er hat sich tapfer durchgebissen.

Unser Sponsor


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


Schaunotizen

[00:01:50] Svelte 5
Wir starten mit einer Einführung, was Svelte eigentlich ist und wie es sich von anderen Frameworks unterscheidet. Simon erklärt uns, was Svelte so besonders macht und warum es sich von anderen beliebten Frameworks abhebt. Anschließend gehen wir auf den Anlass für das neue Major Release ein. Simon erläutert, warum es Zeit für Svelte 5 wurde und welche Probleme in Version 4 die Entwickler zum Handeln bewegt haben.
Die wichtigste Änderung ist das neue Konzept der Runes. Simon gibt uns eine Einführung in diese Neuerung und erklärt den Unterschied zu den bereits bekannten Syntaxen und auch zu Signals. Dies hilft uns zu verstehen, wie Runes das Arbeiten mit Svelte 5 beeinflussen werden.
Wir reden ebenfalls über die neuen Snippets und erfahren, wie diese das Arbeiten mit Svelte 5 noch einfacher und effizienter machen. Ein weiteres Thema ist die überarbeitete Template-Syntax für Events. Simon erläutert, warum diese Änderung notwendig war und welche Vorteile sie mit sich bringt.
Abschließend sprechen wir über den Upgrade-Pfad von Version 4 zu Version 5. Simon erklärt, wie der Upgrade-Prozess abläuft und welche Stolpersteine zu beachten sind. Zum Schluss sprechen wir darüber, was das Core-Team nach dem großen Release plant. Wird direkt an neuen Features gearbeitet oder ist erst einmal Urlaub angesagt?

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 618: Internationalisierung – Teil 2
Tue, 28 May 2024 10:18:21 +0000
Herzlich willkommen zum zweiten Teil unserer Mini-Serie zur Internationalisierung. In dieser Folge tauchen wir gemeinsam mit Schepp tiefer in die Herausforderungen und Best Practices ein, die mit der Anpassung von digitalen Produkten für unterschiedliche Märkte und Kulturen verbunden sind.
In dieser Folge bauen wir auf der Revision 613, dem ersten Teil, auf und beleuchten weitere vielfältige Aspekte, die bei der Internationalisierung berücksichtigt werden müssen, beispielsweise, wenns um Währungen oder die Uhrzeit geht. 
Schaunotizen

[00:01:30]

Wir starten mit Use-Cases und Problemen aus der Community in die Internationalisierung.

Danach geht’s weiter mit weiteren Themen:

Telefone: Verschiedene Vorwahlnummern und Formate.
Datum und Zeit: Unterschiedliche Datums- und Uhrzeitformate, Sommer- und Winterzeit.
Geld: Verschiedene Währungen und Untereinheiten.
Einheiten: Unterschiedliche Maßeinheiten (z.B. metrisches System vs. imperiales System).
Kultur: Kulturelle Gepflogenheiten (z.B. Glücks- und Unglückszahlen, Farben).

Danke an den Schepp, dass du uns die Themen näher gebracht hast.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 617: Die CODE – eine Hochschule wie man sie sich wünscht
Tue, 21 May 2024 06:59:43 +0000
In diese Revision haben wir Thomas „Tom“ Bachem aus Berlin zu Gast. Tom ist Unternehmer, Softwareentwickler, Angel-Investor, und vor allem Gründer der innovativen Tech-Hochschule CODE. Und um die geht es in dieser Folge auch.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

[00:02:20] CODE Berlin
„CODE“ steht als Akronym für „Curiosity Driven Education“ – dem Lernkonzept hinter der Hochschule. Gegründet hat Tom sie, weil er selbst so eine Art Ansatz in seiner Jugend vermisst hat. Wir diskutieren über individualisierte Lernansätze, kollaboratives projektbasiertes Lernen und die Bedeutung von Inspiration und Peer-Learning in der Tech-Branche. Wir sprechen über die starke Networking-Kultur, die an der CODE forciert und gepflegt wird, über die zahlreich von ehemaligen CODE-Student*innen gegründeten Startups und über die breite Unterstützung der Projekts CODE durch deutsche Unternehmer.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 616: Signals 2 – Reactive Boogaloo
Tue, 14 May 2024 06:59:27 +0000
Irgendein Spezialexperte dachte sich, dass ein Proposal für die Standardisierung von Signals Grund genug sei, einen Nachfolger von Revision 572 aufzunehmen. Hört euch gern an, wie der Spezialexperte zusammen mit Stefan und Gast Bernhard Mayr (Mastodon, Twitter) zum zweiten Mal erfolglos versucht, den Signals-Hype zu verstehen.
Schaunotizen

[00:01:12] Signaaaaaals!
Das Signals-Proposal lädt zu Vergleichen mit dem (eingeschlafenen) Proposal für Standard-Observables ein. Wie bei Signals gibt es reichlich JS-Implementierungen (RxJS, Bacon.js) und nicht wirklich einen offensichtlich erkennbaren Drang nach der einen Standard-Lösung. Wir spekulieren dennoch über Alternativen zu (und besseren Wegen für) Standard-Signals (z.B. ein Standard-Event-Target als Schritt 0), über die Motivation (offizielle Angaben hierzu sind eher dünn), Perspektiven der Weiterentwicklung von JavaScript allgemein und den Zustand des ECMAScript-Standards und des größeren JS-Ökosystems.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 615: Glücksrad gone off the Track
Tue, 07 May 2024 06:59:30 +0000
Mit Gast Hans-Christian Otto (Chef bei Suora und Tröter bei @muhdiekuh@ruhr.social) starteten Schepp und Peter einen Glücksrad-Versuch.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


Schaunotizen

[00:11:13] Popover und die Weiterentwicklung der Web-Plattform allgemein
Über das Popover-Attribut nebst der kompletten Popover-API und das verwandte -Element entspann sich eine Diskussion über Polyfills (u.A. für die Popover-API) und die Weiterentwicklung der Webplattform allgemein. Von Turbolinks über View Transitions bis zu ExtJS und TailwindCSS und ts-reset mäandern wird und glauben, auf Abschweif-Rekordkurs zu sein …
[01:04:38] Character class escapes
Peter glaubt, endlich mal ungestört über reguläre Ausdrücke und speziell das v-Flag und seine Implikationen für Unicode Character Class Escapes referieren zu dürfen, doch wir bleiben nur kurz beim Thema. magic-regexp, ein Proposal für den x-Mode sowie eine Empfehlung für Regexr passen noch in den Relevanzkorrididor, doch das lässt sich über die Folgethemen nur bedingt sagen. Unter anderen sprechen wir über:

den PHP-Package-Manager Composer
TurbineCSS, ein altes Projekt von Schepp und Peter
die Programmiersprache MUMPS
die ähnlich elegante Programmiersprache Go
Optionale Tags im Google HTML-Guide
Peters Artikel zu MutationObserver-Performance
Intersection Observers
das scrollmargin-Feature des Intersection Observer
die checkVisibility-API
Lazy Loading in seinen diversen Facetten



Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 614: Zusammenarbeit in der Software-Entwicklung – eine Diskussionsrunde
Tue, 23 Apr 2024 06:59:42 +0000
Anlässlich eines tiefgehenden Metatalks, den Vanessa auf der VueJS Amsterdam 2024 von ihm erleben durfte, luden wir Niklas Dzösch, Developer Relations bei Shopware und selbst Podcaster, zu uns ins virtuelle Studio ein.

Unser Sponsor


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


Schaunotizen

[00:02:13] Zusammenarbeit in der Software-Entwicklung – eine Diskussionsrunde
Diesmal hatten wir keinen roten Faden, an welchem wir uns lang arbeiten wollten. Stattdessen nahmen wir Niklas‘ Talk als Aufhänger, um in die Welt der fehlerhaften und gelungenen zwischenmenschlichen Interaktionen in der Software-Entwicklung einzutauchen. So kommen wir von Hölzchen auf Stöckchen und möglicherweise wurde das Ganze mehr eine Therapiesitzung mit uns allen abwechselnd auf der roten Couch :)

Links

Covve
Die von Niklas erwähnte App zur Beziehungspflege.
DevRelCon
Die Konferenz mit und über Developer Relations.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 613: Internationalisierung und Lokalisierung, Teil 1
Tue, 16 Apr 2024 06:59:38 +0000
Schepp tritt in dieser Revision als Gast auf und lässt Vanessa und Peter an seinen gesammelten Fun Facts rund um Internationalisierung und Lokalisierung teilhaben.

Unser Sponsor


makandra bietet umfassende Unterstützung für Entwicklerteams mit Infrastruktur- und Operations-Expertise. Das DevOps as a Service-Angebot umfasst Beratung und Unterstützung in allen Bereichen der Infrastruktur, von der Dimensionierung über Technologieentscheidungen bis hin zum Aufbau mit Infrastructure-as-Code, automatisierten Deployments und mehr. Darüber hinaus im Angebot: Maßgeschneiderte Schulungen zu Kubernetes, Terraform und AWS.
Sie suchen Unterstützung beim Monitoring Ihrer Infrastruktur oder fragen sich, ob Ihre Backup-Strategie für einen Disaster-Fall ausreichend ist? Sie suchen temporär Unterstützung, um Ihre Entwickler zu entlasten oder ein eigenes Infrastruktur-Team aufzubauen? Wir helfen gerne. Mehr Infos unter makandra.de/goto/workingdraft.


Schaunotizen

[00:01:58] Fun Facts zu Internationalisierung und Lokalisierung
Wir starten mit den zahllosen Herausforderungen schon bei der einfachen Übersetzung von Texten, wie z.B. der Sortierung von Sprachen in einem Sprach-Auswahl-UI (für das man natürlich keinesfalls Landesflaggen verwenden sollte). In mäandernder Form sprechen wir unter anderem über kulturell suboptimale Typografie, welche Sprache die längsten Wörter hat, die extrem relevanten Unterschiede zwischen ISO 639 (Sprachcodes) und ISO 3166-1 (Ländercodes) und die unterschiedliche alphabetische Sortierung in verschiedenen Sprachen (kein Problem mit Intl.Collator). Nebenher kommen auch text-overflow, , die für Übersetzungen möglicherweise sehr relevante CSS-Funktion attr(), automatische Übersetzungen, LINGsCARS und erste Fragen zu Webdesign zur Sprache. Nach einem unerklärlichen Exkurs zu Macbook-Tastaturlayouts stellen wir fest, dass Namen beliebige Strings sein müssen, Adressen ebenso (u.A. dank Besonderheiten in Japan, Costa Rica und Mannheim) und dass diese Revision ein Mehrteiler wird werden müssen.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 612: Neues in der Web-Plattform, Teil 2
Tue, 09 Apr 2024 06:59:49 +0000
Schepp, Vanessa und Peter setzen ihre Reise durch die Webtech-Features im neuesten Safari-Release fort.
Schaunotizen

[00:01:07] Re-Match Switch vs. Checkbox
Nach einer Woche des Mental-Marinierens haben wir neue Gedanken zu  ausgebrütet. Zusammenfassend lässt sich festhalten, dass Entwickler:innen (unter anderem) auch die Komplexität von Checkboxes, Selects und Formularen allgemein unterschätzen. Auch die WHATWG ist mit dem Switch-Thema noch nicht am Ende!
[00:10:20] Alternativtext für generated content
Der CSS-Property content kann ein Alternativtext mitgegeben werden. Wir denken auf Screenreader-Kompatibilität herum und überlegen wie :lang() bei der Internationalisierung und @supports bei der Implementierung helfen könnte.
[00:17:55] Discrete Transitions
Mit transition-behavior können wir festlegen, wie sich zu Transitions nicht kompatible CSS-Properties verhalten sollen. View Transitions haben damit nur am äußersten Rande zu tun, kommen aber natürlich trotzdem auch zur Sprache.
[00:30:23] Custom Properties für ::backdrop
Ging bisher nicht, weil Top Layer, geht jetzt aber schon!
[00:36:18] checkVisibility()
Nomen est Omen, aber die Use Cases für u.A. Web Components und ggf. in Kombination mit dem Intersection Observer bedürfen genaueren Durchkauens. Peter überlegt, ob er nach seiner großen Mutation-Observer-Profiling-Kampagne nun auch 100.000 Intersection Observer testen muss.
[00:48:37] Custom State Set
Kurzes Referat über CustomStateSet und warum es nützlich ist.
[00:53:24] Promise.withResolvers()
Wir besprechen, ob das neue Promise.withResolvers() oder das weniger neue new Promise() besser als Wrapping-Mechanismus für den gänzlich antiken FileReader taugt. Nebenher stellt sich raus, dass CSS einen infinity-Wert kennt!
[01:12:30] Object.groupBy() und Map.groupBy()
Peter erklärt schnell die Unterschiede zwischen den beiden neuen Gruppierungs-Features (Spoiler: eins macht Objekte, eins macht Maps) und was die beiden mit den neuen Iterator Helpers zu tun haben (Spoiler: nichts).
[01:15:58] Neuer Mechanismus für die Source-Auswahl bei Media-Elementen
Wer soll entscheiden, welche Quelldatei mit welchem Codec geladen werden soll, Entwickler:in oder Browser? Schepp argumentatiert recht überzeugend für letzteres.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 611: Neues in der Web-Plattform, Teil 1
Wed, 03 Apr 2024 07:58:32 +0000
Schepp, Vanessa und Peter nehmen ein neues Safari-Release zum Anlass, ausschließlich über neue Web-APIs zu philosophieren. Kontroverse Themen wie der Digital Markets Act oder Peters randständige Feature-Wünsche spielen keine Rolle, wir blicken stattdessen positiv in die Zukunft!
Schaunotizen

[00:04:05] 
Ein neues Input-Element? Das eigentlich nur eine Checkbox ist? Und bloß etwas anders aussieht? Und per HTML statt per appearance in die Welt gesetzt wird? Wir sind leicht überfordert und bemühen Vergleiche zum mit  gebauten Accordion und dem Close-Watcher-Proposal. Auch der Indeterminate-State von Checkboxen findet Erwähnung
[00:28:33]  in  sind wir uns nicht ganz über die Notwendigkeit dieses HTML-Features im klaren und probieren Alternativen mit  zu formulieren.
[00:40:10] align-content in Block- und Table-Layouts
Exotisch, aber nicht unwillkommen.
[00:43:10] CSS Scoping
Peter bekommt den Unterschied zwischen @scope und  :scope nochmal neu erklärt und moniert dann, dass weder das eine noch das andere seine absurden Anforderungen zu 111% bedient.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 610: SEO!
Wed, 27 Mar 2024 11:40:16 +0000
Erneut haben wir uns Alexander Lichter (LinkedIn / Mastodon / Twitter) in die Sendung eingeladen, der sich als Web-Engineering-Consultant, Trainer und Video–Streamer nicht nur mit Vue.js, Nuxt oder UnJS auskennt, sondern auch in den hohen Künsten der Suchmaschinenoptimierung, kurz SEO.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


[00:02:30] SEO
Alex eröffnet unsere Sendung mit der Feststellung, dass nur ein geringer Prozentsatz aller Webseiten überhaupt organischen Suchverkehr von Google erhält, weil sie zu weit hinten in den Suchergebnissen auftauchen. Umso wichtiger ist es demnach, seine Seite für Suchmaschinen zu optimieren. Es gibt verschiedene Aspekte der Suchmaschinenoptimierung, darunter das technische SEO, sowie On-Page- und Off-Page-Optimierungen. Auf den vorderen Plätzen stehen qualitativer Inhalt, gute User Experience und technische Aspekte wie Ladezeiten und Sicherheit (in erster Linie HTTPS). Gutes SEO hat vor allem die Nutzer und ihre Zufriedenheit im Sinn.
Neben hochwertigen Inhalten kann auch eine Keyword-Recherche nicht schaden, um eine langfristige erfolgreiche Webseite zu gewährleisten. Zudem erörtern wir Tools (Google Ads Keyword Planner, keywordtool.io, Ahrefs, Semrush oder Moz) und Strategien zur effektiven Keyword-Recherche und Leistungsverbesserung von Webseiten, insbesondere im Hinblick auf die Core Web Vitals zur Steigerung der Benutzererfahrung. Wir gehen auch kurz auf verschiedene Core Web Vitals ein, wie den Cumulative Layout Shift (CLS) und Largest Contentful Paint (LCP), und wie man diese mit Tools wie Lighthouse messen kann. Auch die mobile User Experience und Accessibility spielen eine Rolle.
Dann folgen Ratschlägen zur Verbesserung der Seitenstruktur und Verlinkung. Wir sprechen über semantisches Markup, hierarchische Strukturen und deren Bedeutung für Suchmaschinen. Wir diskutieren die Verwendung von Schema.org in JSON-LD-Ausprägung zur Inhaltskennzeichnung für die Unterstützung von Google bei der Interpretation und Darstellung auf den Ergebnisseiten. Weitere Themen sind die effektive Nutzung von Sitemaps zur Unterstüzung der Indexierung von Seiten durch Google, die Vermeidung von Duplikaten und die korrekte Verwendung von Canonical-Tags. Abschließend thematisieren wir den Indexierungsprozess bei Google bei Single-Page-Anwendungen (SPAs). Alex betont die Relevanz von Server-Side-Rendering (SSR) für den Webseiten-Traffic anhand eines Beispiels von Joel Hooks, Mitbegründer von Egghead. 
Zum Schluß widmen wir uns noch den (potentiellen) Herausforderungen im Zusammenhang mit AI-generierten Inhalten. Alex sieht Google in Zukunft ein stärkeres Gewicht auf Vertrauenswürdigkeit und Autorität legen. Hier sind Konsistenz und Qualität des Contents zentral.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 609: Farbsehschwäche und Farbblindheit
Tue, 19 Mar 2024 06:59:22 +0000
Gast Markus Stahmann klärt in dieser Revision über Farbsehschwäche und Farbblindheit auf. Markus ist 1. Vorsitzender des Interessenverbands der Farbsehschwachen und Farbenblinden (der die hervorragende Webseite farbsehschwaeche.de betreibt) und außerdem Webentwickler bei New Data Services, was ihn zu einem einmaligen Kompetenzknäul für uns macht!

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 608: Nuxt & UnJS
Tue, 12 Mar 2024 06:59:44 +0000
Diese Revision wollten wir uns mit Nuxt und UnJS befassen und haben uns als Gesprächspartner Alexander Lichter (LinkedIn / Mastodon / Twitter) eingeladen, der sich nicht nur als Web-Engineering-Consultant, Trainer und Video–Streamer betätigt, sondern auch Mitglied der Nuxt- und UnJS-Teams ist.   

Unser Sponsor


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


[00:02:18] Nuxt
Nach einem kurzen Vorgeplänkel zu Vue.js wechseln wir sogleich zu Nuxt, das wie Next.js ein sogenanntes „Meta-Framework“ darstellt, nur dass es eben Vue nutzt, anstelle von React. Neben Nuxt gibt es noch Quasar, das ebenfalls auf Vue setzt. 
Allen Meta-Frameworks ist gemein, dass sie eines der clientseitigen Templating-Systeme nehmen und sie um serverseitige Funktionen ergänzen. Die wichtigste davon: Das Routing-System. 
Darüberhinaus ermöglichen Meta-Frameworks wie Nuxt es, statische Seiten zu erzeugen, die im Client ganz ohne JavaScript auskommen. Da unterscheiden sie sich von Konzepten wie den Server-Components von React, die es ledigleich ermöglichen, einzelne Komponenten vom Server rendern und refreshen zu lassen, das Frontend aber weiterhin im Browser orchestrieren.
Wir reden über die aktuellste Version von Nuxt und wie diese bei ihrem Release von der Community aufgenommen wurde. Und wir blicken nach vorne auf die kommende Version 4, die demnächst erscheinen soll. Anders als nach Version 3 ist hier nicht mit großen Breaking Changes zu rechnen. Für einen Vorgeschmack auf die Änderungen können aber jetzt schon in Nuxt 3 entsprechende „Future Flags“ aktiviert werden. Und für eine reibungslose Migration auf Version 4 gibt es dann noch sogenannte Codemods, die bestehenden Code für das neue Framework automagisch umschreiben.
[01:06:18] UnJS
An dieser Stelle schwenken wir um auf das Thema UnJS, welches eine Sammlung von kleinen und großen JavaScript-Helferlein ist. Zum ersten Mal hörten wir von UnJS von Joe Ray Gregory Anfang 2023, lernen aber erst jetzt, dass dies ebenfalls ein Projekt aus dem Vue-Kosmos ist.
Viele dieser Helferlein sind nämlich Spin-Offs von Projekten aus der Vue-Welt, von denen man aber annahm, dass sie auch für andere Projekte hilfreich sein könnten. Ein Beispiel ist der Webserver Nitro, der so etwas wie ein modernes Express + Connect darstelle und der nicht nur in Nuxt Verwendung findet, sondern auch in Analog.js, dem Meta-Framework für Angular.
Ein weiteres spannendes Paket ist Unplugin, das eine Art universelles Bindeglied zu allen existierenden Bundlern darstellt und einem so ermöglicht, ein Plugin leicht in jede Build-Chain zu integrieren.
Magic-Regexp ermöglicht es wiederum, Reguläre Ausdrücke in menschlicherer Sprache zu formulieren. 
Dann gäbe es da noch ufo, das allerlei Tooling rund um das Verarbeiten von URLs bietet.
Und schließlich fontaine, mit dem sich aufeinander abgestimmte Schriften-Stacks erstellen lassen.
Zum Abschluss geht nochmal zurück zu Nuxt und Alex gibt uns gute Tipps für den Einstieg und nennt ein paar Stolperfallen, die man bei der Arbeit mit Nuxt besser vermeidet. Und wir behandeln auch die Frage, wo man sein Nuxt-Projekt am besten hostet. Neben Digital Ocean lautet Alex‘ Tipp hier: fly.io

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 607: Design-Systeme im Jahr 2024
Tue, 05 Mar 2024 06:59:20 +0000
Nach rund anderthalb Jahren, in denen wir uns mit dem Thema nicht mehr dediziert befasst haben, haben wir uns erneut Jonas Ulrich (Twitter / LinkedIn) und Daniel Ley (Twitter / LinkedIn) von kickstartDS in die Sendung eingeladen, um mit ihnen über den Stand der Dinge in Sachen Design-Systeme zu sprechen.
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

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 606: Dev, Business, Design & Marketing effektiv vereint
Fri, 01 Mar 2024 19:54:14 +0000
In heldenhafter Manier setzte sich Martin Dilger einem durch Vanessa und Peter veranstaltetem Kreuzverhör aus, um die frohe Kunde der Einheit von Dev, Business, Design und Marketing zu verkünden. Martin war zuletzt in Revision 594 (Vom Chaos zum Code) zu Gast.

Unser Sponsor


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


Schaunotizen

[00: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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 605: Mental Health
Tue, 20 Feb 2024 06:00:21 +0000
⚠️ Content-Warnung: In dieser Episode sprechen wir über Depressionen. Bitte beachtet, dass einige Inhalte möglicherweise belastend sein könnten. Wenn ihr Unterstützung benötigt, wendet euch bitte an professionelle Hilfsangebote, wie beispielsweise die Stiftung Deutscher Depressionshilfe.
Diesmal sind Pepo (Pascal Szewczyk) und Pia Hofmeier mit dabei. Wir sprechen über mentale Gesundheit.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 604: UX auf der Kommandozeile
Tue, 13 Feb 2024 06:55:52 +0000
In dieser Episode tauchen wir, zusammen mit unserem Gast Martin Helmich, in die faszinierende Welt der Kommandozeilenprogramme und deren Bedeutung für die Developer Experience ein. Martin, Experte in Software- und Cloud-Architektur sowie Developer Relations bei Mittwald, teilt seine umfassenden Einblicke und Erfahrungen mit uns. Wir entdecken eine spannende Wetteranwendung für das Terminal und diskutieren, wie die Effizienz und Vorteile der Kommandozeile für Power-User nicht nur die alltägliche Arbeit erleichtern, sondern auch eine besondere Form der User Experience darstellen.
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. 🤯

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 603: Nerdige Soft- und Hardware-Tipps
Tue, 06 Feb 2024 11:36:28 +0000
In einer etwas speziellen Folge haben sich Peter, Vanessa und Hans zusammengesetzt und einfach drauf losgeplappert. Ein richtiges Thema gab es nicht, weswegen es zwar nicht um Gott und die Welt, aber um Bohrhämmer und UML-Diagramme ging.

Unser Sponsor


Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.
Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.
Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei Workshops.DE genau richtig.


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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 602: Komponentenbasierte Frontends in TYPO3
Tue, 30 Jan 2024 06:55:05 +0000
In dieser Revision haben Hans und Schepp Besuch von Florian Geierstanger (Web / LinkedIn / Mastodon) und Simon Praetorius (Web / LinkedIn / Mastodon), ihres Zeichens TYPO3-Frontend-Dompteur und TYPO3-Core-Entwickler und Berater.

Unser Sponsor


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


Schaunotizen

[00: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.


Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 601: WebAssembly – Vergangenheit, Gegenwart und Zukunft
Mon, 22 Jan 2024 06:59:04 +0000
Mit unserer Gästin, der Entwicklerin und Trainerin Martina Kraus sprachen wir zuletzt über das Thema Revision 482: Angular im Jahr 2021. Dieses Mal sollte es nicht um Angular gehen, sondern um WebAssembly. Fasten your seatbelts!
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.

Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 600: Live
Wed, 10 Jan 2024 06:59:12 +0000
Willkommen zur 600ten Revision unseres Podcasts, die wir am Sonntag, den 7. Januar 2024, in Form einer live abgehaltenen Fishbowl-Diskussion mit etwas über zwanzig Gästen durchgeführt haben. Wir haben dabei über drei verschiedene Themenblöcke gesprochen, die wir per Voting bestimmt haben:

Web Components
Erwartungen an den Framework-Jungle 2024
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



Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/


Revision 599: Glücksrad mit reichlich SVG und CSS-Datentypen!
Tue, 02 Jan 2024 06:59:08 +0000
In der letzten Revision vor der großen Jubiläumsfolge wir nochmal heftigst am Glücksrad gedreht! Ungeplant purzelt aus unserem Zufallsgenerator dabei recht viel SVG-eskes!
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] 

Unser Sponsor


tradingtwins sucht einen Frontend-Developer für den Aufbau einer digitalen Angebotsplattform. Wenn Du Spezialist für HTML/CSS und Javascript bist, solltest du dir das Startup mal genauer ansehen. Dich erwartet eine Schlüsselrolle in einem Kanban-Team aus Designern und Entwicklern. tradingtwins sitzt im Herzen von Köln, hat aktuell 11 Mitarbeiter. Zwei der drei Gründer sind selbst Entwickler. Sie bauen ein spannendes Produkt mit langfristigem Fokus, sind profitabel und solide finanziert.
Eine ausführliche Jobbeschreibung, sämtliche Kontaktdaten und weitere offene Stellen findest du unter www.tradingtwins.com/workingdraft.


Schaunotizen

[00:01:42] Select-Styling, Farb-Fonts und Unicode
Schepp sah sich der Aufgabe gegenüber, mit nativen ,

Working Draft

Revision 706: v0 und Vercel, mit Leo Reuter

Revision 705: Browser-News-Roundup

Schaunotizen

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

Schaunotizen

Links

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

Schaunotizen

Keine Schaunotizen

Revision 690: AI Frontend Generatoren

Schaunotizen

Revision 689: React – Heilsbringer oder Höllenmaschine?

Schaunotizen

Revision 688: Browser-Engine-Diversity

Schaunotizen

Revision 687: Valides HTML, mehr als Liebhaberei?

Schaunotizen

Links

Revision 686: Neues in den Browsern

Schaunotizen

Revision 685: TypeScript 5.9

Schaunotizen

Revision 684: Ecosystem Performance (e18e)

Schaunotizen

Links

Revision 683: ARIA-Glücksrad

Revision 682: Nuxt 4 und die Akquisition von NuxtLabs

Schaunotizen

Links

Revision 681: JSCraftCamp – Blaupause für Community-Events

Schaunotizen

Links

Revision 680: TypeScript goes native!

Schaunotizen

Revision 679: Hackerkiste Augsburg

Schaunotizen

Revision 678: programmier.con – Behind the Scenes

Schaunotizen

Links

Revision 677: Local AI

Schaunotizen

Links

Revision 676: Local First

Schaunotizen

Links

Revision 675: Green Web

Schaunotizen

Links

Revision 674: Security Awareness ohne Moralkeule

[00:01:08] Schaunotizen

Revision 673: VoidZero

Schaunotizen

Links

Revision 672: New Stuff coming to CSS

Show Notes

Revision 671: Angular v20 und der NgRx SignalStore

Schaunotizen

Links

Revision 670: Neuerungen in WebKit

Schaunotizen

On Tour @ #headinthecloud – Web Sustainability mit Thorsten Jonas & Marvin Hötger

Web Sustainability

Revision 669: Chat-Applikationen mit gängigen LLM-APIs

Schaunotizen

Links

Revision 668: KI im Alltag: Werkzeug, Hype oder Risiko?

Schaunotizen

Links

On Tour @ #headinthecloud – Women in Tech mit Myrna Gönnemann, Luisa Faßbender & Anna Maier

Women in Tech

Revision 667: Kann eine KI Entwickler:innen ersetzen?

Schaunotizen

Links

On Tour @ #headinthecloud – Platform Engineering mit Mathias Gebbe & Aljoscha Bollmann

Women in Tech

Revision 666: KI in der Webentwicklung

Schaunotizen

Links

Revision 665: Wie ich mit KI 3x schneller Apps programmiere