Working Draft

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

Dieses Jahr wird ein besonderes Jubiläum gefeiert: 10 Jahre Kirby CMS! 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 und buch dein erstes Projekt! [00:02:25] Keine Schaunotizen 10 Jahre Kirby CMS 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.

In der heutigen Folge beschäftigen wir uns mit Tiptap, einem Editor-Framework, das als Open-Source-Software unter der MIT-Lizenz verfügbar ist. Zu Gast haben wir dafür Philip Isik (Web / X (ehemals Twitter)), 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 genau richtig. Schaunotizen [00:02:24] Tiptap 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. Wir freuen uns auf deine Fragen!

Die alljährliche CSS-Umfrage „State of CSS“ hat ihre 2023er-Ergebnisse veröffentlicht, 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. 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 und buch dein erstes Projekt! Schaunotizen [00:03:36] Die color()-Function 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, und in deren Windschatten auch immer mehr Farbraummodelle für den Zugriff darauf in unsere Browser: Display p3, LAB, LCH, okLAB und okLCH. [00:09:44] Interpolation Colorspaces Auch für das Aussehen von Farbverläufen 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, 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 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 man eher von einer Programmiersprache erwarten würde, wie ineinander schachtelbare Funktionen, Trigonometrische Funktionen, gehackte oder echte toggle()-Funktionen. Sicher sind wir uns darin, dass CSS nicht trivial zu beherrschen ist und dass auch ein ganz eigenes Gedankenmodell erfordert. [00:33:40] accent-color accent-color ist ein sehr billiges und nicht störendes Werkzeug, um analog zu typografischen Anpassungen Interfaces gleich ein bisschen netter zu machen. Es scheinen nur nicht ganz so viele Umfrageteilnehmer zu kennen. [00:35:44] Interactions In der Umfrage haben Themen wie Scrollen, Swipen und Pinchen ein eigenes Kapitel namens „Interactions“ spendiert bekommen. Wir sind große Fans von CSS Scroll Snapping und wissen zu berichten, dass eine weitere Ausbaustufe mit so Dingen, wie der :snapped-Pseudoklasse oder neuen Snap-Events ansteht. Adam Argyle, der daran federführend arbeitet, hat auf dem CSS Day 2022 einen tollen Vortrag mit sehr beeindruckenden Demos über den Themenkomplex gehalten. Wir erwähnen außerdem lobend die Eigenschaft overscroll-behavior, die sogenanntes „Scroll-Chaining“ verhindert, also dass wenn man z.B. ein Overlay bis zum Schluss gescrollt hat und man dann weiterscrollt, das Dokument dahinter auf einmal anfängt zu scrollen. Außerdem lässt sich damit verhindern, dass beim Scrollen ungewollt ein Gesten-Shortcut des Browsers aufgelöst wird. [00:50:51] scrollbar-gutter Mit scrollbar-gutter könnt Ihr bei fehlenden Scrollbars Platz für ein späteres Erscheinen dieser freihalten. Sinnvoll ist das bei SPA und MPAs, bei denen man zwischen Ansichten hin und her navigiert, die mal viel Inhalt und mal wenig Inhalt haben. Das Auftauchen und Verschwinden der Scrollbars führt dann zu einem Springen der Inhalte, was ihr eben mit scrollbar-gutter verhindern könnt. [00:55:11] Variable Fonts Wir sind uns darin einig, dass wir die Möglichkeiten moderner Schriftformate toll finden. Schepp empfiehlt zu dem Thema einen super Vortrag von Ulrike Rausch auf der beyond tellerrand. Peter wiederum berichtet von seiner Entdeckung der CSS-Eigenschaft font-variant-numeric. Um herauszufinden, welche Features ein spezifischer Font unterstützt, empfehlen wie die Online-Tools FontDrop! und Wakamai Fondue. Bei Einbinden von Fonts gibt es zukünftig noch eine Reihe mehr Möglichkeiten, an die Fähigkeiten des Browsers angepasste Schriftformate einzubinden, z.B. für Color Fonts. [01:05:20] text-wrap Mit text-wrap: balance lässt sich festlegen, dass wenn Text umgebrochen wird, er gleich so umgebrochen wird, dass sich zwischen beiden Zeilen eine ausgewogene Zeilenlänge ergibt. Es werden also mehrere Wörter in die nächste Zeile genommen und nicht nur das eine, das die Zeilenlänge gesprengt hat. Dieses Setting ist gut für Überschriften geeignet, auch weil es aus Performancegründen nur bis zu einer Zeilenzahl von drei Zeilen unterstützt wird. Neu hinzu kommt text-wrap: pretty, das in Fließtexten verhindert, dass ein einzelnes Wort alleine in der letzten Zeile steht („orphan“). Weil Text-Layout so unglaublich Komplex ist, verweisen wir nochmal auf die unglaublich interessante Igalia Chats Episode „First Person Scrollers“. [01:12:02] :focus-visible Und weil wir gerade dabei sind und es passt, verweisen wir in Sachen :focus-visible und dessen Komplexität bei der Umsetzung auf die Igalia Chats Episode „The history of :focus-visible and inert“. Die :focus-visible-Pseudoklasse bietet Euch dei Möglichkeit, Fokus-Outlines, auch Focus-Rings genannt, nur dann sichtbar werden zu lassen, wenn jemand die Seite mit einem Eingabegerät bedient, das diese erforderlich macht. Anders als die meisten Steak-Halter von Webprojekten draußen in der Welt, findet Peter diese Fokus-Anzeige super hilfreich. [01:16:07] Other Das Kapitel namens „Other“ lässt uns auf CSS Houdini und seine vielen großen Pläne kommen, die sich aber bislang nicht manifestiert haben, wie z.B. die CSS Parser API oder Custom Selectors, mit denen Peter einige seiner Probleme im Zusammenspiel mit Custom Elements lösen könnte. Immerhin gibt es @property und das finden wir sehr praktisch, auch wenn Peter sich daran stört, dass Firefox es immer noch nicht freigeschaltet hat. Da es aber Teil des InterOp 2023 Projektes ist, müsste es eigentlich bis Ende diesen Jahres shippen. [01:23:08] Tools: Pre- & Post-Processors Peter erzählt, dass er sein CSS durch keinerlei Mangel mehr dreht, seien es Pre- oder Post-Prozessoren. Allerdings nutzt er gerne Parcel als Bundler und so wäre es möglich, dass das noch irgendeine Form der Magie betreibt, die ihm entgeht. Irgendwie kommen wir dadurch auf @scope zu sprechen, das es möglich macht/machen wird, dass CSS Selektoren nur noch auf bestimmte Teilbereiche des DOM Baums einwirken. Damit wird man in Zukunft Style-Encapsulation lösen und alle anderen Krücken werden hinfällig. [01:27:00] @layer Von @scope geht es zu @layer. Allerdings nicht ohne einen erneuten Abschweifer, diesmal über SASS‘ @extend– und CSS-Kompressoren-Fallstricke. Beide haben mit @layer allerdings wenig am Hut. Mit @layer lässt das eigene CSS in verschieden „Starke“ Gruppen einteilen, was es ermöglicht, einer Library Default-Styles mitzugeben, die dessen Anwender ohne Spezifitätsverrenkungen verändern können. Peter sieht es auch als hilfreiches Werkzeug, um Legacy-CSS nach und nach auf einen modernen Stand zu bringen. Allerdings würden wir beide von einem breiten Einsatz eher abraten, denn anders als bei manch anderer Neuerung in CSS, lässt ein Einsatz von @layer alte Browser Schiffbruch erleiden. Ähnlich wie es beim CSS Nesting auch der Fall ist. [01:37:12] CSS Usage Als vorletztes werfen wir einen Blick auf die Auswertungen zum Thema „CSS Usage“. Hier zeigt sich, dass die meisten Antwortenden CSS im Kontext von Web Apps / SPAs einsetzen. Aber es werden auch sehr viele Design-Systeme damit konstruiert. Am wenigsten wird CSS im Bereich „Art and Illustration“ eingesetzt, was Peter zumindest in Sachen computergenerierter Kunst gut nachvollziehen kann. Denn es fehlt einfach an einer guten programmatischen API für CSS. Das CSS Object Model sollte diese Rolle ja ursprünglich mal ausfüllen, kann die Erwartungen aber auch nicht erfüllen. Aber auch die Alternative SVG hat ihre Macken, und so stehen wir im Grunde mit eher leeren Händen da. [01:40:10] Browser Incompatibilities Abschließend schauen wir noch auf die Liste an Features, die die Antwortenden sich noch nicht trauen zu verwenden. Ganz vorne dabei sind :has() und Container Queries, was zusammen mit dem in der Liste auftauchenden @property auf eine gewisse Problembärigkeit des Firefox‘ hinweist. Insgesamt kommen wir aber beide zu dem Schluss, dass wir mit den aktuellen Möglichkeiten von CSS und den Browsern sehr sehr sehr zufrieden sind! Und oftmals ist es ja auch so, dass man manches Vorhaben vielleicht auch ohne direkten Weg durch Missbrauch anderer, schon vorhandener CSS Features erreichen kann. Schepp fällt da zum Beispiel Roman Komarov ein, der mit CSS Scroll Driven Animations als Steigbügelhalter zahlreiche seiner CSS-Wünsche erfüllen konnte. Wir loben außerdem die tolle Spec-Arbeit der CSS Working Group und auch die große Menge Tests, die in den letzten 10 Jahren für all diese Features geschrieben wurden. Und weil guter Dinge drei sind, empfiehlt Schepp nochmal eine Igalia Chats Episode, nämlich die Folge „The Novel Engines: Ladybird„, in der Andreas Kling darüber berichtet wie er eine komplett neue Browser-Engine geschrieben hat und die Specs und Tests als Grund nennt, wie er das geschafft hat. Good times ahead!

