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

Working Draft

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>
<hr><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><hr>
<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 Unk…

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

<p>In einer offenen Diskussionsrunde bespricht Vanessa mit <a href="https://www.rademacher.digital/">Nikolaus Rademacher</a>, Senior Product Engineer bei Accenture Song, das Thema Software Schätzungen im Rahmen von Sprints. Zuvor war Nik bereits zu Gast, um über die Rolle und Verantwortung von Entwickler:innen in agilen Teams in <a href="https://workingdraft.de/510/">Revision 510</a> und <a href="https://workingdraft.de/512/">Revision 512</a> zu sprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] Richtig schätzen</dt>
<dd>Wie schätzt man eigentlich richtig? In dieser Revision widmen wir uns Schätzungen, egal ob Fibonacci, T-Shirt Größen, oder einfach nur Zahlen. Wir besprechen, ob man Bugs schätzen sollte, was Spill-Overs sind und welche Vor- und Nachteile es hat, die Schätzungen von Tickets in Bearbeitung nochmals anzupassen, wenn man as Gefühl hat, dass man daneben lag. Wir klären auch die Antwort auf die Frage: &#8222;Was ist besser? Zeit- oder Komplexitätsschätzungen&#8220;. Oder wie wäre es mit &#8222;Kundenwert&#8220; stattdessen? Sie ist: &#8222;es kommt darauf an!&#8220; ;)</dd>
<dd>Nik stellt das Cynefin Framework vor. Es ist ein nützliches Tool, um Tasks in &#8222;komplex&#8220;, &#8222;kompliziert&#8220;, &#8222;chaotisch&#8220; und &#8222;klar&#8220; zu kategorisieren.</dd>
<dd>Als Online Scrum Planning Poker Tool empfiehlt Vanessa <a href="https://planningpokeronline.com/">Planning Poker Online</a>.</dd>
</dl>


In einer offenen Diskussionsrunde bespricht Vanessa mit Nikolaus Rademacher,
Senior Product Engineer bei Accenture Song, das Thema Software Schätzungen im
Rahmen von Sprints. Zuvor war Nik bereits zu …

In einer offenen Diskussionsrunde bespricht Vanessa mit Nikolaus Rademacher,
Senior Product Engineer bei Accenture Song, das Thema Software Schätzungen im
Rahmen von Sprints. Zuvor war Nik bereits zu Gast, um über die Rolle und
Verantwortung von Entwickler:innen in agilen Teams in Revision 510 und Revision
512 zu sprechen.


SCHAUNOTIZEN

[00:00:58] RICHTIG SCHÄTZEN

Wie schätzt man eigentlich richtig? In dieser Revision widmen wir uns
Schätzungen, egal ob Fibonacci, T-Shirt Größen, oder einfach nur Zahlen. Wir
besprechen, ob man Bugs schätzen sollte, was Spill-Overs sind und welche Vor-
und Nachteile es hat, die Schätzungen von Tickets in Bearbeitung nochmals
anzupassen, wenn man as Gefühl hat, dass man daneben lag. Wir klären auch die
Antwort auf die Frage: „Was ist besser? Zeit- oder Komplexitätsschätzungen“.
Oder wie wäre es mit „Kundenwert“ stattdessen? Sie ist: „es kommt darauf an!“ ;)

Nik stellt das Cynefin Framework vor. Es ist ein nützliches Tool, um Tasks in
„komplex“, „kompliziert“, „chaotisch“ und „klar“ zu kategorisieren.

Als Online Scrum Planning Poker Tool empfiehlt Vanessa Planning Poker Online.

Revision 529: Richtig schätzen

<p>Wieder einmal zu Gast ist <a href="https://uhlmann.pro/">Jon Uhlmann</a> (<a href="https://twitter.com/jonnitto">@jonnitto</a>), mit dem wir diesmal über <a href="https://svelte.dev/">Svelte</a> und <a href="https://kit.svelte.dev/">SvelteKit</a> sprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] Svelte und SvelteKit</dt>
<dd>Bei Svelte hat sich in den letzten Jahren wieder einiges weiterentwickelt. Treu geblieben sind sie sich allerdings, denn wie gewohnt ist die Dokumentation sehr hilfreich, übersichtlich und umfassend. Im Gegensatz zu React ist Svelte tatsächlich &#8222;reaktiv&#8220;. Dabei kommt es mit einem eigenem Compiler. Seit einiger Zeit gelangt SvelteKit an immer mehr Beliebtheit. Das Framework ist der Nachfolger von <a href="https://sapper.svelte.dev/">Sapper</a>. Wer von Sapper auf SvelteKit migriert, kann sich an den <a href="https://kit.svelte.dev/docs/migrating">offiziellen Guide</a> halten. Zwei tolle Eigenschaften von Svelte sind der eingebaute Accessibility-Support und die Unterstützung von <a href="https://svelte.dev/tutorial/animate">Transitions und Animations</a>, die an die <a href="https://alpinejs.dev/directives/transition">Transitions von AlpineJS</a> erinnern. Wer sich nun für Svelte interessiert und auf der Suche nach mehr Informationen ist, kann bei der Webseite vom <a href="https://www.sveltesummit.com/">SvelteSummit</a> vorbeischauen. Erst vor Kurzem fand die diesjährige Remote Konferenz statt. Die Videos findet man auf <a href="https://www.youtube.com/watch?v=qqj2cBockqE">YouTube: Svelte Summit Sprint</a>. Um sich sonst auf dem Laufenden zu halten, empfehlen wir den <a href="https://svelte.dev/blog/whats-new-in-svelte-march-2022">Svelte Blog</a> mit monatlich erscheinenden Artikeln.</dd>
</dl>
<h3>Weitere Revisionen mit Jon Uhlmann</h3>
<ul>
<li><a href="https://workingdraft.de/504/">Revision 504: Analytics- &amp; Tracking-Tools</a></li>
<li><a href="https://workingdraft.de/490/">Revision 490: Alpine JS &amp; Petit Vue mit Jon Uhlmann</a></li>
<li><a href="https://workingdraft.de/496/">Revision 496: Tooling rund ums Frontend Tooling</a>.</li>
</ul>
<h3>Weitere Revisionen zum Thema Svelte</h3>
<ul>
<li><a href="https://workingdraft.de/413/">Revision 413: Svelte</a></li>
</ul>


