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

Working Draft

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

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

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

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

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

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 &#8222;State Management&#8220; 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 [&#8230;]

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

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 Revison <a href="https://workingdraft.de/351/">in Revision 351</a> hat sich einiges getan! Der JS/CSS-Support des Google Bots ist mittlerweile sehr umfassend, nur mit Web APIs 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 Meta Tag</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 vom Web-Content. Wo der SEO ist, ist aber auch der Schlangenölverkäufer meist nicht fern, und so kommen mit 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äumen. Schaunotizen [00:01:00] Technisches SEO in 2022 Seit Martins letztem Besuch in der Revison in Revision 351 hat sich einiges getan! Der JS/CSS-Support des Google Bots ist mittlerweile sehr [&#8230;]

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

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 Revison in Revision 351 hat sich einiges getan! Der JS/CSS-Support des Google Bots ist mittlerweile sehr umfassend, nur mit Web APIs 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 Meta Tag, Sitemaps, rel="nofollow" und rel="sponsored" und die im Zuge all dieser Informationen aufkommenden Herausforderungen des Indizierens vom Web-Content. Wo der SEO ist, ist aber auch der Schlangenölverkäufer meist nicht fern, und so kommen mit 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>
<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 Gegenwart zu erzählen hatte. 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 [&#8230;]

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

[00:01:22] Ko[...]

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.
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>
<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>
<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 &#8222;Design Systeme&#8220; 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 &#8209;Designer:innen [&#8230;]

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.

Comm[...]

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

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

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

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