<p>Stefan und Peter hatten vorgehabt, das Thema „Web Components vs. Frameworks“ gründlich durchzudiskutieren, doch das allgegenwärtige Framework- und CMS-Drama nahm dann die Hauptrolle ein.</p>
<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>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:07] Framwork-Drama</dt>
<dd>Vor dem Hintergrund des <a href="https://www.wpbeginner.com/de/news/wordpress-drama-explained-and-how-it-may-affect-your-website/">jüngsten WordPress-Chaos</a> und dem <a href="https://voidzero.dev/posts/announcing-voidzero-inc">faust-style VC-Deal des weiteren Vite-Universums</a> quatschen wir über die Stabilität und Vertrauenswürdigkeit unserer Plattformen und Frameworks. Wir vergleichen den klassischen Lock-In Long Con von <a href="https://vercel.com/">Vercel</a> mit dem <a href="https://de.wikipedia.org/wiki/Benevolent_Dictator_for_Life">BDFL</a>-Modell von WordPress und „richtigen“ OSS-Projekten wir jenen, die via <a href="https://openjsf.org/">OpenJS</a> finanziert werden. Gegen Ende kommen wir tatsächlich zum ursprünglich geplanten Thema „Web Components vs. Frameworks“, angestachelt durch den provokanten Artikel <a href="https://dev.to/ryansolid/web-components-are-not-the-future-48bh">&quot;Web Components Are Not the Future&quot;</a> aus der Feder des gänzlich unparteiischen Ryan Carniato (bekannt für <a href="https://www.solidjs.com/">SolidJS</a>).</dd>
</dl>


Stefan und Peter hatten vorgehabt, das Thema „Web Components vs. Frameworks“
gründlich durchzudiskutieren, doch das allgegenwärtige Framework- und CMS-Drama
nahm dann die Hauptrolle ein.


UNSER SPONS…

Working Draft

Stefan und Peter hatten vorgehabt, das Thema „Web Components vs. Frameworks“
gründlich durchzudiskutieren, doch das allgegenwärtige Framework- und CMS-Drama
nahm dann die Hauptrolle ein.


UNSER SPONSOR



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

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


SCHAUNOTIZEN

[00:02:07] FRAMWORK-DRAMA

Vor dem Hintergrund des jüngsten WordPress-Chaos und dem faust-style VC-Deal des
weiteren Vite-Universums quatschen wir über die Stabilität und
Vertrauenswürdigkeit unserer Plattformen und Frameworks. Wir vergleichen den
klassischen Lock-In Long Con von Vercel mit dem BDFL-Modell von WordPress und
„richtigen“ OSS-Projekten wir jenen, die via OpenJS finanziert werden. Gegen
Ende kommen wir tatsächlich zum ursprünglich geplanten Thema „Web Components vs.
Frameworks“, angestachelt durch den provokanten Artikel "Web Components Are Not
the Future" aus der Feder des gänzlich unparteiischen Ryan Carniato (bekannt für
SolidJS).

Revision 638: Web Component vs. Frontend Framework (und allgemeines
Framework/CMS-Drama)

<p>In dieser Episode tauchen wir tief in die Chrome DevTools ein und beschäftigen uns mit der Frage, wie wir das Performance-Tab optimal nutzen können, um wertvolle Einsichten in die Ladezeiten und Rendering-Prozesse unserer Webseiten zu gewinnen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:20] Das Devtools Performance Tab</dt>
<dd>Wir nehmen alles mit, da bleibt kein Auge trocken: Recording mit Reload oder nicht? Was bedeuten die verschiedenen Tortenfarben? Wie funktioniert das mit den verschiedenen horizontalen Lanes und kann man dort auch die Core Web Vitals ablesen? Was zeigt der Callstack? Wann braucht man CPU-Throttling? Wofür macht man Screenshots und wann zeichnet man die Speicherauslastung mit auf? Welche Rolle spielen Browser-Extensions bei der Performance-Analyse?</dd>
<h3>Links</h3>
<dl>
<dt><a href="https://lisilinhart.info/posts/css-variables-performance">Performance of CSS Variables</a></dt>
<dd>Lisi stellte sich schon 2017 die Frage, ob und wenn ja wann CSS Variablen bzw. Custom Propeties einen Impact auf die Browser-Performance haben.</dd>
<dt><a href="https://web.dev/blog/at-property-performance">Benchmarking the performance of CSS @property</a></dt>
<dd>Im Jahr 2024 wiederholte Bramus van Damme Lisis Test und ging zusätzlich der Frage nach, welchen Einfluss <code>@property</code>-Deklarationen dabei haben.</dd>
<dt><a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/benchmark/harnesses/blink_perf.md">Chromium Perf Test Runner</a></dt>
<dd>Low Level Performance-Tests in Chrome automatisiert ausführen</dd>
<dt><a href="https://www.webpagetest.org/">Webpagetest</a></dt>
<dd>Die Mutter aller Performance-Testing Tools.</dd>
<dt><a href="https://www.speedcurve.com/">SpeedCurve</a></dt>
<dd>SaaS, der auf Webpagetest aufbaut und es um viele nützliche Bestandteile ergänzt.</dd>
</dl>


