<p>Herzlich willkommen zum zweiten Teil unserer Mini-Serie zur Internationalisierung. In dieser Folge tauchen wir gemeinsam mit <a href="https://schepp.dev/">Schepp</a> tiefer in die Herausforderungen und Best Practices ein, die mit der Anpassung von digitalen Produkten für unterschiedliche Märkte und Kulturen verbunden sind.</p>
<p>In dieser Folge bauen wir auf der Revision 613, dem ersten Teil, auf und beleuchten weitere vielfältige Aspekte, die bei der Internationalisierung berücksichtigt werden müssen, beispielsweise, wenns um Währungen oder die Uhrzeit geht. </p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:30]</dt>
<dd>
Wir starten mit Use-Cases und Problemen aus der Community in die Internationalisierung.<br />
Danach geht&#8217;s weiter mit weiteren Themen:</p>
<ul>
<li>Telefone: Verschiedene Vorwahlnummern und Formate.
<li>Datum und Zeit: Unterschiedliche Datums- und Uhrzeitformate, Sommer- und Winterzeit.
<li>Geld: Verschiedene Währungen und Untereinheiten.
<li>Einheiten: Unterschiedliche Maßeinheiten (z.B. metrisches System vs. imperiales System).
<li>Kultur: Kulturelle Gepflogenheiten (z.B. Glücks- und Unglückszahlen, Farben).
</ul>
<p>Danke an den Schepp, dass du uns die Themen näher gebracht hast.</dd>
</dl>


Herzlich willkommen zum zweiten Teil unserer Mini-Serie zur
Internationalisierung. In dieser Folge tauchen wir gemeinsam mit Schepp tiefer
in die Herausforderungen und Best Practices ein, die mit der …

Working Draft

Herzlich willkommen zum zweiten Teil unserer Mini-Serie zur
Internationalisierung. In dieser Folge tauchen wir gemeinsam mit Schepp tiefer
in die Herausforderungen und Best Practices ein, die mit der Anpassung von
digitalen Produkten für unterschiedliche Märkte und Kulturen verbunden sind.

In dieser Folge bauen wir auf der Revision 613, dem ersten Teil, auf und
beleuchten weitere vielfältige Aspekte, die bei der Internationalisierung
berücksichtigt werden müssen, beispielsweise, wenns um Währungen oder die
Uhrzeit geht.


SCHAUNOTIZEN

[00:01:30]

Wir starten mit Use-Cases und Problemen aus der Community in die
Internationalisierung.
Danach geht’s weiter mit weiteren Themen:



 * Telefone: Verschiedene Vorwahlnummern und Formate.
 * Datum und Zeit: Unterschiedliche Datums- und Uhrzeitformate, Sommer- und
   Winterzeit.
 * Geld: Verschiedene Währungen und Untereinheiten.
 * Einheiten: Unterschiedliche Maßeinheiten (z.B. metrisches System vs.
   imperiales System).
 * Kultur: Kulturelle Gepflogenheiten (z.B. Glücks- und Unglückszahlen, Farben).

Danke an den Schepp, dass du uns die Themen näher gebracht hast.

Revision 618: Internationalisierung – Teil 2

<p>In diese Revision haben wir <a href="https://thomasbachem.com/de/">Thomas &#8222;Tom&#8220; Bachem</a> aus Berlin zu Gast. Tom ist Unternehmer, Softwareentwickler, Angel-Investor, und vor allem Gründer der innovativen Tech-Hochschule CODE. Und um die geht es in dieser Folge auch.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.</p>
<p>Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.</p>
<p>Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:20] <a href="https://code.berlin/de/">CODE Berlin</a></dt>
<dd>&#8222;CODE&#8220; steht als Akronym für &#8222;Curiosity Driven Education&#8220; &#8211; dem Lernkonzept hinter der Hochschule. Gegründet hat Tom sie, weil er selbst so eine Art Ansatz in seiner Jugend vermisst hat. Wir diskutieren über individualisierte Lernansätze, kollaboratives projektbasiertes Lernen und die Bedeutung von Inspiration und Peer-Learning in der Tech-Branche. Wir sprechen über die starke Networking-Kultur, die an der CODE forciert und gepflegt wird, über die zahlreich von ehemaligen CODE-Student*innen gegründeten Startups und über die breite Unterstützung der Projekts CODE durch deutsche Unternehmer.</dd>
</dl>


In diese Revision haben wir Thomas „Tom“ Bachem aus Berlin zu Gast. Tom ist
Unternehmer, Softwareentwickler, Angel-Investor, und vor allem Gründer der
innovativen Tech-Hochschule CODE. Und um die geht…

In diese Revision haben wir Thomas „Tom“ Bachem aus Berlin zu Gast. Tom ist
Unternehmer, Softwareentwickler, Angel-Investor, und vor allem Gründer der
innovativen Tech-Hochschule CODE. Und um die geht es in dieser Folge auch.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.


SCHAUNOTIZEN

[00:02:20] CODE BERLIN

„CODE“ steht als Akronym für „Curiosity Driven Education“ – dem Lernkonzept
hinter der Hochschule. Gegründet hat Tom sie, weil er selbst so eine Art Ansatz
in seiner Jugend vermisst hat. Wir diskutieren über individualisierte
Lernansätze, kollaboratives projektbasiertes Lernen und die Bedeutung von
Inspiration und Peer-Learning in der Tech-Branche. Wir sprechen über die starke
Networking-Kultur, die an der CODE forciert und gepflegt wird, über die
zahlreich von ehemaligen CODE-Student*innen gegründeten Startups und über die
breite Unterstützung der Projekts CODE durch deutsche Unternehmer.

Revision 617: Die CODE – eine Hochschule wie man sie sich wünscht

<p><a href="https://mastodon.social/deck/@sir_pepe/112200676190810742">Irgendein Spezialexperte</a> dachte sich, dass <a href="https://github.com/tc39/proposal-signals">ein Proposal für die Standardisierung von Signals</a> Grund genug sei, <a href="https://workingdraft.de/572/">einen Nachfolger von Revision 572</a> aufzunehmen. Hört euch gern an, wie der Spezialexperte zusammen mit Stefan und Gast <strong>Bernhard Mayr</strong> (<a href="https://vis.social/@bemayr">Mastodon</a>, <a href="https://twitter.com/bemayr">Twitter</a>) zum zweiten Mal erfolglos versucht, den Signals-Hype zu verstehen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:12] Signaaaaaals!</dt>
<dd>Das <a href="https://github.com/tc39/proposal-signals">Signals-Proposal</a> lädt zu Vergleichen mit dem (eingeschlafenen) <a href="https://github.com/tc39/proposal-observable">Proposal für Standard-Observables ein</a>. Wie bei Signals gibt es reichlich JS-Implementierungen (<a href="https://rxjs.dev/">RxJS</a>, <a href="https://baconjs.github.io/">Bacon.js</a>) und nicht wirklich einen offensichtlich erkennbaren Drang nach <em>der</em> einen Standard-Lösung. Wir spekulieren dennoch über Alternativen zu (und besseren Wegen für) Standard-Signals (z.B. ein Standard-Event-Target als Schritt 0), über die Motivation (<a href="https://eisenbergeffect.medium.com/a-tc39-proposal-for-signals-f0bedd37a335">offizielle Angaben</a> hierzu sind eher dünn), Perspektiven der Weiterentwicklung von JavaScript allgemein und den Zustand des ECMAScript-Standards und des größeren JS-Ökosystems.</dd>
</dl>


Irgendein Spezialexperte dachte sich, dass ein Proposal für die Standardisierung
von Signals Grund genug sei, einen Nachfolger von Revision 572 aufzunehmen. Hört
euch gern an, wie der Spezialexperte z…

Irgendein Spezialexperte dachte sich, dass ein Proposal für die Standardisierung
von Signals Grund genug sei, einen Nachfolger von Revision 572 aufzunehmen. Hört
euch gern an, wie der Spezialexperte zusammen mit Stefan und Gast Bernhard Mayr
(Mastodon, Twitter) zum zweiten Mal erfolglos versucht, den Signals-Hype zu
verstehen.


SCHAUNOTIZEN

[00:01:12] SIGNAAAAAALS!

