<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>) reden Peter und Vanessa über Server Side Rendering mit Frontend Frameworks. Im Verlauf wird Server Side Rendering mit SSR abgekürzt, und Hans-Christian Otto kurz Christian genannt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Server Side Rendering mit Frontend Frameworks</dt>
<dd>SSR mit Frontend Frameworks ist ein komplexes Thema. Generell besprechen Christian, Peter und Vanessa kurz den <a href="https://web.archive.org/web/19990420172150/http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm">Werdegang des Webs</a>, von &#8222;Standard&#8220; SSR über <a href="https://en.wikipedia.org/wiki/Hydration_(web_development)">Hydration</a> wie bei z.B. <a href="https://vuejs.org/">Vue.js</a> zu der Resumability von <a href="https://qwik.dev/">Qwik</a>. Und irgendwo dazwischen ist das SSR mit Frontend Frameworks angesiedelt. Im Zusammenhang mit Hydration und clientseitigem Rendern bespricht Christian <a href="https://ralfvanveen.com/de/technologie/clientseitiges-rendering-vs-serverseitiges-rendering-was-ist-optimal-fuer-seo/">das Problem mit SEO</a>. <a href="https://prerender.io/blog/isomorphic-rendering/">Isomorphisches und dynamisches Rendern</a> sind hier die Stichpunkte. Dabei gibt es zunächst einmal sog. Meta-Frameworks wie <a href="https://nuxt.com/">Nuxt</a> oder <a href="https://nextjs.org/">Nextjs</a>. Gestartet hat die Idee diese Revision aufzumachen, mit dem Hype um die <a href="https://react.dev/reference/rsc/server-components">React Server Components</a>. React Server Components (RSC) sind eine neue Funktion von React, mit der Teile der Benutzeroberfläche auf dem Server gerendert werden. Sie ermöglichen es, schwere Berechnungen oder Datenverarbeitungen serverseitig durchzuführen und nur das fertig gerenderte HTML an den Client zu senden, wodurch weniger JavaScript auf dem Client ausgeführt werden muss. Server-Komponenten sind nicht interaktiv und eignen sich besonders für statische Inhalte, können aber mit clientseitigen Komponenten kombiniert werden, um interaktive Funktionen bereitzustellen. Peter geht speziell auf <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> ein, da diese eine immer präsenter werdende Rolle in der Welt der Webentwicklung spielen. <a href="https://lit.dev/docs/ssr/overview/">Lit</a> ist hier nur ein Beispiel. Denn Web Components verhindern ein <a href="https://www.heise.de/tipps-tricks/Vendor-Lock-in-was-ist-das-6166269.html">Vendor-Lock-In</a>. Denn wie bei so vielem heißt es bei der Entscheidung für oder gegen SSR mit Frontend Frameworks &#8211; und wenn ja, mit welcher Technologie &#8211; auch: es kommt eben darauf an: Risikoabwägungen und Abhängigkeiten müssen für das jeweilige Projekt passen.</dd>
</dl>


Mit Gast Hans-Christian Otto (Chef bei Suora und Tröter
bei @muhdiekuh@ruhr.social) reden Peter und Vanessa über Server Side Rendering
mit Frontend Frameworks. Im Verlauf wird Server Side Rendering mi…

Working Draft

Mit Gast Hans-Christian Otto (Chef bei Suora und Tröter
bei @muhdiekuh@ruhr.social) reden Peter und Vanessa über Server Side Rendering
mit Frontend Frameworks. Im Verlauf wird Server Side Rendering mit SSR
abgekürzt, und Hans-Christian Otto kurz Christian genannt.


SCHAUNOTIZEN

[00:00:00] SERVER SIDE RENDERING MIT FRONTEND FRAMEWORKS

