<p>Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: <a href="https://davidjost.dev/">David Jost</a>, mit dem wir in über einer Stunde das Thema &#8222;Design Systeme&#8220; von all seinen Seiten beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt.</p>
<aside class="message long-message">
<h2>Community Draft</h2>
<p><a href="https://draft.community/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 256px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/04/logo.png" alt="" /></a></p>
<div class="message_content">
Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige Web-Entwickler:innen und &#8209;Designer:innen Community näher zusammen zu bringen.</p>
<p>Mit unserem Slack-Channel wollen wir noch näher zusammen kommen &#8211; gerade in der Zeit, in der die Remote-Arbeit ein &#8222;normaler&#8220; Bestandteil unserer täglichen Arbeit geworden ist.</p>
<p>Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste Konferenz finden, auf der wir uns treffen können und job-suchende und -anbietende zusammen bringen.</p>
<p>Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund um Webentwicklung.<br />
Alle Infos unter <a href="https://draft.community/?ref=workingdraft.de">draft.community</a>.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:21] Design Systeme</dt>
<dd>
<ul>
<li><a href="https://www.ted.com/talks/richard_st_john_8_secrets_of_success">TED 2005 &#8211; Richard St. John &#8211; 8 secrets of success</a></li>
<li><a href="https://frankchimero.com/blog/2015/the-webs-grain/">Frank Chimero &#8211; The Web’s Grain</a></li>
<li><a href="https://responsivedesignworkflow.com/">Stephen Hay &#8211; Responsive Design Workflow</a></li>
<li><a href="https://medium.com/@nathanacurtis">Nathan Curtis</a></li>
<li><a href="https://web.dev/new-responsive/">Una Kravets &#8211; The new responsive: Web design in a component-driven world</a></li>
<li><a href="https://inclusive-components.design/cards/">Inclusive Components &#8211; Cards</a></li>
<li><a href="https://open-ui.org/">Open UI Project</a></li>
<li><a href="https://uiengineering.de/podcast.html">UI Engineering Podcast</a></li>
</ul>
</dd>
</dl>


Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: David Jost, mit dem wir in über einer Stunde das Thema &#8222;Design Systeme&#8220; von all seinen Seiten beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt. Community Draft Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige Web-Entwickler:innen und &#8209;Designer:innen [&#8230;]

Working Draft

Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: David Jost, mit dem wir in über einer Stunde das Thema „Design Systeme“ von all seinen Seiten beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt.

Comm[...]

Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: David Jost, mit dem wir in über einer Stunde das Thema „Design Systeme“ von all seinen Seiten beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt.

Community Draft


Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige Web-Entwickler:innen und ‑Designer:innen Community näher zusammen zu bringen.
Mit unserem Slack-Channel wollen wir noch näher zusammen kommen – gerade in der Zeit, in der die Remote-Arbeit ein „normaler“ Bestandteil unserer täglichen Arbeit geworden ist.
Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste Konferenz finden, auf der wir uns treffen können und job-suchende und -anbietende zusammen bringen.
Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund um Webentwicklung.
Alle Infos unter draft.community.


Schaunotizen

[00:01:21] Design Systeme


TED 2005 – Richard St. John – 8 secrets of success
Frank Chimero – The Web’s Grain
Stephen Hay – Responsive Design Workflow
Nathan Curtis
Una Kravets – The new responsive: Web design in a component-driven world
Inclusive Components – Cards
Open UI Project
UI Engineering Podcast

Revision 524: Design Systeme