In dieser Episode tauchen wir tief in die Chrome DevTools ein und beschäftigen
uns mit der Frage, wie wir das Performance-Tab optimal nutzen können, um
wertvolle Einsichten in die Ladezeiten und Rende…

In dieser Episode tauchen wir tief in die Chrome DevTools ein und beschäftigen
uns mit der Frage, wie wir das Performance-Tab optimal nutzen können, um
wertvolle Einsichten in die Ladezeiten und Rendering-Prozesse unserer Webseiten
zu gewinnen.


SCHAUNOTIZEN

[00:01:20] DAS DEVTOOLS PERFORMANCE TAB

Wir nehmen alles mit, da bleibt kein Auge trocken: Recording mit Reload oder
nicht? Was bedeuten die verschiedenen Tortenfarben? Wie funktioniert das mit den
verschiedenen horizontalen Lanes und kann man dort auch die Core Web Vitals
ablesen? Was zeigt der Callstack? Wann braucht man CPU-Throttling? Wofür macht
man Screenshots und wann zeichnet man die Speicherauslastung mit auf? Welche
Rolle spielen Browser-Extensions bei der Performance-Analyse?


LINKS

PERFORMANCE OF CSS VARIABLES

Lisi stellte sich schon 2017 die Frage, ob und wenn ja wann CSS Variablen bzw.
Custom Propeties einen Impact auf die Browser-Performance haben.

BENCHMARKING THE PERFORMANCE OF CSS @PROPERTY

Im Jahr 2024 wiederholte Bramus van Damme Lisis Test und ging zusätzlich der
Frage nach, welchen Einfluss @property-Deklarationen dabei haben.

CHROMIUM PERF TEST RUNNER

Low Level Performance-Tests in Chrome automatisiert ausführen

WEBPAGETEST

Die Mutter aller Performance-Testing Tools.

SPEEDCURVE

SaaS, der auf Webpagetest aufbaut und es um viele nützliche Bestandteile
ergänzt.

Revision 637: Das Devtools Performance Tab

<p>Mit <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>) plaudern Schepp und Peter über das Wie und das Warum der Konferenz-Sprecherei.</p>
<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>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:24] Der Wanderzirkus</dt>
<dd>Von der Motivation des Speaker-Daseins (weniger Finanzielles, mehr <a href="https://www.partnachklamm.de/de">Partnachklamm</a> und <a href="https://en.wikipedia.org/wiki/Sugar_shack">Sugar Shack</a>) über die <abbr title="Call for Papers">CFP</abbr>-Teilnahme bis hin zur Konzeption, Vorbereitung und Präsentation eines Talks lassen wir kein Thema aus und sind teils sehr unterschiedlicher Ansicht. Wer CFPs sucht, wird auf <a href="https://cfp.watch/">cfp.watch</a> schnell fündig.
</dd>
</dl>


Mit Hans-Christian Otto (Chef bei Suora und Tröter bei @muhdiekuh@ruhr.social)
plaudern Schepp und Peter über das Wie und das Warum der Konferenz-Sprecherei.


UNSER SPONSOR



Workshops.DE bietet IT-…

Mit Hans-Christian Otto (Chef bei Suora und Tröter bei @muhdiekuh@ruhr.social)
plaudern Schepp und Peter über das Wie und das Warum der Konferenz-Sprecherei.


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:24] DER WANDERZIRKUS

Von der Motivation des Speaker-Daseins (weniger Finanzielles, mehr Partnachklamm
und Sugar Shack) über die CFP-Teilnahme bis hin zur Konzeption, Vorbereitung und
Präsentation eines Talks lassen wir kein Thema aus und sind teils sehr
unterschiedlicher Ansicht. Wer CFPs sucht, wird auf cfp.watch schnell fündig.

Revision 636: Sprechen auf Konferenzen

