<p>Stefan und Peter treffen sich zur Selbsthilfegruppe der anonymen Abstrahierer!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] Abstraktion</dt>
<dd>Auslöser dieser Sendung war ein <a href="https://mastodon.social/@deadparrot/112534414619960887">Mastodon-Mini-Rant von Stefan</a>, der ein Übermaß an Abstraktion in einem seiner Projekte beklagte. Wir suchen nach der Ursache für Überabstraktion, grenzen echte Abstraktion von bloßer Umformulierung ab, erlauben Stefan seinen traditionellen OOP- und <a href="https://en.wikipedia.org/wiki/SOLID">SOLID</a>-Diss, empfehlen Talks von <a href="https://www.youtube.com/watch?v=qjJ6LvOU7q0">Dave Thomas</a> und <a href="https://www.youtube.com/watch?v=WPCrGYjrJ1Y">Daniel Terhorst-North</a> und philosophieren ein bisschen über Risikoabwägung.</dd>
</dl>


Stefan und Peter treffen sich zur Selbsthilfegruppe der anonymen Abstrahierer!


SCHAUNOTIZEN

[00:01:50] ABSTRAKTION

Auslöser dieser Sendung war ein Mastodon-Mini-Rant von Stefan, der ein Übermaß
an…

Working Draft

Stefan und Peter treffen sich zur Selbsthilfegruppe der anonymen Abstrahierer!


SCHAUNOTIZEN

[00:01:50] ABSTRAKTION

Auslöser dieser Sendung war ein Mastodon-Mini-Rant von Stefan, der ein Übermaß
an Abstraktion in einem seiner Projekte beklagte. Wir suchen nach der Ursache
für Überabstraktion, grenzen echte Abstraktion von bloßer Umformulierung ab,
erlauben Stefan seinen traditionellen OOP- und SOLID-Diss, empfehlen Talks von
Dave Thomas und Daniel Terhorst-North und philosophieren ein bisschen über
Risikoabwägung.

Revision 626: Abstraktion

<p>Nein, noch ist TailwindCSS v4 nicht heraus, und wir können noch die Füße still halten. Puh. Aber mit welchen Neuerungen können wir rechnen? Dies besprechen wir mit TailwindCSS-Dauergast <a href="http://www.milanmatull.com/">Milan</a>!</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:41] TailwindCSS v4 Alpha</dt>
<dd>Nachdem wir in der Vergangenheit bereits zu <a href="https://workingdraft.de/378/">TailwindCSS 1,</a> <a href="https://workingdraft.de/464/">TailwindCSS 2</a> und <a href="https://workingdraft.de/516/">TailwindCSS 3</a> entsprechende Episoden aufgenommen haben, setzen wir uns erneut mit unserem letztmaligen Gast <a href="http://www.milanmatull.com/">Milan</a> zusammen. In der vorherigen Revision 624 sprachen wir bereits über die Neuigkeiten bei den Versionen <a href="https://tailwindcss.com/blog/tailwindcss-v3-1">3.1</a>, <a href="https://tailwindcss.com/blog/tailwindcss-v3-2">v3.2</a>, <a href="https://tailwindcss.com/blog/tailwindcss-v3-3">v3.3</a>, und <a href="https://tailwindcss.com/blog/tailwindcss-v3-4">v3.4</a> und berichteten über unsere Erfahrungen.</dd>
<dd>TailwindCSS v4 wird aktuell von dem recht kleinen Tailwind-Team von 6 Personen entwickelt. Das ganze Vorhaben halten sie in <a href="https://tailwindcss.com/blog/tailwindcss-v4-alpha">Blogartikeln fest und zeigen ihren Prozess Open Source</a>.</dd>
<dd>Eine große Neuerung, in der wir tief ins Detail gehen, ist die Umstellung des Parsers in Rust. Zum anderen die Umstellung von <a href="https://postcss.org/">PostCSS</a> zu <a href="https://lightningcss.dev/docs.html">LightningCSS</a>.</dd>
<dd>Wer Lust hat, es auszuprobieren, kann sich entweder die <a href="https://www.npmjs.com/package/tailwindcss/v/4.0.0-alpha.3?activeTab=versions">Alpha Version bei NPM</a> besorgen, die seit März verfügbar ist. Oder aber man benutzt den <a href="https://play.tailwindcss.com/">Playground</a> und stellt die ersion auf v4 um.</dd>
<dd>Außerdem berichten wir über die Neuigkeit im TailwindCSS Universum, wie zum Beispiel die Updates bei dem <a href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss">Prettier Plugin</a> und <a href="https://tailwindui.com/templates/catalyst">Catalyst</a> von <a href="https://tailwindui.com/">TailwindUI</a>.</dd>
</dl>