Die Rückkehr der HTML-Ritter sieht Luke Scheppwalker und seinen Ewok Peter die letzten interessanten Teile der State of HTML Pre-Umfrage besprechen. Schaunotizen [00:01:40] Resource Hints Wir besprechen den wechselhaften Werdegang von rel="prerender" und anderen Resource Hints, Speculation Rules, Fetch Priority und wann wir als Entwickler:innen überhaupt diese Mittel der Performanceoptimierung zücken sollten. [00:14:41] HTML-Module Die besprochene Syntax inkl. nicht unerheblichem Browser-Buy-In irritiert uns sehr, denn es gibt schließlich schon ein gut abgehangenes Proposal für Import-Attribute. Ebenso wagen wir es, dezent das „Feature“ Server-Side-Rendering in der heutzutage besprochenen Form in Zweifel zu ziehen. [00:28:28] <track>-Element Wir denken Use Cases für <track> herum, die nichts mit WebVTT zu tun haben. Schepp bemängelt, dass das Element nicht zum Darstellen von Podcast-Transkriptionen taugt, da <audio> zu den permanent komplett unsichtbaren Elementen zählt. [00:36:41] MathML Keine weiteren Kommentare zu MathML an sich, aber eure Firma sollte Igalia bezahlen, um neue Features in die Browser-Engines zu bringen! [00:40:30] Focusgroup Es stellt sich heraus, dass Features es auch in Abwesenheit einer Spezifikation in die Browser schaffen können! [00:42:27] Exclusive Accordion 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. [00:51:52] Model-Element und Ausklang Die von Apple ausgebrütete Web-API für ihr VR/AR-Gadget 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.

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.

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

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.

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 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt! Schaunotizen [00:02:23] <dialog> Im Rahmen des Bequatschens von <dialog> 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] <breadcrumb> 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] <template> Wir versuchen zu ergründen, warum (unserer Erfahrung nach) kaum jemand das Template-Element in freier Wildbahn nutzt, wie eine Rettung aussehen könnte … und ob sie Erfolg versprechend sein kann. [00:48:34] Custom Elements Schepp legt dar, warum in seiner Realität Web Components (noch) keine Rolle spielen, obwohl wir mittlerweile mit attachInternals Custom Form-Elemente entwickeln könnten! [01:05:25] Schlussrunde Zum Abschluss steifen wir extrem kurz die Themen showPicker(), <portal>, View Transitions, blocking="render" und Mozilla allgemein. Links State of HTML 2023 Die Macher der Befragung würden sich sehr freuen, wenn auch Ihr mitmachen würdet!

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?