<p>Neues Jahr, neue <a href="https://stateofcss.com/">State of CSS</a>-Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil drei.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:10] Math</dt>
<dd>Aus irgendeinem Grund steigen wir damit ein, ob und wie Tailwind CSS mathematisch Funktionen unterstützt, was es indirekt via <a href="https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties">Arbitrary Properties</a> tut. Danach ergehen wir uns über mögliche Use-Cases für die <a href="https://blog.stephaniestimac.com/posts/2023/1/css-trigonometric-functions/">trigonomischen Funktionen</a>, was meist etwas mit Kreisformen zu tun hat. Ansonsten vermuten wir noch einiges Potential in generativer Kunst. <a href="https://codepen.io/thebabydino">Ana Tudor</a> ist nicht nur eine CSS-Göttin, sondern vermutlich auch diejenige, die die meisten Anwendungsfälle für die mathematischen Funktionen kennt.</p>
<p>Von den neuen Funktionen finden wir vermutlich die Gruppe rund um <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/abs"><code>abs()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/round"><code>round()</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mod"><code>mod()</code></a> am interessantesten. Wir nennen im Zusammenhang mit selbst-skalierenden Schrift-Systemen als das Framework <a href="https://utopia.fyi/">Utopia</a> und <a href="https://scottkellum.com/">Scott Kellum</a>. Wir erwähnen, dass jede der mathematischen Funktionen <code>calc()</code> serienmäßig in sich eingebaut hat und dass ein <a href="https://www.w3.org/TR/css-values-4/#calc-type-checking">Update der Spezifikation</a> nun auch <a href="https://github.com/web-platform-tests/interop/issues/833">das Teilen durch Längeneinheiten unterstützt</a>, was <a href="https://webkit.org/blog/15860/release-notes-for-safari-technology-preview-203/">der Safari als erster Browser umsetzt</a>.</p>
<p>Anschließend lassen wir uns dazu aus wie wir bei der Anwendung von <code>min()</code> und <code>max()</code> oft einen Knoten im Kopf bekommen und bei <code>clamp()</code> dankenswerterweise nicht.</p>
<p>Zu guter Letzt starten wir einen Aufruf an Euch, uns Beispiele für den Einsatz von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hypot"><code>hypot()</code></a> zu nennen. Uns fällt da mangels Mathefähigkeiten nichts ein. Vielleicht im Rahmen des <a href="https://cssbattle.dev/">CSSBattle</a>? Um Deadpools Nase zu zeichnen, zum Beispiel?</dd>
<dt>[00:19:58] Other Features</dt>
<dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:is"><code>:is()</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:where"><code>:where()</code></a> überspringen wir ganz frech und stürzen uns direkt auf <a href="https://developer.chrome.com/docs/css-ui/css-nesting">CSS Nesting</a> und <a href="https://developer.chrome.com/blog/cascade-layers">Cascade Layers</a>, die die CSS-Syntax aus unserer Sicht ähnlich fundamental weiterentwickeln, wie ES6 es damals für JavaScript getan hat. Damit ist es nicht mehr lang, bis wir jegliche CSS Präprozessoren aus unseren Toolschains werfen können &#8211; sofern wir nicht auf <a href="https://sass-lang.com/documentation/at-rules/control/for/">Loops</a> setzen. Wir erwähnen auch <a href="https://12daysofweb.dev/2023/css-scope/"><code>@scope</code></a>, das Herangehensweisen wie <a href="https://getbem.com/">BEM</a> oder das Kapseln von Styles via generierter CSS-Klassen überflüssig machen. Die Gretchenfrage ist: Wann ist der richtige Zeitpunkt zum Umstieg? Denn beide Features ermöglichen keine <a href="https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation">Graceful Degradation</a>, sondern alten Browsern fliegt das CSS bei Nicht-Unterstützung komplett um die Ohren.</p>
<p>Als nächstes schauen wir uns die beiden Funktionen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set"><code>image-set()</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image"><code>image()</code></a> an. Erstere ist so etwas wie responsive Images in CSS und eigentlich ein <a href="https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/">alter (WebKit-)Hut</a>. Die Funktion wurde nun aber spezifiziert und wurde in dem Zuge um eine Fähigkeit ergänzt, die die ursprüngliche Version nicht bieten konnte, nämlich die (Bild-)Format-Support-Queries. <code>image()</code> ist eine Art Schweizer Taschenmesser für alle Arten von Bild-Erzeugung in CSS. Bilder lassen sich aus Farben generieren, was uns zukünftig vom Missbrauch der <code>linear-gradient()</code>-Funktion abhalten wird. Wir können aber genauso Bild-Ausschnitte via <a href="https://www.w3.org/TR/media-frags/">Media-Fragment-Syntax</a> erzeugen. Leider wird die Funktion bislang in keinem der Browser unterstützt, obwohl die Diskussionen darum schon vor 13 Jahren begannen. Irgendwie kommen wir durch dieses Thema auf ein artverwandtes, nämlich <a href="https://www.stefanjudis.com/today-i-learned/custom-properties-dont-work-with-the-url-css-function/">dass <code>src()</code> eine von Designfehlern befreite Re-Inkarnation von <code>url()</code> ist</a>. Shout-out an <a href="https://webweekly.email/">Stefan Judis und seinen &#8222;Web Weekly&#8220;-Newsletter</a>!</p>
<p>Abschließend sprechen wir doch noch einmal über <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a>, weil es uns hier und da das Hirn verknotet, aber auch weil man dessen Einsatz wegen seiner Selector-Matching-Performance vorsichtig dosieren sollte &#8211; je nach Umfang des DOM-Trees.</dd>
</dl>


Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten
Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von
Web-Oberflächen zu sprechen. Und weil das…

Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten
Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von
Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das
ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch
die einzelnen Kapitel der Umfrage. Dies ist Teil drei.


