<p>In einer etwas speziellen Folge haben sich Peter, Vanessa und Hans zusammengesetzt und einfach drauf losgeplappert. Ein richtiges Thema gab es nicht, weswegen es zwar nicht um Gott und die Welt, aber um Bohrhämmer und UML-Diagramme ging.</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:03:00] Werkzeuge im Meatspace</dt>
<dd>Wenn ihr schon immer mal wissen wolltet, auf welcher Seite der Hilti-vs.-Bosch-Debatte wir stehen und ob „entspinnifizieren“ mit Kabel oder Akku besser geht, klären wir das ein für allemal. Außerdem geht es kurz um Fahrräder und das Reinigen von Fahrrädern, wahlweise mit <a href="https://www.amazon.de/gp/product/B07YWQYC83">spezialisiertem Tooling</a> oder ausgedienten Spülbürsten.</dd>
<dt>[00:18:50] Kaffee, Kaffeezubehör und Koffein-Trägersubstanzen</dt>
<dd>
Hans nerdet über Espresso ab und wir debattieren über den Wert von unterschiedlichen Kaffees in unterschiedlichen Lebenslagen. Wir klären, wie viel Esspresso kommt aus dem „„„„„Esspressokocher“““““ herauskommt, überlegen ob die <a href="https://9barista.com/products/9barista-espresso-machine">9Barista Espresso Machine</a> ihren Mondpreis wert sein könnte und debattieren die Qualitätsunterschiede von Kaffeemühlen. In qualifiziert gibt&#8217;s mehr von dem Thema <a href="https://www.youtube.com/channel/UCMb0O2CdPBNi-QqPk5T3gsQ">auf Youtube bei James Hoffmann.</a>
</dd>
<dt>[00:46:23] Software-Empfehlungen</dt>
<dd>
Wir empfehlen und diskutieren unterschiedlichste Software-Produkte aus allen möglichen Kategorien, beginnend bei den Bildschirm-Wach-Haltern <a href="https://apps.apple.com/de/app/amphetamine/id937984704?mt=12">Amphetamine</a> (Mac) und <a href="https://wiki.ubuntuusers.de/Caffeine/">Caffeine</a> (Linux). Der Zettelwirtschaft treten wir mit <a href="https://obsidian.md/">Obsidian</a> und Passwordmanagern wie <a href="https://1password.com/">1Password</a> entgegen, warnen aber auch davor, sich darauf zu sehr zu verlassen (1Password im speziellen <a href="https://techcrunch.com/2022/01/19/1password-series-c-funding/?guccounter=1">hat erhöhtes Risiko für Enshittificaton und/oder Exitus</a>). Zum reviewen und mergen von Code stellen <a href="https://graphite.dev/">Graphite</a>, <a href="https://www.git-tower.com/">Git Tower</a> und <a href="https://www.sourcetreeapp.com/">Sourcetree</a> ernstzunehmende Alternativen füreinander dar, während die einzige Alternative zu <a href="https://devutils.com/">DevUtils</a> räudige Textareas auf shady Websites sind. Hans spricht sich für den „Pocket Coach“ <a href="https://ahead-app.com/">Ahead</a> aus, Vanessa für den CV-Generator <a href="https://ohmycv.app/">Oh My CV!</a>, aber im allgemeinen taugt auch schieres HTML/CSS als LaTeX-Ersatz für schöne Dokumente. Für visuelles empfehlen wir <a href="https://mermaid.js.org/">Mermaid</a> (ASCII->Diagramm-Transformator) <a href="https://excalidraw.com/"></a> (Online-Grafiktool) <a href="https://inkscape.org/de/"></a> (Offline-Vektorgrafikeditor) und <a href="https://miro.com/de/"></a> („visueller Workspace“), für Präsentationen unter anderem <a href="https://pitch.com/">Pitch</a> und <a href="https://sli.dev/">Slidev</a>. Nachdem wir eine Lanze für selbstgeschriebene Software gebrochen haben (<a href="https://xkcd.com/1205/">xkcd</a>) beenden wir die Sendung mit den Mastodon-Clients <a href="https://apps.apple.com/de/app/ivory-for-mastodon-by-tapbots/">Ivory</a> (iOS) und <a href="https://elk.zone">Elk</a> (Web) dem Kalender <a href="https://cron.com/">Cron</a>, dem Task-Manager <a href="https://culturedcode.com/things/">Things</a>, dem Mail-Client <a href="https://superhuman.com/">Superhuman</a> und einer Diskussion rund um Podcast-Apps wie <a href="https://overcast.fm/">Overcast</a> und Spotify.</dd>
</dl>


In einer etwas speziellen Folge haben sich Peter, Vanessa und Hans
zusammengesetzt und einfach drauf losgeplappert. Ein richtiges Thema gab es
nicht, weswegen es zwar nicht um Gott und die Welt, aber …

Working Draft

In einer etwas speziellen Folge haben sich Peter, Vanessa und Hans
zusammengesetzt und einfach drauf losgeplappert. Ein richtiges Thema gab es
nicht, weswegen es zwar nicht um Gott und die Welt, aber um Bohrhämmer und
UML-Diagramme ging.


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:03:00] WERKZEUGE IM MEATSPACE

Wenn ihr schon immer mal wissen wolltet, auf welcher Seite der
Hilti-vs.-Bosch-Debatte wir stehen und ob „entspinnifizieren“ mit Kabel oder
Akku besser geht, klären wir das ein für allemal. Außerdem geht es kurz um
Fahrräder und das Reinigen von Fahrrädern, wahlweise mit spezialisiertem Tooling
oder ausgedienten Spülbürsten.

[00:18:50] KAFFEE, KAFFEEZUBEHÖR UND KOFFEIN-TRÄGERSUBSTANZEN

Hans nerdet über Espresso ab und wir debattieren über den Wert von
unterschiedlichen Kaffees in unterschiedlichen Lebenslagen. Wir klären, wie viel
Esspresso kommt aus dem „„„„„Esspressokocher“““““ herauskommt, überlegen ob die
9Barista Espresso Machine ihren Mondpreis wert sein könnte und debattieren die
Qualitätsunterschiede von Kaffeemühlen. In qualifiziert gibt’s mehr von dem
Thema auf Youtube bei James Hoffmann.

[00:46:23] SOFTWARE-EMPFEHLUNGEN

Wir empfehlen und diskutieren unterschiedlichste Software-Produkte aus allen
möglichen Kategorien, beginnend bei den Bildschirm-Wach-Haltern Amphetamine
(Mac) und Caffeine (Linux). Der Zettelwirtschaft treten wir mit Obsidian und
Passwordmanagern wie 1Password entgegen, warnen aber auch davor, sich darauf zu
sehr zu verlassen (1Password im speziellen hat erhöhtes Risiko für
Enshittificaton und/oder Exitus). Zum reviewen und mergen von Code stellen
Graphite, Git Tower und Sourcetree ernstzunehmende Alternativen füreinander dar,
während die einzige Alternative zu DevUtils räudige Textareas auf shady Websites
sind. Hans spricht sich für den „Pocket Coach“ Ahead aus, Vanessa für den
CV-Generator Oh My CV!, aber im allgemeinen taugt auch schieres HTML/CSS als
LaTeX-Ersatz für schöne Dokumente. Für visuelles empfehlen wir Mermaid
(ASCII->Diagramm-Transformator) (Online-Grafiktool) (Offline-Vektorgrafikeditor)
und („visueller Workspace“), für Präsentationen unter anderem Pitch und Slidev.
Nachdem wir eine Lanze für selbstgeschriebene Software gebrochen haben (xkcd)
beenden wir die Sendung mit den Mastodon-Clients Ivory (iOS) und Elk (Web) dem
Kalender Cron, dem Task-Manager Things, dem Mail-Client Superhuman und einer
Diskussion rund um Podcast-Apps wie Overcast und Spotify.

Revision 603: Nerdige Soft- und Hardware-Tipps

<p>In dieser Revision haben Hans und Schepp Besuch von Florian Geierstanger (<a href="https://florian.geierstanger.org/">Web</a> / <a href="https://www.linkedin.com/in/florian-geierstanger/">LinkedIn</a> / <a href="https://mastodon.social/@kinoauge">Mastodon</a>) und Simon Praetorius (<a href="https://www.praetorius.me/">Web</a> / <a href="https://www.linkedin.com/in/simon-praetorius-002453266/">LinkedIn</a> / <a href="https://mastodon.social/@s2b@norden.social">Mastodon</a>), ihres Zeichens TYPO3-Frontend-Dompteur und TYPO3-Core-Entwickler und Berater.</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:20] Komponentenbasierte Frontends in TYPO3</dt>
<dd>Diese Revision interessiert uns, ob, und wie man im Content-Management-System <a href="https://typo3.org/cms/">TYPO3</a> ein komponentenbasiertes Frontend konstruieren kann. Bevor wir in diese Frage eintauchen, lassen wir uns von unseren Gästen den Werdegang, die Philosophie und die aktuelle Stellung von TYPO3 im Markt erklären. Nach einigen Höhen und Tiefen ist TYPO3 nun schon seit Längerem wieder in guten Fahrwassern und es sind zahlreiche gute Dinge hineingeflossen und neue in der <a href="https://typo3.org/cms/roadmap">Roadmap</a> geplant. Was TYPO3 im Core nicht mitbringt, rüsten zahlreiche <a href="https://extensions.typo3.org/">TYPO3-Extensions</a> nach, von denen einige auch den offiziellen Segen des Core-Teams haben &#8211; was bedeutet, dass sie gut gepflegt sind. Das mächtige Template-System basiert auf XML und nennt sich Fluid. <a href="https://github.com/TYPO3-Headless">Headless</a> lässt es sich ebenso betreiben wie mit &#8222;Head&#8220;. Und natürlich besitzt TYPO3 seine Version von Hotwire namens &#8222;<a href="https://topwire.dev/">Topwire</a>&#8222;. </p>
<p>TYPO3 mischt im deutschsprachigen Markt als einziges Open Source System im Enterprise-Umfeld mit und hat so einen guten Ruf, dass sogar der <a href="https://produkt.gsb.bund.de/Produkt_neu/GSB11/gsb11_node.html">Bund drauf setzt</a>. In den letzten Jahrzehnten hat sich rund um TYPO3 eine große Community geformt, die sich regelmäßig Online austauscht, sich zu <a href="https://typo3.org/community/meet/user-groups">Meetups</a> trifft, oder auf den jährlich stattfindenden <a href="https://t3dd23.typo3.com/de/">TYPO Developer Days</a>.</p>
<p>Als vom Backend her entwickeltes System, ist TYPO3 nicht &#8222;out of the Box&#8220; auf die komponentenbasierte Entwicklung von Frontends ausgelegt. In diese Lücke stieß nun Simon und lotete aus, <a href="https://speakerdeck.com/s2b/expedition-into-the-frontend-jungle">was sich machen ließ</a>. Was nicht passt, wird passend gemacht und so ergibt es sich, dass man für sein Frontend letztendlich doch <a href="https://fluidcomponents.sitegeist.de/">Komponenten-Bibliotheken/-Styleguides</a> einsetzen kann, und/oder <a href="https://www.bootstrap-package.com/">Bootstrap</a>, und man alles mit <a href="https://github.com/s2b/vite-asset-collector">Vite verdrahten</a> <a href="https://vitejs.dev/guide/backend-integration.html">kann</a>, das einem alle Assets zusammenschnürt.</dd>
</dl>
</dl>


In dieser Revision haben Hans und Schepp Besuch von Florian Geierstanger (Web /
LinkedIn / Mastodon) und Simon Praetorius (Web / LinkedIn / Mastodon), ihres
Zeichens TYPO3-Frontend-Dompteur und TYPO3-…

In dieser Revision haben Hans und Schepp Besuch von Florian Geierstanger (Web /
LinkedIn / Mastodon) und Simon Praetorius (Web / LinkedIn / Mastodon), ihres
Zeichens TYPO3-Frontend-Dompteur und TYPO3-Core-Entwickler und Berater.


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:20] KOMPONENTENBASIERTE FRONTENDS IN TYPO3

Diese Revision interessiert uns, ob, und wie man im Content-Management-System
TYPO3 ein komponentenbasiertes Frontend konstruieren kann. Bevor wir in diese
Frage eintauchen, lassen wir uns von unseren Gästen den Werdegang, die
Philosophie und die aktuelle Stellung von TYPO3 im Markt erklären. Nach einigen
Höhen und Tiefen ist TYPO3 nun schon seit Längerem wieder in guten Fahrwassern
und es sind zahlreiche gute Dinge hineingeflossen und neue in der Roadmap
geplant. Was TYPO3 im Core nicht mitbringt, rüsten zahlreiche TYPO3-Extensions
nach, von denen einige auch den offiziellen Segen des Core-Teams haben – was
bedeutet, dass sie gut gepflegt sind. Das mächtige Template-System basiert auf
XML und nennt sich Fluid. Headless lässt es sich ebenso betreiben wie mit
„Head“. Und natürlich besitzt TYPO3 seine Version von Hotwire namens „Topwire„.



TYPO3 mischt im deutschsprachigen Markt als einziges Open Source System im
Enterprise-Umfeld mit und hat so einen guten Ruf, dass sogar der Bund drauf
setzt. In den letzten Jahrzehnten hat sich rund um TYPO3 eine große Community
geformt, die sich regelmäßig Online austauscht, sich zu Meetups trifft, oder auf
den jährlich stattfindenden TYPO Developer Days.

Als vom Backend her entwickeltes System, ist TYPO3 nicht „out of the Box“ auf
die komponentenbasierte Entwicklung von Frontends ausgelegt. In diese Lücke
stieß nun Simon und lotete aus, was sich machen ließ. Was nicht passt, wird
passend gemacht und so ergibt es sich, dass man für sein Frontend letztendlich
doch Komponenten-Bibliotheken/-Styleguides einsetzen kann, und/oder Bootstrap,
und man alles mit Vite verdrahten kann, das einem alle Assets zusammenschnürt.

