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

Working Draft

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

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

Unser Sponsor


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


Schaunotizen

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

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

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

[00:00:00] Keine Schaunotizen

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

Revision 541: Warum Rust?

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


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

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

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

Unser Sponsor


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


Schaunotizen

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

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

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

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

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

Links

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

Revision 540: Die W3C Accessibility Standards

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


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

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

Unser Sponsor


Die vuejs[...]

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

Unser Sponsor


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


Schaunotizen

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

[00:00:00] Keine Schaunotizen

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

Revision 539: Komponentenbibliotheken – Why? How? What?

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


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

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

Unser Sponsor


Diese Revision wird von Langu[...]

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

Unser Sponsor


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


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

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

Revision 538: Wie entwickelt man ein Design System?

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


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

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

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

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

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

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


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

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

Unser Sponsor


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

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

Unser Sponsor


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





Schaunotizen

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

Links

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

Verwandte Revisionen

Revision 495: Storyblok – Einblicke in ein StartUp

Revision 536: Das Imposter Syndrom bei Entwickler*innen

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


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

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

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

Unser Sponsor


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


Schaunotizen

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

Links

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




Verwandte Revisionen

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

Revision 535: Testing mit Cypress und Vitest

<p>In dieser Ausgabe legt Schepp Vanessa und Hans seine Überlegungen zu CSS Houdini dar.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] <a href="https://schepp.github.io/a-property-to-unlock-the-world/#/">CSS Houdini, gescheitert?</a></dt>
<dd>Nach einem Recap, was CSS Houdini ist und warum es beinahe &#8222;<a href="https://lists.w3.org/Archives/Public/www-style/2014Dec/0100.html">WhatTF</a>&#8220; geheißen hätte, stellt Schepp die These auf, dass das Houdini-Projekt gescheitert sei. Es gibt aus seiner Sicht dafür einige Indikatoren, sowohl was den <a href="https://ishoudinireadyyet.com/">Implementationseifer der Non-Chromium-Browser-Hersteller angeht</a>, also auch <a href="https://iamvdo.me/en/blog/css-houdini#so-real-magic-or-smoke-and-mirrors">Kritik aus der Entwicklerschaft</a>, u.a. die Paint API sei nichts weiter als <a href="https://schepp.github.io/a-property-to-unlock-the-world/#/0/36"><code>-webkit-canvas()</code></a> in neuem Gewand.<br />
So schwarzmalerisch seine Schlussfolgerung ist, so sehr freut er sich über einen Teilfeature von Houdini, nämlich die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@property"><code>@property</code> At-Rule</a>. Diese ergänzt CSS um die Möglichkeit zur Typ-Annotation von Custom Properties, so dass der Browser diese fortan nicht mehr nur als dumme Strings betrachtet, sondern als Fließkomma- oder Ganzzahl, als Farbe, Rotation oder Längenmaß. Und das wiederum eröffnet einem in Kombination mit CSS Animationen und <code>calc()</code> eine Welt an Möglichkeiten, die man zuvor nicht hatte, z.B.:</p>
<ul>
<li><a href="https://schepp.github.io/a-property-to-unlock-the-world/#/0/47">Animierte Gradienten</a></li>
<li><a href="https://schepp.github.io/a-property-to-unlock-the-world/#/0/48">Automatisierte Slideshows</a></li>
<li><a href="https://schepp.github.io/a-property-to-unlock-the-world/#/0/49">Objekt-Morphing</a></li>
<li>oder <a href="https://twitter.com/derSchepp/status/1267319208918032385">sogar mathematische Algebra</a>!</li>
</ul>
<p>Schepps Wunsch wäre daher, dass sich die Browser-Hersteller auf die kleineren Dinge konzentrierten und dass <code>@property</code> zukünftig auch in Firefox und Safari implementiert würde (eventuell auch per Crowdfunding durch die Firma Igalia):</p>
<ul>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1684605">Mozilla Bug</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=189692">WebKit Bug</a></li>
<li><a href="https://www.igalia.com/open-prioritization/index">Igalia Open Prioritization</a></li>
</ul>
<p>Was ist Eure Meinung zu CSS Houdini? Schickt uns einen Tweet an <a href="https://twitter.com/workingdraft">@workingdraft</a>, oder diskutiert mit in unserem <a href="https://draft.community/">Community Slack</a>!</dd>
</dl>