Nein, noch ist TailwindCSS v4 nicht heraus, und wir können noch die Füße still
halten. Puh. Aber mit welchen Neuerungen können wir rechnen? Dies besprechen wir
mit TailwindCSS-Dauergast Milan!


UNSER…

Nein, noch ist TailwindCSS v4 nicht heraus, und wir können noch die Füße still
halten. Puh. Aber mit welchen Neuerungen können wir rechnen? Dies besprechen wir
mit TailwindCSS-Dauergast Milan!


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:41] TAILWINDCSS V4 ALPHA

Nachdem wir in der Vergangenheit bereits zu TailwindCSS 1, TailwindCSS 2 und
TailwindCSS 3 entsprechende Episoden aufgenommen haben, setzen wir uns erneut
mit unserem letztmaligen Gast Milan zusammen. In der vorherigen Revision 624
sprachen wir bereits über die Neuigkeiten bei den Versionen 3.1, v3.2, v3.3, und
v3.4 und berichteten über unsere Erfahrungen.

TailwindCSS v4 wird aktuell von dem recht kleinen Tailwind-Team von 6 Personen
entwickelt. Das ganze Vorhaben halten sie in Blogartikeln fest und zeigen ihren
Prozess Open Source.

Eine große Neuerung, in der wir tief ins Detail gehen, ist die Umstellung des
Parsers in Rust. Zum anderen die Umstellung von PostCSS zu LightningCSS.

Wer Lust hat, es auszuprobieren, kann sich entweder die Alpha Version bei NPM
besorgen, die seit März verfügbar ist. Oder aber man benutzt den Playground und
stellt die ersion auf v4 um.

Außerdem berichten wir über die Neuigkeit im TailwindCSS Universum, wie zum
Beispiel die Updates bei dem Prettier Plugin und Catalyst von TailwindUI.

Revision 625: TailwindCSS v4 Alpha

<p>Nachdem wir in der Vergangenheit bereits zu <a href="https://workingdraft.de/378/">TailwindCSS 1,</a> <a href="https://workingdraft.de/464/">TailwindCSS 2</a> und <a href="https://workingdraft.de/516/">TailwindCSS 3</a> entsprechende Episoden aufgenommen haben, setzen wir uns erneut mit unserem letztmaligen Gast <a href="http://www.milanmatull.com/">Milan</a> zusammen. Wir besprechen die Neuerungen in der 3. Version von TailwindCSS und blicken retrospektiv auf unsere Erfahrungen zurück.</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:00:00] TailwindCSS: Neuigkeiten in v3 und Erfahrungsberichte</dt>
<dd>Anfangs geben wir einen Rückblick auf die Geschichte von TailwindCSS. Wie fing alles an, wie viele Personen arbeiten an dem CSS Framework, und was denkt die Community mittlerweile darüber. TailwindCS ist ein Utility-First CSS Framework. Damit unterscheidet es sich von <a href="https://getbootstrap.com/">Bootstrap</a>, <a href="https://bulma.io/">Bulma</a> und Co. Es gibt keine Button Klassen oder andere Komponentenklassen. Dafür haben die Erfinder von TailwindCSS allerdings das Tool <a href="https://tailwindui.com/">TailwindUI</a> gebaut.</dd>
<dd>Wir besprechen, warum TailwindCSS sehr gut für eine <a href="https://de.wikipedia.org/wiki/Komponentenbasierte_Entwicklung">komponentenbasierte Entwicklung</a> geeignet ist, und was wir als die großen Vorteile von dem Framework empfinden. Im Anschluss gehen wir auf den technischen Werdegang von TailwindCSS ein, angefangen bei <a href="https://de.wikipedia.org/wiki/Less_(Stylesheet-Sprache)">Less</a> Dateien bis hin zu der großen Änderung auf <a href="https://postcss.org/">PostCSS</a>.</dd>
<dd>Im Weiteren besprechen wir die Neuigkeiten, die es in den Versionen <a href="https://tailwindcss.com/blog/tailwindcss-v3-1">v3.1</a>, <a href="https://tailwindcss.com/blog/tailwindcss-v3-2">v3.2</a>, <a href="https://tailwindcss.com/blog/tailwindcss-v3-3">v3.3</a>, und <a href="https://tailwindcss.com/blog/tailwindcss-v3-4">v3.4</a> gab. Am Ende gibt es einen Cliffhanger für die folgende Revision 625, bei der wir &#8211; auch wieder mit Milan &#8211; über die Tailwind v4 Alpha Version sprechen werden.</dd>
</dl>