Revision 602: Komponentenbasierte Frontends in TYPO3

<p>Mit unserer Gästin, der Entwicklerin und Trainerin <a href="https://www.linkedin.com/in/martina-kraus-398493108/">Martina Kraus</a> sprachen wir zuletzt über das Thema <a href="https://workingdraft.de/482/">Revision 482: Angular im Jahr 2021</a>. Dieses Mal sollte es nicht um Angular gehen, sondern um WebAssembly. Fasten your seatbelts!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:33] WebAssembly &#8211; Vergangenheit, Gegenwart und Zukunft</dt>
<dd>Wir beginnen mit einem kleinen Recap, was WebAssembly denn überhaupt ist: WebAssembly ist eine von JavaScript-Engines abgeleitete, plattformunabhängige Ausführungsumgebung, die es ermöglicht, Code aus anderen Programmiersprachen dafür umzuwandeln und ihn dann nahezu in Originalgeschwindigkeit auszuführen.</p>
<p>Die ersten Umgebungen, die WebAssembly unterstützt haben, waren die Browser. Alle aktuellen Browser, aber auch Node, Deno oder Bun unterstützen die Ausführung von WebAssembly. Mit Hilfe von <a href="http://wasm-bindgen">wasm-bindgen</a> kann WASM-Code mit JavaScript kommunizieren und zusammenarbeiten.</p>
<p>Neuerdings gibt es, dank des <a href="https://wasi.dev/">WASI-Standards</a> aber auch eigenständige Ausführungsumgebungen für WebAssembly, um Code plattformunabhängig auszuführen &#8211; die bekannteste derzeit: <a href="https://wasmer.io/">Wasmer</a> inklusive <a href="https://wasmer.io/products/registry">Packet-Registry</a>.</p>
<p><a href="https://twitter.com/solomonstre/status/1111004913222324225"><img loading="lazy" class="alignleft size-large wp-image-6609" style="width: 100%; height: auto; max-width: 600px;" src="https://workingdraft.de/wp-content/uploads/2024/01/twitter.com_solomonstre_status_1111004913222324225_langde-1024x796.png" alt="Tweet vom 27. März 2019 von Solomon Hyke, einem der Erfinder von Docker, der schreibt: &quot;If WASM+WASI existed in 2008, we wouldn't have needed to created Docker. That's how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let's hope WASI is up to the task!&quot;" width="1024" height="796" srcset="https://workingdraft.de/wp-content/uploads/2024/01/twitter.com_solomonstre_status_1111004913222324225_langde-1024x796.png 1024w, https://workingdraft.de/wp-content/uploads/2024/01/twitter.com_solomonstre_status_1111004913222324225_langde-300x233.png 300w, https://workingdraft.de/wp-content/uploads/2024/01/twitter.com_solomonstre_status_1111004913222324225_langde-768x597.png 768w, https://workingdraft.de/wp-content/uploads/2024/01/twitter.com_solomonstre_status_1111004913222324225_langde.png 1196w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>Die Zukunft von WebAssembly sieht Martina in der Nutzung als &#8222;Serverless Functions&#8220;, also in Form von schnell erzeugtem &#8222;Fire and Forget&#8220;-Code, der irgendwo in der Cloud läuft.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://v8.dev/blog">Das V8 Blog</a></dt>
<dd>Hier posten die V8-Ingenieure regelmäßig über die Verbesserungen an der Engine.</dd>
<dt><a href="https://developer.chrome.com/docs/devtools/wasm">Debug C/C++ WebAssembly</a></dt>
<dd>Hier findet Ihr beschrieben, wie Ihr mit den Chrome Devtools WebAssembly-Code debuggen könnt. Ein Video-Tutorial gibt es auch.</dd>
</dl>


Mit unserer Gästin, der Entwicklerin und Trainerin Martina Kraus sprachen wir
zuletzt über das Thema Revision 482: Angular im Jahr 2021. Dieses Mal sollte es
nicht um Angular gehen, sondern um WebAsse…

Mit unserer Gästin, der Entwicklerin und Trainerin Martina Kraus sprachen wir
zuletzt über das Thema Revision 482: Angular im Jahr 2021. Dieses Mal sollte es
nicht um Angular gehen, sondern um WebAssembly. Fasten your seatbelts!


SCHAUNOTIZEN

[00:01:33] WEBASSEMBLY – VERGANGENHEIT, GEGENWART UND ZUKUNFT

Wir beginnen mit einem kleinen Recap, was WebAssembly denn überhaupt ist:
WebAssembly ist eine von JavaScript-Engines abgeleitete, plattformunabhängige
Ausführungsumgebung, die es ermöglicht, Code aus anderen Programmiersprachen
dafür umzuwandeln und ihn dann nahezu in Originalgeschwindigkeit auszuführen.



Die ersten Umgebungen, die WebAssembly unterstützt haben, waren die Browser.
Alle aktuellen Browser, aber auch Node, Deno oder Bun unterstützen die
Ausführung von WebAssembly. Mit Hilfe von wasm-bindgen kann WASM-Code mit
JavaScript kommunizieren und zusammenarbeiten.

Neuerdings gibt es, dank des WASI-Standards aber auch eigenständige
Ausführungsumgebungen für WebAssembly, um Code plattformunabhängig auszuführen –
die bekannteste derzeit: Wasmer inklusive Packet-Registry.



Die Zukunft von WebAssembly sieht Martina in der Nutzung als „Serverless
Functions“, also in Form von schnell erzeugtem „Fire and Forget“-Code, der
irgendwo in der Cloud läuft.


KEINE SCHAUNOTIZEN

DAS V8 BLOG

Hier posten die V8-Ingenieure regelmäßig über die Verbesserungen an der Engine.

DEBUG C/C++ WEBASSEMBLY

Hier findet Ihr beschrieben, wie Ihr mit den Chrome Devtools WebAssembly-Code
debuggen könnt. Ein Video-Tutorial gibt es auch.

Revision 601: WebAssembly – Vergangenheit, Gegenwart und Zukunft

<p>Willkommen zur 600ten Revision unseres Podcasts, die wir am Sonntag, den 7. Januar 2024, in Form einer live abgehaltenen Fishbowl-Diskussion mit etwas über zwanzig Gästen durchgeführt haben. Wir haben dabei über drei verschiedene Themenblöcke gesprochen, die wir per Voting bestimmt haben:</p>
<ol>
<li>Web Components</li>
<li>Erwartungen an den Framework-Jungle 2024</li>
<li>Design Systeme</li>
</ol>
<p>Unsere Teilnehmerschar bestand aus ehemalige Gästen wie z.B. <a href="https://marvinh.dev/">Marvin Hagemeister</a>, <a href="http://www.grochtdreis.de/">Jens Grochtdreis</a> oder <a href="https://www.lichter.io/">Alexander Lichter</a>, aber auch aus vielen neuen Gesichtern. Darüber haben wir uns sehr gefreut!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:10:38] Web Components</dt>
<dd>Wir starteten mit den Web Components. Zunächst ging es darum, ob Web Components überhaupt &#8222;einsatzbereit&#8220; seien. Und wir diskutierten, wie sich Web Components mit anderen Frontend-Frameworks verbinden lassen. Zum Glück gab es bereits Artikel darüber, wie Frameworks und &#8222;Custom Components&#8220; erfolgreich kombiniert werden können, wie z.B. der &#8222;<a href="https://custom-elements-everywhere.com">Custom Components Everywhere</a>&#8222;. Besonders spannend war, dass die Seite <a href="https://www.reddit.com/">Reddit</a> anscheinend teilweise bereits mit Web Components erstellt wurde. Dies war jedoch noch nicht für alle Benutzer verfügbar &#8211; in diesem Fall half der Inkognito-Modus und das Ausloggen -, aber dann konnten die Teilnehmer die neue Webseite mit Web Components betrachten. Wir haben natürlich über den <a href="https://nolanlawson.com/2023/12/30/shadow-dom-and-the-problem-of-encapsulation/">Shadow DOM und die damit einhergehenden Probleme</a> gesprochen. Wenn jemand noch auf der Suche nach überzeugenden Argumenten für Web Components auf Management-Ebene war, empfahlen wir das Lesen dieses <a href="https://gomakethings.com/the-elevator-pitch-for-web-components/">Web Components Elevator Pitchs</a>.</p>
<ul>
<li><a href="https://nolanlawson.com/2023/12/30/shadow-dom-and-the-problem-of-encapsulation/">https://nolanlawson.com/2023/12/30/shadow-dom-and-the-problem-of-encapsulation/</a></li>
<li><a href="https://blog.jim-nielsen.com/2023/html-web-components-an-example/">https://blog.jim-nielsen.com/2023/html-web-components-an-example/</a></li>
<li><a href="https://custom-elements-everywhere.com/">https://custom-elements-everywhere.com/</a></li>
<li><a href="https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/">https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/</a></li>
<li><a href="https://gomakethings.com/the-elevator-pitch-for-web-components/">https://gomakethings.com/the-elevator-pitch-for-web-components/</a></li>
<li><a href="https://openui5.org/">https://openui5.org/</a></li>
<li><a href="https://sap.github.io/ui5-webcomponents/">https://sap.github.io/ui5-webcomponents/</a></li>
<li><a href="https://livebook.manning.com/book/micro-frontends-in-action/">https://livebook.manning.com/book/micro-frontends-in-action/</a></li>
<li><a href="https://caniuse.com/declarative-shadow-dom">https://caniuse.com/declarative-shadow-dom</a></li>
</ul>
</dd>
<dt>[00:56:54] Erwartungen an den Framework-Jungle 2024</dt>
<dd>Die Diskussion ging nahtlos zum Thema Frontend-Frameworks über. Zuerst haben wir darüber gesprochen, ob die Teilnehmer:innen zu dieser Zeit &#8222;FOMO&#8220; (<a href="https://de.wikipedia.org/wiki/Fear_of_missing_out">Fear of missing out</a>) in Bezug auf die aktuellen Frontend Frameworks empfanden. Danach haben wir erörtert, wie viele verschiedene Frameworks tatsächlich in der &#8222;Realität&#8220;, also in Arbeitsprojekten, verwendet wurden. Einige Personen haben ihre Erfahrungen geteilt, wie sie Frameworks oder Bibliotheken wie NPM-Pakete komplett ausgetauscht haben. Wir haben die Vor- und Nachteile der Verwendung von Bibliotheken im Allgemeinen besprochen. Marvin hat in diesem Zusammenhang passenderweise den Link zu einem <a href="https://xkcd.com/2347/">XKCD-Comic über Bibliotheken im Web</a> geteilt.</p>
<ul>
<li><a href="https://workingdraft.de/595/">https://workingdraft.de/595/</a> (HTML over the Wire)</li>
<li><a href="https://workingdraft.de/576/">https://workingdraft.de/576/</a> (Qwik)</li>
<li><a href="https://workingdraft.de/584/">https://workingdraft.de/584/</a> (Solid &#038; Solidstart)</li>
<li><a href="https://workingdraft.de/552/">https://workingdraft.de/552/</a> (Frontend-Development im Jahr 2023)</li>
<li><a href="https://workingdraft.de/405/">https://workingdraft.de/405/</a> (rollup.js)</li>
<li><a href="https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-8/">https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-8/</a></li>
<li><a href="https://vinxi.vercel.app/">https://vinxi.vercel.app/</a></li>
<li><a href="https://github.com/unjs/">https://github.com/unjs/</a></li>
<li><a href="https://workingdraft.de/565/">https://workingdraft.de/565/</a> (Quo Vadis Frontend-Tooling?)</li>
<li><a href="https://socket.dev/blog/when-everything-becomes-too-much">https://socket.dev/blog/when-everything-becomes-too-much</a></li>
</ul>
</dd>
<dt>[01:59:55] Design Systeme</dt>
<dd>Mit einer fulminannten Überleitung von Hans gelangten wir zum Thema Design Systeme. Sowohl in der Live-Diskussion als auch im Chat gingen viele Themen hin und her. Wir sprachen darüber, wer in Projekten für die Instandhaltung von <a href="https://www.produktbezogen.de/bauanleitung-pattern-library-1/">Pattern Libraries</a> verantwortlich ist. Es stellte sich auch heraus, dass es bei dem Thema viel um Kommunikation geht. Die Teilnehmenden nannten Tools wie <a href="https://storybook.js.org/">Storybook,</a> <a href="https://story.to.design/">story.to.design</a>, <a href="https://histoire.dev/">Histoire</a>, <a href="https://www.uxpin.com">UXPin</a> und <a href="https://ladle.dev/">Ladle</a>. Schließlich eröffnete <a href="https://github.com/adventurekateer">Hannah</a> die Diskussion darüber, wer tatsächlich mit &#8222;Design Systemen&#8220; und nicht nur Pattern Libraries im Designbereich, beispielsweise mit <a href="https://www.figma.com/de/">Figma</a>, arbeitete.</p>
<ul>
<li><a href="https://histoire.dev/guide/getting-started.html">https://histoire.dev/guide/getting-started.html</a></li>
<li><a href="https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma">https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma</a></li>
<li><a href="https://story.to.design/">https://story.to.design/</a></li>
<li><a href="https://www.uxpin.com/">https://www.uxpin.com/</a></li>
<li><a href="https://ladle.dev/">https://ladle.dev/</a></li>
<li><a href="https://fractal.build/">https://fractal.build/</a></li>
<li><a href="https://www.youtube.com/watch?v=qtAu1V6v6YQ">https://www.youtube.com/watch?v=qtAu1V6v6YQ</a> (Exploring the Anatomy of Design Systems)</li>
<li><a href="https://esilva.net/sociotechnical/sociotechnical-architecture_why-and-what.html">https://esilva.net/sociotechnical/sociotechnical-architecture_why-and-what.html</a></li>
</ul>
</dd>
</dl>


Willkommen zur 600ten Revision unseres Podcasts, die wir am Sonntag, den 7.
Januar 2024, in Form einer live abgehaltenen Fishbowl-Diskussion mit etwas über
zwanzig Gästen durchgeführt haben. Wir haben…

