Working Draft

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

Working Draft episodes

October 10, 2023 Revision 588: State of CSS, Teil 1 von 2
Die alljährliche CSS-Umfrage „State of CSS“ hat ihre 2023er-Ergebnisse veröffentlicht! Vanessa, Schepp und Peter freuen sich nicht nur darüber, dass Working Draft erneut an der Abstimmung über den besten CSS-Podcast der Milchstraße teilnehmen durfte, sondern auch darüber, dass die Umfrage Anlass bietet, mal wieder ausgiebig über diverse CSS-Themen zu plaudern.
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:04:13] Subgrid
Wir begrüßen die Einführung von Subgrid, einem der Hauptfokus-Gebiete der Interop-2023-Initiative, rundheraus und sinnieren ein wenig über die Adaption von Grid und Flexbox.
[00:08:25] Logical Properties
Dass niemand von uns wirklich ernsthaft Logical Properties benutzt hat, hält uns nicht davon ab, wild über mögliche Use Cases zu spekulieren. Möglicherweise sind Logical Properties aber auch einfach eine inkrementelle Verbesserung ohne Killer-Anwendungsfall.
[00:15:03] Content-Visibility
Über das Pro und Contra von content-visibility und seinem Event-Kollegen contentvisibilityautostatechange kommen wir auf CSS-Footguns und -Entäuschungen wie will-change (ist doof), vertical-align (ist eine Tabellenzellen-Only-Diva) und andere Fehlgriffe wie das Casing von currentColor zu sprechen.
[00:23:35] Container Queries
Wir geben zu Protokoll, viele der performancekritischen CSS-Hammerfeatures wie den :has()-Selektor und eben Container Queries eher sparsam zu verwenden. Schepp berichtet außerdem von der Mootoolisierung eines Teil-Aspekts von :has(), was ein Nachjustieren der Spezifikationen nötig machte.
[00:33:39] Neue Viewport Units
Wir berichten von unseren Erfahrungen mit Viewport-Units im Allgemeinen und den neuen Viewport-Units, die die diversen Mobile-Browser-Chromes mitbedenken im Besonderen. Die Frage „was zählt eigentlich als Viewport“ führt uns auf direkten Wege zu Themen wie Scrollbars, env() und dem im Orkus verschwundenen overflow: overlay.
[00:40:11] Intrinsic Sizing Keywords
Dass wir alle nur ein grobes, intuitives Verständnis von Maßangaben wie min-content haben, wird schnell ersichtlich.
[00:45:39] linear() Easing Function
Lineares Transition Timing ist nun so parametrisierbar, dass wir damit beliebige Beschleunigungskurven beschreiben können … jedenfalls, wenn wir gewillt sind, sehr viele Koordinaten anzugeben. Aber das ist unserer Auffassung nach kein Non-Starter!
[00:48:57] View Transition API
Schepp rekapituliert seine Probleme mit mehreren prallel stattfindenden View Transitions und wir überlegen, ob es nicht sinnvoll gewesen wäre, MPA-Transitions zuerst einzuführen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr
October 03, 2023 Revision 587: Event Handling und Shadow DOM
Professionell wie eh und je kamen Schepp und Peter nicht mal in die Nähe des eigentlich vorgesehenen Themas, und quasselten stattdessen über etwas ganz anderes.
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] Geplauder zu Events und Shadow DOM
Wir sprechen über Events und Shadow DOM! Zunächst geht es um verschiedene Arten von Event-Handling (Handler vs. Listener, bubbling vs. capturing, passive vs. non-passive), Ideen für nachträgliches Event-Reordering und Einschränkungen von Event-Objekten (die z.B. keine Proxies sein dürfen). Zum Ende hin formulieren wir Kritik an Shadow DOM und blicken auf kommende andere Abschott-Techniken wie CSS-Scoping und Shadow Realms.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 15 min
September 26, 2023 Revision 586: Neues in HTML und Co, Teil 2 von 3
Das HTML-Imperium in Person von Darth Peter und Imperator Scheppertine schlägt zurück und bespricht weiter die Themen-Sammlung zum nun erschienenen State of HTML.
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:19] tabindex-Attribut
Das tabindex-Attribut zu benutzen ist riskant, was uns bessere Alternativen erbrainstormen und Details der Funktionsweise der Tab-Reihenfolge (inkl. dem episch benannten Focus Navigation Scope Owner) ergooglen lässt. Vielleicht kann das tabindex-Attribut ja durch Declarative Shadow DOM wieder zum Leben erweckt werden?
[00:12:38] Structured Data
Wie Working Draft in Revision 526 berichtete, ist JSON-LD der King und alle anderen Formate dürfen sich gern in den Staub werfen.
[00:17:26] part-Attribut
Wir rekapitulieren kurz, wie Parts, Shadow DOM und Slots zusammenarbeiten, um eine rundherum mittelgute Developer Experience zu ermöglichen.
[00:31:16] DOM Parts
Eine sehr hypothetische API für zukünftig besseres DOM-Diffing. Zu dem Papiertiger selbst fällt uns nicht viel ein, aber Peter weiß zu berichten, warum Custom Elements keine Proxies sein können.
[00:40:44] plaintext-Wert für contenteditable
Wir schwelgen in Erinnerungen an heroische Gefechte gegen diverse Browser-Bugs (z. B. Peters Canvas-Hack) und gegen Performance-Abstürze (z. B. beim Scrollen) und kommen am Ende doch zum Ergebnis, dass Programmieren saugt.
[00:41:24] is-Attribut
Kurzer Rant von Peter darüber, wie Alternativen zum ach so verabscheuten is-Attribut eigentlich aussehen würden (nicht gut).
[00:46:00] crossorigin-Attribut
Schepp erklärt kurz, wann und wo wir crossorigin und rel=preload brauchen.
[00:52:31] Client Hints und Resource Hints
Wir sinnieren über Client Hints, User Agent Sniffing und Alternativen, sowie die Unmöglichkeit der Feature-Detection für die gap-Property mit @supports.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 13 min
September 22, 2023 Revision 585: Neues in HTML und Co, Teil 1 von 3
Es gibt nun ein State of HTML 2023 (passend zu State of JS und State of CSS, bitte mitmachen), für den zuvor auf GitHub Input gesammelt wurde. Schepp und Peter haben sich die Mitte August für die Umfrage zur Diskussion stehenden HTML-Features reingezogen und vergessen, dabei die Mikrofone auszuschalten.
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:23]
Im Rahmen des Bequatschens von kommen wir auf den Uber-Stacking-Context namens Top Layer zu sprechen, sowie darauf, dass bei ::background keine CSS-Variablen funktionieren.
[00:09:45] inert-Attribut
Wir vergleichen die Features und Fähigkeiten von inert mit dem vergleichbaren, aber flexibleren CSS-Feature visibility.
[00:13:17] Popover-API
Wir nehmen mit Wohlwollen zur Kenntnis, dass die Popover API Libraries wie Popper überflüssig macht und schweifen ein wenig in Richtung htmx und CSS Anchor Positioning ab.
[00:20:50] Selectlist
An Fancy Selects im Speziellen und HTML-Maximalismus im Allgemeinen entzündet sich wie immer die Frage: sollte das auch ein eigenes HTML-Element sein? Peter rechtfertigt seine Ablehnung mit Verweis auf die Komplexität (die „Specs“ von Open UI sind keine Specs) und das weitgehende Scheitern der HTML5-Formularfeatures.
[00:29:11]
Warum kein nav-Element, rätseln wir ergebnislos.
[00:34:32] Lazy Loading
Der Performance-Papst legt eine Blitzpredigt zu Lazy Loading hin und berichtet vom Umgang mit AVIF.
[00:44:00]
1 hr 24 min
September 15, 2023Revision 584: Solid.js & SolidStart
In dieser Revision erzählt Bernd Kaiser (LinkedIn), Software Developer bei inovex, über Solid.js und dessen Meta-Framework SolidStart.
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] Solid.js & SolidStart
Nachdem Bernd auf die Geschichte hinter Solid.js eingegangen ist, erläutert er die Basics des Frontend-Frameworks. Wir verweisen hierbei auf auf die Revision 572: Signals, bei der Bernhard Mayr, Stefan und Peter bereits über Signals gesprochen haben. Denn diese sind ein grundlegender Bestandteil von Solid.js/Signals. Weiterhin bespricht er mit uns den Control Flow, Component Properties, und Stores. Dabei kommt auch ein Vergleich zwischen Solid.js und React nicht zu kurz. Das Meta-Framework SolidStart, das in den Startlöchern steht – aber aktuell noch eine Beta-Version ist. Solid.js hat übrigens den OSAward für „2022 Breakthrough of the Year“ erhalten.
Links
Official results for js web frameworks benchmark
Solid.js Basics
Solid.js Playground
What is SolidStart?
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 7 min
September 05, 2023 Revision 583: Kann man Rust für Cross-Plattform Frontend-Entwicklung verwenden?
In dieser Podcast-Folge drehte sich alles um das Thema Cross-Plattform Frontend-Entwicklung mit Rust. Unser Gast, Benedikt Terhechte (Mastodon, Twitter, und seine Webseite) teilte seine Erfahrungen und Erkenntnisse zu diesem Thema.
[00:01:26]
Benedikt teilte seine Erfahrungen mit der Entwicklung einer Web-Extension in TypeScript und sprach über seine Arbeit mit Rust in der Frontend-Entwicklung. Er erörterte die Unterschiede zwischen verschiedenen Rust UI-Frameworks und gab Einblicke in die Entwicklung einer komplexen Rust-Desktop- und Webanwendung.
Auch haben wir über die Definition einer „nativen“ App diskutiert
Ein interessanter Punkt war die Erwähnung von Tauri, einer Electron-Alternative, die den WebView des Systems verwendet und daher auch die Unterstützung von Android und iOS in der Version 2.0 plant. Ein weiteres Thema war Dioxus, eine React-ähnliche Bibliothek für Rust.
Benedikt erklärte, dass es eine Vielzahl von WASM-Frontend-Bibliotheken für Rust gibt, die sich an verschiedenen Frameworks wie React, Solid JS und anderen orientieren. Er nannte Beispiele wie Yew (ähnlich React), Leptos (ähnlich SolidJS), Perseus und Sycamore (SvelteKit). Zusätzlich gibt es Bibliotheken wie Xilem, Egui und Iced, die darauf abzielen, plattformübergreifende UI-Bibliotheken für mobile, Desktop- und Webanwendungen zu entwickeln.
Links
Perseus
Eine WASM-Frontend-Bibliothek für Rust.
MoonZoon
Eine weitere Rust-Frontend-Bibliothek für Webanwendungen.
Sycamore
Ein Framework für die Entwicklung von Webanwendungen in Rust.
Yew
Eine Rust-Frontend-Bibliothek, die sich an React orientiert.
Leptos
Eine Rust-Bibliothek, die SolidJS ähnelt.
Xilem
Ein Projekt, das sich auf plattformübergreifende UI-Bibliotheken in Rust konzentriert.
Iced
Eine weitere Rust-Frontend-Bibliothek für die Entwicklung von UIs.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
55 min
September 04, 2023 Revision 582: Host-Context: Stefan
Und es geht weiter in unserer host-context()-Reihe und diesmal steht Stefan im Fokus! Und in die Interviewer-Rolle schlüpft erneut Vanessa.
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:17] host-context(Stefan)
Im Einstieg geht es um Stefans Job als Senior Product Architect, seinen Werdegang dorthin, seine Erfahrung mit Technologien und um die Herkunft seiner Online-Pseudonyme.
Stefan erzählt von seiner Rolle als Co-Moderator bei Working Draft und wie er vor zehn Jahren Teil des Teams wurde. Die beiden diskutieren über Filme und Bücher, wobei Stefan Sergio Leone als einen seiner Lieblingsregisseure nennt und „Once Upon a Time in America“ sowie „Spiel mir das Lied vom Tod“ empfiehlt. In Bezug auf Bücher erwähnt er „TypeScript in 50 Lessons„. Wer das wohl geschrieben hat? Trotz dieses kleinen Scherzes am Rande, lernen wir Stefan nochmal von seiner sehr bescheidenen Art kennen, wenn es um die Beleuchtung seiner Arbeit gerade im Bereich Bücher, Konferenzen und generelles Expertenwissen geht.
Das Gespräch dreht sich auch um persönliche Vorlieben. Stefan erklärt, dass er keine Haustiere hat und sich lieber in den Bergen als am Strand aufhält. Er bevorzugt das Bergwandern und hat in der Vergangenheit schon richtig lange Wanderungen unternommen. Stefan ist leidenschaftlicher Koch, ist ein Bier-Aficionado und kann auch auf zwei Jahre Taekwondo-Erfahrung zurückblicken.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 6 min
August 22, 2023 Revision 581: TypeScript 5.2
Wie immer dient die neue TypeScript-Version den Herren Baumgartner und Kröner als billige Ausrede, um über Gott und die Welt zu quasseln
Schaunotizen
[00:01:32] using Declarations and Explicit Resource Management
TS 5.2 unterstützt ein kommendes ECMAScript-Feature (z.Z. Stage 3), das an diversen Stellen ein besseres try-catch-finally sein will. Wir grenzen das Explicit Resource Management von JS gegen die FinalizationRegistry ab und vergleichen das geplante neue Ressourcen-Management-Feature mit dem, was uns Rust und C++ bieten.
[00:00:00] Decorator Metadata
Ein weiteres neues ES-Feature (ebenfalls z.Z. Stage 3) führt uns zu einer Debatte rund um Web Components im Allgemeinen und Lit im Speziellen.
[00:00:00] Named and Anonymous Tuple Elements und Easier Method Usage for Unions of Arrays
Zwei neue Kleinigkeiten, die wir wohlwollend zur Kenntnis nehmen.,
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 10 min
August 17, 2023 Revision 580: Gewaltfreie Kommunikation
In dieser Revision geht es zur Abwechselung Mal wieder um ein „softes“ Thema, nämlich um gewaltfreie Kommunikation (GfK). Dazu begrüßen wir unseren Gast Gabriel Birke, der bei der Wikimedia Deutschland arbeitet und der über die Idee hinter, und seine Erfahrungen mit GFK spricht.
Schaunotizen
[00:01:42] Gewaltfreie Kommunikation
Von Marshall Rosenberg entwickelt, geht es um eine bestimmte Denkweise, Haltung und Art des Sprechens, die darauf abzielt, Konflikte zu lösen und Beziehungen zu stärken. GfK zielt darauf ab, Bedürfnisse zu erkennen und Konflikte ohne Gewalt zu lösen. „Gewalt“ meint in dem Zusammenhang keine körperliche Gewalt, sondern eher das Durchsetzen eigener Interessen auf Kosten anderer. Stattdessen geht es darum, eigene Bedürfnisse zu kommunizieren, ohne Vorwürfe zu machen. Ein Debugger für Interaktionen, sozusagen! Wie das genau funktioniert, erfahrt Ihr in dieser Folge.
Links
Softwerkskammer
Zusammenschluss lokaler Communities zum Thema Software Craft. Organisatoren der SoCraTes-Unkonferenz.
Empathy in Tech
Veranstaltungen, Vorträge und demnächst das Buch „Empathy-Driven-Development“
Nonviolent Agile Retrospectives
Einführung in Retrospektiven, GFK und wie Teilnehmer und Facilitator GFK einbringen können.
Fachverband GfK
Deutscher Fachverband mit Trainer-Suche
The Center for Nonviolent Communication
Ressourcensammlung zu Gewaltfreier Kommunikation.
Al Weckert
Autor des Buches „GfK für Dummies“
Engineering Management for the Rest of Us von Sarah Drasner
Dinge, die Dir niemand vor Deinem neuen Job als Engineering Manager verraten hat.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 30 min
August 08, 2023 Revision 579: Host Context: Hans
Weiter geht es mit der Reihe host-context()! In dieser Revision gibt uns Hans (Webseite), langjähriges Mitglied des Working Draft Podcasts, einen Einblick in seinen Arbeitsalltag und erzählt uns, welchen Sport er am liebsten anschaut.
Schaunotizen
[00:01:31] Host Context: Hans
Hans, online auch bekannt als Drublic erzählt, uns wie es zu dem Namen Drublic kam, und ob er nun eigentlich Hans, Christian, oder Hans-Christian heißt. Er ist nun seit unfassbaren 11 Jahren beim Working Draft! Angefangen hat es mit Revision 45: H.264 in JS, jQuery Standards Team & OccupyHTML5.
Fußball-Fans aufgepasst! Wusstest ihr, dass Hans großer Fan ist? Könnt ihr erraten, wer sein Lieblingsclub ist?
Viel zu erzählen hat Hans über seinen aktuellen Job und den damit verbundenen Aufgaben. Er berichtet darüber, welche Techniken er einsetzt, um mit Problemen umzugehen und wie man Entscheidungen bestmöglich vertreten kann.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 13 min