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

Working Draft

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

Revision 547: The State of CSS (Teil 2)

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

Revision 546: Ausbildungspfade im Web

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

Revision 545: The State of CSS (Teil 1)

<p>Diese Revision war eigentlich mit Thema geplant, aber ein spontaner familiärer Notfall hat unser Programm kurzfristig geändert. Mit dem einen verbliebenen der drei geplanten Gäste, nämlich Florian Geierstanger (<a href="https://florian.geierstanger.org/">Web</a> / <a href="https://twitter.com/kino_auge">Twitter</a>), sind Hans und Schepp daher auf eine weitere Runde Glücksrad umgeschwenkt.</p>
<h3>Glücksrad</h3>
<dl>
<dt>[00:03:40] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/spacer"><code>&lt;spacer&gt;</code></a></dt>
<dd>Direkt als erstes schickt uns das Glücksrad auf eine Zeitreise weit in die Vergangenheit, zu dem uns bislang unbekannten <code>&lt;spacer&gt;</code>-Element. Dieses Netscape-spezifische Element schien zu formalisieren, was Entwickler*innen damals mit dem sogenannten <a href="https://en.wikipedia.org/wiki/Spacer_GIF">Spacer-GIF</a> bewerkstelligt haben. Wie so oft, wenn etwas in die Browser eingebacken wird, gab es eine Extra-Fähigkeit obendrauf: So konnte man mit Hilfe des <code>type</code>-Attributs Abstände auch nur in einer Achse erzeugen, was bei Bildern so nicht ging. <a href="https://hsivonen.fi/spacer/">2010 schrieb der damalige Mozilla-Entwickler Henri Sivonen</a> anlässlich der Entfernung des dazugehörigen Codes aus Gecko auch etwas über das Element. Schepp denkt an den <a href="https://codepen.io/plfstr/full/zYqQeRw">HTML Tags Memory Test</a> und überlegt, ob es dort wohl akzeptiert wird (wird es nicht).</dd>
<dt>[00:12:35] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a></dt>
<dd>Als nächstes geht es wieder leicht zurück in die Zukunft, und um das im Rahmen von HTML5 eingeführte <code>&lt;audio&gt;</code>-Element. Hans erinnert sich, dass man es analog zu den <code>&lt;video&gt;</code>&#8211; und <code>&lt;picture&gt;</code>-Elementen mit alternativen Dateiformaten füttern kann und der Browser pickt sich das heraus, was er abspielen kann. </p>
<p>Florian findet an dem Element doof, dass sich der Audioplayer beim Navigieren zu einer anderen Seite schließt. Schepp fällt zu dem Thema ein, dass es die <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API">Media Session API</a> gibt, die u.a. dieses Problem ausräumen soll. Und Hans wiederum erinnert sich daran, wie er diese API im nie zum Einsatz gekommenen <a href="https://github.com/workingdraft/audio-player">Working Draft Audio Player</a> verwendet hat. Die Macher des Podcasts <a href="https://wowirsindistvorne.show/">Wo wir sind ist vorne</a> haben das Problem (für Navigationen innerhalb der Seite) mit <a href="https://github.com/turbolinks/turbolinks">turbolinks</a> gelöst. </p>
<p>Desweiteren kommen wir auf Audio-Transkription und mögliche Wege zur Darreichung selbiger zu sprechen.Zwar gibt es den <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a>-Standard und die dazugehörigen, speziell formatierten <code>.vtt</code>-Dateien für Untertitel und Transkripte, aber leider kann sie das <code>&lt;audio&gt;</code>-Element nicht darstellen. Das macht in sofern Sinn, als dass die Abkürzung &#8222;WebVTT&#8220; für &#8222;Web Video Text Tracks Format&#8220; steht. Bleibt in so einem Fall also nur, auf ein <code>&lt;video&gt;</code>-Element umzuschwenken. Verrückterweise <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#sect4">kann aber auch ein &lt;audio&gt;-Element Video abspielen</a>!</p>
<p>Wir sprechen darüber, dass wir hier im Podcast keine Transskripte haben, was daran liegt, dass die uns bekannten maschinellen Tools große Probleme mit unseren Inhalten haben. Eine manuelle Transkription haben wir bislang <a href="https://workingdraft.de/390/">nur einmal machen lassen</a>. Die war zwar exzellent, doch <a href="https://www.theverge.com/2019/11/25/20979249/rev-recordings-transcriptions-low-pay-complaints-freelance-transcribers">stören wir uns an den Arbeitsbedingungen in der Branche</a> (über die wir erst im Anschluss daran erfuhren). Florian bringt eine neue AI-basierte Lösung namens &#8222;<a href="https://openai.com/blog/whisper/">Whisper</a>&#8220; ins Spiel, die sehr gut funktionieren soll und die wir uns als Hausaufgabe mitnehmen.</p>
<p>Hans fragt, welchen möglichst einfach gehaltenen Audioplayer wir empfehlen können, worauf uns eigentlich nur <a href="https://www.mediaelementjs.com/">MediaElement.js</a> einfällt.</p>
<p>Schepp weist auf ein Learning hin, das er vor einiger Zeit hatte, nämlich dass die <code>HTMLMediaElement.play()</code>-Methode im Standard und entsprechend auch in den Browsern 2016 nachträglich <a href="https://developer.chrome.com/blog/play-returns-promise/">auf Promises umgestellt wurde</a>.</p>
<p>Abschließend preisen wir die Tatsache, das man die Abspielgeschwindigkeit von Medien via JavaScript mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate"><code>playbackRate</code>-Attribut</a> beeinflussen kann. Florian empfiehlt dafür ein <a href="https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk">Browser-Plugin namens &#8222;Video Speed Controller&#8220;</a>, das dafür auf Seiten die etwas abspielen ein Interface einblendet.</dd>
<dt>[00:33:07] <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status"><code>XMLHttpRequest.status</code></a></dt>
<dd>Gibt bei AJAX-Requests den HTTP-Antwortcode zurück. Ist der Request noch nicht durchgegangen, steht der Wert auf 0 (Null).</p>
<p>Das spannendste an der <code>XMLHttpRequest</code>-API <a href="https://schepp.dev/posts/today-the-trident-era-ends/#:~:text=Or%20take%20what%20we%20know%20today%20as%20%22AJAX%22%3A">ist seine Entstehungsgeschichte</a>: Das damalige Outlook Web Access Team (was Gmail, nur eben 10 Jahre früher war) benötigte die API, um Inhalte dynamisch nachladen zu können. Weil damals XML allerorten gehyped wurde, und alles mit &#8222;XML&#8220; im Namen große Chancen hatte, in den Internet Explorer eingebaut zu werden, kam man auf die Idee, <a href="https://web.archive.org/web/20070227195930/http://www.alexhopmann.com/xmlhttp.htm">die API mit &#8222;XML&#8220; zu prefixen und so in den IE einzuschmuggeln</a>.</p>
<p>Außerdem erinnern wir uns an das Konzept von <a href="http://jsonp.eu/">JSONP</a>, das aber eigentlich überhaupt gar nichts mit der <code>XMLHttpRequest</code>-API zu tun hat, und mit dem man Cross-Origin-Datentransfers vor <a href="https://workingdraft.de/452/">CORS</a> realisiert hat.</dd>
<dt>[00:46:13] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype">Das <code>itemtype</code>-Attribut</a></dt>
<dd>Dieses HTML-Attribut stammt aus dem <a href="https://schema.org/">schema.org</a>-Vokabular, welches Markup um strukturierte Daten anreichert. Je nachdem, was für eine Art Inhalt man damit auszeichnet, stellt Google diesen in seinen Suchergebnissen angepasst dar. Wie das aussieht, kann man sich in Googles <a href="https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=de">Such-Galerie</a> anschauen.</p>
<p>Schepp empfiehlt, heutzutage statt auf HTML-Attribute besser auf <a href="https://json-ld.org/">JSON-LD</a> zu setzen, weil man mittlerweile ja eher in Baukästen denn in Seiten denkt und dann ein zentraler Ansatz förderlicher ist.
</dd>
<dt>[00:54:43] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">Die <code>@font-face</code>-At-Rule</a></dt>
<dd>Wir alle kennen diese At-Rule, um den Browser mit Schriften bekannt zu machen, und um diese dort einzustellen. Aber wusstet Ihr auch, dass das, was Ihr dort hinein schreibt, keine Properties, sondern <a href="https://www.w3.org/TR/css-syntax-3/#css-descriptor">Descriptoren</a> sind? Hierzu fällt uns <a href="https://www.xanthir.com/blog/b4E50">Tab Atkins-Bittners CSS-Begriffe-Lexikon</a> ein (in welchem Descriptoren allerdings nicht erwähnt werden).</p>
<p>Schepp weist auf die recht neuen Descriptoren ascent-override, descent-override, size-adjust und line-gap-override hin, <a href="https://blog.genreof.com/blog/f-mods/">die dem Finetuning der vertikalen Positionierung innerhalb einer Text-Zeile und des &#8222;Durchschusses&#8220; von Schriften dienen</a>, aber vor allem Layout-Shifts beim Austauschen von Schriften per <code>font-display: swap</code> verhindern sollen. Leider ein stark unterdokumentiertes Feature, von dem Schepp nur im Rahmen <a href="https://youtu.be/Z6wjUOSh9Tk?t=176">eines Talks von Jake Archibald</a> gelernt hat. Florian kennt ein gutes Tool, um das einzustellen, nämlich den <a href="https://screenspan.net/fallback">Fallback-Font-Generator</a>.</p>
<p>In Sachen Performance empfiehlt Schepp, direkt in das HTML zu packen, um dem Browser frühzeitig die entsprechenden Infos bereitzustellen und ihn die Schriften nicht erst in einem extern liegenden Stylesheet entdecken zu lassen. Von Zach Leatherman gibt es darüberhinaus auch <a href="https://www.youtube.com/watch?v=FbguhX3n3Uc">einen spannenden Talk</a> zum Thema &#8222;Schriften schnell laden&#8220;. Und nach seinem Talk haben wir noch ein paar Extrainfos <a href="https://workingdraft.de/on-tour-perfnow-zach-leatherman/">im Rahmen eines Interviews</a> aus ihm herausgequetscht.</p>
<p>Florian bringt das Thema &#8222;lokale Schriften&#8220; ins Spiel. Neben der altbekannten <code>local()</code>-Funktion gibt es neuerdings auch die <a href="https://wicg.github.io/local-font-access/">Local Font Access API</a>, <a href="https://twitter.com/tomayac/status/1270108781729497094?lang=de">mit der man auch schon in gewissen Browsern herumspielen kann</a>. Schepp meint, sich daran zu erinnern, dass Figma diese API schon nutzt &#8211; aber das stellt sich wohl <a href="https://forum.figma.com/t/implementing-the-local-font-access-api-support/14194">als Irrtum heraus</a>.</dd>
</dl>


Diese Revision war eigentlich mit Thema geplant, aber ein spontaner familiärer Notfall hat unser Programm kurzfristig geändert. Mit dem einen verbliebenen der drei geplanten Gäste, nämlich Florian Geierstanger (Web / Twitter), sind Hans und Schepp daher auf eine weitere Runde Glücksrad umgeschwenkt. Glücksrad [00:03:40] &#60;spacer&#62; Direkt als erstes schickt uns das Glücksrad auf eine Zeitreise [&#8230;]

Diese Revision war eigentlich mit Thema geplant, aber ein spontaner familiärer Notfall hat unser Programm kurzfristig geändert. Mit dem einen verbliebenen der drei geplanten Gäste, nämlich Florian Geierstanger (Web / Twitter), sind Hans und Schepp d[...]

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