Willkommen zur 600ten Revision unseres Podcasts, die wir am Sonntag, den 7.
Januar 2024, in Form einer live abgehaltenen Fishbowl-Diskussion mit etwas über
zwanzig Gästen durchgeführt haben. Wir haben dabei über drei verschiedene
Themenblöcke gesprochen, die wir per Voting bestimmt haben:

 1. Web Components
 2. Erwartungen an den Framework-Jungle 2024
 3. Design Systeme

Unsere Teilnehmerschar bestand aus ehemalige Gästen wie z.B. Marvin Hagemeister,
Jens Grochtdreis oder Alexander Lichter, aber auch aus vielen neuen Gesichtern.
Darüber haben wir uns sehr gefreut!


SCHAUNOTIZEN

[00:10:38] WEB COMPONENTS

Wir starteten mit den Web Components. Zunächst ging es darum, ob Web Components
überhaupt „einsatzbereit“ seien. Und wir diskutierten, wie sich Web Components
mit anderen Frontend-Frameworks verbinden lassen. Zum Glück gab es bereits
Artikel darüber, wie Frameworks und „Custom Components“ erfolgreich kombiniert
werden können, wie z.B. der „Custom Components Everywhere„. Besonders spannend
war, dass die Seite Reddit anscheinend teilweise bereits mit Web Components
erstellt wurde. Dies war jedoch noch nicht für alle Benutzer verfügbar – in
diesem Fall half der Inkognito-Modus und das Ausloggen -, aber dann konnten die
Teilnehmer die neue Webseite mit Web Components betrachten. Wir haben natürlich
über den Shadow DOM und die damit einhergehenden Probleme gesprochen. Wenn
jemand noch auf der Suche nach überzeugenden Argumenten für Web Components auf
Management-Ebene war, empfahlen wir das Lesen dieses Web Components Elevator
Pitchs.



 * https://nolanlawson.com/2023/12/30/shadow-dom-and-the-problem-of-encapsulation/
 * https://blog.jim-nielsen.com/2023/html-web-components-an-example/
 * https://custom-elements-everywhere.com/
 * https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/
 * https://gomakethings.com/the-elevator-pitch-for-web-components/
 * https://openui5.org/
 * https://sap.github.io/ui5-webcomponents/
 * https://livebook.manning.com/book/micro-frontends-in-action/
 * https://caniuse.com/declarative-shadow-dom

[00:56:54] ERWARTUNGEN AN DEN FRAMEWORK-JUNGLE 2024

Die Diskussion ging nahtlos zum Thema Frontend-Frameworks über. Zuerst haben wir
darüber gesprochen, ob die Teilnehmer:innen zu dieser Zeit „FOMO“ (Fear of
missing out) in Bezug auf die aktuellen Frontend Frameworks empfanden. Danach
haben wir erörtert, wie viele verschiedene Frameworks tatsächlich in der
„Realität“, also in Arbeitsprojekten, verwendet wurden. Einige Personen haben
ihre Erfahrungen geteilt, wie sie Frameworks oder Bibliotheken wie NPM-Pakete
komplett ausgetauscht haben. Wir haben die Vor- und Nachteile der Verwendung von
Bibliotheken im Allgemeinen besprochen. Marvin hat in diesem Zusammenhang
passenderweise den Link zu einem XKCD-Comic über Bibliotheken im Web geteilt.



 * https://workingdraft.de/595/ (HTML over the Wire)
 * https://workingdraft.de/576/ (Qwik)
 * https://workingdraft.de/584/ (Solid & Solidstart)
 * https://workingdraft.de/552/ (Frontend-Development im Jahr 2023)
 * https://workingdraft.de/405/ (rollup.js)
 * https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-8/
 * https://vinxi.vercel.app/
 * https://github.com/unjs/
 * https://workingdraft.de/565/ (Quo Vadis Frontend-Tooling?)
 * https://socket.dev/blog/when-everything-becomes-too-much

[01:59:55] DESIGN SYSTEME

Mit einer fulminannten Überleitung von Hans gelangten wir zum Thema Design
Systeme. Sowohl in der Live-Diskussion als auch im Chat gingen viele Themen hin
und her. Wir sprachen darüber, wer in Projekten für die Instandhaltung von
Pattern Libraries verantwortlich ist. Es stellte sich auch heraus, dass es bei
dem Thema viel um Kommunikation geht. Die Teilnehmenden nannten Tools wie
Storybook, story.to.design, Histoire, UXPin und Ladle. Schließlich eröffnete
Hannah die Diskussion darüber, wer tatsächlich mit „Design Systemen“ und nicht
nur Pattern Libraries im Designbereich, beispielsweise mit Figma, arbeitete.



 * https://histoire.dev/guide/getting-started.html
 * https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
 * https://story.to.design/
 * https://www.uxpin.com/
 * https://ladle.dev/
 * https://fractal.build/
 * https://www.youtube.com/watch?v=qtAu1V6v6YQ (Exploring the Anatomy of Design
   Systems)
 * https://esilva.net/sociotechnical/sociotechnical-architecture_why-and-what.html

Revision 600: Live

<p>In der letzten Revision vor der großen Jubiläumsfolge wir nochmal heftigst am <a href="https://workingdraft.de/gluecksrad/">Glücksrad</a> gedreht! Ungeplant purzelt aus unserem Zufallsgenerator dabei recht viel SVG-eskes!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:57] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">Das <code>class</code>-Attribut</a></dt>
<dd>Zunächst einmal wollen wir wissen, wie lange es dieses Attribut schon im HTML-Standard gibt. Stellt sich aber heraus, es ist gar nicht so einfach, das herauszufinden! Hans erinnert sich an die Möglichkeit, mit bestimmten <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#attrvalue_6">Attribut-Selektoren</a> nur nach Teilen des Klassennamens suchen zu lassen und so Klassen &#8222;(de-)composable&#8220; zu machen. Dank MDN lernen wir, dass Klassennamen case-sensitiv sind. Wir outen uns als große Fans des <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList"><code>classList</code></a>-DOM-Interfaces. Wir kommen sodann zurück zur Anfangsfrage, da Peter zwischenzeitlich erfolgreich recherchiert hat, seit wann es das Attribut gibt. Wir erfahren, dass es nach dem ersten Proposal von HTML und vor HTML 2.0 noch ein Proposal namens <a href="https://www.w3.org/MarkUp/htmlplus_paper/htmlplus.html">HTML+</a> gab und dass das <code>class</code>-Attribut schon Teil von HTML 2.0 aus 1995 war. Das ganze erscheint uns vorausschauend auf <a href="https://www.w3.org/Style/CSS20/history.html">das 1996 standardisierte CSS</a>.</dd>
<dt>[00:09:19] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style">&lt;style&gt;</a></dt>
<dd>Hans erinnert sich, dass es mal ein <a href="https://stackoverflow.com/a/45692033"><code>scope</code>-Attribut</a> gab, mit dem sich der Wirkungsbereich eines <code>&lt;style&gt;</code>-Elements auf den DOM-Zweig begrenzen ließ, in dem es selbst eingehängt war. Weil aber zu wenig Browser das Attribut implementiert haben (und vermutlich wegen der Erfindung von Shadow-DOM) wurde es später wieder aus dem HTML-Vokabular entfernt. Es schicken sich nun aber als Ersatz die &#8222;Scoped Styles&#8220; in Form der <a href="https://css.oddbird.net/scope/explainer/">@scope-Rule</a> an, die in Chrome und der Safari Technology Preview schon unterstützt werden. Peter hätte gerne die Möglichkeit, so ein Verhalten by default zu aktivieren &#8211; möglicherweise per <a href="https://meiert.com/en/blog/html-customized-built-in-elements/">HTML customized built-ins</a>. Aber die wollte das Webkit-Team nie implementieren und so kann man sie als gescheitert ansehen. Wir schauen uns anschließend noch an, welche Attribute oder Eigenschaften <code>&lt;style&gt;</code>-Element unterstützen. Peter weiß zu berichten, dass es eine per JavaScript zugängliche Eigenschaft namens <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/disabled">.disabled</a> gibt, mit der man einzelne Stylesheets imperativ aktivieren oder deaktivieren kann. Außerdem arbeitet man ganz neu an einem <a href="https://gist.github.com/xiaochengh/fae2b549b3d37454beeb9028a829f4bd#explainer"><code>blocking</code>-Attribut</a>, mit dem man dem Browser z.B. mitteilen kann, dass das Rendern (nicht aber das Parsen) einer Seite so lange ausgesetzt werden soll, bis die mit einem <code>blocking="render"</code> markierte Ressource geladen ist. Wollen könnte man das im Zusammenspiel mit den neuen <a href="https://daverupert.com/2023/05/getting-started-view-transitions/">Multi-Page-View-Transitions</a>.</dd>
<dt>[00:27:26] <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text">SVG Text Positioning</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy"><code>dy</code></a>)</dt>
<dd>Zufällig weiß Schepp, was dieses Attribut macht, weil er für den örtlichen, jährlich stattfindenden Trödelmarkt immer das Stand-Layout mit per JavaScript generiertem SVG erstellt. Und dabei verwendet er das <code>dy</code>-Attribut zu Hauf, um Dinge relativ zur letzten verwendeten Position zu zeichnen. Ein weiteres sehr praktisches Attribut in SVG ist <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lengthAdjust"><code>lengthAdjust</code></a>, mit dem man Text in die Breite einer Box genau einpassen kann.</dd>
<dt>[00:37:32] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style"><code>border-top-style</code></a></dt>
<dd>Schepp meint, hier benutzt er ausschließlich <code>solid</code> oder <code>none</code>. Alle anderen Styles hält er für überflüssig. Peter hält dagegen, dass er gerne die <code>dotted</code>-Variante nutzt, dem Schepp aber <code>dashed</code> vorziehen würde. Hans führt die Property zu dem Thema, dass man mit <code>border</code>-Tricksereien immer <a href="https://nikitahl.com/css-only-tooltip">Tooltip-Pfeile gebaut hat</a>. Und wenn man einen Tooltip-Schatten möchte, der das Pfeilchen mit umfasst, dann nimmt man statt <code>box-shadow</code> besser <code>filter: drop-shadow()</code>, was wiederum nur einen Shortcut für einen <a href="https://schepp.dev/posts/effects-for-the-web/">SVG-Filter</a> darstellt.</dd>
<dt>[00:43:19] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position_value">CSS&#8216; &lt;position&gt;-Datentyp</a></dt>
<dd>Dieser Datentyp besteht aus zwei Positionsangaben (als Keyword wie z.B. <code>center</code>, als absoluter oder als Prozentwert) und wird z.B. in der CSS-Eigenschaft <code>background-position</code> verwendet. Zudem lässt sich seit einigen Jahren vor jede Nicht-Keyword-Längenangaben mit einem&#8230; Keyword die Ausrichtung bestimmen, von der aus sie arbeitet: <code>bottom 12vmin right -6px</code>. Schepp weist zudem noch auf die gerne übersehene Tatsache hin, dass die Positionsangaben nicht nur auf die Position in einem Container einwirkt, sondern sie auch den Ankerpunkt in dem zu positionierenden Objekt verschiebt. Andernfalls könnte ein Objekt nicht gleichzeitig bei einem Wert von 0% links, und bei einem Wert von 100% rechts am Container anliegend positioniert werden &#8211; siehe absolute Positionierung. Zur Verdeutlichung dessen hat er <a href="https://codepen.io/Schepp/pen/QWYBaJO?editors=0100">dieses Codepen</a> erstellt. Wir sind uns außerdem darin einig, dass der Default für background-repeat irgendwie doof ist. Aber das hat ja sogar die CSS Working Group <a href="https://wiki.csswg.org/ideas/mistakes#:~:text=Not%20quite%20a%20mistake%2C%20because%20it%20was%20a%20reasonable%20default%20for%20the%2090s%2C%20but%20it%20would%20be%20more%20helpful%20since%20then%20if%20%60background%2Drepeat%60%20defaulted%20to%20%60no%2Drepeat%60.">selbst erkannt</a>. Am Ende spannen wir den Bogen nochmal zu SVG zurück, weil das keine Hintergrundbilder kennt, oder sie nicht so unterstützt wie HTML und man z.B. für einen vollflächig eingefärbten Hintergrund ein gefärbtes Rechteck über die gesamte SVG-Canvas ziehen muss. Peter weiß noch zu berichten, dass wenn man dem <code>&lt;body&gt;</code>-Element ein Hintergrundbild gibt, dieses <a href="https://www.w3.org/TR/css-backgrounds-3/#body-background">in aller Regel &#8222;nach oben&#8220; ans <code>&lt;html&gt;</code>-Element promoted wird</a> und es daher auch bei komplett leerer Webseite und in der Höhe kollabiertem <code>&lt;body&gt;</code>-Element zu einem vollflächigen Hintergrund kommt.</dd>
<dt>[00:58:08] <a href="https://www.w3.org/TR/css-values-4/#urls">CSS&#8216; &lt;url&gt;-Datentyp</a></dt>
<dd>In die <code>url()</code>-Funktion lässt sich nicht nur eine Bild-URL einbauen, sondern auch Data-URIs. Und welche ist uns da die liebste? Natürlich <a href="https://css-tricks.com/svg-within-css/">Inline-SVG</a>! Hans muss plötzlich an altertümliche Internet-Explorer-Hackereien mit der (deprecateten) <a href="https://schepp.dev/posts/today-the-trident-era-ends/#html-components%3A-attached-behaviors%2C-element-behaviors-%26-default-behaviors"><code>behavior</code>-Eigenschaft</a> und <a href="http://css3pie.com/documentation/q-and-a/">CSS3Pie</a> zurückdenken. Und an die Webseite <a href="http://browserhacks.com/">browserhacks.com</a>. Sodann driften wir in eine Diskussion darüber ab, ob Webentwicklung wohl eher früher oder eher heute komplexer war/ist. Schwer zu sagen. Den Faden wieder aufnehmend, verweist Schepp auf ein <a href="https://www.stefanjudis.com/today-i-learned/custom-properties-dont-work-with-the-url-css-function/">Blogpost von Stefan Judis</a>, das sich damit befasst, dass man in der <code>url()</code>-Funktion keine Custom Properties verwenden kann, was daran liegt, dass der Inhalt von <code>url()</code> einfach nicht eindeutig parsebar ist, was wiederum daran liegt, dass man Inhalte genau so gut mit wie ohne doppelte Anführungszeichen hineinsetzen kann. Ein schöner Spec-Fuckup! Repariert wird das durch die Nachfolger-Funktion <a href="https://drafts.csswg.org/css-values/#urls"><code>src()</code></a>, die im Grunde ein Alias von <code>url()</code> ohne extra Parserregeln ist, die derzeit aber noch in keinem Browser implementiert ist. Dieses Spec-Fuckup entführt uns gedanklich zu den CSS-Pseudoklassen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:empty"><code>:empty</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:blank"><code>:blank</code></a>, die ebenfalls nicht ganz zu Ende gedacht waren.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://en.wikipedia.org/wiki/JScript">JScript</a></dt>
<dd>Microsofts Take von JavaScript</dd>
<dt><a href="https://en.wikipedia.org/wiki/Dynamic_HTML">Dynamic HTML (DHTML)</a></dt>
<dd>Die ersten Gehversuche in dynamisch gescripteten Webseiten</dd>
</dl>
<h3>Anmeldung zur Revision 600 im Online Format</h3>
<dl>
<dt><a href="https://www.meetup.com/de-DE/workingdraft/events/297473467">Hier geht&#8217;s zur Anmeldung auf MeetUp</a></dt>
<dd>Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!</dd>
</dl>