Wieder einmal zu Gast ist Jon Uhlmann (@jonnitto), mit dem wir diesmal über
Svelte und SvelteKit sprechen.


SCHAUNOTIZEN

[00:00:58] SVELTE UND SVELTEKIT

Bei Svelte hat sich in den letzten Jahren wi…

Wieder einmal zu Gast ist Jon Uhlmann (@jonnitto), mit dem wir diesmal über
Svelte und SvelteKit sprechen.


SCHAUNOTIZEN

[00:00:58] SVELTE UND SVELTEKIT

Bei Svelte hat sich in den letzten Jahren wieder einiges weiterentwickelt. Treu
geblieben sind sie sich allerdings, denn wie gewohnt ist die Dokumentation sehr
hilfreich, übersichtlich und umfassend. Im Gegensatz zu React ist Svelte
tatsächlich „reaktiv“. Dabei kommt es mit einem eigenem Compiler. Seit einiger
Zeit gelangt SvelteKit an immer mehr Beliebtheit. Das Framework ist der
Nachfolger von Sapper. Wer von Sapper auf SvelteKit migriert, kann sich an den
offiziellen Guide halten. Zwei tolle Eigenschaften von Svelte sind der
eingebaute Accessibility-Support und die Unterstützung von Transitions und
Animations, die an die Transitions von AlpineJS erinnern. Wer sich nun für
Svelte interessiert und auf der Suche nach mehr Informationen ist, kann bei der
Webseite vom SvelteSummit vorbeischauen. Erst vor Kurzem fand die diesjährige
Remote Konferenz statt. Die Videos findet man auf YouTube: Svelte Summit Sprint.
Um sich sonst auf dem Laufenden zu halten, empfehlen wir den Svelte Blog mit
monatlich erscheinenden Artikeln.


WEITERE REVISIONEN MIT JON UHLMANN

 * Revision 504: Analytics- & Tracking-Tools
 * Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann
 * Revision 496: Tooling rund ums Frontend Tooling.


WEITERE REVISIONEN ZUM THEMA SVELTE

 * Revision 413: Svelte

Revision 528: Svelte und SvelteKit

<p>Diese Revision ist Vanessa in die Rolle der Gästin geschlüpft und hat Schepp etwas zum Thema &#8222;State Management&#8220; in Vue erzählt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Vue State Management</dt>
<dd>Wir beginnen mit einem Rückblick auf Vue 1 und 2 und die dort etablierten <a href="https://vuejs.org/api/general.html">Global-</a> und <a href="https://vuejs.org/api/options-state.html">Options APIs</a><br />
Vue 3 hat dann, angelehnt an Reacts Hooks, die <a href="https://vuejs.org/guide/reusability/composables.html">Composables</a> und die <a href="https://vuejs.org/api/composition-api-setup.html#basic-usage">Composition API</a> eingeführt, sowie die <a href="https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api">Reactivity API</a>, die einen alle aus der Prop-Drilling-Hölle befreien &#8211; wenn man denn weiterhin ohne waschechten Store arbeiten wollte.<br />
Ist die Entscheidung für einen Store gefallen, dann hieß der früher immer <a href="https://vuex.vuejs.org/">Vuex</a> und war der vom Vue-Team mitentwickelte und offiziell empfohlene. Parallel dazu hat sich ein weiterer Store entwickelt, nämlich <a href="https://pinia.vuejs.org/">Pinia</a>, und der ist über die Zeit so gut geworden, dass er nun offiziell zu Vuex 4&#8217;s Nachfolger ernannt wurde. Pinia spielt besser mit TypeScript und auch mit Server-Side-Rendering zusammen, und lässt sich ähnlich wie die oben genannte Composition API ansteuern.<br />
Und dann gibt es schließlich noch <a href="https://harlemjs.com/">Harlem.js</a>, das sich auf die Composition- und Reactivity APIs stützt, und somit nur mit Vue 3 arbeitet.</p>
<p>Vanessas Fazit lautet: Benutzt gerne weiter Vuex, wenn Ihr es schon im Einsatz habt, setzt aber auf Pinia, wenn Ihr neue Projekte aufsetzt. Harlem.js hingegen sagt ihr vom Ansatz her spontan nicht so zu.
</dd>
</dl>


Diese Revision ist Vanessa in die Rolle der Gästin geschlüpft und hat Schepp
etwas zum Thema „State Management“ in Vue erzählt.


SCHAUNOTIZEN

[00:00:00] VUE STATE MANAGEMENT

Wir beginnen mit einem …

Diese Revision ist Vanessa in die Rolle der Gästin geschlüpft und hat Schepp
etwas zum Thema „State Management“ in Vue erzählt.


SCHAUNOTIZEN

[00:00:00] VUE STATE MANAGEMENT

Wir beginnen mit einem Rückblick auf Vue 1 und 2 und die dort etablierten
Global- und Options APIs
Vue 3 hat dann, angelehnt an Reacts Hooks, die Composables und die Composition
API eingeführt, sowie die Reactivity API, die einen alle aus der
Prop-Drilling-Hölle befreien – wenn man denn weiterhin ohne waschechten Store
arbeiten wollte.
Ist die Entscheidung für einen Store gefallen, dann hieß der früher immer Vuex
und war der vom Vue-Team mitentwickelte und offiziell empfohlene. Parallel dazu
hat sich ein weiterer Store entwickelt, nämlich Pinia, und der ist über die Zeit
so gut geworden, dass er nun offiziell zu Vuex 4’s Nachfolger ernannt wurde.
Pinia spielt besser mit TypeScript und auch mit Server-Side-Rendering zusammen,
und lässt sich ähnlich wie die oben genannte Composition API ansteuern.
Und dann gibt es schließlich noch Harlem.js, das sich auf die Composition- und
Reactivity APIs stützt, und somit nur mit Vue 3 arbeitet.



Vanessas Fazit lautet: Benutzt gerne weiter Vuex, wenn Ihr es schon im Einsatz
habt, setzt aber auf Pinia, wenn Ihr neue Projekte aufsetzt. Harlem.js hingegen
sagt ihr vom Ansatz her spontan nicht so zu.

Revision 527: Vue State Management