In dieser Ausgabe legt Schepp Vanessa und Hans seine Überlegungen zu CSS Houdini dar. Schaunotizen [00:00:59] CSS Houdini, gescheitert? Nach einem Recap, was CSS Houdini ist und warum es beinahe &#8222;WhatTF&#8220; geheißen hätte, stellt Schepp die These auf, dass das Houdini-Projekt gescheitert sei. Es gibt aus seiner Sicht dafür einige Indikatoren, sowohl was den Implementationseifer [&#8230;]

In dieser Ausgabe legt Schepp Vanessa und Hans seine Überlegungen zu CSS Houdini dar.
Schaunotizen

[00:00:59] CSS Houdini, gescheitert?
Nach einem Recap, was CSS Houdini ist und warum es beinahe „WhatTF“ geheißen hätte, stellt Schepp di[...]

In dieser Ausgabe legt Schepp Vanessa und Hans seine Überlegungen zu CSS Houdini dar.
Schaunotizen

[00:00:59] CSS Houdini, gescheitert?
Nach einem Recap, was CSS Houdini ist und warum es beinahe „WhatTF“ geheißen hätte, stellt Schepp die These auf, dass das Houdini-Projekt gescheitert sei. Es gibt aus seiner Sicht dafür einige Indikatoren, sowohl was den Implementationseifer der Non-Chromium-Browser-Hersteller angeht, also auch Kritik aus der Entwicklerschaft, u.a. die Paint API sei nichts weiter als -webkit-canvas() in neuem Gewand.
So schwarzmalerisch seine Schlussfolgerung ist, so sehr freut er sich über einen Teilfeature von Houdini, nämlich die @property At-Rule. Diese ergänzt CSS um die Möglichkeit zur Typ-Annotation von Custom Properties, so dass der Browser diese fortan nicht mehr nur als dumme Strings betrachtet, sondern als Fließkomma- oder Ganzzahl, als Farbe, Rotation oder Längenmaß. Und das wiederum eröffnet einem in Kombination mit CSS Animationen und calc() eine Welt an Möglichkeiten, die man zuvor nicht hatte, z.B.:

Animierte Gradienten
Automatisierte Slideshows
Objekt-Morphing
oder sogar mathematische Algebra!

Schepps Wunsch wäre daher, dass sich die Browser-Hersteller auf die kleineren Dinge konzentrierten und dass @property zukünftig auch in Firefox und Safari implementiert würde (eventuell auch per Crowdfunding durch die Firma Igalia):

Mozilla Bug
WebKit Bug
Igalia Open Prioritization

Was ist Eure Meinung zu CSS Houdini? Schickt uns einen Tweet an @workingdraft, oder diskutiert mit in unserem Community Slack!

Revision 534: CSS Houdini, gescheitert?

<p>Es ist mal wieder ein schöner <s>Dienstag</s><ins>Mittwoch</ins> und wir hauen die nächste Folge raus. Diesmal mit von der Partie sind der Schepp und der Hans. Schepp berichtet über die Core Web Vitals &#8211; mehr dazu unten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Core Web Vitals</dt>
<dd>Wenn man sich die aktuellen Performance-Metriken im Frontend so anschaut, guckt man meistens auf die <a href="https://web.dev/vitals/">Web Vitals</a> von Google. Schepp erklärt, warum wir die Web Vitals haben und wie die Core Web Vitals funktionieren. Auf alle Metriken der Web Vitals ist er auch schon mal im <a href="https://wowirsindistvorne.show/web-performance-mit-christian-schepp-schaefer/">Wo Wir Sind Ist Vorne Podcast</a> eingegangen. Außerdem sprechen wir über die kürzlich neu eingeführte Metrik <a href="https://web.dev/inp/">Interaction to Next Paint</a>.<br />
Wer mehr zu den Web Vitals lernen möchte, schaut am besten Mal <a href="https://web.dev/learn-web-vitals/">hier</a> vorbei.</dd>
</dl>


Es ist mal wieder ein schöner DienstagMittwoch und wir hauen die nächste Folge raus. Diesmal mit von der Partie sind der Schepp und der Hans. Schepp berichtet über die Core Web Vitals &#8211; mehr dazu unten. Schaunotizen [00:00:59] Core Web Vitals Wenn man sich die aktuellen Performance-Metriken im Frontend so anschaut, guckt man meistens auf [&#8230;]