Das Signals-Proposal lädt zu Vergleichen mit dem (eingeschlafenen) Proposal für
Standard-Observables ein. Wie bei Signals gibt es reichlich JS-Implementierungen
(RxJS, Bacon.js) und nicht wirklich einen offensichtlich erkennbaren Drang nach
der einen Standard-Lösung. Wir spekulieren dennoch über Alternativen zu (und
besseren Wegen für) Standard-Signals (z.B. ein Standard-Event-Target als Schritt
0), über die Motivation (offizielle Angaben hierzu sind eher dünn), Perspektiven
der Weiterentwicklung von JavaScript allgemein und den Zustand des
ECMAScript-Standards und des größeren JS-Ökosystems.

Revision 616: Signals 2 – Reactive Boogaloo

<p>Mit Gast <a href="https://hans-christian-otto.de/"><b>Hans-Christian Otto</b></a> (Chef bei <a href="https://www.suora.com/">Suora</a> und Tröter bei <a href="https://ruhr.social/@muhdiekuh">@muhdiekuh@ruhr.social</a>) starteten Schepp und Peter einen Glücksrad-Versuch.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.</p>
<p>Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.</p>
<p>Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:11:13] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover">Popover</a> und die Weiterentwicklung der Web-Plattform allgemein</dt>
<dd>Über das Popover-Attribut nebst der kompletten <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover-API</a> und das verwandte <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">&lt;dialog&gt;-Element</a> entspann sich eine Diskussion über Polyfills (u.A. <a href="https://github.com/oddbird/popover-polyfill">für die Popover-API</a>) und die Weiterentwicklung der Webplattform allgemein. Von <a href="https://github.com/turbolinks/turbolinks">Turbolinks</a> über <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API">View Transitions</a> bis zu <a href="https://www.sencha.com/products/extjs/">ExtJS</a> und TailwindCSS und <a href="https://www.totaltypescript.com/ts-reset">ts-reset</a> mäandern wird und glauben, auf Abschweif-Rekordkurs zu sein &#8230;</dd>
<dt>[01:04:38] <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_class_escape">Character class escapes</a></dt>
<dd>Peter glaubt, endlich mal ungestört über reguläre Ausdrücke und speziell das <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets">v-Flag</a> und seine Implikationen für <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape">Unicode Character Class Escapes</a> referieren zu dürfen, doch wir bleiben nur kurz beim Thema. <a href="https://unjs.io/packages/magic-regexp">magic-regexp</a>, ein <a href="https://github.com/tc39/proposal-regexp-x-mode">Proposal für den x-Mode</a> sowie eine Empfehlung für <a href="https://regexr.com/">Regexr</a> passen noch in den Relevanzkorrididor, doch das lässt sich über die Folgethemen nur bedingt sagen. Unter anderen sprechen wir über:</p>
<ul>
<li>den PHP-Package-Manager <a href="https://getcomposer.org/">Composer</a></li>
<li><a href="https://turbinecss.github.io/docs-11.php.html">TurbineCSS</a>, ein altes Projekt von Schepp und Peter</li>
<li>die Programmiersprache <a href="https://en.wikipedia.org/wiki/MUMPS">MUMPS</a></li>
<li>die ähnlich elegante Programmiersprache <a href="https://go.dev/">Go</a></li>
<li><a href="https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags">Optionale Tags</a> im Google HTML-Guide</li>
<li>Peters <a href="https://www.peterkroener.de/100000-mutationobserver-vs-100000-funktionen/">Artikel zu MutationObserver-Performance</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observers</a></li>
<li>das <a href="https://caniuse.com/mdn-api_intersectionobserver_scrollmargin">scrollmargin-Feature</a> des Intersection Observer</li>
<li>die <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility">checkVisibility-API</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading">Lazy Loading</a> in seinen diversen Facetten</li>
</ul>
</dd>
</dl>


Mit Gast Hans-Christian Otto (Chef bei Suora und Tröter bei
@muhdiekuh@ruhr.social) starteten Schepp und Peter einen Glücksrad-Versuch.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne…

Mit Gast Hans-Christian Otto (Chef bei Suora und Tröter bei
@muhdiekuh@ruhr.social) starteten Schepp und Peter einen Glücksrad-Versuch.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.


SCHAUNOTIZEN

[00:11:13] POPOVER UND DIE WEITERENTWICKLUNG DER WEB-PLATTFORM ALLGEMEIN

Über das Popover-Attribut nebst der kompletten Popover-API und das verwandte
<dialog>-Element entspann sich eine Diskussion über Polyfills (u.A. für die
Popover-API) und die Weiterentwicklung der Webplattform allgemein. Von
Turbolinks über View Transitions bis zu ExtJS und TailwindCSS und ts-reset
mäandern wird und glauben, auf Abschweif-Rekordkurs zu sein …

[01:04:38] CHARACTER CLASS ESCAPES

Peter glaubt, endlich mal ungestört über reguläre Ausdrücke und speziell das
v-Flag und seine Implikationen für Unicode Character Class Escapes referieren zu
dürfen, doch wir bleiben nur kurz beim Thema. magic-regexp, ein Proposal für den
x-Mode sowie eine Empfehlung für Regexr passen noch in den Relevanzkorrididor,
doch das lässt sich über die Folgethemen nur bedingt sagen. Unter anderen
sprechen wir über:



 * den PHP-Package-Manager Composer
 * TurbineCSS, ein altes Projekt von Schepp und Peter
 * die Programmiersprache MUMPS
 * die ähnlich elegante Programmiersprache Go
 * Optionale Tags im Google HTML-Guide
 * Peters Artikel zu MutationObserver-Performance
 * Intersection Observers
 * das scrollmargin-Feature des Intersection Observer
 * die checkVisibility-API
 * Lazy Loading in seinen diversen Facetten

Revision 615: Glücksrad gone off the Track

<p>Anlässlich eines tiefgehenden Metatalks, den Vanessa auf der <a href="https://vuejs.amsterdam/">VueJS Amsterdam 2024</a> von ihm erleben durfte, luden wir <a href="https://twitter.com/ndzoesch">Niklas Dzösch</a>, <a href="https://www.shopware.com/de/news/interview-mit-developer-evangelist-niklas-dzoesch/">Developer Relations bei Shopware</a> und selbst <a href="https://shopcast.fm/">Podcaster</a>, zu uns ins virtuelle Studio ein.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://mittwald.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2023/03/Podcast_Banner_Mittwald_-Hosting_neu_gedacht_945x314px.jpg" alt="" /></a></p>
<div class="message_content">
<p>Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.</p>
<p>mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf <a href="https://mittwald.de/workingdraft?ref=workingdraft.de">mittwald.de/workingdraft</a> und buch dein erstes Projekt!</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:13] Zusammenarbeit in der Software-Entwicklung &#8211; eine Diskussionsrunde</dt>
<dd>Diesmal hatten wir keinen roten Faden, an welchem wir uns lang arbeiten wollten. Stattdessen nahmen wir Niklas&#8216; Talk als Aufhänger, um in die Welt der fehlerhaften und gelungenen zwischenmenschlichen Interaktionen in der Software-Entwicklung einzutauchen. So kommen wir von Hölzchen auf Stöckchen und möglicherweise wurde das Ganze mehr eine Therapiesitzung mit uns allen abwechselnd auf der roten Couch :)</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://covve.com/">Covve</a></dt>
<dd>Die von Niklas erwähnte App zur Beziehungspflege.</dd>
<dt><a href="https://nyc24.devrelcon.dev/">DevRelCon</a></dt>
<dd>Die Konferenz mit und über Developer Relations.</dd>
</dl>


Anlässlich eines tiefgehenden Metatalks, den Vanessa auf der VueJS Amsterdam
2024 von ihm erleben durfte, luden wir Niklas Dzösch, Developer Relations bei
Shopware und selbst Podcaster, zu uns ins vir…

Anlässlich eines tiefgehenden Metatalks, den Vanessa auf der VueJS Amsterdam
2024 von ihm erleben durfte, luden wir Niklas Dzösch, Developer Relations bei
Shopware und selbst Podcaster, zu uns ins virtuelle Studio ein.


UNSER SPONSOR



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie
wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die
Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und
Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur,
benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server
selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs
kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen
Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade
beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine
Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet
bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting.
Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein
erstes Projekt!