SCHAUNOTIZEN

[00:02:10] MATH

Aus irgendeinem Grund steigen wir damit ein, ob und wie Tailwind CSS
mathematisch Funktionen unterstützt, was es indirekt via Arbitrary Properties
tut. Danach ergehen wir uns über mögliche Use-Cases für die trigonomischen
Funktionen, was meist etwas mit Kreisformen zu tun hat. Ansonsten vermuten wir
noch einiges Potential in generativer Kunst. Ana Tudor ist nicht nur eine
CSS-Göttin, sondern vermutlich auch diejenige, die die meisten Anwendungsfälle
für die mathematischen Funktionen kennt.



Von den neuen Funktionen finden wir vermutlich die Gruppe rund um abs(), round()
und mod() am interessantesten. Wir nennen im Zusammenhang mit
selbst-skalierenden Schrift-Systemen als das Framework Utopia und Scott Kellum.
Wir erwähnen, dass jede der mathematischen Funktionen calc() serienmäßig in sich
eingebaut hat und dass ein Update der Spezifikation nun auch das Teilen durch
Längeneinheiten unterstützt, was der Safari als erster Browser umsetzt.

Anschließend lassen wir uns dazu aus wie wir bei der Anwendung von min() und
max() oft einen Knoten im Kopf bekommen und bei clamp() dankenswerterweise
nicht.

Zu guter Letzt starten wir einen Aufruf an Euch, uns Beispiele für den Einsatz
von hypot() zu nennen. Uns fällt da mangels Mathefähigkeiten nichts ein.
Vielleicht im Rahmen des CSSBattle? Um Deadpools Nase zu zeichnen, zum Beispiel?

[00:19:58] OTHER FEATURES

:has(), :is() und :where() überspringen wir ganz frech und stürzen uns direkt
auf CSS Nesting und Cascade Layers, die die CSS-Syntax aus unserer Sicht ähnlich
fundamental weiterentwickeln, wie ES6 es damals für JavaScript getan hat. Damit
ist es nicht mehr lang, bis wir jegliche CSS Präprozessoren aus unseren
Toolschains werfen können – sofern wir nicht auf Loops setzen. Wir erwähnen auch
@scope, das Herangehensweisen wie BEM oder das Kapseln von Styles via
generierter CSS-Klassen überflüssig machen. Die Gretchenfrage ist: Wann ist der
richtige Zeitpunkt zum Umstieg? Denn beide Features ermöglichen keine Graceful
Degradation, sondern alten Browsern fliegt das CSS bei Nicht-Unterstützung
komplett um die Ohren.



Als nächstes schauen wir uns die beiden Funktionen image-set() und image() an.
Erstere ist so etwas wie responsive Images in CSS und eigentlich ein alter
(WebKit-)Hut. Die Funktion wurde nun aber spezifiziert und wurde in dem Zuge um
eine Fähigkeit ergänzt, die die ursprüngliche Version nicht bieten konnte,
nämlich die (Bild-)Format-Support-Queries. image() ist eine Art Schweizer
Taschenmesser für alle Arten von Bild-Erzeugung in CSS. Bilder lassen sich aus
Farben generieren, was uns zukünftig vom Missbrauch der
linear-gradient()-Funktion abhalten wird. Wir können aber genauso
Bild-Ausschnitte via Media-Fragment-Syntax erzeugen. Leider wird die Funktion
bislang in keinem der Browser unterstützt, obwohl die Diskussionen darum schon
vor 13 Jahren begannen. Irgendwie kommen wir durch dieses Thema auf ein
artverwandtes, nämlich dass src() eine von Designfehlern befreite Re-Inkarnation
von url() ist. Shout-out an Stefan Judis und seinen „Web Weekly“-Newsletter!

Abschließend sprechen wir doch noch einmal über :has(), weil es uns hier und da
das Hirn verknotet, aber auch weil man dessen Einsatz wegen seiner
Selector-Matching-Performance vorsichtig dosieren sollte – je nach Umfang des
DOM-Trees.

Revision 635: State of CSS 2024, Teil 3/3