Es ist mal wieder ein schöner DienstagMittwoch und wir hauen die nächste Folge raus. Diesmal mit von der Partie sind der Schepp und der Hans. Schepp berichtet über die Core Web Vitals – mehr dazu unten.
Schaunotizen

[00:00:59] Core Web Vitals[...]

Es ist mal wieder ein schöner DienstagMittwoch und wir hauen die nächste Folge raus. Diesmal mit von der Partie sind der Schepp und der Hans. Schepp berichtet über die Core Web Vitals – mehr dazu unten.
Schaunotizen

[00:00:59] Core Web Vitals
Wenn man sich die aktuellen Performance-Metriken im Frontend so anschaut, guckt man meistens auf die Web Vitals von Google. Schepp erklärt, warum wir die Web Vitals haben und wie die Core Web Vitals funktionieren. Auf alle Metriken der Web Vitals ist er auch schon mal im Wo Wir Sind Ist Vorne Podcast eingegangen. Außerdem sprechen wir über die kürzlich neu eingeführte Metrik Interaction to Next Paint.
Wer mehr zu den Web Vitals lernen möchte, schaut am besten Mal hier vorbei.

Revision 533: Frontend Performance Metriken – Die Core Web Vitals

<p>Wir sind wieder mit einer neuen Episode am Start und diesmal geht es um das Thema &#8222;Infrastructure as Code&#8220;. Hans spricht mit <a href="https://www.linkedin.com/in/thomaseisenbarth/">Thomas Eisenbarth</a> über seine Erfahrungen mit dem Thema. Ein richtig interessanter Talk, der die Seite der Development Operations etwas näher beleuchtet.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://pexon-consulting.de/karriere?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/06/banner_podcast_1_banner_podcast-scaled.jpg" alt="" /></a></p>
<div class="message_content">
<p>Du möchtest als Cloud Consultant bzw. Cloud Engineer durchstarten? Dann bist du bei Pexon genau richtig. Pexon ist spezialisiert auf die Entwicklung für die Bereiche Cloud, DevOps und Data und baut mit seinen Kunden CICD-Pipelines, Cloud-Native Software, Kubernetes-Cluster, Data-analytics-Pipelines in der Public-Cloud.</p>
<p>Du hast das Gefühl, du bist in den Bereichen noch nicht ganz sattelfest? Kein Problem: Pexons USP ist das Cloud-Bootcamp für Quereinsteiger und Softwareentwickler. Hier kannst du dich zwei Monate lang zu 100 Prozent auf Lernen konzentrieren und an verschiedenen Musterprojekten im Bereich Cloud arbeiten. Die ganze Zeit über wirst du von einem Mentor begleitet. Sobald du weit genug bist, bekommst du ein Projekt, das zu dir passt und Du startest als Vollzeit Consultant bei Pexon. Du wirst sehen, du kannst schnell Verantwortung übernehmen für Projekte, Kunden und Prozesse. Das klingt gut?<br />
Für deine Bewerbung: Geh einfach auf <a href="https://pexon-consulting.de/karriere?ref=workingdraft.de">pexon-consulting.de/karriere</a>. Das Team von Pexon freut sich, dich kennenzulernen.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:33] Infrastructure as Code</dt>
<dd>Den meisten von euch ist der Begriff <i>Infrastructure as Code</i> bestimmt mal über den Weg gelaufen. Mit der Entwicklung, die Hardware, wie Netzwerk und Server, nicht mehr selbst zu betreiben, sondern alles in die Cloud zu schieben, ist die Reproduzierbarkeit von Infrastruktur relevant geworden.<br />
Wir diskutieren, woher wir kommen, warum wir Infrastruktur in Code beschreiben wollen und welchen Effekt das auf die Zusammensetzung eines Teams haben kann. Außerdem gibt Thomas Tipps, wie man sich selbst dem Thema annähern kann, auch wenn man noch nicht so viel Ahnung davon hat.<br />
Erwähnt haben wir unter anderem:</p>
<ul>
<li><a href="https://www.terraform.io/">Terraform</a></li>
<li><a href="https://docs.chef.io/inspec/">Inspec</a></li>
</ul>
</dd>
</dl>
<p>Ihr wollt über das Thema etwas diskutieren? Dann schaut mal in unserer Community auf Slack vorbei: <a href="https://draft.community/">draft.community</a>.</p>