SCHAUNOTIZEN

[00:02:13] ZUSAMMENARBEIT IN DER SOFTWARE-ENTWICKLUNG – EINE DISKUSSIONSRUNDE

Diesmal hatten wir keinen roten Faden, an welchem wir uns lang arbeiten wollten.
Stattdessen nahmen wir Niklas‘ Talk als Aufhänger, um in die Welt der
fehlerhaften und gelungenen zwischenmenschlichen Interaktionen in der
Software-Entwicklung einzutauchen. So kommen wir von Hölzchen auf Stöckchen und
möglicherweise wurde das Ganze mehr eine Therapiesitzung mit uns allen
abwechselnd auf der roten Couch :)


LINKS

COVVE

Die von Niklas erwähnte App zur Beziehungspflege.

DEVRELCON

Die Konferenz mit und über Developer Relations.

Revision 614: Zusammenarbeit in der Software-Entwicklung – eine Diskussionsrunde

<p>Schepp tritt in dieser Revision als Gast auf und lässt Vanessa und Peter an seinen gesammelten Fun Facts rund um <a href="https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung)">Internationalisierung</a> und <a href="https://de.wikipedia.org/wiki/Lokalisierung_(Softwareentwicklung)">Lokalisierung</a> teilhaben.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://makandra.de/goto/workingdraft?ref=workingdraft.de"><img loading="lazy" width="396" height="208" class="alignnone size-medium wp-image-6701" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2024/04/makandra_devops-as-a-service.jpg" alt="" srcset="https://workingdraft.de/wp-content/uploads/2024/04/makandra_devops-as-a-service.jpg 396w, https://workingdraft.de/wp-content/uploads/2024/04/makandra_devops-as-a-service-300x158.jpg 300w" sizes="(max-width: 396px) 100vw, 396px" /></a></p>
<div class="message_content">
<p>makandra bietet umfassende Unterstützung für Entwicklerteams mit Infrastruktur- und Operations-Expertise. Das DevOps as a Service-Angebot umfasst Beratung und Unterstützung in allen Bereichen der Infrastruktur, von der Dimensionierung über Technologieentscheidungen bis hin zum Aufbau mit Infrastructure-as-Code, automatisierten Deployments und mehr. Darüber hinaus im Angebot: Maßgeschneiderte Schulungen zu Kubernetes, Terraform und AWS.</p>
<p>Sie suchen Unterstützung beim Monitoring Ihrer Infrastruktur oder fragen sich, ob Ihre Backup-Strategie für einen Disaster-Fall ausreichend ist? Sie suchen temporär Unterstützung, um Ihre Entwickler zu entlasten oder ein eigenes Infrastruktur-Team aufzubauen? Wir helfen gerne. Mehr Infos unter <a href="https://makandra.de/goto/workingdraft?ref=workingdraft.de">makandra.de/goto/workingdraft</a>.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:58] <a href="https://schepp.github.io/hsd-wak/globalisierung/">Fun Facts zu Internationalisierung und Lokalisierung</a></dt>
<dd>Wir starten mit den zahllosen Herausforderungen schon bei der einfachen Übersetzung von Texten, wie z.B. der Sortierung von Sprachen in einem Sprach-Auswahl-UI (für das man natürlich keinesfalls Landesflaggen verwenden sollte). In mäandernder Form sprechen wir unter anderem über <a href="https://www.kleinezeitung.at/sport/fussball/euro/18326153/adidas-stoppt-verkauf-von-dfb-trikot-mit-der-nummer-44">kulturell suboptimale Typografie</a>, welche Sprache <a href="https://www.inter-contact.de/blog/textlaenge-sprachen">die längsten Wörter</a> hat, die extrem relevanten Unterschiede zwischen <a href="https://de.wikipedia.org/wiki/ISO_639">ISO 639</a> (Sprachcodes) und <a href="https://de.wikipedia.org/wiki/ISO-3166-1-Kodierliste">ISO 3166-1</a> (Ländercodes) und die unterschiedliche alphabetische Sortierung in verschiedenen Sprachen (kein Problem mit <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator">Intl.Collator</a>). Nebenher kommen auch <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow"><code>text-overflow</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee"><code>&lt;marquee&gt;</code></a>, die für Übersetzungen möglicherweise sehr relevante CSS-Funktion <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr"><code>attr()</code></a>, automatische Übersetzungen, <a href="https://www.lingscars.com/">LINGsCARS</a> und erste Fragen zu Webdesign zur Sprache. Nach einem unerklärlichen Exkurs zu Macbook-Tastaturlayouts stellen wir fest, dass <a href="https://github.com/patch/i18n-testing/blob/master/personal-names.tsv">Namen beliebige Strings sein müssen</a>, Adressen ebenso (u.A. dank Besonderheiten in Japan, <a href="https://www.lensandfeather.com/von-a-nach-b-in-costa-rica/">Costa Rica</a> und <a href="https://de.wikipedia.org/wiki/Quadratestadt">Mannheim</a>) und dass diese Revision ein Mehrteiler wird werden müssen.</dd>
</dl>


Schepp tritt in dieser Revision als Gast auf und lässt Vanessa und Peter an
seinen gesammelten Fun Facts rund um Internationalisierung und Lokalisierung
teilhaben.


UNSER SPONSOR



makandra bietet u…

Schepp tritt in dieser Revision als Gast auf und lässt Vanessa und Peter an
seinen gesammelten Fun Facts rund um Internationalisierung und Lokalisierung
teilhaben.


UNSER SPONSOR



makandra bietet umfassende Unterstützung für Entwicklerteams mit Infrastruktur-
und Operations-Expertise. Das DevOps as a Service-Angebot umfasst Beratung und
Unterstützung in allen Bereichen der Infrastruktur, von der Dimensionierung über
Technologieentscheidungen bis hin zum Aufbau mit Infrastructure-as-Code,
automatisierten Deployments und mehr. Darüber hinaus im Angebot:
Maßgeschneiderte Schulungen zu Kubernetes, Terraform und AWS.

Sie suchen Unterstützung beim Monitoring Ihrer Infrastruktur oder fragen sich,
ob Ihre Backup-Strategie für einen Disaster-Fall ausreichend ist? Sie suchen
temporär Unterstützung, um Ihre Entwickler zu entlasten oder ein eigenes
Infrastruktur-Team aufzubauen? Wir helfen gerne. Mehr Infos unter
makandra.de/goto/workingdraft.


SCHAUNOTIZEN

[00:01:58] FUN FACTS ZU INTERNATIONALISIERUNG UND LOKALISIERUNG

Wir starten mit den zahllosen Herausforderungen schon bei der einfachen
Übersetzung von Texten, wie z.B. der Sortierung von Sprachen in einem
Sprach-Auswahl-UI (für das man natürlich keinesfalls Landesflaggen verwenden
sollte). In mäandernder Form sprechen wir unter anderem über kulturell
suboptimale Typografie, welche Sprache die längsten Wörter hat, die extrem
relevanten Unterschiede zwischen ISO 639 (Sprachcodes) und ISO 3166-1
(Ländercodes) und die unterschiedliche alphabetische Sortierung in verschiedenen
Sprachen (kein Problem mit Intl.Collator). Nebenher kommen auch text-overflow,
<marquee>, die für Übersetzungen möglicherweise sehr relevante CSS-Funktion
attr(), automatische Übersetzungen, LINGsCARS und erste Fragen zu Webdesign zur
Sprache. Nach einem unerklärlichen Exkurs zu Macbook-Tastaturlayouts stellen wir
fest, dass Namen beliebige Strings sein müssen, Adressen ebenso (u.A. dank
Besonderheiten in Japan, Costa Rica und Mannheim) und dass diese Revision ein
Mehrteiler wird werden müssen.

Revision 613: Internationalisierung und Lokalisierung, Teil 1

<p>Schepp, Vanessa und Peter setzen ihre Reise durch die Webtech-Features im <a href="https://webkit.org/blog/15063/webkit-features-in-safari-17-4/">neuesten Safari-Release</a> fort.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:07] Re-Match Switch vs. Checkbox</dt>
<dd>Nach einer Woche des Mental-Marinierens haben wir neue Gedanken zu <code>&lt;input type="checkbox" switch&gt;</code> ausgebrütet. Zusammenfassend lässt sich festhalten, dass Entwickler:innen (<a href="https://github.com/kdeldycke/awesome-falsehood">unter anderem</a>) auch die Komplexität von Checkboxes, Selects und Formularen allgemein unterschätzen. <a href="https://github.com/whatwg/html/issues/4180">Auch die WHATWG ist mit dem Switch-Thema noch nicht am Ende!</a></dd>
<dt>[00:10:20] Alternativtext für <em>generated content</em></dt>
<dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content#adding_an_image_with_alternative_text">Der CSS-Property <code>content</code> kann ein Alternativtext mitgegeben werden</a>. Wir denken auf Screenreader-Kompatibilität herum und überlegen wie <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code>:lang()</code></a> bei der Internationalisierung und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports"><code>@supports</code></a> bei der Implementierung helfen könnte.</dd>
<dt>[00:17:55] Discrete Transitions</dt>
<dd>Mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior"><code>transition-behavior</code></a> können wir festlegen, wie sich zu Transitions nicht kompatible CSS-Properties verhalten sollen. <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API">View Transitions</a> haben damit nur am äußersten Rande zu tun, kommen aber natürlich trotzdem auch zur Sprache.</dd>
<dt>[00:30:23] Custom Properties für <code>::backdrop</code></dt>
<dd>Ging bisher nicht, weil <a href="https://developer.mozilla.org/en-US/docs/Glossary/Top_layer">Top Layer</a>, geht jetzt aber schon!</dd>
<dt>[00:36:18] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility"><code>checkVisibility()</code></a></dt>
<dd>Nomen est Omen, aber die Use Cases für u.A. Web Components und ggf. in Kombination mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a> bedürfen genaueren Durchkauens. Peter überlegt, ob er nach seiner großen <a href="https://www.peterkroener.de/100000-mutationobserver-vs-100000-funktionen/">Mutation-Observer-Profiling-Kampagne</a> nun auch 100.000 Intersection Observer testen muss.</dd>
<dt>[00:48:37] Custom State Set</dt>
<dd>Kurzes Referat über <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet">CustomStateSet</a> und warum es nützlich ist.</dd>
<dt>[00:53:24] <code>Promise.withResolvers()</code></dt>
<dd>Wir besprechen, ob das neue <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers"><code>Promise.withResolvers()</code></a> oder das weniger neue <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise"><code>new Promise()</code></a> besser als Wrapping-Mechanismus für den gänzlich antiken <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader">FileReader</a> taugt. Nebenher stellt sich raus, dass CSS einen <code>infinity</code>-Wert kennt!</dd>
<dt>[01:12:30] <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy"><code>Object.groupBy()</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy"><code>Map.groupBy()</code></a></dt>
<dd>Peter erklärt schnell die Unterschiede zwischen den beiden neuen Gruppierungs-Features (Spoiler: eins macht Objekte, eins macht Maps) und was die beiden mit den neuen <a href="https://github.com/tc39/proposal-iterator-helpers">Iterator Helpers</a> zu tun haben (Spoiler: nichts).</dd>
<dt>[01:15:58] Neuer Mechanismus für die Source-Auswahl bei Media-Elementen</dt>
<dd>Wer soll entscheiden, welche Quelldatei mit welchem Codec geladen werden soll, Entwickler:in oder Browser? Schepp argumentatiert recht überzeugend für letzteres.</dd>
</dl>


