Working Draft

Über Domain-Driven Design (DDD) sprechen Hans und Vanessa mit dem Gast Florian Benz, VP of Engineering bei Scalable Capital. Florian beleuchtet dabei vor Allem dir Umsetzung samt Stolpersteinen in der Realität. Unser Sponsor Wir sind Demodern – wir sehen uns als Agentur einer neuen Generation: offen, unkompliziert, 100% digital. Gegründet von Designern, liegt unsere Leidenschaft in innovativen, digitalen Inszenierungen und einer sinnvollen User Experience. Wir entwickeln unsere Projekte gemeinsam mit Spezialisten aus Strategie, Design, UX und Development. „Let’s push things forward“ ist unser Leitsatz und Philosophie. Darin steckt unsere eigene Veränderung, aber auch, Projekte neu zu betrachten und zu rechtem Mehrwert zu bringen. Ihr könnt gerne Kontakt zu Florian oder Marisa direkt aufnehmen – oder ihr schaut auf demodern.de/jobs vorbei. Schaunotizen [02:14:00] Domain-Driven Design Florian begann die ersten Schritte mit Domain-Driven Design (im Folgenden mit „DDD“ abgekürzt) in Teams bei Scalable Capital im Jahr 2019. Zu den größten Herausforderungen zählte, wie man das theoretische Wissen über DDD konkret umsetzen. Bei der Theorie geht Florian speziell auf folgende Teile von DDD ein: Explorativ, strategisch und taktisch. Genauer erläutert er die folgenden Komponenten von taktischem Design: Value Objects, Entities, Aggregrates, Repositories, Services und Factories. Ein Hauptbestandteil von DDD ist es, eine gemeinsame Sprache zu entwickeln. Das ist jedoch gar nicht so einfach. Vor allem, wenn die allgemeine Code-Sprache bei Projekten oft Englisch ist, aber die Dokumentationssprache z.B. Deutsch. Doch wenn das Team einmal so weit ist, macht es die gemeinsame Sprache für alle einfacher. Für Entwickler:innen im Speziellen, den Code zu strukturieren und eine sehr wichtige Frage zu beantworten: Wo gehört dieser Code überhaupt hin? Links Patterns, Principles, and Practices of Domain-Driven Design Scott Millett, Nick Tune „The Big Blue Book“ Domain-Driven Design: Tackling Complexity in the Heart of Software —Eric Evans Domain Modeling Made Functional —Scott Wlaschin, KanDDDinsky 2019 Making Impossible States Impossible—Richard Feldman, elm-conf 2016 Kotlin and Domain-Driven Design-Value Objects—Florian Benz 2020 DDD Crew – Welcome to Domain-Driven Design (DDD) „This project contains definitions of DDD and fundamental concepts to reduce the learning curve and confusion.“ Verwandte Revisionen Revision 314: DDD, CQRS und WTF Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Chat GPT ist in aller Munde, was Vanessa und (besonders) Hans und Peter zu einer lebhaften Diskussion rund um AI und ML speziell im Webdev-Kontext verleitet. 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:18] Chat GPT & Co Nach einem kurzen Begriffsklärungsversuch debattieren wir um ChatGPG und Co (v.a. Githubs Copilot, Adobes Enhance Speech, und Descripts textbasiertem Videoeditor). Wir versuchen Use Cases für die Tools zu kategorisieren, die darin inhärenten Chancen und Risiken abzuwägen und überlegen, inwiefern Quellennachverfolgung und Explainable AI denkbar und glaubwürdig sind. Am Ende stellt sich die Frage, ob in Zukunft ganze hochwertige Webseiten automatisch generiert werden können oder ob AI auch weiterhin daran scheitert, Algorithmen für sortierte Arrays nicht nur auszuspucken, sondern auch zu bewerten. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Diese Revision traf eine rekordverdächtigen Anzahl Gäste und Hosts aufeinander: Vanessa, Stefan und Schepp begrüßten Joe Ray Gregory, David Müllerchen und Robin Böhm an ihrem virtuellen Kaminfeuer. Joe aus Hamburg kennt Ihr aus den Revisionen Revision 520: Unit-Testing / Testing Library und Revision 552: Frontend Development im Jahr 2023. Robin aus Berlin (Twitter / Web) wird nur langjährigen Hörer*innen von seinem Besuch vor 10 Jahren aus Revision 130: AngularJS – Superheroic JavaScript MVW Framework ein Begriff sein. David Müllerchen (Twitter / Web), ebenfalls aus Hamburg, bildete den Dritten im Bunde. Alle unsere Gäste sind Webentwickler, Berater, Trainer, Meetup-Organisatoren und David sogar Twitcher. Die einen präferieren Angular, der andere eher Vue.js. Aber vor allem haben sie alle drei Vorerfahrung im Konferenzorganisieren und haben sich zuletzt für eine große Community-Konferenz zusammengetan. Wie das kam und welchen Hürden die drei und ihr Team auf dem Weg dahin zu überwinden hatten, darüber reden wir in dieser Ausgabe! Schaunotizen [00:00:59] Konferenzorganisation in Zeiten einer Pandemie Den Anfang nahm alles mit der Angular-Konferenz NG-DE 2019, die sehr viel Aufwand, aber auch ein großer Erfolg war und die sich für eine Wiederholung empfahl. Trotz Ausstiegs seiner Co-Organisatoren aufgrund von Erschöpfung, buchte Robin die Location erneut für das darauffolgende Jahr. Wir wissen alle, was dann geschah: 1 Pandemie. Von nun an wurde es eine Zitterpartie, ob eine Konferenz in 2020 überhaupt noch möglich werden würde, und wenn nicht, wie sich die Location bei all verhalten würde. Zum Glück hat sie mitgezogen. In 2020 wurde aus der geplanten Konferenz nichts mehr und alle Bemühungen um das Event wurden auf Eis gelegt. Das änderte sich in 2021, als sich nicht nur die pandemische Situation verbesserte, sondern Robin in David und Joe auch neue Mitstreiter fand. Joes Hinzustoßen mündete in einem zusätzlichen Konferenztag, welcher dem Framework Vue.js gewidmet werden sollte. Die eigentliche Konferenz-Organisation und die Sprecherauswahl baute auf lange erarbeitete Blaupausen der JSConf.EU, ergänzt um Tipps anderer Organisatoren wie denjenigen der JSUnconf, der RuhrJS oder des JSKongress‘. Für die Auswahl der Vorträge hieß das, dass man einen „Call for Papers“ ausgerufen hatte und die eintrudelnden Vorträge anonymisiert und in einen „Blind-Voting“-Prozess überführt wurden. Neben der aufwendigen Sprecher*innen-Auswahl musste natürlich ein Budget geplant und Ticketpreise davon abgeleitet werden. Es mussten Sprecherreisen und -unterkünfte organisiert und gebucht werden. Es galt, eine Location für die Abendveranstaltung zu finden, Webseiten zu bauen, Promomaterial herzustellen, Werbung zu machen. Und das Team legte auch viel Wert darauf, verantwortungsvoll auf die Situation mit der Pandemie einzugehen und Masken und Tests anzubieten, Systeme zu entwickeln wie Menschenansammlungen vermieden werden konnten, und Besucher*innen die Möglichkeit zu geben, zu signalisieren wenn Sie lieber mit Maskentragenden Gespräche führen wollten. Nachdem all das auf Spur war, wurde es auf den letzten Metern doch noch „spannend“, denn es stellte sich heraus, dass zeitgleich eine große Messe in Berlin angesetzt war, die die Preise der Unterkünfte hat in die Höhe schnellen lassen, bis hin zu dem Punkt wo Teilnehmende es sich nicht mehr hätten leisten können. Auch hier zog die Location, aber auch die Community mit und das Event wurde kurzerhand um wenige Tage verlegt. Am Ende wurden NG DE 2022 und vuejs.de Conf Gott sei Dank erneut ein großer Erfolg und hat sich all die Mühe und das Zittern gelohnt. 🥳 Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Nachdem sich Vanessa und Peter in ihrem ersten Anlauf noch um ein strukturiertes Abarbeiten des Fragenkatalogs der 2022er State of JS-Umfrage bemüht hatten, ergehen wir uns dieses Mal in eher freier Assoziation, schaffen es dabei aber auch, die verbleibenden 98% der Umfrage in einer Revision abzufertigen. Schaunotizen [00:00:58] State of JS Die zweite Hälfte des State of JS befasst sich mit Tools und Frameworks, die wir eher abstrakt diskutieren. Zu den relevanten Fragen zählt die von State of JS getroffene Unterscheidung zwischen Frontend- und „Render-Frameworks“ (Next, Nuxt, Gatsby etc.), die Frage inwiefern Frontend-Frameworks eher ein Management als ein Entwickler-Tool sind und wie Web Components dazu passen. Ob wir jemals weniger Frameworks haben (oder werden haben wollen) und ob uns der framework-industrielle Komplex überhaupt lässt, bleibt trotz des kreativen Einsatzes von Auto-Analogien (u.A. zur Pistolenschaltung) ungeklärt. Zu Sinn und Zweck von Mobile Frameworks haben wir eher wenig beizutragen, feiern aber Browser-Devtools wie DOM-Breakpoints (Chrome, Firefox), Hover-State-Enforcing (Chrome, Firefox), Resource Overrides (Chrome-Extension) und In-Devtools-Suchfunktionen gründlich ab (und anwesende Performance-Päpste finden darüber hinaus an an Chromes Trace-Tools gefallen). Weitere ehrenswerte Nennungen erfahren Sentry, die (einigermaßen) gute alte Formularvalidierung, <dialog> und <details>, die View Transition API und generell alles aus der Revision 552 zu Frontend Development im Jahr 2023. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Zum Jahreswechsel haben wir uns mit Joe Ray Gregory (@joyraygregory) hingesetzt und zusammen darüber orakelt, welche neuen Tools und Paradigmen die Frontend Entwicklung im Jahr 2023 prägen könnten. Joe ist Frontend-Entwickler und Trainer aus Hamburg und Ihr kennt ihn vielleicht aus der Revision 520 über Unit-Testing. 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:01:45] Frontend Development im Jahr 2023 Wir reden natürlich über Frontend-Frameworks und denken, dass der Schwenk hin zu Frameworks fortsetzen wird, bei denen Server-Side-Rendering und so wenig JaVaScript im Client der Standard ist. Prominentestes Beispiel hierfür ist Astro, aber auch NextJS und NuxtJS entwickeln sich in diese Richtung. Außerdem werden sich Web Components als Auslieferungsform weiter etablieren. Für eine bessere Performance wird alles weiter in Richtung „Actor Model“ entwickelt, also dass ein Main-Thread möglichst viel Arbeit in separate Threads auslagert (höre auch Revision 329 zum Actor Model). Eine Schlüsselrolle wird das Tool Partytown spielen. Als Unterstützung bei der Entwicklung werden Mikro-Bibliotheken aus dem UnJS-Pool große gebräuchliche Bibliotheken wie Axios oder auch Lodash ersetzen. Im Testing wird Playwright seinen Marktanteil weiterausbauen. Für die Komponenten-basierte Entwicklung wird Storybook zwar das Goto-Werkzeug bleiben, aber daneben wird sich Histoire aus dem Vue-Umfeld ähnlich etablieren können wie zuvor auch schon Vite. In Sachen Bundler und Build-Tools kommt allerlei Neues auf uns zu: Turbopack wird der Nachfolger von Webpack und dann gibt es vom Erfinder von Babel noch eine ganze Build-Suite namens Rome, die Code-Formattier, Code-Linter, Com- & Transpiler, Bundler, sowie das Testing-Tool aus einer Hand sein will. Beiden ist gemeinsam, dass sie aus Performance-Gründen auf Rust bauen, was derzeit auch im Trend zu sein scheint und von SWC, Parcels Lightning CSS und esbuild (allerdings in Go) vorexerziert wurde. Darüber, ob das immer nötig ist oder ob ein wenig Nacharbeit an JavaScript-Code nicht der erste Zwischenstopp sein müsste, fragt sich da Marvin Hagemeister. Aus dem CSS-Bereich kommend werden die Container Queries ganz viel neue Möglichkeiten eröffnen, sobald diese in allen Browsern freigeschaltet sind. Monorepos werden ein Thema werden, dank exzellentem Tool-Support durch pnpm, Turborepo oder Lerna (das allerdings nicht mehr maintained wird). Und schließlich schauen wir auch gespannt darauf, was der NodeJS- und Deno-Konkurrent Bun, dessen JavaScript-Engine nicht auf Googles V8, sondern auf Apple JavaScriptCore bsisert, zukünftig in die Waagschalde werfen wird. [00:00:00] Keine Schaunotizen Console Ninja VSCode-Erweiterung, um Consolen-Output direkt in der IDE zu haben. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Mit Gast Alexander Neumann (Github), seines Zeichens Entwickler der FOSS-Backup-Software Restic quatschen wir über Backups, Backup-Strategien und Backup-Fails. Unser Sponsor Dieser Podcast wird von NordVPN unterstützt. NordVPN ist ein Premium-VPN-Anbieter, der sich durch regelmäßige Updates mit neuen und praktischen Funktionen von der Konkurrenz abhebt. In Kombination mit einem fairen Preis und der jahrelangen Erfahrung des Teams, das aus Cybersicherheits- und IT-Experten besteht, blickt NordVPN auf eine inzwischen 10-jährige Firmengeschichte zurück. Ein VPN ermöglicht die Verbindung ins Internet über einen virtuellen privaten Server eines spezifischen Standorts und verschleiert dabei die eigene IP-Adresse. Zusätzlich wird so der Datenverkehr verschlüsselt und sorgt so für mehr Anonymität im Netz. Damit auch du sicher im Internet unterwegs sein kannst, schau bei nordvpn.com/workingdraft vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie! Schaunotizen [00:00:58] Backups! Unsere Einstiegsfrage ist: Was ist überhaupt ein Backup? Ist Backup gleich Backup? Wir beleuchten unterschiedliche Backup-Strategien (für den Alltag und für Spezialfälle wie Datenbanken) und kommen über den Vergleich von Restic mit der Konkurrenz vom morschen Obstbaum zu technischen Praxisfragen rund ums Backup. Über Fragen des Wie und Warum von inkrementellen Backups kommen wir zu Themen rund ums Backup-Rückgrat – Content Defined Chunking (im Falle von Restic via chunker), den Volume Shadow Copy Service, ZFS, etc. Jenseits der schieren Technik ist bei Backups aber auch der Faktor Mensch relevant und wir kommen nicht umhin, Restore-Complacency und Backup-auch-wirklich-machen-Strategien zu besprechen. Konkret am Beispiel von Restic sprechen für über Überlegungen zu Verschlüsselung und Sicherheit, Redundanz, Forward Error Correction, Kompression und Multi-Device-Backups. Zum Schluss geht’s natürlich auch ein wenig um OSS-Themen wie die Zukunftsplanung von Restic und das Community-Management. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Diese Folge haben wir Principal Frontend Architect Lisi Linhardt, welche schon einmal bei uns zu Gast war, damals jedoch in einer anderen Rolle. Mittlerweile arbeitet Lisi schon seit zwei Jahren beim Österreichischen Startup und Headless CMS Anbieter Storyblok, über das wir auch mal eine Revision aufgenommen haben. Schaunotizen Mit Lisi reden wir diese Revision über allerlei verschiedene Dinge. Die Klammer drumherum lautet jedoch… [00:00:59] Lead Developers & Remote Work Angefangen hat Lisi bei Storyblok als Frontend-Lead, heutzutage ist sie aber eher Team-Lead. Das heißt, während sie früher die Architektur geprägt hat, ist sie heute mehr ein Bindeglied zwischen verschiedenen Gewerken, hat ein Auge auf Dokumentation, aber auch das Onboarding neuer Mitarbeiter. Vanessa kann sich derzeit noch mehr auf Architektur und Technik konzentrieren, was der geringeren Größe des Startups (Zavvy) geschuldet ist, in dem sie als Frontend-Lead beschäftigt ist. Dennoch gibt es auch Phasen, in denen sie nicht zum Coden kommt und mehr Manager-Aufgaben zu erledigen hat. Das frustriert sie dann manchmal etwas, weil sie den Eindruck hat, dass sie „nichts schafft“. Lustigerweise geht das Onboarding bei Storyblok auch mit der Zavvy-App vonstatten. Es gibt für die verschiedenen Mitarbeiter verschiedene Onboarding-Jouneys und auch Team-Buddys. Dokumentation verfasste Lisi früher gerne mal in Notion – die Dokumentation, die sie heutzutage verfasst, liegt aber in der Regel mit im Repository. Vanessa nutzt dafür gerne mermaid.js. Wir schweifen dann ab in Richtung Benennung von Dingen in Code und wer da welche Präferenzen hat. Anschließend kommen wir zum Thema „Remote“. Denn Storyblok ist eine der wenigen Remote-only-Firmen, die es so gibt. Gekommen ist das durch das Wachstum während der Pandemie (auch hier nochmal der Verweis auf die Revision 495: Storyblok – Einblicke in ein Startup). Wir sind uns einig, dass Remote dann doof ist, wenn nur einzelne Personen remote sitzen, während der Großteil des Teams physisch beieinander sitzt. Die Einzelpersonen werden da schnell mal aus dem Kommunikationsfluss ausgeklinkt. Wichtig ist, regelmäßig physische Team-Meetings zu veranstalten. So gibt es bei Storyblok einmal im Jahr ein sogenanntes „Offsite“, wo die gesamte Firma aufeinander trifft. Vanessa vermisst bei der Remote-Arbeit manchmal den Flurfunk. Als die größte Herausforderung sieht Lisi das Arbeiten über verschiedene Zeitzonen hinweg an. Eine Lösung besteht darin, möglichst viel Kommunikation asynchron ablaufen zu lassen. Das meiste an Kommunikation entfällt aber meist auf das eigene Team und wird mit zunehmender Gewerk-Entfernung rapide weniger. Das heißt, die Herausforderung stellt sich am ehesten für das eigene Team. Wir debattieren darüber, ob es wichtig ist, dass alle in Calls ihre Videokameras anhaben oder nicht, welche Arbeitszeiten man in einem weltweiten Remote-Setting hat, inwiefern Fokuszeiten helfen und wann Feierabend ist. Schepp ist hier der Meinung, dass man Kommunikation als empfangende Instanz steuern sollte, also zum Beispiel durch Abschalten von Benachrichtigungen zu bestimmten Zeiten. Was im Remote-Setting auch schwieriger wird, ist bei Kollegen festzustellen, wenn es ihnen nicht so gut geht. Retros aber ein Werkzeug, um zu sehen, wie alle so drauf sind. Keine Schaunotizen The Culture Map: Decoding How People Think, Lead, and Get Things Done Across Cultures Für Menschen, die in internationalen Teams arbeiten, mag Lisi gerne dieses Buch hier zur Lektüre empfehlen. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