In der letzten Revision vor der großen Jubiläumsfolge wir nochmal heftigst am
Glücksrad gedreht! Ungeplant purzelt aus unserem Zufallsgenerator dabei recht
viel SVG-eskes!


SCHAUNOTIZEN

[00:02:57] D…

In der letzten Revision vor der großen Jubiläumsfolge wir nochmal heftigst am
Glücksrad gedreht! Ungeplant purzelt aus unserem Zufallsgenerator dabei recht
viel SVG-eskes!


SCHAUNOTIZEN

[00:02:57] DAS CLASS-ATTRIBUT

Zunächst einmal wollen wir wissen, wie lange es dieses Attribut schon im
HTML-Standard gibt. Stellt sich aber heraus, es ist gar nicht so einfach, das
herauszufinden! Hans erinnert sich an die Möglichkeit, mit bestimmten
Attribut-Selektoren nur nach Teilen des Klassennamens suchen zu lassen und so
Klassen „(de-)composable“ zu machen. Dank MDN lernen wir, dass Klassennamen
case-sensitiv sind. Wir outen uns als große Fans des classList-DOM-Interfaces.
Wir kommen sodann zurück zur Anfangsfrage, da Peter zwischenzeitlich erfolgreich
recherchiert hat, seit wann es das Attribut gibt. Wir erfahren, dass es nach dem
ersten Proposal von HTML und vor HTML 2.0 noch ein Proposal namens HTML+ gab und
dass das class-Attribut schon Teil von HTML 2.0 aus 1995 war. Das ganze
erscheint uns vorausschauend auf das 1996 standardisierte CSS.

[00:09:19] <STYLE>

Hans erinnert sich, dass es mal ein scope-Attribut gab, mit dem sich der
Wirkungsbereich eines <style>-Elements auf den DOM-Zweig begrenzen ließ, in dem
es selbst eingehängt war. Weil aber zu wenig Browser das Attribut implementiert
haben (und vermutlich wegen der Erfindung von Shadow-DOM) wurde es später wieder
aus dem HTML-Vokabular entfernt. Es schicken sich nun aber als Ersatz die
„Scoped Styles“ in Form der @scope-Rule an, die in Chrome und der Safari
Technology Preview schon unterstützt werden. Peter hätte gerne die Möglichkeit,
so ein Verhalten by default zu aktivieren – möglicherweise per HTML customized
built-ins. Aber die wollte das Webkit-Team nie implementieren und so kann man
sie als gescheitert ansehen. Wir schauen uns anschließend noch an, welche
Attribute oder Eigenschaften <style>-Element unterstützen. Peter weiß zu
berichten, dass es eine per JavaScript zugängliche Eigenschaft namens .disabled
gibt, mit der man einzelne Stylesheets imperativ aktivieren oder deaktivieren
kann. Außerdem arbeitet man ganz neu an einem blocking-Attribut, mit dem man dem
Browser z.B. mitteilen kann, dass das Rendern (nicht aber das Parsen) einer
Seite so lange ausgesetzt werden soll, bis die mit einem blocking="render"
markierte Ressource geladen ist. Wollen könnte man das im Zusammenspiel mit den
neuen Multi-Page-View-Transitions.

[00:27:26] SVG TEXT POSITIONING (DY)

Zufällig weiß Schepp, was dieses Attribut macht, weil er für den örtlichen,
jährlich stattfindenden Trödelmarkt immer das Stand-Layout mit per JavaScript
generiertem SVG erstellt. Und dabei verwendet er das dy-Attribut zu Hauf, um
Dinge relativ zur letzten verwendeten Position zu zeichnen. Ein weiteres sehr
praktisches Attribut in SVG ist lengthAdjust, mit dem man Text in die Breite
einer Box genau einpassen kann.

[00:37:32] BORDER-TOP-STYLE

Schepp meint, hier benutzt er ausschließlich solid oder none. Alle anderen
Styles hält er für überflüssig. Peter hält dagegen, dass er gerne die
dotted-Variante nutzt, dem Schepp aber dashed vorziehen würde. Hans führt die
Property zu dem Thema, dass man mit border-Tricksereien immer Tooltip-Pfeile
gebaut hat. Und wenn man einen Tooltip-Schatten möchte, der das Pfeilchen mit
umfasst, dann nimmt man statt box-shadow besser filter: drop-shadow(), was
wiederum nur einen Shortcut für einen SVG-Filter darstellt.

[00:43:19] CSS‘ <POSITION>-DATENTYP

Dieser Datentyp besteht aus zwei Positionsangaben (als Keyword wie z.B. center,
als absoluter oder als Prozentwert) und wird z.B. in der CSS-Eigenschaft
background-position verwendet. Zudem lässt sich seit einigen Jahren vor jede
Nicht-Keyword-Längenangaben mit einem… Keyword die Ausrichtung bestimmen, von
der aus sie arbeitet: bottom 12vmin right -6px. Schepp weist zudem noch auf die
gerne übersehene Tatsache hin, dass die Positionsangaben nicht nur auf die
Position in einem Container einwirkt, sondern sie auch den Ankerpunkt in dem zu
positionierenden Objekt verschiebt. Andernfalls könnte ein Objekt nicht
gleichzeitig bei einem Wert von 0% links, und bei einem Wert von 100% rechts am
Container anliegend positioniert werden – siehe absolute Positionierung. Zur
Verdeutlichung dessen hat er dieses Codepen erstellt. Wir sind uns außerdem
darin einig, dass der Default für background-repeat irgendwie doof ist. Aber das
hat ja sogar die CSS Working Group selbst erkannt. Am Ende spannen wir den Bogen
nochmal zu SVG zurück, weil das keine Hintergrundbilder kennt, oder sie nicht so
unterstützt wie HTML und man z.B. für einen vollflächig eingefärbten Hintergrund
ein gefärbtes Rechteck über die gesamte SVG-Canvas ziehen muss. Peter weiß noch
zu berichten, dass wenn man dem <body>-Element ein Hintergrundbild gibt, dieses
in aller Regel „nach oben“ ans <html>-Element promoted wird und es daher auch
bei komplett leerer Webseite und in der Höhe kollabiertem <body>-Element zu
einem vollflächigen Hintergrund kommt.

[00:58:08] CSS‘ <URL>-DATENTYP

In die url()-Funktion lässt sich nicht nur eine Bild-URL einbauen, sondern auch
Data-URIs. Und welche ist uns da die liebste? Natürlich Inline-SVG! Hans muss
plötzlich an altertümliche Internet-Explorer-Hackereien mit der (deprecateten)
behavior-Eigenschaft und CSS3Pie zurückdenken. Und an die Webseite
browserhacks.com. Sodann driften wir in eine Diskussion darüber ab, ob
Webentwicklung wohl eher früher oder eher heute komplexer war/ist. Schwer zu
sagen. Den Faden wieder aufnehmend, verweist Schepp auf ein Blogpost von Stefan
Judis, das sich damit befasst, dass man in der url()-Funktion keine Custom
Properties verwenden kann, was daran liegt, dass der Inhalt von url() einfach
nicht eindeutig parsebar ist, was wiederum daran liegt, dass man Inhalte genau
so gut mit wie ohne doppelte Anführungszeichen hineinsetzen kann. Ein schöner
Spec-Fuckup! Repariert wird das durch die Nachfolger-Funktion src(), die im
Grunde ein Alias von url() ohne extra Parserregeln ist, die derzeit aber noch in
keinem Browser implementiert ist. Dieses Spec-Fuckup entführt uns gedanklich zu
den CSS-Pseudoklassen :empty und :blank, die ebenfalls nicht ganz zu Ende
gedacht waren.


KEINE SCHAUNOTIZEN

JSCRIPT

Microsofts Take von JavaScript

DYNAMIC HTML (DHTML)

Die ersten Gehversuche in dynamisch gescripteten Webseiten


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

Revision 599: Glücksrad mit reichlich SVG und CSS-Datentypen!

<p>Seit nunmehr gut vier Jahren unterstützt uns Autorin, Sprecherin und Radiomoderatorin <a href="https://www.xing.com/profile/Sabine_Piel/">Sabine</a> bei der Post-Produktion unserer Podcastfolgen. Das hat nicht nur für lang ersehnte Entlastung bei uns Hosts gesorgt, sondern auch die Qualität unseres Audio deutlich nach oben geschraubt. Sabine gibt uns nämlich Tipps für besseres Sprechen und nimmt sich auch immer die Zeit, jede Folge im Detail abzuhören und überflüssige Pausen und &#8222;Ähms&#8220; herauszuschneiden. </p>
<p>Dafür von uns tausend Dank an Dich, Sabine!🙏🥰 Und ebenso tausend Dank an Euch Hörer*innen und Sponsor*innen, dass wir durch Euch die notwendigen finanziellen Mittel dafür haben ❤️. </p>
<p>Sabines akribisches Durchhören der Episoden hat außerdem noch einen tollen Nebeneffekt: Wir bekommen am Ende eines jeden Jahres nun immer Outtakes, die sie über das Jahr verteilt sammelt und uns und Euch als Weihnachtsgeschenk zusammenschnürt 🎄🎁. Und die sind immer fantastisch &#8211; hört selbst und rutscht anschließend gut!✨</p>


Seit nunmehr gut vier Jahren unterstützt uns Autorin, Sprecherin und
Radiomoderatorin Sabine bei der Post-Produktion unserer Podcastfolgen. Das hat
nicht nur für lang ersehnte Entlastung bei uns Hosts…

Seit nunmehr gut vier Jahren unterstützt uns Autorin, Sprecherin und
Radiomoderatorin Sabine bei der Post-Produktion unserer Podcastfolgen. Das hat
nicht nur für lang ersehnte Entlastung bei uns Hosts gesorgt, sondern auch die
Qualität unseres Audio deutlich nach oben geschraubt. Sabine gibt uns nämlich
Tipps für besseres Sprechen und nimmt sich auch immer die Zeit, jede Folge im
Detail abzuhören und überflüssige Pausen und „Ähms“ herauszuschneiden.

Dafür von uns tausend Dank an Dich, Sabine!🙏🥰 Und ebenso tausend Dank an Euch
Hörer*innen und Sponsor*innen, dass wir durch Euch die notwendigen finanziellen
Mittel dafür haben ❤️.

Sabines akribisches Durchhören der Episoden hat außerdem noch einen tollen
Nebeneffekt: Wir bekommen am Ende eines jeden Jahres nun immer Outtakes, die sie
über das Jahr verteilt sammelt und uns und Euch als Weihnachtsgeschenk
zusammenschnürt 🎄🎁. Und die sind immer fantastisch – hört selbst und rutscht
anschließend gut!✨

Outtakes 2023

<p>In der jüngsten Ausgabe erörtern Hans und Vanessa das komplexe Thema &#8222;Onboarding&#8220;. Sie knüpfen an ihre frühere Diskussion (Link siehe unten) über das Einstellen von Webentwickler:innen an und bieten wertvolle Einblicke in die verschiedenen Aspekte und Herausforderungen des Onboarding-Prozesses.</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:51] Erfolgreiches Onboarding – Einblicke mit Hans &amp; Vanessa</dt>
<dd>Zunächst beleuchten Vanessa und Hans die Bedeutung einer gut durchdachten Checkliste, die den Übergang für neue Teammitglieder erleichtern soll. Schon vor dem ersten Arbeitstag, im Rahmen des Preboardings, können wichtige Grundlagen gelegt werden. Dazu gibt praktische Tipps zur Bestellung und Einrichtung von Laptops sowie zum Einrichten notwendiger Zugänge.</p>
<p>Ein zentraler Punkt ist die Vermittlung von implizitem Wissen, das für die Arbeit mit jeder Codebasis unerlässlich ist. Die Schaffung verständlicher Readme-Dateien und Troubleshooting-Dokumentationen ist dabei ein Schlüssel zum Erfolg. Hans und Vanessa diskutieren auch über die täglichen Routinen und Prozesse wie Git, Ticketing, Code Reviews und Testing, die für die Aufrechterhaltung der Codequalität und eine effektive Teamarbeit entscheidend sind.</p>
<p>Der erste Tag des Onboardings wird als entscheidend für den weiteren Verlauf der Einarbeitung hervorgehoben, ebenso wie die Einführung von Mentor- oder Buddy-Programmen, die neuen Teammitgliedern als Orientierungshilfe dienen. Die Bedeutung regelmäßiger Feedback-Gespräche, insbesondere zur Halbzeit der Probezeit, wird unterstrichen, um den Fortschritt zu bewerten und konstruktives Feedback zu liefern.</p>
<p>Darüber hinaus erläutern sie die Wichtigkeit, den neuen Entwickler:innen eine Übersicht über Karrierepfade im Unternehmen zu geben. Sie diskutieren, wie automatisierte Onboarding-Prozesse dazu beitragen können, die Einarbeitungsphase effizienter zu gestalten. Dabei gehen sie auch darauf ein, wie viel Onboarding verschiedene Personen gebrauchen könnten. Brauchen z.B. Junior Developer mehr Onboarding als Senior Developer? Abschließend wird die Bedeutung hervorgehoben, das eigene Produkt aus der Nutzerperspektive zu verstehen und zu erleben, was ein tiefgreifendes Verständnis für die Arbeit der Entwickler:innen fördert.</dd>
</dl>
<h3>Ähnliche Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/593/">Revision 593: Webentwickler:innen erfolgreich einstellen – Einblicke mit Hans &amp; Vanessa </a></li>
</ul>
<h3>Anmeldung zur Revision 600 im Online Format</h3>
<dl>
<dt><a href="https://www.meetup.com/de-DE/workingdraft/events/297473467">Hier geht&#8217;s zur Anmeldung auf MeetUp</a></dt>
<dd>Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!</dd>
</dl>