<p>Schepp und Peter durften <strong>Martin Splitt</strong> begrüßen (<a href="https://developers.google.com/search">Developer Advocate bei Google</a>, <a href="http://50linesofco.de/">Web</a>, <a href="https://twitter.com/g33konaut">Twitter</a>) um mit ihm über technische Suchmaschinenoptimierung zu plaudern und mit den übelsten SEO-Mythen aufzuräumen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Technisches SEO in 2022</dt>
<dd>Seit Martins letztem Besuch in der <a href="https://workingdraft.de/351/">Revision 351</a> hat sich einiges getan! Der JS/CSS-Support des Google Bots ist mittlerweile sehr umfassend, nur mit bestimmten Web APIs wie Geolocation und Service Worker weiß der Crawler nichts anzufangen. Martin empfiehlt zur Fehlersuche die <a href="https://search.google.com/search-console/about">Search Console</a> um JS/API-Probleme wie auch versehentliche Ressourcen-Blockaden gegenüber dem Google Bot aufzudecken. Wir quatschen aus diesem Anlass über die <a href="https://developers.google.com/search/docs/advanced/robots/intro?hl=de">robots.txt</a>, den <a href="https://developers.google.com/search/docs/advanced/robots/robots_meta_tag?hl=de">x-robots Tag (aka HTTP-Header)</a>, <a href="https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?hl=de">Sitemaps</a>, <a href="https://developers.google.com/search/docs/advanced/guidelines/qualify-outbound-links?hl=de"><code>rel="nofollow"</code> und <code>rel="sponsored"</code></a> und die im Zuge all dieser Informationen aufkommenden Herausforderungen des Indizierens von Web-Content. Wo der SEO ist, ist aber auch der Schlangenölverkäufer meist nicht fern, und so kommen wir nicht umhin, auch ein wenig über obskure Seo-Magie, Verschwörungstheorien und Cargo-Cult-SEO (und Entwicklung) zu diskutieren. Am Ende des Tages schlägt nichts eine saubere URL-Struktur mit Sitemap, Meta-Informationen (vorzugsweise via <a href="https://json-ld.org/">JSON-LD</a>) und einem Auge auf den <a href="https://web.dev/vitals/">Web Vitals</a>. Zuletzt verweisen wir noch auf den , <a href="https://wowirsindistvorne.show/web-performance-mit-christian-schepp-schaefer/">Schepps Auftritt bei WWSIV</a> und plädieren für einen gesunden und entspannten Umgang mit SEO!</dd>
</dl>


Schepp und Peter durften Martin Splitt begrüßen (Developer Advocate bei Google,
Web, Twitter) um mit ihm über technische Suchmaschinenoptimierung zu plaudern
und mit den übelsten SEO-Mythen aufzuräume…

Schepp und Peter durften Martin Splitt begrüßen (Developer Advocate bei Google,
Web, Twitter) um mit ihm über technische Suchmaschinenoptimierung zu plaudern
und mit den übelsten SEO-Mythen aufzuräumen.


SCHAUNOTIZEN

[00:01:00] TECHNISCHES SEO IN 2022

Seit Martins letztem Besuch in der Revision 351 hat sich einiges getan! Der
JS/CSS-Support des Google Bots ist mittlerweile sehr umfassend, nur mit
bestimmten Web APIs wie Geolocation und Service Worker weiß der Crawler nichts
anzufangen. Martin empfiehlt zur Fehlersuche die Search Console um
JS/API-Probleme wie auch versehentliche Ressourcen-Blockaden gegenüber dem
Google Bot aufzudecken. Wir quatschen aus diesem Anlass über die robots.txt, den
x-robots Tag (aka HTTP-Header), Sitemaps, rel="nofollow" und rel="sponsored" und
die im Zuge all dieser Informationen aufkommenden Herausforderungen des
Indizierens von Web-Content. Wo der SEO ist, ist aber auch der
Schlangenölverkäufer meist nicht fern, und so kommen wir nicht umhin, auch ein
wenig über obskure Seo-Magie, Verschwörungstheorien und Cargo-Cult-SEO (und
Entwicklung) zu diskutieren. Am Ende des Tages schlägt nichts eine saubere
URL-Struktur mit Sitemap, Meta-Informationen (vorzugsweise via JSON-LD) und
einem Auge auf den Web Vitals. Zuletzt verweisen wir noch auf den , Schepps
Auftritt bei WWSIV und plädieren für einen gesunden und entspannten Umgang mit
SEO!

Revision 526: Technisches SEO in 2022

<p>Schepp und Peter durften Marc Thiele (<a href="https://marcthiele.com/">Web</a>, <a href="https://twitter.com/marcthiele">Twitter</a>) als Gast begrüßen, der viel über die <a href="https://beyondtellerrand.com/">Beyond Tellerrand</a> (und seine übrigen Aktivitäten) in der Vergangenheit und der durch Corona verseuchten Gegenwart zu erzählen hatte.</p>
<hr><aside class="message long-message">
<h2>Community Draft</h2>
<p><a href="https://draft.community/?ref=workingdraft.de"><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/04/logo.png" alt="" /></a></p>
<div class="message_content">
Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige Web-Entwickler:innen und &#8209;Designer:innen Community näher zusammen zu bringen.</p>
<p>Mit unserem Slack-Channel wollen wir noch näher zusammen kommen &#8211; gerade in der Zeit, in der die Remote-Arbeit ein &#8222;normaler&#8220; Bestandteil unserer täglichen Arbeit geworden ist.</p>
<p>Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste Konferenz finden, auf der wir uns treffen können und job-suchende und -anbietende zusammen bringen.</p>
<p>Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund um Webentwicklung.<br />
Alle Infos unter <a href="https://draft.community/?ref=workingdraft.de">draft.community</a>.
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:22] Konferenzen und Corona</dt>
<dd>Marc rekapituliert zunächst die Geschichte der Beyond Tellerrand und erzählt, was die Konferenz sein soll und was nicht (eine weitere, trockene Techtalk-Tristesse). Unter Corona-Vorzeichen ist&#8217;s mit dem Konferenzgeschäft knifflig und weder Konferenzverstalter Marc noch Konferenzcontentgenerator Peter sehen in Online/Hybrid-Formaten einen 1:1-Ersatz. Angepasste Formate wie Marcs <a href="https://beyondtellerrand.com/stay-curious">Stay Curious</a> sind eine Notlösung, mehr nicht. Da trifft es sich gut, dass <a href="https://beyondtellerrand.com/events/dusseldorf-2022"><b>es demnächst eine weitere Beyond Tellerrand in Düsseldorf gibt und noch Tickets zu haben sind!</b></a> Sollte das entweder euren Konferenzhunger nicht stillen oder Düsseldorf für euch zu südlich liegen, hat Marc außerdem die <a href="https://beyondtellerrand.com/events/axbt-2022">aXbt</a> in Hamburg im Angebot.</dd>
</dl>