Wir sind wieder mit einer neuen Episode am Start und diesmal geht es um das Thema &#8222;Infrastructure as Code&#8220;. Hans spricht mit Thomas Eisenbarth über seine Erfahrungen mit dem Thema. Ein richtig interessanter Talk, der die Seite der Development Operations etwas näher beleuchtet. Unser Sponsor Du möchtest als Cloud Consultant bzw. Cloud Engineer durchstarten? Dann [&#8230;]

Wir sind wieder mit einer neuen Episode am Start und diesmal geht es um das Thema „Infrastructure as Code“. Hans spricht mit Thomas Eisenbarth über seine Erfahrungen mit dem Thema. Ein richtig interessanter Talk, der die Seite der Develo[...]

Wir sind wieder mit einer neuen Episode am Start und diesmal geht es um das Thema „Infrastructure as Code“. Hans spricht mit Thomas Eisenbarth über seine Erfahrungen mit dem Thema. Ein richtig interessanter Talk, der die Seite der Development Operations etwas näher beleuchtet.

Unser Sponsor


Du möchtest als Cloud Consultant bzw. Cloud Engineer durchstarten? Dann bist du bei Pexon genau richtig. Pexon ist spezialisiert auf die Entwicklung für die Bereiche Cloud, DevOps und Data und baut mit seinen Kunden CICD-Pipelines, Cloud-Native Software, Kubernetes-Cluster, Data-analytics-Pipelines in der Public-Cloud.
Du hast das Gefühl, du bist in den Bereichen noch nicht ganz sattelfest? Kein Problem: Pexons USP ist das Cloud-Bootcamp für Quereinsteiger und Softwareentwickler. Hier kannst du dich zwei Monate lang zu 100 Prozent auf Lernen konzentrieren und an verschiedenen Musterprojekten im Bereich Cloud arbeiten. Die ganze Zeit über wirst du von einem Mentor begleitet. Sobald du weit genug bist, bekommst du ein Projekt, das zu dir passt und Du startest als Vollzeit Consultant bei Pexon. Du wirst sehen, du kannst schnell Verantwortung übernehmen für Projekte, Kunden und Prozesse. Das klingt gut?
Für deine Bewerbung: Geh einfach auf pexon-consulting.de/karriere. Das Team von Pexon freut sich, dich kennenzulernen.


Schaunotizen

[00:01:33] Infrastructure as Code
Den meisten von euch ist der Begriff Infrastructure as Code bestimmt mal über den Weg gelaufen. Mit der Entwicklung, die Hardware, wie Netzwerk und Server, nicht mehr selbst zu betreiben, sondern alles in die Cloud zu schieben, ist die Reproduzierbarkeit von Infrastruktur relevant geworden.
Wir diskutieren, woher wir kommen, warum wir Infrastruktur in Code beschreiben wollen und welchen Effekt das auf die Zusammensetzung eines Teams haben kann. Außerdem gibt Thomas Tipps, wie man sich selbst dem Thema annähern kann, auch wenn man noch nicht so viel Ahnung davon hat.
Erwähnt haben wir unter anderem:

Terraform
Inspec



Ihr wollt über das Thema etwas diskutieren? Dann schaut mal in unserer Community auf Slack vorbei: draft.community.

Revision 532: Infrastructure as Code