SSR mit Frontend Frameworks ist ein komplexes Thema. Generell besprechen
Christian, Peter und Vanessa kurz den Werdegang des Webs, von „Standard“ SSR
über Hydration wie bei z.B. Vue.js zu der Resumability von Qwik. Und irgendwo
dazwischen ist das SSR mit Frontend Frameworks angesiedelt. Im Zusammenhang mit
Hydration und clientseitigem Rendern bespricht Christian das Problem mit SEO.
Isomorphisches und dynamisches Rendern sind hier die Stichpunkte. Dabei gibt es
zunächst einmal sog. Meta-Frameworks wie Nuxt oder Nextjs. Gestartet hat die
Idee diese Revision aufzumachen, mit dem Hype um die React Server Components.
React Server Components (RSC) sind eine neue Funktion von React, mit der Teile
der Benutzeroberfläche auf dem Server gerendert werden. Sie ermöglichen es,
schwere Berechnungen oder Datenverarbeitungen serverseitig durchzuführen und nur
das fertig gerenderte HTML an den Client zu senden, wodurch weniger JavaScript
auf dem Client ausgeführt werden muss. Server-Komponenten sind nicht interaktiv
und eignen sich besonders für statische Inhalte, können aber mit clientseitigen
Komponenten kombiniert werden, um interaktive Funktionen bereitzustellen. Peter
geht speziell auf Web Components ein, da diese eine immer präsenter werdende
Rolle in der Welt der Webentwicklung spielen. Lit ist hier nur ein Beispiel.
Denn Web Components verhindern ein Vendor-Lock-In. Denn wie bei so vielem heißt
es bei der Entscheidung für oder gegen SSR mit Frontend Frameworks – und wenn
ja, mit welcher Technologie – auch: es kommt eben darauf an: Risikoabwägungen
und Abhängigkeiten müssen für das jeweilige Projekt passen.

Revision 632: Server Side Rendering mit Frontend Frameworks

<p>Schon gewusst? Wenn man „TypeScript“ an eine Podcast-Folge dranschreibt, kann man über Gott und die Welt reden und niemand kann etwas dagegen sagen! Muhahahaha!</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:08] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/">TypeScript 5.6</a></dt>
<dd>Da nahende neue TS-Release verleitet Stefan und Peter dazu, <a href="https://workingdraft.de/626/">mal wieder</a> über Software-Architektur, Abstraktion und ein paar neue TS-Features zu quatschen. Neben 0815-Webdev-Tech wie <a href="https://github.com/tc39/proposal-iterator-helpers">Iterator Helpers</a> kommen auch TypeScript-Spezifika wie Sub/Supertyping-Probleme rund um ReadonlyArray und WeakMap zur Sprache. Tatsächlich bleiben wir ungewöhnlich nah am Thema, sieht man von einem Exkurs über <a href="https://de.wikipedia.org/wiki/Chicago_Pile">Versuchs-Atomreaktoren</a> ab. Stattdessen vergleichen wir <a href="https://zod.dev/">Zod</a> mit <a href="https://www.builder.io/blog/introducing-valibot">Valibot</a>, vergleichen Techniken für bedingtes Declaration Mergining, vergleichen <a href="https://github.com/nodejs/node/pull/53725">Nodes nativen TS-Support</a> mit <a href="https://deno.com/">Denos</a> Angebot, sinnieren über De-Facto-Standards wie TS-Syntax und <a href="http://facebook.github.io/jsx/">JSX</a> (und die damit einhergehenden <a href="https://github.com/lezer-parser/javascript/issues/36">Problemchen</a>) und philosophieren über die Unterscheide der JS/NPM und Rust/Cargo-Ökosysteme.
</dd>
</dl>


Schon gewusst? Wenn man „TypeScript“ an eine Podcast-Folge dranschreibt, kann
man über Gott und die Welt reden und niemand kann etwas dagegen sagen!
Muhahahaha!


UNSER SPONSOR



Workshops.DE bietet …

Schon gewusst? Wenn man „TypeScript“ an eine Podcast-Folge dranschreibt, kann
man über Gott und die Welt reden und niemand kann etwas dagegen sagen!
Muhahahaha!


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:08] TYPESCRIPT 5.6