Schepp und Peter durften Marc Thiele (Web, Twitter) als Gast begrüßen, der viel
über die Beyond Tellerrand (und seine übrigen Aktivitäten) in der Vergangenheit
und der durch Corona verseuchten Gegenwa…

Schepp und Peter durften Marc Thiele (Web, Twitter) als Gast begrüßen, der viel
über die Beyond Tellerrand (und seine übrigen Aktivitäten) in der Vergangenheit
und der durch Corona verseuchten Gegenwart zu erzählen hatte.


COMMUNITY DRAFT



Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige
Web-Entwickler:innen und ‑Designer:innen Community näher zusammen zu bringen.



Mit unserem Slack-Channel wollen wir noch näher zusammen kommen – gerade in der
Zeit, in der die Remote-Arbeit ein „normaler“ Bestandteil unserer täglichen
Arbeit geworden ist.

Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste
Konferenz finden, auf der wir uns treffen können und job-suchende und
-anbietende zusammen bringen.

Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund
um Webentwicklung.
Alle Infos unter draft.community.


SCHAUNOTIZEN

[00:01:22] KONFERENZEN UND CORONA

Marc rekapituliert zunächst die Geschichte der Beyond Tellerrand und erzählt,
was die Konferenz sein soll und was nicht (eine weitere, trockene
Techtalk-Tristesse). Unter Corona-Vorzeichen ist’s mit dem Konferenzgeschäft
knifflig und weder Konferenzverstalter Marc noch Konferenzcontentgenerator Peter
sehen in Online/Hybrid-Formaten einen 1:1-Ersatz. Angepasste Formate wie Marcs
Stay Curious sind eine Notlösung, mehr nicht. Da trifft es sich gut, dass es
demnächst eine weitere Beyond Tellerrand in Düsseldorf gibt und noch Tickets zu
haben sind! Sollte das entweder euren Konferenzhunger nicht stillen oder
Düsseldorf für euch zu südlich liegen, hat Marc außerdem die aXbt in Hamburg im
Angebot.

Revision 525: Beyond Tellerrand und andere Konferenzen in Zeiten von Corona

<p>Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: <a href="https://davidjost.dev/">David Jost</a>, mit dem wir in über einer Stunde das Thema &#8222;Design Systeme&#8220; von all seinen Seiten beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt.</p>
<hr><aside class="message long-message">
<h2>Community Draft</h2>
<p><a href="https://draft.community/?ref=workingdraft.de"><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/04/logo.png" alt="" /></a></p>
<div class="message_content">
Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige Web-Entwickler:innen und &#8209;Designer:innen Community näher zusammen zu bringen.</p>
<p>Mit unserem Slack-Channel wollen wir noch näher zusammen kommen &#8211; gerade in der Zeit, in der die Remote-Arbeit ein &#8222;normaler&#8220; Bestandteil unserer täglichen Arbeit geworden ist.</p>
<p>Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste Konferenz finden, auf der wir uns treffen können und job-suchende und -anbietende zusammen bringen.</p>
<p>Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund um Webentwicklung.<br />
Alle Infos unter <a href="https://draft.community/?ref=workingdraft.de">draft.community</a>.
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:21] Design Systeme</dt>
<dd>
<ul>
<li><a href="https://www.ted.com/talks/richard_st_john_8_secrets_of_success">TED 2005 &#8211; Richard St. John &#8211; 8 secrets of success</a></li>
<li><a href="https://frankchimero.com/blog/2015/the-webs-grain/">Frank Chimero &#8211; The Web’s Grain</a></li>
<li><a href="https://responsivedesignworkflow.com/">Stephen Hay &#8211; Responsive Design Workflow</a></li>
<li><a href="https://medium.com/@nathanacurtis">Nathan Curtis</a></li>
<li><a href="https://web.dev/new-responsive/">Una Kravets &#8211; The new responsive: Web design in a component-driven world</a></li>
<li><a href="https://inclusive-components.design/cards/">Inclusive Components &#8211; Cards</a></li>
<li><a href="https://open-ui.org/">Open UI Project</a></li>
<li><a href="https://uiengineering.de/podcast.html">UI Engineering Podcast</a></li>
</ul>
</dd>
</dl>


Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: David Jost, mit
dem wir in über einer Stunde das Thema „Design Systeme“ von all seinen Seiten
beleuchten. Und das sind mehr, als man in se…

Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: David Jost, mit
dem wir in über einer Stunde das Thema „Design Systeme“ von all seinen Seiten
beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt.


COMMUNITY DRAFT



Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige
Web-Entwickler:innen und ‑Designer:innen Community näher zusammen zu bringen.



Mit unserem Slack-Channel wollen wir noch näher zusammen kommen – gerade in der
Zeit, in der die Remote-Arbeit ein „normaler“ Bestandteil unserer täglichen
Arbeit geworden ist.

Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste
Konferenz finden, auf der wir uns treffen können und job-suchende und
-anbietende zusammen bringen.

Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund
um Webentwicklung.
Alle Infos unter draft.community.


SCHAUNOTIZEN

[00:01:21] DESIGN SYSTEME

 * TED 2005 – Richard St. John – 8 secrets of success
 * Frank Chimero – The Web’s Grain
 * Stephen Hay – Responsive Design Workflow
 * Nathan Curtis
 * Una Kravets – The new responsive: Web design in a component-driven world
 * Inclusive Components – Cards
 * Open UI Project
 * UI Engineering Podcast

Revision 524: Design Systeme