<p>Diese Ausgabe haben Vanessa und Schepp sich mit Manuel Matuzović (<a href="https://twitter.com/mmatuzo">@mmatuzo</a> / <a href="https://www.matuzo.at/">Webseite</a>), Frontend-Entwickler und Barrierefreiheitsexperte, zusammengetan und gemeinsam ein Plädoyer für mehr Markup-Eloquenz im Web gehalten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Mehr Eloquenz im Web!</dt>
<dd>
<ul>
<li>Manuels beyond tellerrand Talk <a href="https://www.youtube.com/watch?v=Wno1IhEBTxc">&#8222;Lost in Translation&#8220;</a></li>
<li><a href="https://www.youtube.com/watch?v=dCBZIsFl8s8">Accessibility Club Meetup #11</a></li>
<li><a href="https://validator.w3.org/">W3C Markup Validation Service</a></li>
<li><a href="https://www.htmhell.dev/">HTMLHell</a></li>
<li><a href="https://codepen.io/plfstr/full/zYqQeRw">HTML Tags Memory Test</a></li>
<li><a href="https://webaim.org/projects/million/">The WebAIM Million</a></li>
<li><a href="https://wave.webaim.org/">WAVE, das Web Accessibility Evaluation Tool</a></li>
<li>Umfrage von Manuel zum Einsatz von HTML-Validatoren auf <a href="https://twitter.com/mmatuzo/status/1516668003022249984">Twitter</a> und <a href="https://www.reddit.com/r/webdev/comments/s81e5c/do_you_validate_your_html/">Reddit</a></li>
<li><a href="https://create-react-app.dev/">Create React App</a></li>
<li><a href="https://github.com/oliverroick/netlify-plugin-html-validate">Netlify plugin for post-build validation of HTML</a></li>
<li><a href="https://www.corewebvitals.io/pagespeed/fix-avoid-excessive-dom-size-lighthouse#:~:text=An%20excessive%20DOM%20size%20means,a%20delay%20in%20page%20rendering.">Google Lighthouse: &#8222;Zu viele DOM Knoten&#8220;-Fehler</a></li>
<li><a href="https://www.youtube.com/watch?v=EGKNN4MVLq8">Eric Bailey &#8211; The Intersection of Accessibility and Performance</a></li>
<li><a href="https://www.youtube.com/watch?v=MHyAOZ45vnU">Harry Roberts &#8211; Get Your &#8222;head&#8220; Straight</a></li>
<li><a href="https://beyondtellerrand.com/events/dusseldorf-2022/speakers/tim-kadlec#talk">Tim Kadlec &#8211; The Big Picture</a></li>
<li>Das <code>fetchpriority</code>-Attribut, aka <a href="https://web.dev/priority-hints/">Priority Hints</a></li>
<li><a href="https://dequeuniversity.com/validator">HTML Validator Bookmarklet</a></li>
<li><a href="https://webhint.io/">Webhint.io</a> und dessen <a href="https://webhint.io/docs/user-guide/extensions/extension-browser/">Integration in die Edge-Devtools</a></li>
<li><a href="https://www.deque.com/axe/">axe</a></li>
<li><a href="https://alpinejs.dev/">Alpine.js</a></li>
<li><a href="https://www.meetup.com/CSS-Cafe/">Das CSS Café Meetup</a></li>
<li><a href="https://css-for-js.dev/">Josh Comeau: CSS for JavaScript Developers</a></li>
</ul>
</dd>
</dl>


Diese Ausgabe haben Vanessa und Schepp sich mit Manuel Matuzović (@mmatuzo / Webseite), Frontend-Entwickler und Barrierefreiheitsexperte, zusammengetan und gemeinsam ein Plädoyer für mehr Markup-Eloquenz im Web gehalten. Schaunotizen [00:01:00] Mehr Eloquenz im Web! Manuels beyond tellerrand Talk &#8222;Lost in Translation&#8220; Accessibility Club Meetup #11 W3C Markup Validation Service HTMLHell HTML Tags Memory Test The WebAIM [&#8230;]

Diese Ausgabe haben Vanessa und Schepp sich mit Manuel Matuzović (@mmatuzo / Webseite), Frontend-Entwickler und Barrierefreiheitsexperte, zusammengetan und gemeinsam ein Plädoyer für mehr Markup-Eloquenz im Web gehalten.
Schaunotizen

[00:01:00] Meh[...]

Diese Ausgabe haben Vanessa und Schepp sich mit Manuel Matuzović (@mmatuzo / Webseite), Frontend-Entwickler und Barrierefreiheitsexperte, zusammengetan und gemeinsam ein Plädoyer für mehr Markup-Eloquenz im Web gehalten.
Schaunotizen

[00:01:00] Mehr Eloquenz im Web!


Manuels beyond tellerrand Talk „Lost in Translation“
Accessibility Club Meetup #11
W3C Markup Validation Service
HTMLHell
HTML Tags Memory Test
The WebAIM Million
WAVE, das Web Accessibility Evaluation Tool
Umfrage von Manuel zum Einsatz von HTML-Validatoren auf Twitter und Reddit
Create React App
Netlify plugin for post-build validation of HTML
Google Lighthouse: „Zu viele DOM Knoten“-Fehler
Eric Bailey – The Intersection of Accessibility and Performance
Harry Roberts – Get Your „head“ Straight
Tim Kadlec – The Big Picture
Das fetchpriority-Attribut, aka Priority Hints
HTML Validator Bookmarklet
Webhint.io und dessen Integration in die Edge-Devtools
axe
Alpine.js
Das CSS Café Meetup
Josh Comeau: CSS for JavaScript Developers

Revision 531: Mehr Eloquenz im Web!