Schepp, Vanessa und Peter setzen ihre Reise durch die Webtech-Features im
neuesten Safari-Release fort.


SCHAUNOTIZEN

[00:01:07] RE-MATCH SWITCH VS. CHECKBOX

Nach einer Woche des Mental-Marinierens…

Schepp, Vanessa und Peter setzen ihre Reise durch die Webtech-Features im
neuesten Safari-Release fort.


SCHAUNOTIZEN

[00:01:07] RE-MATCH SWITCH VS. CHECKBOX

Nach einer Woche des Mental-Marinierens haben wir neue Gedanken zu <input
type="checkbox" switch> ausgebrütet. Zusammenfassend lässt sich festhalten, dass
Entwickler:innen (unter anderem) auch die Komplexität von Checkboxes, Selects
und Formularen allgemein unterschätzen. Auch die WHATWG ist mit dem Switch-Thema
noch nicht am Ende!

[00:10:20] ALTERNATIVTEXT FÜR GENERATED CONTENT

Der CSS-Property content kann ein Alternativtext mitgegeben werden. Wir denken
auf Screenreader-Kompatibilität herum und überlegen wie :lang() bei der
Internationalisierung und @supports bei der Implementierung helfen könnte.

[00:17:55] DISCRETE TRANSITIONS

Mit transition-behavior können wir festlegen, wie sich zu Transitions nicht
kompatible CSS-Properties verhalten sollen. View Transitions haben damit nur am
äußersten Rande zu tun, kommen aber natürlich trotzdem auch zur Sprache.

[00:30:23] CUSTOM PROPERTIES FÜR ::BACKDROP

Ging bisher nicht, weil Top Layer, geht jetzt aber schon!

[00:36:18] CHECKVISIBILITY()

Nomen est Omen, aber die Use Cases für u.A. Web Components und ggf. in
Kombination mit dem Intersection Observer bedürfen genaueren Durchkauens. Peter
überlegt, ob er nach seiner großen Mutation-Observer-Profiling-Kampagne nun auch
100.000 Intersection Observer testen muss.

[00:48:37] CUSTOM STATE SET

Kurzes Referat über CustomStateSet und warum es nützlich ist.

[00:53:24] PROMISE.WITHRESOLVERS()

Wir besprechen, ob das neue Promise.withResolvers() oder das weniger neue new
Promise() besser als Wrapping-Mechanismus für den gänzlich antiken FileReader
taugt. Nebenher stellt sich raus, dass CSS einen infinity-Wert kennt!

[01:12:30] OBJECT.GROUPBY() UND MAP.GROUPBY()

Peter erklärt schnell die Unterschiede zwischen den beiden neuen
Gruppierungs-Features (Spoiler: eins macht Objekte, eins macht Maps) und was die
beiden mit den neuen Iterator Helpers zu tun haben (Spoiler: nichts).

[01:15:58] NEUER MECHANISMUS FÜR DIE SOURCE-AUSWAHL BEI MEDIA-ELEMENTEN

Wer soll entscheiden, welche Quelldatei mit welchem Codec geladen werden soll,
Entwickler:in oder Browser? Schepp argumentatiert recht überzeugend für
letzteres.

Revision 612: Neues in der Web-Plattform, Teil 2

<p>Schepp, Vanessa und Peter nehmen <a href="https://webkit.org/blog/15063/webkit-features-in-safari-17-4/">ein neues Safari-Release</a> zum Anlass, ausschließlich über neue Web-APIs zu philosophieren. Kontroverse Themen wie der <a href="https://de.m.wikipedia.org/wiki/Gesetz_%C3%BCber_digitale_M%C3%A4rkte">Digital Markets Act</a> oder Peters <a href="https://mastodon.social/@sir_pepe/111929882803678961">randständige Feature-Wünsche</a> spielen keine Rolle, wir blicken stattdessen positiv in die Zukunft!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:04:05] <a href="https://github.com/whatwg/html/issues/4180"><code>&lt;input type="checkbox" switch&gt;</code></a></dt>
<dd>Ein neues Input-Element? Das eigentlich nur eine Checkbox ist? Und bloß etwas anders aussieht? Und per HTML statt per <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> in die Welt gesetzt wird? Wir sind leicht überfordert und bemühen Vergleiche zum <a href="https://developer.chrome.com/docs/css-ui/exclusive-accordion">mit <code>&lt;details&gt;</code> gebauten Accordion</a> und dem <a href="https://github.com/WICG/close-watcher">Close-Watcher-Proposal</a>. Auch der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate">Indeterminate-State</a> von Checkboxen findet Erwähnung</dd>
<dt>[00:28:33] <a href="https://webkit.org/blog/14933/bringing-back-horizontal-rules-in-select-elements/"><code>&lt;hr&gt;</code> in <code>&lt;select&gt;</code></a></dt>
<dd>Ähnlich wie bei <code>&lt;input type="checkbox" switch&gt;</code> sind wir uns nicht ganz über die Notwendigkeit dieses HTML-Features im klaren und probieren Alternativen mit <code>&lt;optgroup&gt;</code> zu formulieren.</dd>
<dt>[00:40:10] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">align-content</a> in Block- und Table-Layouts</dt>
<dd>Exotisch, aber nicht unwillkommen.</dd>
<dt>[00:43:10] <a href="https://developer.chrome.com/docs/css-ui/at-scope">CSS Scoping</a></dt>
<dd>Peter bekommt den Unterschied zwischen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@scope"><code>@scope</code></a> und  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:scope"><code>:scope</code></a> nochmal neu erklärt und moniert dann, dass weder das eine noch das andere seine absurden Anforderungen zu 111% bedient.</dd>
</dl>


