<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 <code>ascent-override</code>, <code>descent-override</code>, <code>size-adjust</code> und <code>line-gap-override</code> 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, <code>@font-face</code> 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;. 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 Gei…

Working Draft

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üher war)
benötigte die API, um Inhalte dynamisch nachladen zu können. Weil damals XML
allerorten gehyped wurde, und alles mit „XML“ im Namen große Chancen hatte, in
den Internet Explorer eingebaut zu werden, kam man auf die Idee, die API mit
„XML“ zu prefixen und so in den IE einzuschmuggeln.

Außerdem erinnern wir uns an das Konzept von JSONP, das aber eigentlich
überhaupt gar nichts mit der XMLHttpRequest-API zu tun hat, und mit dem man
Cross-Origin-Datentransfers vor CORS realisiert hat.

[00:46:13] DAS ITEMTYPE-ATTRIBUT

Dieses HTML-Attribut stammt aus dem schema.org-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 Such-Galerie anschauen.



Schepp empfiehlt, heutzutage statt auf HTML-Attribute besser auf JSON-LD zu
setzen, weil man mittlerweile ja eher in Baukästen denn in Seiten denkt und dann
ein zentraler Ansatz förderlicher ist.

[00:54:43] DIE @FONT-FACE-AT-RULE

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 Descriptoren sind? Hierzu fällt uns
Tab Atkins-Bittners CSS-Begriffe-Lexikon ein (in welchem Descriptoren allerdings
nicht erwähnt werden).



Schepp weist auf die recht neuen Descriptoren ascent-override, descent-override,
size-adjust und line-gap-override hin, die dem Finetuning der vertikalen
Positionierung innerhalb einer Text-Zeile und des „Durchschusses“ von Schriften
dienen, aber vor allem Layout-Shifts beim Austauschen von Schriften per
font-display: swap verhindern sollen. Leider ein stark unterdokumentiertes
Feature, von dem Schepp nur im Rahmen eines Talks von Jake Archibald gelernt
hat. Florian kennt ein gutes Tool, um das einzustellen, nämlich den
Fallback-Font-Generator.

In Sachen Performance empfiehlt Schepp, @font-face 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 einen spannenden Talk zum Thema
„Schriften schnell laden“. Nach seinem Talk haben wir noch ein paar Extrainfos
im Rahmen eines Interviews aus ihm herausgequetscht.

Florian bringt das Thema „lokale Schriften“ ins Spiel. Neben der altbekannten
local()-Funktion gibt es neuerdings auch die Local Font Access API, mit der man
auch schon in gewissen Browsern herumspielen kann. Schepp meint sich daran zu
erinnern, dass Figma diese API schon nutzt – aber das stellt sich wohl als
Irrtum heraus.

Revision 544: Ungeplant gastliches Glücksrad (IV)

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

<p>Diese Revision haben wir Nico Brünjes (<a href="https://twitter.com/nicobruenjes">Twitter</a> / <a href="https://couchblog.de/nico/">Web</a>) und Hennes Römmer (<a href="https://twitter.com/hennnnes">Twitter</a> / <a href="https://www.hennes.me/">Web</a>) von ZEIT ONLINE zu Gast und die beiden erzählen Schepp von den Herausforderungen und Schwierigkeiten der Mitarbeiter-Gewinnung im Tech-Sektor (bezogen auf ZEIT ONLINE).</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Tech Recruiting</dt>
<dd>Ausgangslage ist dass wir es mit einem Bewerbermarkt zu tun haben, also einem großen Angebot an Arbeit und Jobs und nicht genügend Programmierer* und Bewerber*innen. Also muss sich eine potentielle Arbeitgeberin wie ZEIT ONLINE reinhängen: </p>
<ul>
<li>Man braucht eine attraktive Außendarstellung des Teams, was bei ZEIT ONLINE in Form eines Tech-Blogs nicht so gut geklappt hat und nun über eine <a href="https://dev.zeit.de/">Steckbrief-Microsite</a> gelöst wird. Sind Meetups im eigenen Haus auch ein Weg?</li>
<li>Dann gilt es, die perfekte Stellenanzeige zu schreiben. Allerdings gilt auch hier: it depends. Und zwar von der anzusprechenden Person. Die eine mag es detailliert, die andere nicht. Und sollte man Anforderungen zu klar formulieren und Gefahr gehen, mögliche Bewerber*innen zu früh abzuschrecken?</li>
<li>Jetzt muss die Stellenanzeige noch zu den richtigen Personen gelangen. Welche Ausspielungswege haben sich da bei ZEIT ONLINE als hilfreich erwiesen? Stepstone? Indeed? Oder Stack Overflow?</li>
</ul>
<p>Dankenswerterweise bekommt ZEIT ONLINE viele Bewerbungen, aber oft sind es nicht die passenden. Es bewerben sich z.B. Junioren auf Senioren-Posten, Backend-Entwickelnde auf Frontend-Stellenausschreibungen und alle sind sie &#8222;Fullstack&#8220;. Sind die Stellenanzeigen doch zu unklar formuliert? Oder versuchen die Bewerber*innen einfach Ihr Glück?</p>
<p>Ist eine Bewerberin oder ein Bewerber einmal im Rennen, gilt es sich in Interviews kennenzulernen und über eine Coding Challenge einen Einblick in die Arbeitsweisen beider Seiten zu bekommen.</p>
<p>Hat eine Bewerberin oder ein Bewerber das Team von ZEIT ONLINE überzeugt, gilt es, die Person gut zu onboarden. Hierzu wird der neuen Person eine Partnerperson aus dem Team zur Seite gestellt, die mit Rat und Tat hilft. Auch pflegt man bei ZEIT ONLINE pair zu programmieren und über Pull-Requests zu debattieren, so dass jemand neues gut in die bestehenden Strukturen hineinkommt.</p>
<p>Zu guter Letzt besteht gute HR-Arbeit natürlich auch darin, einmal akquiriertes Personal im Unternehmen zu halten. Bei ZEIT ONLINE passiert das über &#8222;Perks&#8220;, regelmäßige Gespräche und interne Mitarbeiteraktionen.</dd>
</dl>