Nachdem wir in der Vergangenheit bereits zu TailwindCSS 1, TailwindCSS 2 und
TailwindCSS 3 entsprechende Episoden aufgenommen haben, setzen wir uns erneut
mit unserem letztmaligen Gast Milan zusammen.…

Nachdem wir in der Vergangenheit bereits zu TailwindCSS 1, TailwindCSS 2 und
TailwindCSS 3 entsprechende Episoden aufgenommen haben, setzen wir uns erneut
mit unserem letztmaligen Gast Milan zusammen. Wir besprechen die Neuerungen in
der 3. Version von TailwindCSS und blicken retrospektiv auf unsere Erfahrungen
zurück.


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:00:00] TAILWINDCSS: NEUIGKEITEN IN V3 UND ERFAHRUNGSBERICHTE

Anfangs geben wir einen Rückblick auf die Geschichte von TailwindCSS. Wie fing
alles an, wie viele Personen arbeiten an dem CSS Framework, und was denkt die
Community mittlerweile darüber. TailwindCS ist ein Utility-First CSS Framework.
Damit unterscheidet es sich von Bootstrap, Bulma und Co. Es gibt keine Button
Klassen oder andere Komponentenklassen. Dafür haben die Erfinder von TailwindCSS
allerdings das Tool TailwindUI gebaut.

Wir besprechen, warum TailwindCSS sehr gut für eine komponentenbasierte
Entwicklung geeignet ist, und was wir als die großen Vorteile von dem Framework
empfinden. Im Anschluss gehen wir auf den technischen Werdegang von TailwindCSS
ein, angefangen bei Less Dateien bis hin zu der großen Änderung auf PostCSS.

Im Weiteren besprechen wir die Neuigkeiten, die es in den Versionen v3.1, v3.2,
v3.3, und v3.4 gab. Am Ende gibt es einen Cliffhanger für die folgende Revision
625, bei der wir – auch wieder mit Milan – über die Tailwind v4 Alpha Version
sprechen werden.

Revision 624: TailwindCSS: Neuigkeiten in v3 und Erfahrungsberichte

<p>Schepp und Peter philosophieren zusammen mit <a href="https://www.uhlmann.pro/"><strong>Jon Uhlmann</strong></a> (zuletzt in den Revisionen <a href="https://workingdraft.de/528/">528</a> und <a href="https://workingdraft.de/504/">504</a> zu Gast) über die Möglichkeiten und Herausforderungen der neuesten Farb-Features in CSS.</p>
<dl>
<dt>[00:01:00] Farben und Farbräume</dt>
<dd>Zunächst legen wir die Limitierungen von des RGB-Farbmodells (unleserlich für alle außer <a href="https://www.youtube.com/watch?v=eqZqx6lRPe0">David DeSandro</a>) und des <a href="https://de.wikipedia.org/wiki/SRGB-Farbraum">sRGB-Farbraums</a> (modelliert weniger Farben, als moderne Geräte darstellen können) dar. In modernem CSS bestehen mit u.A. den <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch">oklch()-</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab">oklab()-Notationen</a> mehrere Möglichkeiten, <a href="https://svgees.us/blog/whatGamuts.html">größere Farbräume</a> zu nutzen – und das sogar in allen halbwegs aktuellen Browsern! Jon hat im Rahmen seines Schaffens für <a href="https://www.neos.io/">Neos</a> einen <a href="https://github.com/CarbonPackages/Carbon.ColorPicker.OKLCH">OKLCH-kompatiblen Farb-Picker</a> auf Basis von <a href="https://colorjs.io/">Color.js</a> gebaut und berichtet von seinem Eintauchen in die neuen Farbräume. Wir quatschen weiterhin über Gradients (und wie diese selbst auf den kartoffeligsten Displays von besseren Farbmodellen profitieren) <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix">color-mix()</a>, <a href="https://bottosson.github.io/posts/gamutclipping/">sRGB gamut clipping</a>, WCAG, Kontraste, Farbräume auf diversen Devices und Perspektiven für HDR in CSS.</dd>
</dl>