Schepp, Vanessa und Peter nehmen ein neues Safari-Release zum Anlass,
ausschließlich über neue Web-APIs zu philosophieren. Kontroverse Themen wie der
Digital Markets Act oder Peters randständige Featu…

Schepp, Vanessa und Peter nehmen ein neues Safari-Release zum Anlass,
ausschließlich über neue Web-APIs zu philosophieren. Kontroverse Themen wie der
Digital Markets Act oder Peters randständige Feature-Wünsche spielen keine
Rolle, wir blicken stattdessen positiv in die Zukunft!


SCHAUNOTIZEN

[00:04:05] <INPUT TYPE="CHECKBOX" SWITCH>

Ein neues Input-Element? Das eigentlich nur eine Checkbox ist? Und bloß etwas
anders aussieht? Und per HTML statt per appearance in die Welt gesetzt wird? Wir
sind leicht überfordert und bemühen Vergleiche zum mit <details> gebauten
Accordion und dem Close-Watcher-Proposal. Auch der Indeterminate-State von
Checkboxen findet Erwähnung

[00:28:33] <HR> IN <SELECT>

Ähnlich wie bei <input type="checkbox" switch> sind wir uns nicht ganz über die
Notwendigkeit dieses HTML-Features im klaren und probieren Alternativen mit
<optgroup> zu formulieren.

[00:40:10] ALIGN-CONTENT IN BLOCK- UND TABLE-LAYOUTS

Exotisch, aber nicht unwillkommen.

[00:43:10] CSS SCOPING

Peter bekommt den Unterschied zwischen @scope und :scope nochmal neu erklärt und
moniert dann, dass weder das eine noch das andere seine absurden Anforderungen
zu 111% bedient.

Revision 611: Neues in der Web-Plattform, Teil 1

<p>Erneut haben wir uns <a href="https://www.lichter.io/">Alexander Lichter</a> (<a href="https://www.linkedin.com/in/alexanderlichter/">LinkedIn</a> / <a href="https://hachyderm.io/@manniL">Mastodon</a> / <a href="https://twitter.com/TheAlexLichter/">Twitter</a>) in die Sendung eingeladen, der sich als Web-Engineering-Consultant, <a href="https://www.lichter.io/workshops/">Trainer</a> und <a href="https://www.youtube.com/@TheAlexLichter/">Video</a>&#8211;<a href="https://www.twitch.tv/TheAlexLichter/">Streamer</a> nicht nur mit <a href="https://workingdraft.de/608/">Vue.js, Nuxt oder UnJS</a> auskennt, sondern auch in den hohen Künsten der Suchmaschinenoptimierung, kurz SEO.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.</p>
<p>Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.</p>
<p>Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside><hr>
<dt>[00:02:30] SEO</dt>
<dd>Alex eröffnet unsere Sendung mit der Feststellung, dass nur ein geringer Prozentsatz aller Webseiten überhaupt organischen Suchverkehr von Google erhält, weil sie zu weit hinten in den Suchergebnissen auftauchen. Umso wichtiger ist es demnach, seine Seite für Suchmaschinen zu optimieren. Es gibt verschiedene Aspekte der Suchmaschinenoptimierung, darunter das technische SEO, sowie On-Page- und Off-Page-Optimierungen. Auf den vorderen Plätzen stehen qualitativer Inhalt, gute User Experience und technische Aspekte wie Ladezeiten und Sicherheit (in erster Linie HTTPS). Gutes SEO hat vor allem die Nutzer und ihre Zufriedenheit im Sinn.</p>
<p>Neben hochwertigen Inhalten kann auch eine Keyword-Recherche nicht schaden, um eine langfristige erfolgreiche Webseite zu gewährleisten. Zudem erörtern wir Tools (<a href="https://ads.google.com/intl/de_de/home/tools/keyword-planner/">Google Ads Keyword Planner</a>, <a href="https://keywordtool.io/">keywordtool.io</a>, <a href="https://ahrefs.com/de">Ahrefs</a>, <a href="https://de.semrush.com/features/keyword-research-toolkit/">Semrush</a> oder <a href="https://moz.com/explorer">Moz</a>) und Strategien zur effektiven Keyword-Recherche und Leistungsverbesserung von Webseiten, insbesondere im Hinblick auf die <a href="https://developers.google.com/search/docs/appearance/core-web-vitals">Core Web Vitals zur Steigerung der Benutzererfahrung</a>. Wir gehen auch kurz auf verschiedene Core Web Vitals ein, wie den <a href="https://web.dev/articles/cls">Cumulative Layout Shift</a> (CLS) und <a href="https://web.dev/articles/lcp">Largest Contentful Paint</a> (LCP), und wie man diese mit Tools wie <a href="https://developer.chrome.com/docs/lighthouse">Lighthouse</a> messen kann. Auch die mobile User Experience und Accessibility spielen eine Rolle.</p>
<p>Dann folgen Ratschlägen zur Verbesserung der Seitenstruktur und Verlinkung. Wir sprechen über semantisches Markup, hierarchische Strukturen und deren Bedeutung für Suchmaschinen. Wir diskutieren die Verwendung von <a href="https://schema.org/">Schema.org</a> in <a href="https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=de#how-structured-data-works-in-google-search">JSON-LD</a>-Ausprägung zur Inhaltskennzeichnung <a href="https://developers.google.com/search/docs/appearance/structured-data/search-gallery">für die Unterstützung von Google bei der Interpretation und Darstellung auf den Ergebnisseiten</a>. Weitere Themen sind die effektive Nutzung von <a href="https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap">Sitemaps</a> zur Unterstüzung der Indexierung von Seiten durch Google, die Vermeidung von Duplikaten und die korrekte Verwendung von <a href="https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls">Canonical-Tags</a>. Abschließend thematisieren wir den <a href="https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics">Indexierungsprozess bei Google bei Single-Page-Anwendungen</a> (SPAs). Alex betont die Relevanz von Server-Side-Rendering (SSR) für den Webseiten-Traffic anhand <a href="https://twitter.com/jhooks/status/1757086865348522109">eines Beispiels von Joel Hooks, Mitbegründer von Egghead</a>. </p>
<p>Zum Schluß widmen wir uns noch den (potentiellen) Herausforderungen im Zusammenhang mit AI-generierten Inhalten. Alex sieht Google in Zukunft ein stärkeres Gewicht auf Vertrauenswürdigkeit und Autorität legen. Hier sind Konsistenz und Qualität des Contents zentral.</dd>
</dl>


Erneut haben wir uns Alexander Lichter (LinkedIn / Mastodon / Twitter) in die
Sendung eingeladen, der sich als Web-Engineering-Consultant, Trainer und
Video–Streamer nicht nur mit Vue.js, Nuxt oder Un…

Erneut haben wir uns Alexander Lichter (LinkedIn / Mastodon / Twitter) in die
Sendung eingeladen, der sich als Web-Engineering-Consultant, Trainer und
Video–Streamer nicht nur mit Vue.js, Nuxt oder UnJS auskennt, sondern auch in
den hohen Künsten der Suchmaschinenoptimierung, kurz SEO.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.

[00:02:30] SEO

