<p>Diese Folge haben wir Principal Frontend Architect <a href="https://lisilinhart.info/about">Lisi Linhardt</a>, welche <a href="https://workingdraft.de/411/">schon einmal bei uns zu Gast war</a>, damals jedoch in einer anderen Rolle. Mittlerweile arbeitet Lisi schon seit zwei Jahren beim Österreichischen Startup und Headless CMS Anbieter <a href="https://www.storyblok.com/">Storyblok</a>,<a href="https://workingdraft.de/495/"> über das wir auch mal eine Revision aufgenommen haben</a>.</p>
<h3>Schaunotizen</h3>
<p>Mit Lisi reden wir diese Revision über allerlei verschiedene Dinge. Die Klammer drumherum lautet jedoch…</p>
<dl>
<dt>[00:00:59] Lead Developers &#038; Remote Work</dt>
<dd>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.</p>
<p>Vanessa kann sich derzeit noch mehr auf Architektur und Technik konzentrieren, was der geringeren Größe des Startups (<a href="https://www.zavvy.io/">Zavvy</a>) 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 &#8222;nichts schafft&#8220;.</p>
<p>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.</p>
<p>Dokumentation verfasste Lisi früher gerne mal in <a href="https://www.notion.so/">Notion</a> &#8211; die Dokumentation, die sie heutzutage verfasst, liegt aber in der Regel mit im Repository. Vanessa nutzt dafür gerne <a href="https://github.com/mermaid-js/mermaid">mermaid.js</a>.</p>
<p>Wir schweifen dann ab in Richtung Benennung von Dingen in Code und wer da welche Präferenzen hat. </p>
<p>Anschließend kommen wir zum Thema &#8222;Remote&#8220;. 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 <a href="https://workingdraft.de/495/">Revision 495: Storyblok – Einblicke in ein Startup</a>). 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.</p>
<p>Wichtig ist, regelmäßig physische Team-Meetings zu veranstalten. So gibt es bei Storyblok einmal im Jahr ein sogenanntes &#8222;Offsite&#8220;, wo die gesamte Firma aufeinander trifft. </p>
<p>Vanessa vermisst bei der Remote-Arbeit manchmal den Flurfunk.</p>
<p>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.</p>
<p>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.</p>
<p>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.
</dd>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.amazon.de/-/en/Erin-Meyer/dp/1610392760">The Culture Map: Decoding How People Think, Lead, and Get Things Done Across Cultures</a></dt>
<dd>Für Menschen, die in internationalen Teams arbeiten, mag Lisi gerne dieses Buch hier zur Lektüre empfehlen.</dd>
</dl>


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 …

Working Draft

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.

Revision 550: Lead Developers & Remote Work

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 [&#8230;]

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 Anbiete[...]

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.


Transkript
WEBVTT

00:00.000 --> 00:03.000
Working Draft Revision 550

00:31.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 [...]

<p>In einem hochexzentrischen Orbit kreisen Vanessa und Peter um den diesjährigen Fragenkatalog zum <a href="https://stateofjs.com/en-us/">State of JS</a> herum. Bedingt durch zahllose Exkursionen schaffen sie es so gerade durch ersten ca. 20 % der Umfrage.</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>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.</p>
<p>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.</p>
<p>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 <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] <a href="https://survey.devographics.com/survey/state-of-js/2022">State of JS 2022</a></dt>
<dd>Wir starten mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxy</a>, von dessen Use Cases wir in unser beider Realitäten zu berichten haben. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled">Promise.allSettled()</a> ist weniger spannend, erlaubt uns aber einen Schwenk zum breiteren Konzept der <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">Iterables</a>. Fragen rund um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import">Dynamic Import</a> werden im Bundle mit Stilfragen rund um Skinny Jeans abgefühstückt, wonach Peter <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing">Nullish Coalescing</a> und Vanessa <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment">Logical Assignment</a> lobpreisen. Die Schockfrostung der Hölle erfolgt, also Peter (!) von seinen Vue-Abenteuern in Verbindung mit <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">privaten Klassenfeldern</a> berichtet und mit Vanessa diverse Fallen rund um String-Replacement (<a href="https://www.peterkroener.de/string-prototype-replace-ist-eine-falle/">replace() ist eine Falle</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">matchAll</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll">replaceAll</a>sind viel besser) durchkaut. Beide Parteien scheitern in Folge daran, ihre Gegenüber von der Großartigkeit von <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any">Promise.any()</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at">Array.prototype.at()</a>zu überzeugen. Des Weiteren fallen uns zunehmend kürzer werdende Fun Facts zu Features wie <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await">Top-Level await</a>, <a href="https://tc39.es/proposal-temporal/docs/">Temporal</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast">Array.prototype.findLast()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause">Error.prototype.cause</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn">Object.hasOwn()</a> ein. Spätestens im zweiten Fragebogen, in dem es um Browser-APIS geht, verlässt uns ein wenig der Elan. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">Custom Elements</a> sind alte Hüte, <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> darüber hinaus ohne Custom Elements nur bedingt interessant. Angesichts von <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations</a> rafft sich Peter nochmal zu einem Rant wider die Frameworks auf, bei <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">WebRTC</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSockets</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">WebSpeech</a> müssen wir hingegen schlicht die etablierte Existenz der APIs anerkennen. Mit ein paar letzten Spekulationen zur <a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API</a> lassen wir die Folge ausklingen.</dd>
</dl>


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 % d…

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.

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

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, [&#8230;]

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

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.


Transkript
WEBVTT

00:00.000 --> 00:03.000
Working Draft Revision 549.

00:30.000 --> 00:41.000
Workshops.de ist die Trainerinnen-Community, die IT-Schulungen mit Fokus auf Web-Entwicklung für deine Firma anbietet, mit einem Pool von über 500 Themenmodulen.

00:41.000 --> 00:45.000
Zum Beispiel zu den Themen Angular, React und View.

00:45.000 --> 00:55.000
Dabei gibt es erstklassige Basisschulungen und maßgeschneiderte In-Haus-Klasses, die dann zum Beispiel sechs Tage lang jeweils Halbtags-Remote stattfinden

00:55.000 --> 01:02.000
oder als Masterclass mit einem sehr hohen Selbstlernaranteil in Verbindung mit regelmäßigen Ask Me Anything Sessions.

01:02.000 --> 01:12.000
Die Trainerinnen sind regelmäßig in echten Projekten in der Wirtschaft unterwegs und lassen stets aktuelle Erfahrungen in ihre Materialien mit einfließen.

01:12.000 --> 01:21.000
Außerdem bilden sie sich sowohl gegenseitig fachlich als auch extern didaktisch regelmäßig weiter, um für alle Lerntypen Angebote zu schaffen.

01:21.000 --> 01:31.000
Vielleicht kennst Du Workshops.de auch schon von Projekten wie Angular.de oder den Community-Konferenzen NG.de und View.js.de Conference.

01:31.000 --> 01:36.000
Wenn Du jetzt mehr darüber erfahren möchtest, dann schau doch einfach mal bei Workshops.de vorbei.

01:36.000 --> 01:41.000
Dort kannst Du auch Teil der Trainerinnen[...]

<p>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:</p>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="de">Themenvorschlag für eine <a href="https://twitter.com/workingdraft?ref_src=twsrc%5Etfw">@workingdraft</a> Episode: Wie können wir eine lern-freundliche Umgebung schaffen (in einem Team, in einer Firma)?</p>
<p>— Florian Geierstanger (@kino_auge) <a href="https://twitter.com/kino_auge/status/1537412833633263618?ref_src=twsrc%5Etfw">June 16, 2022</a></p></blockquote>
<p>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!</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://nordvpn.com/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/11/nord-logo-horizontal@1x.png" alt="" /></a></p>
<div class="message_content">
<p>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.<br />
Damit auch du sicher im Internet unterwegs sein kannst, schau bei <a href="https://nordvpn.com/workingdraft?ref=workingdraft.de">nordvpn.com/workingdraft</a> vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie!</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:56] Lernfreundliche Organisationen</dt>
<dd>Als Expert*innen für lernfreundliche Umfelder hatten wir <a href="https://finding-marbles.com/about/">Corinna Baldauf</a> und <a href="https://twitter.com/dawitux">Dawit Hasenbeck</a> von der (sehr lernfreudigen) Firma <a href="https://www.sipgate.de/blog">sipgate</a> zu Gast.</p>
<p>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 &#8222;Fortbildungsboard&#8220; mit dem Claim &#8222;Es gibt nichts Teureres als Mitarbeiter*innen, die sich nicht fortbilden&#8220;:</p>
<p><img style="max-width: 100%; height: auto;" src="https://workingdraft.de/wp-content/uploads/2022/12/push_fortbildungen1.jpg" alt="sipgates Fortbildungstboard, ein Whiteboard, auf dem Mitarbeiter*innen ihre Fortbildungen planen und ihre Konterfeie aufkleben" /></p>
<p>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 &#8211; 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.</p>
<p>Dann gibt es noch alle zwei Wochen die sogenannten &#8222;<a href="https://www.sipgate.de/blog/open-friday-wissen-verteilen-mit-open-spaces">Open Fridays</a>&#8222;, firmeninterne Barcamps in denen alle Arten von Themen vorgestellt werden. Gleichzeitig wird der &#8222;Open Friday&#8220; auch genutzt um zu zeigen, was Teams geshipped haben und um größere Themenkomplexe zu besprechen. Das klappt sogar <a href="https://www.sipgate.de/blog/was-vom-flure-uebrig-blieb">remote</a>.</p>
<p>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.</p>
<p>Zu guter Letzt <a href="https://www.leandus.de/">veranstaltet sipgate auch Talk-Reihen mit prominenten Gästen bei sich im Haus</a>, die in diesem Fall auch Besuchern von außerhalb offen stehen.
</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://retromat.org/">Corinnas Retromat</a></dt>
<dd>Retro-Blaupausen zum Losstarten!</dd>
</dl>


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 @wo…

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!