Schepp und Peter philosophieren zusammen mit Jon Uhlmann (zuletzt in den
Revisionen 528 und 504 zu Gast) über die Möglichkeiten und Herausforderungen der
neuesten Farb-Features in CSS.

[00:01:00] FAR…

Schepp und Peter philosophieren zusammen mit Jon Uhlmann (zuletzt in den
Revisionen 528 und 504 zu Gast) über die Möglichkeiten und Herausforderungen der
neuesten Farb-Features in CSS.

[00:01:00] FARBEN UND FARBRÄUME

Zunächst legen wir die Limitierungen von des RGB-Farbmodells (unleserlich für
alle außer David DeSandro) und des sRGB-Farbraums (modelliert weniger Farben,
als moderne Geräte darstellen können) dar. In modernem CSS bestehen mit u.A. den
oklch()- und oklab()-Notationen mehrere Möglichkeiten, größere Farbräume zu
nutzen – und das sogar in allen halbwegs aktuellen Browsern! Jon hat im Rahmen
seines Schaffens für Neos einen OKLCH-kompatiblen Farb-Picker auf Basis von
Color.js gebaut und berichtet von seinem Eintauchen in die neuen Farbräume. Wir
quatschen weiterhin über Gradients (und wie diese selbst auf den kartoffeligsten
Displays von besseren Farbmodellen profitieren) color-mix(), sRGB gamut
clipping, WCAG, Kontraste, Farbräume auf diversen Devices und Perspektiven für
HDR in CSS.

Revision 623: Farben und Farbräume