Alex eröffnet unsere Sendung mit der Feststellung, dass nur ein geringer
Prozentsatz aller Webseiten überhaupt organischen Suchverkehr von Google erhält,
weil sie zu weit hinten in den Suchergebnissen auftauchen. Umso wichtiger ist es
demnach, seine Seite für Suchmaschinen zu optimieren. Es gibt verschiedene
Aspekte der Suchmaschinenoptimierung, darunter das technische SEO, sowie
On-Page- und Off-Page-Optimierungen. Auf den vorderen Plätzen stehen
qualitativer Inhalt, gute User Experience und technische Aspekte wie Ladezeiten
und Sicherheit (in erster Linie HTTPS). Gutes SEO hat vor allem die Nutzer und
ihre Zufriedenheit im Sinn.



Neben hochwertigen Inhalten kann auch eine Keyword-Recherche nicht schaden, um
eine langfristige erfolgreiche Webseite zu gewährleisten. Zudem erörtern wir
Tools (Google Ads Keyword Planner, keywordtool.io, Ahrefs, Semrush oder Moz) und
Strategien zur effektiven Keyword-Recherche und Leistungsverbesserung von
Webseiten, insbesondere im Hinblick auf die Core Web Vitals zur Steigerung der
Benutzererfahrung. Wir gehen auch kurz auf verschiedene Core Web Vitals ein, wie
den Cumulative Layout Shift (CLS) und Largest Contentful Paint (LCP), und wie
man diese mit Tools wie Lighthouse messen kann. Auch die mobile User Experience
und Accessibility spielen eine Rolle.

Dann folgen Ratschlägen zur Verbesserung der Seitenstruktur und Verlinkung. Wir
sprechen über semantisches Markup, hierarchische Strukturen und deren Bedeutung
für Suchmaschinen. Wir diskutieren die Verwendung von Schema.org in
JSON-LD-Ausprägung zur Inhaltskennzeichnung für die Unterstützung von Google bei
der Interpretation und Darstellung auf den Ergebnisseiten. Weitere Themen sind
die effektive Nutzung von Sitemaps zur Unterstüzung der Indexierung von Seiten
durch Google, die Vermeidung von Duplikaten und die korrekte Verwendung von
Canonical-Tags. Abschließend thematisieren wir den Indexierungsprozess bei
Google bei Single-Page-Anwendungen (SPAs). Alex betont die Relevanz von
Server-Side-Rendering (SSR) für den Webseiten-Traffic anhand eines Beispiels von
Joel Hooks, Mitbegründer von Egghead.

Zum Schluß widmen wir uns noch den (potentiellen) Herausforderungen im
Zusammenhang mit AI-generierten Inhalten. Alex sieht Google in Zukunft ein
stärkeres Gewicht auf Vertrauenswürdigkeit und Autorität legen. Hier sind
Konsistenz und Qualität des Contents zentral.

Revision 610: SEO!

<p>Gast <a href="https://www.linkedin.com/in/markus-stahmann-285939109/">Markus Stahmann</a> klärt in dieser Revision über Farbsehschwäche und Farbblindheit auf. Markus ist 1. Vorsitzender des <a href="https://www.iffarb.org/">Interessenverbands der Farbsehschwachen und Farbenblinden</a> (der die hervorragende Webseite <a href="https://www.farbsehschwaeche.de">farbsehschwaeche.de</a> betreibt) und außerdem Webentwickler bei <a href="https://new-data-services.de/">New Data Services</a>, was ihn zu einem einmaligen Kompetenzknäul für uns macht!</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.</p>
<p>Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.</p>
<p>Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:21] Farbsehschwäche und Farbblindheit</dt>
<dd>Wie beginnen mit den Grundlagen (Definition, Entstehung und Häufigkeit der Farbfehlsichtigkeiten) und steigen danach sogleich in Alltagsbeispiele ein. Bananen stellen sich als ein größeres Problem als der Straßenverkehr heraus, Luft- und Wasserstraßen bleiben für die Farbefehlsichtigen durch den <a href="https://de.wikipedia.org/wiki/Lanterntest_(Beyne)">Lanterntest</a> gleich ganz gesperrt. Best und Worst Practices in Web und Webentwicklung kommen natürlich auch nicht zu kurz; wer die <a href="https://www.farbsehschwaeche.de/ratgeber/drei-regeln-farbsehschwaeche-gerecht-gestalten">drei Regeln einhält</a>, ist meist schon ganz gut aufgestellt. In Hinblick auf das Big Picture kauen wir mögliche Effekte des <a href="https://ec.europa.eu/social/main.jsp?catId=1202&amp;intPageId=5581&amp;langId=en">European Accessibility Act</a> durch und überlegen wie wir in ganz alltäglichen Web-Projekten Farbsehschwächen-Kompatibilität erhöhen können.</dd>
</dl>