In der jüngsten Ausgabe erörtern Hans und Vanessa das komplexe Thema
„Onboarding“. Sie knüpfen an ihre frühere Diskussion (Link siehe unten) über das
Einstellen von Webentwickler:innen an und bieten w…

In der jüngsten Ausgabe erörtern Hans und Vanessa das komplexe Thema
„Onboarding“. Sie knüpfen an ihre frühere Diskussion (Link siehe unten) über das
Einstellen von Webentwickler:innen an und bieten wertvolle Einblicke in die
verschiedenen Aspekte und Herausforderungen des Onboarding-Prozesses.


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:51] ERFOLGREICHES ONBOARDING – EINBLICKE MIT HANS & VANESSA

Zunächst beleuchten Vanessa und Hans die Bedeutung einer gut durchdachten
Checkliste, die den Übergang für neue Teammitglieder erleichtern soll. Schon vor
dem ersten Arbeitstag, im Rahmen des Preboardings, können wichtige Grundlagen
gelegt werden. Dazu gibt praktische Tipps zur Bestellung und Einrichtung von
Laptops sowie zum Einrichten notwendiger Zugänge.



Ein zentraler Punkt ist die Vermittlung von implizitem Wissen, das für die
Arbeit mit jeder Codebasis unerlässlich ist. Die Schaffung verständlicher
Readme-Dateien und Troubleshooting-Dokumentationen ist dabei ein Schlüssel zum
Erfolg. Hans und Vanessa diskutieren auch über die täglichen Routinen und
Prozesse wie Git, Ticketing, Code Reviews und Testing, die für die
Aufrechterhaltung der Codequalität und eine effektive Teamarbeit entscheidend
sind.

Der erste Tag des Onboardings wird als entscheidend für den weiteren Verlauf der
Einarbeitung hervorgehoben, ebenso wie die Einführung von Mentor- oder
Buddy-Programmen, die neuen Teammitgliedern als Orientierungshilfe dienen. Die
Bedeutung regelmäßiger Feedback-Gespräche, insbesondere zur Halbzeit der
Probezeit, wird unterstrichen, um den Fortschritt zu bewerten und konstruktives
Feedback zu liefern.

Darüber hinaus erläutern sie die Wichtigkeit, den neuen Entwickler:innen eine
Übersicht über Karrierepfade im Unternehmen zu geben. Sie diskutieren, wie
automatisierte Onboarding-Prozesse dazu beitragen können, die Einarbeitungsphase
effizienter zu gestalten. Dabei gehen sie auch darauf ein, wie viel Onboarding
verschiedene Personen gebrauchen könnten. Brauchen z.B. Junior Developer mehr
Onboarding als Senior Developer? Abschließend wird die Bedeutung hervorgehoben,
das eigene Produkt aus der Nutzerperspektive zu verstehen und zu erleben, was
ein tiefgreifendes Verständnis für die Arbeit der Entwickler:innen fördert.


ÄHNLICHE REVISIONEN

 * Revision 593: Webentwickler:innen erfolgreich einstellen – Einblicke mit Hans
   & Vanessa


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

Revision 598: Erfolgreiches Onboarding – Einblicke mit Hans & Vanessa

<p>Diverse Release-Ankündigungen des Apple-Teams stellten für Peter und Schepp den Anlass, zu schauen, was sich bei Team WebKit so tut. Und das ist eine ganze Menge! Deshalb haben wir es auch nicht in eine Revision quetschen können, sondern sie benötigten derer zwei. Wir stützen uns dabei auf die Release-Notes von <a href="https://webkit.org/blog/14445/webkit-features-in-safari-17-0/">Safari 17</a> und <a href="https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes">17.2 Beta</a> sowie den Safari Technology Previews <a href="https://webkit.org/blog/14435/release-notes-for-safari-technology-preview-178/">178</a>, <a href="https://webkit.org/blog/14664/release-notes-for-safari-technology-preview-180/">180</a> und <a href="https://webkit.org/blog/14721/release-notes-for-safari-technology-preview-181/">181</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:49] <a href="https://developer.mozilla.org/en-US/docs/Web/API/CookieStore">Die Cookie Store API</a></dt>
<dd>Die Cookie Store API erhält nun auch in Safari Einzug und verbessert die Developer Experience in einem lange vernachlässigten Bereich: Dem Umgang mit Cookies. Zuvor gab es ja nur <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie"><code>document.cookie</code></a> für den Zugriff auf selbige, wobei das Setzen von Cookies darüber noch gerade so okay war, aber beim Auslesen alle Cookies zusammen in einem großen zusammengemantschten String herauskamen, den man im Anschluss selber parsen musste. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1475599">Fehlt nun noch Firefox</a>, auf dass alle Browser die neue API unterstützen. Peter verweist auf einen Edgecase, bei dem Chrome in der alten &#8222;API&#8220; <code>document.cookie</code> jegliche Daten, die nicht UTF-8-formatiert sind stillschweigend fallen lässt. <a href="https://github.com/WICG/cookie-store/issues/189">Hier herrscht(e) wohl beim neuen Standard noch Unklarheit, ob man Dinge hier ebenso handhaben möchte, oder nicht.</a> Peter kommt in dme Zuge auf das <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter">Intl.Segmenter-Objekt</a> zu sprechen, das für das Arbeiten mit erweiterten Zeichensätzen und auch Emojis gedacht ist, aber leider nicht vom Firefox unterstützt wird.</dd>
<dt>[00:10:24] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search">Das <code>&lt;search&gt;</code>-Element</a></dt>
<dd>Das neue <code>&lt;search&gt;</code>-Element dient wie damals das <code>&lt;main&gt;</code>-Element als syntaktischer Zucker, um eine passende <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">Landmark/ARIA-Role</a> implizit ins Element einzubacken. Dass das sinnvoll ist, <a href="https://almanac.httparchive.org/en/2022/accessibility#landmarks">belegt eindrucksvoll der Web Almanac 2022</a>, der zeigt, dass passende Elemente viel öfter genutzt werden als die dazugehörigen <code>role</code>-Attribute.</dd>
<dt>[00:25:00] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a></dt>
<dd>Hinsichtlich der nun auch in Safari eingebauten Popover API verweisen wir auf die <a href="https://workingdraft.de/585/">Revision 585</a>.</dd>
<dt>[00:26:30] <a href="https://developer.chrome.com/blog/hr-in-select/"><code>&lt;hr&gt;</code>s in <code>&lt;select&gt;</code>s</a></dt>
<dd>Für eine übersichtlichere Strukturierung von <code>&lt;select&gt;</code>s erlauben es Safari und Chrome nun, <code>&lt;hr&gt;</code>s unter die <code>&lt;option&gt;</code>&#8211; und <code>&lt;optgroup&gt;</code>-Elemente zu mischen. Peter und Schepp testen in dem Zuge, was Browser mit unzulässigen HTML-Elementen in <code>&lt;select&gt;</code>s machen.</dd>
<dt>[00:33:48] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust"><code>font-size-adjust: from-font</code></a></dt>
<dd>Anders als von Schepp vermutet, dient dieser Wert dazu, ein Verrutschen von Inhalt zu verhindern, wenn eine Schrift aus dem Font-Stack nicht geladen werden kann und dann eine Fallback-Schrift mit ganz anderen Metriken genutzt wird. Mit code&gt;font-size-adjust: from-font werden diese Werte aus der ersten verfügbaren Schrift abgeleitet.</dd>
<dt>[00:37:46] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character"><code>hyphenate-character</code></a></dt>
<dd>Ab jetzt könnt Ihr angeben, mit Hilfe welchen Zeichens Worttrennungen stattfinden mögen. Da uns der Usecase nicht so ganz klar ist, forschen wir live ein wenig dazu und lernen, dass es das <a href="https://de.wikipedia.org/wiki/Kanadische_Silbenschrift">Canadian Syllabics</a> gibt, das wie ein Gleichzeichen aussieht.</dd>
<dt>[00:40:20] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style"><code>@counter-style</code></a></dt>
<dd>Mit der <code>@counter-style</code>-Rule lässt sich eine Art visuelles Template für Aufzählungen anlegen, das man anschließend per <code>list-style</code>-Angabe referenzieren kann. Darüber kommen wir auch auf die ähnlich heißenden <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS Counter</a> zu sprechen, mit denen man in CSS hochzählen und die aktuelle Zahl jeweils ausgeben kann. Wir kommen darauf zu sprechen, dass man CSS Counters und deren <code>counter-reset</code>-Eigenschaft zusammen mit <code>content</code> <a href="https://forsethingvild.medium.com/lea-verous-dynamic-css-secrets-takeaways-d281218de60a#:~:text=foo)%20/%201%25)%20%3B-,Takeaway%20%237,-%3A%20content%20only%20accepts">als eine Art Steigbügelhalter zur Ausgabe von numerischen Custom Properties verwenden kann</a>. Außerdem erzählt Schepp von seinem irritierenden Erlebnis bei der Kombination von CSS Countern und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain"><code>contain: style</code></a> &#8211; jedoch alles <a href="https://drafts.csswg.org/css-contain-2/#containment-style">Spec-konform</a>! Oder dass es (noch) keine gute Idee ist, ein <code>contain: size</code> oder <code>contain: strict</code> mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio"><code>aspect-ratio</code></a> zu kombinieren. Stattdessen nutzt Schepp nun lieber <a href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris">geinlinedte SVG-Platzhalter</a> als eine Art Spacer-GIF 2.0.</dd>
<dt>[00:46:10] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents"><code>display: contents</code></a></dt>
<dd>Wir freuen uns darüber, dass mit Safari alle (und bekannten) verbliebenen Accessibility-Probleme von <code>display: contents</code> behoben sind! Peter findet, dass dieses Feature gut zeigt, wie irgendwas konzeptionell super einfach sein kann, aber in der Implementierung dann das genaue Gegenteil ist. Ein Beispiel ist, was passiert, wenn man <code>display: contents</code> auf ein sogenanntes &#8222;Replaced Element&#8220;, also ein Bild oder ein Select anwendet. <a href="https://drafts.csswg.org/css-display/#unbox">Die CSS Spezifikation hat deshalb eigenen Block mit Sonderregeln für alle möglichen Elemente, die dort als &#8222;Unusual Elements&#8220; geführt werden</a>.</dd>
<dt>[00:51:07] <a href="#">Das <code>scripting</code> CSS media feature</a></dt>
<dd>Nun lassen sich auch Media Queries und <code>media</code>-Attribute für den Fall verdrahten, dass ein Endgerät keine Scripte versteht oder ausführen kann, via <code>scripting: none</code>. Neben <code>scripting: enabled</code> gäbe es darüberhinaus laut Spec noch die Variante <code>scripting: initial-only</code>, für den Fall dass ein Client nur zu Beginn einmal Scripte ausführt und dann nicht mehr. Allerdings ist diese Definition reichlich unscharf und wird daher noch von keinem Browser unterstützt.</dd>
<dt>[01:02:55] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set"><code>image-set()</code> aktualisiert und Präfix-frei</a></dt>
<dd>Die gepräfixte CSS <code>-webkit-image-set()</code>-Funktion schlummert in WebKit (und auch Chrome) seit mit dem iPhone 4 Retina-Bildschirme das Licht der Welt erblickt haben. Diese ehemals Apple-eigene Erfindung wurde derweil in den CSS-Standard überführt und dabei um einige weitere Fähigkeiten wie File-Format-Angaben erweitert. Safaris Implementation wurde nun entsprechend aktualisiert und in dem Zuge auch gleich von seinem Präfix befreit. Über den <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1696314">Bug-Tracker von Firefox</a> stößt Peter darauf, dass man sich eigene <code>cursor</code> mit Gradienten bauen kann.</dd>
<dt>[01:05:03] <a href="https://de.wikipedia.org/wiki/JPEG_XL">JPEG XL</a></dt>
<dd>Als erster Browser hat Safari nun standardmäßig auf den neusten Apple-Betriebssystemen JPEG XL aktiviert (und AV1). Schepp findet es bedauerlich, dass Chrome JPEG XL bis vor ein paar Monaten zumindest hinter Flags eingebaut hatte, <a href="https://www.golem.de/news/bildformat-google-will-jpeg-xl-aus-chrome-entfernen-2210-169355.html">man dort aber aus fadenscheinigen Gründen entschied, es wieder herauszuwerfen</a>. Von Jason Grigsby gab es vor ein paar Monaten <a href="https://cloudfour.com/thinks/on-container-queries-responsive-images-and-jpeg-xl/">einen spannenden Artikel dazu</a>, wie JPEG XL mit seinen einzigartigen Eigenschaften das Dilemma mit der Kombination von responsiven Bildern und Container Queries lösen könnte. Etwas abgemildert wird das Problem dadurch dass zumindest lazy ladende Bilder <a href="https://html.spec.whatwg.org/multipage/images.html#:~:text=In%20this%20case%2C%20the%20sizes%20attribute%20can%20use%20the%20auto%20keyword">zukünftig mit einem <code>sizes="auto"</code> ausgerüstet werden können</a>.</dd>
<dt>[01:21:55] &#8222;Add to Dock&#8220;-Funktion auf Desktop</dt>
<dd>Nun bietet auch der Desktop-Safari die Möglichkeit, WebApps wie normale Apps ins Dock zu installieren. Schepp zweifelt allerdings an der Durchsetzungsfähigkeit installierbarer WebApps sofern diese nicht aus einem AppStore kommen. Peter hingegen weiß aus seinem Umfeld zu berichten, dass WebApps durchaus von nicht-technischen Anwender*innen verstanden und genutzt werden. Durch seine Reisetätigkeit ist Peter zudem ein großer Fan von WebApps. Schepp weist auf <a href="https://www.theverge.com/23994174/epic-google-trial-jury-verdict-monopoly-google-play">die juristischen Auseinandersetzungen von Epic mit Apple und Google hinsichtlich des Payment-Plattform-Zwangs hin</a>, die es mit einer WebApp so nie geben würde.</dd>
<dt>[01:29:26] <a href="https://v8.dev/features/regexp-v-flag">RegExp: <code>v</code>-Flag</a></dt>
<dd>Analog zum Wacken-V meint das <code>v</code>-Flag eigentlich ein u für *U*nicode-Support.</dd>
<dt>[01:34:50] <a href="https://github.com/tc39/proposal-set-methods">EcmaScript Set-Operationen</a></dt>
<dd>Endlich können wir zwei Sets miteinander vergleichen und zum Beispiel die Überschneidungen oder auch die Unterschiede beider herausarbeiten, in Form von Intersection, Union und Difference. Ein bisschen so wie Schepp das von Vektorzeichenprogrammen und deren Shapes kennt. Peter hätte jetzt gerne noch <a href="https://github.com/tc39/proposal-record-tuple">die derzeit im Entwurf befindlichen Records und Tuples</a>, mit Hilfe derer er die Möglichkeit erhält, zwei verschiedene Objekte auf Inhaltsgleichheit zu prüfen. Schepp weiß zu berichten, dass es so etwas zumindest für den Vergleich zweier DOM-Nodes gibt, in Form der <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode"><code>Node.isEqualNode()</code>-Methode</a>. Wie diese bei dem Vergleich vorgeht, <a href="https://dom.spec.whatwg.org/#concept-node-equals">erfährt man in der HTML-Spec</a>. Schepps Idee, DOM-Nodes für sein Vorhaben zweckzuentfremden bezeichnet er als &#8222;kriminell&#8220; 😃</dd>
<dt>[01:41:35] <a href="https://webkit.org/blog/14445/webkit-features-in-safari-17-0/#:~:text=Responsive%20Design%20Mode.-,Simulators,-You%20can%20also">iOS-Simulatorenin den Safari Devtools</a></dt>
<dd>Safari bietet nun ganz neu die Möglichkeit, eine Webseite aus den Devtools heraus in einem echten iOS-Simulator zu testen. Allerdings muss man dafür einen solchen Arsch voll Zusatzsoftware wie z.B. Xcode installieren, dass dafür die SSD von Schepps Mac Mini nicht mehr ausreicht. Und so endet diese Revision denn auch damit, dass Peter und Schepp noch eine Weile über Software, Betriebssysteme und Hardware diskutieren.</dd>
</dl>
<h3>Anmeldung zur Revision 600 im Online Format</h3>
<dl>
<dt><a href="https://www.meetup.com/de-DE/workingdraft/events/297473467">Hier geht&#8217;s zur Anmeldung auf MeetUp</a></dt>
<dd>Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!</dd>
</dl>