<p>Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist da!</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-5692" src="https://workingdraft.de/wp-content/uploads/2022/02/660xsa-300x300.jpg" alt="" width="300" height="300" srcset="https://workingdraft.de/wp-content/uploads/2022/02/660xsa-300x300.jpg 300w, https://workingdraft.de/wp-content/uploads/2022/02/660xsa-150x150.jpg 150w, https://workingdraft.de/wp-content/uploads/2022/02/660xsa.jpg 500w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://www.linkedin.com/in/antonia-pf%C3%B6rtner/?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/03/Working-Draft-Podcast_Banner-Zühlke.png" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von Zühlke. Zühlke ist ein weltweit tätiger Innovationsdienstleister und kreiert neue Ideen, Produkte und Geschäftsmodelle für seine Kunden aus unterschiedlichsten Branchen. Das Unternehmen ist überzeugt, dass Innovationen und technologischer Fortschritt unsere Wirtschaft und Gesellschaft positiv verändern können, und erarbeitet deshalb gemeinsam mit seinen Kunden nachhaltige Lösungen für die Zukunft. Die 1.300 Mitarbeitenden sind in 10 Ländern tätig und betreuen Kunden aus den Bereichen Medizintechnik &#038; Gesundheit, Industrie, Telekommunikation, Transport und Mobilität oder Banken &#038; Versicherungen.</p>
<p>Mehr über die offenen Web Development-Stellen bei Zühlke erfahrt ihr unter <a href="https://www.zuehlke.com/de/moderne-webentwicklung-bei-zuehlke?ref=workingdraft.de">www.zuehlke.com/de/moderne-webentwicklung-bei-zuehlke</a>. <a href="https://www.linkedin.com/in/antonia-pf%C3%B6rtner/?ref=workingdraft.de">Antonia Pförtner</a>, <a href="https://www.linkedin.com/in/katharina-baehr-ba74209a/">Katharina Baehr</a> und <a href="https://www.linkedin.com/in/trudolphi/">Tobi Rudolphi</a> freuen sich auch über einen unkomplizierten Austausch auf LinkedIn!</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:45] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/">TypeScript 4.6 ist da</a></dt>
<dd>TS 4.6 bringt wenig neues, aber da wir in den TypeScript-Folgen eh immer über interessantere Themen sprechen, ist uns das ganz recht. Stefan erzählt etwa davon, wie er im Klassenkampf die Seiten gewechselt hat und ein an das <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">ES-Iterator-Protokoll</a> andockendes <a href="https://gist.github.com/ddprrt/674aee32858cb933ed1ab11fa8ca2830">Lazy-Iterator-Tool mit ECMAScript-Klassen</a> gebaut hat. Im Rahmen dessen freut er sich sogar darüber, dass das erste kleine TS-Feature, <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#allowing-code-in-constructors-before-super">etwas präziser dem ES-Standard folgende Unterstützung</a> für <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a>, jetzt da ist und postuliert Use Cases rund um <a href="https://opentelemetry.io/">Open Telemetry</a>. Peter hat derweil Kunden mit einen Use Case für <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_static_initialization_blocks">Static-Blöcken in Klassen</a>, die uns <a href="https://workingdraft.de/501/">vorletztes Mal</a> noch nicht überzeugen konnten. Allgemein halten wir fest, dass früher (= Java/<a href="https://www.youtube.com/watch?v=QM1iUe6IofM&amp;t=1s">OOP</a>/<a href="https://fettblog.eu/tidy-typescript-avoid-traditional-oop/">POOP</a>), zwar vieles, nicht alles schlecht war und dass auch in <a href="https://www.amazon.de/Patterns-Elements-Reusable-Object-Oriented-Software/dp/0201633612">Programmierbüchern von 1997</a> noch Weisheit zu finden ist. Im Verhältnis 20/80 widmen wir uns der weiteren langweiligen und marginalen TypeScript-Updates (<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#indexed-access-inference-improvements">dies</a>, <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#control-flow-analysis-for-dependent-parameters">das</a>, <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#more-syntax-and-binding-errors-in-javascript">jenes</a>) sowie den wesentlich spannenderen Themen rund um <a href="https://fettblog.eu/how-not-to-learn-typescript/#mistake-2%3A-annotate-everything">Typannotationen</a>, <a href="https://fettblog.eu/typescript-function-overload/">Funktionsüberladung</a>, <a href="https://github.com/microsoft/TypeScript/issues/46858">TS-Performance</a>, <a href="https://github.com/swc-project/swc">SWC</a>, <a href="https://deno.land/">Demo</a>, <a href="https://workingdraft.de/515/">Runtime-Typen</a> und TS-Specs, <a href="https://microsoft.github.io/language-server-protocol/">Language Server Protocol</a>, Rust, <a href="https://ziglang.org/">Zig</a>, Java und Homepagebaukästen</dd>
</dl>


Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und
Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist
da!




UNSER SPONSOR



Diese Folge wird …

Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und
Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist
da!




UNSER SPONSOR



Diese Folge wird gesponsert von Zühlke. Zühlke ist ein weltweit tätiger
Innovationsdienstleister und kreiert neue Ideen, Produkte und Geschäftsmodelle
für seine Kunden aus unterschiedlichsten Branchen. Das Unternehmen ist
überzeugt, dass Innovationen und technologischer Fortschritt unsere Wirtschaft
und Gesellschaft positiv verändern können, und erarbeitet deshalb gemeinsam mit
seinen Kunden nachhaltige Lösungen für die Zukunft. Die 1.300 Mitarbeitenden
sind in 10 Ländern tätig und betreuen Kunden aus den Bereichen Medizintechnik &
Gesundheit, Industrie, Telekommunikation, Transport und Mobilität oder Banken &
Versicherungen.

Mehr über die offenen Web Development-Stellen bei Zühlke erfahrt ihr unter
www.zuehlke.com/de/moderne-webentwicklung-bei-zuehlke. Antonia Pförtner,
Katharina Baehr und Tobi Rudolphi freuen sich auch über einen unkomplizierten
Austausch auf LinkedIn!


SCHAUNOTIZEN

[00:01:45] TYPESCRIPT 4.6 IST DA