<p>Schepp begrüßte diesmal jemanden, dessen Aktivitäten er schon seit Jahren auf Twitter verfolgt: Wolfram Kriesing aus München (<a href="https://picostitch.com/">Blog</a> / <a href="https://twitter.com/wolframkriesing">Twitter</a>). </p>
<aside class="message long-message">
<h2>JSCraftCamp</h2>
<p><a href="https://jscraftcamp.org/"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 256px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/05/jscraftcamp.png" alt="" /><br />
</a></p>
<div class="message_content">
Das JSCraftCamp ist eine zweitägige Unkonferenz, bei der es um Software-Crafting von JavaScript-getriebener Software geht. Hier könnt Ihr nicht nur Euer Sprachverständnis gemeinsam mit anderen aufbauen oder schärfen, es können auch Programmierpattern, Frameworks oder Transpiler Themen für Sessions sein. Da es sich um eine Unkonferenz handelt, gestaltet Ihr alle das Programm zusammen, nach Euren Wünschen!</p>
<p>Wann: Am 17. und 18. Juni 2022<br />
Wo: München</p>
<p>Alle Infos unter <a href="https://jscraftcamp.org/">jscraftcamp.org</a>.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Von Katas, Craft Camps und Code Retreats</dt>
<dd>Wolfram ist nicht nur ein Urgestein der IT, sondern war auch Early Adopter der Sprache JavaScript. Zeitgleich mit dem Aufkommen der ersten JavaScript-Just-in-Time-Compiler gründete Wolfram mit einer Handvoll weiterer Visionäre die auf JavaScript spezialisierte Firma <a href="https://www.uxebu.com/">uxebu</a>. Dort hantierte man schon frühzeitig mit Enterprise-JavaScript-Frameworks wie dem <a href="https://dojotoolkit.org/">Dojo Toolkit</a> und entwickelte einen Konverter für Flashs SWF-Dateien namens <a href="https://www.youtube.com/watch?v=wqFPTdx09OY">Pixel Plant</a> und zahlreiche <a href="https://www.uxebu.com/index.html%3Fp=31.html">weitere Open Source Lösungen</a>.</p>
<p>Wolframs Passion für die Sprache führte ihn immer tiefer in den Fuchsbau und schließlich zum Konzept des Test-Driven-Developments (TDD). Wir reden darüber, wieso TDD nicht nur ein guter Ansatz zum Entwickeln ist, sondern sich mindestens ebenso gut zum Lernen und Verstehen einer Sache eignet.</p>
<p>Und schließlich reden wir auch über zahlreiche Lernplattformen und Events, die Wolfram zu den zuvor genannten Themen aus der Taufe gehoben hat:</p>
<ul>
<li>Das <a href="https://jscraftcamp.org">JSCraftCamp</a> &#8211; eine Software-Crafting-Unkonferenz, nur eben fokussiert auf die Sprache JavaScript. Das nächste Camp wartet am 17. und 18. Juni 2022 in München auf Euch!</li>
<li>Die <a href="https://jskatas.org">JavaScript Katas</a> &#8211; eine Sammlung von Coding-Herausforderungen, genannt <a href="https://de.wikipedia.org/wiki/Kata_(Karate)">Katas</a>, die einem helfen sollen, sich mit der Funktionsweise einzelner JavaScript-Bestandteile vertraut zu machen. Der Clou ist, dass das Ganze natürlich in einen TDD-Unterbau eingebettet ist.</li>
<li>Die <a href="http://jscoderetreat.com">JavaScript Code Retreats</a> &#8211; eine weitere Event-Serie, in der Wolfram mit einem Münchener Ableger mitmischt. Diese Ein-Tages-Events finden zeitgleich weltweit statt und auch dort geht es darum, seine Skills mit Hilfe von TDD auf das nächste Level zu hieven.</li>
<li>Das <a href="https://www.meetup.com/JavaScript-The-Language">JavaScript The Language Meetup</a> &#8211; hier wird nur aller feinstes JavaScript in Form von TDD-getriebenem Mob-Programming serviert und verköstigt.</li>
</ul>
</dd>
</dl>