Gast Markus Stahmann klärt in dieser Revision über Farbsehschwäche und
Farbblindheit auf. Markus ist 1. Vorsitzender des Interessenverbands der
Farbsehschwachen und Farbenblinden (der die hervorragend…

Gast Markus Stahmann klärt in dieser Revision über Farbsehschwäche und
Farbblindheit auf. Markus ist 1. Vorsitzender des Interessenverbands der
Farbsehschwachen und Farbenblinden (der die hervorragende Webseite
farbsehschwaeche.de betreibt) und außerdem Webentwickler bei New Data Services,
was ihn zu einem einmaligen Kompetenzknäul für uns macht!


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.


SCHAUNOTIZEN

[00:02:21] FARBSEHSCHWÄCHE UND FARBBLINDHEIT

Wie beginnen mit den Grundlagen (Definition, Entstehung und Häufigkeit der
Farbfehlsichtigkeiten) und steigen danach sogleich in Alltagsbeispiele ein.
Bananen stellen sich als ein größeres Problem als der Straßenverkehr heraus,
Luft- und Wasserstraßen bleiben für die Farbefehlsichtigen durch den Lanterntest
gleich ganz gesperrt. Best und Worst Practices in Web und Webentwicklung kommen
natürlich auch nicht zu kurz; wer die drei Regeln einhält, ist meist schon ganz
gut aufgestellt. In Hinblick auf das Big Picture kauen wir mögliche Effekte des
European Accessibility Act durch und überlegen wie wir in ganz alltäglichen
Web-Projekten Farbsehschwächen-Kompatibilität erhöhen können.

Revision 609: Farbsehschwäche und Farbblindheit

<p>Diese Revision wollten wir uns mit Nuxt und UnJS befassen und haben uns als Gesprächspartner <a href="https://www.lichter.io/">Alexander Lichter</a> (<a href="https://www.linkedin.com/in/alexanderlichter/">LinkedIn</a> / <a href="https://hachyderm.io/@manniL">Mastodon</a> / <a href="https://twitter.com/TheAlexLichter/">Twitter</a>) eingeladen, der sich nicht nur als Web-Engineering-Consultant, <a href="https://www.lichter.io/workshops/">Trainer</a> und <a href="https://www.youtube.com/@TheAlexLichter/">Video</a>&#8211;<a href="https://www.twitch.tv/TheAlexLichter/">Streamer</a> betätigt, sondern auch Mitglied der Nuxt- und UnJS-Teams ist.   </p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://mittwald.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2023/03/Podcast_Banner_Mittwald_-Hosting_neu_gedacht_945x314px.jpg" alt="" /></a></p>
<div class="message_content">
<p>Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.</p>
<p>mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf <a href="https://mittwald.de/workingdraft?ref=workingdraft.de">mittwald.de/workingdraft</a> und buch dein erstes Projekt!</p>
</div>
</aside><hr>
<dt>[00:02:18] <a href="https://nuxt.com/">Nuxt</a></dt>
<dd>Nach einem kurzen Vorgeplänkel zu <a href="https://vuejs.org/">Vue.js</a> wechseln wir sogleich zu Nuxt, das wie Next.js ein sogenanntes &#8222;Meta-Framework&#8220; darstellt, nur dass es eben Vue nutzt, anstelle von React. Neben Nuxt gibt es noch <a href="https://quasar.dev/">Quasar</a>, das ebenfalls auf Vue setzt. </p>
<p>Allen Meta-Frameworks ist gemein, dass sie eines der clientseitigen Templating-Systeme nehmen und sie um serverseitige Funktionen ergänzen. Die wichtigste davon: Das Routing-System. </p>
<p>Darüberhinaus ermöglichen Meta-Frameworks wie Nuxt es, statische Seiten zu erzeugen, die im Client ganz ohne JavaScript auskommen. Da unterscheiden sie sich von Konzepten wie den Server-Components von React, die es ledigleich ermöglichen, einzelne Komponenten vom Server rendern und refreshen zu lassen, das Frontend aber weiterhin im Browser orchestrieren.</p>
<p>Wir reden über die aktuellste Version von Nuxt und wie diese bei ihrem Release von der Community aufgenommen wurde. Und wir blicken nach vorne auf die kommende Version 4, die demnächst erscheinen soll. Anders als nach Version 3 ist hier nicht mit großen Breaking Changes zu rechnen. Für einen Vorgeschmack auf die Änderungen können aber jetzt schon in Nuxt 3 entsprechende &#8222;Future Flags&#8220; aktiviert werden. Und für eine reibungslose Migration auf Version 4 gibt es dann noch sogenannte <a href="https://codemod.studio/">Codemods</a>, die bestehenden Code für das neue Framework automagisch umschreiben.</dd>
<dt>[01:06:18] <a href="https://unjs.io/">UnJS</a></dt>
<dd>An dieser Stelle schwenken wir um auf das Thema UnJS, welches eine Sammlung von kleinen und großen JavaScript-Helferlein ist. Zum ersten Mal hörten wir von UnJS von <a href="https://workingdraft.de/552/">Joe Ray Gregory Anfang 2023</a>, lernen aber erst jetzt, dass dies ebenfalls ein Projekt aus dem Vue-Kosmos ist.</p>
<p>Viele dieser Helferlein sind nämlich Spin-Offs von Projekten aus der Vue-Welt, von denen man aber annahm, dass sie auch für andere Projekte hilfreich sein könnten. Ein Beispiel ist der Webserver <a href="https://unjs.io/packages/nitro">Nitro</a>, der so etwas wie ein modernes Express + Connect darstelle und der nicht nur in Nuxt Verwendung findet, sondern auch in <a href="https://analogjs.org/">Analog.js</a>, dem Meta-Framework für Angular.</p>
<p>Ein weiteres spannendes Paket ist <a href="https://unjs.io/packages/unplugin">Unplugin</a>, das eine Art universelles Bindeglied zu allen existierenden Bundlern darstellt und einem so ermöglicht, ein Plugin leicht in jede Build-Chain zu integrieren.</p>
<p><a href="https://unjs.io/packages/magic-regexp">Magic-Regexp</a> ermöglicht es wiederum, Reguläre Ausdrücke in menschlicherer Sprache zu formulieren. </p>
<p>Dann gäbe es da noch <a href="https://unjs.io/packages/ufo">ufo</a>, das allerlei Tooling rund um das Verarbeiten von URLs bietet.</p>
<p>Und schließlich <a href="https://unjs.io/packages/fontaine">fontaine</a>, mit dem sich aufeinander abgestimmte Schriften-Stacks erstellen lassen.</p>
<p>Zum Abschluss geht nochmal zurück zu Nuxt und Alex gibt uns gute Tipps für den Einstieg und nennt ein paar Stolperfallen, die man bei der Arbeit mit Nuxt besser vermeidet. Und wir behandeln auch die Frage, wo man sein Nuxt-Projekt am besten hostet. Neben <a href="https://www.digitalocean.com/">Digital Ocean</a> lautet Alex&#8216; Tipp hier: <a href="https://fly.io/">fly.io</a></dd>
</dl>


Diese Revision wollten wir uns mit Nuxt und UnJS befassen und haben uns als
Gesprächspartner Alexander Lichter (LinkedIn / Mastodon / Twitter) eingeladen,
der sich nicht nur als Web-Engineering-Consul…

Diese Revision wollten wir uns mit Nuxt und UnJS befassen und haben uns als
Gesprächspartner Alexander Lichter (LinkedIn / Mastodon / Twitter) eingeladen,
der sich nicht nur als Web-Engineering-Consultant, Trainer und Video–Streamer
betätigt, sondern auch Mitglied der Nuxt- und UnJS-Teams ist.


UNSER SPONSOR



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie
wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die
Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und
Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur,
benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server
selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs
kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen
Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade
beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine
Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet
bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting.
Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein
erstes Projekt!

[00:02:18] NUXT

Nach einem kurzen Vorgeplänkel zu Vue.js wechseln wir sogleich zu Nuxt, das wie
Next.js ein sogenanntes „Meta-Framework“ darstellt, nur dass es eben Vue nutzt,
anstelle von React. Neben Nuxt gibt es noch Quasar, das ebenfalls auf Vue setzt.



Allen Meta-Frameworks ist gemein, dass sie eines der clientseitigen
Templating-Systeme nehmen und sie um serverseitige Funktionen ergänzen. Die
wichtigste davon: Das Routing-System.

Darüberhinaus ermöglichen Meta-Frameworks wie Nuxt es, statische Seiten zu
erzeugen, die im Client ganz ohne JavaScript auskommen. Da unterscheiden sie
sich von Konzepten wie den Server-Components von React, die es ledigleich
ermöglichen, einzelne Komponenten vom Server rendern und refreshen zu lassen,
das Frontend aber weiterhin im Browser orchestrieren.

Wir reden über die aktuellste Version von Nuxt und wie diese bei ihrem Release
von der Community aufgenommen wurde. Und wir blicken nach vorne auf die kommende
Version 4, die demnächst erscheinen soll. Anders als nach Version 3 ist hier
nicht mit großen Breaking Changes zu rechnen. Für einen Vorgeschmack auf die
Änderungen können aber jetzt schon in Nuxt 3 entsprechende „Future Flags“
aktiviert werden. Und für eine reibungslose Migration auf Version 4 gibt es dann
noch sogenannte Codemods, die bestehenden Code für das neue Framework
automagisch umschreiben.

[01:06:18] UNJS

An dieser Stelle schwenken wir um auf das Thema UnJS, welches eine Sammlung von
kleinen und großen JavaScript-Helferlein ist. Zum ersten Mal hörten wir von UnJS
von Joe Ray Gregory Anfang 2023, lernen aber erst jetzt, dass dies ebenfalls ein
Projekt aus dem Vue-Kosmos ist.



Viele dieser Helferlein sind nämlich Spin-Offs von Projekten aus der Vue-Welt,
von denen man aber annahm, dass sie auch für andere Projekte hilfreich sein
könnten. Ein Beispiel ist der Webserver Nitro, der so etwas wie ein modernes
Express + Connect darstelle und der nicht nur in Nuxt Verwendung findet, sondern
auch in Analog.js, dem Meta-Framework für Angular.

Ein weiteres spannendes Paket ist Unplugin, das eine Art universelles Bindeglied
zu allen existierenden Bundlern darstellt und einem so ermöglicht, ein Plugin
leicht in jede Build-Chain zu integrieren.

Magic-Regexp ermöglicht es wiederum, Reguläre Ausdrücke in menschlicherer
Sprache zu formulieren.

Dann gäbe es da noch ufo, das allerlei Tooling rund um das Verarbeiten von URLs
bietet.

Und schließlich fontaine, mit dem sich aufeinander abgestimmte Schriften-Stacks
erstellen lassen.

Zum Abschluss geht nochmal zurück zu Nuxt und Alex gibt uns gute Tipps für den
Einstieg und nennt ein paar Stolperfallen, die man bei der Arbeit mit Nuxt
besser vermeidet. Und wir behandeln auch die Frage, wo man sein Nuxt-Projekt am
besten hostet. Neben Digital Ocean lautet Alex‘ Tipp hier: fly.io

Revision 608: Nuxt & UnJS

<p>Nach rund <a href="https://workingdraft.de/538/">anderthalb Jahren</a>, in denen wir uns mit dem Thema nicht mehr dediziert befasst haben, haben wir uns erneut Jonas Ulrich (<a href="https://twitter.com/tsnmp">Twitter</a> / <a href="https://www.linkedin.com/in/jonas-ulrich-b0a7b0222/">LinkedIn</a>) und Daniel Ley (<a href="https://twitter.com/DLey_de">Twitter</a> / <a href="https://linkedin.com/in/daniel-ley-171729a1/">LinkedIn</a>) von <a href="http://kickstartds.com/">kickstartDS</a> in die Sendung eingeladen, um mit ihnen über den Stand der Dinge in Sachen Design-Systeme zu sprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:31] Design-Systeme im Jahr 2024</dt>
<dd>Was wir in unserem Gespräch zunächst einmal feststellen, ist dass die Bedeutung von Design-Systemen stetig zuzunehmen scheint. Gefühlt ist das Ganze vor 10 Jahren langsam bei den ersten großen Playern losgegangen, und mittlerweile gibt es sie überall. Wir vermuten, das hat ganz stark mit Tools wie React und Figma zu tun, die Design-System-freundliche Ansätze verfolgen.</p>
<p>Es liegt aber auch daran, dass Design-Systeme mit vielen Vorteilen locken: Sie unterstützen bei der Zusammenarbeit zwischen Entwicklung und Design, weil sie ein gemeinsames Verständnis der Sprache des anderen etablieren helfen. Dem Management wiederum bieten sie Vorteile in Form von Skalierung einerseits und Kostenersparnis andererseits. Auch schneiden wir das Thema ROI eines Designsystems an und sprechen darüber wie die Einführung in einer Organisation erleichtert werden kann, um eine bessere Adaption zu erzielen. Wir sind uns aber darin einig, dass ein wesentlicher Teil des Erfolgs nicht von technischen Aspekten, sondern auch von Stakeholder-Management und Kommunikation abhängt.</p>
<p>Apropos Technik: natürlich diskutieren wir über Vor- und Nachteile verschiedener Frontend-Stacks wie React und Web-Komponenten, welches Framework für die Zukunft relevant sein wird und wie der Transfer von Code zwischen verschiedenen Frameworks erleichtert werden könnte. Weiterhin erörtern wir, wer in einem Unternehmen oder Team für das Design-System verantwortlich sein sollte und wie Entscheidungen in diesem Zusammenhang getroffen werden können. Und schließlich weisen wir darauf hin, dass Design-Systeme am Ende immer nur so gut sind wie die sie Nutzenden ein Verständnis der darunter liegenden Konzepte haben.</p>
<p>Das zeigen auch Jonas&#8216; und Daniels Erfahrungen beim Einsatz ihres Open-Source Design-System-Frameworks kickstartDS bei Kunden: So mächtig das Framework auch ist, so unklar ist vielen unerfahrenen Neu-Design-System-Nutzenden, wie sie zu einem großen ganzen zusammenfügen und es an Ihre bestehenden Systeme anbinden können. Deshalb stand das letzte Jahr bei kickstartDS ganz im Zeichen der Weiterentwicklung hin zu einem nunmehr <a href="https://about.design-system.agency/starter/">schlüsselfertigen Frontend, mit typischen UI-Komponenten, Adaptern für Storyblok, Eleventy &amp; Co.</a> und einem anschaulichen <a href="https://about.design-system.agency/">Showcase</a> obendrauf.</dd>
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt>Jonas&#8216; Artikel zum Thema JSON-Schema</dt>
<dd>Part 1: <a href="https://www.kickstartds.com/blog/unlocking-the-frontend-pt1/">https://www.kickstartds.com/blog/unlocking-the-frontend-pt1/</a><br />
Part 2: <a href="https://www.kickstartds.com/blog/unlocking-the-frontend-pt2/">https://www.kickstartds.com/blog/unlocking-the-frontend-pt2/</a></dd>
<dt><a href="https://ruhmesmeile.com/">Ruhmesmeile</a></dt>
<dd>Jonas&#8216; und Daniels Web-Agentur aus Bonn</dd>
</dl>