Diverse Release-Ankündigungen des Apple-Teams stellten für Peter und Schepp den
Anlass, zu schauen, was sich bei Team WebKit so tut. Und das ist eine ganze
Menge! Deshalb haben wir es auch nicht in ei…

Diverse Release-Ankündigungen des Apple-Teams stellten für Peter und Schepp den
Anlass, zu schauen, was sich bei Team WebKit so tut. Und das ist eine ganze
Menge! Deshalb haben wir es auch nicht in eine Revision quetschen können,
sondern sie benötigten derer zwei. Wir stützen uns dabei auf die Release-Notes
von Safari 17 und 17.2 Beta sowie den Safari Technology Previews 178, 180 und
181.


SCHAUNOTIZEN

[00:01:49] DIE COOKIE STORE API

Die Cookie Store API erhält nun auch in Safari Einzug und verbessert die
Developer Experience in einem lange vernachlässigten Bereich: Dem Umgang mit
Cookies. Zuvor gab es ja nur document.cookie für den Zugriff auf selbige, wobei
das Setzen von Cookies darüber noch gerade so okay war, aber beim Auslesen alle
Cookies zusammen in einem großen zusammengemantschten String herauskamen, den
man im Anschluss selber parsen musste. Fehlt nun noch Firefox, auf dass alle
Browser die neue API unterstützen. Peter verweist auf einen Edgecase, bei dem
Chrome in der alten „API“ document.cookie jegliche Daten, die nicht
UTF-8-formatiert sind stillschweigend fallen lässt. Hier herrscht(e) wohl beim
neuen Standard noch Unklarheit, ob man Dinge hier ebenso handhaben möchte, oder
nicht. Peter kommt in dme Zuge auf das Intl.Segmenter-Objekt zu sprechen, das
für das Arbeiten mit erweiterten Zeichensätzen und auch Emojis gedacht ist, aber
leider nicht vom Firefox unterstützt wird.

[00:10:24] DAS <SEARCH>-ELEMENT

Das neue <search>-Element dient wie damals das <main>-Element als syntaktischer
Zucker, um eine passende Landmark/ARIA-Role implizit ins Element einzubacken.
Dass das sinnvoll ist, belegt eindrucksvoll der Web Almanac 2022, der zeigt,
dass passende Elemente viel öfter genutzt werden als die dazugehörigen
role-Attribute.

[00:25:00] POPOVER API

Hinsichtlich der nun auch in Safari eingebauten Popover API verweisen wir auf
die Revision 585.

[00:26:30] <HR>S IN <SELECT>S

Für eine übersichtlichere Strukturierung von <select>s erlauben es Safari und
Chrome nun, <hr>s unter die <option>– und <optgroup>-Elemente zu mischen. Peter
und Schepp testen in dem Zuge, was Browser mit unzulässigen HTML-Elementen in
<select>s machen.

[00:33:48] FONT-SIZE-ADJUST: FROM-FONT

Anders als von Schepp vermutet, dient dieser Wert dazu, ein Verrutschen von
Inhalt zu verhindern, wenn eine Schrift aus dem Font-Stack nicht geladen werden
kann und dann eine Fallback-Schrift mit ganz anderen Metriken genutzt wird. Mit
code>font-size-adjust: from-font werden diese Werte aus der ersten verfügbaren
Schrift abgeleitet.

[00:37:46] HYPHENATE-CHARACTER

Ab jetzt könnt Ihr angeben, mit Hilfe welchen Zeichens Worttrennungen
stattfinden mögen. Da uns der Usecase nicht so ganz klar ist, forschen wir live
ein wenig dazu und lernen, dass es das Canadian Syllabics gibt, das wie ein
Gleichzeichen aussieht.

[00:40:20] @COUNTER-STYLE

Mit der @counter-style-Rule lässt sich eine Art visuelles Template für
Aufzählungen anlegen, das man anschließend per list-style-Angabe referenzieren
kann. Darüber kommen wir auch auf die ähnlich heißenden CSS Counter zu sprechen,
mit denen man in CSS hochzählen und die aktuelle Zahl jeweils ausgeben kann. Wir
kommen darauf zu sprechen, dass man CSS Counters und deren
counter-reset-Eigenschaft zusammen mit content als eine Art Steigbügelhalter zur
Ausgabe von numerischen Custom Properties verwenden kann. Außerdem erzählt
Schepp von seinem irritierenden Erlebnis bei der Kombination von CSS Countern
und contain: style – jedoch alles Spec-konform! Oder dass es (noch) keine gute
Idee ist, ein contain: size oder contain: strict mit aspect-ratio zu
kombinieren. Stattdessen nutzt Schepp nun lieber geinlinedte SVG-Platzhalter als
eine Art Spacer-GIF 2.0.

[00:46:10] DISPLAY: CONTENTS

Wir freuen uns darüber, dass mit Safari alle (und bekannten) verbliebenen
Accessibility-Probleme von display: contents behoben sind! Peter findet, dass
dieses Feature gut zeigt, wie irgendwas konzeptionell super einfach sein kann,
aber in der Implementierung dann das genaue Gegenteil ist. Ein Beispiel ist, was
passiert, wenn man display: contents auf ein sogenanntes „Replaced Element“,
also ein Bild oder ein Select anwendet. Die CSS Spezifikation hat deshalb
eigenen Block mit Sonderregeln für alle möglichen Elemente, die dort als
„Unusual Elements“ geführt werden.

[00:51:07] DAS SCRIPTING CSS MEDIA FEATURE

Nun lassen sich auch Media Queries und media-Attribute für den Fall verdrahten,
dass ein Endgerät keine Scripte versteht oder ausführen kann, via scripting:
none. Neben scripting: enabled gäbe es darüberhinaus laut Spec noch die Variante
scripting: initial-only, für den Fall dass ein Client nur zu Beginn einmal
Scripte ausführt und dann nicht mehr. Allerdings ist diese Definition reichlich
unscharf und wird daher noch von keinem Browser unterstützt.

[01:02:55] IMAGE-SET() AKTUALISIERT UND PRÄFIX-FREI

Die gepräfixte CSS -webkit-image-set()-Funktion schlummert in WebKit (und auch
Chrome) seit mit dem iPhone 4 Retina-Bildschirme das Licht der Welt erblickt
haben. Diese ehemals Apple-eigene Erfindung wurde derweil in den CSS-Standard
überführt und dabei um einige weitere Fähigkeiten wie File-Format-Angaben
erweitert. Safaris Implementation wurde nun entsprechend aktualisiert und in dem
Zuge auch gleich von seinem Präfix befreit. Über den Bug-Tracker von Firefox
stößt Peter darauf, dass man sich eigene cursor mit Gradienten bauen kann.

[01:05:03] JPEG XL

Als erster Browser hat Safari nun standardmäßig auf den neusten
Apple-Betriebssystemen JPEG XL aktiviert (und AV1). Schepp findet es
bedauerlich, dass Chrome JPEG XL bis vor ein paar Monaten zumindest hinter Flags
eingebaut hatte, man dort aber aus fadenscheinigen Gründen entschied, es wieder
herauszuwerfen. Von Jason Grigsby gab es vor ein paar Monaten einen spannenden
Artikel dazu, wie JPEG XL mit seinen einzigartigen Eigenschaften das Dilemma mit
der Kombination von responsiven Bildern und Container Queries lösen könnte.
Etwas abgemildert wird das Problem dadurch dass zumindest lazy ladende Bilder
zukünftig mit einem sizes="auto" ausgerüstet werden können.

[01:21:55] „ADD TO DOCK“-FUNKTION AUF DESKTOP

Nun bietet auch der Desktop-Safari die Möglichkeit, WebApps wie normale Apps ins
Dock zu installieren. Schepp zweifelt allerdings an der Durchsetzungsfähigkeit
installierbarer WebApps sofern diese nicht aus einem AppStore kommen. Peter
hingegen weiß aus seinem Umfeld zu berichten, dass WebApps durchaus von
nicht-technischen Anwender*innen verstanden und genutzt werden. Durch seine
Reisetätigkeit ist Peter zudem ein großer Fan von WebApps. Schepp weist auf die
juristischen Auseinandersetzungen von Epic mit Apple und Google hinsichtlich des
Payment-Plattform-Zwangs hin, die es mit einer WebApp so nie geben würde.

[01:29:26] REGEXP: V-FLAG

Analog zum Wacken-V meint das v-Flag eigentlich ein u für *U*nicode-Support.

[01:34:50] ECMASCRIPT SET-OPERATIONEN

Endlich können wir zwei Sets miteinander vergleichen und zum Beispiel die
Überschneidungen oder auch die Unterschiede beider herausarbeiten, in Form von
Intersection, Union und Difference. Ein bisschen so wie Schepp das von
Vektorzeichenprogrammen und deren Shapes kennt. Peter hätte jetzt gerne noch die
derzeit im Entwurf befindlichen Records und Tuples, mit Hilfe derer er die
Möglichkeit erhält, zwei verschiedene Objekte auf Inhaltsgleichheit zu prüfen.
Schepp weiß zu berichten, dass es so etwas zumindest für den Vergleich zweier
DOM-Nodes gibt, in Form der Node.isEqualNode()-Methode. Wie diese bei dem
Vergleich vorgeht, erfährt man in der HTML-Spec. Schepps Idee, DOM-Nodes für
sein Vorhaben zweckzuentfremden bezeichnet er als „kriminell“ 😃

[01:41:35] IOS-SIMULATORENIN DEN SAFARI DEVTOOLS

Safari bietet nun ganz neu die Möglichkeit, eine Webseite aus den Devtools
heraus in einem echten iOS-Simulator zu testen. Allerdings muss man dafür einen
solchen Arsch voll Zusatzsoftware wie z.B. Xcode installieren, dass dafür die
SSD von Schepps Mac Mini nicht mehr ausreicht. Und so endet diese Revision denn
auch damit, dass Peter und Schepp noch eine Weile über Software, Betriebssysteme
und Hardware diskutieren.


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