In einem hochexzentrischen Orbit kreisen Vanessa und Peter um den diesjährigen Fragenkatalog zum State of JS herum. Bedingt durch zahllose Exkursionen schaffen sie es so gerade durch ersten ca. 20 % der Umfrage. 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:01:50] State of JS 2022 Wir starten mit dem Proxy, von dessen Use Cases wir in unser beider Realitäten zu berichten haben. Promise.allSettled() ist weniger spannend, erlaubt uns aber einen Schwenk zum breiteren Konzept der Iterables. Fragen rund um Dynamic Import werden im Bundle mit Stilfragen rund um Skinny Jeans abgefühstückt, wonach Peter Nullish Coalescing und Vanessa Logical Assignment lobpreisen. Die Schockfrostung der Hölle erfolgt, also Peter (!) von seinen Vue-Abenteuern in Verbindung mit privaten Klassenfeldern berichtet und mit Vanessa diverse Fallen rund um String-Replacement (replace() ist eine Falle, matchAll und replaceAllsind viel besser) durchkaut. Beide Parteien scheitern in Folge daran, ihre Gegenüber von der Großartigkeit von Promise.any() und Array.prototype.at()zu überzeugen. Des Weiteren fallen uns zunehmend kürzer werdende Fun Facts zu Features wie Top-Level await, Temporal, Array.prototype.findLast(), Error.prototype.cause und Object.hasOwn() ein. Spätestens im zweiten Fragebogen, in dem es um Browser-APIS geht, verlässt uns ein wenig der Elan. Service Workers und Custom Elements sind alte Hüte, Shadow DOM darüber hinaus ohne Custom Elements nur bedingt interessant. Angesichts von Web Animations rafft sich Peter nochmal zu einem Rant wider die Frameworks auf, bei WebGL, WebRTC, WebSockets und WebSpeech müssen wir hingegen schlicht die etablierte Existenz der APIs anerkennen. Mit ein paar letzten Spekulationen zur Broadcast Channel API lassen wir die Folge ausklingen. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Die Idee zu dieser Folge entstammt einem Hörerwunsch. Florian Geierstanger schrieb uns vor rund 6 Monaten an, ob wir nicht eine Revision zu diesem Thema machen könnten: Themenvorschlag für eine @workingdraft Episode: Wie können wir eine lern-freundliche Umgebung schaffen (in einem Team, in einer Firma)? — Florian Geierstanger (@kino_auge) June 16, 2022 Passende Gesprächspartner dafür waren schnell gefunden, aber leider scheiterten diverse unserer Anläufe bis dato. Eigentlich sollte auch Florian mit von der Partie sein, aber zuletzt war dann er selbst krank. Bevor wir noch einmal verschieben, haben wir uns dazu entschieden, die Aufnahme dennoch endlich einzutüten! Unser Sponsor Dieser Podcast wird von NordVPN unterstützt. NordVPN ist ein Premium-VPN-Anbieter, der sich durch regelmäßige Updates mit neuen und praktischen Funktionen von der Konkurrenz abhebt. In Kombination mit einem fairen Preis und der jahrelangen Erfahrung des Teams, das aus Cybersicherheits- und IT-Experten besteht, blickt NordVPN auf eine inzwischen 10-jährige Firmengeschichte zurück. Ein VPN ermöglicht die Verbindung ins Internet über einen virtuellen privaten Server eines spezifischen Standorts und verschleiert dabei die eigene IP-Adresse. Zusätzlich wird so der Datenverkehr verschlüsselt und sorgt so für mehr Anonymität im Netz. Damit auch du sicher im Internet unterwegs sein kannst, schau bei nordvpn.com/workingdraft vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie! Schaunotizen [00:01:56] Lernfreundliche Organisationen Als Expert*innen für lernfreundliche Umfelder hatten wir Corinna Baldauf und Dawit Hasenbeck von der (sehr lernfreudigen) Firma sipgate zu Gast. Die Firma sipgate gibt es schon eine ganze Weile, aber das Jahr 2010 war in der Firmenhistorie ein einschneidendes: In diesem Jahr beschloss man, sich in eine agile Firma zu transformieren, was nicht nur mit neuen Arbeitsprozessen einherging, sondern auch mit einer neuen Einstellung zum Thema Fortbildung. Die Firmenleitung gab die Devise aus, dass Fortbildung explizit gewünscht sei und es wurden entsprechende Rahmenbedingungen geschaffen und Budget bereitgestellt. Seitdem existiert bei sipgate das „Fortbildungsboard“ mit dem Claim „Es gibt nichts Teureres als Mitarbeiter*innen, die sich nicht fortbilden“: Auf diesem Board tut man durch Platzieren von Post-its und Gesichtern kund, wer wann welche Fortbildung besuchen möchte, und man sucht sich Kollegen, die mitmachen möchten. Dabei wird geschaut, dass die Firma auch während Fortbildungen einzelner arbeitsfähig bleibt und die Fortgebildeten berichten den anderen hinterher von ihren Learnings – entweder in Vortragsform oder als Zusammenfassung im internen Slack oder als Podcast. Wofür man sich auch entscheidet, seien es Konferenzen, Bücher oder Workshops: man bucht es sich selbst. Dann gibt es noch alle zwei Wochen die sogenannten „Open Fridays„, firmeninterne Barcamps in denen alle Arten von Themen vorgestellt werden. Gleichzeitig wird der „Open Friday“ auch genutzt um zu zeigen, was Teams geshipped haben und um größere Themenkomplexe zu besprechen. Das klappt sogar remote. Im Rahmen der agilen Prozesse und Clean Codings findet Lernen auch in Form von Pairing über die Disziplinen hinweg statt, und natürlich werden auch die Retros als Lernwerkzeuge verstanden. Zu guter Letzt veranstaltet sipgate auch Talk-Reihen mit prominenten Gästen bei sich im Haus, die in diesem Fall auch Besuchern von außerhalb offen stehen. Keine Schaunotizen Corinnas Retromat Retro-Blaupausen zum Losstarten! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Die alljährliche Umfrage zum State of CSS haben Vanessa und Schepp herangezogen, um über die dort aufgeführten brandneuen oder auch nicht mehr so neuen, aber dennoch interessanten CSS Features zu sprechen. Dies ist Teil zwei von zwei Teilen. Teil eins könnt Ihr hier nachhören. [00:01:00] Schaunotizen [00:02:03] Das prefers-reduced-data Media Feature Das prefers-reduced-data Media Feature (HTML), bzw. die prefers-reduced-data Media Query (CSS) wird derzeit nur von den Chromium-Browsern unterstützt, und das auch nur hinter Flags. Hiermit könnt Ihr (teilweise) steuern, was an Daten zusätzlich geladen werden soll, je nachdem ob der Wert auf no-preference oder reduce steht. Wir sprechen in dem Zusammenhang auch über sogenannte „Browser Interventions„, die Simon Pieters in diesem Twitter-Thread genauer ausführt. Außerdem findet der Poor Man’s Dark Mode Erwähnung. [00:18:37] :focus-visible Die Kurzfassung der Funktionsweise der :focus-visible-Pseudoklasse ist, dass diese nur dann zum Tragen kommt, wenn der Browser ein Interaktionsmuster feststellt, bei dem die benutzende Person einen visuellen Fokus-Indicator benötigt. Damit kann man die von Designern und Chefs verhassten Fokus-Outlines wegstylen, um sie im Falle eines aktivierten :focus-visible wieder zurück zu bringen. Die Langfassung dessen, was hinter :focus-visible (und inert) steht, könnt Ihr in dieser Folge der Igalia Chats Podcastreihe nachhören. [00:21:15] Color Schemes Dieser von Vanessa erwähnte Artikel beinhaltet alle Infos zu den verschiedenen Color Schemes, die man benötigt. [00:22:00] Das ::marker-Pseudoelement Mit Hilfe von ::marker lässt sich nun endlich(?) das Aufzählungszeichen von Listen greifen und stylen. Wir sind uns allerdings nicht sicher, wie sehr uns das tangiert. Wichtig zu wissen ist nämlich, dass man bei ::marker nur ein Subset an CSS-Eigenschaften zum Stylen zur Verfügung hat. [00:24:45] :has() Dank der Ideen eines brillanten WebKit-Ingenieurs zur Umgehung der drohenden Performance-Probleme, ist Ende 2021 naben Container Queries auch der zweite Traum aller Frontend-Enwickler*innen, der Parent-Selector Wirklichkeit geworden! Wir erwähnen kurz die Tatsache, dass es auch beim :last-child-Selektor aus Performancegründen länger gedauert hat, bis dieser in allen Browsern verfügbar war. [00:28:46] :where() Mit :where() kann man einerseits stellvertretend mögliche Selektoren auflisten, um sich nicht per Selektoraufzählung wiederholen zu müssen. Das kann :is() allerdings auch. Der Unterschied von :is() zu :where() ist jedoch, dass :is() die Spezifität des  Selektors in der Auflistung mit der höchsten Spezifität übernimmt, während die Spezifität von :where() bei 0 (null) verbleibt, ähnlich wie beim Universalselektor *. Und das wiederum ermöglicht zusammen mit anderen Neuerungen wie den globalen Eigenschaftswerten unset und revert gänzliche neue Arten von CSS-Resets. [00:30:39] Warum heißt es manchmal CSS Variablen und manchmal Custom Properties? Wir klären die Frage, ob beides vielleicht unterschiedliche Dinge sind (Spoiler: sind sie nicht), und warum das Ganze offiziell nicht „CSS Variablen“ heißt. Dann erwähnen wir Lea Verous Talk über Custom Properties vom letzten CSS Day, der sehr weit in die Tiefe geht und Dinge wie Toggle-Switches und mehrere Ebenen von verschachtelten Custom Properties zeigt. [00:37:56] @property Über @property ging es vor nicht all zu langer Zeit in der Folge Revision 534: CSS Houdini, gescheitert?. Dank @property kann man CSS Custom Properties typisieren, so dass der Browser im Anschluss weiß, wie er den Wert im Rahmen einer Animation interpolieren kann. Oder man definiert, ob eine Custom Property sich vererbt, oder eben nicht. Und zu guter Letzt kann man einen initialen Wert festlegen, den die Custom Property hat, wenn Ihr kein Wert zugewiesen wurde. @property --property-name { syntax: ""; inherits: false; initial-value: #c0ffee; } Ein schöner Nebeneffekt von „dummen“, also nicht-typisierten Custom Properties ist die Tatsache, dass man von diesen z.B. Farben mit verschiedenen Transparenzen oder Farben mit ähnlichen HSL-Werten ableiten kann. [00:41:58] @supports() @supports() ist eine im Browser eingebaute Feature Detection für CSS Eigenschaften und/oder bestimmte Eigenschaftswerte. Verwenden wir beide gerne und viel. Neuerdings lässt sich mit Hilfe der selector()-Funktion in einem @supports auch herausfinden, ob CSS Selektoren vom Browser unterstützt werden. [00:43:46] min(), max() und clamp() Alle drei Funktionen sind aus unserer Sicht sehr nützliche Ergänzungen von CSS. Bei min() und max() haben wir allerdings wie die meisten anderen Entwickler*innen das Problem, dass wir zunächst zum falschen greifen wollen, weil wir das Gegenteil des Funktionsnamens erreichen wollen. clamp() wiederum findet meist im Rahmen von Fluid Typography Anwendung. Und schließlich erwähnen wir noch die Tatsache, dass man innerhalb von min(), max() und clamp() kein calc() benutzen muss, weil die schon von Haus aus Mathematische Ausdrücke als Werte unterstützen. [00:47:14] Dies und das Wir rauschen als nächstes schnell noch über ein paar CSS Features drüber: will-change finden nicht nur wir sehr problematisch und raten vom Einsatz ab Cascade Layers aka @layer sind ein spannendes neues Konzept. Es gibt dazu einen tollen Talk von Bramus van Damme. Use-Case sind vermutlich Design Systeme. Mit ::part() kann man von außen Teile eines Shadow DOMs stylen, sofern die Autoren desselben diese Teile mit einem part-Attribut markiert haben. Trigonometrisch Funktionen wie sin(), cos() und tan() sind sinnvolle Ergänzungen, um komplexe Transformationen zu berechnen. CSS Nesting ist nett, haut uns aber nicht so vom Hocker. Außerdem wird es wohl noch etwas länger dauern, bis man das einsetzen kann. Die image-set()-Funktion ist sowas wie srcset, nur in CSS. Wird in einer Vorversion mit -webkit--Prefix schon seit langem von Safari und Chromium unterstützt. Die image()-Funktion ist so etwas wie die Nachfolgerin der url()-Funktion. Sie räumt ein paar historische Probleme von url() aus, wie zum Beispiel, dass man darin keine Custom Properties verwenden kann. Darüber hinaus rüstet image() weitere Fähigkeiten nach, wie etwa ein Bild aus einer Farbe zu generieren, so dass man keinen Gradienten mehr dafür missbrauchen muss. Und man kann auch nur Bildausschnitte via Fragment-Notation verwenden. Der Browser-Support ist aber nicht vorhanden. [00:53:09] CSS Frameworks Wir gehen kurz die aufgelisteten Frameworks durch und stellen fest, dass wir nur die wenigsten davon kennen. Außerdem werden hier echte CSS Frameworks wild mit Komponentenbibliotheken gemischt. Welche verwendet Ihr denn und was gefällt Euch an denen gut? Joined uns im Community Draft und sagt es uns! [00:58:53] CSS in JS Noch viel weniger Plan als von Frameworks haben wir von den verschiedenen CSS-in-JS-Bibliotheken 🥴 Vanessa erinnert sich jedoch an eine alte Folge, in der Hans und Schepp ausschließlich über CSS in JS diskutiert haben: Revision 468: CSS in JS. [01:07:08] Other Tools Schepp nutzt weiterhin sehr gerne SCSS, weil es sehr angenehm ist, damit zu arbeiten und sein CSS zu organiseren. Bei Vanessa kommt es ein wenig von den in Projekten eingesetzten Scaffolding-Tools und deren „Serviervorschlägen“ an, welche Art Pre- und Postprozessoren am Werk sind. An weiteren Tools nutzt Vanessa noch Stylelint, Purge CSS, Prettier, Autoprefixer und CSS Nano. Dadurch dass diese Dinge aber eben oft automagisch von Scaffolding-Tools gesetupped werden, steht man auch schonmal wie der Ochs vor dem Berge, wenn etwas nicht geht, weil man nicht weiß, was denn genau alles in einem Projekt am Werk ist. Schepp hingegen ist mehr so der Typ, der alles selbst aufsetzt und konfiguriert, der damit am Anfang zwar langsamer ist, er aber immer weiß, was passiert. Von CSS Nano rät Schepp hingegen ab. Aus CSS lässt sich einfach nicht so viel an Minifizierung herausholen, als dass es sich lohnne würde die Risiken einzugehen, die mit CSS Nano daherkommen. Als Entwicklungsbrowser nutzt Vanessa den Microsoft Edge, während Schepp weiterhin auf Chrome setzt. Beide schwärmen wir aber auch von extra für Entwickler*innen gebaute Browser wie dem Sizzy-Browser oder Polypane. Zu guter Letzt gehen wir noch auf eine Art K.O.-Umfrage ein, in der man sich in mehreren Duellen für eines von zwei Kriterien entscheiden soll, die einem bei der Auswahl eines Tools wichtiger ist. Am Ende der Duell-Reihe bleibt dann das wichtigste Kriterium übrig. Die Duelle sind unserer Meinung nach aber seltsam gegeneinander aufgestellt. [01:31:45] Resources Im Kapitel über die Learning Resources freuen wir uns schließlich sehr darüber, dass unser Podcast es hineingeschafft hat. Mega! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/