Da nahende neue TS-Release verleitet Stefan und Peter dazu, mal wieder über
Software-Architektur, Abstraktion und ein paar neue TS-Features zu quatschen.
Neben 0815-Webdev-Tech wie Iterator Helpers kommen auch TypeScript-Spezifika wie
Sub/Supertyping-Probleme rund um ReadonlyArray und WeakMap zur Sprache.
Tatsächlich bleiben wir ungewöhnlich nah am Thema, sieht man von einem Exkurs
über Versuchs-Atomreaktoren ab. Stattdessen vergleichen wir Zod mit Valibot,
vergleichen Techniken für bedingtes Declaration Mergining, vergleichen Nodes
nativen TS-Support mit Denos Angebot, sinnieren über De-Facto-Standards wie
TS-Syntax und JSX (und die damit einhergehenden Problemchen) und philosophieren
über die Unterscheide der JS/NPM und Rust/Cargo-Ökosysteme.

Revision 631: Angeblich TypeScript

<p>Mit <strong>Marvin Luchs</strong> von <a href="https://www.holisticon.de/">Holisticon</a> ergehen sich Schepp und Peter in freier HTTP-Assoziation.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:31] High-Level-HTTP-Philosophie</dt>
<dd>Marvin hatte seinerzeit eine mit <a href="https://static.hypercontract.org/">Describing RESTful Web APIs using profiles written in RDF</a> betitelte Masterarbeit geschrieben und wenig überraschend etwas zu HTTP, REST, RDF und Co zu sagen. Wir sezieren zunächst Begrifflichkeiten wie <a href="https://de.m.wikipedia.org/wiki/Hypermedia">Hypermedia</a>, <a href="https://de.wikipedia.org/wiki/Representational_State_Transfer">REST</a> und <a href="https://de.wikipedia.org/wiki/Resource_Description_Framework">RDF</a> schwenken dann zur Frage über, wie das Design dieser Technologien unsere <a href="https://www.langlebige-softwarearchitekturen.de/">langlebigen Software-Architekturen</a> beeinflusst (oder beeinflussen kann/sollte). Wir quatschen im Zuge dessen über aktuelle Ansätze wie <a href="https://de.wikipedia.org/wiki/HATEOAS">HATEOAS</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a> sowie weniger aktuelle Ansätze wie <a href="https://de.wikipedia.org/wiki/Hypertext_Application_Language">HAL</a>. Neben aller Theorie kommen wir auch regelmäßig auf die Kontaktfläche der rigiden Standards und Theorien mit der analogen Welt zu sprechen.</dd>
</dl>


Mit Marvin Luchs von Holisticon ergehen sich Schepp und Peter in freier
HTTP-Assoziation.


SCHAUNOTIZEN

[00:01:31] HIGH-LEVEL-HTTP-PHILOSOPHIE

Marvin hatte seinerzeit eine mit Describing RESTful We…

Mit Marvin Luchs von Holisticon ergehen sich Schepp und Peter in freier
HTTP-Assoziation.


SCHAUNOTIZEN

[00:01:31] HIGH-LEVEL-HTTP-PHILOSOPHIE

Marvin hatte seinerzeit eine mit Describing RESTful Web APIs using profiles
written in RDF betitelte Masterarbeit geschrieben und wenig überraschend etwas
zu HTTP, REST, RDF und Co zu sagen. Wir sezieren zunächst Begrifflichkeiten wie
Hypermedia, REST und RDF schwenken dann zur Frage über, wie das Design dieser
Technologien unsere langlebigen Software-Architekturen beeinflusst (oder
beeinflussen kann/sollte). Wir quatschen im Zuge dessen über aktuelle Ansätze
wie HATEOAS und Content Negotiation sowie weniger aktuelle Ansätze wie HAL.
Neben aller Theorie kommen wir auch regelmäßig auf die Kontaktfläche der rigiden
Standards und Theorien mit der analogen Welt zu sprechen.

Revision 630: Akademisches Data Fetching und praktische Software-Architektur