<p>Neues Jahr, neue <a href="https://stateofcss.com/">State of CSS</a>-Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil zwei.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:42] Interactions</dt>
<dd>Wir steigen im Kapitel &#8222;Interactions&#8220; wieder ein werfen als erstes einen Blick auf den Themenkomplex des <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap">Scroll-Snappings</a>, eine Erfindung von Microsoft und erstmalig zu bewundern <a href="https://schepp.dev/posts/today-the-trident-era-ends/#:~:text=CSS%20Flexbox%2C%20CSS-,Scroll%20Snap%20Points,-and%20the%20Pointer">im Internet Explorer 10</a>. Generell mögen wir das Feature sehr, sind uns aber einig, dass es einem manchmal auch in die Quere kommen kann &#8211; insbesondere wenn der Typ nicht auf <code>proximity</code>, sondern auf <code>mandatory</code> steht.</p>
<p>Weiter geht es mit <code>scroll-behavior</code>, das wir heutzutage eigentlich immer auf den Wert smooth setzen. Hier und da führt das aber zu unschönen Interaktionen, weswegen man es ggf. temporär, z.B. mit Hilfe einer Animation, aus und wieder an stellt. Wir sind uns außerdem einig, dass Firefox das weiche Scrollen deutlich schöner umsetzt als Chrome.</p>
<p>Nächster Punkt ist <code>overscroll-behavior</code>, mit dem man steuern kann, was beim Erreichen des Endes von Scroll-Bereichen passieren soll. Es ermöglicht uns, das Bounce-Verhalten und Gesten-Shortcuts zu beeinflussen, was besonders nützlich ist, wenn wir komplexe Interfaces erstellen. Außerdem kann man damit verhindern, dass durch ein Overlay hindurch die Seite Scroll-Kommandos erhält und sich so ungewollt unter dem Overlay hinweg scrollen lässt. <a href="https://mastodon.social/@Schepp/113185947970936640">Leider funktioniert die Property nur, wenn es auch wirklich etwas zu scrollen gibt</a>, so dass man manchmal künstlich Scroll-Bereiche erzeugen muss.</p>
<p>Wir sprechen über <code>scrollbar-gutter</code>, <a href="https://webkit.org/blog/15860/release-notes-for-safari-technology-preview-203/">das nun auch in Safari implementiert wurde</a>.</p>
<p>Schließlich geht es um <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style"><code>@starting-style</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior"><code>transition-behavior: allow-discrete</code></a>, die brandneu sind und einem <a href="https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects">neue Möglichkeiten im Bereich der CSS Transitions erschließen</a>.</dd>
<dt>[00:37:19] Typography</dt>
<dd>Weiter geht es mit dem nächsten Kapitel und wir beginnen mit dem <code>font-display</code>-Descriptor. Setzt man ihn nicht, <a href="https://vimeo.com/33154573">machen die Browser, was sie wollen</a>. Darum will man es immer setzen und das meist auf <code>swap</code>. Flankierend sollte man aber immer zusehen, dass man seine Fonts auf die gebräuchlichsten Zeichen eindampft (subsetted) und <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload#cors-enabled_fetches">sie mit Hilfe von Resource-Hints preloaded</a>.</p>
<p>Als nächstes reden wir über <code>line-clamp</code>, <a href="https://github.com/Igalia/explainers/blob/main/css/line-clamp/README.md#motivation">das relativ frisch standardisiert und in die Browser eingebaut wurde, ohne die alten WebKit-Hacks, wo man es nur in Kombination mit einem alten Flexbox-Dialekt ans Laufen bekommen hat</a>.</p>
<p>Weiter geht es mit <a href="https://developer.chrome.com/docs/css-ui/css-text-wrap-balance"><code>text-wrap: balance</code></a> und <a href="https://developer.chrome.com/blog/css-text-wrap-pretty"><code>text-wrap: pretty</code></a>, die wir für eine fantastische Ergänzung des typografischen Werkzeugkastens halten. Und wir schauen uns kurz die neue Property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation"><code>hanging-punctuation</code></a> an, welche derzeit nur in Safari funktioniert, insgesamt aber auch nur marginalen Effekt zeitigt.</p>
<p>Effektreicher ist die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter"><code>initial-letter</code></a>-Eigenschaft, mit der man <a href="https://de.wikipedia.org/wiki/Initiale">Initiale</a> etwas schöner umsetzen kann, als mit dem bislang (und auch von uns auf unserer Webseite) gebräuchlichen Hack, das <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter"><code>::first-letter</code></a>-Pseudoelement zu stylen.
</dd>
<dt>[00:58:58] Accessibility</dt>
<dd>Das dritte von uns behandelte Kapitel dreht sich um Barrierefreiheit und den Einfluss, den man CSS darauf ausüben kann.</p>
<p>Da wäre zum einen die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code>-Feature-Query</a>, mit denen man Animationen und Transitions absichern kann. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a> berücksichtigt, ob jemand eine Seite lieber in hell oder dunkel betrachten mag. Mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data"><code>prefers-reduced-data</code></a> lässt sich eine schlankere Seite an Besucher ausliefern, die um weniger Datenumfang bitten &#8211; wobei wir nicht genau wissen, wieso man das nicht immer anstreben sollte. Mit Hilfe von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast"><code>prefers-contrast</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors"><code>forced-colors</code></a> kann man auf besondere Darstellungswünsche von Besuchenden eingehen.</p>
<p>Für das Funktionsprinzip von <code>:focus-visible</code> möchten wir auf die <a href="https://workingdraft.de/547/">Revision 547: The State of CSS (Teil 2)</a> von 2022 verweisen. Ergänzen möchten wir aber die Info, dass die .focus()-Methode in ihrem Options-Objekt die Eigenschaft <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible"><code>focusVisible</code></a> ebenfalls unterstützt.</p>
<p>Ganz neu ist die <a href="https://web.dev/articles/light-dark"><code>light-dark()</code>-Funktion</a> in CSS, die man an allen Stellen einsetzen kann, an denen in CSS Farbwerte stehen. Als Parameter gibt man der Funktion zwei Farbangaben mit, von denen die erste bei aktiviertem Light-Mode angewendet wird und die zweite bei aktiviertem Dark-Mode.</dd>
</dl>


Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten
Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von
Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das
ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch
die einzelnen Kapitel der Umfrage. Dies ist Teil zwei.