Schepp begrüßte diesmal jemanden, dessen Aktivitäten er schon seit Jahren auf Twitter verfolgt: Wolfram Kriesing aus München (Blog / Twitter). JSCraftCamp Das JSCraftCamp ist eine zweitägige Unkonferenz, bei der es um Software-Crafting von JavaScript-getriebener Software geht. Hier könnt Ihr nicht nur Euer Sprachverständnis gemeinsam mit anderen aufbauen oder schärfen, es können auch Programmierpattern, Frameworks oder [&#8230;]

Schepp begrüßte diesmal jemanden, dessen Aktivitäten er schon seit Jahren auf Twitter verfolgt: Wolfram Kriesing aus München (Blog / Twitter). 

JSCraftCamp



Das JSCraftCamp ist eine zweitägige Unkonferenz, bei der es um Software-Crafting von Java[...]

Schepp begrüßte diesmal jemanden, dessen Aktivitäten er schon seit Jahren auf Twitter verfolgt: Wolfram Kriesing aus München (Blog / Twitter). 

JSCraftCamp



Das JSCraftCamp ist eine zweitägige Unkonferenz, bei der es um Software-Crafting von JavaScript-getriebener Software geht. Hier könnt Ihr nicht nur Euer Sprachverständnis gemeinsam mit anderen aufbauen oder schärfen, es können auch Programmierpattern, Frameworks oder Transpiler Themen für Sessions sein. Da es sich um eine Unkonferenz handelt, gestaltet Ihr alle das Programm zusammen, nach Euren Wünschen!
Wann: Am 17. und 18. Juni 2022
Wo: München
Alle Infos unter jscraftcamp.org.


Schaunotizen

[00:01:00] Von Katas, Craft Camps und Code Retreats
Wolfram ist nicht nur ein Urgestein der IT, sondern war auch Early Adopter der Sprache JavaScript. Zeitgleich mit dem Aufkommen der ersten JavaScript-Just-in-Time-Compiler gründete Wolfram mit einer Handvoll weiterer Visionäre die auf JavaScript spezialisierte Firma uxebu. Dort hantierte man schon frühzeitig mit Enterprise-JavaScript-Frameworks wie dem Dojo Toolkit und entwickelte einen Konverter für Flashs SWF-Dateien namens Pixel Plant und zahlreiche weitere Open Source Lösungen.
Wolframs Passion für die Sprache führte ihn immer tiefer in den Fuchsbau und schließlich zum Konzept des Test-Driven-Developments (TDD). Wir reden darüber, wieso TDD nicht nur ein guter Ansatz zum Entwickeln ist, sondern sich mindestens ebenso gut zum Lernen und Verstehen einer Sache eignet.
Und schließlich reden wir auch über zahlreiche Lernplattformen und Events, die Wolfram zu den zuvor genannten Themen aus der Taufe gehoben hat:

Das JSCraftCamp – eine Software-Crafting-Unkonferenz, nur eben fokussiert auf die Sprache JavaScript. Das nächste Camp wartet am 17. und 18. Juni 2022 in München auf Euch!
Die JavaScript Katas – eine Sammlung von Coding-Herausforderungen, genannt Katas, die einem helfen sollen, sich mit der Funktionsweise einzelner JavaScript-Bestandteile vertraut zu machen. Der Clou ist, dass das Ganze natürlich in einen TDD-Unterbau eingebettet ist.
Die JavaScript Code Retreats – eine weitere Event-Serie, in der Wolfram mit einem Münchener Ableger mitmischt. Diese Ein-Tages-Events finden zeitgleich weltweit statt und auch dort geht es darum, seine Skills mit Hilfe von TDD auf das nächste Level zu hieven.
Das JavaScript The Language Meetup – hier wird nur aller feinstes JavaScript in Form von TDD-getriebenem Mob-Programming serviert und verköstigt.

Revision 530: Von Katas, Craft Camps und Code Retreats

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 541: Warum Rust?

Working Draft

Revision 540: Die W3C Accessibility Standards

Working Draft

Revision 539: Komponentenbibliotheken – Why? How? What?

Working Draft

Revision 538: Wie entwickelt man ein Design System?

Working Draft

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

Working Draft

Revision 536: Das Imposter Syndrom bei Entwickler*innen

Working Draft

Revision 535: Testing mit Cypress und Vitest

Working Draft

Revision 534: CSS Houdini, gescheitert?

Working Draft

Revision 533: Frontend Performance Metriken – Die Core Web Vitals

Working Draft

Revision 532: Infrastructure as Code

Working Draft

Revision 531: Mehr Eloquenz im Web!

Working Draft

Revision 530: Von Katas, Craft Camps und Code Retreats

Working Draft