<p>Hans, Schepp und Peter drehen am Glückrad bis das Frameset kommt!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:02] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside">break-inside</a></dt>
<dd>Die an sich nur mäßig insprierende CSS-Property verleitet Schepp dazu, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout">Multicolumn Layout</a> zu lobpreisen, das seiner Meinung nach so manches kann ( u.A. <a href="https://codepen.io/Schepp/pen/xNvzEM?editors=1100">Quasi-Masonry</a>), das mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid">Grid Layout</a> nicht drin ist.</dd>
<dt>[00:11:00] <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order">paint-order</a></dt>
<dd>Wir stellen fest, dass <code>paint-order</code> unter anderem für Textumrandungen <a href="https://x.com/argyleink/status/1783897828508738015">ganz praktisch</a> ist. Es gäbe dafür auch <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke"><code>-webkit-text-stroke</code></a>, das mittlerweile in der <a href="https://compat.spec.whatwg.org/">Bibel für Web-Kompatibilität</a> aufgeführt und deshalb in praktisch allen Browsern zu finden ist.</dd>
<dt>[00:18:35] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event">unload-Event</a></dt>
<dd>Wir grenzen das abgeranzte unload-Event von seinen cooleren Kollegen <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event">pagehide</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API">Beacon API</a> ab, diskutieren Interaktionen mit dem <a href="https://web.dev/articles/bfcache">bfcache</a> und überkegen, was es bedeutet, eine Webseite oder -App zu „schließen“.</dd>
<dt>[00:29:17] <a href="https://developer.mozilla.org/en-US/docs/Web/API/MIDIAccess">MIDIAccess</a></dt>
<dd>Wir haben in Summe ca. null Erfahrung mit <a href="https://www.elektronik-kompendium.de/sites/com/0808121.htm">MIDI</a>, wundern uns aber nicht über die API: schließlich gib&#8217;s auch <a href="https://developer.mozilla.org/en-US/docs/Web/API/USB">Web USB</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API">Web Serial</a> – und dass letzteres noch extrem verbreitet ist, hat Peter beim <a href="https://www.youtube.com/watch?v=EP3aKEG79DM&#038;list=PLec1d3OBbZ8LGjvbb0GQwlQxWXmI2PA88">Cathode Ray Dude</a> gelernt.</dd>
<dt>[00:34:58] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location">Location, Location, Location</a></dt>
<dd>Wir berichten von unseren Interaktionen mit der Location-API. Peter <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/toString">stringifiziert</a> sie gern, der Rest bedient sich ausgefeilterer Features wie <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace">replace</a> oder greift gleich zur <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">History API</a>.</dd>
<dt>[00:39:37] <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring Assignment</a></dt>
<dd>Wir präsentieren verschiedene Stunts rund um Destructuring.</dd>
<dt>[00:45:15] <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">fetch()</a></dt>
<dd>Wir listen der Abwechslung halber die zahlreichen <em>Vorteile</em> von <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> auf, wozu u.A. synchrone Requests (benutzt von <a href="https://partytown.builder.io/how-does-partytown-work">Partytown</a>) und einfaches Abbrechen gehören.</dd>
<dt>[00:52:48] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a></dt>
<dd>Popover war bereits das fast einzige Thema von <a href="https://workingdraft.de/615/">Glücksrad-Revision 615</a>, aber über das <a href="https://open-ui.org/components/invokers.explainer/">abstrakte Invoker-Konzept</a> hatten wir damals noch nicht philosophiert.</dd>
<dt>[01:01:52] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frameset">&lt;frameset&gt;</a></dt>
<dd>Schepp fragt sich, ob Framesets mit Grid Layout kombiniert werden können (Antwort: <a href="https://mastodon.social/deck/@sir_pepe/112643625118885448">nope!</a>), wonach wir über Hypermedia, Frontpage, Dreamweaver und andere Artefakte aus der Jungsteinzeit sinnieren.</dd>
</dl>


Hans, Schepp und Peter drehen am Glückrad bis das Frameset kommt!


SCHAUNOTIZEN

[00:03:02] BREAK-INSIDE

Die an sich nur mäßig insprierende CSS-Property verleitet Schepp dazu,
Multicolumn Layout zu …

Hans, Schepp und Peter drehen am Glückrad bis das Frameset kommt!


SCHAUNOTIZEN

[00:03:02] BREAK-INSIDE

Die an sich nur mäßig insprierende CSS-Property verleitet Schepp dazu,
Multicolumn Layout zu lobpreisen, das seiner Meinung nach so manches kann ( u.A.
Quasi-Masonry), das mit Grid Layout nicht drin ist.

[00:11:00] PAINT-ORDER

Wir stellen fest, dass paint-order unter anderem für Textumrandungen ganz
praktisch ist. Es gäbe dafür auch -webkit-text-stroke, das mittlerweile in der
Bibel für Web-Kompatibilität aufgeführt und deshalb in praktisch allen Browsern
zu finden ist.

[00:18:35] UNLOAD-EVENT

Wir grenzen das abgeranzte unload-Event von seinen cooleren Kollegen
beforeunload, pagehide und Beacon API ab, diskutieren Interaktionen mit dem
bfcache und überkegen, was es bedeutet, eine Webseite oder -App zu „schließen“.

[00:29:17] MIDIACCESS

Wir haben in Summe ca. null Erfahrung mit MIDI, wundern uns aber nicht über die
API: schließlich gib’s auch Web USB und Web Serial – und dass letzteres noch
extrem verbreitet ist, hat Peter beim Cathode Ray Dude gelernt.

[00:34:58] LOCATION, LOCATION, LOCATION

Wir berichten von unseren Interaktionen mit der Location-API. Peter
stringifiziert sie gern, der Rest bedient sich ausgefeilterer Features wie
replace oder greift gleich zur History API.

[00:39:37] DESTRUCTURING ASSIGNMENT

Wir präsentieren verschiedene Stunts rund um Destructuring.