SCHAUNOTIZEN

[00:03:42] INTERACTIONS

Wir steigen im Kapitel „Interactions“ wieder ein werfen als erstes einen Blick
auf den Themenkomplex des Scroll-Snappings, eine Erfindung von Microsoft und
erstmalig zu bewundern im Internet Explorer 10. Generell mögen wir das Feature
sehr, sind uns aber einig, dass es einem manchmal auch in die Quere kommen kann
– insbesondere wenn der Typ nicht auf proximity, sondern auf mandatory steht.



Weiter geht es mit scroll-behavior, das wir heutzutage eigentlich immer auf den
Wert smooth setzen. Hier und da führt das aber zu unschönen Interaktionen,
weswegen man es ggf. temporär, z.B. mit Hilfe einer Animation, aus und wieder an
stellt. Wir sind uns außerdem einig, dass Firefox das weiche Scrollen deutlich
schöner umsetzt als Chrome.

Nächster Punkt ist overscroll-behavior, mit dem man steuern kann, was beim
Erreichen des Endes von Scroll-Bereichen passieren soll. Es ermöglicht uns, das
Bounce-Verhalten und Gesten-Shortcuts zu beeinflussen, was besonders nützlich
ist, wenn wir komplexe Interfaces erstellen. Außerdem kann man damit verhindern,
dass durch ein Overlay hindurch die Seite Scroll-Kommandos erhält und sich so
ungewollt unter dem Overlay hinweg scrollen lässt. Leider funktioniert die
Property nur, wenn es auch wirklich etwas zu scrollen gibt, so dass man manchmal
künstlich Scroll-Bereiche erzeugen muss.

Wir sprechen über scrollbar-gutter, das nun auch in Safari implementiert wurde.

Schließlich geht es um @starting-style und transition-behavior: allow-discrete,
die brandneu sind und einem neue Möglichkeiten im Bereich der CSS Transitions
erschließen.

[00:37:19] TYPOGRAPHY

Weiter geht es mit dem nächsten Kapitel und wir beginnen mit dem
font-display-Descriptor. Setzt man ihn nicht, machen die Browser, was sie
wollen. Darum will man es immer setzen und das meist auf swap. Flankierend
sollte man aber immer zusehen, dass man seine Fonts auf die gebräuchlichsten
Zeichen eindampft (subsetted) und sie mit Hilfe von Resource-Hints preloaded.



Als nächstes reden wir über line-clamp, das relativ frisch standardisiert und in
die Browser eingebaut wurde, ohne die alten WebKit-Hacks, wo man es nur in
Kombination mit einem alten Flexbox-Dialekt ans Laufen bekommen hat.

Weiter geht es mit text-wrap: balance und text-wrap: pretty, die wir für eine
fantastische Ergänzung des typografischen Werkzeugkastens halten. Und wir
schauen uns kurz die neue Property hanging-punctuation an, welche derzeit nur in
Safari funktioniert, insgesamt aber auch nur marginalen Effekt zeitigt.

Effektreicher ist die initial-letter-Eigenschaft, mit der man Initiale etwas
schöner umsetzen kann, als mit dem bislang (und auch von uns auf unserer
Webseite) gebräuchlichen Hack, das ::first-letter-Pseudoelement zu stylen.

[00:58:58] ACCESSIBILITY

Das dritte von uns behandelte Kapitel dreht sich um Barrierefreiheit und den
Einfluss, den man CSS darauf ausüben kann.



Da wäre zum einen die prefers-reduced-motion-Feature-Query, mit denen man
Animationen und Transitions absichern kann. prefers-color-scheme berücksichtigt,
ob jemand eine Seite lieber in hell oder dunkel betrachten mag. Mit
prefers-reduced-data lässt sich eine schlankere Seite an Besucher ausliefern,
die um weniger Datenumfang bitten – wobei wir nicht genau wissen, wieso man das
nicht immer anstreben sollte. Mit Hilfe von prefers-contrast und forced-colors
kann man auf besondere Darstellungswünsche von Besuchenden eingehen.

Für das Funktionsprinzip von :focus-visible möchten wir auf die Revision 547:
The State of CSS (Teil 2) von 2022 verweisen. Ergänzen möchten wir aber die
Info, dass die .focus()-Methode in ihrem Options-Objekt die Eigenschaft
focusVisible ebenfalls unterstützt.