<p><strong>Christoph Fricke</strong> (<a href="https://twitter.com/0x43_0x46">Twitter</a>, <a href="https://github.com/christoph-fricke">Github</a>) ist Berater und Webdev-Hexer bei <a href="https://www.holisticon.de/">Holisticon</a> und erzählt uns von seinem Open-Source-Projekt!</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><a href="https://github.com/christoph-fricke/openapi-msw">OpenAPI-MSW</a></dt>
<dd>Christoph berichtet von seinen Bemühungen, <a href="https://de.wikipedia.org/wiki/OpenAPI">OpenAPI</a> mit <a href="https://mswjs.io/">Mock Service Worker</a> zu verbinden – speziell im Zusammenspiel mit TypeScript. Wir quatschen über die Out-Of-The-Box-DX der OpenAPI/TS-Kombination, Verbesserungsmöglichkeiten, <a href="https://mariusschulz.com/blog/the-unknown-type-in-typescript">den <code>unknown</code>-Typ</a> und seine <a href="https://www.peterkroener.de/typescript-funktionen-mit-unknown-parametern-ueberladen/">Limitierungen</a>, <a href="https://typescript-eslint.io/">typescript-eslint</a>, Type-Testing und natürlich die Frage, ob Typen die Volksfront von Judäa und Interfaces die Judäische Volksfront sind.</dd>
</dl>


Christoph Fricke (Twitter, Github) ist Berater und Webdev-Hexer bei Holisticon
und erzählt uns von seinem Open-Source-Projekt!


UNSER SPONSOR



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

Christoph Fricke (Twitter, Github) ist Berater und Webdev-Hexer bei Holisticon
und erzählt uns von seinem Open-Source-Projekt!


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

OPENAPI-MSW

Christoph berichtet von seinen Bemühungen, OpenAPI mit Mock Service Worker zu
verbinden – speziell im Zusammenspiel mit TypeScript. Wir quatschen über die
Out-Of-The-Box-DX der OpenAPI/TS-Kombination, Verbesserungsmöglichkeiten, den
unknown-Typ und seine Limitierungen, typescript-eslint, Type-Testing und
natürlich die Frage, ob Typen die Volksfront von Judäa und Interfaces die
Judäische Volksfront sind.

Revision 629: OpenAPI-MSW

<p>In semi-geplanter Manier kommt es dazu, dass Hans vom thematisch gänzlich unbeleckten Peter gewissermaßen zu Interviewing interviewt wird.</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:31] Interviewing</dt>
<dd>Von einer Diskussion über Programmierquizzes und Praxisübungen bei Peters Workshops kommen wir dazu, über Interviewing zu quatschen. Hans spart nicht mit wertvollen Tipps zur Vorbereitung, wie etwa <a href="https://www.ucd.ie/professionalacademy/resources/career-advice/star-interview-technique/">der STAR-Technik</a> und empfiehlt den <a href="https://www.mentoring-club.com/">The Mentoring Club</a>. Am Ende debattieren wir noch, ob und wann es sinnvoll sein kann, Teile des Interview-Prozesses an Plattformen wie <a href="https://karat.com/">Karat</a> auszulagern und steifen die <a href="https://leaddev.com/engineering-leadership-report-2024">aktuelle Lage</a> auf dem Jobmarkt.</dd>
<dt>[01:08:39] Werbeblock</dt>
<dd><a href="https://workshops.de/seminare-schulungen-kurse/javascript">Peter macht ausnahmsweise mal einen <em>öffentlichen</em> JavaScript-Workshop.</a> Schickt eure Kolleg:innen vorbei!</dd>
</dl>


In semi-geplanter Manier kommt es dazu, dass Hans vom thematisch gänzlich
unbeleckten Peter gewissermaßen zu Interviewing interviewt wird.


UNSER SPONSOR



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

In semi-geplanter Manier kommt es dazu, dass Hans vom thematisch gänzlich
unbeleckten Peter gewissermaßen zu Interviewing interviewt wird.


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:31] INTERVIEWING