[00:45:15] FETCH()

Wir listen der Abwechslung halber die zahlreichen Vorteile von XMLHttpRequest
auf, wozu u.A. synchrone Requests (benutzt von Partytown) und einfaches
Abbrechen gehören.

[00:52:48] POPOVER API

Popover war bereits das fast einzige Thema von Glücksrad-Revision 615, aber über
das abstrakte Invoker-Konzept hatten wir damals noch nicht philosophiert.

[01:01:52] <FRAMESET>

Schepp fragt sich, ob Framesets mit Grid Layout kombiniert werden können
(Antwort: nope!), wonach wir über Hypermedia, Frontpage, Dreamweaver und andere
Artefakte aus der Jungsteinzeit sinnieren.

Revision 622: Glücksrad

<p><a href="https://www.nicole-rauch.de/">Nicole Rauch</a> sorgt in dieser Revision dafür, dass Vanessa und Peter endlich mal anfangen, brauchbaren Programmcode zu produzieren.</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:02:19] <a href="#">Thema</a></dt>
<dd>Nicole berichtet von ihrem Einstieg in die wunderbare Welt von Software Craftsmanship und Clean Code, u. a. über die <a href="https://www.socrates-conference.de/">SoCraTes-Konferenzserie</a>. Clean Code definiert sich laut Nicole darüber, was er <em>nicht</em> ist, nämlich räudiger Legacy-Code (siehe <a href="https://www.softensity.com/blog/clean-code-cheat-sheet/">Cheat Sheet</a>). Dessen Räudigkeit manifestiert sich meist durch schlechten Stil, fehlende Tests und mangelndes fachliches Verständnis-Fundament. Wie viel fachliches Know-How einem ohnehin überforderten Entwicklerhirn zuzumuten ist, (und inwiefern Entwicklungs-Techniken wie Entities, Value Objects, immutable Objekte, <a href="https://de.wikipedia.org/wiki/Testgetriebene_Entwicklung">Test-Driven Development</a> und das in <a href="https://workingdraft.de/556/">Revision 556 beleuchtete Domain-Driven Design</a> helfen können) wird eifrig diskutiert. Am Thema Coding Conventions kommen wir natürlich auch nicht vorbei und stellen fest, dass die Zeit der Yolo-Styles definitiv vorbei ist; neuere Sprachen wie <a href="https://go.dev/">Go</a> und <a href="https://www.rust-lang.org/">Rust</a> liefern schließlich ab Werk Formatierungs-Tools mit. Zum Einüben von varausschauender Entwicklung empfiehlt Nicole <a href="https://ccd-school.de/coding-dojo/">Code Katas</a> (z.B. via <a href="http://codekata.com/">CodeKata</a>, <a href="https://jskatas.org/">jskatas.org</a>, <a href="https://codingdojo.org/kata/">Coding Dojo</a> und das dank Retro-Style damit nicht verwechselbare <a href="https://cyber-dojo.org/creator/home">Cyber Dojo</a>). Dazu passen Pair- und <a href="https://ericnormand.substack.com/p/ensemble-programming-is-more-efficient">Ensemble Programming</a>, Strategien für den Umgang mit Schlipsen, die Clean-Code-Bemühungen torpedieren und was immer das Gegenteil von <a href="https://www.youtube.com/watch?v=7RJmoCWx4cE">Refucktoring</a> ist.</dd>
</dl>


Nicole Rauch sorgt in dieser Revision dafür, dass Vanessa und Peter endlich mal
anfangen, brauchbaren Programmcode zu produzieren.


UNSER SPONSOR



makandra bietet umfassende Unterstützung für Entwi…

Nicole Rauch sorgt in dieser Revision dafür, dass Vanessa und Peter endlich mal
anfangen, brauchbaren Programmcode zu produzieren.


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:02:19] THEMA