Diese Revision haben wir Nico Brünjes (Twitter / Web) und Hennes Römmer (Twitter
/ Web) von ZEIT ONLINE zu Gast und die beiden erzählen Schepp von den
Herausforderungen und Schwierigkeiten der Mitarbe…

Diese Revision haben wir Nico Brünjes (Twitter / Web) und Hennes Römmer (Twitter
/ Web) von ZEIT ONLINE zu Gast und die beiden erzählen Schepp von den
Herausforderungen und Schwierigkeiten der Mitarbeiter-Gewinnung im Tech-Sektor
(bezogen auf ZEIT ONLINE).


SCHAUNOTIZEN

[00:01:00] TECH RECRUITING

Ausgangslage ist dass wir es mit einem Bewerbermarkt zu tun haben, also einem
großen Angebot an Arbeit und Jobs und nicht genügend Programmierer* und
Bewerber*innen. Also muss sich eine potentielle Arbeitgeberin wie ZEIT ONLINE
reinhängen:



 * Man braucht eine attraktive Außendarstellung des Teams, was bei ZEIT ONLINE
   in Form eines Tech-Blogs nicht so gut geklappt hat und nun über eine
   Steckbrief-Microsite gelöst wird. Sind Meetups im eigenen Haus auch ein Weg?
 * Dann gilt es, die perfekte Stellenanzeige zu schreiben. Allerdings gilt auch
   hier: it depends. Und zwar von der anzusprechenden Person. Die eine mag es
   detailliert, die andere nicht. Und sollte man Anforderungen zu klar
   formulieren und Gefahr gehen, mögliche Bewerber*innen zu früh abzuschrecken?
 * Jetzt muss die Stellenanzeige noch zu den richtigen Personen gelangen. Welche
   Ausspielungswege haben sich da bei ZEIT ONLINE als hilfreich erwiesen?
   Stepstone? Indeed? Oder Stack Overflow?

Dankenswerterweise bekommt ZEIT ONLINE viele Bewerbungen, aber oft sind es nicht
die passenden. Es bewerben sich z.B. Junioren auf Senioren-Posten,
Backend-Entwickelnde auf Frontend-Stellenausschreibungen und alle sind sie
„Fullstack“. Sind die Stellenanzeigen doch zu unklar formuliert? Oder versuchen
die Bewerber*innen einfach Ihr Glück?

Ist eine Bewerberin oder ein Bewerber einmal im Rennen, gilt es sich in
Interviews kennenzulernen und über eine Coding Challenge einen Einblick in die
Arbeitsweisen beider Seiten zu bekommen.

Hat eine Bewerberin oder ein Bewerber das Team von ZEIT ONLINE überzeugt, gilt
es, die Person gut zu onboarden. Hierzu wird der neuen Person eine Partnerperson
aus dem Team zur Seite gestellt, die mit Rat und Tat hilft. Auch pflegt man bei
ZEIT ONLINE pair zu programmieren und über Pull-Requests zu debattieren, so dass
jemand neues gut in die bestehenden Strukturen hineinkommt.