Revision 597: Neues in Safari, Teil 2 von 2

<p>Diverse Release-Ankündigungen des Apple-Teams stellten für Peter und Schepp den Anlass, zu schauen, was sich bei Team WebKit so tut. Und das ist eine ganze Menge! Deshalb haben wir es auch nicht in eine Revision quetschen können, sondern sie benötigten derer zwei. Wir stützen uns dabei auf die Release-Notes von <a href="https://webkit.org/blog/14445/webkit-features-in-safari-17-0/">Safari 17</a> und <a href="https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes">17.2 Beta</a> sowie den Safari Technology Previews <a href="https://webkit.org/blog/14435/release-notes-for-safari-technology-preview-178/">178</a>, <a href="https://webkit.org/blog/14664/release-notes-for-safari-technology-preview-180/">180</a> und <a href="https://webkit.org/blog/14721/release-notes-for-safari-technology-preview-181/">181</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:40] <a href="https://github.com/tc39/proposal-import-attributes">Import Attributes</a></dt>
<dd>Auch Safari unterstützt nun Import Attributes, mit Hilfe derer sich etwa JSON oder CSS nativ in JavaScript importieren lässt. Wir sprechen über das dazu genutzte Keyword <code>with</code>, das innerhalb von ES Modules <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">eine Umwidmung erfahren hat</a>. Chrome muss neben <code>with</code> wohl für alle Ewigkeit auch das Alias <a href="https://chromestatus.com/feature/5765269513306112"><code>assert</code></a> unterstützen, weil man etwas voreilig mit dem Zurverfügungstellen des Features war. Aus Gründen kommen wir auf das <a href="https://de.wikipedia.org/wiki/Hochstift_Osnabr%C3%BCck">Hochstift Osnabrück</a> &#8211; fragt nicht.</dd>
<dt>[00:17:26] <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority">Priority Hints</a></dt>
<dd>Safari unterstützt nun das <code>fetchpriority</code>-Attribut, das mit den Werten <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#fetch-priority-attributes"><code>low</code>, <code>high</code> und <code>auto</code></a> befüttert werden kann. Und das bedeutet, auch in Safari kann man sich mit falsch gewichteten Priority Hints in den Zeh schießen!</dd>
<dt>[00:23:41] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback"><code>window.requestIdleCallback()</code></a></dt>
<dd>Halleluja, <a href="https://developer.chrome.com/blog/using-requestidlecallback/">ganze acht Jahre nach dem ersten Auftauchen dieser API in Chrome</a> können wir <code>window.requestIdleCallback()</code> endlich auch in Safari nutzen! Wir reden darüber, wie sich damit und mit weiteren APIs wie das von Facebook ersonnene <a href="https://developer.mozilla.org/en-US/docs/Web/API/Scheduling/isInputPending"><code>navigator.scheduling.isInputPending()</code></a> und dem noch hinter Flags und in einem Origin Trial befindlichen <a href="https://developer.chrome.com/blog/introducing-scheduler-yield-origin-trial/"><code>scheduler.yield()</code></a> der Main-Thread vor Überlastung schützen lässt. Auch kommen wir auf den <a href="https://www.w3.org/TR/compute-pressure/">Compute Pressure Observer</a>, mit dem sich CPU-Auslastung zukünftig messen lässt.</dd>
<dt>[00:38:19] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload">Preload Hints für responsive Bilder und ES Modules</a></dt>
<dd>Safari unterstützt zukünftig das Preloaden von responsiven Bildern mit der für diesen Zweck <a href="https://www.stefanjudis.com/today-i-learned/how-to-preload-responsive-images-with-imagesizes-and-imagesrcset/">ausgeweiteten Syntax</a>. Das hilft, den <a href="https://web.dev/articles/optimize-lcp?hl=de#:~:text=Largest%20Contentful%20Paint%20(LCP)%20is,is%20rendered%20within%20the%20viewport">LCP-Wert der Core Web Vitals zu senken</a>. Auch wird das Preloaden von ES Modules unterstützt. Hier dreht sich Schepps und Peters Diskussion um die Frage, weshalb man das ES-Modules-Preloaden nicht in das normale Preload integrieren konnte und ein extra Wert namens <a href="https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload"><code>modulepreload</code></a> ersinnen musste. Der Grund liegt an den sogenannten <a href="https://fetch.spec.whatwg.org/#concept-request-destination">&#8222;Reauest Destinations&#8220;</a>.</dd>
<dt>[00:49:16] <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103">HTTP Early Hints</a></dt>
<dd>HTTP Early Hints sind ein Mittel für Server, die beim Bauen des HTML ausgebremst werden, zumindest Preload- und Preconnect-Hints vor der eigentlich Antwort vorab an den Client zur Verarbeitung zu senden. So wird die Wartezeit besser genutzt! Übrigens, bei <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect">Preconnect Hints</a> ist es essentiell, nicht nur den Host, sondern auch das Verbindungsprotokoll anzugeben (meist <code>https://</code>). Sonst klappt der Preconnect nicht!</dd>
</dl>
<h3>Anmeldung zur Revision 600 im Online Format</h3>
<dl>
<dt><a href="https://www.meetup.com/de-DE/workingdraft/events/297473467">Hier geht&#8217;s zur Anmeldung auf MeetUp</a></dt>
<dd>Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!</dd>
</dl>


Diverse Release-Ankündigungen des Apple-Teams stellten für Peter und Schepp den
Anlass, zu schauen, was sich bei Team WebKit so tut. Und das ist eine ganze
Menge! Deshalb haben wir es auch nicht in eine Revision quetschen können,
sondern sie benötigten derer zwei. Wir stützen uns dabei auf die Release-Notes
von Safari 17 und 17.2 Beta sowie den Safari Technology Previews 178, 180 und
181.


SCHAUNOTIZEN

[00:01:40] IMPORT ATTRIBUTES

Auch Safari unterstützt nun Import Attributes, mit Hilfe derer sich etwa JSON
oder CSS nativ in JavaScript importieren lässt. Wir sprechen über das dazu
genutzte Keyword with, das innerhalb von ES Modules eine Umwidmung erfahren hat.
Chrome muss neben with wohl für alle Ewigkeit auch das Alias assert
unterstützen, weil man etwas voreilig mit dem Zurverfügungstellen des Features
war. Aus Gründen kommen wir auf das Hochstift Osnabrück – fragt nicht.

[00:17:26] PRIORITY HINTS

Safari unterstützt nun das fetchpriority-Attribut, das mit den Werten low, high
und auto befüttert werden kann. Und das bedeutet, auch in Safari kann man sich
mit falsch gewichteten Priority Hints in den Zeh schießen!

[00:23:41] WINDOW.REQUESTIDLECALLBACK()

Halleluja, ganze acht Jahre nach dem ersten Auftauchen dieser API in Chrome
können wir window.requestIdleCallback() endlich auch in Safari nutzen! Wir reden
darüber, wie sich damit und mit weiteren APIs wie das von Facebook ersonnene
navigator.scheduling.isInputPending() und dem noch hinter Flags und in einem
Origin Trial befindlichen scheduler.yield() der Main-Thread vor Überlastung
schützen lässt. Auch kommen wir auf den Compute Pressure Observer, mit dem sich
CPU-Auslastung zukünftig messen lässt.

[00:38:19] PRELOAD HINTS FÜR RESPONSIVE BILDER UND ES MODULES

Safari unterstützt zukünftig das Preloaden von responsiven Bildern mit der für
diesen Zweck ausgeweiteten Syntax. Das hilft, den LCP-Wert der Core Web Vitals
zu senken. Auch wird das Preloaden von ES Modules unterstützt. Hier dreht sich
Schepps und Peters Diskussion um die Frage, weshalb man das ES-Modules-Preloaden
nicht in das normale Preload integrieren konnte und ein extra Wert namens
modulepreload ersinnen musste. Der Grund liegt an den sogenannten „Reauest
Destinations“.

[00:49:16] HTTP EARLY HINTS