Nicole berichtet von ihrem Einstieg in die wunderbare Welt von Software
Craftsmanship und Clean Code, u. a. über die SoCraTes-Konferenzserie. Clean Code
definiert sich laut Nicole darüber, was er nicht ist, nämlich räudiger
Legacy-Code (siehe Cheat Sheet). Dessen Räudigkeit manifestiert sich meist durch
schlechten Stil, fehlende Tests und mangelndes fachliches Verständnis-Fundament.
Wie viel fachliches Know-How einem ohnehin überforderten Entwicklerhirn
zuzumuten ist, (und inwiefern Entwicklungs-Techniken wie Entities, Value
Objects, immutable Objekte, Test-Driven Development und das in Revision 556
beleuchtete Domain-Driven Design helfen können) wird eifrig diskutiert. Am Thema
Coding Conventions kommen wir natürlich auch nicht vorbei und stellen fest, dass
die Zeit der Yolo-Styles definitiv vorbei ist; neuere Sprachen wie Go und Rust
liefern schließlich ab Werk Formatierungs-Tools mit. Zum Einüben von
varausschauender Entwicklung empfiehlt Nicole Code Katas (z.B. via CodeKata,
jskatas.org, Coding Dojo und das dank Retro-Style damit nicht verwechselbare
Cyber Dojo). Dazu passen Pair- und Ensemble Programming, Strategien für den
Umgang mit Schlipsen, die Clean-Code-Bemühungen torpedieren und was immer das
Gegenteil von Refucktoring ist.

Revision 621: Software Craftsmanship und Clean Code mit Nicole Rauch

<p>Es ist mal wieder Zeit für (angeblich) TypeScript und (tatsächlich) sehr viele andere Themen mit Stefan und Peter!</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:16] Peak TypeScript</dt>
<dd>Zum Start erzählen wir uns semi-frustrierende Geschichten aus der TypeScript-Praxis und diskutieren, ob TypeScript überhaupt bei der Fehlervermeidung hilft – und wenn nicht, wozu es sonst gut sein könnte. Das Ausbleiben von Revolutionen in neuen TypeScript-Releases lässt uns vermuten, dass wir <em>Peak TypeScript</em> erreicht haben. Wir quatschen ein wenig über Rust, Web Assembly, TypeScript-Externalitäten (z.B. <a href="https://github.com/WebReflection/uhtml/issues/84">Bugs in Non-TS-Projekten</a>) und machen am Ende noch einen Speedrun durch die Feature-Listen von TS <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html">5.3</a>, <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-4.html">5.4</a> und <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/">5.5</a></dd>
</dl>


Es ist mal wieder Zeit für (angeblich) TypeScript und (tatsächlich) sehr viele
andere Themen mit Stefan und Peter!


UNSER SPONSOR



Maximale Performance für all deine Projekte? Bei mittwald brauchst…

Es ist mal wieder Zeit für (angeblich) TypeScript und (tatsächlich) sehr viele
andere Themen mit Stefan und Peter!


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:16] PEAK TYPESCRIPT

Zum Start erzählen wir uns semi-frustrierende Geschichten aus der
TypeScript-Praxis und diskutieren, ob TypeScript überhaupt bei der
Fehlervermeidung hilft – und wenn nicht, wozu es sonst gut sein könnte. Das
Ausbleiben von Revolutionen in neuen TypeScript-Releases lässt uns vermuten,
dass wir Peak TypeScript erreicht haben. Wir quatschen ein wenig über Rust, Web
Assembly, TypeScript-Externalitäten (z.B. Bugs in Non-TS-Projekten) und machen
am Ende noch einen Speedrun durch die Feature-Listen von TS 5.3, 5.4 und 5.5

Revision 620: Peak TypeScript