TS 4.6 bringt wenig neues, aber da wir in den TypeScript-Folgen eh immer über
interessantere Themen sprechen, ist uns das ganz recht. Stefan erzählt etwa
davon, wie er im Klassenkampf die Seiten gewechselt hat und ein an das
ES-Iterator-Protokoll andockendes Lazy-Iterator-Tool mit ECMAScript-Klassen
gebaut hat. Im Rahmen dessen freut er sich sogar darüber, dass das erste kleine
TS-Feature, etwas präziser dem ES-Standard folgende Unterstützung für super(),
jetzt da ist und postuliert Use Cases rund um Open Telemetry. Peter hat derweil
Kunden mit einen Use Case für Static-Blöcken in Klassen, die uns vorletztes Mal
noch nicht überzeugen konnten. Allgemein halten wir fest, dass früher (=
Java/OOP/POOP), zwar vieles, nicht alles schlecht war und dass auch in
Programmierbüchern von 1997 noch Weisheit zu finden ist. Im Verhältnis 20/80
widmen wir uns der weiteren langweiligen und marginalen TypeScript-Updates
(dies, das, jenes) sowie den wesentlich spannenderen Themen rund um
Typannotationen, Funktionsüberladung, TS-Performance, SWC, Demo, Runtime-Typen
und TS-Specs, Language Server Protocol, Rust, Zig, Java und Homepagebaukästen

Revision 523: Wenig TypeScript und viel Vermischtes