HTTP Early Hints sind ein Mittel für Server, die beim Bauen des HTML ausgebremst
werden, zumindest Preload- und Preconnect-Hints vor der eigentlich Antwort vorab
an den Client zur Verarbeitung zu senden. So wird die Wartezeit besser genutzt!
Übrigens, bei Preconnect Hints ist es essentiell, nicht nur den Host, sondern
auch das Verbindungsprotokoll anzugeben (meist https://). Sonst klappt der
Preconnect nicht!


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

Revision 596: Neues in Safari, Teil 1 von 2

<p>In dieser Revision hat Schepp Henning Koch (<a href="https://triskweline.de/">Web</a> / <a href="https://twitter.com/triskweline">Twitter</a> / <a href="https://de.linkedin.com/in/henning-koch-ba730a86">LinkedIn</a>) aus Augsburg zu Gast, der Mitgründer von <a href="https://makandra.de/">Makandra</a> ist, einem Team aus Ruby- und JavaScript-Entwicklern, UI-Designern und Ops-Leuten, die maßgeschneiderte Lösungen für ihre Kunden entwickeln. Thema des Gesprächs ist &#8222;HTML over the Wire&#8220;. Henning ist zudem der Maintainer von <a href="https://unpoly.com/">Unpoly</a>, einem Open-Source-Tool, das genau diesen Ansatz verfolgt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:52] HTML over the Wire</dt>
<dd>Wir starten mit der Feststellung, dass &#8222;HTML over the Wire&#8220; erst in letzter Zeit stark an Popularität und Momentum gewonnen hat, obwohl das Konzept bereits seit langer Zeit existiert. So gab es schon früher Ansätze, wie z.B. &#8222;Laravel Livewire&#8220;, über das wir auch schon in <a href="https://workingdraft.de/499/">Revision 499 mit Christoph Rumpel sprachen</a>.</p>
<p>Sodann geht es zu den Vorteilen von &#8222;HTML over the Wire&#8220;, wie z.B. die Möglichkeit, kleine Fragmente einer Seite auszutauschen, ohne die gesamte Seite neu laden zu müssen, sowie die Möglichkeit, Animationen und non-disruptive Navigationen zu haben, ohne den ganzen heutzutage üblichen clientseitigen Aufwand. Teil des Konzepts ist die Tatsache, dass viel Logik und Datenverarbeitung wieder vom Frontend zum Server zurück wandert, und Frontend-Entwickler*innen sich wieder auf das klassische Frontend und User-Interface konzentrieren können. Es sind keine JSON-API-Endpoints und auch keine clientseitigen Renderer mehr erforderlich, um Daten hin und her zu schicken und in HTML umzuwandeln, was die Last auf den Clients deutlich reduziert. Frontend-Entwickler*innen können zwar weiterhin eigenes Scripting verwenden, wo es sinnvoll ist, aber das Heavy-Lifting wird vom Server übernommen.</p>
<p>Schließlich sprechen wir über die Entstehung von <a href="https://unpoly.com/">Unpoly</a> und wie es im Rahmen von Hennings Tätigkeit bei Makranda entstanden ist. Bei Makranda machen sie vor allem Greenfield-Projekte und hatten in der Vergangenheit schlechte Erfahrungen mit jQuery-Spaghetti-Haufen und AngularJS gemacht. Das Team wollte eine Lösung, die weniger Code erfordert und die Logik nicht so stark verteilt. Dies führte schließlich zur Entwicklung von Unpoly. Das Framework setzt von seiner Philosophie her stark auf Progressive Enhancement und unterstützt Entwickler*innen dabei, barrierearme Produkte damit umzusetzen. Spannend ist auch das Konzept der &#8222;Layers&#8220;, mit denen Dinge wie Offcanvas-Menüs, Overlays und Popovers orchestriert werden.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://triskweline.de/unpoly-rugb/">Der Unpoly Elevator Pitch</a></dt>
<dd>Ein Präsentationsdeck, das die Motivation hinter Unpoly und seine Vorzüge und Features abhandelt.</dd>
</dl>
<h3>Anmeldung zur Revision 600 im Online Format</h3>
<dl>
<dt><a href="https://www.meetup.com/de-DE/workingdraft/events/297473467">Hier geht&#8217;s zur Anmeldung auf MeetUp</a></dt>
<dd>Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!</dd>
</dl>


In dieser Revision hat Schepp Henning Koch (Web / Twitter / LinkedIn) aus
Augsburg zu Gast, der Mitgründer von Makandra ist, einem Team aus Ruby- und
JavaScript-Entwicklern, UI-Designern und Ops-Leute…

In dieser Revision hat Schepp Henning Koch (Web / Twitter / LinkedIn) aus
Augsburg zu Gast, der Mitgründer von Makandra ist, einem Team aus Ruby- und
JavaScript-Entwicklern, UI-Designern und Ops-Leuten, die maßgeschneiderte
Lösungen für ihre Kunden entwickeln. Thema des Gesprächs ist „HTML over the
Wire“. Henning ist zudem der Maintainer von Unpoly, einem Open-Source-Tool, das
genau diesen Ansatz verfolgt.


SCHAUNOTIZEN

[00:01:52] HTML OVER THE WIRE

Wir starten mit der Feststellung, dass „HTML over the Wire“ erst in letzter Zeit
stark an Popularität und Momentum gewonnen hat, obwohl das Konzept bereits seit
langer Zeit existiert. So gab es schon früher Ansätze, wie z.B. „Laravel
Livewire“, über das wir auch schon in Revision 499 mit Christoph Rumpel
sprachen.



Sodann geht es zu den Vorteilen von „HTML over the Wire“, wie z.B. die
Möglichkeit, kleine Fragmente einer Seite auszutauschen, ohne die gesamte Seite
neu laden zu müssen, sowie die Möglichkeit, Animationen und non-disruptive
Navigationen zu haben, ohne den ganzen heutzutage üblichen clientseitigen
Aufwand. Teil des Konzepts ist die Tatsache, dass viel Logik und
Datenverarbeitung wieder vom Frontend zum Server zurück wandert, und
Frontend-Entwickler*innen sich wieder auf das klassische Frontend und
User-Interface konzentrieren können. Es sind keine JSON-API-Endpoints und auch
keine clientseitigen Renderer mehr erforderlich, um Daten hin und her zu
schicken und in HTML umzuwandeln, was die Last auf den Clients deutlich
reduziert. Frontend-Entwickler*innen können zwar weiterhin eigenes Scripting
verwenden, wo es sinnvoll ist, aber das Heavy-Lifting wird vom Server
übernommen.

Schließlich sprechen wir über die Entstehung von Unpoly und wie es im Rahmen von
Hennings Tätigkeit bei Makranda entstanden ist. Bei Makranda machen sie vor
allem Greenfield-Projekte und hatten in der Vergangenheit schlechte Erfahrungen
mit jQuery-Spaghetti-Haufen und AngularJS gemacht. Das Team wollte eine Lösung,
die weniger Code erfordert und die Logik nicht so stark verteilt. Dies führte
schließlich zur Entwicklung von Unpoly. Das Framework setzt von seiner
Philosophie her stark auf Progressive Enhancement und unterstützt
Entwickler*innen dabei, barrierearme Produkte damit umzusetzen. Spannend ist
auch das Konzept der „Layers“, mit denen Dinge wie Offcanvas-Menüs, Overlays und
Popovers orchestriert werden.


KEINE SCHAUNOTIZEN

DER UNPOLY ELEVATOR PITCH

Ein Präsentationsdeck, das die Motivation hinter Unpoly und seine Vorzüge und
Features abhandelt.


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

Revision 595: „HTML over the Wire“ und Unpoly

<p>In dieser Revision haben wir <a href="https://www.linkedin.com/in/martindilger/">Martin Dilger</a> zu Gast, der als selbstständiger Entwickler, Berater und <a href="https://www.effectivetrainings.de/">Trainer</a> tätig ist. Mit ihm sprechen wir darüber, wie Entwickler*innen ihre Arbeit effizienter strukturieren und sich kontinuierlich verbessern können.</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>Vom Chaos zum Code &#8211; wie Developer ihre Arbeit effizient strukturieren</dt>
<dd>Wir kennen alle das Gefühl, wenn die Woche vor uns liegt und wir keinen Plan haben, wie wir alles unter einen Hut bekommen sollen. Martin hat da einen Trick: Er teilt seine Woche in Arbeitszeit, Familienzeit und &#8211; ganz wichtig &#8211; &#8222;me&#8220;-Zeit auf.</p>
<p>Und um den Überblick zu behalten, hat er eine Wissensdatenbank in Notion erstellt, in der er sein ganzes Know-how der letzten zehn Jahre gespeichert hat. Über 100.000 Einträge! So hat er beim nächsten Mal oft gleich eine Anleitung, wie es besser geht. Zudem sind da nicht nur seine Aufgaben und Projekte drin, sondern auch interessante Dinge, die er im Netz findet. Eine wahre Goldgrube!</p>
<p>Ein Prozent besser &#8211; jede Woche: Die &#8222;Ein-Prozent-Methode&#8220; bedeutet, dass wir versuchen, uns jede Woche um ein kleines bisschen zu verbessern. Es ist zwar Arbeit, sich ständig zu fragen: &#8222;Was kann ich besser machen?&#8220;. Aber es lohnt sich!</p>
<p>Deep Work: Wir alle kennen das &#8211; wir versuchen uns auf eine Aufgabe zu konzentrieren und dann&#8230; PLING! Eine neue E-Mail. PLING! Ein neues Slack-Nachricht. PLING! Mama ruft an. Martins Lösung? Konzentrieren wir uns auf &#8222;Deep Work&#8220;. Wir schalten alles aus und tauchen wir tief in unsere Arbeit ein. Und wenn jemand fragt, warum wir nicht sofort antworten? Wir sind einfach zu beschäftigt damit, genial zu sein! :D</p>
<p>Empathie ist für Martin ein super wichtiger Bestandteil erfolgreicher Entwicklerarbeit. Ein guter Softwareentwickler sollte sich in die Lage anderer versetzen können. Und Transparenz? Genau so wichtig! Damit alle im Team und die Kunden immer genau wissen, was los ist. Und natürlich darf auch die Kommunikation nicht zu kurz kommen. Transparente Kommunikation zwischen Teammitgliedern und Entwicklern ist das A und O.</dd>
</dl>
<h3>Anmeldung zur Revision 600 im Online Format</h3>
<dl>
<dt><a href="https://www.meetup.com/de-DE/workingdraft/events/297473467">Hier geht&#8217;s zur Anmeldung auf MeetUp</a></dt>
<dd>Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung einzutauchen. Wir freuen uns auf euch!</dd>
</dl>


In dieser Revision haben wir Martin Dilger zu Gast, der als selbstständiger
Entwickler, Berater und Trainer tätig ist. Mit ihm sprechen wir darüber, wie
Entwickler*innen ihre Arbeit effizienter strukt…

In dieser Revision haben wir Martin Dilger zu Gast, der als selbstständiger
Entwickler, Berater und Trainer tätig ist. Mit ihm sprechen wir darüber, wie
Entwickler*innen ihre Arbeit effizienter strukturieren und sich kontinuierlich
verbessern können.


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

VOM CHAOS ZUM CODE – WIE DEVELOPER IHRE ARBEIT EFFIZIENT STRUKTURIEREN

Wir kennen alle das Gefühl, wenn die Woche vor uns liegt und wir keinen Plan
haben, wie wir alles unter einen Hut bekommen sollen. Martin hat da einen Trick:
Er teilt seine Woche in Arbeitszeit, Familienzeit und – ganz wichtig – „me“-Zeit
auf.



Und um den Überblick zu behalten, hat er eine Wissensdatenbank in Notion
erstellt, in der er sein ganzes Know-how der letzten zehn Jahre gespeichert hat.
Über 100.000 Einträge! So hat er beim nächsten Mal oft gleich eine Anleitung,
wie es besser geht. Zudem sind da nicht nur seine Aufgaben und Projekte drin,
sondern auch interessante Dinge, die er im Netz findet. Eine wahre Goldgrube!

Ein Prozent besser – jede Woche: Die „Ein-Prozent-Methode“ bedeutet, dass wir
versuchen, uns jede Woche um ein kleines bisschen zu verbessern. Es ist zwar
Arbeit, sich ständig zu fragen: „Was kann ich besser machen?“. Aber es lohnt
sich!

Deep Work: Wir alle kennen das – wir versuchen uns auf eine Aufgabe zu
konzentrieren und dann… PLING! Eine neue E-Mail. PLING! Ein neues
Slack-Nachricht. PLING! Mama ruft an. Martins Lösung? Konzentrieren wir uns auf
„Deep Work“. Wir schalten alles aus und tauchen wir tief in unsere Arbeit ein.
Und wenn jemand fragt, warum wir nicht sofort antworten? Wir sind einfach zu
beschäftigt damit, genial zu sein! :D

Empathie ist für Martin ein super wichtiger Bestandteil erfolgreicher
Entwicklerarbeit. Ein guter Softwareentwickler sollte sich in die Lage anderer
versetzen können. Und Transparenz? Genau so wichtig! Damit alle im Team und die
Kunden immer genau wissen, was los ist. Und natürlich darf auch die
Kommunikation nicht zu kurz kommen. Transparente Kommunikation zwischen
Teammitgliedern und Entwicklern ist das A und O.


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

Revision 594: Vom Chaos zum Code – wie Developer ihre Arbeit effizient
strukturieren

<p>In dieser Revision tauchen wir mit Hans und Vanessa in die spannende Welt des Recruitings ein. Sie teilen ihre Expertise und Erfahrungen über den Prozess des Einstellens von Webentwickler:innen und geben wertvolle Einblicke in die Herausforderungen und Lösungsansätze in diesem Bereich.</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:54] Webentwickler:innen erfolgreich einstellen &#8211; Einblicke mit Hans &amp; Vanessa</dt>
<dd>Hans und Vanessa sprechen über die komplexen und dynamischen Aspekte des Einstellungsprozesses für Webentwickler:innen. Sie beginnen mit einer Diskussion über die wichtigen Qualifikationen und Fähigkeiten, die in der heutigen schnelllebigen Technologiewelt von Webentwickler:innen erwartet werden, und gehen dabei insbesondere auf gefragte Programmiersprachen, Frameworks und Tools ein.</dd>
<dd>Das Gespräch führt weiter zu den Feinheiten des Bewerbungsprozesses und den Interviewfragen, die darauf abzielen, sowohl die technischen Fähigkeiten als auch die kulturelle Eignung eines Kandidaten zu bewerten. Sie betonen dabei die Wichtigkeit von Soft Skills und deren Bewertung im Einstellungsprozess, und heben die Rolle von UX/UI-Kenntnissen und anderen Frontend-Aufgaben hevor.</p>
<p>Die Diskussion nimmt eine interessante Wendung, als die Vor- und Nachteile der Einstellung von Remote-Entwicklern sowie die Herausforderungen und Chancen der globalen Talentmärkte beleuchtet werden. Das Thema Onboarding und Weiterbildung wird ebenfalls angeschnitten, wobei Strategien erörtert werden, wie Unternehmen neue Webentwickler erfolgreich in ihre Teams integrieren und deren kontinuierliche Entwicklung fördern können.</p>
<p>Ein weiterer kritischer Punkt ist das Erkennen des Bedarfs an neuen Stellen und worauf man bei der Analyse von Lebensläufen achten sollte. Hans und Vanessa teilen ihre Ansichten über den Stellenwert von Cultural Fit im Vergleich zu Technical Fit und diskutieren die unterschiedlichen Ansätze zur technischen Bewertung von Kandidaten, darunter technische Tests, Coding Challenges und Live Coding.</p>
<p>Abschließend beleuchten sie die Wichtigkeit von Diversität und Inklusion in Tech-Teams und besprechen, wie Unternehmen durch gezielte Maßnahmen Inklusion fördern können. Sie schließen mit einer Betrachtung von Probezeiten und der Frage, ob und wie Bezahlung in diesem Kontext gehandhabt werden sollte.</dd>
</dl>


In dieser Revision tauchen wir mit Hans und Vanessa in die spannende Welt des
Recruitings ein. Sie teilen ihre Expertise und Erfahrungen über den Prozess des
Einstellens von Webentwickler:innen und ge…

In dieser Revision tauchen wir mit Hans und Vanessa in die spannende Welt des
Recruitings ein. Sie teilen ihre Expertise und Erfahrungen über den Prozess des
Einstellens von Webentwickler:innen und geben wertvolle Einblicke in die
Herausforderungen und Lösungsansätze in diesem Bereich.


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:54] WEBENTWICKLER:INNEN ERFOLGREICH EINSTELLEN – EINBLICKE MIT HANS &
VANESSA

Hans und Vanessa sprechen über die komplexen und dynamischen Aspekte des
Einstellungsprozesses für Webentwickler:innen. Sie beginnen mit einer Diskussion
über die wichtigen Qualifikationen und Fähigkeiten, die in der heutigen
schnelllebigen Technologiewelt von Webentwickler:innen erwartet werden, und
gehen dabei insbesondere auf gefragte Programmiersprachen, Frameworks und Tools
ein.

Das Gespräch führt weiter zu den Feinheiten des Bewerbungsprozesses und den
Interviewfragen, die darauf abzielen, sowohl die technischen Fähigkeiten als
auch die kulturelle Eignung eines Kandidaten zu bewerten. Sie betonen dabei die
Wichtigkeit von Soft Skills und deren Bewertung im Einstellungsprozess, und
heben die Rolle von UX/UI-Kenntnissen und anderen Frontend-Aufgaben hevor.



Die Diskussion nimmt eine interessante Wendung, als die Vor- und Nachteile der
Einstellung von Remote-Entwicklern sowie die Herausforderungen und Chancen der
globalen Talentmärkte beleuchtet werden. Das Thema Onboarding und Weiterbildung
wird ebenfalls angeschnitten, wobei Strategien erörtert werden, wie Unternehmen
neue Webentwickler erfolgreich in ihre Teams integrieren und deren
kontinuierliche Entwicklung fördern können.

Ein weiterer kritischer Punkt ist das Erkennen des Bedarfs an neuen Stellen und
worauf man bei der Analyse von Lebensläufen achten sollte. Hans und Vanessa
teilen ihre Ansichten über den Stellenwert von Cultural Fit im Vergleich zu
Technical Fit und diskutieren die unterschiedlichen Ansätze zur technischen
Bewertung von Kandidaten, darunter technische Tests, Coding Challenges und Live
Coding.

Abschließend beleuchten sie die Wichtigkeit von Diversität und Inklusion in
Tech-Teams und besprechen, wie Unternehmen durch gezielte Maßnahmen Inklusion
fördern können. Sie schließen mit einer Betrachtung von Probezeiten und der
Frage, ob und wie Bezahlung in diesem Kontext gehandhabt werden sollte.

Revision 593: Webentwickler:innen erfolgreich einstellen – Einblicke mit Hans &
Vanessa

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 603: Nerdige Soft- und Hardware-Tipps

Working Draft

Revision 602: Komponentenbasierte Frontends in TYPO3

Working Draft

Revision 601: WebAssembly – Vergangenheit, Gegenwart und Zukunft

Working Draft

Revision 600: Live

Working Draft

Revision 599: Glücksrad mit reichlich SVG und CSS-Datentypen!

Working Draft

Outtakes 2023

Working Draft

Revision 598: Erfolgreiches Onboarding – Einblicke mit Hans & Vanessa

Working Draft

Revision 597: Neues in Safari, Teil 2 von 2

Working Draft

Revision 596: Neues in Safari, Teil 1 von 2

Working Draft

Revision 595: „HTML over the Wire“ und Unpoly

Working Draft

Revision 594: Vom Chaos zum Code – wie Developer ihre Arbeit effizient strukturieren

Working Draft

Revision 593: Webentwickler:innen erfolgreich einstellen – Einblicke mit Hans & Vanessa

Working Draft