<p>In dieser Episode hat sich Schepp mit Svelte Core Team Member Simon Holthausen (<a href="https://www.linkedin.com/in/simon-holthausen-2501428a">LinkedIn</a> / <a href="https://fosstodon.org/@dummdidumm">Mastodon</a> / <a href="https://x.com/dummdidumm_">Twitter</a>) zusammengesetzt, um über die kommende Version von Svelte zu sprechen: Svelte 5! Leider hatte Simon während der Aufnahme einen Frosch im Hals 🐸, aber er hat sich tapfer durchgebissen.</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:01:50] <a href="https://svelte.dev/blog/svelte-5-release-candidate">Svelte 5</a></dt>
<dd>Wir starten mit einer Einführung, was Svelte eigentlich ist und wie es sich von anderen Frameworks unterscheidet. Simon erklärt uns, was Svelte so besonders macht und warum es sich von anderen beliebten Frameworks abhebt. Anschließend gehen wir auf den Anlass für das neue Major Release ein. Simon erläutert, warum es Zeit für Svelte 5 wurde und welche Probleme in Version 4 die Entwickler zum Handeln bewegt haben.</p>
<p>Die wichtigste Änderung ist das neue Konzept der Runes. Simon gibt uns eine Einführung in diese Neuerung und erklärt den Unterschied zu den bereits bekannten Syntaxen und auch zu Signals. Dies hilft uns zu verstehen, wie Runes das Arbeiten mit Svelte 5 beeinflussen werden.</p>
<p>Wir reden ebenfalls über die neuen Snippets und erfahren, wie diese das Arbeiten mit Svelte 5 noch einfacher und effizienter machen. Ein weiteres Thema ist die überarbeitete Template-Syntax für Events. Simon erläutert, warum diese Änderung notwendig war und welche Vorteile sie mit sich bringt.</p>
<p>Abschließend sprechen wir über den Upgrade-Pfad von Version 4 zu Version 5. Simon erklärt, wie der Upgrade-Prozess abläuft und welche Stolpersteine zu beachten sind. Zum Schluss sprechen wir darüber, was das Core-Team nach dem großen Release plant. Wird direkt an neuen Features gearbeitet oder ist erst einmal Urlaub angesagt?</dd>
</dl>


In dieser Episode hat sich Schepp mit Svelte Core Team Member Simon Holthausen
(LinkedIn / Mastodon / Twitter) zusammengesetzt, um über die kommende Version
von Svelte zu sprechen: Svelte 5! Leider ha…

In dieser Episode hat sich Schepp mit Svelte Core Team Member Simon Holthausen
(LinkedIn / Mastodon / Twitter) zusammengesetzt, um über die kommende Version
von Svelte zu sprechen: Svelte 5! Leider hatte Simon während der Aufnahme einen
Frosch im Hals 🐸, aber er hat sich tapfer durchgebissen.


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:01:50] SVELTE 5

Wir starten mit einer Einführung, was Svelte eigentlich ist und wie es sich von
anderen Frameworks unterscheidet. Simon erklärt uns, was Svelte so besonders
macht und warum es sich von anderen beliebten Frameworks abhebt. Anschließend
gehen wir auf den Anlass für das neue Major Release ein. Simon erläutert, warum
es Zeit für Svelte 5 wurde und welche Probleme in Version 4 die Entwickler zum
Handeln bewegt haben.



Die wichtigste Änderung ist das neue Konzept der Runes. Simon gibt uns eine
Einführung in diese Neuerung und erklärt den Unterschied zu den bereits
bekannten Syntaxen und auch zu Signals. Dies hilft uns zu verstehen, wie Runes
das Arbeiten mit Svelte 5 beeinflussen werden.

Wir reden ebenfalls über die neuen Snippets und erfahren, wie diese das Arbeiten
mit Svelte 5 noch einfacher und effizienter machen. Ein weiteres Thema ist die
überarbeitete Template-Syntax für Events. Simon erläutert, warum diese Änderung
notwendig war und welche Vorteile sie mit sich bringt.

Abschließend sprechen wir über den Upgrade-Pfad von Version 4 zu Version 5.
Simon erklärt, wie der Upgrade-Prozess abläuft und welche Stolpersteine zu
beachten sind. Zum Schluss sprechen wir darüber, was das Core-Team nach dem
großen Release plant. Wird direkt an neuen Features gearbeitet oder ist erst
einmal Urlaub angesagt?

Revision 619: Svelte Next

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

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

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 626: Abstraktion

Working Draft

Revision 625: TailwindCSS v4 Alpha

Working Draft

Revision 624: TailwindCSS: Neuigkeiten in v3 und Erfahrungsberichte

Working Draft

Revision 623: Farben und Farbräume

Working Draft

Revision 622: Glücksrad

Working Draft

Revision 621: Software Craftsmanship und Clean Code mit Nicole Rauch

Working Draft

Revision 620: Peak TypeScript

Working Draft

Revision 619: Svelte Next

Working Draft

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