Zu guter Letzt besteht gute HR-Arbeit natürlich auch darin, einmal akquiriertes
Personal im Unternehmen zu halten. Bei ZEIT ONLINE passiert das über „Perks“,
regelmäßige Gespräche und interne Mitarbeiteraktionen.

Revision 543: Tech Recruiting

<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 😬<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! Oder etwa nicht? 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 😭</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? 🤯<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> und bedeutet, dass als Wert wahlweise ein ⌚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. 🤔 Wisst Ihr es? 👀</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 🤩</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 „Mit Gast“-Premiere
bekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor
des Web Weekly Newsletters, setzte sich zusamm…

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! Oder etwa nicht? 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> ] und bedeutet, dass als
Wert wahlweise ein ⌚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 zweiten Glücksrad mit Gast
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. 🤔 Wisst Ihr es? 👀

[00:44:36] HTML | GLOBAL_ATTRIBUTES | CLASS

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 BEM, die
anderen setzen auf Utility-Klassen, und Dritte wie Harry Roberts mischen beides
munter. Schepp mag es zudem, so viel wie möglich mit HTML-Attributen à la
aria-hidden / hidden, aria-current & Co zu arbeiten, weil man Accessibility
obendrauf bekommt. Beide freuen sich sehr auf all die neuen Möglichkeiten, mit
dem :has()-Selektor CSS zu strukturieren 🤩

[00:58:25] CSS | SELECTORS | ::-MOZ-COLOR-SWATCH

Das Pseudo-Element ::-moz-color-swatch 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 ::-webkit-color-swatch. In dem
Zusammenhang kommen wir auf das Open UI Projekt 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 .showPicker() sich programmatisch öffnen
lassen könnt.

Revision 542: Gastliches Glücksrad III

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

<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">
<h3>Unser Sponsor</h3>
<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 Stefa…

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

<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">
<h3>Unser Sponsor</h3>
<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 basiert auch die Deutsche 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>.</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 reden über die Zielrichtung der WCAG, darüber wie sie funktioniert und 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 geht es auch noch kurz ü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="https://www.w3.org/WAI/courses/foundations-course/">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 lang…

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 basiert auch die Deutsche
   Barrierefreie-Informationstechnik-Verordnung (BITV) und die 2016
   verabschiedete, stattdessen greifende Web Accessibility Directive (Directive
   (EU) 2016/2102).
 * 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
reden über die Zielrichtung der WCAG, darüber wie sie funktioniert und 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 geht es auch noch kurz ü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 customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2
requirements (success criteria) and techniques.

Revision 540: Die W3C Accessibility Standards

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

<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">
<h3>Unser Sponsor</h3>
<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 im 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, inklusive 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 Nutzung 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 „Komponentenbibliotheken“ im
allgemeinen und Storybook und Histoire im Speziellen …

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 im 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, inklusive 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
Nutzung 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>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.

<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">
<h3>Unser Sponsor</h3>
<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 an Bord. Weniger gut ist der Ansatz, ein Design System von oben zu verordnen. 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 sprec…

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 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 an Bord. Weniger gut ist der Ansatz, ein Design
System von oben zu verordnen. Zur Einführung empfiehlt er außerdem, sich nicht
direkt der Haupt-Webseite zu widmen, sondern erste Erfahrungen in einem
Nebenprojekt zu sammeln.

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 „Champions“ oder gar ein ganzes „Design Ops“-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.


KEINE SCHAUNOTIZEN

REVISION 524: DESIGN SYSTEME

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

NATHAN CURTIS: NAMING TOKENS IN DESIGN SYSTEMS

Terms, Types, and Taxonomy to Describe Visual Style

TAILWIND UI

Beautifully designed, expertly crafted components and templates, built by the
makers of Tailwind CSS. The perfect starting point for your next project.

MATERIAL UI

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.

CHAKRA UI

Chakra UI is a simple, modular and accessible component library that gives you
the building blocks you need to build your React applications.

Revision 538: Wie entwickelt man ein Design System?

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 544: Ungeplant gastliches Glücksrad (IV)

Working Draft

Revision 544: Ungeplant gastliches Glücksrad (IV)

Working Draft

Revision 543: Tech Recruiting

Working Draft

Revision 542: Gastliches Glücksrad III

Working Draft

Revision 542: Gastliches Glücksrad III

Working Draft

Revision 541: Warum Rust?

Working Draft

Revision 541: Warum Rust?

Working Draft

Revision 540: Die W3C Accessibility Standards

Working Draft

Revision 540: Die W3C Accessibility Standards

Working Draft

Revision 539: Komponentenbibliotheken – Why? How? What?

Working Draft

Revision 539: Komponentenbibliotheken – Why? How? What?

Working Draft

Revision 538: Wie entwickelt man ein Design System?

Working Draft