Nachdem sich Vanessa und Peter in ihrem ersten Anlauf [https://workingdraft.de/549/] noch um ein strukturiertes Abarbeiten des Fragenkatalogs der 2022er State of JS-Umfrage [https://survey.devographics.com/survey/state-of-js/2022] 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 [https://stateofjs.com/en-us/] 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 [https://nextjs.org/], Nuxt [https://nuxtjs.org/], Gatsby [https://www.gatsbyjs.com/] 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 [https://de.wikipedia.org/wiki/Milit%C3%A4risch-industrieller_Komplex] überhaupt lässt, bleibt trotz des kreativen Einsatzes von Auto-Analogien (u.A. zur Pistolenschaltung [https://de.wikipedia.org/wiki/W%C3%A4hlhebel#Revolver-_und_Kr%C3%BCckstockschaltung]) ungeklärt. Zu Sinn und Zweck von Mobile Frameworks haben wir eher wenig beizutragen, feiern aber Browser-Devtools wie DOM-Breakpoints (Chrome [https://developer.chrome.com/docs/devtools/javascript/breakpoints/], Firefox [https://firefox-source-docs.mozilla.org/devtools-user/debugger/break_on_dom_mutation/index.html]), Hover-State-Enforcing (Chrome [https://coderwall.com/p/ttavvw/force-element-state-in-chrome-inspector], Firefox [https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#page-inspector-how-to-examine-and-edit-css-viewing-common-pseudo-classes]), Resource Overrides (Chrome-Extension [https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii]) und In-Devtools-Suchfunktionen gründlich ab (und anwesende Performance-Päpste finden darüber hinaus an an Chromes Trace-Tools gefallen [https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/]). Weitere ehrenswerte Nennungen erfahren Sentry [https://sentry.io/welcome/], die (einigermaßen) gute alte Formularvalidierung [https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation], <dialog> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?retiredLocale=de] und <details> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details?retiredLocale=de], die View Transition API [https://developer.chrome.com/docs/web-platform/view-transitions/] und generell alles aus der Revision 552 zu Frontend Development im Jahr 2023 [https://workingdraft.de/552/]. Transkript WEBVTT 00:00.000 --> 00:04.000 WorkingDraft Revision 553. 00:31.000 --> 00:36.000 Diese Revision von WorkingDraft wird euch präsentiert von Hörerinnen und Hörern wie euch. 00:36.000 --> 00:40.000 Auf patreon.com slashworkingdraft könnt ihr uns ein paar Euro in den Hut werfen. 00:40.000 --> 00:47.000 Aus euren Beiträgen und unseren gelinglichen Werbeeinnahmen bezahlen wir allerlei teure Software-Abus und das Honorar unserer Audio-Produceren. 00:47.000 --> 00:52.000 Wenn ihr euch auch beteiligen wollt, könnt ihr das unter patreon.com slashworkingdraft sehr gerne machen. 00:52.000 --> 01:01.000 Wir danken euch tausendfach für die Unterstützung und fürs weitere Zuhö

Revision 553: State of JS2, Framework Boogaloo

Zum Jahreswechsel haben wir uns mit Joe Ray Gregory [https://jgreg.dev/] (@joyraygregory [https://twitter.com/joeraygregory]) 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 [https://workingdraft.de/520/].

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: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 [https://astro.build/], aber auch NextJS [https://nextjs.org/] und NuxtJS [https://nuxtjs.org/] 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 [https://workingdraft.de/329/]). Eine Schlüsselrolle wird das Tool Partytown [https://partytown.builder.io/] spielen.

Als Unterstützung bei der Entwicklung werden Mikro-Bibliotheken aus dem UnJS [https://unjs.io/]-Pool große gebräuchliche Bibliotheken wie Axios oder auch Lodash ersetzen.

Im Testing wird Playwright [https://playwright.dev/] seinen Marktanteil weiterausbauen.

Für die Komponenten-basierte Entwicklung wird Storybook [https://storybook.js.org/] zwar das Goto-Werkzeug bleiben, aber daneben wird sich Histoire [https://histoire.dev/] aus dem Vue-Umfeld ähnlich etablieren können wie zuvor auch schon Vite [https://vitejs.dev/].

In Sachen Bundler und Build-Tools kommt allerlei Neues auf uns zu: Turbopack [https://turbo.build/pack] wird der Nachfolger von Webpack und dann gibt es vom Erfinder von Babel noch eine ganze Build-Suite namens Rome [https://rome.tools/], 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 [https://swc.rs/], Parcels Lightning CSS [https://github.com/parcel-bundler/lightningcss] und esbuild [https://esbuild.github.io/] (allerdings in

Revision 552: Frontend Development im Jahr 2023

Mit Gast Alexander Neumann (Github [https://github.com/fd0]), seines Zeichens Entwickler der FOSS-Backup-Software Restic [https://restic.net/] 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 [https://nordvpn.com/workingdraft?ref=workingdraft.de] 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 [https://de.wikipedia.org/wiki/Time_Machine_(Apple)] 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 [https://github.com/restic/chunker]), den Volume Shadow Copy Service [https://de.wikipedia.org/wiki/Volume_Shadow_Copy_Service], ZFS [https://de.wikipedia.org/wiki/ZFS_(Dateisystem)], 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 [https://de.wikipedia.org/wiki/Vorw%C3%A4rtsfehlerkorrektur], 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. Transkript WEBVTT 00:00.000 --> 00:02.000 Working-Draft-Revision 551. 00:30.000 --> 00:35.000 Diese Revision von Working-Draft wird euch präsentiert von Hörerinnen und Hörern wie euch. 00:35.000 --> 00:39.000 Auf patreon.com slashworkingdraft könnt ihr uns ein paar Euro in den Hut werfen. 00:39.000 --> 00:46.000 Aus euren Beiträgen und unseren gelinglichen Werbeeinnahmen bezahlen wir allerlei teure Software-Abus und das Honorar unserer Audio-Producerin. 00:46.000 --> 00:51.000 Wenn ihr euch auch beteiligen wollt, könnt ihr das unter patreon.com slashworkingdraft sehr gerne machen. 00:51.000 --> 00:54.000 Wir danken euch tausendfach für die Unterstützung und fürs weitere Zuhören. 00:54.000 --> 01:02.000 Hallo und herzlich willkommen zu Working-Draft Nummer 551. 01:02.000 --> 01:04.000 Heute sind am Start der Hans. 01:04.000 --> 01:05.000 Ja, hallo. 01:05.000 --> 0

Revision 551: Restic – Backups, aber richtig

Diese Folge haben wir Principal Frontend Architect Lisi Linhardt [https://lisilinhart.info/about], welche schon einmal bei uns zu Gast war [https://workingdraft.de/411/], damals jedoch in einer anderen Rolle. Mittlerweile arbeitet Lisi schon seit zwei Jahren beim Österreichischen Startup und Headless CMS Anbieter Storyblok [https://www.storyblok.com/], über das wir auch mal eine Revision aufgenommen haben [https://workingdraft.de/495/].

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 [https://www.zavvy.io/]) 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 [https://www.notion.so/] – die Dokumentation, die sie heutzutage verfasst, liegt aber in der Regel mit im Repository. Vanessa nutzt dafür gerne mermaid.js [https://github.com/mermaid-js/mermaid].

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 [https://workingdraft.de/495/]). 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 [https://www.amazon.de/-/en/Erin-Meyer/dp/1610392760]

Revision 550: Lead Developers & Remote Work

In einem hochexzentrischen Orbit kreisen Vanessa und Peter um den diesjährigen Fragenkatalog zum State of JS [https://stateofjs.com/en-us/] 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 [https://workshops.de/workingdraft?ref=workingdraft.de] genau richtig.

Schaunotizen

[00:01:50] State of JS 2022 [https://survey.devographics.com/survey/state-of-js/2022] Wir starten mit dem Proxy [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy], von dessen Use Cases wir in unser beider Realitäten zu berichten haben. Promise.allSettled() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled] ist weniger spannend, erlaubt uns aber einen Schwenk zum breiteren Konzept der Iterables [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol]. Fragen rund um Dynamic Import [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import] werden im Bundle mit Stilfragen rund um Skinny Jeans abgefühstückt, wonach Peter Nullish Coalescing [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing] und Vanessa Logical Assignment [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment] lobpreisen. Die Schockfrostung der Hölle erfolgt, also Peter (!) von seinen Vue-Abenteuern in Verbindung mit privaten Klassenfeldern [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields] berichtet und mit Vanessa diverse Fallen rund um String-Replacement (replace() ist eine Falle [https://www.peterkroener.de/string-prototype-replace-ist-eine-falle/], matchAll [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll] und replaceAll [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll]sind viel besser) durchkaut. Beide Parteien scheitern in Folge daran, ihre Gegenüber von der Großartigkeit von Promise.any() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any] und Array.prototype.at() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at]zu überzeugen. Des Weiteren fallen uns zunehmend kürzer werdende Fun Facts zu Features wie Top-Level await [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await],

Revision 549: State of JS 2022, Teil 1 von 956

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 [https://twitter.com/workingdraft?ref_src=twsrc%5Etfw] Episode: Wie können wir eine lern-freundliche Umgebung schaffen (in einem Team, in einer Firma)?

— Florian Geierstanger (@kino_auge) June 16, 2022 [https://twitter.com/kino_auge/status/1537412833633263618?ref_src=twsrc%5Etfw]

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 [https://nordvpn.com/workingdraft?ref=workingdraft.de] 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 [https://finding-marbles.com/about/] und Dawit Hasenbeck [https://twitter.com/dawitux] von der (sehr lernfreudigen) Firma sipgate [https://www.sipgate.de/blog] 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

Revision 548: Lernfreundliche Organisationen

Die alljährliche Umfrage zum State of CSS [https://survey.devographics.com/survey/state-of-css/2022] 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 [https://workingdraft.de/545/] nachhören.

[00:01:00] Schaunotizen

[00:02:03] Das prefers-reduced-data Media Feature [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data] 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 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 [https://github.com/WICG/interventions/blob/d41534ac4d2da54dee0e786b9f4c6ac116cba4a4/README.md]„, die Simon Pieters in diesem Twitter-Thread genauer ausführt [https://twitter.com/zcorpan/status/1542857247923081218].

Außerdem findet der Poor Man’s Dark Mode [https://dev.to/pqina/poor-man-s-dark-mode-using-css-filter-211n] Erwähnung.

[00:18:37] :focus-visible [https://developer.mozilla.org/en-US/docs/Web/CSS/: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 [https://www.igalia.com/chats/alice-and-rob] der Igalia Chats Podcastreihe nachhören.

[00:21:15] Color Schemes [https://web.dev/color-scheme/] Dieser von Vanessa erwähnte Artikel beinhaltet alle Infos zu den verschiedenen Color Schemes, die man benötigt. [00:22:00] Das ::marker-Pseudoelement [https://developer.mozilla.org/en-US/docs/Web/CSS/::marker] 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 [https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties].

[00:24:45] :has() [https://developer.mozilla.org/en-US/docs/Web/CSS/:has] Dank der Ideen eines brillanten WebKit-Ingenieurs [https://webkit.org/blog/13096/css-has-pseudo-class/] zur Umgehung der drohenden Performance-Probleme [https://snook.ca/archives/html_and_css/css-parent-selectors], 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 [https://snook.ca/archives/html_and_css/css-parent-selectors#:~:text=Why%20IE%20took%20so%20long%20to%20get%20%3Alast%2Dchild%20support], bis dieser in allen Browsern verfügbar war.

[00:28:46] :where() [https://developer.mozilla.org/en-US/docs/Web/CSS/:where] Mit :where() kann man einerseits stellvertretend mögliche Se

Revision 547: The State of CSS (Teil 2)

Hans und Vanessa besprechen verschiedene Ausbildungspfade in der IT. Sie versuchen die Frage zu klären, ob man in der IT Branche eigentlich eine Ausbildung oder einen akademischen Titel braucht. Dabei gehen sie vor allem auf Selbststudium vs. Studium an einer Hochschule ein.

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:01:52] Ausbildungspfade im Web Zu Beginn erzählen sie von ihren eigenen Erfahrungen: Hans hat sich sein Wissen selbst angeeignet und seine Ziele stets verfolgt und ist arbeitet aktuell als Vice President Engineering. Vanessa nahm den „klassischen“ Weg über Bachelor- und Master Studium und ist momentan als Frontend Lead tätig. Man kann sich daher wohl über beide Wege Jobangebote angeln. Doch welche Vor- und Nachteile haben die jeweiligen Wege? Vanessa wiegt ab, wie viel von der gelernten Theorie sie im Beruf tatsächlich benötigt. Hans erinnert sich, bei welchen Gelegenheiten er nicht nur programmieren musste, sondern auch Tools wie Git benutzt, um zusammen in einem Team zu arbeiten. Sowohl für Berufseinsteiger, als auch für Personalverantwortliche in Firmen ist es wichtig, sich über Erwartungen bewusst zu sein. Zudem versuchen Hans und Vanessa vorurteilsfrei zu sein.

Revision 546: Ausbildungspfade im Web

Die alljährliche Umfrage zum State of CSS [https://survey.devographics.com/survey/state-of-css/2022] 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 eins von zwei Teilen.

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 [https://nordvpn.com/workingdraft?ref=workingdraft.de] vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie!

Schaunotizen

[00:01:52] State of CSS [https://survey.devographics.com/survey/state-of-css/2022/] Vanessa und Schepp beginnen mit der Feststellung, dass sich der Nutzen vieler neuer CSS Features nicht immer direkt erschließt, oder auch, dass einem der Umfang der Möglichkeiten, die sich aus neuen Features ergibt, nicht immer sofort klar ist. [00:07:15] CSS Writing Modes [https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode] Beide haben wir nie Interfaces bauen müssen, die für andere Sprachen als von links nach rechts und von oben nach unten gelesene angepasst werden mussten. Wir haben die CSS Writing Modes aber durchaus genutzt, um Schrift auf engem Raum vertikal anzuzeigen. Irgendwie kommen wir auf die These, dass es bestimmt so etwas wie „Unter-Internets“ gibt, in der sich Konsumenten anders geschriebener Sprachen tummeln, dort die tollsten Web Dev Tricks gepostet werden, und wir davon aufgrund der Sprachbarriere überhaupt nichts wissen. [00:15:30] gap Property for Flexbox [https://developer.mozilla.org/en-US/docs/Web/CSS/gap] Wir sind uns einig, dass gap, welches neben CSS Flexbox auch von CSS Grid und (außer in Safari [https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility]) CSS Multicolumn unterstützt wird, super praktisch ist. [00:21:43] Subgrid [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid] Subgrid betrachten wir noch als nicht einsetzbar, weil der Browser-Support noch nicht breit genug ist und es auch keine guten Fallbacks gibt. [00:22:21] content-visibility [https://web.dev/content-visibility/] Bei content-visibility ist das anders. Das lässt sich trotz geringem Browser-Support super in Form von „Progressive Enhancement“ einbauen. Letztlich ist das nichts anderes als Lazy Rendering von Elementen. [00:22:40] @container [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries] Und auch Container Queries beginnen wir mittlerweile so einzusetzen, dass Dinge „graceful degraden“, wenn die Technik noch nicht zur Verfügung steht, was man mit @supports</

Revision 545: The State of CSS (Teil 1)

Diese Revision war eigentlich mit Thema geplant, aber ein spontaner familiärer Notfall hat unser Programm kurzfristig geändert. Mit dem einen verbliebenen der drei geplanten Gäste, nämlich Florian Geierstanger (Web [https://florian.geierstanger.org/] / Twitter [https://twitter.com/kino_auge]), sind Hans und Schepp daher auf eine weitere Runde Glücksrad umgeschwenkt.

Glücksrad

[00:03:40] <spacer> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/spacer] Direkt als erstes schickt uns das Glücksrad auf eine Zeitreise weit in die Vergangenheit, zu dem uns bislang unbekannten <spacer>-Element. Dieses Netscape-spezifische Element schien zu formalisieren, was Entwickler*innen damals mit dem sogenannten Spacer-GIF [https://en.wikipedia.org/wiki/Spacer_GIF] bewerkstelligt haben. Wie so oft, wenn etwas in die Browser eingebacken wird, gab es eine Extra-Fähigkeit obendrauf: So konnte man mit Hilfe des type-Attributs Abstände auch nur in einer Achse erzeugen, was bei Bildern so nicht ging. 2010 schrieb der damalige Mozilla-Entwickler Henri Sivonen [https://hsivonen.fi/spacer/] anlässlich der Entfernung des dazugehörigen Codes aus Gecko auch etwas über das Element. Schepp denkt an den HTML Tags Memory Test [https://codepen.io/plfstr/full/zYqQeRw] und überlegt, ob es dort wohl akzeptiert wird (wird es nicht). [00:12:35] <audio> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio] Als nächstes geht es wieder leicht zurück in die Zukunft, und um das im Rahmen von HTML5 eingeführte <audio>-Element. Hans erinnert sich, dass man es analog zu den <video>– und <picture>-Elementen mit alternativen Dateiformaten füttern kann und der Browser pickt sich das heraus, was er abspielen kann.

Florian findet an dem Element doof, dass sich der Audioplayer beim Navigieren zu einer anderen Seite schließt. Schepp fällt zu dem Thema ein, dass es die Media Session API [https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API] gibt, die u.a. dieses Problem ausräumen soll. Und Hans wiederum erinnert sich daran, wie er diese API im nie zum Einsatz gekommenen Working Draft Audio Player [https://github.com/workingdraft/audio-player] verwendet hat. Die Macher des Podcasts Wo wir sind ist vorne [https://wowirsindistvorne.show/] haben das Problem (für Navigationen innerhalb der Seite) mit turbolinks [https://github.com/turbolinks/turbolinks] gelöst.

Desweiteren kommen wir auf Audio-Transkription und mögliche Wege zur Darreichung selbiger zu sprechen.Zwar gibt es den WebVTT [https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API]-Standard und die dazugehörigen, speziell formatierten .vtt-Dateien für Untertitel und Transkripte, aber leider kann sie das <audio>-Element nicht darstellen. Das macht in sofern Sinn, als dass die Abkürzung „WebVTT“ für „Web Video Text Tracks Format“ steht. Bleibt in so einem Fall also nur, auf ein <video>-Element umzuschwenken. Verrückterweise kann aber auch ein <audio>-Element Video abspielen [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#sect4]!

Wir sprechen darüber, dass wir hier im Podcast keine Transskripte haben, was daran liegt, dass die uns bekannten maschinellen Tools große Probleme mit unseren Inhalten haben. Eine manuelle Transkription haben wir bislang nur einmal machen lassen [https://workingdraft.de/390/]. Die war zwar exzellent, doch stören wir uns an den Arbeitsbedingungen in der Branche [https://www.theverge.com/2019/11/25/20979249/rev-recordings-transcriptions-low-pay-complaints-freelance-transcribers] (über die w

Revision 544: Ungeplant gastliches Glücksrad (IV)

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