<p>Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist da!</p>
<p><img class="alignnone size-medium wp-image-5692" src="https://workingdraft.de/wp-content/uploads/2022/02/660xsa-300x300.jpg" alt="" width="300" height="300" srcset="https://workingdraft.de/wp-content/uploads/2022/02/660xsa-300x300.jpg 300w, https://workingdraft.de/wp-content/uploads/2022/02/660xsa-150x150.jpg 150w, https://workingdraft.de/wp-content/uploads/2022/02/660xsa.jpg 500w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.linkedin.com/in/antonia-pf%C3%B6rtner/?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/03/Working-Draft-Podcast_Banner-Zühlke.png" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von Zühlke. Zühlke ist ein weltweit tätiger Innovationsdienstleister und kreiert neue Ideen, Produkte und Geschäftsmodelle für seine Kunden aus unterschiedlichsten Branchen. Das Unternehmen ist überzeugt, dass Innovationen und technologischer Fortschritt unsere Wirtschaft und Gesellschaft positiv verändern können, und erarbeitet deshalb gemeinsam mit seinen Kunden nachhaltige Lösungen für die Zukunft. Die 1.300 Mitarbeitenden sind in 10 Ländern tätig und betreuen Kunden aus den Bereichen Medizintechnik &#038; Gesundheit, Industrie, Telekommunikation, Transport und Mobilität oder Banken &#038; Versicherungen.</p>
<p>Mehr über die offenen Web Development-Stellen bei Zühlke erfahrt ihr unter <a href="https://www.zuehlke.com/de/moderne-webentwicklung-bei-zuehlke?ref=workingdraft.de">www.zuehlke.com/de/moderne-webentwicklung-bei-zuehlke</a>. <a href="https://www.linkedin.com/in/antonia-pf%C3%B6rtner/?ref=workingdraft.de">Antonia Pförtner</a>, <a href="https://www.linkedin.com/in/katharina-baehr-ba74209a/">Katharina Baehr</a> und <a href="https://www.linkedin.com/in/trudolphi/">Tobi Rudolphi</a> freuen sich auch über einen unkomplizierten Austausch auf LinkedIn!</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:45] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/">TypeScript 4.6 ist da</a></dt>
<dd>TS 4.6 bringt wenig neues, aber da wir in den TypeScript-Folgen eh immer über interessantere Themen sprechen, ist uns das ganz recht. Stefan erzählt etwa davon, wie er im Klassenkampf die Seiten gewechselt hat und ein an das <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">ES-Iterator-Protokoll</a> andockendes <a href="https://gist.github.com/ddprrt/674aee32858cb933ed1ab11fa8ca2830">Lazy-Iterator-Tool mit ECMAScript-Klassen</a> gebaut hat. Im Rahmen dessen freut er sich sogar darüber, dass das erste kleine TS-Feature, <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#allowing-code-in-constructors-before-super">etwas präziser dem ES-Standard folgende Unterstützung</a> für <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a>, jetzt da ist und postuliert Use Cases rund um <a href="https://opentelemetry.io/">Open Telemetry</a>. Peter hat derweil Kunden mit einen Use Case für <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_static_initialization_blocks">Static-Blöcken in Klassen</a>, die uns <a href="https://workingdraft.de/501/">vorletztes Mal</a> noch nicht überzeugen konnten. Allgemein halten wir fest, dass früher (= Java/<a href="https://www.youtube.com/watch?v=QM1iUe6IofM&amp;t=1s">OOP</a>/<a href="https://fettblog.eu/tidy-typescript-avoid-traditional-oop/">POOP</a>), zwar vieles, nicht alles schlecht war und dass auch in <a href="https://www.amazon.de/Patterns-Elements-Reusable-Object-Oriented-Software/dp/0201633612">Programmierbüchern von 1997</a> noch Weisheit zu finden ist. Im Verhältnis 20/80 widmen wir uns der weiteren langweiligen und marginalen TypeScript-Updates (<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#indexed-access-inference-improvements">dies</a>, <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#control-flow-analysis-for-dependent-parameters">das</a>, <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#more-syntax-and-binding-errors-in-javascript">jenes</a>) sowie den wesentlich spannenderen Themen rund um <a href="https://fettblog.eu/how-not-to-learn-typescript/#mistake-2%3A-annotate-everything">Typannotationen</a>, <a href="https://fettblog.eu/typescript-function-overload/">Funktionsüberladung</a>, <a href="https://github.com/microsoft/TypeScript/issues/46858">TS-Performance</a>, <a href="https://github.com/swc-project/swc">SWC</a>, <a href="https://deno.land/">Demo</a>, <a href="https://workingdraft.de/515/">Runtime-Typen</a> und TS-Specs, <a href="https://microsoft.github.io/language-server-protocol/">Language Server Protocol</a>, Rust, <a href="https://ziglang.org/">Zig</a>, Java und Homepagebaukästen</dd>
</dl>


Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist da! Unser Sponsor Diese Folge wird gesponsert von Zühlke. Zühlke ist ein weltweit tätiger Innovationsdienstleister und kreiert neue Ideen, Produkte und Geschäftsmodelle für seine Kunden aus unterschiedlichsten Branchen. Das Unternehmen ist überzeugt, [&#8230;]

Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist da!


Unser Sponsor


Diese Folge wird gesponsert von Zühlke. Zühlke ist ein weltweit tätig[...]

Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist da!


Unser Sponsor


Diese Folge wird gesponsert von Zühlke. Zühlke ist ein weltweit tätiger Innovationsdienstleister und kreiert neue Ideen, Produkte und Geschäftsmodelle für seine Kunden aus unterschiedlichsten Branchen. Das Unternehmen ist überzeugt, dass Innovationen und technologischer Fortschritt unsere Wirtschaft und Gesellschaft positiv verändern können, und erarbeitet deshalb gemeinsam mit seinen Kunden nachhaltige Lösungen für die Zukunft. Die 1.300 Mitarbeitenden sind in 10 Ländern tätig und betreuen Kunden aus den Bereichen Medizintechnik & Gesundheit, Industrie, Telekommunikation, Transport und Mobilität oder Banken & Versicherungen.
Mehr über die offenen Web Development-Stellen bei Zühlke erfahrt ihr unter www.zuehlke.com/de/moderne-webentwicklung-bei-zuehlke. Antonia Pförtner, Katharina Baehr und Tobi Rudolphi freuen sich auch über einen unkomplizierten Austausch auf LinkedIn!


Schaunotizen

[00:01:45] TypeScript 4.6 ist da
TS 4.6 bringt wenig neues, aber da wir in den TypeScript-Folgen eh immer über interessantere Themen sprechen, ist uns das ganz recht. Stefan erzählt etwa davon, wie er im Klassenkampf die Seiten gewechselt hat und ein an das ES-Iterator-Protokoll andockendes Lazy-Iterator-Tool mit ECMAScript-Klassen gebaut hat. Im Rahmen dessen freut er sich sogar darüber, dass das erste kleine TS-Feature, etwas präziser dem ES-Standard folgende Unterstützung für super(), jetzt da ist und postuliert Use Cases rund um Open Telemetry. Peter hat derweil Kunden mit einen Use Case für Static-Blöcken in Klassen, die uns vorletztes Mal noch nicht überzeugen konnten. Allgemein halten wir fest, dass früher (= Java/OOP/POOP), zwar vieles, nicht alles schlecht war und dass auch in Programmierbüchern von 1997 noch Weisheit zu finden ist. Im Verhältnis 20/80 widmen wir uns der weiteren langweiligen und marginalen TypeScript-Updates (dies, das, jenes) sowie den wesentlich spannenderen Themen rund um Typannotationen, Funktionsüberladung, TS-Performance, SWC, Demo, Runtime-Typen und TS-Specs, Language Server Protocol, Rust, Zig, Java und Homepagebaukästen

Revision 523: Wenig TypeScript und viel Vermischtes

<p>Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann (<a href="https://www.linkedin.com/in/simondittlmann/">LinkedIn</a>, <a href="https://twitter.com/SimonDittlmann">Twitter</a>), Head of Digital Architecture and Analytics bei <a href="http://zeiss.de/">ZEISS</a> uns über viel über horizontale und vertikale Schnitte. Außerdem berichtet er über die technische Umsetzung der Micro-Frontends bei ZEISS mit Hilfe von <a href="https://webpack.js.org/concepts/module-federation/">Webpack Module Federation</a> und <a href="https://dapr.io/">Dapr</a>.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/02/Banner_lemon.markets.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.</p>
<p>Weitere Informationen zum Produkt und der Firma <a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de">gibt es hier</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:38] MFs Architektur mit Webpack Module Federation und Dapr</dt>
<dd>Zunächst besprechen Simon, Schepp und Vanessa die Split-Arten horizontal vs. vertikal, wie in dem Blogpost <a href="https://medium.com/@lucamezzalira/micro-frontends-decisions-framework-ebcd22256513">Micro-frontends decisions framework</a> von <a href="https://lucamezzalira.com/">Luca Mezzalira</a> beschrieben. Weiterhin geht es um die Aufsetzung von Kompositionen und Routing in den Möglichkeiten <a href="https://increment.com/frontend/micro-frontends-in-context/">Client-side, Edge-side oder Server-side</a>. Ein neu geschaffenes Problem bei dem Einsatz von Micro-Frontends kann die Authentication und. Authorization sein. Simon stellt uns einen <a href="https://auth0.com/blog/securing-single-page-applications-with-refresh-token-rotation/">token basierten Login</a> mit <a href="https://curity.io/resources/learn/split-token-pattern/">Split tokens</a> und <a href="https://curity.io/resources/learn/phantom-token-pattern/">Phantom tokens</a> vor. Im Anschluss geht Simon auf Rollen und attributbasiertes Rechtemanagement in verteilten System ein (siehe <a href="https://github.com/open-policy-agent/npm-opa-wasm">Open Policy Agent WebAssembly NPM Module</a> und &#8222;<a href="https://www.youtube.com/watch?v=R6tUNpRpdnY">How Netflix Is Solving Authorization Across Their Cloud</a>&#8222;. Des Weiteren wird auf die Vor- und Nachteile von Polyrepositories und Monorepositories eingegangen, und wie mit Hilfe von <a href="https://www.blackducksoftware.com/">Blackduck</a> und <a href="https://github.com/oss-review-toolkit/ort">OSS Review Toolkit (ORT)</a> Lizensen überprüft werden können.</dd>
</dl>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/511/">Revision 511: Microfrontends bei REWE digital</a></li>
<li><a href="https://workingdraft.de/492/">Revision 492: Der aktueller Status von Webpack</a></li>
<li><a href="https://workingdraft.de/407/">Revision 407: Micro Frontends mit Project Mosaic</a></li>
<li><a href="https://workingdraft.de/384/">Revision 384: Micro-Frontends | Working Draft</a></li>
</ul>


Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann (LinkedIn, Twitter), Head of Digital Architecture and Analytics bei ZEISS uns über viel über horizontale und vertikale Schnitte. Außerdem berichtet er über die technische Umsetzung der Micro-Frontends bei ZEISS mit Hilfe von Webpack Module Federation und Dapr. Unser Sponsor Diese Folge wird gesponsert von [&#8230;]

Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann (LinkedIn, Twitter), Head of Digital Architecture and Analytics bei ZEISS uns über viel über horizontale und vertikale Schnitte. Außerdem berichtet er über die technische [...]

Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann (LinkedIn, Twitter), Head of Digital Architecture and Analytics bei ZEISS uns über viel über horizontale und vertikale Schnitte. Außerdem berichtet er über die technische Umsetzung der Micro-Frontends bei ZEISS mit Hilfe von Webpack Module Federation und Dapr.

Unser Sponsor


Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.
Weitere Informationen zum Produkt und der Firma gibt es hier.


Schaunotizen

[00:01:38] MFs Architektur mit Webpack Module Federation und Dapr
Zunächst besprechen Simon, Schepp und Vanessa die Split-Arten horizontal vs. vertikal, wie in dem Blogpost Micro-frontends decisions framework von Luca Mezzalira beschrieben. Weiterhin geht es um die Aufsetzung von Kompositionen und Routing in den Möglichkeiten Client-side, Edge-side oder Server-side. Ein neu geschaffenes Problem bei dem Einsatz von Micro-Frontends kann die Authentication und. Authorization sein. Simon stellt uns einen token basierten Login mit Split tokens und Phantom tokens vor. Im Anschluss geht Simon auf Rollen und attributbasiertes Rechtemanagement in verteilten System ein (siehe Open Policy Agent WebAssembly NPM Module und „How Netflix Is Solving Authorization Across Their Cloud„. Des Weiteren wird auf die Vor- und Nachteile von Polyrepositories und Monorepositories eingegangen, und wie mit Hilfe von Blackduck und OSS Review Toolkit (ORT) Lizensen überprüft werden können.

Verwandte Revisionen

Revision 511: Microfrontends bei REWE digital
Revision 492: Der aktueller Status von Webpack
Revision 407: Micro Frontends mit Project Mosaic
Revision 384: Micro-Frontends | Working Draft

Revision 522: MFs Architektur mit Webpack Module Federation und Dapr

<p><strong>Nico Martin</strong> (<a href="https://nico.dev">Web</a>, <a href="http://twitter.com/nic_o_martin">Twitter</a>), Google Developer Expert und Webtech-Nerd, erklärt in dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:01] Peripherie-APIs</dt>
<dd>Es geht um <a href="https://web.dev/nfc/">Web NFC</a>, <a href="https://web.dev/usb/">Web USB</a>, <a href="https://web.dev/bluetooth/">Web Blueooth</a> und andere Peripherie-APIs aus dem <a href="https://www.chromium.org/teams/web-capabilities-fugu/">Project Fugu</a> (Working Draft berichtete in <a href="https://workingdraft.de/399/">Revision 399</a>). Während es Nico noch leicht fiel, Peter und Schepp die <a href="https://w3c.github.io/web-nfc/">simple API</a> für <a href="https://de.wikipedia.org/wiki/Near_Field_Communication">NFC</a> im Web zu erklären, wird&#8217;s bei USB schon kniffliger. Zum anderen gibt&#8217;s neben <a href="https://web.dev/usb/">Web USB</a> auch noch <a href="https://web.dev/hid/">Web HID</a> und <a href="https://web.dev/serial/">Web Serial</a>, wobei gerade letzteres Sinnhaftigkeit ausgiebig diskutiert wird. Im Rahmen von Web USB empfiehlt Nico <a href="https://bandarra.me/2020/02/22/Building-a-Physical-AirHorn-Button-with-Web-USB/">ein Tutorial</a>, <a href="https://github.com/webadb/webadb.js">webadb.js</a> und einen <a href="https://www.youtube.com/watch?v=epdUFbuwfWw">Talk von Sebastian Golasch</a>. Wir lassen natürlich auch die Sicherheitsdiskussion nicht außer acht, debattieren die Kombination aus Web USB und der <a href="https://web.dev/file-system-access/">File System Access API</a> und Nico berichtet von seinen persönlichen Web-USB-Abenteuern mit <a href="https://de.wikipedia.org/wiki/Tiptoi">Tiptoi</a>. Beim Thema <a href="https://web.dev/bluetooth/">Web Bluetooth</a> jammert Peter zunächst über seinen einst gescheiterten Kampf gegen proprietäre Protokolle, bevor wir das Wesen von <a href="https://de.wikipedia.org/wiki/Bluetooth">Bluetooth</a> im Allgemeinen und <a href="https://de.wikipedia.org/wiki/Bluetooth_Low_Energy">Bluetooth LE</a> (relevant für Web Bluetooth) im Speziellen beleuchten. Nico erzählt vom seinen Erfolgen in der webbasierten Ansteuerung einer <a href="https://www.mipow.com/products/playbulb-sphere">Playbulb Sphere</a> und davon, warum er am Ende dann doch lieber seine eigene Hardware gebastelt hat. Die Hauptzutaten: ein RaspberryPi, Node und <a href="https://github.com/noble/bleno">bleno</a>! Ergebnisse sind unter anderem die Ansteuerung einer kleinen LED Matrix (<a href="https://twitter.com/nic_o_martin/status/1438258873140486145">1</a>, <a href="https://twitter.com/nic_o_martin/status/1443103977772666882">2</a>) und von <a href="https://twitter.com/nic_o_martin/status/1416120631842717704">Elektromotoren</a>. Zum Ende hin diskutieren wir den deprimierenden Stand der Implementierung inkl. <a href="https://webkit.org/status/#feature-webusb">Webkit-Verweigerung</a>, Sinn und Zweck von Peripherie-APIs und Tracking-Prevention (u.A. <a href="https://webkit.org/tracking-prevention/">die von Webkit</a>).</dd>
</dl>


Nico Martin (Web, Twitter), Google Developer Expert und Webtech-Nerd, erklärt in dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC! Schaunotizen [00:01:01] Peripherie-APIs Es geht um Web NFC, Web USB, Web Blueooth und andere Peripherie-APIs aus dem Project Fugu (Working Draft berichtete in Revision 399). Während es Nico noch leicht fiel, Peter und [&#8230;]

Nico Martin (Web, Twitter), Google Developer Expert und Webtech-Nerd, erklärt in dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC!
Schaunotizen

[00:01:01] Peripherie-APIs
Es geht um Web NFC, Web USB, Web Blueooth und andere[...]

Nico Martin (Web, Twitter), Google Developer Expert und Webtech-Nerd, erklärt in dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC!
Schaunotizen

[00:01:01] Peripherie-APIs
Es geht um Web NFC, Web USB, Web Blueooth und andere Peripherie-APIs aus dem Project Fugu (Working Draft berichtete in Revision 399). Während es Nico noch leicht fiel, Peter und Schepp die simple API für NFC im Web zu erklären, wird’s bei USB schon kniffliger. Zum anderen gibt’s neben Web USB auch noch Web HID und Web Serial, wobei gerade letzteres Sinnhaftigkeit ausgiebig diskutiert wird. Im Rahmen von Web USB empfiehlt Nico ein Tutorial, webadb.js und einen Talk von Sebastian Golasch. Wir lassen natürlich auch die Sicherheitsdiskussion nicht außer acht, debattieren die Kombination aus Web USB und der File System Access API und Nico berichtet von seinen persönlichen Web-USB-Abenteuern mit Tiptoi. Beim Thema Web Bluetooth jammert Peter zunächst über seinen einst gescheiterten Kampf gegen proprietäre Protokolle, bevor wir das Wesen von Bluetooth im Allgemeinen und Bluetooth LE (relevant für Web Bluetooth) im Speziellen beleuchten. Nico erzählt vom seinen Erfolgen in der webbasierten Ansteuerung einer Playbulb Sphere und davon, warum er am Ende dann doch lieber seine eigene Hardware gebastelt hat. Die Hauptzutaten: ein RaspberryPi, Node und bleno! Ergebnisse sind unter anderem die Ansteuerung einer kleinen LED Matrix (1, 2) und von Elektromotoren. Zum Ende hin diskutieren wir den deprimierenden Stand der Implementierung inkl. Webkit-Verweigerung, Sinn und Zweck von Peripherie-APIs und Tracking-Prevention (u.A. die von Webkit).

Revision 521: WebBluetooth, WebUSB und WebNFC

<p>Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es immer leichter zu werden. Joe Ray Gregory (<a href="https://twitter.com/joeraygregory">Twitter</a> / <a href="https://jgreg.dev/">Website</a>), Senior Software Engineer und Trainier bei <a href="https://workshops.de/">workshops.de</a>, bringt uns diesmal das Framework <a href="https://testing-library.com/">Testing Library</a> mit.</p>
<p>Psst, Geheimtipp: Joe verrät uns, dass es aktuell Early Bird Tickets für die <a href="https://conf.vuejs.de/">Vue.js Konferenz</a> in Berlin am 22. September gibt.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/02/Banner_lemon.markets.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.</p>
<p>Weitere Informationen zum Produkt und der Firma <a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de">gibt es hier</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:36] Unit-Testing / Testing Library</dt>
<dd>Die <a href="https://testing-library.com/">Testing Library</a> von <a href="https://kentcdodds.com/">Kent C. Dodds</a> und anderen  Beitragenden ist eine Familie von Bibliotheken, um Best Practices in das Testen zu bringen. Sie ist framework-agnostisch und kann daher mit <a href="https://vuejs.org/">Vue</a>, <a href="https://reactjs.org/">React </a>und Co. verwendet werden. Sie funktioniert mit <a href="https://jestjs.io/">Jest,</a> <a href="https://www.cypress.io/">Cypress</a> und vermutlich auch <a href="https://vitest.dev/">Vitest</a> (Obacht: Alpha!), aber auch alleinstehend benutzt werden. Im Laufe der Revision geht Joe darauf ein, was die Testing Library eigentlich ist, warum man sie nutzen sollte und wie man sie einsetzt. Dabei geht er auch darauf ein, dass es <a href="https://github.com/facebook/jest/pull/11529#issuecomment-1027152470">keine aktive Mitarbeit</a> von seitens Facebook (Meta) seit Jahren mehr an Jest gibt. Außerdem gäbe es bei Jest das Problem <a href="https://jestjs.io/docs/ecmascript-modules">des fehlenden ESM Supports</a>.</dd>
<dd>Im weiteren Verlaufen gehen Hans, Vanessa und Joe auch auf die <a href="https://www.perfecto.io/blog/testing-pyramid#:~:text=The%20testing%20pyramid%20is%20a,a%20more%20reliable%20test%20suite.">Testing Pyramide</a> und <a href="https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications">Testing Trophy</a> ein.</dd>
<dd>Besonders spannend bei der Testing Library sind die <a href="https://testing-library.com/docs/guiding-principles/">Guiding Principles</a>.</dd>
</dl>
<h3>Sonstige Links</h3>
<ul>
<li><a href="https://playwright.dev/">Playwright</a>, der Nachfolger von <a href="https://www.npmjs.com/package/puppeteer">Puppeteer</a></li>
<li><a href="https://conf.vuejs.de/">https://conf.vuejs.de/</a></li>
<li><a href="https://workshops.de/">https://workshops.de/</a></li>
</ul>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/462/">Revision 462: Jest</a></li>
<li><a href="https://workingdraft.de/442/">Revision 442: &#8222;Next Level&#8220;-End-to-End-Testing</a></li>
<li><a href="https://workingdraft.de/436/">Revision 436: Frontend Unit-Testing</a></li>
<li><a href="https://workingdraft.de/375/">Revision 375: Frontent-Testing</a></li>
</ul>


Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es immer leichter zu werden. Joe Ray Gregory (Twitter / Website), Senior Software Engineer und Trainier bei workshops.de, bringt uns diesmal das Framework Testing Library mit. Psst, Geheimtipp: Joe verrät uns, dass es aktuell Early Bird Tickets für die Vue.js Konferenz in Berlin am 22. [&#8230;]

Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es immer leichter zu werden. Joe Ray Gregory (Twitter / Website), Senior Software Engineer und Trainier bei workshops.de, bringt uns diesmal das Framework Testing Library m[...]

Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es immer leichter zu werden. Joe Ray Gregory (Twitter / Website), Senior Software Engineer und Trainier bei workshops.de, bringt uns diesmal das Framework Testing Library mit.
Psst, Geheimtipp: Joe verrät uns, dass es aktuell Early Bird Tickets für die Vue.js Konferenz in Berlin am 22. September gibt.

Unser Sponsor


Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.
Weitere Informationen zum Produkt und der Firma gibt es hier.


Schaunotizen

[00:01:36] Unit-Testing / Testing Library
Die Testing Library von Kent C. Dodds und anderen  Beitragenden ist eine Familie von Bibliotheken, um Best Practices in das Testen zu bringen. Sie ist framework-agnostisch und kann daher mit Vue, React und Co. verwendet werden. Sie funktioniert mit Jest, Cypress und vermutlich auch Vitest (Obacht: Alpha!), aber auch alleinstehend benutzt werden. Im Laufe der Revision geht Joe darauf ein, was die Testing Library eigentlich ist, warum man sie nutzen sollte und wie man sie einsetzt. Dabei geht er auch darauf ein, dass es keine aktive Mitarbeit von seitens Facebook (Meta) seit Jahren mehr an Jest gibt. Außerdem gäbe es bei Jest das Problem des fehlenden ESM Supports.
Im weiteren Verlaufen gehen Hans, Vanessa und Joe auch auf die Testing Pyramide und Testing Trophy ein.
Besonders spannend bei der Testing Library sind die Guiding Principles.

Sonstige Links

Playwright, der Nachfolger von Puppeteer
https://conf.vuejs.de/
https://workshops.de/

Verwandte Revisionen

Revision 462: Jest
Revision 442: „Next Level“-End-to-End-Testing
Revision 436: Frontend Unit-Testing
Revision 375: Frontent-Testing

Revision 520: Unit-Testing / Testing Library

<p>Gast <strong>Florian Dreier</strong> (<a href="https://github.com/DreierF">Github</a>) erzählt Peter und Vanessa von der Modernisierung eines Legacy-Frontends!</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.rewe-digital.com/inside-stories?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 300px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/02/rewe-digital-banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von REWE digital. Seit 2014<br />
digitalisiert das Kölner Unternehmen den Lebensmitteleinzelhandel mal so richtig. Mit<br />
knapp 500 agilen Expert:innen setzt man auf eigenverantwortliches Arbeiten,<br />
Teamautonomie, modernste Technologien, individuelle Weiterentwicklung und<br />
Innovation an jeder Ecke. So leistet man wertvolle Pionierarbeit für einen der größten<br />
Handels- und Touristikkonzerne Europas.</p>
<p>Neugierig geworden? Dann schaut jetzt auf <a href="https://www.rewe-digital.com/inside-stories?ref=workingdraft.de">rewe-digital.com</a>,  <a href="https://www.linkedin.com/company/rewedigital/?ref=workingdraft.de">LinkedIn</a>,  <a href="https://twitter.com/rewedigital?ref=workingdraft.de">Twitter</a> oder<br />
 <a href="https://www.youtube.com/channel/UC2ze5EWDzojgYsStBJjT5Qg?ref=workingdraft.de">YouTube</a> vorbei und hört in REWE digitals eigenen Tech-Podcast  <a href="https://open.spotify.com/episode/29PBdbVQL85uAkQmj1xc5g?si=Z_L3xaH4RIyn5XzY_SoMag&#038;nd=1&#038;ref=workingdraft.de">Codes und schmerzlos</a> rein!</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:00] Modernisierung einer Legacy-Frontend-Codebase</dt>
<dd>
<p><a href="https://www.cqse.eu/">Florians Arbeitgeber</a> war mit einem alten Frontend auf Basis von <a href="https://developers.google.com/closure">Googles Closure-Tools</a> gesegnet, das modernisiert werden wollte. Zunächst listen wir die zahlreichen Gründe für das Ersetzen des alten Stacks auf (schlechte DX, Inkompatibilität zum restlichen JS-Ökosystem) und sprechen dann über die Vorarbeiten für die Umstellung. Wichtig dabei: Buy-In auf allen Ebenen ereichen, POCs zusammenhacken und <a href="https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/">nicht einfach alles neu schreiben</a>.</p>
<p>Für die Überführung der Closure-Module in ES-Module wurde ein <a href="https://github.com/DreierF/closure-es6-converter">Konverter</a> programmiert, die TypeScript-Migration mithilfe des Closure-TS-Coverters</a> halbautomatisch und Schritt für Schritt durchgeführt. Natürlich kommen wir nicht umhin, die Entscheidung für React in Anbetracht der zahllosen Alternativen zu hinterfragen, ebenso die Entscheidung für <a href="https://vitejs.dev/">Vite</a> anstelle von Webpack, diskutieren die Ob und Wie von Feature-Entwicklung während des Umbaus und fragen uns natürlich auch, wie es zu verhindern ist, dass der aktuelle Code schlimmes Legacy&nbsp;2.0 wird. Am Ende fasst Florian die positiven Ergebnisse des Umbaus zusammen und gibt Abschließende Empfehlungen für vergleichbare Migrationsprojekte.</p>
</dd>
</dl>


Gast Florian Dreier (Github) erzählt Peter und Vanessa von der Modernisierung eines Legacy-Frontends! Unser Sponsor Diese Folge wird gesponsert von REWE digital. Seit 2014 digitalisiert das Kölner Unternehmen den Lebensmitteleinzelhandel mal so richtig. Mit knapp 500 agilen Expert:innen setzt man auf eigenverantwortliches Arbeiten, Teamautonomie, modernste Technologien, individuelle Weiterentwicklung und Innovation an jeder Ecke. So leistet [&#8230;]

Gast Florian Dreier (Github) erzählt Peter und Vanessa von der Modernisierung eines Legacy-Frontends!

Unser Sponsor


Diese Folge wird gesponsert von REWE digital. Seit 2014
digitalisiert das Kölner Unternehmen den Lebensmitteleinzelhandel mal so r[...]

Gast Florian Dreier (Github) erzählt Peter und Vanessa von der Modernisierung eines Legacy-Frontends!

Unser Sponsor


Diese Folge wird gesponsert von REWE digital. Seit 2014
digitalisiert das Kölner Unternehmen den Lebensmitteleinzelhandel mal so richtig. Mit
knapp 500 agilen Expert:innen setzt man auf eigenverantwortliches Arbeiten,
Teamautonomie, modernste Technologien, individuelle Weiterentwicklung und
Innovation an jeder Ecke. So leistet man wertvolle Pionierarbeit für einen der größten
Handels- und Touristikkonzerne Europas.
Neugierig geworden? Dann schaut jetzt auf rewe-digital.com,  LinkedIn,  Twitter oder
 YouTube vorbei und hört in REWE digitals eigenen Tech-Podcast  Codes und schmerzlos rein!


Schaunotizen

[00:02:00] Modernisierung einer Legacy-Frontend-Codebase

Florians Arbeitgeber war mit einem alten Frontend auf Basis von Googles Closure-Tools gesegnet, das modernisiert werden wollte. Zunächst listen wir die zahlreichen Gründe für das Ersetzen des alten Stacks auf (schlechte DX, Inkompatibilität zum restlichen JS-Ökosystem) und sprechen dann über die Vorarbeiten für die Umstellung. Wichtig dabei: Buy-In auf allen Ebenen ereichen, POCs zusammenhacken und nicht einfach alles neu schreiben.
Für die Überführung der Closure-Module in ES-Module wurde ein Konverter programmiert, die TypeScript-Migration mithilfe des Closure-TS-Coverters halbautomatisch und Schritt für Schritt durchgeführt. Natürlich kommen wir nicht umhin, die Entscheidung für React in Anbetracht der zahllosen Alternativen zu hinterfragen, ebenso die Entscheidung für Vite anstelle von Webpack, diskutieren die Ob und Wie von Feature-Entwicklung während des Umbaus und fragen uns natürlich auch, wie es zu verhindern ist, dass der aktuelle Code schlimmes Legacy 2.0 wird. Am Ende fasst Florian die positiven Ergebnisse des Umbaus zusammen und gibt Abschließende Empfehlungen für vergleichbare Migrationsprojekte.

Revision 519: Modernisierung einer Legacy Frontend-Codebase

<p>Schepp sprachen in dieser Throwback-Revision über diverse Browserfeatures (neu und alt) sowie die aktuelle Gesamtsituation im Browser-Markt.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.factorial.io/de/jobs?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/02/FAC_Banner_workingdraft_v3.jpg" alt="" /></a></p>
<div class="message_content">
<p>Factorial ist eine Digitalagentur mit einem internationalen Team und dem Fokus auf Open Source Technologien, die für regionale und internationale Kunden digitale Lösungen entwickelt. Mit Kompetenzen im Bereich Development, Design und Projektmanagement treibt die Agentur die digitale Transformation ihrer Kunden voran. Zu den Anwendungsbereichen zählen unter anderem Hosting, Content Management, Qualitätssicherung, Automatisierung und die Integration heterogener Systemlandschaften.</p>
<p>Mehr Infos zu den aktuellen Stellenausschreibungen gibt es hier: <a href="https://www.factorial.io/de/jobs?ref=workingdraft.de">www.factorial.io/de/jobs</a>.<br />
In diesem Video stellt unser Kollege Julian den Frontend Job bei Factorial vor:  <a href="https://bit.ly/3tZJjHz?ref=workingdraft.de">https://bit.ly/3tZJjHz</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:35] <a href="https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022/">The baseline for web development in 2022<br />
</a></dt>
<dd>Was ist der unterste Webstandard- und Hardware-Stand, den Webentwickler:innen zu berücksichtigen haben? Alan Dávalos kommt zum Ergebnis, dass Safari der ollste relevante Browser und Supermarkt-Androids die langsamste relevante Plattform sind. In Zuge der Artikeldiskussion kommen React, Transpiler, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, fehlender Support für <a href="https://caniuse.com/css-subgrid">Subgrids</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display#box"><code>display: contents</code></a> zur Sprache.</dd>
<dt>[00:23:59] <a href="https://web.dev/structured-clone/"><code>structuredClone()</code></a></dt>
<dd>Mit <code>structuredClone()</code> kommt ein neuer Weg zum Klonen von JS-Objekten die Browser (z.Z. noch nur <a href="https://caniuse.com/?search=structuredClone">Firefox und Safari</a>). Wir debattieren die diversen halbgaren Alternativen und die schlechten Aussichten für einen Polyfill.</dd>
<dt>[00:31:14] <a href="https://firt.dev/ios-15.4b/">Neue Web-Features in iOS 15.4</a></dt>
<dd>Es lebt! Das neue iOS bzw. der neue Safari rüsten in Sachen Webstandards auf. Spannender als einzelne Features (PWA, Push API, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior"><code>scroll-behavior</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a>, <a href="https://webkit.org/blog/12209/introducing-the-dialog-element/"><code>&lt;dialog&gt;</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API">Web Locks API</a> (s. <a href="https://workingdraft.de/445/">Revision 445</a>)) finden wir aber den Blick auf die Gesamtsituation am Browser-Markt. Safari <a href="https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/">verwahrlost</a>, ist (noch) der einzige Browser auf iOS und Firefox ist im Zombie-Modus auf dem Weg in die Bedeutungslosigkeit. Wir fabulieren über Wettbewerbsrecht, Verschwörungstheorien und die Zukunft der Browsermarkts.</dd>
</dl>
<h3>[01:03:54] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/">Fuite</a></dt>
<dd>Sehr einfach zu benutzender Memory-Leak-Detektor.</dd>
<dt><a href="https://dom-city.github.io/">DOM City</a></dt>
<dd>Spielerisch die DOM-API lernen.</dd>
<dt><a href="https://free-for.dev/">free-for.dev</a></dt>
<dd>Absurd lange Liste von Services mit kostenlosen Angeboten oder zumindest Trials.</dd>
</dl>


Schepp sprachen in dieser Throwback-Revision über diverse Browserfeatures (neu und alt) sowie die aktuelle Gesamtsituation im Browser-Markt. Unser Sponsor Factorial ist eine Digitalagentur mit einem internationalen Team und dem Fokus auf Open Source Technologien, die für regionale und internationale Kunden digitale Lösungen entwickelt. Mit Kompetenzen im Bereich Development, Design und Projektmanagement treibt die Agentur die [&#8230;]

Schepp sprachen in dieser Throwback-Revision über diverse Browserfeatures (neu und alt) sowie die aktuelle Gesamtsituation im Browser-Markt.

Unser Sponsor


Factorial ist eine Digitalagentur mit einem internationalen Team und dem Fokus auf Open Sou[...]

Schepp sprachen in dieser Throwback-Revision über diverse Browserfeatures (neu und alt) sowie die aktuelle Gesamtsituation im Browser-Markt.

Unser Sponsor


Factorial ist eine Digitalagentur mit einem internationalen Team und dem Fokus auf Open Source Technologien, die für regionale und internationale Kunden digitale Lösungen entwickelt. Mit Kompetenzen im Bereich Development, Design und Projektmanagement treibt die Agentur die digitale Transformation ihrer Kunden voran. Zu den Anwendungsbereichen zählen unter anderem Hosting, Content Management, Qualitätssicherung, Automatisierung und die Integration heterogener Systemlandschaften.
Mehr Infos zu den aktuellen Stellenausschreibungen gibt es hier: www.factorial.io/de/jobs.
In diesem Video stellt unser Kollege Julian den Frontend Job bei Factorial vor:  https://bit.ly/3tZJjHz.


Schaunotizen

[00:02:35] The baseline for web development in 2022

Was ist der unterste Webstandard- und Hardware-Stand, den Webentwickler:innen zu berücksichtigen haben? Alan Dávalos kommt zum Ergebnis, dass Safari der ollste relevante Browser und Supermarkt-Androids die langsamste relevante Plattform sind. In Zuge der Artikeldiskussion kommen React, Transpiler, CSS Grid, fehlender Support für Subgrids und display: contents zur Sprache.
[00:23:59] structuredClone()
Mit structuredClone() kommt ein neuer Weg zum Klonen von JS-Objekten die Browser (z.Z. noch nur Firefox und Safari). Wir debattieren die diversen halbgaren Alternativen und die schlechten Aussichten für einen Polyfill.
[00:31:14] Neue Web-Features in iOS 15.4
Es lebt! Das neue iOS bzw. der neue Safari rüsten in Sachen Webstandards auf. Spannender als einzelne Features (PWA, Push API, scroll-behavior, :has(), <dialog>, Web Locks API (s. Revision 445)) finden wir aber den Blick auf die Gesamtsituation am Browser-Markt. Safari verwahrlost, ist (noch) der einzige Browser auf iOS und Firefox ist im Zombie-Modus auf dem Weg in die Bedeutungslosigkeit. Wir fabulieren über Wettbewerbsrecht, Verschwörungstheorien und die Zukunft der Browsermarkts.

[01:03:54] Keine Schaunotizen

Fuite
Sehr einfach zu benutzender Memory-Leak-Detektor.
DOM City
Spielerisch die DOM-API lernen.
free-for.dev
Absurd lange Liste von Services mit kostenlosen Angeboten oder zumindest Trials.

Revision 518: Browser-Fundstücke

<p>Lange ist es her, dass wir uns zuletzt über ein CMS unterhalten haben &#8211; nun war es wieder soweit. Daniel Wentsch (<a href="https://wentsch.me">Website</a> / <a href="https://twitter.com/klickreflex">Twitter</a>) war unser Gast, und das (PHP-)CMS, welches er im Gepäck hatte, <a href="https://statamic.com/">Statamic</a>.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/02/Banner_lemon.markets.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.</p>
<p>Weitere Informationen zum Produkt und der Firma <a href="https://www.lemon.markets/de-de/podcast?ref=workingdraft.de">gibt es hier</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:36] <a href="https://statamic.com/">Statamic</a></dt>
<dd>Statamic, dessen name ein Mix aus &#8222;Static&#8220; und &#8222;Dynamic&#8220; darstellt, ist ein sogenanntes &#8222;Flat File&#8220;-CMS, das mit Laravel programmiert ist und das von so namhaften Playern wie dem SPIEGEL genutzt wird. Der größte Pluspunkt des CMS&#8216; ist, dass es Designern, Entwicklern und Redakteuren gleichmaßen gut von der Hand geht &#8211; also keiner der genannten Parteien Steine in den Weg legt. Wir reden über die Funktionsprinzipien im Umgang mit Statamic, als da wären: Content-Modeling (via Interface oder YAML) als Collections, Blueprints, Fieldsets, Fields, sowie die Bestandteile Forms und Taxonomy. Wir reden auch über den den zentralen Asset-Manager, welcher für Bilder Art-Direction unterstützt, über das Templating-System namens <a href="https://antlers.dev/">Antlers</a>, sowie über Starterkits wie <a href="https://peak.studio1902.nl/">Peak</a> eines ist. Schlussendlich geht um Multisite-Setups und Internationalisierung.</dd>
</dl>
<h3>(Keine) Schaunotizen</h3>
<dl>
<dt><a href="https://statamictutorials.com/">Statamic Tutorials</a></dt>
<dd>Die von Daniel erwähnten Statamic Tutorials vom Statamic-Experten und DER SPIEGEL Entwickler <a href="https://jonassiewertsen.com/">Jonas Siewertsen</a>. Aktuell noch in Beta. Am Besten beim Newsletter anmelden!</dd>
<dt><a href="https://www.youtube.com/playlist?app=desktop&amp;list=PLh_FueC3Q6vDE3hG485ifAaINM6vP3zDm">Videos der Statameet 2021</a></dt>
<dd>Im September 2021 fand eine kleine Konferenz zu Statamic statt, deren Talks Ihr hier schauen könnt.</dd>
<dt>Vergangene Episoden mit inhaltlichem Bezug zur aktuellen Folge:</dt>
<dd>
<ul>
<li><a href="https://workingdraft.de/342/">Revision 342: Was gibt es Neues in Laravel?</a></li>
<li><a href="https://workingdraft.de/499/">Revision 499: Laravel Livewire</a></li>
<li><a href="https://workingdraft.de/490/">Revision 490: Alpine JS &amp; Petit Vue mit Jon Uhlmann</a></li>
</ul>
</dd>
<dt><a href="https://www.algolia.com/">Algolia</a></dt>
<dd>Ein gehostetes Elastic Search, für das es einen sogenannten <a href="https://statamic.dev/search#algolia-driver">Statamic-&#8222;Driver&#8220; gibt</a>.</dd>
</dl>


Lange ist es her, dass wir uns zuletzt über ein CMS unterhalten haben &#8211; nun war es wieder soweit. Daniel Wentsch (Website / Twitter) war unser Gast, und das (PHP-)CMS, welches er im Gepäck hatte, Statamic. Unser Sponsor Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. [&#8230;]

Lange ist es her, dass wir uns zuletzt über ein CMS unterhalten haben – nun war es wieder soweit. Daniel Wentsch (Website / Twitter) war unser Gast, und das (PHP-)CMS, welches er im Gepäck hatte, Statamic.

Unser Sponsor


Diese Folge wird ges[...]

Lange ist es her, dass wir uns zuletzt über ein CMS unterhalten haben – nun war es wieder soweit. Daniel Wentsch (Website / Twitter) war unser Gast, und das (PHP-)CMS, welches er im Gepäck hatte, Statamic.

Unser Sponsor


Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.
Weitere Informationen zum Produkt und der Firma gibt es hier.


Schaunotizen

[00:01:36] Statamic
Statamic, dessen name ein Mix aus „Static“ und „Dynamic“ darstellt, ist ein sogenanntes „Flat File“-CMS, das mit Laravel programmiert ist und das von so namhaften Playern wie dem SPIEGEL genutzt wird. Der größte Pluspunkt des CMS‘ ist, dass es Designern, Entwicklern und Redakteuren gleichmaßen gut von der Hand geht – also keiner der genannten Parteien Steine in den Weg legt. Wir reden über die Funktionsprinzipien im Umgang mit Statamic, als da wären: Content-Modeling (via Interface oder YAML) als Collections, Blueprints, Fieldsets, Fields, sowie die Bestandteile Forms und Taxonomy. Wir reden auch über den den zentralen Asset-Manager, welcher für Bilder Art-Direction unterstützt, über das Templating-System namens Antlers, sowie über Starterkits wie Peak eines ist. Schlussendlich geht um Multisite-Setups und Internationalisierung.

(Keine) Schaunotizen

Statamic Tutorials
Die von Daniel erwähnten Statamic Tutorials vom Statamic-Experten und DER SPIEGEL Entwickler Jonas Siewertsen. Aktuell noch in Beta. Am Besten beim Newsletter anmelden!
Videos der Statameet 2021
Im September 2021 fand eine kleine Konferenz zu Statamic statt, deren Talks Ihr hier schauen könnt.
Vergangene Episoden mit inhaltlichem Bezug zur aktuellen Folge:


Revision 342: Was gibt es Neues in Laravel?
Revision 499: Laravel Livewire
Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann


Algolia
Ein gehostetes Elastic Search, für das es einen sogenannten Statamic-„Driver“ gibt.

Revision 517: Statamic CMS

<p>Nachdem wir in der Vergangenheit bereits zu <a href="https://workingdraft.de/378/">Tailwind 1</a> und <a href="https://workingdraft.de/464/">Tailwind 2</a> entsprechende Episoden aufgenommen haben, haben wir uns anlässlich des Erscheinens der Version 3 erneut mit unserem letztmaligen Gast <a href="http://www.milanmatull.com/">Milan</a> zusammengesetzt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] <a href="https://tailwindcss.com/blog/tailwindcss-v3">Tailwind CSS v3.0</a></dt>
<dd>Wir beginnen mit einem kurzen Recap, was das Tailwind-Framework sein möchte. Wir stellen beim Blick in <a href="https://2021.stateofcss.com/en-US/technologies/css-frameworks/">The State of CSS</a> fest, dass Tailwinds Bekanntheitsgrad und Popularität in den letzten zwei Jahren stark gestiegen ist. Mit der Version 3 haben sich die Macher dank eines neuen <a href="https://tailwindcss.com/blog/tailwindcss-v3#just-in-time-all-the-time">Just-in-Time-Compilers</a> von bisherigen Limitierungen befreit &#8211; und <a href="https://antfu.me/posts/windicss-and-tailwind-jit">dabei das Ego von JIT-Compiler-Pionieren gekränkt</a>. Ob die Macher des Prettier-Plugins <a href="https://marketplace.visualstudio.com/items?itemName=heybourn.headwind">Headwind</a> ob der Einführung eines <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier">offiziellen Plugins zum automatischen Sortieren von Tailwind-Klassen in HTML</a> beleidigt sind, ist hingegen nicht überliefert. Für Entwickler, welche kein Node in ihren Stacks verbauen dürfen oder möchten, gibt es ebenfalls neu die eigenständige <a href="https://tailwindcss.com/blog/standalone-cli">Tailwind CLI</a>. Ansonsten bringt Tailwind 3, von allen Fesseln befreit, mehr von bislang schon Bewährtem: Mehr moderne CSS APIs, mehr Farben, mehr Media Queries, mehr Internationalisierung und mehr Feinschliff.</dd>
</dl>


Nachdem wir in der Vergangenheit bereits zu Tailwind 1 und Tailwind 2 entsprechende Episoden aufgenommen haben, haben wir uns anlässlich des Erscheinens der Version 3 erneut mit unserem letztmaligen Gast Milan zusammengesetzt. Schaunotizen [00:00:59] Tailwind CSS v3.0 Wir beginnen mit einem kurzen Recap, was das Tailwind-Framework sein möchte. Wir stellen beim Blick in The State [&#8230;]

Nachdem wir in der Vergangenheit bereits zu Tailwind 1 und Tailwind 2 entsprechende Episoden aufgenommen haben, haben wir uns anlässlich des Erscheinens der Version 3 erneut mit unserem letztmaligen Gast Milan zusammengesetzt.
Schaunotizen

[00:00:5[...]

Nachdem wir in der Vergangenheit bereits zu Tailwind 1 und Tailwind 2 entsprechende Episoden aufgenommen haben, haben wir uns anlässlich des Erscheinens der Version 3 erneut mit unserem letztmaligen Gast Milan zusammengesetzt.
Schaunotizen

[00:00:59] Tailwind CSS v3.0
Wir beginnen mit einem kurzen Recap, was das Tailwind-Framework sein möchte. Wir stellen beim Blick in The State of CSS fest, dass Tailwinds Bekanntheitsgrad und Popularität in den letzten zwei Jahren stark gestiegen ist. Mit der Version 3 haben sich die Macher dank eines neuen Just-in-Time-Compilers von bisherigen Limitierungen befreit – und dabei das Ego von JIT-Compiler-Pionieren gekränkt. Ob die Macher des Prettier-Plugins Headwind ob der Einführung eines offiziellen Plugins zum automatischen Sortieren von Tailwind-Klassen in HTML beleidigt sind, ist hingegen nicht überliefert. Für Entwickler, welche kein Node in ihren Stacks verbauen dürfen oder möchten, gibt es ebenfalls neu die eigenständige Tailwind CLI. Ansonsten bringt Tailwind 3, von allen Fesseln befreit, mehr von bislang schon Bewährtem: Mehr moderne CSS APIs, mehr Farben, mehr Media Queries, mehr Internationalisierung und mehr Feinschliff.

Revision 516: Tailwind CSS v3.0

<p><strong>Marc J. Schmidt</strong> (<a href="https://twitter.com/MarcJSchmidt/">Twitter</a>, <a href="https://github.com/marcj">Github</a>, <a href="https://marcjschmidt.de/">Web</a>), Founder bei <a href="https://deepkit.io/">deepkitIO</a> und TypeScript-Nerd, hat sich Gedanken (und noch einiges mehr als bloße Gedanken) zu TypeScript-Runtime-Typen gemacht. In dieser Revision stellt er sich Peters kritischen Fragen, und stellt seine Pläne für eine neue TypeScript-Zukunft vor.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:01] TypeScript Runtime Types/Reflection</dt>
<dd>TypeScript ist de facto ein Linter und für alles, was zur Laufzeit passieren soll, braucht es Schema-Validatoren wie <a href="https://github.com/colinhacks/zod">zod</a>, die Schema-DSL von <a href="https://www.prisma.io">Prisma</a>, <a href="https://json-schema.org/">JSON Schema</a> oder <a href="https://www.typescriptneedstypes.com/">eins der zahlreichen anderen Projekte aus dieser Kategorie</a>. Wenn aber auf Client wie Server TypeScript laufen, dann, so Marc, könnten Runtime-Typen die bessere Lösung sein! Marc und Peter diskutieren den allgemeinen Wert von Typen für allerlei Use Cases, die Limitierungen der Ableitung von TS-Typen aus Runtime-Tools <a href="https://basarat.gitbook.io/typescript/main-1/nominaltyping">Branded/Nominal Types</a> und <a href="https://www.typescriptlang.org/docs/handbook/decorators.html">Decorators</a>. <a href="https://github.com/microsoft/TypeScript/issues/3628">Der althergebrachten Debatte um Runtime Types/Reflection</a> nähren wir uns, indem wie die Möglichkeiten des Typsystems (<a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html">Declaration Merging</a>, <a href="https://en.wikipedia.org/wiki/Control_flow_analysis">Control flow analysis</a> und alles, was <a href="https://github.com/codemix/ts-sql">ts-sql</a> möglich macht) und die Eigenheiten des Projektmanagements des Produkts TypeScript (ständige Breaking Changes, keine Spezifikation) durchkauen. Wie könnten Runtime Types umgesetzt werden? Marc hat <a href="https://github.com/microsoft/TypeScript/issues/47658">ausführlich</a> <a href="https://twitter.com/MarcJSchmidt/status/1450471493088030737">ausgearbeitet</a>, wie Runtime-Type-Bytecode in der Praxis aussehen könnte! Wir sprechen über den Weg zur Umsetzung, den Kampf mit privaten Compiler-Hooks und eine mögliche Zukunft für Runtime Types/Reflection im Angesicht der <a href="https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals#non-goals">offiziellen Anti-Ziele von TypeScript</a>.</dd>
</dl>


Marc J. Schmidt (Twitter, Github, Web), Founder bei deepkitIO und TypeScript-Nerd, hat sich Gedanken (und noch einiges mehr als bloße Gedanken) zu TypeScript-Runtime-Typen gemacht. In dieser Revision stellt er sich Peters kritischen Fragen, und stellt seine Pläne für eine neue TypeScript-Zukunft vor. Schaunotizen [00:01:01] TypeScript Runtime Types/Reflection TypeScript ist de facto ein Linter und für [&#8230;]

Marc J. Schmidt (Twitter, Github, Web), Founder bei deepkitIO und TypeScript-Nerd, hat sich Gedanken (und noch einiges mehr als bloße Gedanken) zu TypeScript-Runtime-Typen gemacht. In dieser Revision stellt er sich Peters kritischen Fragen, und stel[...]

Marc J. Schmidt (Twitter, Github, Web), Founder bei deepkitIO und TypeScript-Nerd, hat sich Gedanken (und noch einiges mehr als bloße Gedanken) zu TypeScript-Runtime-Typen gemacht. In dieser Revision stellt er sich Peters kritischen Fragen, und stellt seine Pläne für eine neue TypeScript-Zukunft vor.
Schaunotizen

[00:01:01] TypeScript Runtime Types/Reflection
TypeScript ist de facto ein Linter und für alles, was zur Laufzeit passieren soll, braucht es Schema-Validatoren wie zod, die Schema-DSL von Prisma, JSON Schema oder eins der zahlreichen anderen Projekte aus dieser Kategorie. Wenn aber auf Client wie Server TypeScript laufen, dann, so Marc, könnten Runtime-Typen die bessere Lösung sein! Marc und Peter diskutieren den allgemeinen Wert von Typen für allerlei Use Cases, die Limitierungen der Ableitung von TS-Typen aus Runtime-Tools Branded/Nominal Types und Decorators. Der althergebrachten Debatte um Runtime Types/Reflection nähren wir uns, indem wie die Möglichkeiten des Typsystems (Declaration Merging, Control flow analysis und alles, was ts-sql möglich macht) und die Eigenheiten des Projektmanagements des Produkts TypeScript (ständige Breaking Changes, keine Spezifikation) durchkauen. Wie könnten Runtime Types umgesetzt werden? Marc hat ausführlich ausgearbeitet, wie Runtime-Type-Bytecode in der Praxis aussehen könnte! Wir sprechen über den Weg zur Umsetzung, den Kampf mit privaten Compiler-Hooks und eine mögliche Zukunft für Runtime Types/Reflection im Angesicht der offiziellen Anti-Ziele von TypeScript.

Revision 515: Runtime-Typen für TypeScript

<p>Mit <a href="https://frederik-braun.com/">Frederik Braun</a> (<a href="https://github.com/mozfreddyb">Github</a>, <a href="https://twitter.com/freddyb">Twitter</a>), Firefox-Security-Großmeister und Workingdraft-Dauergast (bekannt aus den Revisionen <a href="https://workingdraft.de/447/">447</a> und <a href="https://workingdraft.de/452/">452</a>) beleuchteten Schepp und Peter diverse Aspekte rund um ASTs und Security.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:02] Linting und AST</dt>
<dd>Zu Beginn klären wir erst mal, was ein <a href="https://de.wikipedia.org/wiki/Syntaxbaum">Abstract Syntax Tree</a> überhaupt ist und wie wir ihn mit dem <a href="https://astexplorer.net/">AST explorer</a> erforschen können. Es gibt unterschiedliche Formate und zahlreiche Use Cases (u.A. <a href="https://de.wikipedia.org/wiki/Statische_Code-Analyse">Statische Analyse</a> via z.B. <a href="https://eslint.org/">ESLint</a> und Minifier). Den Weg zum AST via <a href="https://de.wikipedia.org/wiki/Tokenizer">Lexer</a> und <a href="https://de.wikipedia.org/wiki/Parser">Parser</a> beschreiben wir grob, empfehlen für Details aber das Standardwerk <a href="https://en.wikipedia.org/wiki/Compilers:_Principles,_Techniques,_and_Tools">Compilers: Principles, Techniques, and Tools</a>. Freddys Use Case für AST-Arbeit ist das <a href="https://www.npmjs.com/package/eslint-plugin-no-unsanitized">ESLint-Plugin no-unsanitized</a>, das seine Ursprünge im Zusammenhang mit <a href="https://de.wikipedia.org/wiki/Firefox_OS">Firefox OS</a> (RIP) hat. Über diesen Weg kommen wir, wie sollte es anderes sein, zu Sanitizer- und Security-Geschichten aus Freddys Alltag, v.a <a href="https://addons.mozilla.org/de/firefox/addon/multi-account-containers/">Multi Account Containers</a> in Firefox, die HTML-Sanitizer-API (<a href="https://wicg.github.io/sanitizer-api/">Specs</a>, <a href="https://workingdraft.de/447/">Workdingdraft-Revision 447</a>, <a href="https://wowirsindistvorne.show/html-sanitizer-api-mit-frederik-braun/">WWSIV-Folge zum Thema</a>, <a href="https://sanitizer-api.dev/">Playground</a>) sowie zu <a href="https://github.com/patrick-steele-idem/morphdom">Morphdom</a>, Tücken des HTML-Sanitizer-Baus und des HTML-Parsings, Custom Elements und allgemeinen Securityfragen. Unser Fazit: Unsicherheit hat sich als Konzept nicht bewährt und sollte abgeschafft werden.</dd>
</dl>


Mit Frederik Braun (Github, Twitter), Firefox-Security-Großmeister und Workingdraft-Dauergast (bekannt aus den Revisionen 447 und 452) beleuchteten Schepp und Peter diverse Aspekte rund um ASTs und Security. Schaunotizen [00:01:02] Linting und AST Zu Beginn klären wir erst mal, was ein Abstract Syntax Tree überhaupt ist und wie wir ihn mit dem AST explorer erforschen können. Es [&#8230;]

Mit Frederik Braun (Github, Twitter), Firefox-Security-Großmeister und Workingdraft-Dauergast (bekannt aus den Revisionen 447 und 452) beleuchteten Schepp und Peter diverse Aspekte rund um ASTs und Security.
Schaunotizen

[00:01:02] Linting und AST
[...]

Mit Frederik Braun (Github, Twitter), Firefox-Security-Großmeister und Workingdraft-Dauergast (bekannt aus den Revisionen 447 und 452) beleuchteten Schepp und Peter diverse Aspekte rund um ASTs und Security.
Schaunotizen

[00:01:02] Linting und AST
Zu Beginn klären wir erst mal, was ein Abstract Syntax Tree überhaupt ist und wie wir ihn mit dem AST explorer erforschen können. Es gibt unterschiedliche Formate und zahlreiche Use Cases (u.A. Statische Analyse via z.B. ESLint und Minifier). Den Weg zum AST via Lexer und Parser beschreiben wir grob, empfehlen für Details aber das Standardwerk Compilers: Principles, Techniques, and Tools. Freddys Use Case für AST-Arbeit ist das ESLint-Plugin no-unsanitized, das seine Ursprünge im Zusammenhang mit Firefox OS (RIP) hat. Über diesen Weg kommen wir, wie sollte es anderes sein, zu Sanitizer- und Security-Geschichten aus Freddys Alltag, v.a Multi Account Containers in Firefox, die HTML-Sanitizer-API (Specs, Workdingdraft-Revision 447, WWSIV-Folge zum Thema, Playground) sowie zu Morphdom, Tücken des HTML-Sanitizer-Baus und des HTML-Parsings, Custom Elements und allgemeinen Securityfragen. Unser Fazit: Unsicherheit hat sich als Konzept nicht bewährt und sollte abgeschafft werden.

Revision 514: ASTs, Linter und Security mit Frederik Braun

<p>Mit 1,5 Gästen in Person von <strong><a href="https://twitter.com/TheNicoKoenig">Nico König</a></strong> (Bootcamps und Training bei <a href="https://www.coding-bootcamps.eu/">coding-bootcamps.eu</a>) und <strong><a href="https://twitter.com/jkphl">Joschi Kuphal</a></strong> (<a href="https://tollwerk.de/">tollwerk.de</a>) eruieren Vanessa, Peter und Schepp Wohl und Wehe von Komplexität in Webtechnologien.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] Komplexität</dt>
<dd>Nicos Aufhänger für das Thema ist der Umgang mit Komplexität speziell im Bootcamp-Kontext. Davon ausgehen kommen wir zur <a href="https://en.wikipedia.org/wiki/Rule_of_least_power">Rule of least power</a>, grübeln über den Mindshare-Bonus von komplexen Tools und rekapitulieren Entwicklung der Webtechnologien und die Expansion der Use Cases für Webtechnologien. Wir erzählen nicht nur Komplexitäts-Geschichten aus der Praxis (vergleichbar mit denen von <a href="https://www.htmhell.dev/">htmhell.dev</a>), sondern überlegen auch, wie es jeweils so weit kommen konnte. Gegen Ende geht&#8217;s außerdem um Titel und Stufen, Nachhaltigkeit und Mehrdeutigkeitstoleranz.</dd>
</dl>


Mit 1,5 Gästen in Person von Nico König (Bootcamps und Training bei coding-bootcamps.eu) und Joschi Kuphal (tollwerk.de) eruieren Vanessa, Peter und Schepp Wohl und Wehe von Komplexität in Webtechnologien. Schaunotizen [00:00:58] Komplexität Nicos Aufhänger für das Thema ist der Umgang mit Komplexität speziell im Bootcamp-Kontext. Davon ausgehen kommen wir zur Rule of least power, grübeln [&#8230;]

Mit 1,5 Gästen in Person von Nico König (Bootcamps und Training bei coding-bootcamps.eu) und Joschi Kuphal (tollwerk.de) eruieren Vanessa, Peter und Schepp Wohl und Wehe von Komplexität in Webtechnologien.
Schaunotizen

[00:00:58] Komplexität
Nicos [...]

Mit 1,5 Gästen in Person von Nico König (Bootcamps und Training bei coding-bootcamps.eu) und Joschi Kuphal (tollwerk.de) eruieren Vanessa, Peter und Schepp Wohl und Wehe von Komplexität in Webtechnologien.
Schaunotizen

[00:00:58] Komplexität
Nicos Aufhänger für das Thema ist der Umgang mit Komplexität speziell im Bootcamp-Kontext. Davon ausgehen kommen wir zur Rule of least power, grübeln über den Mindshare-Bonus von komplexen Tools und rekapitulieren Entwicklung der Webtechnologien und die Expansion der Use Cases für Webtechnologien. Wir erzählen nicht nur Komplexitäts-Geschichten aus der Praxis (vergleichbar mit denen von htmhell.dev), sondern überlegen auch, wie es jeweils so weit kommen konnte. Gegen Ende geht’s außerdem um Titel und Stufen, Nachhaltigkeit und Mehrdeutigkeitstoleranz.

Revision 513: Komplexität von Webtechnologien

Wöchentlicher News-Podcast für Webdesigner und -entwickler

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 524: Design Systeme

Working Draft

Revision 523: Wenig TypeScript und viel Vermischtes

Working Draft

Revision 522: MFs Architektur mit Webpack Module Federation und Dapr

Working Draft

Revision 521: WebBluetooth, WebUSB und WebNFC

Working Draft

Revision 520: Unit-Testing / Testing Library

Working Draft

Revision 519: Modernisierung einer Legacy Frontend-Codebase

Working Draft

Revision 518: Browser-Fundstücke

Working Draft

Revision 517: Statamic CMS

Working Draft

Revision 516: Tailwind CSS v3.0

Working Draft

Revision 515: Runtime-Typen für TypeScript

Working Draft

Revision 514: ASTs, Linter und Security mit Frederik Braun

Working Draft

Revision 513: Komplexität von Webtechnologien

Working Draft