[00:03:40] <spacer>
Direkt als erstes schickt uns das Glücksrad auf eine Zeitreise weit in die Vergangenheit, zu dem uns bislang unbekannten <spacer>-Element. Dieses Netscape-spezifische Element schien zu formalisieren, was Entwickler*innen damals mit dem sogenannten Spacer-GIF bewerkstelligt haben. Wie so oft, wenn etwas in die Browser eingebacken wird, gab es eine Extra-Fähigkeit obendrauf: So konnte man mit Hilfe des type-Attributs Abstände auch nur in einer Achse erzeugen, was bei Bildern so nicht ging. 2010 schrieb der damalige Mozilla-Entwickler Henri Sivonen anlässlich der Entfernung des dazugehörigen Codes aus Gecko auch etwas über das Element. Schepp denkt an den HTML Tags Memory Test und überlegt, ob es dort wohl akzeptiert wird (wird es nicht).
[00:12:35] <audio>
Als nächstes geht es wieder leicht zurück in die Zukunft, und um das im Rahmen von HTML5 eingeführte <audio>-Element. Hans erinnert sich, dass man es analog zu den <video>– und <picture>-Elementen mit alternativen Dateiformaten füttern kann und der Browser pickt sich das heraus, was er abspielen kann. 
Florian findet an dem Element doof, dass sich der Audioplayer beim Navigieren zu einer anderen Seite schließt. Schepp fällt zu dem Thema ein, dass es die Media Session API gibt, die u.a. dieses Problem ausräumen soll. Und Hans wiederum erinnert sich daran, wie er diese API im nie zum Einsatz gekommenen Working Draft Audio Player verwendet hat. Die Macher des Podcasts Wo wir sind ist vorne haben das Problem (für Navigationen innerhalb der Seite) mit turbolinks gelöst. 
Desweiteren kommen wir auf Audio-Transkription und mögliche Wege zur Darreichung selbiger zu sprechen.Zwar gibt es den WebVTT-Standard und die dazugehörigen, speziell formatierten .vtt-Dateien für Untertitel und Transkripte, aber leider kann sie das <audio>-Element nicht darstellen. Das macht in sofern Sinn, als dass die Abkürzung „WebVTT“ für „Web Video Text Tracks Format“ steht. Bleibt in so einem Fall also nur, auf ein <video>-Element umzuschwenken. Verrückterweise kann aber auch ein <audio>-Element Video abspielen!
Wir sprechen darüber, dass wir hier im Podcast keine Transskripte haben, was daran liegt, dass die uns bekannten maschinellen Tools große Probleme mit unseren Inhalten haben. Eine manuelle Transkription haben wir bislang nur einmal machen lassen. Die war zwar exzellent, doch stören wir uns an den Arbeitsbedingungen in der Branche (über die wir erst im Anschluss daran erfuhren). Florian bringt eine neue AI-basierte Lösung namens „Whisper“ ins Spiel, die sehr gut funktionieren soll und die wir uns als Hausaufgabe mitnehmen.
Hans fragt, welchen möglichst einfach gehaltenen Audioplayer wir empfehlen können, worauf uns eigentlich nur MediaElement.js einfällt.
Schepp weist auf ein Learning hin, das er vor einiger Zeit hatte, nämlich dass die HTMLMediaElement.play()-Methode im Standard und entsprechend auch in den Browsern 2016 nachträglich auf Promises umgestellt wurde.
Abschließend preisen wir die Tatsache, das man die Abspielgeschwindigkeit von Medien via JavaScript mit dem playbackRate-Attribut beeinflussen kann. Florian empfiehlt dafür ein Browser-Plugin namens „Video Speed Controller“, das dafür auf Seiten die etwas abspielen ein Interface einblendet.
[00:33:07] XMLHttpRequest.status
Gibt bei AJAX-Requests den HTTP-Antwortcode zurück. Ist der Request noch nicht durchgegangen, steht der Wert auf 0 (Null).
Das spannendste an der XMLHttpRequest-API ist seine Entstehungsgeschichte: Das damalige Outlook Web Access Team (was Gmail, nur eben 10 Jahre frü[...]

Revision 544: Ungeplant gastliches Glücksrad (IV)

<p>Endlich spielen wir wieder Glücksrad! Der aus unserer <a href="https://workingdraft.de/426/">&#8222;Mit Gast&#8220;-Premiere</a> bekannte <strong>Stefan Judis</strong> (<a href="https://twitter.com/@stefanjudis">Twitter</a>, <a href="https://www.stefanjudis.com/">Web</a>), mittlerweile DevRel bei <a href="https://www.checklyhq.com/">Checkly</a> und Autor des <a href="https://webweekly.email/">Web Weekly Newsletters</a>, <a href="https://twitter.com/stefanjudis/status/1572254855414288385">setzte sich zusammen mit Schepp</a> an unser neues <a href="https://www.npmjs.com/package/@mdn/browser-compat-data">MDN</a>-gespeistes und Svelte + WebSockets gepowerte <a href="https://workingdraft.de/gluecksrad/">Webtechnologie Glücksrad</a>. Folgendes sprang dabei heraus:</p>
<h3>[00:01:00] Glücksrad</h3>
<dl>
<dt>[00:03:28] <a href="https://developer.mozilla.org/docs/Web/HTML/Global_attributes/spellcheck">HTML | global_attributes | <code>spellcheck</code></a></dt>
<dd>Ein boolsches Attribut, mit dem sich eine Rechtschreibprüfung auf editierbaren Elementen aktivieren oder deaktivieren lässt. Entdeckte Rechtschreibfehler lassen sich per <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::spelling-error"><code>::spelling-error</code></a>-Pseudoelement herausgreifen und mit &#8222;Squiggly Lines&#8220; aka <code>text-decoration: wavy red;</code> markieren. Grammatikfehler wiederum kriegt man mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::grammar-error"><code>::grammar-error</code></a> zu fassen. Was insofern nicht stimmt, als dass der Browser-Support für diese Pseudo-Elemente non-existent ist <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f62c.png" alt="😬" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
Ach so, und für eine brauchbare Rechtschreibhilfe dürft Ihr nicht vergessen, das korrekte <code>lang</code>-Attribut auf dem Root-Element zu setzen!</dd>
<dt>[00:09:20] <a href="https://developer.mozilla.org/docs/Web/API/HTMLElement/outerText">API | HTMLElement | <code>.outerText</code></a></dt>
<dd>Der <code>.outerText</code>-Getter und -Setter unterscheidet sich beim Lesen genau gar nicht von <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText"><code>.innerText</code></a>. Erst beim Schreiben unterscheidet sich sein Verhalten. Dann nämlich wird das betroffene HTML-Element inklusive seinem enthaltenen Text durch den zugewiesenen Text ersetzt. Der Text steht also im Anschluss im Elternelement des eben noch angesteuerten Elements &#8211; an dessen bisheriger Position im DOM.<br />
Wir sprechen kurz den Fakt an, dass eine Leseoperation per <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText"><code>.innerText</code></a> im Gegensatz zu <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent"><code>.textContent</code></a> zu Reflows führt, weil der Browser nur denjenigen Text ausgeben soll, der auch tatsächlich sichtbar ist &#8211; was er nur durch ein kurzfristig anberaumtes Neurendern herausfinden kann.</dd>
<dt>[00:16:18] <a href="https://developer.mozilla.org/docs/Web/CSS/text-overflow">CSS | properties | <code>text-overflow</code></a></dt>
<dd>Pah, einfach! Zu <code>text-overflow</code> können wir schnell alles Wissenswerte zusammentragen: Sie dient dem Auspunkten von überschüssigem Text. Dazu setzt Ihr die Property im Grunde immer auf <code>ellipsis</code>, und funktionieren tut das nur, wenn Ihr gleichzeitig auch <code>overflow: hidden</code> und <code>white-space: nowrap</code> setzt. Aber was ist eigentlich der initialer Wert? Na <code>clip</code>! Das bringt uns kurz auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip"><code>overflow: clip</code></a>. Außerdem lernen wir, dass <code>text-overflow</code> ähnlich wie <code>content</code> beliebige Strings unterstützt und auch das <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#fade"><code>fade</code></a>-Keyword oder eine <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#fade_length_percentage_"><code>fade()</code>-Funktion</a> für weiches Ausblenden. Zu guter Letzt lassen sich sogar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#two-value_syntax">zwei Werte setzen</a>: Einer für das gewünschte Auspunkten zu Text-Beginn und eines zu Text-Ende. Leider ist der Browser-Support auch hier unterirdisch <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f62d.png" alt="😭" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt>[00:24:21] <a href="https://developer.mozilla.org/docs/Web/CSS/:read-only">CSS | selectors | <code>:read-only</code></a></dt>
<dd>Mit der <code>:read-only</code>-Pseudoklasse könnt Ihr Eingabeelemente herausgreifen und stylen, die auf einem reinen Lesemodus stehen. Bei Inputs bewerkstelligt Ihr das mit einem gesetzten <code>readonly</code>-Attribut. So weit, so klar. Aber wusstet Ihr, dass <code>:read-only</code> jedes HTML-Element mit Ausnahme von <code>input</code>, <code>textarea</code> und <code>contenteditable</code> erfasst, weil die ja alle &#8222;Read only&#8220; sind? <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f92f.png" alt="🤯" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
Umgekehrt könnt Ihr alle <code>input</code>, <code>textarea</code> und <code>contenteditable</code>, auf denen kein <code>readonly</code>-Attribut gesetzt ist mit der Pseudoklasse <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write"><code>:read-write</code></a> ansteuern.</dd>
<dt>[00:33:37] <a href="https://developer.mozilla.org/docs/Web/HTML/Element/marquee">HTML | elements | <code>&lt;marquee&gt;</code></a></dt>
<dd>Wir erinnern uns, dass <code>&lt;marquee&gt;</code> eines dieser Elemente aus grauer Vorzeit sind, als es weder CSS noch Flash oder Java Applets gab, um Texte zu animieren. Meist wurde es für Nachrichten-Ticker eingesetzt. Was wir nicht auf dem Schirm hatten war, wie viele <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee#attributes">Attribute</a> (oder Neudeutsch: &#8222;props&#8220;) bereitstehen, um Art der Animation, Richtung, Bouncen, Loopen, Scrolldistanz oder Scrollschritte festzulegen. Es stehen zudem die <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee#methods">Methoden <code>.stop()</code> und <code>.start()</code></a> bereit, um die Animation anzuhalten und wieder zu starten. Rund wird die Sache durch die drei <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee#event_handlers">Events <code>start</code>, <code>bounce</code> und <code>finish</code></a>.</dd>
<dt>[00:38:59] <a href="https://developer.mozilla.org/docs/Web/CSS/time-percentage">CSS | types | <code>&lt;time-percentage&gt;</code></a></dt>
<dd>Bei <code>&lt;time-percentage&gt;</code> handelt es sich um eine alternative Spezifikations-Notation von <code>[ &lt;time&gt; | &lt;percentage&gt; ]</code>: Dass sich als Wert wahlweise ein <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/231a.png" alt="⌚" class="wp-smiley" style="height: 1em; max-height: 1em;" />Zeit- oder ein Prozentwert angegeben werden kann. Allerdings nur dann, wenn sich der Prozentwert eindeutig in einen Zeitwert umwandeln lässt, so wie sich Prozentwerte bei Höhen- und Breitenangaben auch in Längen umwandeln lassen. Damit wissen wir schonmal mehr als in unserem <a href="https://workingdraft.de/509/">zweiten Glücksrad mit Gast</a> im Dezember, wo das auch schon einmal aufkam. Die wichtigste Frage können wir aber weiterhin nicht beantworten: Wo in CSS ist es möglich, einen Zeitwert in Prozent auszudrücken? MDN weiß es leider auch nicht. <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f914.png" alt="🤔" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Wisst Ihr es? <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f440.png" alt="👀" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt>[00:44:36] <a href="https://developer.mozilla.org/docs/Web/HTML/Global_attributes/class">HTML | global_attributes | <code>class</code></a></dt>
<dd>Naja, naja, hier gibt es nicht viel zu sagen. Stefan und Schepp sprechen ein wenig über Wege, HTML mit CSS zu verdrahten: Die einen mögen lieber <a href="https://getbem.com/">BEM</a>, die anderen setzen auf <a href="https://tailwindcss.com/">Utility-Klassen</a>, und Dritte wie Harry Roberts <a href="https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/">mischen beides munter</a>. Schepp mag es zudem, so viel wie möglich mit HTML-Attributen à la <code>aria-hidden</code> / <code>hidden</code>, <code>aria-current</code> &amp; Co zu arbeiten, weil man Accessibility obendrauf bekommt. Beide freuen sich sehr auf all die neuen Möglichkeiten, mit dem <a href="https://webkit.org/blog/13096/css-has-pseudo-class/"><code>:has()</code>-Selektor</a> CSS zu strukturieren <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f929.png" alt="🤩" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt>[00:58:25] <a href="https://developer.mozilla.org/docs/Web/CSS/::-moz-color-swatch">CSS | selectors | <code>::-moz-color-swatch</code></a></dt>
<dd>Das Pseudo-Element <a href="https://developer.mozilla.org/docs/Web/CSS/::-moz-color-swatch"><code>::-moz-color-swatch</code></a> stellt in Firefox beim Farb-Input den Bereich dar, in dem die aktuell gewählte Farbe angezeigt wird. In Safari und Chromium gibt es analog dazu das Pseudo-Element <code>::-webkit-color-swatch</code>. In dem Zusammenhang kommen wir auf das <a href="https://open-ui.org/">Open UI Projekt</a> zu sprechen, das sich zum Ziel gesetzt hat, all diese Browser-Sonderlocken zu vereinheitlichen und gestaltbar zu machen. Stefan weist außerdem darauf hin, dass Ihr bei Input-Elementen mit Pickern ebendiesen neuerdings per <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker"><code>.showPicker()</code></a> sich programmatisch öffnen lassen könnt.</dd>
</dl>


Endlich spielen wir wieder Glücksrad! Der aus unserer &#8222;Mit Gast&#8220;-Premiere bekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor des Web Weekly Newsletters, setzte sich zusammen mit Schepp an unser neues MDN-gespeistes und Svelte + WebSockets gepowerte Webtechnologie Glücksrad. Folgendes sprang dabei heraus: [00:01:00] Glücksrad [00:03:28] HTML &#124; global_attributes &#124; spellcheck Ein boolsches [&#8230;]

Endlich spielen wir wieder Glücksrad! Der aus unserer „Mit Gast“-Premiere bekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor des Web Weekly Newsletters, setzte sich zusammen mit Schepp an unser neues MDN-gesp[...]

Endlich spielen wir wieder Glücksrad! Der aus unserer „Mit Gast“-Premiere bekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor des Web Weekly Newsletters, setzte sich zusammen mit Schepp an unser neues MDN-gespeistes und Svelte + WebSockets gepowerte Webtechnologie Glücksrad. Folgendes sprang dabei heraus:
[00:01:00] Glücksrad

[00:03:28] HTML | global_attributes | spellcheck
Ein boolsches Attribut, mit dem sich eine Rechtschreibprüfung auf editierbaren Elementen aktivieren oder deaktivieren lässt. Entdeckte Rechtschreibfehler lassen sich per ::spelling-error-Pseudoelement herausgreifen und mit „Squiggly Lines“ aka text-decoration: wavy red; markieren. Grammatikfehler wiederum kriegt man mit ::grammar-error zu fassen. Was insofern nicht stimmt, als dass der Browser-Support für diese Pseudo-Elemente non-existent ist 
Ach so, und für eine brauchbare Rechtschreibhilfe dürft Ihr nicht vergessen, das korrekte lang-Attribut auf dem Root-Element zu setzen!
[00:09:20] API | HTMLElement | .outerText
Der .outerText-Getter und -Setter unterscheidet sich beim Lesen genau gar nicht von .innerText. Erst beim Schreiben unterscheidet sich sein Verhalten. Dann nämlich wird das betroffene HTML-Element inklusive seinem enthaltenen Text durch den zugewiesenen Text ersetzt. Der Text steht also im Anschluss im Elternelement des eben noch angesteuerten Elements – an dessen bisheriger Position im DOM.
Wir sprechen kurz den Fakt an, dass eine Leseoperation per .innerText im Gegensatz zu .textContent zu Reflows führt, weil der Browser nur denjenigen Text ausgeben soll, der auch tatsächlich sichtbar ist – was er nur durch ein kurzfristig anberaumtes Neurendern herausfinden kann.
[00:16:18] CSS | properties | text-overflow
Pah, einfach! Zu text-overflow können wir schnell alles Wissenswerte zusammentragen: Sie dient dem Auspunkten von überschüssigem Text. Dazu setzt Ihr die Property im Grunde immer auf ellipsis, und funktionieren tut das nur, wenn Ihr gleichzeitig auch overflow: hidden und white-space: nowrap setzt. Aber was ist eigentlich der initialer Wert? Na clip! Das bringt uns kurz auf overflow: clip. Außerdem lernen wir, dass text-overflow ähnlich wie content beliebige Strings unterstützt und auch das fade-Keyword oder eine fade()-Funktion für weiches Ausblenden. Zu guter Letzt lassen sich sogar zwei Werte setzen: Einer für das gewünschte Auspunkten zu Text-Beginn und eines zu Text-Ende. Leider ist der Browser-Support auch hier unterirdisch 
[00:24:21] CSS | selectors | :read-only
Mit der :read-only-Pseudoklasse könnt Ihr Eingabeelemente herausgreifen und stylen, die auf einem reinen Lesemodus stehen. Bei Inputs bewerkstelligt Ihr das mit einem gesetzten readonly-Attribut. So weit, so klar. Aber wusstet Ihr, dass :read-only jedes HTML-Element mit Ausnahme von input, textarea und contenteditable erfasst, weil die ja alle „Read only“ sind? 
Umgekehrt könnt Ihr alle input, textarea und contenteditable, auf denen kein readonly-Attribut gesetzt ist mit der Pseudoklasse :read-write ansteuern.
[00:33:37] HTML | elements | <marquee>
Wir erinnern uns, dass <marquee> eines dieser Elemente aus grauer Vorzeit sind, als es weder CSS noch Flash oder Java Applets gab, um Texte zu animieren. Meist wurde es für Nachrichten-Ticker eingesetzt. Was wir nicht auf dem Schirm hatten war, wie viele Attribute (oder Neudeutsch: „props“) bereitstehen, um Art der Animation, Richtung, Bouncen, Loopen, Scrolldistanz oder Scrollschritte festzulegen. Es stehen zudem die Methoden .stop() und .start() bereit, um die Animation anzuhalten und wieder zu starten. Rund wird die Sache durch die drei Events start, bounce und finish.
[00:38:59] CSS | types | <time-percentage>
Bei <time-percentage> handelt es sich um eine alternative Spezifikations-Notation von [ <time> | <percentage> ]: [...]

Revision 542: Gastliches Glücksrad III

<p>Anlässlich der Veröffentlichung Ihres <a href="https://rust-buch.de/">neuen Buchs über die Sprache Rust</a>, luden wir zwei der Autoren, nämlich Marco Amann (<a href="https://mobile.twitter.com/amann_dev">Twitter</a>) und Marcel Koch (<a href="https://mobile.twitter.com/_mknet_">Twitter</a>), sowie den hausinternen Rust-Experten Stefan zu uns in den Podcast ein, um über die Raison d&#8217;Être dieser Programmiersprache zu sprechen.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://demodern.de/jobs?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/09/banner_demodern.jpg" alt="" /></a></p>
<div class="message_content">
<p>Wir sind Demodern – wir sehen uns als Agentur einer neuen Generation: offen, unkompliziert, 100% digital. Gegründet von Designern, liegt unsere Leidenschaft in innovativen, digitalen Inszenierungen und einer sinnvollen User Experience. Wir entwickeln unsere Projekte gemeinsam mit Spezialisten aus Strategie, Design, UX und Development. &#8222;Let&#8217;s push things forward&#8220; ist unser Leitsatz und Philosophie. Darin steckt unsere eigene Veränderung, aber auch, Projekte neu zu betrachten und zu rechtem Mehrwert zu bringen.</p>
<p>Ihr könnt gerne Kontakt zu <a href="https://www.linkedin.com/in/florian-herlings/">Florian</a> oder <a href="https://linkedin.com/in/marisa-ingwersen-9753a9a4">Marisa</a> direkt aufnehmen &#8211; oder ihr schaut auf <a href="https://demodern.de/jobs?ref=workingdraft.de">demodern.de/jobs</a> vorbei.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:46] <a href="https://www.rust-lang.org/">Rust</a></dt>
<dd>Zur Einführung in Rust klären wir die wichtigste Frage zuerst, nämlich inwiefern Entwickler*innen wie unsere Hörerschaft sich Rust zunutze machen können. Danach erklären wir, inwiefern sich Rust von anderen Sprachen unterscheidet und inwiefern das von Vorteil ist. Spoiler: Es ist sein semiautomatisches Speichermanagement dank <a href="https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html">Ownership-System</a> und <a href="https://doc.rust-lang.org/book/ch04-02-references-and-borrowing.html">Borrow Checker</a>. Anschließend beschäftigen wir uns mit möglichen Anwendungen der Sprache und namedroppen Tools und Frameworks aus dem Rust-Universum als wenn es kein Morgen gäbe:</p>
<ul>
<li>Die <a href="https://foundation.rust-lang.org/">Rust Foundation</a></li>
<li><a href="https://doc.rust-lang.org/cargo/getting-started/installation.html">Cargo</a> und <a href="https://crates.io/">crates.io</a> &#8211; das npm von Rust</li>
<li><a href="https://doc.rust-lang.org/cargo/reference/manifest.html">Cargo.toml</a> &#8211; die package.json von Rust</li>
<li><a href="https://rustup.rs/">rustup</a> &#8211; das nvm von Rust</li>
<li><a href="https://github.com/rustwasm/wasm-pack">wasm-pack</a> &#8211; das WebPack von Rust</li>
<li><a href="https://github.com/bytecodealliance/wasmtime">Wasmtime</a> &#8211; CLI Tools in Rust bauen</li>
<li><a href="https://neon-bindings.com/">neon</a> &#8211; Rust in Node.js nutzen</li>
<li><a href="https://github.com/astonbitecode/j4rs">j4rs</a>, aka &#8222;Java in Rust&#8220; &#8211; Rust in Java nutzen und umgekehrt</li>
<li><a href="https://github.com/Dushistov/flapigen-rs">flapigen</a> &#8211; Tool, um Rust mit beliebigen anderen Sprachen zu verknüpfen</li>
<li><a href="https://actix.rs/">Actix</a> &#8211; ein Webserver-Framework für Rust</li>
<li><a href="https://rocket.rs/">rocket.rs</a> &#8211; ein besonders einsteigerfreundliches Webserver-Framework für Rust</li>
<li><a href="https://github.com/tokio-rs/axum">axum</a> &#8211; ein weiteres Webserver-Framework für Rust, das auf der Tokio-Runtime basiert (siehe nächstes)</li>
<li><a href="https://tokio.rs/">Tokio Runtime</a> &#8211; Framework, um in Rust asynchronen Code zu schreiben</li>
<li><a href="https://diesel.rs/">Diesel</a> &#8211; ein ORM und Query-Builder für Rust</li>
<li><a href="https://serde.rs/">Serde</a> &#8211; Framework zum Serialisieren und Deserialisieren von &#8222;Structs&#8220; (aka komplexen Datenstrukturen)</li>
<li><a href="https://www.rust-lang.org/learn">Learn Rust</a> &#8211; die offizielle Doku</li>
</ul>
<p>Abschließend wollen wir natürlich auch ein <a href="https://rust-buch.de/">Buch</a> unserer Gäste verlosen. Alle Retweeter*innen <a href="https://twitter.com/workingdraft">unseres Ankündigungstweets</a> ebendieser Folge kommen automatisch in den Lostopf!</dd>
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://rust-buch.de/">Das Rust-Buch unserer Gäste</a></dt>
<dd>Konzepte und Praxis für die sichere Anwendungsentwicklung, gedruckt und/oder digital</dd>
<dt><a href="https://rust-linz.at/">Rust Meetup Linz</a></dt>
<dd>Das Rust-Meetup aus Stefans Heimatstadt, auch remote verfügbar per <a href="https://www.youtube.com/watch?v=_08se-gnzh8">Video-Stream</a></dd>
<dt><a href="https://newrustacean.com/">New Rustacean</a></dt>
<dd>Ein Podcast zum Lernen von Rust</dd>
<dt><a href="https://rustacean-station.org/">Rustacean Station</a></dt>
<dd>Ein Community-betriebener Podcast rund um das Thema Rust</dd>
</dl>


Anlässlich der Veröffentlichung Ihres neuen Buchs über die Sprache Rust, luden wir zwei der Autoren, nämlich Marco Amann (Twitter) und Marcel Koch (Twitter), sowie den hausinternen Rust-Experten Stefan zu uns in den Podcast ein, um über die Raison d&#8217;Être dieser Programmiersprache zu sprechen. Unser Sponsor Wir sind Demodern – wir sehen uns als Agentur einer [&#8230;]

Anlässlich der Veröffentlichung Ihres neuen Buchs über die Sprache Rust, luden wir zwei der Autoren, nämlich Marco Amann (Twitter) und Marcel Koch (Twitter), sowie den hausinternen Rust-Experten Stefan zu uns in den Podcast ein, um über die Raison d[...]

Anlässlich der Veröffentlichung Ihres neuen Buchs über die Sprache Rust, luden wir zwei der Autoren, nämlich Marco Amann (Twitter) und Marcel Koch (Twitter), sowie den hausinternen Rust-Experten Stefan zu uns in den Podcast ein, um über die Raison d’Être dieser Programmiersprache zu sprechen.

Unser Sponsor


Wir sind Demodern – wir sehen uns als Agentur einer neuen Generation: offen, unkompliziert, 100% digital. Gegründet von Designern, liegt unsere Leidenschaft in innovativen, digitalen Inszenierungen und einer sinnvollen User Experience. Wir entwickeln unsere Projekte gemeinsam mit Spezialisten aus Strategie, Design, UX und Development. „Let’s push things forward“ ist unser Leitsatz und Philosophie. Darin steckt unsere eigene Veränderung, aber auch, Projekte neu zu betrachten und zu rechtem Mehrwert zu bringen.
Ihr könnt gerne Kontakt zu Florian oder Marisa direkt aufnehmen – oder ihr schaut auf demodern.de/jobs vorbei.


Schaunotizen

[00:01:46] Rust
Zur Einführung in Rust klären wir die wichtigste Frage zuerst, nämlich inwiefern Entwickler*innen wie unsere Hörerschaft sich Rust zunutze machen können. Danach erklären wir, inwiefern sich Rust von anderen Sprachen unterscheidet und inwiefern das von Vorteil ist. Spoiler: Es ist sein semiautomatisches Speichermanagement dank Ownership-System und Borrow Checker. Anschließend beschäftigen wir uns mit möglichen Anwendungen der Sprache und namedroppen Tools und Frameworks aus dem Rust-Universum als wenn es kein Morgen gäbe:

Die Rust Foundation
Cargo und crates.io – das npm von Rust
Cargo.toml – die package.json von Rust
rustup – das nvm von Rust
wasm-pack – das WebPack von Rust
Wasmtime – CLI Tools in Rust bauen
neon – Rust in Node.js nutzen
j4rs, aka „Java in Rust“ – Rust in Java nutzen und umgekehrt
flapigen – Tool, um Rust mit beliebigen anderen Sprachen zu verknüpfen
Actix – ein Webserver-Framework für Rust
rocket.rs – ein besonders einsteigerfreundliches Webserver-Framework für Rust
axum – ein weiteres Webserver-Framework für Rust, das auf der Tokio-Runtime basiert (siehe nächstes)
Tokio Runtime – Framework, um in Rust asynchronen Code zu schreiben
Diesel – ein ORM und Query-Builder für Rust
Serde – Framework zum Serialisieren und Deserialisieren von „Structs“ (aka komplexen Datenstrukturen)
Learn Rust – die offizielle Doku

Abschließend wollen wir natürlich auch ein Buch unserer Gäste verlosen. Alle Retweeter*innen unseres Ankündigungstweets ebendieser Folge kommen automatisch in den Lostopf!

[00:00:00] Keine Schaunotizen

Das Rust-Buch unserer Gäste
Konzepte und Praxis für die sichere Anwendungsentwicklung, gedruckt und/oder digital
Rust Meetup Linz
Das Rust-Meetup aus Stefans Heimatstadt, auch remote verfügbar per Video-Stream
New Rustacean
Ein Podcast zum Lernen von Rust
Rustacean Station
Ein Community-betriebener Podcast rund um das Thema Rust

Revision 541: Warum Rust?

<p>Für diese Revision haben Hans und Schepp Accessibility-Guru Eric Eggert (<a href="https://yatil.de/">Web</a> / <a href="https://twitter.com/yatil">Twitter</a> / <a href="https://www.youtube.com/yatil">YouTube</a>) eingeladen, um über aktuelle und zukünftige Barrierefreiheitsstandards zu sprechen. Eric ist seit langen Jahren Mitbesitzer einer kleinen Agentur namens <a href="https://outline.rocks/">outline</a> und hat als Freelancer einige Projekte, wie etwa die <a href="https://www.w3.org/WAI/tutorials/">WAI-ARIA Tutorials</a> und <a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG</a> für das W3C umgesetzt und zusammen mit dem <a href="https://www.aktion-mensch.de/">Aktion Mensch e.V.</a> an einer <a href="https://outline-rocks.github.io/wcag/translations/CAT-WCAG21-DE-20211004/">Deutschen Übersetzung der WCAG 2.1</a> gearbeitet.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="http://languagetool.com/workingdraft"><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/08/logo_claim-color.png" alt="" /></a></p>
<div class="message_content">
<p>Diese Revision wird von LanguageTool unterstützt. LanguageTool ist ein intelligenter Schreibassistent für alle gängigen Browser und Textverarbeitungsprogramme.<br />
LanguageTool findet mehr Fehler als vergleichbare Rechtschreibkorrekturen und bereichert jeden Text zusätzlich durch hilfreiche Grammatik- und Stilvorschläge für mehr als zwanzig Sprachen. Dank des akribischen Modus kannst du deinen Text perfektionieren und mithilfe des Styleguides können benutzerdefinierte Regeln erstellt werden. Die Premiumversion bietet eine umfassendere Prüfung von z. B. Groß- und Kleinschreibung, vertiefter Kommasetzung oder mehr als 100 Vorschläge zum Textstil.<br />
Wenn du auch Support beim Schreiben gebrauchen kannst, schau gerne auf <a href="http://languagetool.com/workingdraft">languagetool.com/workingdraft</a> vorbei – über den Button auf der Seite bekommt ihr jetzt 20 % Rabatt auf Premium.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:37] <a href="https://www.w3.org/WAI/standards-guidelines/">Die W3C Accessibility Standards</a></dt>
<dd>Die W3C Accessibility Standards werden von der <a href="https://www.w3.org/WAI/">Web Accessibility Initiative</a> gemacht und gliedern sich im Wesentlichen in drei Bereiche auf:</p>
<ul>
<li>Die Web Content Accessibility Guidelines (WCAG), die in einer ersten Version im Jahr 1999 erschienen sind und die 2008 von Version 2.0 abgelöst wurden, auf der auch die Deutsche Standards Barrierefreie-Informationstechnik-Verordnung (BITV) und die 2016 verabschiedete, stattdessen greifende <a href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">Web Accessibility Directive (Directive (EU) 2016/2102)</a> basieren.</li>
<li>Die <a href="https://www.w3.org/WAI/standards-guidelines/atag/">Authoring Tool Accessibility Guidelines</a> (ATAG) in Version 1.0 und 2.0, die leider wenig Traktion haben</li>
<li>Die <a href="https://www.w3.org/WAI/standards-guidelines/aria/">Accessible Rich Internet Applications</a> (WAI-ARIA), die in Version 1.0 (2014) und in Version 1.1 (2017) veröffentlicht wurden, mit einem anstehenden <a href="https://www.w3.org/TR/wai-aria-1.2/">Release 1.2</a>, sowie&#8230;</li>
<li>Aktuell noch Zukunftsmusik, die <a href="https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/">W3C Accessibility Guidelines (WCAG 3.0)</a>, mit der das W3C nicht mehr nur die Barrierefreiheit von Web Inhalten normieren möchte.</li>
</ul>
<p>Wir reden mit Eric im Wesentlichen über die Rolle der WCAG, über ihre Evolution und wo sie eine Rolle spielt. So wird der <a href="https://www.bundesfachstelle-barrierefreiheit.de/DE/Fachwissen/Produkte-und-Dienstleistungen/European-Accessibility-Act/european-accessibility-act_node.html">European Accessibility Act</a> spätestens ab 2025 jede an Endkonsumenten gerichtete Webseite dazu verpflichten, barrierefrei nach WCAG zu sein. Damit wird in der EU Stück für Stück die <a href="https://www.behindertenrechtskonvention.info/">UN-Behindertenrechtskonvention</a> aus 2008 in lokale Gesetzgebung überführt. Wir sprechen über ihre Zielrichtung, darüber wie sie funktioniert und schließlich auch darüber, wie man prüft, ob man ihre Kriterien erfüllt.<br />
Da sehr wahrscheinlich im Dezember <a href="https://www.w3.org/TR/WCAG22/">Version 2.2 der WCAG</a> veröffentlicht werden wird, sprechen wir natürlich auch über die Neuerungen, die dieses Minor Release bringen wird. Das sind im Wesentlichen:</p>
<ul>
<li>Klarere Vorgaben zur Kennzeichnung des aktuell fokussierten Elements auf der Seite</li>
<li>Neue Vorgaben für eine barrierefreie Authentifizierung</li>
<li>Vorgaben zur Größe von Elementen bei einer Bedienung per Touch</li>
</ul>
<p>Zu guter Letzt sprechen wir auch über den zukünftigen Standard <a href="https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/">WCAG 3.0</a> (Projekt &#8222;Silver&#8220; vom lateinischen Argentum (AG), das wiederum eine Anspielung auf &#8222;Accessibility Guidelines&#8220; ist). Bei diesem möchte das W3C gänzlich neue Wege gehen. Die Fertigstellung ist für 2026 angepeilt.</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="#">W3Cs Digital Accessibility Foundations Free Online Course</a></dt>
<dd>Ein kostenloser Online-Kurs für Programmierer und Nicht-Programmierer gleichermaßen, der erklärt, was Barrierefreiheit eigentlich ausmacht.</dd>
<dt><a href="https://www.w3.org/WAI/people-use-web/">How People with Disabilities Use the Web</a></dt>
<dd>Wie benutzen gehandicapte Menschen eigentlich das Web?</dd>
<dt><a href="https://www.w3.org/WAI/fundamentals/">Accessibility Fundamentals</a></dt>
<dd>Eure Starthilfe in Sachen barrierefreies Web</dd>
<dt><a href="https://www.w3.org/WAI/WCAG22/Understanding/">Understanding WCAG 2.2</a></dt>
<dd>So funktioniert die WCAG</dd>
<dt><a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG</a></dt>
<dd>A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques.</dd>
</dl>


Für diese Revision haben Hans und Schepp Accessibility-Guru Eric Eggert (Web / Twitter / YouTube) eingeladen, um über aktuelle und zukünftige Barrierefreiheitsstandards zu sprechen. Eric ist seit langen Jahren Mitbesitzer einer kleinen Agentur namens outline und hat als Freelancer einige Projekte, wie etwa die WAI-ARIA Tutorials und How to Meet WCAG für das W3C umgesetzt [&#8230;]

Für diese Revision haben Hans und Schepp Accessibility-Guru Eric Eggert (Web / Twitter / YouTube) eingeladen, um über aktuelle und zukünftige Barrierefreiheitsstandards zu sprechen. Eric ist seit langen Jahren Mitbesitzer einer kleinen Agentur namen[...]

Für diese Revision haben Hans und Schepp Accessibility-Guru Eric Eggert (Web / Twitter / YouTube) eingeladen, um über aktuelle und zukünftige Barrierefreiheitsstandards zu sprechen. Eric ist seit langen Jahren Mitbesitzer einer kleinen Agentur namens outline und hat als Freelancer einige Projekte, wie etwa die WAI-ARIA Tutorials und How to Meet WCAG für das W3C umgesetzt und zusammen mit dem Aktion Mensch e.V. an einer Deutschen Übersetzung der WCAG 2.1 gearbeitet.

Unser Sponsor


Diese Revision wird von LanguageTool unterstützt. LanguageTool ist ein intelligenter Schreibassistent für alle gängigen Browser und Textverarbeitungsprogramme.
LanguageTool findet mehr Fehler als vergleichbare Rechtschreibkorrekturen und bereichert jeden Text zusätzlich durch hilfreiche Grammatik- und Stilvorschläge für mehr als zwanzig Sprachen. Dank des akribischen Modus kannst du deinen Text perfektionieren und mithilfe des Styleguides können benutzerdefinierte Regeln erstellt werden. Die Premiumversion bietet eine umfassendere Prüfung von z. B. Groß- und Kleinschreibung, vertiefter Kommasetzung oder mehr als 100 Vorschläge zum Textstil.
Wenn du auch Support beim Schreiben gebrauchen kannst, schau gerne auf languagetool.com/workingdraft vorbei – über den Button auf der Seite bekommt ihr jetzt 20 % Rabatt auf Premium.


Schaunotizen

[00:01:37] Die W3C Accessibility Standards
Die W3C Accessibility Standards werden von der Web Accessibility Initiative gemacht und gliedern sich im Wesentlichen in drei Bereiche auf:

Die Web Content Accessibility Guidelines (WCAG), die in einer ersten Version im Jahr 1999 erschienen sind und die 2008 von Version 2.0 abgelöst wurden, auf der auch die Deutsche Standards Barrierefreie-Informationstechnik-Verordnung (BITV) und die 2016 verabschiedete, stattdessen greifende Web Accessibility Directive (Directive (EU) 2016/2102) basieren.
Die Authoring Tool Accessibility Guidelines (ATAG) in Version 1.0 und 2.0, die leider wenig Traktion haben
Die Accessible Rich Internet Applications (WAI-ARIA), die in Version 1.0 (2014) und in Version 1.1 (2017) veröffentlicht wurden, mit einem anstehenden Release 1.2, sowie…
Aktuell noch Zukunftsmusik, die W3C Accessibility Guidelines (WCAG 3.0), mit der das W3C nicht mehr nur die Barrierefreiheit von Web Inhalten normieren möchte.

Wir reden mit Eric im Wesentlichen über die Rolle der WCAG, über ihre Evolution und wo sie eine Rolle spielt. So wird der European Accessibility Act spätestens ab 2025 jede an Endkonsumenten gerichtete Webseite dazu verpflichten, barrierefrei nach WCAG zu sein. Damit wird in der EU Stück für Stück die UN-Behindertenrechtskonvention aus 2008 in lokale Gesetzgebung überführt. Wir sprechen über ihre Zielrichtung, darüber wie sie funktioniert und schließlich auch darüber, wie man prüft, ob man ihre Kriterien erfüllt.
Da sehr wahrscheinlich im Dezember Version 2.2 der WCAG veröffentlicht werden wird, sprechen wir natürlich auch über die Neuerungen, die dieses Minor Release bringen wird. Das sind im Wesentlichen:

Klarere Vorgaben zur Kennzeichnung des aktuell fokussierten Elements auf der Seite
Neue Vorgaben für eine barrierefreie Authentifizierung
Vorgaben zur Größe von Elementen bei einer Bedienung per Touch

Zu guter Letzt sprechen wir auch über den zukünftigen Standard WCAG 3.0 (Projekt „Silver“ vom lateinischen Argentum (AG), das wiederum eine Anspielung auf „Accessibility Guidelines“ ist). Bei diesem möchte das W3C gänzlich neue Wege gehen. Die Fertigstellung ist für 2026 angepeilt.

Links

W3Cs Digital Accessibility Foundations Free Online Course
Ein kostenloser Online-Kurs für Programmierer und Nicht-Programmierer gleichermaßen, der erklärt, was Barrierefreiheit eigentlich ausmacht.
How People with Disabilities Use the Web
Wie benutzen gehandicapte Menschen eigentlich das Web?
Accessibility Fundamentals
Eure Starthilfe in Sachen barrierefreies Web
Understanding WCAG 2.2
So funktioniert die WCAG
How to Meet WCAG
A customi[...]

Revision 540: Die W3C Accessibility Standards

<p>Diesmal haben wir es uns zu zweit lauschig gemacht. Vanessa schlüpfte in die Rolle unserer Gästin und hatte als Thema &#8222;Komponentenbibliotheken&#8220; im allgemeinen und Storybook und Histoire im Speziellen im Gepäck.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://conf.vuejs.de/?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/09/Working-draft-1.png" alt="" /></a></p>
<div class="message_content">
<p>Die <a href="https://conf.vuejs.de/?ref=workingdraft.de">vuejs.de Conf</a> ist die erste durch die vuejs.de Community organisierte VueJS Konferenz in Deutschland. Sie findet am 05. Oktober statt in Herzen Berlins statt und lockt nicht nur die deutschsprachige VueJS Community, sondern auch zahlreiche Gäste aus aller Welt an. Es erwarten dich 12 Talks von internationalen Vue Expert:innen, ein direkter Kontakt zur Vue Community in einem historischen Ambiente, toller kulinarischer Verpflegung.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Komponentenbibliotheken &#8211; Why? How? What?</dt>
<dd>Vanessa und Schepp starten mit einer Definition des Begriffs &#8222;<a href="https://www.componentdriven.org/">Komponenten</a>&#8220; und &#8222;Komponentenbibliothek&#8220; und arbeiten sich sodann zum ersten und prominentesten Vertreter dieser Gattung vor: <a href="https://storybook.js.org/">Storybook</a>. Angetreten ist Storybook 2016 als sehr fokussiertes Werkzeug, das im Laufe der Zeit immer mehr zur eierlegenden Wollmilchsau hochgezüchtet wurde. Dies ging aus Vanessas Sicht leider nicht ohne Rückschritte im Handling einher. Speziell als mit Version 5 die &#8222;Knobs&#8220; kamen trug es sie, und wohl auch einige andere Benutzer*innen, aus der Kurve. Hinzu kam, dass Storybook zwar allen gerecht werden möchte, man ihm seine auf React und Webpack zielende DNA aber immer noch anmerkt. </p>
<p>Da kam es Vanessa sehr gelegen, dass Vue.js-Core-Team-Mitglied Guillaume Chau neuerdings eine auf Vue.js und Vite spezialisierte Komponentenbibliothek namens &#8222;<a href="https://histoire.dev/">Histoire</a>&#8220; veröffentlicht hat. Und so sprechen wir über das Für und Wider der Nutung beider Pakete, sehen z.B. die große Community auf der einen Seite, aber eben auch die bestechende Einfachheit bei dennoch umfangreichem Featureset auf der anderen. </p>
<p>Am Ende treten wir schließlich noch ein paar Schritte zurück und sinnieren über die Frage, ob solche Komponentenbibliotheken uns überhaupt nennenswerte Vorteile bringen, oder ob man sich mit ihnen nur ein weiteres zu pflegendes Softwarepaket ans Bein bindet, das einen herunterbremst.
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://storybook.js.org/showcase">Storybook Component Encyclopedia</a></dt>
<dd>Hier kann man sich die Komponentenbibliotheken und damit Entwicklungsansätze diverser großer Player ansehen.</dd>
<dt><a href="https://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</a></dt>
<dd>Das von Brad Frost ersonnene, von uns aber heftigst in die Pfanne gehauene Komponenten-Konzept.</dd>
</dl>


Diesmal haben wir es uns zu zweit lauschig gemacht. Vanessa schlüpfte in die Rolle unserer Gästin und hatte als Thema &#8222;Komponentenbibliotheken&#8220; im allgemeinen und Storybook und Histoire im Speziellen im Gepäck. Unser Sponsor Die vuejs.de Conf ist die erste durch die vuejs.de Community organisierte VueJS Konferenz in Deutschland. Sie findet am 05. Oktober statt in [&#8230;]

Diesmal haben wir es uns zu zweit lauschig gemacht. Vanessa schlüpfte in die Rolle unserer Gästin und hatte als Thema „Komponentenbibliotheken“ im allgemeinen und Storybook und Histoire im Speziellen im Gepäck.

Unser Sponsor


Die vuejs[...]

Diesmal haben wir es uns zu zweit lauschig gemacht. Vanessa schlüpfte in die Rolle unserer Gästin und hatte als Thema „Komponentenbibliotheken“ im allgemeinen und Storybook und Histoire im Speziellen im Gepäck.

Unser Sponsor


Die vuejs.de Conf ist die erste durch die vuejs.de Community organisierte VueJS Konferenz in Deutschland. Sie findet am 05. Oktober statt in Herzen Berlins statt und lockt nicht nur die deutschsprachige VueJS Community, sondern auch zahlreiche Gäste aus aller Welt an. Es erwarten dich 12 Talks von internationalen Vue Expert:innen, ein direkter Kontakt zur Vue Community in einem historischen Ambiente, toller kulinarischer Verpflegung.


Schaunotizen

[00:00:00] Komponentenbibliotheken – Why? How? What?
Vanessa und Schepp starten mit einer Definition des Begriffs „Komponenten“ und „Komponentenbibliothek“ und arbeiten sich sodann zum ersten und prominentesten Vertreter dieser Gattung vor: Storybook. Angetreten ist Storybook 2016 als sehr fokussiertes Werkzeug, das im Laufe der Zeit immer mehr zur eierlegenden Wollmilchsau hochgezüchtet wurde. Dies ging aus Vanessas Sicht leider nicht ohne Rückschritte im Handling einher. Speziell als mit Version 5 die „Knobs“ kamen trug es sie, und wohl auch einige andere Benutzer*innen, aus der Kurve. Hinzu kam, dass Storybook zwar allen gerecht werden möchte, man ihm seine auf React und Webpack zielende DNA aber immer noch anmerkt. 
Da kam es Vanessa sehr gelegen, dass Vue.js-Core-Team-Mitglied Guillaume Chau neuerdings eine auf Vue.js und Vite spezialisierte Komponentenbibliothek namens „Histoire“ veröffentlicht hat. Und so sprechen wir über das Für und Wider der Nutung beider Pakete, sehen z.B. die große Community auf der einen Seite, aber eben auch die bestechende Einfachheit bei dennoch umfangreichem Featureset auf der anderen. 
Am Ende treten wir schließlich noch ein paar Schritte zurück und sinnieren über die Frage, ob solche Komponentenbibliotheken uns überhaupt nennenswerte Vorteile bringen, oder ob man sich mit ihnen nur ein weiteres zu pflegendes Softwarepaket ans Bein bindet, das einen herunterbremst.

[00:00:00] Keine Schaunotizen

Storybook Component Encyclopedia
Hier kann man sich die Komponentenbibliotheken und damit Entwicklungsansätze diverser großer Player ansehen.
Atomic Design
Das von Brad Frost ersonnene, von uns aber heftigst in die Pfanne gehauene Komponenten-Konzept.

Revision 539: Komponentenbibliotheken – Why? How? What?

<p>Für diese Folge haben wir uns <a href="https://twitter.com/tsnmp">Jonas Ulrich</a> vom Startup <a href="https://www.kickstartds.com/">kickstartDS</a> (<a href="https://www.kickstartds.com/blog/">Blog</a> /<a href="https://discord.com/invite/mwKzD5gejY">Discord</a>, <a href="https://twitter.com/kickstartds">Twitter</a>) eingeladen, um über die praktischen Herausforderungen bei der Entwicklung eines UI Design Systems zu sprechen.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="http://languagetool.com/workingdraft"><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/08/logo_claim-color.png" alt="" /></a></p>
<div class="message_content">
<p>Diese Revision wird von LanguageTool unterstützt. LanguageTool ist ein intelligenter Schreibassistent für alle gängigen Browser und Textverarbeitungsprogramme.<br />
LanguageTool findet mehr Fehler als vergleichbare Rechtschreibkorrekturen und bereichert jeden Text zusätzlich durch hilfreiche Grammatik- und Stilvorschläge für mehr als zwanzig Sprachen. Dank des akribischen Modus kannst du deinen Text perfektionieren und mithilfe des Styleguides können benutzerdefinierte Regeln erstellt werden. Die Premiumversion bietet eine umfassendere Prüfung von z. B. Groß- und Kleinschreibung, vertiefter Kommasetzung oder mehr als 100 Vorschläge zum Textstil.<br />
Wenn du auch Support beim Schreiben gebrauchen kannst, schau gerne auf <a href="http://languagetool.com/workingdraft">languagetool.com/workingdraft</a> vorbei – über den Button auf der Seite bekommt ihr jetzt 20 % Rabatt auf Premium.</p>
</div>
</aside>
<p>Vor der Gründung ihres Startups arbeiteten Jonas und seinen Mitstreitern 15 Jahre lang als <a href="https://ruhmesmeile.com/">Web-Agentur</a> mit vorwiegend Mittelständlern als Kunden. Vor zwei Jahren entschied man sich dazu, die Erfahrungen des Agenturteams beim Entwickeln von Design Systemen in ein zusätzliches Standbein zu verwandeln und UI-Baukästen als Produkt anzubieten.</p>
<p>Wir wollen darüber reden, wie man an die Entwicklung eines solchen UI Design Systems herangeht und welche Herausforderungen darin stecken.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:39] Wie entwickelt man ein UI Design System?</dt>
<dd>Bevor es an die Entwicklung eines Design Systems geht, gilt es zunächst die Frage zu klären, wer später die Konsumenten sein werden. Im Falle von kickstartDS sind das ebenjene Sorte Mittelständler, die Jonas&#8216; Agentur bislang betreut hat, die bei rund 100 Mitarbeitern liegt und die schon über eine gewisse Anzahl Webseiten im Netz verfügt. Ziel ist damit nicht nur einfaches Theming, sondern Multi-Mandanten-Fähigkeit, also der Möglichkeit, das Design System für die Firmenwebseite, das Firmenblog oder eine Marketing-Seite im Charakter unterschiedlich ausfallen zu lassen.</p>
<p>Konzeptuell beginn die Arbeit mit der Entwicklung von Basis-Tokens, wie Fibonacci-Skalen, Farbvarianten, etc. Die müssen einzeln nicht nur gut funktionieren, sondern auch in einem Beziehungsgeflecht mit anderen Basis-Tokens. Das ist schwerer als man denkt. Die Basis-Tokens werden anschließend in semantische Tokens à la &#8222;Primary Color&#8220; verpackt. Und die werden innerhalb von Komponenten dann nochmal in Komponenten-Tokens verpackt. Das erleichtert die Konfiguration und eröffnet den Benutzern gleichzeitig an all diesen Schnittstellen, auf Wunsch von der Vorgabe abzuweichen. Sinnvolle Token-Vorbelegungen ermöglichen darüber hinaus einen schnellen Einstieg, ohne Konfigurationsorgien. Insgesamt stellt dieser ganze Entwicklungsprozess eine multidisziplinäre Aufgabe dar.</p>
<p>Vom Workflow hat das Team sich für HTML, CSS und JavaScript als primäres Delivery-Format entschieden, weil das mit jeder Zieltechnologie gleich gut harmoniert. Konsumierende Entwickelnde müssen dann aber das HTML in die von ihnen verwendete Template-Sprache überführen (und bei Änderungen nachziehen). Von Jonas&#8216; Team werden die Komponenten aber natürlich nicht in diesen Technologien entwickelt, sondern werden am Ende dahin transpiliert. Die eigentliche Entwicklungsumgebung besteht aus JSX, SCSS und ES6. Das ermöglicht es aber, als weiteres Delivery-Format React zzgl. einer Konfigurationsbeschreibung nach <a href="https://json-schema.org/">JSON Schema</a> anzubieten. Zudem werden die Design-Tokens in Amazons <a href="https://amzn.github.io/style-dictionary/#/">Style Dictionary</a> Format angeboten, so dass sie von dort aus in alle möglichen Zielformate umgewandelt werden können (Claim: &#8222;Style once, use everywhere&#8220;). Web Components gehören aktuell u.a. aus SEO-Gründen nicht zu den auslieferbaren Formaten.</p>
<p>Wir sprechen außerdem darüber, wie man Design Systeme in Firmen etablieren kann. Jonas sieht am meisten Erfolg in einem Grassroots-Ansatz, also einem Ansatz, bei dem das entwickelnde Team sich ein Design System wünscht. Dann sind die Betroffenen nämlich motiviert Bord. Weniger gut ist der Ansatz, wenn ein Design System von oben verordnet wird. Zur Einführung empfiehlt er außerdem, sich nicht direkt der Haupt-Webseite zu widmen, sondern erste Erfahrungen in einem Nebenprojekt zu sammeln.</p>
<p>Da ein Design System nicht nur eingeführt, sondern danach am Leben gehalten und weiterentwickelt werden muss, ist es zudem erforderlich, dass man einzelne sogenannte &#8222;Champions&#8220; oder gar ein ganzes &#8222;Design Ops&#8220;-Team benennt, das das UI-System wie ein interner Dienstleister pflegt und andere Teams mit Rat und Tat beim Einbau unterstützt. Hans und Jonas halten es für ideal, das Ganze im Stile eines Open Source Projektes zu führen.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://workingdraft.de/524/">Revision 524: Design Systeme</a></dt>
<dd>Mit unserem damaligen Gast David Jost besprachen wir im April das Thema Design Systeme eher high-levelig und aus der Brille eines großen Unternehmens</dd>
<dt><a href="https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676">Nathan Curtis: Naming Tokens in Design Systems</a></dt>
<dd>Terms, Types, and Taxonomy to Describe Visual Style</dd>
<dt><a href="https://tailwindui.com/">Tailwind UI</a></dt>
<dd>Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.</dd>
<dt><a href="https://mui.com/">Material UI</a></dt>
<dd>MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.</dd>
<dt><a href="https://chakra-ui.com/">Chakra UI</a></dt>
<dd>Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.</dd>
</dl>


Für diese Folge haben wir uns Jonas Ulrich vom Startup kickstartDS (Blog /Discord, Twitter) eingeladen, um über die praktischen Herausforderungen bei der Entwicklung eines UI Design Systems zu sprechen. Unser Sponsor Diese Revision wird von LanguageTool unterstützt. LanguageTool ist ein intelligenter Schreibassistent für alle gängigen Browser und Textverarbeitungsprogramme. LanguageTool findet mehr Fehler als vergleichbare Rechtschreibkorrekturen [&#8230;]

Für diese Folge haben wir uns Jonas Ulrich vom Startup kickstartDS (Blog /Discord, Twitter) eingeladen, um über die praktischen Herausforderungen bei der Entwicklung eines UI Design Systems zu sprechen.

Unser Sponsor


Diese Revision wird von Langu[...]

Für diese Folge haben wir uns Jonas Ulrich vom Startup kickstartDS (Blog /Discord, Twitter) eingeladen, um über die praktischen Herausforderungen bei der Entwicklung eines UI Design Systems zu sprechen.

Unser Sponsor


Diese Revision wird von LanguageTool unterstützt. LanguageTool ist ein intelligenter Schreibassistent für alle gängigen Browser und Textverarbeitungsprogramme.
LanguageTool findet mehr Fehler als vergleichbare Rechtschreibkorrekturen und bereichert jeden Text zusätzlich durch hilfreiche Grammatik- und Stilvorschläge für mehr als zwanzig Sprachen. Dank des akribischen Modus kannst du deinen Text perfektionieren und mithilfe des Styleguides können benutzerdefinierte Regeln erstellt werden. Die Premiumversion bietet eine umfassendere Prüfung von z. B. Groß- und Kleinschreibung, vertiefter Kommasetzung oder mehr als 100 Vorschläge zum Textstil.
Wenn du auch Support beim Schreiben gebrauchen kannst, schau gerne auf languagetool.com/workingdraft vorbei – über den Button auf der Seite bekommt ihr jetzt 20 % Rabatt auf Premium.


Vor der Gründung ihres Startups arbeiteten Jonas und seinen Mitstreitern 15 Jahre lang als Web-Agentur mit vorwiegend Mittelständlern als Kunden. Vor zwei Jahren entschied man sich dazu, die Erfahrungen des Agenturteams beim Entwickeln von Design Systemen in ein zusätzliches Standbein zu verwandeln und UI-Baukästen als Produkt anzubieten.
Wir wollen darüber reden, wie man an die Entwicklung eines solchen UI Design Systems herangeht und welche Herausforderungen darin stecken.
Schaunotizen

[00:01:39] Wie entwickelt man ein UI Design System?
Bevor es an die Entwicklung eines Design Systems geht, gilt es zunächst die Frage zu klären, wer später die Konsumenten sein werden. Im Falle von kickstartDS sind das ebenjene Sorte Mittelständler, die Jonas‘ Agentur bislang betreut hat, die bei rund 100 Mitarbeitern liegt und die schon über eine gewisse Anzahl Webseiten im Netz verfügt. Ziel ist damit nicht nur einfaches Theming, sondern Multi-Mandanten-Fähigkeit, also der Möglichkeit, das Design System für die Firmenwebseite, das Firmenblog oder eine Marketing-Seite im Charakter unterschiedlich ausfallen zu lassen.
Konzeptuell beginn die Arbeit mit der Entwicklung von Basis-Tokens, wie Fibonacci-Skalen, Farbvarianten, etc. Die müssen einzeln nicht nur gut funktionieren, sondern auch in einem Beziehungsgeflecht mit anderen Basis-Tokens. Das ist schwerer als man denkt. Die Basis-Tokens werden anschließend in semantische Tokens à la „Primary Color“ verpackt. Und die werden innerhalb von Komponenten dann nochmal in Komponenten-Tokens verpackt. Das erleichtert die Konfiguration und eröffnet den Benutzern gleichzeitig an all diesen Schnittstellen, auf Wunsch von der Vorgabe abzuweichen. Sinnvolle Token-Vorbelegungen ermöglichen darüber hinaus einen schnellen Einstieg, ohne Konfigurationsorgien. Insgesamt stellt dieser ganze Entwicklungsprozess eine multidisziplinäre Aufgabe dar.
Vom Workflow hat das Team sich für HTML, CSS und JavaScript als primäres Delivery-Format entschieden, weil das mit jeder Zieltechnologie gleich gut harmoniert. Konsumierende Entwickelnde müssen dann aber das HTML in die von ihnen verwendete Template-Sprache überführen (und bei Änderungen nachziehen). Von Jonas‘ Team werden die Komponenten aber natürlich nicht in diesen Technologien entwickelt, sondern werden am Ende dahin transpiliert. Die eigentliche Entwicklungsumgebung besteht aus JSX, SCSS und ES6. Das ermöglicht es aber, als weiteres Delivery-Format React zzgl. einer Konfigurationsbeschreibung nach JSON Schema anzubieten. Zudem werden die Design-Tokens in Amazons Style Dictionary Format angeboten, so dass sie von dort aus in alle möglichen Zielformate umgewandelt werden können (Claim: „Style once, use everywhere“). Web Components gehören aktuell u.a. aus SEO-Gründen nicht zu den auslieferbaren Formaten.
Wir sprechen außerdem darüber, wie man Design Systeme in Firmen etablieren kann. Jonas sie[...]

Revision 538: Wie entwickelt man ein Design System?

<p>Nachdem es vor <a href="https://workingdraft.de/535/">zwei Revisionen</a> um das Zusammenspiel von Cypress mit Vitest ging, wollen wir diese Revision ganz exklusiv Cypress widmen und über neue Features aus den Major-Releases 9 und 10 sprechen. Das letzte Mal haben wir das nämlich <a href="https://workingdraft.de/458/">vor anderthalb Jahren gemacht</a>. Dafür haben wir uns und die beiden Deutschen <a href="https://www.cypress.io/ambassadors/">Cypress Ambassadore</a> <a href="https://twitter.com/leichteckig">Ramona Schwering</a> von Shopware und (erneut) <a href="https://twitter.com/tobmaster">Tobias Struckmeier</a> von der Adesso eingeladen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] <a href="https://docs.cypress.io/guides/references/changelog">Neues in Cypress 9 und 10</a></dt>
<dd>Das erste neue Feature, das wir beleuchten, ist das &#8222;<a href="https://docs.cypress.io/guides/component-testing/writing-your-first-component-test">Component Testing</a>&#8222;, das derzeit noch in Beta ist. Beta unter anderem auch deswegen, weil es derzeit nur im Zusammenspiel mit React richtig gut läuft, mit Vue nur noch gut und mit Angular noch gar nicht so richtig.</p>
<p>Wie der Name schon andeutet, erlaubt es das durchtesten isolierter UI-Bausteine, aber in echten Browsern anstatt in einer per JSDom simulierten Browser-Umgebung wie sie oft zum Einsatz kommt. Das ist zwar aufwendiger und langsamer, Fehler können damit aber besser debugged werden, weil die entwickelnde Person bei Auftreten eines solchen einfach den Browser übernehmen, die Devtools öffnen und mit der Fehlersuche beginnen kann. Dieses Feature führt aber leider zu einer neuen Projektstruktur, die zwischen E2-E und Component-Testing aufteilt, und die noch ein paar weitere Änderungen mit sich bringt. Wichtig zu wissen für eine Migration von einer älteren Cypress-Version &#8211; die allerdings recht schnell von der Hand geht.</p>
<p>Andere Tools zum Entwickeln von Komponenten wie Storybook ersetzt dieses Feature nicht. Andersherum bietet Storybook aber mittlerweile mit &#8222;<a href="https://storybook.js.org/docs/react/writing-stories/play-function">Storybook Play</a>&#8220; ein eigenes Testing-Feature.</p>
<p>Als nächstes sprechen wir über <a href="https://docs.cypress.io/guides/references/cypress-studio">Cypress Studio</a>, welches man derzeit als experimentell einstufen muss, weil dessen Zukunft in Frage gestellt wird. Cypress Studio ermöglicht es, Cypress-Tests WYSIWYG-artig zu erstellen, was Nicht-Entwickelnden einen Zugang zum Erstellen von Tests öffnet. In Frage gestellt deswegen, weil die Chrome Devtools neuerdings mit dem &#8222;<a href="https://developer.chrome.com/docs/devtools/recorder/">Recorder</a>&#8220; daherkommt, der User-Flows aufzeichnet, die man mit Hilfe von Browser-Plugins abgreifen und in eigene Tools und Formate exportieren kann.</p>
<p>Wir widmen uns in dem Zusammenhang der Frage, wie robust und dauerhaft rein visuell anstelle von semantisch zusammengestellte Tests sein können und sind uns darin einig, dass sie deutlich fragiler sind. Allerdings sind definitiv sie ein guter Einstieg in die Welt der Test-Erstellung und mit zunehmender Erfahrung, wird es immer mehr möglich, diese als Vorlage zu betrachten, die man Anschluss &#8222;robust&#8220; macht. Auch lässt sich Cypress auch vorab ein Stück weit so einstellen, dass es bestimmte HTML-Strukturen bevorzugt als Orientierungspunkte heranzieht als andere (bestimmte Attribute vs. CSS-Selektorenkette).</p>
<p>Das dritte neue Feature, über das wir sprechen, ist ebenfalls noch experimentell: Das <a href="https://www.cypress.io/blog/2022/04/25/cypress-9-6-0-easily-test-multi-domain-workflows-with-cy-origin/">Multi-Domain-Testing</a>. Multi-Domain-Testing ist traditionell ein blinder Fleck aller Testing-Tools, und zwar weil es technisch aufwändig oder sogar unmöglich ist. Es geht dabei darum, dass Tests auch möglich sind, wenn der User-Flow die primäre Domain zeitweilig verlässt, wie es zum Beispiel bei einem Login via externer Dienste der Fall ist, oder auch bei einer Zahlung über einen externen Zahlungsdienstleister. In <a href="https://workingdraft.de/442/">Revision 442</a> sprachen wir dazu auch mit Marvin Hagemeister, der aus diesem Grund zusammen mit Kollegen sein eigenes Testing-Framework gebaut hat, das das kann. Dass sowas jetzt auch mit Cypress möglich ist, ist u.a. in der ebenfalls experimentellen &#8222;<a href="https://docs.cypress.io/api/commands/session">Session API</a>&#8220; zu begründen. Diese ermöglicht es, Cookies und LocalStorage-Daten über mehrere Tests hinweg zu persistieren. Das macht es auch möglich, bestimmte Arten von Tests zu beschleunigen, indem man die ganze Setup-Arbeit einmal macht, abspeichert und fortan nur noch lädt.</p>
<p>Das führt uns zu dem letzten diskutierten Themenblock, nämlich die Ausführungsgeschwindigkeit von Cypress-Tests und wie man die schnell hält. Ramonas Strategie ist, ein Basis-Set für die schnellen und wichtigsten Tests zu nutzen, um die Pipeline schnell zu halten, und dazu einen &#8222;Nightly Build&#8220;-Ansatz zu fahren, bei dem jede Nacht alles aufwendig abgetestet wird. Eine weitere Möglichkeit ist die Parallelisierung per Ordner oder Segmentierung via Tags, und das Ganze auf mehreren Maschinen orchestriert via <a href="https://www.cypress.io/dashboard/">Cypress Dashboard</a>. Am längsten dauert aus ihrer Sicht aber immer das initiale Setup der Testdaten &#8211; und da unterscheidet sich Cypress nicht von anderen Tools. Und schließlich sind wir uns auch einig, dass keine 100% Testabdeckung notwendig ist, weil einfach zu teuer.</dd>
</dl>
<h3>[00:00:00] Links</h3>
<dl>
<dt><a href="https://cypress.io/blog/2022/05/18/update-on-cypress-studio/">An Update on Cypress Studio</a></dt>
<dd>Ein Blogpost vom Cypress-Team mit dessen Überlegungen zu Cypress Studio.</dd>
<dt><a href="https://www.cypress.io/blog/2022/06/21/cypress-10-2-0-run-tests-up-to-2x-faster-on-apple-silicon-m1/">Cypress 10.2.0: Run tests up to 2x faster on Apple silicon (M1)</a></dt>
<dd>Seit Version 10.2 läuft Cypress nicht mehr in einer Intel-Emulation, sondern nativ mit dem ARM-Befehlssatz.</dd>
<dt><a href="https://storybook.js.org/docs/react/writing-stories/play-function">Storybook Play</a></dt>
<dd>Storybook bietet mit Play nun einen eigenen Test-Workflow.</dd>
<dt><a href="https://vitest.dev/">Vitest</a></dt>
<dd>Ein auf Vue maßgeschneidertes Testing-Framework. Mehr dazu in <a href="https://workingdraft.de/535/">Revision 535</a>.</dd>
</dl>


Nachdem es vor zwei Revisionen um das Zusammenspiel von Cypress mit Vitest ging, wollen wir diese Revision ganz exklusiv Cypress widmen und über neue Features aus den Major-Releases 9 und 10 sprechen. Das letzte Mal haben wir das nämlich vor anderthalb Jahren gemacht. Dafür haben wir uns und die beiden Deutschen Cypress Ambassadore Ramona Schwering [&#8230;]

Nachdem es vor zwei Revisionen um das Zusammenspiel von Cypress mit Vitest ging, wollen wir diese Revision ganz exklusiv Cypress widmen und über neue Features aus den Major-Releases 9 und 10 sprechen. Das letzte Mal haben wir das nämlich vor anderth[...]

Nachdem es vor zwei Revisionen um das Zusammenspiel von Cypress mit Vitest ging, wollen wir diese Revision ganz exklusiv Cypress widmen und über neue Features aus den Major-Releases 9 und 10 sprechen. Das letzte Mal haben wir das nämlich vor anderthalb Jahren gemacht. Dafür haben wir uns und die beiden Deutschen Cypress Ambassadore Ramona Schwering von Shopware und (erneut) Tobias Struckmeier von der Adesso eingeladen.
Schaunotizen

[00:00:58] Neues in Cypress 9 und 10
Das erste neue Feature, das wir beleuchten, ist das „Component Testing„, das derzeit noch in Beta ist. Beta unter anderem auch deswegen, weil es derzeit nur im Zusammenspiel mit React richtig gut läuft, mit Vue nur noch gut und mit Angular noch gar nicht so richtig.
Wie der Name schon andeutet, erlaubt es das durchtesten isolierter UI-Bausteine, aber in echten Browsern anstatt in einer per JSDom simulierten Browser-Umgebung wie sie oft zum Einsatz kommt. Das ist zwar aufwendiger und langsamer, Fehler können damit aber besser debugged werden, weil die entwickelnde Person bei Auftreten eines solchen einfach den Browser übernehmen, die Devtools öffnen und mit der Fehlersuche beginnen kann. Dieses Feature führt aber leider zu einer neuen Projektstruktur, die zwischen E2-E und Component-Testing aufteilt, und die noch ein paar weitere Änderungen mit sich bringt. Wichtig zu wissen für eine Migration von einer älteren Cypress-Version – die allerdings recht schnell von der Hand geht.
Andere Tools zum Entwickeln von Komponenten wie Storybook ersetzt dieses Feature nicht. Andersherum bietet Storybook aber mittlerweile mit „Storybook Play“ ein eigenes Testing-Feature.
Als nächstes sprechen wir über Cypress Studio, welches man derzeit als experimentell einstufen muss, weil dessen Zukunft in Frage gestellt wird. Cypress Studio ermöglicht es, Cypress-Tests WYSIWYG-artig zu erstellen, was Nicht-Entwickelnden einen Zugang zum Erstellen von Tests öffnet. In Frage gestellt deswegen, weil die Chrome Devtools neuerdings mit dem „Recorder“ daherkommt, der User-Flows aufzeichnet, die man mit Hilfe von Browser-Plugins abgreifen und in eigene Tools und Formate exportieren kann.
Wir widmen uns in dem Zusammenhang der Frage, wie robust und dauerhaft rein visuell anstelle von semantisch zusammengestellte Tests sein können und sind uns darin einig, dass sie deutlich fragiler sind. Allerdings sind definitiv sie ein guter Einstieg in die Welt der Test-Erstellung und mit zunehmender Erfahrung, wird es immer mehr möglich, diese als Vorlage zu betrachten, die man Anschluss „robust“ macht. Auch lässt sich Cypress auch vorab ein Stück weit so einstellen, dass es bestimmte HTML-Strukturen bevorzugt als Orientierungspunkte heranzieht als andere (bestimmte Attribute vs. CSS-Selektorenkette).
Das dritte neue Feature, über das wir sprechen, ist ebenfalls noch experimentell: Das Multi-Domain-Testing. Multi-Domain-Testing ist traditionell ein blinder Fleck aller Testing-Tools, und zwar weil es technisch aufwändig oder sogar unmöglich ist. Es geht dabei darum, dass Tests auch möglich sind, wenn der User-Flow die primäre Domain zeitweilig verlässt, wie es zum Beispiel bei einem Login via externer Dienste der Fall ist, oder auch bei einer Zahlung über einen externen Zahlungsdienstleister. In Revision 442 sprachen wir dazu auch mit Marvin Hagemeister, der aus diesem Grund zusammen mit Kollegen sein eigenes Testing-Framework gebaut hat, das das kann. Dass sowas jetzt auch mit Cypress möglich ist, ist u.a. in der ebenfalls experimentellen „Session API“ zu begründen. Diese ermöglicht es, Cookies und LocalStorage-Daten über mehrere Tests hinweg zu persistieren. Das macht es auch möglich, bestimmte Arten von Tests zu beschleunigen, indem man die ganze Setup-Arbeit einmal macht, abspeichert und fortan nur noch lädt.
Das führt uns zu dem letzten diskutierten Themenblock, nämlich die Ausführungsgeschwindigkeit von Cypress-Tests und wie man die sc[...]

Revision 537: Was gibt es Neues in Cypress 9 und 10?

<p>Mit <a href="https://www.linkedin.com/in/j-schaefer/?originalSubdomain=de">Josefine Schaefer</a> und <a href="https://www.linkedin.com/in/davidmanuelschroeder/">Manuel Schröder</a>, beide Developer Relations Engineers bei dem Headless CMS Tool <a href="https://www.storyblok.com/">Storyblok</a>, bespricht Vanessa das Imposter Syndrom bei Entwickler*innen.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://wahnsinn.design/keinjira?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/08/wahnsinn_grafik_2x.png" alt="" /></a></p>
<div class="message_content">
<p>Wahnsinn, sucht Gute. Aktuell am liebsten Frontend-Menschen mit React-Erfahrung. Du hast schon einige Projekte erklommen? Du hast ein Auge für gute Umsetzung? Dir ist bewusst, alle Probleme sowie Lösungen sind kommunikativer Natur, außer Einmachgläser, die nicht aufgehen wollen &#8211; da hat sich das Universum einfach gegen einen verschworen. Perfekt. Mehr Infos findest du unter <a href="https://wahnsinn.design/keinjira?ref=workingdraft.de">wahnsinn.design/keinjira</a>.</p>
</div>
</aside>
<dl>
<dd></dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:21] Das Imposter Syndrom bei Entwickler*innen</dt>
<dd>Vorneweg: Wir haben keine Ausbildung, um als Experten über dieses Thema zu besprechen. Wir tauschen unsere persönlichen und subjektiven Erfahrung aus.</dd>
<dd>Der Imposter ist ein Hochstapler. Personen können allerdings auch ein Hochstapler-Syndrom haben. Obwohl sie deutliche Beweise für ihre Fähigkeiten bekommen, fühlen sie manchmal, als hätten sie ihren Erfolg, z.B. eine Festanstellung als Software Entwickler:in, erschlichen. Wir besprechen, inwiefern Konferenzen, Social Media und das Arbeitsumfeld Auswirkungen auf Entwickler:innen in Bezug auf das Syndrom haben. Ebenfalls hinterfragen wir uns, welche Personengruppen davon stärker oder weniger betroffen sind. Sind es beispielsweise Selbstlernende oder theoretische Akademiker, die mehr damit zu hadern haben, wie man eigentlich StandUps, Code Reviews, und mehr organisiert. Außerdem sprechen wir über unsere Erfahrungen und weisen auf Artikel hin, mit dem man dem Imposter Syndrom entgegenwirken kann.</dd>
</dl>
<h3>Links</h3>
<ul>
<li><a href="https://github.com/workingdraft/revisions/projects/113">I&#8217;m Poster Manifest</a></li>
<li><a href="https://www.nytimes.com/guides/working-womans-handbook/overcome-impostor-syndrome">How to Overcome &#8218;Imposter Syndrome&#8216;</a></li>
<li><a href="https://tech-imposters.com/">Tech Imposters</a></li>
</ul>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/495/">Revision 495: Storyblok &#8211; Einblicke in ein StartUp</a></li>
</ul>


Mit Josefine Schaefer und Manuel Schröder, beide Developer Relations Engineers bei dem Headless CMS Tool Storyblok, bespricht Vanessa das Imposter Syndrom bei Entwickler*innen. Unser Sponsor Wahnsinn, sucht Gute. Aktuell am liebsten Frontend-Menschen mit React-Erfahrung. Du hast schon einige Projekte erklommen? Du hast ein Auge für gute Umsetzung? Dir ist bewusst, alle Probleme sowie Lösungen sind kommunikativer [&#8230;]

Mit Josefine Schaefer und Manuel Schröder, beide Developer Relations Engineers bei dem Headless CMS Tool Storyblok, bespricht Vanessa das Imposter Syndrom bei Entwickler*innen.

Unser Sponsor


Wahnsinn, sucht Gute. Aktuell am liebsten Frontend-Mens[...]

Mit Josefine Schaefer und Manuel Schröder, beide Developer Relations Engineers bei dem Headless CMS Tool Storyblok, bespricht Vanessa das Imposter Syndrom bei Entwickler*innen.

Unser Sponsor


Wahnsinn, sucht Gute. Aktuell am liebsten Frontend-Menschen mit React-Erfahrung. Du hast schon einige Projekte erklommen? Du hast ein Auge für gute Umsetzung? Dir ist bewusst, alle Probleme sowie Lösungen sind kommunikativer Natur, außer Einmachgläser, die nicht aufgehen wollen – da hat sich das Universum einfach gegen einen verschworen. Perfekt. Mehr Infos findest du unter wahnsinn.design/keinjira.





Schaunotizen

[00:01:21] Das Imposter Syndrom bei Entwickler*innen
Vorneweg: Wir haben keine Ausbildung, um als Experten über dieses Thema zu besprechen. Wir tauschen unsere persönlichen und subjektiven Erfahrung aus.
Der Imposter ist ein Hochstapler. Personen können allerdings auch ein Hochstapler-Syndrom haben. Obwohl sie deutliche Beweise für ihre Fähigkeiten bekommen, fühlen sie manchmal, als hätten sie ihren Erfolg, z.B. eine Festanstellung als Software Entwickler:in, erschlichen. Wir besprechen, inwiefern Konferenzen, Social Media und das Arbeitsumfeld Auswirkungen auf Entwickler:innen in Bezug auf das Syndrom haben. Ebenfalls hinterfragen wir uns, welche Personengruppen davon stärker oder weniger betroffen sind. Sind es beispielsweise Selbstlernende oder theoretische Akademiker, die mehr damit zu hadern haben, wie man eigentlich StandUps, Code Reviews, und mehr organisiert. Außerdem sprechen wir über unsere Erfahrungen und weisen auf Artikel hin, mit dem man dem Imposter Syndrom entgegenwirken kann.

Links

I’m Poster Manifest
How to Overcome ‚Imposter Syndrome‘
Tech Imposters

Verwandte Revisionen

Revision 495: Storyblok – Einblicke in ein StartUp

Revision 536: Das Imposter Syndrom bei Entwickler*innen

<p>In den letzten Monaten hat sich eine neue Kombination an Testing-Tools für die Frontend-Entwicklung gebildet, die von vielen Entwickler:innen favorisiert wird. <a href="https://markus.oberlehner.net/">Markus Oberlehner</a> erklärt, wie man <a href="https://docs.cypress.io/guides/component-testing/writing-your-first-component-test">Cypress Component Testing</a> und <a href="https://vitest.dev/">Vitest</a> am besten verbinden kann.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://newcubator.com/jobs/?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/06/newcubator.png" alt="" /></a></p>
<div class="message_content">
<p>Diese Revision wird euch präsentiert von newcubator, einem Softwaredienstleister mit den Standorten Dortmund und Hannover. Newcubator abeitet täglich an innovativen Webanwendungen oder mobilen Lösungen &#8211; auch für Branchen, die nicht in erster Linie digital unterwegs sind. Vielleicht hast du Lust, das Team als Lead Developer:in zu unterstützen? Idealerweise direkt am Standort Dortmund. Neben Programmieren und Coden, agierst du als aktive Schnittstelle zwischen Team und Kund:innen; Projektmanagement und kaufmännische Tätigkeiten wie Angebotserstellung oder Qualitätsmanagement gehören ebenfalls zu deinen Aufgaben. </p>
<p>Bei Newcubator bekommst du die Möglichkeit das Unternehmen aktiv mitzugestalten. &#8211; Mit einem außergewöhnlichen Team aus Software-Architekt:innen, UX-Designer:innen und Backend- und Frontend-Entwickler:innen.<br />
Hast du Lust? Dann meld dich bei Newcubator. Mehr Infos zu der Stelle findest du unter <a href="https://newcubator.com/jobs/?ref=workingdraft.de">newcubator.com/jobs</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Testing mit Cypress und Vitest</dt>
<dd>Cypress und Vitest sind Test Runner. Test Runner sind Tools, die von Entwickler:innen geschriebene Tests auszuführen. Dabei kommt Cypress mit einem virtuellen Browser, während Vitest unschlagbar in der Ausführungszeit ist. Vitest kommt aus dem gleichem Universum wie <a href="https://vuejs.org/">Vue</a> und <a href="https://vitejs.dev/">Vite</a>. Vitest, wie auch Cypress, sind allerdings Framework agnostisch und können mit beliebigen Bibliotheken eingesetzt werden, wie React und Angular. Eine Benutzung von Vitest zusammen mit dem Bundler Vite ist sinnvoll, da beide Tools die gleiche Konfiguration nutzen können. Es ist allerdings keine Voraussetzung.</dd>
<dd>Markus Geheimtipp ist ein unabhängiger Driver, der Tests sowohl in Cypress, als auch in Vitest ausführen kann.</dd>
<dd>Im Laufe der Revision geht Markus auf die Begrifflichkeiten von Unit, Integration und System Tests ein. Außerdem erklärt er, in welchen Fällen er es bevorzugt <a href="https://docs.microsoft.com/de-de/visualstudio/test/using-stubs-to-isolate-parts-of-your-application-from-each-other-for-unit-testing?view=vs-2022">Mocks und Stubs</a> zu benutzen, und in welchen nicht.</dd>
</dl>
<h3>Links</h3>
<ul>
<li><a href="https://goodvuetests.substack.com/">Good Vue Tests</a> von Markus Oberlehner</li>
<li><a href="https://conf.vuejs.de/">Vue.js Conf Berlin</a>, auf der Markus Oberlehner einen Talk geben wird</li>
</ul>
<dl>
<dd></dd>
</dl>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/458/">Revision 458: Cypress</a></li>
<li><a href="https://workingdraft.de/520/">Revision 520: Unit-Testing / Testing Library</a></li>
<li><a href="https://workingdraft.de/473/">Revision 473: Vue 3, taugts?</a></li>
</ul>
<p>&nbsp;</p>


In den letzten Monaten hat sich eine neue Kombination an Testing-Tools für die Frontend-Entwicklung gebildet, die von vielen Entwickler:innen favorisiert wird. Markus Oberlehner erklärt, wie man Cypress Component Testing und Vitest am besten verbinden kann. Unser Sponsor Diese Revision wird euch präsentiert von newcubator, einem Softwaredienstleister mit den Standorten Dortmund und Hannover. Newcubator abeitet täglich [&#8230;]

In den letzten Monaten hat sich eine neue Kombination an Testing-Tools für die Frontend-Entwicklung gebildet, die von vielen Entwickler:innen favorisiert wird. Markus Oberlehner erklärt, wie man Cypress Component Testing und Vitest am besten verbind[...]

In den letzten Monaten hat sich eine neue Kombination an Testing-Tools für die Frontend-Entwicklung gebildet, die von vielen Entwickler:innen favorisiert wird. Markus Oberlehner erklärt, wie man Cypress Component Testing und Vitest am besten verbinden kann.

Unser Sponsor


Diese Revision wird euch präsentiert von newcubator, einem Softwaredienstleister mit den Standorten Dortmund und Hannover. Newcubator abeitet täglich an innovativen Webanwendungen oder mobilen Lösungen – auch für Branchen, die nicht in erster Linie digital unterwegs sind. Vielleicht hast du Lust, das Team als Lead Developer:in zu unterstützen? Idealerweise direkt am Standort Dortmund. Neben Programmieren und Coden, agierst du als aktive Schnittstelle zwischen Team und Kund:innen; Projektmanagement und kaufmännische Tätigkeiten wie Angebotserstellung oder Qualitätsmanagement gehören ebenfalls zu deinen Aufgaben. 
Bei Newcubator bekommst du die Möglichkeit das Unternehmen aktiv mitzugestalten. – Mit einem außergewöhnlichen Team aus Software-Architekt:innen, UX-Designer:innen und Backend- und Frontend-Entwickler:innen.
Hast du Lust? Dann meld dich bei Newcubator. Mehr Infos zu der Stelle findest du unter newcubator.com/jobs.


Schaunotizen

[00:00:00] Testing mit Cypress und Vitest
Cypress und Vitest sind Test Runner. Test Runner sind Tools, die von Entwickler:innen geschriebene Tests auszuführen. Dabei kommt Cypress mit einem virtuellen Browser, während Vitest unschlagbar in der Ausführungszeit ist. Vitest kommt aus dem gleichem Universum wie Vue und Vite. Vitest, wie auch Cypress, sind allerdings Framework agnostisch und können mit beliebigen Bibliotheken eingesetzt werden, wie React und Angular. Eine Benutzung von Vitest zusammen mit dem Bundler Vite ist sinnvoll, da beide Tools die gleiche Konfiguration nutzen können. Es ist allerdings keine Voraussetzung.
Markus Geheimtipp ist ein unabhängiger Driver, der Tests sowohl in Cypress, als auch in Vitest ausführen kann.
Im Laufe der Revision geht Markus auf die Begrifflichkeiten von Unit, Integration und System Tests ein. Außerdem erklärt er, in welchen Fällen er es bevorzugt Mocks und Stubs zu benutzen, und in welchen nicht.

Links

Good Vue Tests von Markus Oberlehner
Vue.js Conf Berlin, auf der Markus Oberlehner einen Talk geben wird




Verwandte Revisionen

Revision 458: Cypress
Revision 520: Unit-Testing / Testing Library
Revision 473: Vue 3, taugts?

Revision 535: Testing mit Cypress und Vitest

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 547: The State of CSS (Teil 2)

Working Draft

Revision 546: Ausbildungspfade im Web

Working Draft

Revision 545: The State of CSS (Teil 1)

Working Draft

Revision 544: Ungeplant gastliches Glücksrad (IV)

Working Draft

Revision 542: Gastliches Glücksrad III

Working Draft

Revision 541: Warum Rust?

Working Draft

Revision 540: Die W3C Accessibility Standards

Working Draft

Revision 539: Komponentenbibliotheken – Why? How? What?

Working Draft

Revision 538: Wie entwickelt man ein Design System?

Working Draft

Revision 537: Was gibt es Neues in Cypress 9 und 10?

Working Draft

Revision 536: Das Imposter Syndrom bei Entwickler*innen

Working Draft

Revision 535: Testing mit Cypress und Vitest

Working Draft