Nach rund anderthalb Jahren, in denen wir uns mit dem Thema nicht mehr dediziert
befasst haben, haben wir uns erneut Jonas Ulrich (Twitter / LinkedIn) und Daniel
Ley (Twitter / LinkedIn) von kickstart…

Nach rund anderthalb Jahren, in denen wir uns mit dem Thema nicht mehr dediziert
befasst haben, haben wir uns erneut Jonas Ulrich (Twitter / LinkedIn) und Daniel
Ley (Twitter / LinkedIn) von kickstartDS in die Sendung eingeladen, um mit ihnen
über den Stand der Dinge in Sachen Design-Systeme zu sprechen.


SCHAUNOTIZEN

[00:01:31] DESIGN-SYSTEME IM JAHR 2024

Was wir in unserem Gespräch zunächst einmal feststellen, ist dass die Bedeutung
von Design-Systemen stetig zuzunehmen scheint. Gefühlt ist das Ganze vor 10
Jahren langsam bei den ersten großen Playern losgegangen, und mittlerweile gibt
es sie überall. Wir vermuten, das hat ganz stark mit Tools wie React und Figma
zu tun, die Design-System-freundliche Ansätze verfolgen.



Es liegt aber auch daran, dass Design-Systeme mit vielen Vorteilen locken: Sie
unterstützen bei der Zusammenarbeit zwischen Entwicklung und Design, weil sie
ein gemeinsames Verständnis der Sprache des anderen etablieren helfen. Dem
Management wiederum bieten sie Vorteile in Form von Skalierung einerseits und
Kostenersparnis andererseits. Auch schneiden wir das Thema ROI eines
Designsystems an und sprechen darüber wie die Einführung in einer Organisation
erleichtert werden kann, um eine bessere Adaption zu erzielen. Wir sind uns aber
darin einig, dass ein wesentlicher Teil des Erfolgs nicht von technischen
Aspekten, sondern auch von Stakeholder-Management und Kommunikation abhängt.

Apropos Technik: natürlich diskutieren wir über Vor- und Nachteile verschiedener
Frontend-Stacks wie React und Web-Komponenten, welches Framework für die Zukunft
relevant sein wird und wie der Transfer von Code zwischen verschiedenen
Frameworks erleichtert werden könnte. Weiterhin erörtern wir, wer in einem
Unternehmen oder Team für das Design-System verantwortlich sein sollte und wie
Entscheidungen in diesem Zusammenhang getroffen werden können. Und schließlich
weisen wir darauf hin, dass Design-Systeme am Ende immer nur so gut sind wie die
sie Nutzenden ein Verständnis der darunter liegenden Konzepte haben.

Das zeigen auch Jonas‘ und Daniels Erfahrungen beim Einsatz ihres Open-Source
Design-System-Frameworks kickstartDS bei Kunden: So mächtig das Framework auch
ist, so unklar ist vielen unerfahrenen Neu-Design-System-Nutzenden, wie sie zu
einem großen ganzen zusammenfügen und es an Ihre bestehenden Systeme anbinden
können. Deshalb stand das letzte Jahr bei kickstartDS ganz im Zeichen der
Weiterentwicklung hin zu einem nunmehr schlüsselfertigen Frontend, mit typischen
UI-Komponenten, Adaptern für Storyblok, Eleventy & Co. und einem anschaulichen
Showcase obendrauf.


[00:00:00] KEINE SCHAUNOTIZEN

JONAS‘ ARTIKEL ZUM THEMA JSON-SCHEMA

Part 1: https://www.kickstartds.com/blog/unlocking-the-frontend-pt1/
Part 2: https://www.kickstartds.com/blog/unlocking-the-frontend-pt2/

RUHMESMEILE

Jonas‘ und Daniels Web-Agentur aus Bonn

Revision 607: Design-Systeme im Jahr 2024

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 618: Internationalisierung – Teil 2

Working Draft

Revision 617: Die CODE – eine Hochschule wie man sie sich wünscht

Working Draft

Revision 616: Signals 2 – Reactive Boogaloo

Working Draft

Revision 615: Glücksrad gone off the Track

Working Draft

Revision 614: Zusammenarbeit in der Software-Entwicklung – eine Diskussionsrunde

Working Draft

Revision 613: Internationalisierung und Lokalisierung, Teil 1

Working Draft

Revision 612: Neues in der Web-Plattform, Teil 2

Working Draft

Revision 611: Neues in der Web-Plattform, Teil 1

Working Draft

Revision 610: SEO!

Working Draft

Revision 609: Farbsehschwäche und Farbblindheit

Working Draft

Revision 608: Nuxt & UnJS

Working Draft

Revision 607: Design-Systeme im Jahr 2024

Working Draft