<p>Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann (<a href="https://www.linkedin.com/in/simondittlmann/">LinkedIn</a>, <a href="https://twitter.com/SimonDittlmann">Twitter</a>), Head of Digital Architecture and Analytics bei <a href="http://zeiss.de/">ZEISS</a> uns über viel über horizontale und vertikale Schnitte. Außerdem berichtet er über die technische Umsetzung der Micro-Frontends bei ZEISS mit Hilfe von <a href="https://webpack.js.org/concepts/module-federation/">Webpack Module Federation</a> und <a href="https://dapr.io/">Dapr</a>.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/02/Banner_lemon.markets.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.</p>
<p>Weitere Informationen zum Produkt und der Firma <a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de">gibt es hier</a>.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:38] MFs Architektur mit Webpack Module Federation und Dapr</dt>
<dd>Zunächst besprechen Simon, Schepp und Vanessa die Split-Arten horizontal vs. vertikal, wie in dem Blogpost <a href="https://medium.com/@lucamezzalira/micro-frontends-decisions-framework-ebcd22256513">Micro-frontends decisions framework</a> von <a href="https://lucamezzalira.com/">Luca Mezzalira</a> beschrieben. Weiterhin geht es um die Aufsetzung von Kompositionen und Routing in den Möglichkeiten <a href="https://increment.com/frontend/micro-frontends-in-context/">Client-side, Edge-side oder Server-side</a>. Ein neu geschaffenes Problem bei dem Einsatz von Micro-Frontends kann die Authentication und. Authorization sein. Simon stellt uns einen <a href="https://auth0.com/blog/securing-single-page-applications-with-refresh-token-rotation/">token basierten Login</a> mit <a href="https://curity.io/resources/learn/split-token-pattern/">Split tokens</a> und <a href="https://curity.io/resources/learn/phantom-token-pattern/">Phantom tokens</a> vor. Im Anschluss geht Simon auf Rollen und attributbasiertes Rechtemanagement in verteilten System ein (siehe <a href="https://github.com/open-policy-agent/npm-opa-wasm">Open Policy Agent WebAssembly NPM Module</a> und &#8222;<a href="https://www.youtube.com/watch?v=R6tUNpRpdnY">How Netflix Is Solving Authorization Across Their Cloud</a>&#8222;. Des Weiteren wird auf die Vor- und Nachteile von Polyrepositories und Monorepositories eingegangen, und wie mit Hilfe von <a href="https://www.blackducksoftware.com/">Blackduck</a> und <a href="https://github.com/oss-review-toolkit/ort">OSS Review Toolkit (ORT)</a> Lizensen überprüft werden können.</dd>
</dl>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/511/">Revision 511: Microfrontends bei REWE digital</a></li>
<li><a href="https://workingdraft.de/492/">Revision 492: Der aktueller Status von Webpack</a></li>
<li><a href="https://workingdraft.de/407/">Revision 407: Micro Frontends mit Project Mosaic</a></li>
<li><a href="https://workingdraft.de/384/">Revision 384: Micro-Frontends | Working Draft</a></li>
</ul>


Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann
(LinkedIn, Twitter), Head of Digital Architecture and Analytics bei ZEISS uns
über viel über horizontale und vertikale Sch…

Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann
(LinkedIn, Twitter), Head of Digital Architecture and Analytics bei ZEISS uns
über viel über horizontale und vertikale Schnitte. Außerdem berichtet er über
die technische Umsetzung der Micro-Frontends bei ZEISS mit Hilfe von Webpack
Module Federation und Dapr.


UNSER SPONSOR



Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das
eine Trading API für Developer anbietet. Mit lemon.markets können über 8000
Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen
Portfolios können auch aktuelle und historische Kursdaten abgerufen werden.
Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen
sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre
eigenen Trading Apps oder Bots. In der lemon.markets Developer Community
tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die
Trading API und den Aktienmarkt aus.

Weitere Informationen zum Produkt und der Firma gibt es hier.


SCHAUNOTIZEN

[00:01:38] MFS ARCHITEKTUR MIT WEBPACK MODULE FEDERATION UND DAPR

Zunächst besprechen Simon, Schepp und Vanessa die Split-Arten horizontal vs.
vertikal, wie in dem Blogpost Micro-frontends decisions framework von Luca
Mezzalira beschrieben. Weiterhin geht es um die Aufsetzung von Kompositionen und
Routing in den Möglichkeiten Client-side, Edge-side oder Server-side. Ein neu
geschaffenes Problem bei dem Einsatz von Micro-Frontends kann die Authentication
und. Authorization sein. Simon stellt uns einen token basierten Login mit Split
tokens und Phantom tokens vor. Im Anschluss geht Simon auf Rollen und
attributbasiertes Rechtemanagement in verteilten System ein (siehe Open Policy
Agent WebAssembly NPM Module und „How Netflix Is Solving Authorization Across
Their Cloud„. Des Weiteren wird auf die Vor- und Nachteile von Polyrepositories
und Monorepositories eingegangen, und wie mit Hilfe von Blackduck und OSS Review
Toolkit (ORT) Lizensen überprüft werden können.


VERWANDTE REVISIONEN

 * Revision 511: Microfrontends bei REWE digital
 * Revision 492: Der aktueller Status von Webpack
 * Revision 407: Micro Frontends mit Project Mosaic
 * Revision 384: Micro-Frontends | Working Draft

Revision 522: MFs Architektur mit Webpack Module Federation und Dapr

<p><strong>Nico Martin</strong> (<a href="https://nico.dev">Web</a>, <a href="http://twitter.com/nic_o_martin">Twitter</a>), Google Developer Expert und Webtech-Nerd, erklärt in dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:01] Peripherie-APIs</dt>
<dd>Es geht um <a href="https://web.dev/nfc/">Web NFC</a>, <a href="https://web.dev/usb/">Web USB</a>, <a href="https://web.dev/bluetooth/">Web Blueooth</a> und andere Peripherie-APIs aus dem <a href="https://www.chromium.org/teams/web-capabilities-fugu/">Project Fugu</a> (Working Draft berichtete in <a href="https://workingdraft.de/399/">Revision 399</a>). Während es Nico noch leicht fiel, Peter und Schepp die <a href="https://w3c.github.io/web-nfc/">simple API</a> für <a href="https://de.wikipedia.org/wiki/Near_Field_Communication">NFC</a> im Web zu erklären, wird&#8217;s bei USB schon kniffliger. Zum anderen gibt&#8217;s neben <a href="https://web.dev/usb/">Web USB</a> auch noch <a href="https://web.dev/hid/">Web HID</a> und <a href="https://web.dev/serial/">Web Serial</a>, wobei gerade letzteres Sinnhaftigkeit ausgiebig diskutiert wird. Im Rahmen von Web USB empfiehlt Nico <a href="https://bandarra.me/2020/02/22/Building-a-Physical-AirHorn-Button-with-Web-USB/">ein Tutorial</a>, <a href="https://github.com/webadb/webadb.js">webadb.js</a> und einen <a href="https://www.youtube.com/watch?v=epdUFbuwfWw">Talk von Sebastian Golasch</a>. Wir lassen natürlich auch die Sicherheitsdiskussion nicht außer acht, debattieren die Kombination aus Web USB und der <a href="https://web.dev/file-system-access/">File System Access API</a> und Nico berichtet von seinen persönlichen Web-USB-Abenteuern mit <a href="https://de.wikipedia.org/wiki/Tiptoi">Tiptoi</a>. Beim Thema <a href="https://web.dev/bluetooth/">Web Bluetooth</a> jammert Peter zunächst über seinen einst gescheiterten Kampf gegen proprietäre Protokolle, bevor wir das Wesen von <a href="https://de.wikipedia.org/wiki/Bluetooth">Bluetooth</a> im Allgemeinen und <a href="https://de.wikipedia.org/wiki/Bluetooth_Low_Energy">Bluetooth LE</a> (relevant für Web Bluetooth) im Speziellen beleuchten. Nico erzählt vom seinen Erfolgen in der webbasierten Ansteuerung einer <a href="https://www.mipow.com/products/playbulb-sphere">Playbulb Sphere</a> und davon, warum er am Ende dann doch lieber seine eigene Hardware gebastelt hat. Die Hauptzutaten: ein RaspberryPi, Node und <a href="https://github.com/noble/bleno">bleno</a>! Ergebnisse sind unter anderem die Ansteuerung einer kleinen LED Matrix (<a href="https://twitter.com/nic_o_martin/status/1438258873140486145">1</a>, <a href="https://twitter.com/nic_o_martin/status/1443103977772666882">2</a>) und von <a href="https://twitter.com/nic_o_martin/status/1416120631842717704">Elektromotoren</a>. Zum Ende hin diskutieren wir den deprimierenden Stand der Implementierung inkl. <a href="https://webkit.org/status/#feature-webusb">Webkit-Verweigerung</a>, Sinn und Zweck von Peripherie-APIs und Tracking-Prevention (u.A. <a href="https://webkit.org/tracking-prevention/">die von Webkit</a>).</dd>
</dl>


Nico Martin (Web, Twitter), Google Developer Expert und Webtech-Nerd, erklärt in
dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC!


SCHAUNOTIZEN

[00:01:01] PERIPHERIE-APIS

…

Nico Martin (Web, Twitter), Google Developer Expert und Webtech-Nerd, erklärt in
dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC!


SCHAUNOTIZEN

[00:01:01] PERIPHERIE-APIS

Es geht um Web NFC, Web USB, Web Blueooth und andere Peripherie-APIs aus dem
Project Fugu (Working Draft berichtete in Revision 399). Während es Nico noch
leicht fiel, Peter und Schepp die simple API für NFC im Web zu erklären, wird’s
bei USB schon kniffliger. Zum anderen gibt’s neben Web USB auch noch Web HID und
Web Serial, wobei gerade letzteres Sinnhaftigkeit ausgiebig diskutiert wird. Im
Rahmen von Web USB empfiehlt Nico ein Tutorial, webadb.js und einen Talk von
Sebastian Golasch. Wir lassen natürlich auch die Sicherheitsdiskussion nicht
außer acht, debattieren die Kombination aus Web USB und der File System Access
API und Nico berichtet von seinen persönlichen Web-USB-Abenteuern mit Tiptoi.
Beim Thema Web Bluetooth jammert Peter zunächst über seinen einst gescheiterten
Kampf gegen proprietäre Protokolle, bevor wir das Wesen von Bluetooth im
Allgemeinen und Bluetooth LE (relevant für Web Bluetooth) im Speziellen
beleuchten. Nico erzählt vom seinen Erfolgen in der webbasierten Ansteuerung
einer Playbulb Sphere und davon, warum er am Ende dann doch lieber seine eigene
Hardware gebastelt hat. Die Hauptzutaten: ein RaspberryPi, Node und bleno!
Ergebnisse sind unter anderem die Ansteuerung einer kleinen LED Matrix (1, 2)
und von Elektromotoren. Zum Ende hin diskutieren wir den deprimierenden Stand
der Implementierung inkl. Webkit-Verweigerung, Sinn und Zweck von
Peripherie-APIs und Tracking-Prevention (u.A. die von Webkit).

Revision 521: WebBluetooth, WebUSB und WebNFC

<p>Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es immer leichter zu werden. Joe Ray Gregory (<a href="https://twitter.com/joeraygregory">Twitter</a> / <a href="https://jgreg.dev/">Website</a>), Senior Software Engineer und Trainier bei <a href="https://workshops.de/">workshops.de</a>, bringt uns diesmal das Framework <a href="https://testing-library.com/">Testing Library</a> mit.</p>
<p>Psst, Geheimtipp: Joe verrät uns, dass es aktuell Early Bird Tickets für die <a href="https://conf.vuejs.de/">Vue.js Konferenz</a> in Berlin am 22. September gibt.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/02/Banner_lemon.markets.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.</p>
<p>Weitere Informationen zum Produkt und der Firma <a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de">gibt es hier</a>.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:36] Unit-Testing / Testing Library</dt>
<dd>Die <a href="https://testing-library.com/">Testing Library</a> von <a href="https://kentcdodds.com/">Kent C. Dodds</a> und anderen  Beitragenden ist eine Familie von Bibliotheken, um Best Practices in das Testen zu bringen. Sie ist framework-agnostisch und kann daher mit <a href="https://vuejs.org/">Vue</a>, <a href="https://reactjs.org/">React </a>und Co. verwendet werden. Sie funktioniert mit <a href="https://jestjs.io/">Jest,</a> <a href="https://www.cypress.io/">Cypress</a> und vermutlich auch <a href="https://vitest.dev/">Vitest</a> (Obacht: Alpha!), aber auch alleinstehend benutzt werden. Im Laufe der Revision geht Joe darauf ein, was die Testing Library eigentlich ist, warum man sie nutzen sollte und wie man sie einsetzt. Dabei geht er auch darauf ein, dass es <a href="https://github.com/facebook/jest/pull/11529#issuecomment-1027152470">keine aktive Mitarbeit</a> von seitens Facebook (Meta) seit Jahren mehr an Jest gibt. Außerdem gäbe es bei Jest das Problem <a href="https://jestjs.io/docs/ecmascript-modules">des fehlenden ESM Supports</a>.</dd>
<dd>Im weiteren Verlaufen gehen Hans, Vanessa und Joe auch auf die <a href="https://www.perfecto.io/blog/testing-pyramid#:~:text=The%20testing%20pyramid%20is%20a,a%20more%20reliable%20test%20suite.">Testing Pyramide</a> und <a href="https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications">Testing Trophy</a> ein.</dd>
<dd>Besonders spannend bei der Testing Library sind die <a href="https://testing-library.com/docs/guiding-principles/">Guiding Principles</a>.</dd>
</dl>
<h3>Sonstige Links</h3>
<ul>
<li><a href="https://playwright.dev/">Playwright</a>, der Nachfolger von <a href="https://www.npmjs.com/package/puppeteer">Puppeteer</a></li>
<li><a href="https://conf.vuejs.de/">https://conf.vuejs.de/</a></li>
<li><a href="https://workshops.de/">https://workshops.de/</a></li>
</ul>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/462/">Revision 462: Jest</a></li>
<li><a href="https://workingdraft.de/442/">Revision 442: &#8222;Next Level&#8220;-End-to-End-Testing</a></li>
<li><a href="https://workingdraft.de/436/">Revision 436: Frontend Unit-Testing</a></li>
<li><a href="https://workingdraft.de/375/">Revision 375: Frontent-Testing</a></li>
</ul>


Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es
immer leichter zu werden. Joe Ray Gregory (Twitter / Website), Senior Software
Engineer und Trainier bei workshops.de, b…

Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es
immer leichter zu werden. Joe Ray Gregory (Twitter / Website), Senior Software
Engineer und Trainier bei workshops.de, bringt uns diesmal das Framework Testing
Library mit.

Psst, Geheimtipp: Joe verrät uns, dass es aktuell Early Bird Tickets für die
Vue.js Konferenz in Berlin am 22. September gibt.


UNSER SPONSOR



Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das
eine Trading API für Developer anbietet. Mit lemon.markets können über 8000
Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen
Portfolios können auch aktuelle und historische Kursdaten abgerufen werden.
Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen
sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre
eigenen Trading Apps oder Bots. In der lemon.markets Developer Community
tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die
Trading API und den Aktienmarkt aus.

Weitere Informationen zum Produkt und der Firma gibt es hier.


SCHAUNOTIZEN

[00:01:36] UNIT-TESTING / TESTING LIBRARY

Die Testing Library von Kent C. Dodds und anderen  Beitragenden ist eine Familie
von Bibliotheken, um Best Practices in das Testen zu bringen. Sie ist
framework-agnostisch und kann daher mit Vue, React und Co. verwendet werden. Sie
funktioniert mit Jest, Cypress und vermutlich auch Vitest (Obacht: Alpha!), aber
auch alleinstehend benutzt werden. Im Laufe der Revision geht Joe darauf ein,
was die Testing Library eigentlich ist, warum man sie nutzen sollte und wie man
sie einsetzt. Dabei geht er auch darauf ein, dass es keine aktive Mitarbeit von
seitens Facebook (Meta) seit Jahren mehr an Jest gibt. Außerdem gäbe es bei Jest
das Problem des fehlenden ESM Supports.

Im weiteren Verlaufen gehen Hans, Vanessa und Joe auch auf die Testing Pyramide
und Testing Trophy ein.

Besonders spannend bei der Testing Library sind die Guiding Principles.


SONSTIGE LINKS

 * Playwright, der Nachfolger von Puppeteer
 * https://conf.vuejs.de/
 * https://workshops.de/


VERWANDTE REVISIONEN

 * Revision 462: Jest
 * Revision 442: „Next Level“-End-to-End-Testing
 * Revision 436: Frontend Unit-Testing
 * Revision 375: Frontent-Testing

Revision 520: Unit-Testing / Testing Library

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen

PODLIST

Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen.

Neue Episoden

Revision 531: Mehr Eloquenz im Web!

Working Draft

Revision 530: Von Katas, Craft Camps und Code Retreats

Working Draft

Revision 529: Richtig schätzen

Working Draft

Revision 528: Svelte und SvelteKit

Working Draft

Revision 527: Vue State Management

Working Draft

Revision 526: Technisches SEO in 2022

Working Draft

Revision 525: Beyond Tellerrand und andere Konferenzen in Zeiten von Corona

Working Draft

Revision 524: Design Systeme

Working Draft

Revision 523: Wenig TypeScript und viel Vermischtes

Working Draft

Revision 522: MFs Architektur mit Webpack Module Federation und Dapr

Working Draft

Revision 521: WebBluetooth, WebUSB und WebNFC

Working Draft

Revision 520: Unit-Testing / Testing Library

Working Draft