Von einer Diskussion über Programmierquizzes und Praxisübungen bei Peters
Workshops kommen wir dazu, über Interviewing zu quatschen. Hans spart nicht mit
wertvollen Tipps zur Vorbereitung, wie etwa der STAR-Technik und empfiehlt den
The Mentoring Club. Am Ende debattieren wir noch, ob und wann es sinnvoll sein
kann, Teile des Interview-Prozesses an Plattformen wie Karat auszulagern und
steifen die aktuelle Lage auf dem Jobmarkt.

[01:08:39] WERBEBLOCK

Peter macht ausnahmsweise mal einen öffentlichen JavaScript-Workshop. Schickt
eure Kolleg:innen vorbei!

Revision 628: Interviewing

<p>Peter (der von Angular ungefähr so viel Ahnung hat, wie ein Laubfrosch von Artilleriemunition) durfte als Gast <a href="https://www.angulararchitects.io/">Manfred Styer</a> (der von Angular ungefähr so viel Ahnung hat wie Manfred Styer) begrüßen und sich über <a href="https://www.npmjs.com/package/@angular-architects/module-federation">Module Federation</a> aufklären lassen!</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:21] <a href="https://www.npmjs.com/package/@angular-architects/module-federation">Module Federation</a></dt>
<dd>Module Federation macht Laufzeitintegration für Microfrontends. Manfred erklärt, was es damit auf sich hat und welchen Grund (Spoiler: Bundler) dagegen sprechen, einfach auf ECMAScript-Module zurückzugreifen. Wir kommen natürlich nicht umhin, Sinn und Zweck sowie Theorie und Praxis von Microfrontends zu diskutieren und danach in das Big Picture von Software-Architektur (Silodefinition, Refactoring etc.) einzusteigen. Zwischendurch kommen wir auch mal dazu, das Verhältnis von Angular Core zu Federation zu klären (Letzteres ist ein Angular-Plugin aus der Feder von angulararchitects.io). Gegend Ende geht um die Hacken und blutige Details wie Argumente contra Microfrontends, Versionskonflikte im Reich von Module Federation, <a href="https://github.com/angular/angular/tree/main/packages/zone">zone.js</a>, <a href="https://dart.dev/">Dart</a>, Designsysteme, und Build-Performance.</dd>
</dl>


Peter (der von Angular ungefähr so viel Ahnung hat, wie ein Laubfrosch von
Artilleriemunition) durfte als Gast Manfred Styer (der von Angular ungefähr so
viel Ahnung hat wie Manfred Styer) begrüßen un…

Peter (der von Angular ungefähr so viel Ahnung hat, wie ein Laubfrosch von
Artilleriemunition) durfte als Gast Manfred Styer (der von Angular ungefähr so
viel Ahnung hat wie Manfred Styer) begrüßen und sich über Module Federation
aufklären lassen!


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:21] MODULE FEDERATION

Module Federation macht Laufzeitintegration für Microfrontends. Manfred erklärt,
was es damit auf sich hat und welchen Grund (Spoiler: Bundler) dagegen sprechen,
einfach auf ECMAScript-Module zurückzugreifen. Wir kommen natürlich nicht umhin,
Sinn und Zweck sowie Theorie und Praxis von Microfrontends zu diskutieren und
danach in das Big Picture von Software-Architektur (Silodefinition, Refactoring
etc.) einzusteigen. Zwischendurch kommen wir auch mal dazu, das Verhältnis von
Angular Core zu Federation zu klären (Letzteres ist ein Angular-Plugin aus der
Feder von angulararchitects.io). Gegend Ende geht um die Hacken und blutige
Details wie Argumente contra Microfrontends, Versionskonflikte im Reich von
Module Federation, zone.js, Dart, Designsysteme, und Build-Performance.

Revision 627: Module Federation

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

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

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 632: Server Side Rendering mit Frontend Frameworks

Working Draft

Revision 631: Angeblich TypeScript

Working Draft

Revision 630: Akademisches Data Fetching und praktische Software-Architektur

Working Draft

Revision 629: OpenAPI-MSW

Working Draft

Revision 628: Interviewing

Working Draft

Revision 627: Module Federation

Working Draft

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