Ganz neu ist die light-dark()-Funktion in CSS, die man an allen Stellen
einsetzen kann, an denen in CSS Farbwerte stehen. Als Parameter gibt man der
Funktion zwei Farbangaben mit, von denen die erste bei aktiviertem Light-Mode
angewendet wird und die zweite bei aktiviertem Dark-Mode.

Revision 634: State of CSS 2024, Teil 2/3

<p>Neues Jahr, neue <a href="https://stateofcss.com/">State of CSS</a>-Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil eins.</p>
<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>
<p>[00:02:20] Layout</p>
<p>Wir beginnen mit der Frage, wann man Flex und wann Grid einsetzt und uns kommt dabei ein <a href="https://www.youtube.com/watch?v=ESAXStllfcw">Vortrag von Kevin Powell</a> in den Sinn, in dem er genau das bespricht. Sodann geht es um Subgrids und wie diese schon <a href="https://rachelandrew.co.uk/archives/2013/04/10/css-grid-layout-what-has-changed/">von Anfang an für die Grid-Spec in Planung waren</a>, dank des <a href="https://rachelandrew.co.uk/archives/2017/07/20/why-display-contents-is-not-css-grid-layout-subgrid/">unermüdlichen Einsatzes von Rachel Andrew</a>. Als Ressourcen, um Grid spielerisch zu lernen, empfehlen wir…</p>
<ul>
<li><a href="https://codingfantasy.com/games/css-grid-attack">CSS Grid Attack</a>,</li>
<li><a href="https://gridcritters.com/">Grid Critters</a>, sowie</li>
<li><a href="https://layout-breakouts-builder.vercel.app/">Layout Breakouts Builder</a></li>
</ul>
<p>Und um *wirklich* zu verstehen, was bei Flex und Grid hinter den Kulissen abgeht, empfehlen wir den ziemlich &#8222;deepen&#8220; Talk <a href="https://www.youtube.com/watch?v=nwmPsqX4q4I">&#8222;Demystify Modern CSS Layouts with DevTools&#8220; von Hui Jing Chen</a>.</p>
<p>Dann sprechen wir kurz über das sehr praktische <a href="https://www.matuzo.at/blog/2023/100daysof-day96/"><code>margin-trim</code></a>, um im Anschluss zunächst über <a href="https://developer.chrome.com/blog/anchor-positioning-api?hl=en">Anchor Positioning</a> und schließlich über <a href="https://developer.chrome.com/docs/css-ui/style-queries?hl=en">Style Queries</a> und <a href="https://nerdy.dev/the-css-podcast-on-state-queries">State Queries</a> zu sprechen.</p>
<p>[00:00:00] Shapes &amp; Graphics</p>
<p>Dieses Kapitel ist eine wilde gemischte Tüte. Wir sprechen zunächst über die gar nicht mehr so neuen Blend Modes und Backdrop-Filter, allerdings führt uns das zum Thema des <a href="https://polypane.app/blog/forced-colors-explained-a-practical-guide/">&#8222;Forced Colors Mode&#8220;</a> und wie man dort manche Überraschung erlebt.</p>
<p>Als nächstes widmen wir uns den neuen Linear-Easing-Functions, welche uns bei Transitions und Animations <a href="https://www.smashingmagazine.com/2023/09/path-css-easing-linear-function/">völlig neue Möglichkeiten eröffnen</a> und gleichzeitig ein ziemlich cooler &#8222;Hack&#8220; sind.</p>
<p>Schließlich sprechen wir über Intrinsic-Sizes in Form von <code>min-content</code>, <code>max-content</code>, <code>fit-content</code>.</p>
<p>[00:00:00] Colors</p>
<p>Das letzte Kapitel, über das wir in Teil eins sprechen, dreht sich um all die Neuerungen im Bereich Farben. Das sind einerseits neue Funktionen, wie die <code>color()</code>-Funktion, die das Adressieren von Farbräumen und -modellen vereinheitlicht.</p>
<p>Anschließend sprechen wir kurz über <code>accent-color</code>, mit dem man den Look von Formularelementen schnell und unkompliziert der eigenen Farbwelt näher bringt.</p>
<p>Wir reden über Wide Gamut Colors, also Farben, die einem umfangreicheren Farbraum entstammen, als ihn das altehrwürdige sRGB bietet. Man höre dazu auch unsere Folge <a href="https://workingdraft.de/623/">Revision 623: Farben und Farbräume</a>.</p>
<p>Zu guter Letzt sprechen wir über die <a href="https://developer.chrome.com/blog/css-relative-color-syntax?hl=en">Relative Color Syntax</a>, die eine neue Syntax für Farbangaben darstellt, mit der man Varianten bestehender Farben erzeugen kann. Damit eignet sie sich besonders gut, um mit ihr Design Systeme automatisiert auf Basis von Grundfarben zu erzeugen.</p>
<h3>Links</h3>
<dl>
<dt><a href="https://usewindy.com/">Windy</a></dt>
<dd>Browser-Erweiterung, mit der man jede Webseite nach TailwindCSS transformieren kann.</dd>
<dt><a href="https://www.css.cafe/">CSS Café</a></dt>
<dd>Ein mehrmals im Jahr tagendes, von Schepp mitveranstaltetes Online-Meetup zum Thema CSS</dd>
</dl>


Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten
Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von
Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das
ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch
die einzelnen Kapitel der Umfrage. Dies ist Teil eins.


