In dieser Revision hat Schepp Henning Koch (Web [https://triskweline.de/] / Twitter [https://twitter.com/triskweline] / LinkedIn [https://de.linkedin.com/in/henning-koch-ba730a86]) aus Augsburg zu Gast, der Mitgründer von Makandra [https://makandra.de/] ist, einem Team aus Ruby- und JavaScript-Entwicklern, UI-Designern und „Obstleuten“, die maßgeschneiderte Lösungen für ihre Kunden entwickeln. Thema des Gesprächs ist „HTML over the Wire“. Henning ist zudem der Maintainer von Unpoly [https://unpoly.com/], einem Open-Source-Tool, das genau diesen Ansatz verfolgt.

Schaunotizen

[00:01:52] HTML over the Wire Wir starten mit der Feststellung, dass „HTML over the Wire“ erst in letzter Zeit stark an Popularität und Momentum gewonnen hat, obwohl das Konzept bereits seit langer Zeit existiert. So gab es schon früher Ansätze, wie z.B. „Laravel Livewire“, über das wir auch schon in Revision 499 mit Christoph Rumpel sprachen [https://workingdraft.de/499/].

Sodann geht es zu den Vorteilen von „HTML over the Wire“, wie z.B. die Möglichkeit, kleine Fragmente einer Seite auszutauschen, ohne die gesamte Seite neu laden zu müssen, sowie die Möglichkeit, Animationen und non-disruptive Navigationen zu haben, ohne den ganzen heutzutage üblichen clientseitigen Aufwand. Teil des Konzepts ist die Tatsache, dass viel Logik und Datenverarbeitung wieder vom Frontend zum Server zurück wandert, und Frontend-Entwickler*innen sich wieder auf das klassische Frontend und User-Interface konzentrieren können. Es sind keine JSON-API-Endpoints und auch keine clientseitigen Renderer mehr erforderlich, um Daten hin und her zu schicken und in HTML umzuwandeln, was die Last auf den Clients deutlich reduziert. Frontend-Entwickler*innen können zwar weiterhin eigenes Scripting verwenden, wo es sinnvoll ist, aber das Heavy-Lifting wird vom Server übernommen.

Schließlich sprechen wir über die Entstehung von Unpoly [https://unpoly.com/] und wie es im Rahmen von Hennings Tätigkeit bei Makranda entstanden ist. Bei Makranda machen sie vor allem Greenfield-Projekte und hatten in der Vergangenheit schlechte Erfahrungen mit jQuery-Spaghetti-Haufen und AngularJS gemacht. Das Team wollte eine Lösung, die weniger Code erfordert und die Logik nicht so stark verteilt. Dies führte schließlich zur Entwicklung von Unpoly. Das Framework setzt von seiner Philosophie her stark auf Progressive Enhancement und unterstützt Entwickler*innen dabei, barrierearme Produkte damit umzusetzen. Spannend ist auch das Konzept der „Layers“, mit denen Dinge wie Offcanvas-Menüs, Overlays und Popovers orchestriert werden.

Keine Schaunotizen

Der Unpoly Elevator Pitch [http://triskweline.de/unpoly-rugb/] Ein Präsentationsdeck, das die Motivation hinter Unpoly und seine Vorzüge und Features abhandelt.

Anmeldung zur Revision 600 im Online Format

Hier geht’s zur Anmeldung auf MeetUp [https://www.meetup.com/de-DE/workingdraft/events/297473467] Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!

Revision 595: „HTML over the Wire“ und Unpoly

In dieser Revision haben wir Martin Dilger [https://www.linkedin.com/in/martindilger/] zu Gast, der als selbstständiger Entwickler, Berater und Trainer [https://www.effectivetrainings.de/] tätig ist. Mit ihm sprechen wir darüber, wie Entwickler*innen ihre Arbeit effizienter strukturieren und sich kontinuierlich verbessern können.

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 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt!

Schaunotizen

Vom Chaos zum Code – wie Developer ihre Arbeit effizient strukturieren Wir kennen alle das Gefühl, wenn die Woche vor uns liegt und wir keinen Plan haben, wie wir alles unter einen Hut bekommen sollen. Martin hat da einen Trick: Er teilt seine Woche in Arbeitszeit, Familienzeit und – ganz wichtig – „me“-Zeit auf.

Und um den Überblick zu behalten, hat er eine Wissensdatenbank in Notion erstellt, in der er sein ganzes Know-how der letzten zehn Jahre gespeichert hat. Über 100.000 Einträge! So hat er beim nächsten Mal oft gleich eine Anleitung, wie es besser geht. Zudem sind da nicht nur seine Aufgaben und Projekte drin, sondern auch interessante Dinge, die er im Netz findet. Eine wahre Goldgrube!

Ein Prozent besser – jede Woche: Die „Ein-Prozent-Methode“ bedeutet, dass wir versuchen, uns jede Woche um ein kleines bisschen zu verbessern. Es ist zwar Arbeit, sich ständig zu fragen: „Was kann ich besser machen?“. Aber es lohnt sich!

Deep Work: Wir alle kennen das – wir versuchen uns auf eine Aufgabe zu konzentrieren und dann… PLING! Eine neue E-Mail. PLING! Ein neues Slack-Nachricht. PLING! Mama ruft an. Martins Lösung? Konzentrieren wir uns auf „Deep Work“. Wir schalten alles aus und tauchen wir tief in unsere Arbeit ein. Und wenn jemand fragt, warum wir nicht sofort antworten? Wir sind einfach zu beschäftigt damit, genial zu sein! :D

Empathie ist für Martin ein super wichtiger Bestandteil erfolgreicher Entwicklerarbeit. Ein guter Softwareentwickler sollte sich in die Lage anderer versetzen können. Und Transparenz? Genau so wichtig! Damit alle im Team und die Kunden immer genau wissen, was los ist. Und natürlich darf auch die Kommunikation nicht zu kurz kommen. Transparente Kommunikation zwischen Teammitgliedern und Entwicklern ist das A und O.

Anmeldung zur Revision 600 im Online Format

Hier geht’s [https://www.meetup.com/de-DE/workingdraft/events/297473467]

Revision 594: Vom Chaos zum Code – wie Developer ihre Arbeit effizient
strukturieren

In dieser Revision tauchen wir mit Hans und Vanessa in die spannende Welt des Recruitings ein. Sie teilen ihre Expertise und Erfahrungen über den Prozess des Einstellens von Webentwickler:innen und geben wertvolle Einblicke in die Herausforderungen und Lösungsansätze in diesem Bereich.

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 [https://workshops.de/workingdraft?ref=workingdraft.de] genau richtig.

Schaunotizen

[00:02:54] Webentwickler:innen erfolgreich einstellen – Einblicke mit Hans & Vanessa Hans und Vanessa sprechen über die komplexen und dynamischen Aspekte des Einstellungsprozesses für Webentwickler:innen. Sie beginnen mit einer Diskussion über die wichtigen Qualifikationen und Fähigkeiten, die in der heutigen schnelllebigen Technologiewelt von Webentwickler:innen erwartet werden, und gehen dabei insbesondere auf gefragte Programmiersprachen, Frameworks und Tools ein. Das Gespräch führt weiter zu den Feinheiten des Bewerbungsprozesses und den Interviewfragen, die darauf abzielen, sowohl die technischen Fähigkeiten als auch die kulturelle Eignung eines Kandidaten zu bewerten. Sie betonen dabei die Wichtigkeit von Soft Skills und deren Bewertung im Einstellungsprozess, und heben die Rolle von UX/UI-Kenntnissen und anderen Frontend-Aufgaben hevor.

Die Diskussion nimmt eine interessante Wendung, als die Vor- und Nachteile der Einstellung von Remote-Entwicklern sowie die Herausforderungen und Chancen der globalen Talentmärkte beleuchtet werden. Das Thema Onboarding und Weiterbildung wird ebenfalls angeschnitten, wobei Strategien erörtert werden, wie Unternehmen neue Webentwickler erfolgreich in ihre Teams integrieren und deren kontinuierliche Entwicklung fördern können.

Ein weiterer kritischer Punkt ist das Erkennen des Bedarfs an neuen Stellen und worauf man bei der Analyse von Lebensläufen achten sollte. Hans und Vanessa teilen ihre Ansichten über den Stellenwert von Cultural Fit im Vergleich zu Technical Fit und diskutieren die unterschiedlichen Ansätze zur technischen Bewertung von Kandidaten, darunter technische Tests, Coding Challenges und Live Coding.

Abschließend beleuchten sie die Wichtigkeit von Diversität und Inklusion in Tech-Teams und besprechen, wie Unternehmen durch gezielte Maßnahmen Inklusion fördern können. Sie schließen mit einer Betrachtung von Probezeiten und der Frage, ob und wie Bezahlung in diesem Kontext gehandhabt werden sollte.

Revision 593: Webentwickler:innen erfolgreich einstellen – Einblicke mit Hans &
Vanessa

Dieses Jahr wird ein besonderes Jubiläum gefeiert: 10 Jahre Kirby CMS [https://getkirby.com/10]! Gratulation hierzu von unserer Seite 🎉 🎂

Mit unserem Gast und einem der Köpfe hinter Kirby, Bastian Allgeier, werfen wir einen Blick zurück und natürlich auch nach vorne.

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 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt!

[00:02:25] Keine Schaunotizen

10 Jahre Kirby CMS [https://getkirby.com/10] Bastian teilt persönliche Einblicke und wertvolle Lektionen aus einem Jahrzehnt der Entwicklung und Gestaltung des Content Management Systems. Wir reden über die Meilen- und Stolpersteine, die Bastian und sein Team auf ihrem Weg erlebt haben.

Als er über den großen Sprung von Version 2 zu Version 3 spricht, reflektiert Bastian offen über das, was er als den größten Fehler in der Geschichte von Kirby bezeichnet – einen kompletten Rewrite. Dieser ehrgeizige Schritt brachte zwar immense Herausforderungen mit sich, doch gleichzeitig war es eine Erfahrung, die das Team zusammenbrachte und die zukünftige Entwicklung maßgeblich prägte. Mit den daraus gewonnenen Erkenntnissen und dem Feedback der engagierten Kirby-Gemeinschaft verlagerte sich der Fokus weg von revolutionären Updates hin zu einem vorsichtigeren, evolutionären Entwicklungsprozess.

Dem Team spielte in die Karten, dass es nach Version 3 keinen dringenden Bedarf für einen schnellen Release einer weiteren Version gab, weder vonseiten der Entwickler- noch der Nutzerschaft. Diese Freiheit, ohne Druck arbeiten zu können, ermöglichte es dem Team, in aller Ruhe an Features zu arbeiten, die sie und ihre Kunden gleichermaßen begeisterten.

Statt auf Größe und Spektakel zu setzen, strebt das Team nach kontinuierlicher Verbesserung und der Verfeinerung von Kirby, sodass jede Version auf der vorherigen aufbaut und den Nutzern einen echten Mehrwert bietet.

Mit Vorfreude blickt Bastian auf das anstehende zehnjährige Jubiläum von Kirby. Dieser Meilenstein ist nicht nur eine Feier der Vergangenheit, sondern auch eine Gelegenheit, auf eine Zukunft zu blicken, in der Kirby weiterhin die Balance zwischen Benutzerfreundlichkeit und technischer Exzellenz hält.

Revision 592: 10 Jahre Kirby CMS 🥳

In der heutigen Folge beschäftigen wir uns mit Tiptap [https://tiptap.dev/], einem Editor-Framework, das als Open-Source-Software unter der MIT-Lizenz verfügbar ist. Zu Gast haben wir dafür Philip Isik (Web [https://philipisik.de/] / X (ehemals Twitter) [https://twitter.com/PhilipIsik]), Miterfinder und Co-Geschäftsführer von Tiptap.

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 [https://workshops.de/workingdraft?ref=workingdraft.de] genau richtig.

Schaunotizen

[00:02:24] Tiptap [https://tiptap.dev/] Tiptap hat sich aus einem Agenturgeschäft entwickelt, bei dem die Macher nach drei Jahren feststellten, dass sie mehr als nur Agenturarbeit waren und den Wunsch hatten, eigene Produkte zu entwickeln. Aus einem Agenturgeschäft wurde ein Produktgeschäft. Dieser Übergang ist nicht immer einfach, und es gibt viele Dinge zu beachten, wenn man diesen Schritt wagt.

Ein weiteres spannendes Thema in dieser Folge ist das Bezahlmodell von Tiptap. Wir diskutieren, wie man ein Produkt entwickelt, das sowohl kostenfrei als auch kostenpflichtig ist, und wie man die richtige Balance zwischen kostenlosen und kostenpflichtigen Features findet. Es wird erörtert, wie man mit Nice-to-have-Features umgeht und wie man diese in ein Bezahlmodell integrieren kann.

Als Besonderes Extra für unsere Hörer:innen versprechen wir eine Folge-Episode mit tiefgehenden technischen Details. Schreibt‘ uns all deine Fragen an comments@workingdraft.de oder im Working Draft Community Slack [https://draft.community/]. Wir freuen uns auf deine Fragen!

Revision 591: Tiptap

Die alljährliche CSS-Umfrage „State of CSS“ hat ihre 2023er-Ergebnisse veröffentlicht [https://2023.stateofcss.com/], und wie es sich für einen anständigen Frontend-Podcast gehört, tun auch wir unsere Gedanken dazu kund. Schepp und Peter führen in diesem zweiten Teil zu Ende, was sie zwei Wochen zuvor mit Vanessa begonnen haben [https://workingdraft.de/588/].

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 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt!

Schaunotizen

[00:03:36] Die color()-Function [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color] Die color()-Function soll in Zukunft all die einzelnen Farbräumen und Farbraummodellen gewidmeten CSS-Funktionen wie rgb() oder hsl() ersetzen. Denn es drängen immer mehr Farbräume [https://developer.chrome.com/articles/high-definition-css-color-guide/#what-is-a-color-gamut], und in deren Windschatten auch immer mehr Farbraummodelle [https://developer.chrome.com/articles/high-definition-css-color-guide/#what-is-a-color-space] für den Zugriff darauf in unsere Browser: Display p3, LAB, LCH, okLAB und okLCH. [00:09:44] Interpolation Colorspaces [https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method] Auch für das Aussehen von Farbverläufen [https://www.learnui.design/tools/gradient-generator.html] spielt die Wahl des Farbmodells eine große Rolle. Wir reden darüber, dass okLAB und okLCH verbesserte Versionen der nicht-„ok“-Versionen sind, bei denen verschiedene Parameter für die menschliche Wahrnehmung von Farben angepasst sind [https://bottosson.github.io/posts/oklab/], wodurch verschiedene Farben mit gleicher im Programmcode eingestellter Sättigung und Helligkeit auch in der Praxis eine vergleichbare Sättigung und Helligkeit aufweisen. [00:14:22] Relative Colors [https://www.w3.org/TR/css-color-5/#relative-colors] Die CSS Color Spec führt in Level 5 mit Hilfe der Relative Color Syntax die Möglichkeit ein, Farben im Grunde genommen zu destrukturieren und neu zusammenzusetzen. Sehr praktisch für Design-Systeme! [00:15:58] Ist CSS eine Programmiersprache? Weil wir sind, wie wir sind, schweifen wir an dieser Stelle ab und befassen uns mit der Frage, ob CSS denn nun eine Programmiersprache ist, oder nicht. Dafür spricht, dass es in CSS zunehmend Features gibt, die ma

Revision 590: State of CSS, Teil 2 von 2

Die Rückkehr der HTML-Ritter sieht Luke Scheppwalker und seinen Ewok Peter die letzten interessanten Teile der State of HTML Pre-Umfrage [https://github.com/Devographics/surveys/discussions/categories/state-of-html-2023-features] besprechen.

Schaunotizen

[00:01:40] Resource Hints [https://developer.mozilla.org/en-US/docs/Learn/Performance/Web_Performance_Basics] Wir besprechen den wechselhaften Werdegang von rel="prerender" [https://developer.chrome.com/blog/prerender-pages/] und anderen Resource Hints, Speculation Rules [https://wicg.github.io/nav-speculation/speculation-rules.html], Fetch Priority [https://web.dev/fetch-priority/] und wann wir als Entwickler:innen überhaupt diese Mittel der Performanceoptimierung zücken sollten. [00:14:41] HTML-Module [https://github.com/Devographics/surveys/discussions/169] Die besprochene Syntax inkl. nicht unerheblichem Browser-Buy-In [https://chromestatus.com/feature/4854408103854080] irritiert uns sehr, denn es gibt schließlich schon ein gut abgehangenes Proposal für Import-Attribute [https://github.com/tc39/proposal-import-attributes]. Ebenso wagen wir es, dezent das „Feature“ Server-Side-Rendering in der heutzutage besprochenen Form in Zweifel zu ziehen. [00:28:28] <track>-Element [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track] Wir denken Use Cases für <track> herum, die nichts mit WebVTT [https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API] zu tun haben. Schepp bemängelt, dass das Element nicht zum Darstellen von Podcast-Transkriptionen taugt, da <audio> zu den permanent komplett unsichtbaren Elementen [https://www.peterkroener.de/welche-html-elemente-sind-immer-unsichtbar/] zählt. [00:36:41] MathML [https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math] Keine weiteren Kommentare zu MathML an sich, aber eure Firma sollte Igalia [https://www.igalia.com/] bezahlen, um neue Features in die Browser-Engines zu bringen! [00:40:30] Focusgroup [https://open-ui.org/components/focusgroup.explainer/] Es stellt sich heraus, dass Features es auch in Abwesenheit einer Spezifikation in die Browser schaffen können! [https://chromestatus.com/feature/5637601087193088] [00:42:27] Exclusive Accordion [https://github.com/Devographics/surveys/discussions/176] Im Rahmen eines Brainstormings für ein Accordion-Element überzeugt Schepp Peter von seinen Ideen für ein <detailsgroup>-Element. Das Original-Proposal mit Verhalten wie Radio Buttons hat es auch beim HTML-Standard schwer. [https://github.com/whatwg/html/pull/9400] [00:51:52] Model-Element [https://immersive-web.github.io/model-element/] und Ausklang Die von Apple ausgebrütete Web-API für ihr VR/AR-Gadget [https://www.apple.com/de/newsroom/2023/06/introducing-apple-vision-pro/] ist für weder interessant, noch besonders überraschend. Zum Thema VR/AR an sich äußern wir uns dezent skeptisch. Am Ende streifen wir noch kurz Konzepte und Alternativen zu Seamless Iframes, bevor wir die Umfragethemen für ausreichend bearbeitet erklären.

Revision 589: Neues in HTML und Co, Teil 3 von 3

Die alljährliche CSS-Umfrage „State of CSS“ hat ihre 2023er-Ergebnisse veröffentlicht! [https://2023.stateofcss.com/] 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 [https://2023.stateofcss.com/en-US/resources/#podcasts], 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 [https://workshops.de/workingdraft?ref=workingdraft.de] genau richtig.

Schaunotizen

[00:04:13] Subgrid [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid] Wir begrüßen die Einführung von Subgrid, einem der Hauptfokus-Gebiete der Interop-2023-Initiative [https://web.dev/interop-2023/], rundheraus und sinnieren ein wenig über die Adaption von Grid und Flexbox [https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox]. [00:08:25] Logical Properties [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values] 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 [https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility] Über das Pro und Contra von content-visibility und seinem Event-Kollegen contentvisibilityautostatechange [https://developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event] kommen wir auf CSS-Footguns und -Entäuschungen wie will-change [https://developer.mozilla.org/en-US/docs/Web/CSS/will-change] (ist doof [https://greensock.com/will-change/]), vertical-align [https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align] (ist eine Tabellenzellen-Only-Diva) und andere Fehlgriffe [https://wiki.csswg.org/ideas/mistakes] wie das Casing von currentColor [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword] zu sprechen. [00:23:35] Container Queries [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries] Wir geben zu Protokoll, viele der performancekritischen CSS-Hammerfeatures wie den :has()-Selektor [https://developer.mozilla.org/en-US/docs/Web/CSS/:has] und eben Container Queries eher sparsam zu verwenden. Schepp berichtet außerdem von

Revision 588: State of CSS, Teil 1 von 2

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 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de] und buch dein erstes Projekt!

Schaunotizen

[00:02:27] Geplauder zu Events und Shadow DOM Wir sprechen über Events [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events] und Shadow DOM [https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_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 [https://drafts.csswg.org/css-cascade-6/#scoped-styles] und Shadow Realms [https://github.com/tc39/proposal-shadowrealm].

Revision 587: Event Handling und Shadow DOM

Das HTML-Imperium in Person von Darth Peter und Imperator Scheppertine schlägt zurück und bespricht weiter die Themen-Sammlung [https://github.com/Devographics/surveys/discussions/categories/state-of-html-2023-features] zum nun erschienenen State of HTML [https://stateofhtml.com/].

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 [https://workshops.de/workingdraft?ref=workingdraft.de] genau richtig.

Schaunotizen

[00:02:19] tabindex-Attribut [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex] 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 [https://html.spec.whatwg.org/multipage/interaction.html#focus-navigation-scope-owner]) ergooglen lässt. Vielleicht kann das tabindex-Attribut ja durch Declarative Shadow DOM [https://developer.chrome.com/articles/declarative-shadow-dom/] wieder zum Leben erweckt werden? [00:12:38] Structured Data Wie Working Draft in Revision 526 berichtete [https://workingdraft.de/526/], ist JSON-LD [https://json-ld.org/] der King und alle anderen Formate dürfen sich gern in den Staub werfen. [00:17:26] part-Attribut [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part] Wir rekapitulieren kurz, wie Parts, Shadow DOM [https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM] und Slots [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot] 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. [https://github.com/WICG/webcomponents/issues/857] [00:40:44] plaintext-Wert für contenteditable [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable] Wir schwelgen in Erinnerungen an heroische Gefechte gegen diverse Browser-Bugs (z. B. Peters Canvas-Hack [https://www.peterkroener.de/canvas-hardwarebeschleunigung-per-javascript-selektiv-abschalten/]) und gegen Performance-Abstürze (z. B. beim Scrollen [https://www.igalia.com/chats/ian-fps]) und kommen am Ende doch zum Ergebnis, dass Programmieren saugt [https://www.stilldrinking.org/programming-sucks]. [00:41:24]

Revision 586: Neues in HTML und Co, Teil 2 von 3

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