Revision 548: Lernfreundliche Organisationen

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 [&#8230;]

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-freund[...]

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!


Transkript
WEBVTT

00:00.000 --> 00:03.000
Revision 548

00:03.000 --> 00:32.480
In den letzten Monaten ging's bei mir, wie wahrscheinlich bei vielen von euch,

00:32.480 --> 00:36.960
wieder ein bisschen mehr rund mit dem Reisen. Ich war viel unterwegs mal in München bei meinem

00:36.960 --> 00:41.680
Arbeitgeber, aber jetzt kürze ich auch auf [...]

<p>Die alljährliche Umfrage zum <a href="https://survey.devographics.com/survey/state-of-css/2022">State of CSS</a> 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 <a href="https://workingdraft.de/545/">hier</a> nachhören.</p>
<h3>[00:01:00] Schaunotizen</h3>
<dl>
<dt>[00:02:03] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data">Das <code>prefers-reduced-data</code> Media Feature</a></dt>
<dd>Das <code>prefers-reduced-data</code> Media Feature (HTML), bzw. die <code>prefers-reduced-data</code> 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 <code>no-preference</code> oder <code>reduce</code> steht.</p>
<p>Wir sprechen in dem Zusammenhang auch über sogenannte &#8222;<a href="https://github.com/WICG/interventions/blob/d41534ac4d2da54dee0e786b9f4c6ac116cba4a4/README.md">Browser Interventions</a>&#8222;, die <a href="https://twitter.com/zcorpan/status/1542857247923081218">Simon Pieters in diesem Twitter-Thread genauer ausführt</a>.</p>
<p>Außerdem findet der <a href="https://dev.to/pqina/poor-man-s-dark-mode-using-css-filter-211n">Poor Man&#8217;s Dark Mode</a> Erwähnung.</dd>
<dt>[00:18:37] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><code>:focus-visible</code></a></dt>
<dd>Die Kurzfassung der Funktionsweise der <code>:focus-visible</code>-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 <code>:focus-visible</code> wieder zurück zu bringen.</p>
<p>Die Langfassung dessen, was hinter <code>:focus-visible</code> (und <code>inert</code>) steht, könnt Ihr in <a href="https://www.igalia.com/chats/alice-and-rob">dieser Folge</a> der Igalia Chats Podcastreihe nachhören.</dd>
<dt>[00:21:15] <a href="https://web.dev/color-scheme/">Color Schemes</a></dt>
<dd>Dieser von Vanessa erwähnte Artikel beinhaltet alle Infos zu den verschiedenen Color Schemes, die man benötigt.</dd>
<dt>[00:22:00] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::marker">Das <code>::marker</code>-Pseudoelement</a></dt>
<dd>Mit Hilfe von <code>::marker</code> lässt sich nun endlich(?) das Aufzählungszeichen von Listen greifen und stylen. Wir sind uns allerdings nicht sicher, wie sehr uns das tangiert.</p>
<p>Wichtig zu wissen ist nämlich, dass man bei <code>::marker</code> nur ein <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties">Subset an CSS-Eigenschaften zum Stylen zur Verfügung hat</a>.</dd>
<dt>[00:24:45] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a></dt>
<dd><a href="https://webkit.org/blog/13096/css-has-pseudo-class/">Dank der Ideen eines brillanten WebKit-Ingenieurs</a> zur Umgehung <a href="https://snook.ca/archives/html_and_css/css-parent-selectors">der drohenden Performance-Probleme</a>, ist Ende 2021 naben Container Queries auch der zweite Traum aller Frontend-Enwickler*innen, der Parent-Selector Wirklichkeit geworden!</p>
<p>Wir erwähnen kurz die Tatsache, dass es auch beim <code>:last-child</code>-Selektor <a href="https://snook.ca/archives/html_and_css/css-parent-selectors#:~:text=Why%20IE%20took%20so%20long%20to%20get%20%3Alast%2Dchild%20support">aus Performancegründen länger gedauert hat</a>, bis dieser in allen Browsern verfügbar war.</dd>
<dt>[00:28:46] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:where"><code>:where()</code></a></dt>
<dd>Mit <code>:where()</code> kann man einerseits stellvertretend mögliche Selektoren auflisten, um sich nicht per Selektoraufzählung wiederholen zu müssen. Das kann <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:is"><code>:is()</code></a> allerdings auch. Der Unterschied von <code>:is()</code> zu <code>:where()</code> ist jedoch, dass <code>:is()</code> die Spezifität des  Selektors in der Auflistung mit der höchsten Spezifität übernimmt, während die Spezifität von <code>:where()</code> bei 0 (null) verbleibt, ähnlich wie beim Universalselektor <code>*</code>.</p>
<p>Und das wiederum ermöglicht zusammen mit anderen Neuerungen wie den globalen Eigenschaftswerten <code>unset</code> und <code>revert</code> <a href="https://elad2412.github.io/the-new-css-reset/">gänzliche neue Arten von CSS-Resets</a>.</dd>
<dt>[00:30:39] <a href="https://philipwalton.com/articles/why-im-excited-about-native-css-variables/">Warum heißt es manchmal CSS Variablen und manchmal Custom Properties?</a></dt>
<dd>Wir klären die Frage, ob beides vielleicht unterschiedliche Dinge sind (Spoiler: sind sie nicht), und <a href="https://philipwalton.com/articles/why-im-excited-about-native-css-variables/">warum das Ganze offiziell nicht &#8222;CSS Variablen&#8220; heißt</a>.</p>
<p>Dann erwähnen wir <a href="https://vimeo.com/725619548">Lea Verous Talk über Custom Properties vom letzten CSS Day</a>, der sehr weit in die Tiefe geht und Dinge wie <a href="https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/">Toggle-Switches</a> und mehrere Ebenen von verschachtelten Custom Properties zeigt.</dd>
<dt>[00:37:56] <a href="#"><code>@property</code></a></dt>
<dd>Über <code>@property</code> ging es vor nicht all zu langer Zeit in der Folge <a href="https://workingdraft.de/534/">Revision 534: CSS Houdini, gescheitert?</a>. Dank <code>@property</code> 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.</p>
<pre><code>@property --property-name {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}</code></pre>
<p>Ein schöner Nebeneffekt von &#8222;dummen&#8220;, also nicht-typisierten Custom Properties ist die Tatsache, dass man von diesen z.B. Farben mit verschiedenen Transparenzen oder Farben mit ähnlichen HSL-Werten <a href="https://adamwathan.me/composing-the-uncomposable-with-css-variables/">ableiten kann</a>.</dd>
<dt>[00:41:58] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports"><code>@supports()</code></a></dt>
<dd><code>@supports()</code> ist eine im Browser eingebaute Feature Detection für CSS Eigenschaften und/oder bestimmte Eigenschaftswerte. Verwenden wir beide gerne und viel.</p>
<p>Neuerdings lässt sich mit Hilfe der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#function_syntax"><code>selector()</code></a>-Funktion in einem <code>@supports</code> auch herausfinden, ob CSS Selektoren vom Browser unterstützt werden.</dd>
<dt>[00:43:46] <a href="https://web.dev/min-max-clamp/"><code>min()</code>, <code>max()</code> und <code>clamp()</code></a></dt>
<dd>Alle drei Funktionen sind aus unserer Sicht sehr nützliche Ergänzungen von CSS. Bei <code>min()</code> und <code>max()</code> 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.</p>
<p><code>clamp()</code> wiederum findet meist im Rahmen von <a href="https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/">Fluid Typography</a> Anwendung.</p>
<p>Und schließlich erwähnen wir noch die Tatsache, dass man innerhalb von <code>min()</code>, <code>max()</code> und <code>clamp()</code> kein <code>calc()</code> benutzen muss, <a href="https://web.dev/min-max-clamp/#:~:text=When%20using%20a%20calculation%20inside%20of%20a%20min()%2C%20max()%2C%20or%20clamp()%20function%2C%20you%20can%20remove%20the%20call%20to%20calc().%20For%20example%2C%20writing%20font%2Dsize%3A%20max(calc(0.5vw%20%2D%201em)%2C%202rem)%20would%20be%20the%20same%20as%20font%2Dsize%3A%20max(0.5vw%20%2D%201em%2C%202rem).">weil die schon von Haus aus Mathematische Ausdrücke als Werte unterstützen</a>.</dd>
<dt>[00:47:14] Dies und das</dt>
<dd>Wir rauschen als nächstes schnell noch über ein paar CSS Features drüber:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/will-change"><code>will-change</code></a> finden <a href="https://greensock.com/will-change/">nicht nur wir sehr problematisch</a> und raten vom Einsatz ab</li>
<li>Cascade Layers aka <code>@layer</code> sind ein spannendes neues Konzept. Es gibt dazu <a href="https://www.css.cafe/css-understanding-the-cascade/">einen tollen Talk von Bramus van Damme</a>. Use-Case sind vermutlich Design Systeme.</li>
<li>Mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part()</code></a> kann man von außen Teile eines Shadow DOMs stylen, sofern die Autoren desselben diese Teile mit einem <code>part</code>-Attribut markiert haben.</li>
<li>Trigonometrisch Funktionen wie <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/sin"><code>sin()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cos"><code>cos()</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/tan"><code>tan()</code></a> sind sinnvolle Ergänzungen, um komplexe Transformationen zu berechnen.</li>
<li><a href="https://www.w3.org/TR/css-nesting-1/">CSS Nesting</a> ist nett, haut uns aber nicht so vom Hocker. Außerdem wird es wohl noch etwas länger dauern, bis man das einsetzen kann.</li>
<li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set"><code>image-set()</code>-Funktion</a> ist sowas wie <code>srcset</code>, nur in CSS. Wird in einer Vorversion mit <code>-webkit-</code>-Prefix schon <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set#browser_compatibility">seit langem von Safari und Chromium unterstützt</a>.</li>
<li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image"><code>image()</code>-Funktion</a> ist so etwas wie die Nachfolgerin der <code>url()</code>-Funktion. Sie räumt ein paar historische Probleme von <code>url()</code> aus, wie zum Beispiel, <a href="https://www.stefanjudis.com/today-i-learned/custom-properties-dont-work-with-the-url-css-function/">dass man darin keine Custom Properties verwenden kann</a>. Darüber hinaus rüstet <code>image()</code> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image#image_fragments">Fragment-Notation</a> verwenden. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image#browser_compatibility">Der Browser-Support ist aber nicht vorhanden</a>.</li>
</ul>
</dd>
<dt>[00:53:09] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/9">CSS Frameworks</a></dt>
<dd>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? <a href="https://draft.community/">Joined uns im Community Draft und sagt es uns!</a></dd>
<dt>[00:58:53] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/10">CSS in JS</a></dt>
<dd>Noch viel weniger Plan als von Frameworks haben wir von den verschiedenen CSS-in-JS-Bibliotheken 🥴</p>
<p>Vanessa erinnert sich jedoch an eine alte Folge, in der Hans und Schepp ausschließlich über CSS in JS diskutiert haben: <a href="https://workingdraft.de/468/">Revision 468: CSS in JS</a>.</dd>
<dt>[01:07:08] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/11">Other Tools</a></dt>
<dd>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 &#8222;Serviervorschlägen&#8220; an, welche Art Pre- und Postprozessoren am Werk sind.</p>
<p>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.</p>
<p>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 <a href="https://sizzy.co/">Sizzy-Browser</a> oder <a href="https://polypane.app/">Polypane</a>.</p>
<p>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.</dd>
<dt>[01:31:45] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/13">Resources</a></dt>
<dd>Im Kapitel über die Learning Resources freuen wir uns schließlich sehr darüber, dass unser Podcast es hineingeschafft hat. Mega!</dd>
</dl>


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 spre…

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 HEISST 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!

Revision 547: The State of CSS (Teil 2)

<p>Die alljährliche Umfrage zum <a href="https://survey.devographics.com/survey/state-of-css/2022">State of CSS</a> 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 <a href="https://workingdraft.de/545/">hier</a> nachhören.</p>
<h3>[00:01:00] Schaunotizen</h3>
<dl>
<dt>[00:02:03] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data">Das <code>prefers-reduced-data</code> Media Feature</a></dt>
<dd>Das <code>prefers-reduced-data</code> Media Feature (HTML), bzw. die <code>prefers-reduced-data</code> 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 <code>no-preference</code> oder <code>reduce</code> steht.</p>
<p>Wir sprechen in dem Zusammenhang auch über sogenannte &#8222;<a href="https://github.com/WICG/interventions/blob/d41534ac4d2da54dee0e786b9f4c6ac116cba4a4/README.md">Browser Interventions</a>&#8222;, die <a href="https://twitter.com/zcorpan/status/1542857247923081218">Simon Pieters in diesem Twitter-Thread genauer ausführt</a>.</p>
<p>Außerdem findet der <a href="https://dev.to/pqina/poor-man-s-dark-mode-using-css-filter-211n">Poor Man&#8217;s Dark Mode</a> Erwähnung.</dd>
<dt>[00:18:37] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><code>:focus-visible</code></a></dt>
<dd>Die Kurzfassung der Funktionsweise der <code>:focus-visible</code>-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 <code>:focus-visible</code> wieder zurück zu bringen.</p>
<p>Die Langfassung dessen, was hinter <code>:focus-visible</code> (und <code>inert</code>) steht, könnt Ihr in <a href="https://www.igalia.com/chats/alice-and-rob">dieser Folge</a> der Igalia Chats Podcastreihe nachhören.</dd>
<dt>[00:21:15] <a href="https://web.dev/color-scheme/">Color Schemes</a></dt>
<dd>Dieser von Vanessa erwähnte Artikel beinhaltet alle Infos zu den verschiedenen Color Schemes, die man benötigt.</dd>
<dt>[00:22:00] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::marker">Das <code>::marker</code>-Pseudoelement</a></dt>
<dd>Mit Hilfe von <code>::marker</code> lässt sich nun endlich(?) das Aufzählungszeichen von Listen greifen und stylen. Wir sind uns allerdings nicht sicher, wie sehr uns das tangiert.</p>
<p>Wichtig zu wissen ist nämlich, dass man bei <code>::marker</code> nur ein <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties">Subset an CSS-Eigenschaften zum Stylen zur Verfügung hat</a>.</dd>
<dt>[00:24:45] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a></dt>
<dd><a href="https://webkit.org/blog/13096/css-has-pseudo-class/">Dank der Ideen eines brillanten WebKit-Ingenieurs</a> zur Umgehung <a href="https://snook.ca/archives/html_and_css/css-parent-selectors">der drohenden Performance-Probleme</a>, ist Ende 2021 naben Container Queries auch der zweite Traum aller Frontend-Enwickler*innen, der Parent-Selector Wirklichkeit geworden!</p>
<p>Wir erwähnen kurz die Tatsache, dass es auch beim <code>:last-child</code>-Selektor <a href="https://snook.ca/archives/html_and_css/css-parent-selectors#:~:text=Why%20IE%20took%20so%20long%20to%20get%20%3Alast%2Dchild%20support">aus Performancegründen länger gedauert hat</a>, bis dieser in allen Browsern verfügbar war.</dd>
<dt>[00:28:46] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:where"><code>:where()</code></a></dt>
<dd>Mit kann man einerseits stellvertretend mögliche Selektoren auflisten, um sich nicht per Selektoraufzählung wiederholen zu müssen. Das kann <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:is"><code>:is()</code></a> allerdings auch. Der Unterschied von <code>:is()</code> zu <code>:where()</code> ist jedoch, dass <code>:is()</code> die Spezifität des  Selektors in der Auflistung mit der höchsten Spezifität übernimmt, während die Spezifität von <code>:where()</code> bei 0 (null) verbleibt, ähnlich wie beim Universalselektor <code>*</code>.</p>
<p>Und das wiederum ermöglicht zusammen mit anderen Neuerungen wie den globalen Eigenschaftswerten <code>unset</code> und <code>revert</code> <a href="https://elad2412.github.io/the-new-css-reset/">gänzliche neue Arten von CSS-Resets</a>.</dd>
<dt>[00:30:39] <a href="https://philipwalton.com/articles/why-im-excited-about-native-css-variables/">Warum heißt es manchmal CSS Variablen und manchmal Custom Properties?</a></dt>
<dd>Wir klären die Frage, ob beides vielleicht unterschiedliche Dinge sind (Spoiler: sind sie nicht), und <a href="https://philipwalton.com/articles/why-im-excited-about-native-css-variables/">warum das Ganze offiziell nicht &#8222;CSS Variablen&#8220; heißt</a>.</p>
<p>Dann erwähnen wir <a href="https://vimeo.com/725619548">Lea Verous Talk über Custom Properties vom letzten CSS Day</a>, der sehr weit in die Tiefe geht und Dinge wie <a href="https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/">Toggle-Switches</a> und mehrere Ebenen von verschachtelten Custom Properties zeigt.</dd>
<dt>[00:37:56] <a href="#"><code>@property</code></a></dt>
<dd>Über <code>@property</code> ging vor nicht all zu langer Zeit in der Folge <a href="https://workingdraft.de/534/">Revision 534: CSS Houdini, gescheitert?</a>. Dank <code>@property</code> 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.</p>
<pre><code>@property --property-name {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}</code></pre>
<p>Ein schöner Nebeneffekt von &#8222;dummen&#8220;, also nicht-typisierten Custom Properties ist die Tatsache, dass man von diesen z.B. Farben mit verschiedenen Transparenzen oder Farben mit ähnlichen HSL-Werten <a href="https://adamwathan.me/composing-the-uncomposable-with-css-variables/">ableiten kann</a>.</dd>
<dt>[00:41:58] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports"><code>@supports()</code></a></dt>
<dd><code>@supports()</code> ist eine im Browser eingebaute Feature Detection für CSS Eigenschaften und/oder bestimmte Eigenschaftswerte. Verwenden wir beide gerne und viel.</p>
<p>Neuerdings lässt sich mit Hilfe der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#function_syntax"><code>selector()</code></a>-Funktion in einem <code>@supports</code> auch herausfinden, ob CSS Selektoren vom Browser unterstützt werden.</dd>
<dt>[00:43:46] <a href="https://web.dev/min-max-clamp/"><code>min()</code>, <code>max()</code> und <code>clamp()</code></a></dt>
<dd>Alle drei Funktionen sind aus unserer Sicht sehr nützliche Ergänzungen von CSS. Bei <code>min()</code> und <code>max()</code> 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.</p>
<p><code>clamp()</code> wiederum findet meist im Rahmen von <a href="https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/">Fluid Typography</a> Anwendung.</p>
<p>Und schließlich erwähnen wir noch die Tatsache, dass man innerhalb von <code>min()</code>, <code>max()</code> und <code>clamp()</code> kein <code>calc()</code> benutzen muss, <a href="https://web.dev/min-max-clamp/#:~:text=When%20using%20a%20calculation%20inside%20of%20a%20min()%2C%20max()%2C%20or%20clamp()%20function%2C%20you%20can%20remove%20the%20call%20to%20calc().%20For%20example%2C%20writing%20font%2Dsize%3A%20max(calc(0.5vw%20%2D%201em)%2C%202rem)%20would%20be%20the%20same%20as%20font%2Dsize%3A%20max(0.5vw%20%2D%201em%2C%202rem).">weil die schon von Haus aus Mathematische Ausdrücke als Werte unterstützen</a>.</dd>
<dt>[00:47:14] Dies und das</dt>
<dd>Wir rauschen als nächstes schnell noch über ein paar CSS Features drüber:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/will-change"><code>will-change</code></a> finden <a href="https://greensock.com/will-change/">nicht nur wir sehr problematisch</a> und raten vom Einsatz ab</li>
<li>Cascade Layers aka <code>@layer</code> sind ein spannendes neues Konzept. Es gibt dazu <a href="https://www.css.cafe/css-understanding-the-cascade/">einen tollen Talk von Bramus van Damme</a>. Use-Case sind vermutlich Design Systeme.</li>
<li>Mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part()</code></a> kann man von außen Teile eines Shadow DOMs stylen, sofern die Autoren desselben diese Teile mit einem <code>part</code>-Attribut markiert haben.</li>
<li>Trigonometrisch Funktionen wie <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/sin"><code>sin()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cos"><code>cos()</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/tan"><code>tan()</code></a> sind sinnvolle Ergänzungen, um komplexe Transformationen zu berechnen.</li>
<li><a href="https://www.w3.org/TR/css-nesting-1/">CSS Nesting</a> ist nett, haut uns aber nicht so vom Hocker. Außerdem wird es wohl noch etwas länger, bis man das einsetzen kann.</li>
<li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set"><code>image-set()</code>-Funktion</a> ist sowas wie <code>srcset</code>, nur in CSS. Wird in einer Vorversion mit <code>-webkit-</code>-Prefix schon <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set#browser_compatibility">seit langem von Safari und Chromium unterstützt</a>.</li>
<li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image"><code>image()</code>-Funktion</a> ist so etwas wie der Nachfolger der <code>url()</code>-Funktion. Sie räumt ein paar historische Probleme von aus, wie zum Beispiel, <a href="https://www.stefanjudis.com/today-i-learned/custom-properties-dont-work-with-the-url-css-function/">dass man darin keine Custom Properties verwenden kann</a>. Darüber hinaus rüstet <code>image()</code> weitere Fähigkeiten nach, wie zum Beispiel ein Bild aus einer Farbe zu generieren, so dass man keinen Gradient mehr dafür missbrauchen muss. Und man kann auch nur Bildausschnitte via <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image#image_fragments">Fragment-Notation</a> verwenden. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image#browser_compatibility">Der Browser-Support ist aber nicht vorhanden</a>.</li>
</ul>
</dd>
<dt>[00:53:09] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/9">CSS Frameworks</a></dt>
<dd>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? <a href="https://draft.community/">Joined uns im Community Draft und sagt es uns!</a></dd>
<dt>[00:58:53] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/10">CSS in JS</a></dt>
<dd>Noch viel weniger Plan als von Frameworks haben wir von den verschiedenen CSS-in-JS-Bibliotheken <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f974.png" alt="🥴" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p>Vanessa erinnert sich jedoch an eine alte Folge, in der Hans und Schepp ausschließlich über CSS in JS diskutiert haben: <a href="https://workingdraft.de/468/">Revision 468: CSS in JS</a>.</dd>
<dt>[01:07:08] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/11">Other Tools</a></dt>
<dd>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 &#8222;Serviervorschlägen&#8220; an, welche Art Pre- und Postprozessoren am Werk sind.</p>
<p>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.</p>
<p>Als Entwicklungsbrowser nutzt Vanessa den Microsoft Edge, während Schepp weiterhin auf Chrome ist. Beide schwärmen wir aber auch von extra für Entwickler*innen gebaute Browser wie dem <a href="https://sizzy.co/">Sizzy-Browser</a> oder <a href="https://polypane.app/">Polypane</a>.</p>
<p>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.</dd>
<dt>[01:31:45] <a href="https://survey.devographics.com/survey/state-of-css/2022/h2mDMaqZpIQXOax1dsp61/13">Resources</a></dt>
<dd>Im Kapitel über die Learning Resources freuen wir uns schließlich sehr darüber, dass unser Podcast es hineingeschafft hat. Mega!</dd>
</dl>


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 [&#8230;]

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 ei[...]

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 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 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 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 Cu[...]

<p>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.</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<div class="message_content">
<p>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.</p>
<p>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.</p>
<p>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 <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:52] Ausbildungspfade im Web</dt>
<dd>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 &#8222;klassischen&#8220; 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.</dd>
</dl>


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…

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

<p>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.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<div class="message_content">
<p>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.</p>
<p>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.</p>
<p>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 <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:52] Ausbildungspfade im Web</dt>
<dd>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 &#8222;klassischen&#8220; 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.</dd>
</dl>


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 [&#8230;]

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. Studiu[...]

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

<p>Die alljährliche Umfrage zum <a href="https://survey.devographics.com/survey/state-of-css/2022">State of CSS</a> 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.</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://nordvpn.com/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/11/nord-logo-horizontal@1x.png" alt="" /></a></p>
<div class="message_content">
<p>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.<br />
Damit auch du sicher im Internet unterwegs sein kannst, schau bei <a href="https://nordvpn.com/workingdraft?ref=workingdraft.de">nordvpn.com/workingdraft</a> vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie!
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:52] <a href="https://survey.devographics.com/survey/state-of-css/2022/">State of CSS</a></dt>
<dd>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.</dd>
<dt>[00:07:15] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">CSS Writing Modes</a></dt>
<dd>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 &#8222;Unter-Internets&#8220; 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.</dd>
<dt>[00:15:30] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap"><code>gap</code> Property for Flexbox</a></dt>
<dd>Wir sind uns einig, dass <code>gap</code>, welches neben CSS Flexbox auch von CSS Grid und (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility">außer in Safari</a>) CSS Multicolumn unterstützt wird, super praktisch ist.</dd>
<dt>[00:21:43] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></dt>
<dd>Subgrid betrachten wir noch als nicht einsetzbar, weil der Browser-Support noch nicht breit genug ist und es auch keine guten Fallbacks gibt.</dd>
<dt>[00:22:21] <a href="https://web.dev/content-visibility/"><code>content-visibility</code></a></dt>
<dd>Bei <code>content-visibility</code> ist das anders. Das lässt sich trotz geringem Browser-Support super in Form von &#8222;Progressive Enhancement&#8220; einbauen. Letztlich ist das nichts anderes als Lazy Rendering von Elementen.</dd>
<dt>[00:22:40] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries"><code>@container</code></a></dt>
<dd>Und auch Container Queries beginnen wir mittlerweile so einzusetzen, dass Dinge &#8222;graceful degraden&#8220;, wenn die Technik noch nicht zur Verfügung steht, was man mit <code>@supports</code> ja gut herausbekommen kann.</dd>
<dt>[00:24:21] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4">Media Queries Range Contexts</a></dt>
<dd>Die neue Schreibweise von Media Queries in Form von Wertebereichen zwischen einem Minimum und Maximum, mit Hilfe von mathematischen Gräßer- und Kleinerzeichen finden wir gut lesbar und sie hilft auch ein paar Edge Cases zu vermeiden, auf die wir mit der derzeitigen Schreibeweise stoßen. Anders als von uns in der Aufnahme behauptet, werden die nicht nur <a href="https://caniuse.com/css-media-range-syntax">von Firefox, sondern auch von Chromium unterstützt</a>. Es dauert also noch eine Weil, bis wir die einsetzen können.</dd>
<dt>[00:30:49] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties</a></dt>
<dd>Logische Eigenschaften benutzen wir aus den gleichen Gründen nicht, wie im Zusammenhang mit den CSS Writing Modes genannt. Allerdings sehen wir durch unser Verhalten Zugänglichkeitsprobleme für Benutzer*innen, die mit Browser-Plugins eine Seite in ihre Sprache übersetzen lassen. Die könnten von Logical Properties profitieren.</dd>
<dt>[00:32:07] <a href="https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/">Viewport-Percentage Length Units</a></dt>
<dd>Die neuen Viewport Units sind eine praktische und willkommene Ergänzung zu den etablierten und lösen Probleme, die man speziell auf mobilen Geräten und ihren dynamischen Viewports hat.</dd>
<dt>[00:32:53] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter"><code>backdrop-filter</code></a></dt>
<dd>Der Backdrop-Filter hat es Vanessa besonders angetan. Der Backdrop-Filter macht für Dinge, die hinter einem Element durchscheinen das, was der normale Filter für Elemente tut. Wir stellen fest, dass man mit Filtern, egal ob Backdrop-Filter oder normalem Filter, schnell zu dick auftragen kann. Weniger ist hier also wieder einmal mehr. Irgendwie kommen wir dann auf die Serie <a href="https://www.imdb.com/title/tt10857160/">She-Hulk</a>, die Vanessa sehr empfehlen kann.</dd>
<dt>[00:38:37] <a href="https://ishadeed.com/article/intrinsic-sizing-in-css/">Intrinsic Sizing</a></dt>
<dd>Als nächstes sprechen wir über die Keywords <code>fit-content</code>, <code>min-content</code> und <code>max-content</code>, die man in <code>width</code> und <code>height</code> einsetzen kann und die ein Element abhängig von seinem Inhalt dimensionieren, ähnlich wie CSS Flexbox&#8216; <code>flex-basis</code> oder CSS Grids <code>fit-content()</code>-Funktion. Use-Cases gibt es aber eher wenige.</dd>
<dt>[00:44:12] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color"><code>accent-color</code></a></dt>
<dd>Vanessa liebt <code>accent-color</code>, das zum unkomplizierten &#8222;Themen&#8220; von Browser-GUI aka &#8222;Replaced Elements&#8220; genutzt werden kann. In manch einem Projekt reicht das schon, um die beteiligten Designer*innen glücklich zu machen, ohne dass man gleich Inputs &#038; Co alle in neu (und barrierevoll) nachbauen muss.</dd>
<dt>[00:48:17] currentcolor</dt>
<dd>Zitat aus der &#8222;<a href="https://wiki.csswg.org/ideas/mistakes">Incomplete List of Mistakes in the Design of CSS</a>&#8220; der CSS Working Group:</p>
<blockquote><p>The currentColor keyword should have retained the dash, current-color, as originally specified. Likewise all other color multi-word keyword names.</p></blockquote>
<p>        Tatsächlich wird der Fehler des Camelcasens dieses Keywords nun in 2022 endlich korrigiert, allerdings nicht mit einem Bindestrich, sondern durch komplettes Lowercasen des Wortes. Das hat den Hintergrund, dass <a href="https://www.w3.org/blog/CSS/2007/12/12/case_sensitivity/">CSS größtenteils case-insensitive ist</a> und die Änderung so rückwärtskompatibel bleibt.
        </dd>
<dt>[00:53:36] <a href="https://www.youtube.com/watch?v=zkun6wAPc1s">(Gradient) Color Spaces</a></dt>
<dd>Auf die neuen Farbräume in CSS freuen wir uns schon. Die decken nicht nur mehr Farbraum ab, als das derzeit verwendete sRGB, sondern sind auch nach einem psychovisuellen Modell entwickelt. Und aufgrund ihrer Form ermöglichen die neuen Farbräume auch deutlich schönere Farbverläufe.</dd>
<dt>[00:58:14] <a href="https://www.youtube.com/watch?v=7ipkxhmlQUQ">CSS Scroll Snapping</a></dt>
<dd>Nun geht es endlich um das eingangs schon angesprochene CSS Scroll Snapping und Scrollen und Touchen und wir verweisen auf <a href="https://www.youtube.com/watch?v=7ipkxhmlQUQ">Adam Argyles irren CSS Café Talk</a> zu dem Thema.</dd>
<dt>[01:03:09] Variable Fonts</dt>
<dd>Obwohl wir schon einige Vorträge zu dem Thema gesehen haben, haben wir der Praxis noch nicht einen variablen Font zum Einsatz gebracht. Das lohnt sich aber eigentlich auch erst, wenn man mehr als zwei bis drei Schriftschnitte benötigt. Zudem stellen die variablen Fonts manches Schriften-verarbeitende Tool vor Probleme.</dd>
<dt>[01:08:47] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp"><code>line-clamp</code></a></dt>
<dd>Wir sehen <code>line-clamp</code>, mit dem man Texte nach so und so viel Zeilen abschneiden kann, mit gemischten Gefühlen. Einerseits erscheint es uns wie etwas unbeholfenes Interface-Design, bei dem störender Inhalt weichen soll. Andererseits finden wir schade, dass wir vom Browser keine Rückmeldung, z.B. in Form einer Pseudoklasse haben, wenn Text tatsächlich abgeschnitten wurde. So können wir gestalterisch nicht darauf eingehen und einen Hinweis auf mehr Text einblenden.</dd>
<dt>[01:13:25] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display"><code>font-display</code></a></dt>
<dd><code>font-display</code> stammt aus dem Bemühen, <a href="https://vimeo.com/33154573">die verschiedenen Verhalten von Browsern beim Anzeigen von Schriften</a> zu vereinheitlichen bzw. einstellbar zu machen. <code>font-display: swap</code> ist hier meist die Einstellung, die man haben möchte.</dd>
</dl>


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 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 vorbei und teste 30 Tage lang risikofrei mit der
30-Tage-Geld-zurück-Garantie!


SCHAUNOTIZEN

[00:01:52] STATE OF CSS

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

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

Wir sind uns einig, dass gap, welches neben CSS Flexbox auch von CSS Grid und
(außer in Safari) CSS Multicolumn unterstützt wird, super praktisch ist.

[00:21:43] 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

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

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 ja gut herausbekommen kann.

[00:24:21] MEDIA QUERIES RANGE CONTEXTS

Die neue Schreibweise von Media Queries in Form von Wertebereichen zwischen
einem Minimum und Maximum, mit Hilfe von mathematischen Gräßer- und
Kleinerzeichen finden wir gut lesbar und sie hilft auch ein paar Edge Cases zu
vermeiden, auf die wir mit der derzeitigen Schreibeweise stoßen. Anders als von
uns in der Aufnahme behauptet, werden die nicht nur von Firefox, sondern auch
von Chromium unterstützt. Es dauert also noch eine Weil, bis wir die einsetzen
können.

[00:30:49] LOGICAL PROPERTIES

Logische Eigenschaften benutzen wir aus den gleichen Gründen nicht, wie im
Zusammenhang mit den CSS Writing Modes genannt. Allerdings sehen wir durch unser
Verhalten Zugänglichkeitsprobleme für Benutzer*innen, die mit Browser-Plugins
eine Seite in ihre Sprache übersetzen lassen. Die könnten von Logical Properties
profitieren.

[00:32:07] VIEWPORT-PERCENTAGE LENGTH UNITS

Die neuen Viewport Units sind eine praktische und willkommene Ergänzung zu den
etablierten und lösen Probleme, die man speziell auf mobilen Geräten und ihren
dynamischen Viewports hat.

[00:32:53] BACKDROP-FILTER

Der Backdrop-Filter hat es Vanessa besonders angetan. Der Backdrop-Filter macht
für Dinge, die hinter einem Element durchscheinen das, was der normale Filter
für Elemente tut. Wir stellen fest, dass man mit Filtern, egal ob
Backdrop-Filter oder normalem Filter, schnell zu dick auftragen kann. Weniger
ist hier also wieder einmal mehr. Irgendwie kommen wir dann auf die Serie
She-Hulk, die Vanessa sehr empfehlen kann.

[00:38:37] INTRINSIC SIZING

Als nächstes sprechen wir über die Keywords fit-content, min-content und
max-content, die man in width und height einsetzen kann und die ein Element
abhängig von seinem Inhalt dimensionieren, ähnlich wie CSS Flexbox‘ flex-basis
oder CSS Grids fit-content()-Funktion. Use-Cases gibt es aber eher wenige.

[00:44:12] ACCENT-COLOR

Vanessa liebt accent-color, das zum unkomplizierten „Themen“ von Browser-GUI aka
„Replaced Elements“ genutzt werden kann. In manch einem Projekt reicht das
schon, um die beteiligten Designer*innen glücklich zu machen, ohne dass man
gleich Inputs & Co alle in neu (und barrierevoll) nachbauen muss.

[00:48:17] CURRENTCOLOR

Zitat aus der „Incomplete List of Mistakes in the Design of CSS“ der CSS Working
Group:



> The currentColor keyword should have retained the dash, current-color, as
> originally specified. Likewise all other color multi-word keyword names.

Tatsächlich wird der Fehler des Camelcasens dieses Keywords nun in 2022 endlich
korrigiert, allerdings nicht mit einem Bindestrich, sondern durch komplettes
Lowercasen des Wortes. Das hat den Hintergrund, dass CSS größtenteils
case-insensitive ist und die Änderung so rückwärtskompatibel bleibt.

[00:53:36] (GRADIENT) COLOR SPACES

Auf die neuen Farbräume in CSS freuen wir uns schon. Die decken nicht nur mehr
Farbraum ab, als das derzeit verwendete sRGB, sondern sind auch nach einem
psychovisuellen Modell entwickelt. Und aufgrund ihrer Form ermöglichen die neuen
Farbräume auch deutlich schönere Farbverläufe.

[00:58:14] CSS SCROLL SNAPPING

Nun geht es endlich um das eingangs schon angesprochene CSS Scroll Snapping und
Scrollen und Touchen und wir verweisen auf Adam Argyles irren CSS Café Talk zu
dem Thema.

[01:03:09] VARIABLE FONTS

Obwohl wir schon einige Vorträge zu dem Thema gesehen haben, haben wir der
Praxis noch nicht einen variablen Font zum Einsatz gebracht. Das lohnt sich aber
eigentlich auch erst, wenn man mehr als zwei bis drei Schriftschnitte benötigt.
Zudem stellen die variablen Fonts manches Schriften-verarbeitende Tool vor
Probleme.

[01:08:47] LINE-CLAMP

Wir sehen line-clamp, mit dem man Texte nach so und so viel Zeilen abschneiden
kann, mit gemischten Gefühlen. Einerseits erscheint es uns wie etwas
unbeholfenes Interface-Design, bei dem störender Inhalt weichen soll.
Andererseits finden wir schade, dass wir vom Browser keine Rückmeldung, z.B. in
Form einer Pseudoklasse haben, wenn Text tatsächlich abgeschnitten wurde. So
können wir gestalterisch nicht darauf eingehen und einen Hinweis auf mehr Text
einblenden.

[01:13:25] FONT-DISPLAY

font-display stammt aus dem Bemühen, die verschiedenen Verhalten von Browsern
beim Anzeigen von Schriften zu vereinheitlichen bzw. einstellbar zu machen.
font-display: swap ist hier meist die Einstellung, die man haben möchte.

Revision 545: The State of CSS (Teil 1)

<p>Die alljährliche Umfrage zum <a href="https://survey.devographics.com/survey/state-of-css/2022">State of CSS</a> 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.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://nordvpn.com/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/11/nord-logo-horizontal@1x.png" alt="" /></a></p>
<div class="message_content">
<p>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.<br />
Damit auch du sicher im Internet unterwegs sein kannst, schau bei <a href="https://nordvpn.com/workingdraft?ref=workingdraft.de">nordvpn.com/workingdraft</a> vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie!
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:52] <a href="https://survey.devographics.com/survey/state-of-css/2022/">State of CSS</a></dt>
<dd>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.</dd>
<dt>[00:07:15] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">CSS Writing Modes</a></dt>
<dd>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 &#8222;Unter-Internets&#8220; 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.</dd>
<dt>[00:15:30] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap"><code>gap</code> Property for Flexbox</a></dt>
<dd>Wir sind uns einig, dass <code>gap</code>, welches neben CSS Flexbox auch von CSS Grid und (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility">außer in Safari</a>) CSS Multicolumn unterstützt wird, super praktisch ist.</dd>
<dt>[00:21:43] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></dt>
<dd>Subgrid betrachten wir noch als nicht einsetzbar, weil der Browser-Support noch nicht breit genug ist und es auch keine guten Fallbacks gibt.</dd>
<dt>[00:22:21] <a href="https://web.dev/content-visibility/"><code>content-visibility</code></a></dt>
<dd>Bei <code>content-visibility</code> ist das anders. Das lässt sich trotz geringem Browser-Support super in Form von &#8222;Progressive Enhancement&#8220; einbauen. Letztlich ist das nichts anderes als Lazy Rendering von Elementen.</dd>
<dt>[00:22:40] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries"><code>@container</code></a></dt>
<dd>Und auch Container Queries beginnen wir mittlerweile so einzusetzen, dass Dinge &#8222;graceful degraden&#8220;, wenn die Technik noch nicht zur Verfügung steht, was man mit <code>@supports</code> ja gut herausbekommen kann.</dd>
<dt>[00:24:21] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4">Media Queries Range Contexts</a></dt>
<dd>Die neue Schreibweise von Media Queries in Form von Wertebereichen zwischen einem Minimum und Maximum, mit Hilfe von mathematischen Gräßer- und Kleinerzeichen finden wir gut lesbar und sie hilft auch ein paar Edge Cases zu vermeiden, auf die wir mit der derzeitigen Schreibeweise stoßen. Anders als von uns in der Aufnahme behauptet, werden die nicht nur <a href="https://caniuse.com/css-media-range-syntax">von Firefox, sondern auch von Chromium unterstützt</a>. Es dauert also noch eine Weil, bis wir die einsetzen können.</dd>
<dt>[00:30:49] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties</a></dt>
<dd>Logische Eigenschaften benutzen wir aus den gleichen Gründen nicht, wie im Zusammenhang mit den CSS Writing Modes genannt. Allerdings sehen wir durch unser Verhalten Zugänglichkeitsprobleme für Benutzer*innen, die mit Browser-Plugins eine Seite in ihre Sprache übersetzen lassen. Die könnten von Logical Properties profitieren.</dd>
<dt>[00:32:07] <a href="https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/">Viewport-Percentage Length Units</a></dt>
<dd>Die neuen Viewport Units sind eine praktische und willkommene Ergänzung zu den etablierten und lösen Probleme, die man speziell auf mobilen Geräten und ihren dynamischen Viewports hat.</dd>
<dt>[00:32:53] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter"><code>backdrop-filter</code></a></dt>
<dd>Der Backdrop-Filter hat es Vanessa besonders angetan. Der Backdrop-Filter macht für Dinge, die hinter einem Element durchscheinen das, was der normale Filter für Elemente tut. Wir stellen fest, dass man mit Filtern, egal ob Backdrop-Filter oder normalem Filter, schnell zu dick auftragen kann. Weniger ist hier also wieder einmal mehr. Irgendwie kommen wir dann auf die Serie <a href="https://www.imdb.com/title/tt10857160/">She-Hulk</a>, die Vanessa sehr empfehlen kann.</dd>
<dt>[00:38:37] <a href="https://ishadeed.com/article/intrinsic-sizing-in-css/">Intrinsic Sizing</a></dt>
<dd>Als nächstes sprechen wir über die Keywords <code>fit-content</code>, <code>min-content</code> und <code>max-content</code>, die man in <code>width</code> und <code>height</code> einsetzen kann und die ein Element abhängig von seinem Inhalt dimensionieren, ähnlich wie CSS Flexbox&#8216; <code>flex-basis</code> oder CSS Grids <code>fit-content()</code>-Funktion. Use-Cases gibt es aber eher wenige.</dd>
<dt>[00:44:12] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color"><code>accent-color</code></a></dt>
<dd>Vanessa liebt <code>accent-color</code>, das zum unkomplizierten &#8222;Themen&#8220; von Browser-GUI aka &#8222;Replaced Elements&#8220; genutzt werden kann. In manch einem Projekt reicht das schon, um die beteiligten Designer*innen glücklich zu machen, ohne dass man gleich Inputs &#038; Co alle in neu (und barrierevoll) nachbauen muss.</dd>
<dt>[00:48:17] currentcolor</dt>
<dd>Zitat aus der &#8222;<a href="https://wiki.csswg.org/ideas/mistakes">Incomplete List of Mistakes in the Design of CSS</a>&#8220; der CSS Working Group:</p>
<blockquote><p>The currentColor keyword should have retained the dash, current-color, as originally specified. Likewise all other color multi-word keyword names.</p></blockquote>
<p>        Tatsächlich wird der Fehler des Camelcasens dieses Keywords nun in 2022 endlich korrigiert, allerdings nicht mit einem Bindestrich, sondern durch komplettes Lowercasen des Wortes. Das hat den Hintergrund, dass <a href="https://www.w3.org/blog/CSS/2007/12/12/case_sensitivity/">CSS größtenteils case-insensitive ist</a> und die Änderung so rückwärtskompatibel bleibt.
        </dd>
<dt>[00:53:36] <a href="https://www.youtube.com/watch?v=zkun6wAPc1s">(Gradient) Color Spaces</a></dt>
<dd>Auf die neuen Farbräume in CSS freuen wir uns schon. Die decken nicht nur mehr Farbraum ab, als das derzeit verwendete sRGB, sondern sind auch nach einem psychovisuellen Modell entwickelt. Und aufgrund ihrer Form ermöglichen die neuen Farbräume auch deutlich schönere Farbverläufe.</dd>
<dt>[00:58:14] <a href="https://www.youtube.com/watch?v=7ipkxhmlQUQ">CSS Scroll Snapping</a></dt>
<dd>Nun geht es endlich um das eingangs schon angesprochene CSS Scroll Snapping und Scrollen und Touchen und wir verweisen auf <a href="https://www.youtube.com/watch?v=7ipkxhmlQUQ">Adam Argyles irren CSS Café Talk</a> zu dem Thema.</dd>
<dt>[01:03:09] Variable Fonts</dt>
<dd>Obwohl wir schon einige Vorträge zu dem Thema gesehen haben, haben wir der Praxis noch nicht einen variablen Font zum Einsatz gebracht. Das lohnt sich aber eigentlich auch erst, wenn man mehr als zwei bis drei Schriftschnitte benötigt. Zudem stellen die variablen Fonts manches Schriften-verarbeitende Tool vor Probleme.</dd>
<dt>[01:08:47] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp"><code>line-clamp</code></a></dt>
<dd>Wir sehen <code>line-clamp</code>, mit dem man Texte nach so und so viel Zeilen abschneiden kann, mit gemischten Gefühlen. Einerseits erscheint es uns wie etwas unbeholfenes Interface-Design, bei dem störender Inhalt weichen soll. Andererseits finden wir schade, dass wir vom Browser keine Rückmeldung, z.B. in Form einer Pseudoklasse haben, wenn Text tatsächlich abgeschnitten wurde. So können wir gestalterisch nicht darauf eingehen und einen Hinweis auf mehr Text einblenden.</dd>
<dt>[01:13:25] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display"><code>font-display</code></a></dt>
<dd><code>font-display</code> stammt aus dem Bemühen, <a href="https://vimeo.com/33154573">die verschiedenen Verhalten von Browsern beim Anzeigen von Schriften</a> zu vereinheitlichen bzw. einstellbar zu machen. <code>font-display: swap</code> ist hier meist die Einstellung, die man haben möchte.</dd>
</dl>


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 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 [&#8230;]

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 eins von zwei Teilen.

Unser [...]

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 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 vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie!


Schaunotizen

[00:01:52] State of CSS
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
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
Wir sind uns einig, dass gap, welches neben CSS Flexbox auch von CSS Grid und (außer in Safari) CSS Multicolumn unterstützt wird, super praktisch ist.
[00:21:43] 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
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
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 ja gut herausbekommen kann.
[00:24:21] Media Queries Range Contexts
Die neue Schreibweise von Media Queries in Form von Wertebereichen zwischen einem Minimum und Maximum, mit Hilfe von mathematischen Gräßer- und Kleinerzeichen finden wir gut lesbar und sie hilft auch ein paar Edge Cases zu vermeiden, auf die wir mit der derzeitigen Schreibeweise stoßen. Anders als von uns in der Aufnahme behauptet, werden die nicht nur von Firefox, sondern auch von Chromium unterstützt. Es dauert also noch eine Weil, bis wir die einsetzen können.
[00:30:49] Logical Properties
Logische Eigenschaften benutzen wir aus den gleichen Gründen nicht, wie im Zusammenhang mit den CSS Writing Modes genannt. Allerdings sehen wir durch unser Verhalten Zugänglichkeitsprobleme für Benutzer*innen, die mit Browser-Plugins eine Seite in ihre Sprache übersetzen lassen. Die könnten von Logical Properties profitieren.
[00:32:07] Viewport-Percentage Length Units
Die neuen Viewport Units sind eine praktische und willkommene Ergänzung zu den etablierten und lösen Probleme, die man speziell auf mobilen Geräten und ihren dynamischen Viewports hat.
[00:32:53] backdrop-filter
Der Backdrop-Filter hat es Vanessa besonders angetan. Der Backdrop-Filter macht für Dinge, die hinter einem Element durchschein[...]

Wöchentlicher News-Podcast für Webdesigner und -entwickler

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 550: Lead Developers & Remote Work

Working Draft

Revision 550: Lead Developers & Remote Work

Working Draft

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

Working Draft

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

Working Draft

Revision 548: Lernfreundliche Organisationen

Working Draft

Revision 548: Lernfreundliche Organisationen

Working Draft

Revision 547: The State of CSS (Teil 2)

Working Draft

Revision 547: The State of CSS (Teil 2)

Working Draft

Revision 546: Ausbildungspfade im Web

Working Draft

Revision 546: Ausbildungspfade im Web

Working Draft

Revision 545: The State of CSS (Teil 1)

Working Draft

Revision 545: The State of CSS (Teil 1)

Working Draft