UNSER SPONSOR



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

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

[00:02:20] Layout

Wir beginnen mit der Frage, wann man Flex und wann Grid einsetzt und uns kommt
dabei ein Vortrag von Kevin Powell in den Sinn, in dem er genau das bespricht.
Sodann geht es um Subgrids und wie diese schon von Anfang an für die Grid-Spec
in Planung waren, dank des unermüdlichen Einsatzes von Rachel Andrew. Als
Ressourcen, um Grid spielerisch zu lernen, empfehlen wir…

 * CSS Grid Attack,
 * Grid Critters, sowie
 * Layout Breakouts Builder

Und um *wirklich* zu verstehen, was bei Flex und Grid hinter den Kulissen
abgeht, empfehlen wir den ziemlich „deepen“ Talk „Demystify Modern CSS Layouts
with DevTools“ von Hui Jing Chen.

Dann sprechen wir kurz über das sehr praktische margin-trim, um im Anschluss
zunächst über Anchor Positioning und schließlich über Style Queries und State
Queries zu sprechen.

[00:00:00] Shapes & Graphics

Dieses Kapitel ist eine wilde gemischte Tüte. Wir sprechen zunächst über die gar
nicht mehr so neuen Blend Modes und Backdrop-Filter, allerdings führt uns das
zum Thema des „Forced Colors Mode“ und wie man dort manche Überraschung erlebt.

Als nächstes widmen wir uns den neuen Linear-Easing-Functions, welche uns bei
Transitions und Animations völlig neue Möglichkeiten eröffnen und gleichzeitig
ein ziemlich cooler „Hack“ sind.

Schließlich sprechen wir über Intrinsic-Sizes in Form von min-content,
max-content, fit-content.

[00:00:00] Colors

Das letzte Kapitel, über das wir in Teil eins sprechen, dreht sich um all die
Neuerungen im Bereich Farben. Das sind einerseits neue Funktionen, wie die
color()-Funktion, die das Adressieren von Farbräumen und -modellen
vereinheitlicht.

Anschließend sprechen wir kurz über accent-color, mit dem man den Look von
Formularelementen schnell und unkompliziert der eigenen Farbwelt näher bringt.

Wir reden über Wide Gamut Colors, also Farben, die einem umfangreicheren
Farbraum entstammen, als ihn das altehrwürdige sRGB bietet. Man höre dazu auch
unsere Folge Revision 623: Farben und Farbräume.

Zu guter Letzt sprechen wir über die Relative Color Syntax, die eine neue Syntax
für Farbangaben darstellt, mit der man Varianten bestehender Farben erzeugen
kann. Damit eignet sie sich besonders gut, um mit ihr Design Systeme
automatisiert auf Basis von Grundfarben zu erzeugen.


LINKS

WINDY

Browser-Erweiterung, mit der man jede Webseite nach TailwindCSS transformieren
kann.

CSS CAFÉ

Ein mehrmals im Jahr tagendes, von Schepp mitveranstaltetes Online-Meetup zum
Thema CSS

Revision 633: State of CSS 2024, Teil 1/3

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

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

Working Draft ist der deutschsprachige Podcast für Frontend-Entwicklung, Webdesign und UI Engineering.

Bei uns geht’s um HTML, CSS, JavaScript, Frameworks wie React, Vue und Angular, Responsive Webdesign, User-Interfaces, moderne UI-Patterns, Barrierefreiheit, Tooling, Design-Systeme, Webstandards und mehr.

Unser Team besteht aus erfahrenen Frontend-Entwickler:innen aus Deutschland und Österreich – mit Gästen aus der Praxis, die regelmäßig Einblicke in aktuelle Tech-Themen geben. Ob neue CSS-Features, die Zukunft von JavaScript, KI im Frontend-Workflow oder einfach gute UI-Erfahrungen: Wir reden drüber – jede Woche neu.

PODLIST

Working Draft

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

Neue Episoden

Revision 638: Web Component vs. Frontend Framework (und allgemeines Framework/CMS-Drama)

Working Draft

Revision 637: Das Devtools Performance Tab

Working Draft

Revision 636: Sprechen auf Konferenzen

Working Draft

Revision 635: State of CSS 2024, Teil 3/3

Working Draft

Revision 634: State of CSS 2024, Teil 2/3

Working Draft

Revision 633: State of CSS 2024, Teil 1/3

Working Draft

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