<p>Hans, Stefan und Schepp reden heute mit <a href="https://twitter.com/luka5c0m" target="_blank" rel="noopener noreferrer">Lukas Holzer</a> von <a href="https://baristadynatrace.com">Dynatrace</a> über <a href="https://bazel.build/">Bazel</a>, dem neuen Build Tool aus dem Hause Google.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<div class="message_content">
<a class="message_link" href="https://heise.de/s/w58X"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-left: 0.5rem; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/01/webdev_400x230.jpg" alt="" /></a></p>
<p>Geschmeidige Animationen, Webfonts, hochauflösende Fotos – eine Website muss heute viel anbieten. Oft scheint zu gelten: Viel hilft viel. Das führt aber zu durchschnittlichen Webseitegrößen von zwei MByte und der Browser muss fast ein halbes MByte JavaScript-Code verdauen. Lädt eine Seite dann zu lange, klicken Nutzer weiter. Auch Google hat offiziell angekündigt, dass die &#8222;Page Experience&#8220; und damit die Performance zum Ranking-Faktor wird. Erfahre mehr dazu auf der Online-Konferenz c’t webdev am 9. Februar. Vertiefe dein Wissen am Folgetag in Workshops, u. a. zu Mobile App Entwicklung mit React Native.</p>
<p>Hol dir 15% Rabatt mit dem Code WEBDEVPOD21! Weitere Infos unter: <a href="https://heise.de/s/w58X">heise.de/s/w58X</a></p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:52] <a href="https://bazel.build">Bazel</a></dt>
<dd>Lukas erzählt uns von seinen Erfahrungen mit Bazel, einem polyglotten Build-System, das schnelle, inkrementelle Builds sowohl lokal als auch auf CI/CD ermöglicht. Ziel von Bazel ist es einen sehr genauen Abhängigkeitsbaum zu definieren, der erlaubt nur Änderungen zu kompilieren. Wir vergleichen mit <a href="https://gradle.org">Gradle</a>, Facebook&#8217;s <a href="https://github.com/facebook/buck">Buck</a>. Bazel startete als internes Tool bei Google, damals noch <a href="https://en.wikipedia.org/wiki/Bazel_(software)" target="_blank" rel="noopener noreferrer">Blaze</a> genannt. Da Google alles in einem großen Monorepo entwickelt, zahlt es sich aus wenn Zehntausenede Entwickler nicht immer alles durchbauen müssen, um kleine Änderungen festzustellen. In Bazel schreibt man eigene Build-Files mit <a href="https://github.com/bazelbuild/starlark" target="_blank" rel="noopener noreferrer">Starlark</a>, einem Python Dialekt. Mit Hilfe dieser Dateien baut Bazel einen Abhängigkeitsbaum auf, kann Kompilate dank <a href="https://github.com/buildbuddy-io/buildbuddy" target="_blank" rel="noopener noreferrer">Remote Cache Server</a> sehr gut cachen. Der Unterschied zu Systemen wie <a href="https://nx.dev">Nx</a> liegt vor allem darin, dass jedes Artefakt genau bestimmt werden kann und man so unabhängig von Git Commits wird. Zusätzlich erlaubt man den Einzug von schnellen und iterativen Entwicklungs-Tools, wie <a href="https://github.com/open-wc/es-dev-server">ES Dev Server</a>, <a href="https://github.com/evanw/esbuild">ES Build</a>, u.ä. Zu guter Letzt reden wir auch noch von Sketchmine, einem ambitionierten Projekt aus Angular Sketch Files zu generieren. Videos gibt es dazu auch: <a href="https://www.youtube.com/watch?v=kjWqXmuobsM">Stahlstadt.js</a>, <a href="https://www.youtube.com/watch?v=3_XvaSD_0xo">Angular Connect</a>. Lukas ist übrigens Contributor bei den Node.js Regeln von Bazel und freut sich über viel Feedback!</dd>
</dl>


Hans, Stefan und Schepp reden heute mit Lukas Holzer von Dynatrace über Bazel,
dem neuen Build Tool aus dem Hause Google.


UNSER SPONSOR

Geschmeidige Animationen, Webfonts, hochauflösende Fotos – ei…

Working Draft

Hans, Stefan und Schepp reden heute mit Lukas Holzer von Dynatrace über Bazel,
dem neuen Build Tool aus dem Hause Google.


UNSER SPONSOR

Geschmeidige Animationen, Webfonts, hochauflösende Fotos – eine Website muss
heute viel anbieten. Oft scheint zu gelten: Viel hilft viel. Das führt aber zu
durchschnittlichen Webseitegrößen von zwei MByte und der Browser muss fast ein
halbes MByte JavaScript-Code verdauen. Lädt eine Seite dann zu lange, klicken
Nutzer weiter. Auch Google hat offiziell angekündigt, dass die „Page Experience“
und damit die Performance zum Ranking-Faktor wird. Erfahre mehr dazu auf der
Online-Konferenz c’t webdev am 9. Februar. Vertiefe dein Wissen am Folgetag in
Workshops, u. a. zu Mobile App Entwicklung mit React Native.

Hol dir 15% Rabatt mit dem Code WEBDEVPOD21! Weitere Infos unter:
heise.de/s/w58X


SCHAUNOTIZEN

[00:01:52] BAZEL

Lukas erzählt uns von seinen Erfahrungen mit Bazel, einem polyglotten
Build-System, das schnelle, inkrementelle Builds sowohl lokal als auch auf CI/CD
ermöglicht. Ziel von Bazel ist es einen sehr genauen Abhängigkeitsbaum zu
definieren, der erlaubt nur Änderungen zu kompilieren. Wir vergleichen mit
Gradle, Facebook’s Buck. Bazel startete als internes Tool bei Google, damals
noch Blaze genannt. Da Google alles in einem großen Monorepo entwickelt, zahlt
es sich aus wenn Zehntausenede Entwickler nicht immer alles durchbauen müssen,
um kleine Änderungen festzustellen. In Bazel schreibt man eigene Build-Files mit
Starlark, einem Python Dialekt. Mit Hilfe dieser Dateien baut Bazel einen
Abhängigkeitsbaum auf, kann Kompilate dank Remote Cache Server sehr gut cachen.
Der Unterschied zu Systemen wie Nx liegt vor allem darin, dass jedes Artefakt
genau bestimmt werden kann und man so unabhängig von Git Commits wird.
Zusätzlich erlaubt man den Einzug von schnellen und iterativen
Entwicklungs-Tools, wie ES Dev Server, ES Build, u.ä. Zu guter Letzt reden wir
auch noch von Sketchmine, einem ambitionierten Projekt aus Angular Sketch Files
zu generieren. Videos gibt es dazu auch: Stahlstadt.js, Angular Connect. Lukas
ist übrigens Contributor bei den Node.js Regeln von Bazel und freut sich über
viel Feedback!

Revision 459: Bazel

<p>In dieser Revision dürften wir <a href="https://twitter.com/piyukore06">Priyanka Kore</a> und <a href="https://twitter.com/tobmaster">Tobias Struckmeier</a> von der <a href="https://twitter.com/adesso_SE">Adesso</a> als Gäste begrüßen und mit Ihnen über End-to-End-Testing mit Cypress sprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] <a href="https://www.cypress.io/">Cypress</a></dt>
<dd>Bevor sich unser Gespräch auf Cypress einschießt, klären wir, inwiefern Tests hilfreich sind, welche Software-Test-Methodiken es gibt, und wie diese alle sich zur berühmten Testing-Pyramide zusammenfügen:</p>
<p><img loading="lazy" style="width: 100%; max-width: 611px; height: auto;" src="https://workingdraft.de/wp-content/uploads/2021/01/1_Tcj3OsK8Kou7tCMQgeeCuw1.png" alt="Die Testing-Pyramide: Units-Test als breite Basis, Integration-Tests als schmalerer Block darüber und End-to-End-Tests schließlich als sehr schmale Spitze obendrauf." width="611" height="333" /></p>
<p>End-to-End-Tests (E2E) decken das ganze System ab und sind damit die umfassendsten Tests, sie durchzuführen stellt einen allerdings vor so manche Herausforderung:</p>
<ul>
<li>ggf. fehlt die nötige Infrastruktur dafür</li>
<li>das Setup ist aufwändig</li>
<li>sie laufen langsam und sind ressourcenhungrig</li>
<li>das Management von Testdaten ist nicht einfach</li>
<li>sie sind schwer in bestehende Projekte zu bringen</li>
<li>und sie harmonieren nicht immer mit hochdynamischen SPA</li>
</ul>
<p>Die meisten der genannte Probleme lassen sich darauf zurückführen, dass E2E-Tests über das recht eigene Selenium Webdriver gesteuert und sie in üblichen Browsern auf diversen Betriebssystemen durchgeführt werden. Mit dieser Vorgehensweise bricht Cypress und löst damit die meisten der oben genannten Probleme &#8211; und nimmt natürlich auch gewisse Nachteile in Kauf.</p>
<p>Cypress nutzt vom Fleck weg bestehende Browser im System und unterstützt alle Chromium-basierten Browser und den Mozilla Firefox. Desweiteren bringt Cypress auch einen eigenen Browser mit für den Fall, dass kein unterstützter Browser vorhanden ist, sowie hilfreiche Zusatztools wie Mocha, eine Assertion Library, Launcher/Runner, Reporter und einen Proxy. Unterstützt wird all das von <a href="https://docs.cypress.io/">einer exzellenten Dokumentation</a> Cypress ist also schnell und ohne großen Aufwand installiert, es läuft deutlich schneller als Selenium, zum einen weil es lokal läuft, zum anderen weil man bei der Interaktion mit dem DOM anders vorgehen kann als in Selenium und es lassen sich Dinge wie XHR-Calls und/oder Testdaten durch integrierte Tools sehr einfach simulieren. Und schließlich kann man Tests bei Fehlern sofort stoppen und ein Entwickler übernimmt die Fehlersuche in dem noch offenen Browser.</p>
<p>Wie erwähnt, hat Cypress natürlich auch Nachteile, welche die folgenden wären:</p>
<ul>
<li>Es werden nur Chromium- und Mozilla-Browser unterstützt</li>
<li>Cypress kann keine Tests durchführen, die mehr als einen Origin gleichzeitig umfassen</li>
<li>Cypress kann nicht mehrere Tests parallel durchführen, sofern man nicht deren payed Service nutzt</li>
<li>Es gibt keinen Standard-Weg Up- und Downloads zu testen, stattdessen viele mögliche Hacks</li>
</ul>
<p>Außerdem sprechen wir im Verlauf der Sendung über über die automatische Erzeugung von bebilderten Anleitungen via <a href="https://github.com/bahmutov/cypress-book-todomvc">Cypress-Book</a> und über das <a href="https://docs.cypress.io/guides/component-testing/introduction.html#What-is-Cypress-Component-Testing">Testen von einzelnen Komponenten</a> in Isolation.
</dd>
</dl>


In dieser Revision dürften wir Priyanka Kore und Tobias Struckmeier von der
Adesso als Gäste begrüßen und mit Ihnen über End-to-End-Testing mit Cypress
sprechen.


SCHAUNOTIZEN

[00:00:29] CYPRESS

Be…

In dieser Revision dürften wir Priyanka Kore und Tobias Struckmeier von der
Adesso als Gäste begrüßen und mit Ihnen über End-to-End-Testing mit Cypress
sprechen.


SCHAUNOTIZEN

[00:00:29] CYPRESS

Bevor sich unser Gespräch auf Cypress einschießt, klären wir, inwiefern Tests
hilfreich sind, welche Software-Test-Methodiken es gibt, und wie diese alle sich
zur berühmten Testing-Pyramide zusammenfügen:





End-to-End-Tests (E2E) decken das ganze System ab und sind damit die
umfassendsten Tests, sie durchzuführen stellt einen allerdings vor so manche
Herausforderung:

 * ggf. fehlt die nötige Infrastruktur dafür
 * das Setup ist aufwändig
 * sie laufen langsam und sind ressourcenhungrig
 * das Management von Testdaten ist nicht einfach
 * sie sind schwer in bestehende Projekte zu bringen
 * und sie harmonieren nicht immer mit hochdynamischen SPA

Die meisten der genannte Probleme lassen sich darauf zurückführen, dass
E2E-Tests über das recht eigene Selenium Webdriver gesteuert und sie in üblichen
Browsern auf diversen Betriebssystemen durchgeführt werden. Mit dieser
Vorgehensweise bricht Cypress und löst damit die meisten der oben genannten
Probleme – und nimmt natürlich auch gewisse Nachteile in Kauf.

Cypress nutzt vom Fleck weg bestehende Browser im System und unterstützt alle
Chromium-basierten Browser und den Mozilla Firefox. Desweiteren bringt Cypress
auch einen eigenen Browser mit für den Fall, dass kein unterstützter Browser
vorhanden ist, sowie hilfreiche Zusatztools wie Mocha, eine Assertion Library,
Launcher/Runner, Reporter und einen Proxy. Unterstützt wird all das von einer
exzellenten Dokumentation Cypress ist also schnell und ohne großen Aufwand
installiert, es läuft deutlich schneller als Selenium, zum einen weil es lokal
läuft, zum anderen weil man bei der Interaktion mit dem DOM anders vorgehen kann
als in Selenium und es lassen sich Dinge wie XHR-Calls und/oder Testdaten durch
integrierte Tools sehr einfach simulieren. Und schließlich kann man Tests bei
Fehlern sofort stoppen und ein Entwickler übernimmt die Fehlersuche in dem noch
offenen Browser.

Wie erwähnt, hat Cypress natürlich auch Nachteile, welche die folgenden wären:

 * Es werden nur Chromium- und Mozilla-Browser unterstützt
 * Cypress kann keine Tests durchführen, die mehr als einen Origin gleichzeitig
   umfassen
 * Cypress kann nicht mehrere Tests parallel durchführen, sofern man nicht deren
   payed Service nutzt
 * Es gibt keinen Standard-Weg Up- und Downloads zu testen, stattdessen viele
   mögliche Hacks

Außerdem sprechen wir im Verlauf der Sendung über über die automatische
Erzeugung von bebilderten Anleitungen via Cypress-Book und über das Testen von
einzelnen Komponenten in Isolation.

Revision 458: Cypress

<p>Developer und Speaker <a href="https://twitter.com/tbstimm"><strong>Tobi Timm</strong></a>, Senior Product Engineer bei <a href="https://sinnerschrader.com">SinnerSchrader</a>, Koorganisator bei <a href="https://nodeschool.io/augsburg/">Nodeschool MUX/AUX</a> und <a href="https://www.meetup.com/de-DE/reactmunich/">React Munich</a>, erzählte Stefan, Schepp und Vanessa über funktionale Programmierung und endliche Zustandsmaschinen in JavaScript.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] Funktionale Programmierung en Vogue</dt>
<dd>Durch die immer höhere Popularität von progressiven Frontend-Frameworks wie <a href="https://reactjs.org">React.js</a> und <a href="https://vuejs.org">Vue.js</a>, die jeweils Ansätze der Funktionalen Programmierung (FP) aufweisen, erlaubt die FP an sich einen Aufschwung in der Web Entwicklung. Neben <a href="https://elm-lang.org">Elm</a>, ein von Haskell inspiriertes Framework, gibt es für JavaScript-Entwickler und -Entwicklerinnen die Bibliothek <a href="https://ramdajs.com">Ramda.js</a>. Für <a href="https://eslint.org">ESLint</a> steht das Plugin <a href="https://www.npmjs.com/package/eslint-plugin-functional/v/0.5.1">eslint-plugin-functional</a> zur Verfügung. Das wohl wichtigste Paradigma der Funktionalen Programmierung besteht daraus, das ausschließlich Funktionen geschrieben werden. Die Konzepte kommen von <a href="https://www.haskell.org">Haskell</a>, <a href="https://m.heise.de/developer/artikel/Lisp-der-Geheimtipp-unter-den-Programmiersprachen-3851138.html?seite=all">LISP</a>, <a href="https://ocaml.org">OCaml</a> oder auch <a href="https://de.wikipedia.org/wiki/Scheme">Scheme</a>, einem Vorgänger von Javascript. Funktionen gelten als &#8222;<a href="https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function">First Class Citizen</a>&#8220; und werden dabei auch &#8222;<a href="https://www.freecodecamp.org/news/what-is-a-pure-function-in-javascript-acb887375dfe/">Pure Functions</a>&#8220; genannt. Diese generieren bei gleichem Input immer den gleichen Output und verwenden keine Variablen außerhalb ihres Scopes. Ein Vorteil von Funktionaler Programmierung ist dadurch, dass <a href="https://www.dev-insider.de/was-ist-nebenlaeufigkeit-a-926206/">Nebenläufigkeiten</a> verhindert werden und der Code weniger fehleranfällig ist. Getestet werden müssen dann Werte von außerhalb, wie z.B. Nutzereingaben oder Antworten von APIs. Für den Einstieg in die FP in einer bestehenden Codebase, empfiehlt Tobi z.B. For-Schleifen durch Funktionen wie <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">.map()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">.filter()</a> und <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">.reduce()</a> zu ersetzen. Zum Lernen empfehlen wir die Videos von <a href="https://twitter.com/drboolean">Dr. Boolean</a>.</dd>
<dt>Finite State Machines</dt>
<dd>Etwas, das ähnliche Effekte wie die FP erzeugt, sind State Machines und State Charts. <a href="https://xstate.js.org">XState</a> von <a href="https://github.com/davidkpiano">David Khourshid</a> ist hier das Framework für pure Javascript Entwicklung. Wie auch bei der FP ist die Lernkurve allerdings etwas höher, doch es scheint sich zu lohnen, sich mit diesem Thema zu befassen.</dd>
</dl>


Developer und Speaker Tobi Timm, Senior Product Engineer bei SinnerSchrader,
Koorganisator bei Nodeschool MUX/AUX und React Munich, erzählte Stefan, Schepp
und Vanessa über funktionale Programmierung …

Developer und Speaker Tobi Timm, Senior Product Engineer bei SinnerSchrader,
Koorganisator bei Nodeschool MUX/AUX und React Munich, erzählte Stefan, Schepp
und Vanessa über funktionale Programmierung und endliche Zustandsmaschinen in
JavaScript.


SCHAUNOTIZEN

[00:00:29] FUNKTIONALE PROGRAMMIERUNG EN VOGUE

Durch die immer höhere Popularität von progressiven Frontend-Frameworks wie
React.js und Vue.js, die jeweils Ansätze der Funktionalen Programmierung (FP)
aufweisen, erlaubt die FP an sich einen Aufschwung in der Web Entwicklung. Neben
Elm, ein von Haskell inspiriertes Framework, gibt es für JavaScript-Entwickler
und -Entwicklerinnen die Bibliothek Ramda.js. Für ESLint steht das Plugin
eslint-plugin-functional zur Verfügung. Das wohl wichtigste Paradigma der
Funktionalen Programmierung besteht daraus, das ausschließlich Funktionen
geschrieben werden. Die Konzepte kommen von Haskell, LISP, OCaml oder auch
Scheme, einem Vorgänger von Javascript. Funktionen gelten als „First Class
Citizen“ und werden dabei auch „Pure Functions“ genannt. Diese generieren bei
gleichem Input immer den gleichen Output und verwenden keine Variablen außerhalb
ihres Scopes. Ein Vorteil von Funktionaler Programmierung ist dadurch, dass
Nebenläufigkeiten verhindert werden und der Code weniger fehleranfällig ist.
Getestet werden müssen dann Werte von außerhalb, wie z.B. Nutzereingaben oder
Antworten von APIs. Für den Einstieg in die FP in einer bestehenden Codebase,
empfiehlt Tobi z.B. For-Schleifen durch Funktionen wie .map(), .filter() und
.reduce() zu ersetzen. Zum Lernen empfehlen wir die Videos von Dr. Boolean.

FINITE STATE MACHINES

Etwas, das ähnliche Effekte wie die FP erzeugt, sind State Machines und State
Charts. XState von David Khourshid ist hier das Framework für pure Javascript
Entwicklung. Wie auch bei der FP ist die Lernkurve allerdings etwas höher, doch
es scheint sich zu lohnen, sich mit diesem Thema zu befassen.

Revision 457: Funktionale Programmierung mit Tobi Timm

<p>Node.js-Ninja <strong><a href="https://twitter.com/goloroden">Golo Roden</a></strong>, Big Boss bei <a href="https://www.thenativeweb.io/">The Native Web</a>, schaute mal wieder vorbei (zuletzt: <a href="https://workingdraft.de/160/">160</a>, <a href="https://workingdraft.de/314/">314</a>) und informierte Stefan und Peter über die neuesten Neuerungen in Node.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] Neues aus Node.js</dt>
<dd>Anlässlich des Release von <a href="https://nodejs.medium.com/node-js-v15-0-0-is-here-deb00750f278">Node 15</a> ist ein Rundumschlag angebracht! Zu den wesentlichen Neuheuten gehört <a href="https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/">NPM 7</a>, worin diverser Ärger mit <code>package.json</code> und <code>package-lock.json</code> ausgeräumt wird. Wir lassen es uns bei dem Thema natürlich nicht nehmen, auch <a href="https://yarnpkg.com/">die Volksfront von Judäa</a> und <a href="https://github.com/pnpm/pnpm">die judäische Volksfront</a> zu erwähnen, den Sinn von <a href="https://semver.org/lang/de/">SemVer</a> zu hinterfragen und am Ende in den etablierten <a href="https://xkcd.com/927/">Standardisierungs-Pessimismus</a> abzugleiten. An konkreten Node-internen Änderungen bequatschen wir <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll"><code>String#replaceAll</code></a>, <a href="https://en.wikipedia.org/wiki/HTTP/3">HTTP/3</a>, den <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController">AbortController</a> und das Hickhack um <a href="https://nodejs.org/api/stream.html">Streams</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Streams_API">in</a> <a href="https://caolan.github.io/highland/">allen</a> <a href="https://rxjs-dev.firebaseapp.com/">Formen</a>. Warum es immer noch kein Fetch in Node gibt (nur als <a href="https://www.npmjs.com/package/node-fetch">Library</a>, wobei <a href="https://www.npmjs.com/package/axios">die populärere Löung ist</a>) besprechen wir genau wie den aktuellen Stand an der <a href="https://deno.land/">Deno-Front</a> (siehe auch: <a href="https://www.youtube.com/watch?v=M3BM9TB-8yA&amp;feature=youtu.be">10 Things I Regret About Node.js</a> und <a href="https://workingdraft.de/428/">Revision 428</a>). Zum Abschluss kommen wir um das Thema Nachhaltigkeit in OSS nicht herum und plädieren für restriktivere Lizenzen (z.B. <a href="https://de.wikipedia.org/wiki/GNU_Affero_General_Public_License">AGPL</a>, wie&#8217;s auch Golo bei seinem <a href="https://www.thenativeweb.io/wolkenkit/framework">Wolkenkit</a> macht). Zum Ausprobieren der diversen Node-Versionen emfehlen wir <a href="https://github.com/nvm-sh/nvm">nvm</a> und <a href="https://volta.sh/">Volta</a>.</dd>
</dl>


Node.js-Ninja Golo Roden, Big Boss bei The Native Web, schaute mal wieder vorbei
(zuletzt: 160, 314) und informierte Stefan und Peter über die neuesten
Neuerungen in Node.


SCHAUNOTIZEN

[00:00:30] N…

Node.js-Ninja Golo Roden, Big Boss bei The Native Web, schaute mal wieder vorbei
(zuletzt: 160, 314) und informierte Stefan und Peter über die neuesten
Neuerungen in Node.


SCHAUNOTIZEN

[00:00:30] NEUES AUS NODE.JS

Anlässlich des Release von Node 15 ist ein Rundumschlag angebracht! Zu den
wesentlichen Neuheuten gehört NPM 7, worin diverser Ärger mit package.json und
package-lock.json ausgeräumt wird. Wir lassen es uns bei dem Thema natürlich
nicht nehmen, auch die Volksfront von Judäa und die judäische Volksfront zu
erwähnen, den Sinn von SemVer zu hinterfragen und am Ende in den etablierten
Standardisierungs-Pessimismus abzugleiten. An konkreten Node-internen Änderungen
bequatschen wir String#replaceAll, HTTP/3, den AbortController und das Hickhack
um Streams in allen Formen. Warum es immer noch kein Fetch in Node gibt (nur als
Library, wobei die populärere Löung ist) besprechen wir genau wie den aktuellen
Stand an der Deno-Front (siehe auch: 10 Things I Regret About Node.js und
Revision 428). Zum Abschluss kommen wir um das Thema Nachhaltigkeit in OSS nicht
herum und plädieren für restriktivere Lizenzen (z.B. AGPL, wie’s auch Golo bei
seinem Wolkenkit macht). Zum Ausprobieren der diversen Node-Versionen emfehlen
wir nvm und Volta.

Revision 456: Aktuelle Entwicklungen in Node.js mit Golo Roden

<p>Heute haben wir gleich zwei Gäste zum Thema Sulu CMS: <a href="https://twitter.com/chirimoya">Thomas Schedler</a> und <a href="https://twitter.com/nevercodealone">Roland Golla</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28] <a href="https://sulu.io/">Sulu CMS</a></dt>
<dd>Sulu ist ein PHP-basiertes CMS, das mit dem Framework Symfony gebaut ist. Einst als Agentur CMS gestartet, erfreut es sich mittlerweile größerer Beliebtheit. Als Core-Developer gibt uns Thomas gute Einblicke in den Werdegang und die Features von Sulu CMS, Roland untermauert mit praxisnahen Beispielen.<br />
Wer einen Start mit Sulu bekommen möchte, kann sich beispielsweise <a href="https://youtu.be/9vGdmI8zz0s">dieses Video anschauen</a>. Außerdem hat Roland eine <a href="https://youtu.be/w8ZU6aksbrc">ganze Serie</a> an Video-Tutorials zum Thema aufgenommen. Ein Demo-Projekt gibt&#8217;s <a href="http://sulu.rocks/">hier</a>. Auch zum Headless-Betrieb ist das CMS geeignet. Wer einen tieferen Einblick sucht, der ist mit <a href="https://docs.sulu.io/en/2.2/">der Dokumentation</a> gut bedient.</dd>
</dl>


Heute haben wir gleich zwei Gäste zum Thema Sulu CMS: Thomas Schedler und Roland
Golla.


SCHAUNOTIZEN

[00:00:28] SULU CMS

Sulu ist ein PHP-basiertes CMS, das mit dem Framework Symfony gebaut ist. E…

Heute haben wir gleich zwei Gäste zum Thema Sulu CMS: Thomas Schedler und Roland
Golla.


SCHAUNOTIZEN

[00:00:28] SULU CMS

Sulu ist ein PHP-basiertes CMS, das mit dem Framework Symfony gebaut ist. Einst
als Agentur CMS gestartet, erfreut es sich mittlerweile größerer Beliebtheit.
Als Core-Developer gibt uns Thomas gute Einblicke in den Werdegang und die
Features von Sulu CMS, Roland untermauert mit praxisnahen Beispielen.
Wer einen Start mit Sulu bekommen möchte, kann sich beispielsweise dieses Video
anschauen. Außerdem hat Roland eine ganze Serie an Video-Tutorials zum Thema
aufgenommen. Ein Demo-Projekt gibt’s hier. Auch zum Headless-Betrieb ist das CMS
geeignet. Wer einen tieferen Einblick sucht, der ist mit der Dokumentation gut
bedient.

Revision 455: Sulu CMS

<p>Stefan und Peter trafen sich um ausnahmsweise mal nicht über TypeScript zu sprechen! Stattdessen geht um die Ergebnisse des <a href="https://2020.stateofcss.com/en-US/">State of CSS 2020!</a></p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:45] State of CSS 2020</dt>
<dd>Wir sprechen über einige Teile der Umfrage-Ergebnisse im Detail (etwa Grid, Subgrid, Masonry-Layout und Flexbox) und überspringen die weniger spannenden. Ausgiebige Brandmarkung erfahren nervige Features (Scroll Snap, <code>position:fixed</code>) und nervige Trends (CSS in React), während wir erneut Anlass finden, BEM zu lobpreisen. Und besonders freut uns natürlich, <a href="https://2020.stateofcss.com/en-US/resources/#podcasts_others">dass ihr uns in der Kategorie &#8222;sonstige Podcasts&#8220; auf einen Mittelfeld-Platz gewählt habt!</a></dd>
</dl>


Stefan und Peter trafen sich um ausnahmsweise mal nicht über TypeScript zu
sprechen! Stattdessen geht um die Ergebnisse des State of CSS 2020!


SCHAUNOTIZEN

[00:00:45] STATE OF CSS 2020

Wir spreche…

Stefan und Peter trafen sich um ausnahmsweise mal nicht über TypeScript zu
sprechen! Stattdessen geht um die Ergebnisse des State of CSS 2020!


SCHAUNOTIZEN

[00:00:45] STATE OF CSS 2020

Wir sprechen über einige Teile der Umfrage-Ergebnisse im Detail (etwa Grid,
Subgrid, Masonry-Layout und Flexbox) und überspringen die weniger spannenden.
Ausgiebige Brandmarkung erfahren nervige Features (Scroll Snap, position:fixed)
und nervige Trends (CSS in React), während wir erneut Anlass finden, BEM zu
lobpreisen. Und besonders freut uns natürlich, dass ihr uns in der Kategorie
„sonstige Podcasts“ auf einen Mittelfeld-Platz gewählt habt!

Special Edition: State of CSS 2020

<p>Wenn die Kinder schlafen und die Eltern gerade wieder wach geworden sind, ist es Zeit für eine Late-Night Show mit etlichen Themen, wenig rotem Faden, dafür gehörig viel Meinung. Kahlil und Stefan holen weit aus und schmieren gehörig Senf auf folgende Begriffe:</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<div class="message_content">
<a class="message_link" href="https://www.timr.com/workingdraft"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-left: 0.5rem; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/11/Working-Draft-Banner-klein.png" alt="" /></a></p>
<p>Kennst Du das Gefühl&#8230; die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? <a href="https://www.timr.com/workingdraft">timr</a> unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge.</p>
<p>Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter <a class="message_link" href="https://www.timr.com/workingdraft">timr.com/workingdraft</a>.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<p><b>[00:01:46]</b></p>
<dl>
<dt><a href="https://typescript-book.com">TypeScript in 50 Lessons</a></dt>
<dd>Stefans Buch ist immer noch hoch im Interesse der Kollegen. Nach einer Revision zum Schreiben an sich, geht&#8217;s hier nochmal um ein paar inhaltliche Themen und den Versuch, möglichst lange relevant zu bleiben..</dd>
<dt><a href="https://rust-linz.at">Rust</a></dt>
<dd>Seit Stefan das Rust Linz Meetup mitorganisiert, bestimmen die schönen Feinheiten dieser Sprache seinen Sinn für Programmieren.</dd>
<dt><a href="https://clojure.org/">Clojure</a></dt>
<dd>Eine funktionale Programmiersprache auf der JVM, die sich etlicher Beliebtheit in der Java Community erfreut. Wir referenzieren vor allem auf Rich Hickeys Vortrag <a href="https://www.youtube.com/watch?v=kGlVcSMgtV4">Simple Made Easy</a></dd>
<dt><a href="https://medium.com/@lucamezzalira/micro-frontends-decisions-framework-ebcd22256513">Micro Frontends</a></dt>
<dd>Noch nicht ganz bei Stefan angekommen, versorgt Kahlil mit den nötigen Nachschlagewerken zum Thema Micro Frontends. Gerade das Werk von DAZN VP of Architecture Luca Mezzalira ist eine der wichtigsten Ressourcen. Dazu gibt es auch ein <a href="https://www.buildingmicrofrontends.com/">Buch</a></dd>
<dt><a href="https://nextjs.org/">Next.js</a></dt>
<dd>Next.js ist mehr als React and Jamstack, es ist mittlerweile eines der besten und angenehmsten Frameworks die es für komplexe und umfangreiche JavaScript Applikationen gibt. Das finden nicht nur Kahlil und Stefan, sondern natürlich auch der Erfinder Guillermo Rauch, der Wegweisendes in seinem Beitrag <a lang="en" href="https://rauchg.com/2014/7-principles-of-rich-web-applications">7 Principles of Rich Web Applications</a> geschrieben hat, und das schon 2014. Passend, die <a href="https://www.youtube.com/watch?v=1-NzQ9ObsfM">Keynote der Next.js Conf</a>. Rauch hat auch seine Finger in <a href="https://prisma.io">Prisma, einer SaaS Datenbank</a>.</dd>
<dt><a href="https://twitter.com/hexrcs/status/1185186492982943744">Leo Li</a></dt>
<dd>Zum Folgen: Leo Li gibt einen tollen Svelte.js Crash Kurs in 10 Tweets. Das gleiche macht er auch für <a href="https://twitter.com/hexrcs/status/1190332090149150720">GraphQL</a>.</dd>
</dl>


Wenn die Kinder schlafen und die Eltern gerade wieder wach geworden sind, ist es
Zeit für eine Late-Night Show mit etlichen Themen, wenig rotem Faden, dafür
gehörig viel Meinung. Kahlil und Stefan hol…

Wenn die Kinder schlafen und die Eltern gerade wieder wach geworden sind, ist es
Zeit für eine Late-Night Show mit etlichen Themen, wenig rotem Faden, dafür
gehörig viel Meinung. Kahlil und Stefan holen weit aus und schmieren gehörig
Senf auf folgende Begriffe:


UNSER SPONSOR

Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das
Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit
diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu
erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem
Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung
freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur
reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure
Arbeitszeit erfassen, inkl. Urlaubsanträge.

Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter
timr.com/workingdraft.


SCHAUNOTIZEN

[00:01:46]

TYPESCRIPT IN 50 LESSONS

Stefans Buch ist immer noch hoch im Interesse der Kollegen. Nach einer Revision
zum Schreiben an sich, geht’s hier nochmal um ein paar inhaltliche Themen und
den Versuch, möglichst lange relevant zu bleiben..

RUST

Seit Stefan das Rust Linz Meetup mitorganisiert, bestimmen die schönen
Feinheiten dieser Sprache seinen Sinn für Programmieren.

CLOJURE

Eine funktionale Programmiersprache auf der JVM, die sich etlicher Beliebtheit
in der Java Community erfreut. Wir referenzieren vor allem auf Rich Hickeys
Vortrag Simple Made Easy

MICRO FRONTENDS

Noch nicht ganz bei Stefan angekommen, versorgt Kahlil mit den nötigen
Nachschlagewerken zum Thema Micro Frontends. Gerade das Werk von DAZN VP of
Architecture Luca Mezzalira ist eine der wichtigsten Ressourcen. Dazu gibt es
auch ein Buch

NEXT.JS

Next.js ist mehr als React and Jamstack, es ist mittlerweile eines der besten
und angenehmsten Frameworks die es für komplexe und umfangreiche JavaScript
Applikationen gibt. Das finden nicht nur Kahlil und Stefan, sondern natürlich
auch der Erfinder Guillermo Rauch, der Wegweisendes in seinem Beitrag 7
Principles of Rich Web Applications geschrieben hat, und das schon 2014.
Passend, die Keynote der Next.js Conf. Rauch hat auch seine Finger in Prisma,
einer SaaS Datenbank.

LEO LI

Zum Folgen: Leo Li gibt einen tollen Svelte.js Crash Kurs in 10 Tweets. Das
gleiche macht er auch für GraphQL.

Revision 454: Late-Night mit Rust, TypeScript, Clojure, Micro-Frontends, uvm.

<p>Nachdem mit <a href="https://typescript-book.com/">TypeScript in 50 Lessons</a> Stefans zweites Buch erschienen ist, quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel <a href="https://www.amazon.de/HTML5-Webseiten-innovativ-zukunftssicher-Kr%C3%B6ner/dp/3941841343/ref=sr_1_1?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&amp;dchild=1&amp;keywords=html5+kr%C3%B6ner&amp;qid=1604314964&amp;sr=8-1">HTML5. Webseiten innovativ und zukunftssicher</a>) über das Schreiben von Webtech-Büchern.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] Schreiben von (Webtech-) Büchern</dt>
<dd>Stefan und Peter vergleichen die Entstehung ihrer drei Werke (TypeScript in 50 Lessons, HTML5. Webseiten innovativ und zukunftssicher und Stefans Erstwerk <a href="https://www.manning.com/books/front-end-tooling-with-gulp-bower-and-yeoman/?a_aid=fettblog&amp;a_bid=238ac06a">Front-End Tooling with Gulp, Bower, and Yeoman</a>) unter den Gesichtspunkten Recherche, Workflow, Lernings, Wegen zum Buch-Deal, Halbwertszeit von verschriftlichtem Webtech-Wissen und Produktion. Wir klären, ob sich Webtech-Bücherschreiben lohnt (für verschiedene Definitionen des Wortes &#8222;lohnt&#8220;), besprechen den Umgang mit seltsamem Feedback und <a href="https://www.amazon.de/product-reviews/3941841343/ref=acr_dp_hist_1?ie=UTF8&amp;filterByStar=one_star&amp;reviewerType=all_reviews#reviews-filter-bar">komischen Rezensionen</a> und sinnieren ein wenig über Screencasting und Video-Produktion.</dd>
</dl>


Nachdem mit TypeScript in 50 Lessons Stefans zweites Buch erschienen ist,
quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel
HTML5. Webseiten innovativ und zukunftssicher) über…

Nachdem mit TypeScript in 50 Lessons Stefans zweites Buch erschienen ist,
quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel
HTML5. Webseiten innovativ und zukunftssicher) über das Schreiben von
Webtech-Büchern.


SCHAUNOTIZEN

[00:00:29] SCHREIBEN VON (WEBTECH-) BÜCHERN

Stefan und Peter vergleichen die Entstehung ihrer drei Werke (TypeScript in 50
Lessons, HTML5. Webseiten innovativ und zukunftssicher und Stefans Erstwerk
Front-End Tooling with Gulp, Bower, and Yeoman) unter den Gesichtspunkten
Recherche, Workflow, Lernings, Wegen zum Buch-Deal, Halbwertszeit von
verschriftlichtem Webtech-Wissen und Produktion. Wir klären, ob sich
Webtech-Bücherschreiben lohnt (für verschiedene Definitionen des Wortes
„lohnt“), besprechen den Umgang mit seltsamem Feedback und komischen Rezensionen
und sinnieren ein wenig über Screencasting und Video-Produktion.

Revision 453: Webtech-Bücher schreiben

<p>Wie Ihr Euch erinnert, hatten wir in <a href="https://workingdraft.de/447/">Revision 447</a> <a href="https://frederik-braun.com/">Frederik Braun</a> von Mozilla zu Gast, mit dem wir über den Themenblock „Cross-Site-Scripting“ gesprochen haben. Wir hatten damals noch einen zweiten Themenblock auf der Agenda, nämlich „Site Isolation“, zu dem wir aus Zeitgründen nicht mehr kamen und den wir auf eine zukünftige Folge vertagt haben. Hier kommt sie!</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<div class="message_content">
<a class="message_link" href="https://www.timr.com/workingdraft"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-left: 0.5rem; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/11/Working-Draft-Banner-klein.png" alt="" /></a></p>
<p>Kennst Du das Gefühl&#8230; die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? <a href="https://www.timr.com/workingdraft">timr</a> unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge.</p>
<p>Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter <a class="message_link" href="https://www.timr.com/workingdraft">timr.com/workingdraft</a>.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:46] CORS, CORP, (C)ORB, COOP und COEP</dt>
<dd>Zur Einführung gehen wir auf eine Angriffsmethode namens &#8222;<a href="https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)">Spectre</a>&#8220; und das Konzept der <a href="https://security.googleblog.com/2018/07/mitigating-spectre-with-site-isolation.html">Site-Isolation</a> ein, um das Problem zu verstehen, für das wir im Folgenden die Lösungen erörtern wollen. Außerdem rufen wir uns ins Gedächtnis, wie die &#8222;<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same Origin Policy</a>&#8220; in den Browsern greift und wie man seit einigen Jahren per &#8222;<a href="https://w3c.github.io/webappsec-cors-for-developers/">Cross Origin Resource Sharing</a>&#8220; (CORS) darauf einwirken kann. Und wir klären den Unterschied <a href="https://web.dev/same-site-same-origin/">zwischen &#8222;Same Site&#8220; und &#8222;Same Origin&#8220;</a>. Damit haben wir die Grundlagen gelegt, um einigermaßen neue, fest eingebaute Mechanismen wie <a href="https://www.chromium.org/Home/chromium-security/corb-for-developers">(Cross) Origin Request Blocking</a> (<a href="https://www.youtube.com/watch?v=_5rX6pt0A_k">Video</a>) ((C)ORB) zu Verstehen, aber vor allem auch, was es mit dem neuen &#8222;<a href="https://resourcepolicy.fyi/">Cross-Origin Resource Policy</a>&#8220; (CORP) Header auf sich hat. Um es kurz zu machen: Während CORS dem Browser über Origin-Grenzen hinweg Zugriff auf per JavaScript weiterbearbeitete Ressourcen gewährt, verhindert entsprechend gesetztes CORP die passive Anzeige von von fremden Ursprüngen stammender, aber üblicherweise zulässiger Bausteinen wie etwa Bilder. Danach erörtern wir, was es mit einer Gruppe Sicherheitslücken namens &#8222;<a href="https://github.com/xsleaks/xsleaks/wiki/Browser-Side-Channels">xsleaks</a>&#8220; auf sich hat, um zu verstehen, wie zwei weitere neue HTTP Header namens &#8222;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy">Cross-Origin-Opener-Policy</a>&#8220; (COOP) und &#8222;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy">Cross-Origin-Embedder-Policy</a>&#8220; (COEP) da hineinspielen. Weil diese ganzen Sicherheitsmaßnahmen die Funktionsweise der Seite stark beeinflussen, ist es ratsam, vor einem Scharfschalten von der <a href="https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API">Reporting API</a>, respektive dem <code>Report-to</code>-Header Gebrauch zu machen (und Probleme zum Beispiel an <a href="https://docs.sentry.io/product/security-policy-reporting/">sentry.io</a> senden zu lassen). Ob wir am Ende alles richtig gemacht haben und unsere Seite erfolgreich abschotten konnten, können wir im Browser auf der globalen Property <code><a href="https://web.dev/coop-coep/">window.crossOriginIsolated / self.crossOriginIsolated</a></code> abfragen. Als Belohnung für unsere Mühen eröffnet uns der Browser Zugang zu Features wie <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">eine hohe Genauigkeit des DOMHighResTimeStamps</a>, <a href="https://workingdraft.de/445/">SharedArrayBuffers</a> oder <code><a href="https://web.dev/monitor-total-page-memory-usage/">performance.measureMemory()</a></code>.</dd>
</dl>


Wie Ihr Euch erinnert, hatten wir in Revision 447 Frederik Braun von Mozilla zu
Gast, mit dem wir über den Themenblock „Cross-Site-Scripting“ gesprochen haben.
Wir hatten damals noch einen zweiten The…

Wie Ihr Euch erinnert, hatten wir in Revision 447 Frederik Braun von Mozilla zu
Gast, mit dem wir über den Themenblock „Cross-Site-Scripting“ gesprochen haben.
Wir hatten damals noch einen zweiten Themenblock auf der Agenda, nämlich „Site
Isolation“, zu dem wir aus Zeitgründen nicht mehr kamen und den wir auf eine
zukünftige Folge vertagt haben. Hier kommt sie!


UNSER SPONSOR

Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das
Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit
diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu
erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem
Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung
freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur
reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure
Arbeitszeit erfassen, inkl. Urlaubsanträge.

Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter
timr.com/workingdraft.


SCHAUNOTIZEN

[00:01:46] CORS, CORP, (C)ORB, COOP UND COEP

Zur Einführung gehen wir auf eine Angriffsmethode namens „Spectre“ und das
Konzept der Site-Isolation ein, um das Problem zu verstehen, für das wir im
Folgenden die Lösungen erörtern wollen. Außerdem rufen wir uns ins Gedächtnis,
wie die „Same Origin Policy“ in den Browsern greift und wie man seit einigen
Jahren per „Cross Origin Resource Sharing“ (CORS) darauf einwirken kann. Und wir
klären den Unterschied zwischen „Same Site“ und „Same Origin“. Damit haben wir
die Grundlagen gelegt, um einigermaßen neue, fest eingebaute Mechanismen wie
(Cross) Origin Request Blocking (Video) ((C)ORB) zu Verstehen, aber vor allem
auch, was es mit dem neuen „Cross-Origin Resource Policy“ (CORP) Header auf sich
hat. Um es kurz zu machen: Während CORS dem Browser über Origin-Grenzen hinweg
Zugriff auf per JavaScript weiterbearbeitete Ressourcen gewährt, verhindert
entsprechend gesetztes CORP die passive Anzeige von von fremden Ursprüngen
stammender, aber üblicherweise zulässiger Bausteinen wie etwa Bilder. Danach
erörtern wir, was es mit einer Gruppe Sicherheitslücken namens „xsleaks“ auf
sich hat, um zu verstehen, wie zwei weitere neue HTTP Header namens
„Cross-Origin-Opener-Policy“ (COOP) und „Cross-Origin-Embedder-Policy“ (COEP) da
hineinspielen. Weil diese ganzen Sicherheitsmaßnahmen die Funktionsweise der
Seite stark beeinflussen, ist es ratsam, vor einem Scharfschalten von der
Reporting API, respektive dem Report-to-Header Gebrauch zu machen (und Probleme
zum Beispiel an sentry.io senden zu lassen). Ob wir am Ende alles richtig
gemacht haben und unsere Seite erfolgreich abschotten konnten, können wir im
Browser auf der globalen Property window.crossOriginIsolated /
self.crossOriginIsolated abfragen. Als Belohnung für unsere Mühen eröffnet uns
der Browser Zugang zu Features wie eine hohe Genauigkeit des
DOMHighResTimeStamps, SharedArrayBuffers oder performance.measureMemory().

Revision 452: CORS, CORP, (C)ORB, COOP und COEP

<p>Im Rahmen einer Throwback-Folge besprechen nicht nur die üblichen Schepp, Stefan und Peter neue Webstandards/Browser-APIs, sondern begrüßen auch Verstärkung im Podcast-Team!</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<div class="message_content">
<a class="message_link" href="https://www.timr.com/workingdraft"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/11/Working-Draft-Banner-klein.png" alt="" /></a></p>
<p>Kennst Du das Gefühl&#8230; die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? <a href="https://www.timr.com/workingdraft">timr</a> unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge.</p>
<p>Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter <a class="message_link" href="https://www.timr.com/workingdraft">timr.com/workingdraft</a>.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:46] Hallo Vanessa!</dt>
<dd>Willkommen im Team, <a href="https://vannsl.io/">Vanessa Böhner</a>! Bekannt aus vergangen Workingdraft-Folgen, <a href="https://twitter.com/vannsl">von Twitter</a>, von den <a href="https://twitter.com/FrontendFoxes">FrontendFoxes</a> und durch Podcasts über <a href="https://www.expect-exception.fail/">Testing</a> und <a href="https://ausbaufaehig-podcast.de/">Wein</a> verstärkt sie nun auch diesen Podcast.</dd>
<dt>[00:11:15] <a href="https://github.com/rniwa/webcomponents/blob/add-dom-parts-proposal/proposals/DOM-Parts.md">DOM Parts Proposal</a></dt>
<dd>DOM-Parts verstärken das <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">Template-Element</a>, das eigentlich nur ein deklaratives <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/DocumentFragment">DocumentFragment</a> ist, um Features aus Template-Sprachen wie <a href="https://handlebarsjs.com/">Handlebars</a>. Im Rahmen des Über-Themas Templating sprechen wir auch über Frontend-Framework-Monokultur, <a href="https://workingdraft.de/447/">Security</a>, <a href="https://github.com/WebReflection/hyperHTML">hyperHTML</a>, JSX und statisch vs. dynamisch typsierte Programmiersprachen.</dd>
<dt>[00:31:20] <a href="https://github.com/WebKit/explainers/blob/8a52223b086773ac0486af8927bf23d7d2f216b5/CentralizedConsentAPI/README.md">CentralizedConsentAPI</a></dt>
<dd>Die API für die Reduktion von Cookie-Consent-Bannern wird kontrovers diskutiert! Während einige von uns an die API glauben, wittern andere eine Verschwörung gegen das <a href="https://workingdraft.de/399/">Project Fugu</a> und wieder andere berufen sich auf die via <a href="https://brave.com/">Brave Browser</a> und <a href="https://de.wikipedia.org/wiki/UBlock_Origin">uBlock Origin</a> umgesetzte <a href="https://en.wikipedia.org/wiki/Castle_doctrine">Castle Doctrine</a> in der eigenen Web-Experience.</dd>
<dt>[00:50:10] <a href="https://wicg.github.io/cookie-store/explainer.html">Cookie-Store</a></dt>
<dd>Brauchen wir bessere Frontend-APIs für Coookies? <a href="https://plugins.jquery.com/cookie/">Entsprechende jQuery-Plugins</a> deuten darauf hin. Die neue API verspricht asynchrone Funktionen, Cookie-Events und Cookies im Service Worker. Wir vergleichen die Cookie-API und das entsprechende jQuery-Plugin mit der <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">URL-API</a> und Rodneys <a href="https://medialize.github.io/URI.js/">URI.js</a>. Außerdem versuchen wir zu ergründen, ob wir asyncrhone APIs brauchen, warum es keinen Cookie-Observer angelehnt an den <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> gibt und gleichen das Proposal mit <a href="https://mozilla.github.io/standards-positions/">Mozillas Positionen zu divsersen Standards</a> ab.</dd>
</dl>


Im Rahmen einer Throwback-Folge besprechen nicht nur die üblichen Schepp, Stefan
und Peter neue Webstandards/Browser-APIs, sondern begrüßen auch Verstärkung im
Podcast-Team!


UNSER SPONSOR

Kennst Du…

Im Rahmen einer Throwback-Folge besprechen nicht nur die üblichen Schepp, Stefan
und Peter neue Webstandards/Browser-APIs, sondern begrüßen auch Verstärkung im
Podcast-Team!


UNSER SPONSOR

Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das
Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit
diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu
erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem
Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung
freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur
reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure
Arbeitszeit erfassen, inkl. Urlaubsanträge.

Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter
timr.com/workingdraft.


SCHAUNOTIZEN

[00:01:46] HALLO VANESSA!

Willkommen im Team, Vanessa Böhner! Bekannt aus vergangen Workingdraft-Folgen,
von Twitter, von den FrontendFoxes und durch Podcasts über Testing und Wein
verstärkt sie nun auch diesen Podcast.

[00:11:15] DOM PARTS PROPOSAL

DOM-Parts verstärken das Template-Element, das eigentlich nur ein deklaratives
DocumentFragment ist, um Features aus Template-Sprachen wie Handlebars. Im
Rahmen des Über-Themas Templating sprechen wir auch über
Frontend-Framework-Monokultur, Security, hyperHTML, JSX und statisch vs.
dynamisch typsierte Programmiersprachen.

[00:31:20] CENTRALIZEDCONSENTAPI

Die API für die Reduktion von Cookie-Consent-Bannern wird kontrovers diskutiert!
Während einige von uns an die API glauben, wittern andere eine Verschwörung
gegen das Project Fugu und wieder andere berufen sich auf die via Brave Browser
und uBlock Origin umgesetzte Castle Doctrine in der eigenen Web-Experience.

[00:50:10] COOKIE-STORE

Brauchen wir bessere Frontend-APIs für Coookies? Entsprechende jQuery-Plugins
deuten darauf hin. Die neue API verspricht asynchrone Funktionen, Cookie-Events
und Cookies im Service Worker. Wir vergleichen die Cookie-API und das
entsprechende jQuery-Plugin mit der URL-API und Rodneys URI.js. Außerdem
versuchen wir zu ergründen, ob wir asyncrhone APIs brauchen, warum es keinen
Cookie-Observer angelehnt an den Mutation Observer gibt und gleichen das
Proposal mit Mozillas Positionen zu divsersen Standards ab.

Revision 451: Neue Webstandard-Proposals und Podcast-Verstärkung!

<p>Hans, Schepp und Peter ließen mal wieder das Glücksrad drehen!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] Image Maps</dt>
<dd>Wir versuchen uns daran zu erinnern, wann wir zuletzt <a href="https://html.spec.whatwg.org/#image-maps">Image Maps</a> genutzt haben (serverseitige und wie clientseitige Image Maps) und wie sich Image-Map-Use-Cases zu SVGs verhalten. Schepp gibt außerdem eine Geschichte zum Besten, in der er mithilfe von <a href="https://html.spec.whatwg.org/#image-button-state-(type=image)">Buttons im Image-State</a> das antike Shopsystem XT-Commerce gebändigt hat.</dd>
<dt>[00:14:44] History API</dt>
<dd>Wir zerreißen die <a href="https://html.spec.whatwg.org/#history">History API</a> und die speziell <a href="https://html.spec.whatwg.org/#dom-history-pushstate">pushState()</a> in der Luft (siehe auch <a href="https://podcastaddict.com/episode/110894716">die Podcast-Kollegen von HTTP 203</a>), verkünden <a href="https://twitter.com/stefanjudis/status/1320259247750381568">die Ankunft</a> von <code>&lt;input type="date"&gt;</code> in Safari, besprechen das Wesen von Webstandards an sich nebst den Aussichten von <a href="https://www.youtube.com/watch?v=2S2nSqh6EUw">Open UI</a> und den aktuellen Stand des Hype-Themas <a href="https://css-tricks.com/almanac/properties/s/scrollbar-color/">Scrollbar-Styling</a>.</dd>
<dt>[00:25:19] <a href="https://html.spec.whatwg.org/#the-time-element">&lt;time&gt;</a></dt>
<dd>Wir nutzen die Gelegenheit, um über Datumsformate (speziell <a href="https://html.spec.whatwg.org/#valid-date-string">das von HTML5</a>) sowie Datenaustauschformate allgemein zu debattieren. Fazit: Jammern bringt nix, <a href="https://date-fns.org/">Date-Fns</a> draufwerfen und fertig.</dd>
<dt>[00:51:52] <a href="https://html.spec.whatwg.org/#custom-elements">Custom Elements</a></dt>
<dd>Neben Web Components quatschen wir auch über <a href="https://svelte.dev/">Svelte</a> (Thema in <a href="https://workingdraft.de/413/">Revision 413</a>), <a href="https://stenciljs.com/">StencilJS</a>, Shadow DOM, Houdini, <a href="https://html.spec.whatwg.org/#frames">Frames</a> und die Unmöglichkeit, Web-Features abzuschaffen.</dd>
</dl>


Hans, Schepp und Peter ließen mal wieder das Glücksrad drehen!


SCHAUNOTIZEN

[00:00:30] IMAGE MAPS

Wir versuchen uns daran zu erinnern, wann wir zuletzt Image Maps genutzt haben
(serverseitige und …

Hans, Schepp und Peter ließen mal wieder das Glücksrad drehen!


SCHAUNOTIZEN

[00:00:30] IMAGE MAPS

Wir versuchen uns daran zu erinnern, wann wir zuletzt Image Maps genutzt haben
(serverseitige und wie clientseitige Image Maps) und wie sich
Image-Map-Use-Cases zu SVGs verhalten. Schepp gibt außerdem eine Geschichte zum
Besten, in der er mithilfe von Buttons im Image-State das antike Shopsystem
XT-Commerce gebändigt hat.

[00:14:44] HISTORY API

Wir zerreißen die History API und die speziell pushState() in der Luft (siehe
auch die Podcast-Kollegen von HTTP 203), verkünden die Ankunft von <input
type="date"> in Safari, besprechen das Wesen von Webstandards an sich nebst den
Aussichten von Open UI und den aktuellen Stand des Hype-Themas
Scrollbar-Styling.

[00:25:19] <TIME>

Wir nutzen die Gelegenheit, um über Datumsformate (speziell das von HTML5) sowie
Datenaustauschformate allgemein zu debattieren. Fazit: Jammern bringt nix,
Date-Fns draufwerfen und fertig.

[00:51:52] CUSTOM ELEMENTS

Neben Web Components quatschen wir auch über Svelte (Thema in Revision 413),
StencilJS, Shadow DOM, Houdini, Frames und die Unmöglichkeit, Web-Features
abzuschaffen.

Revision 450: HTML5-Glücksrad (Image Maps, History API, Time-Element, Custom
Elements)

<p>Hans und Peter haben Fragen zu Tools, Frameworks und Grundsatzfragen rund um CSS.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] CSS-Tools und -Frameworks</dt>
<dd>Inspiriert von der <a href="https://survey.stateofjs.com/survey/state-of-css/2020">großen CSS-Umfrage für 2020</a> haben Hans und Peter Fragen zu CSS-Tools. Anders als bei der <a href="https://workingdraft.de/special-2019/">Folge zu State of JS am letzten Jahresende</a> gibt es noch keine Ergebnisse, aber viel zu diskutieren und zu hinterfragen. Wir besprechen den Sinn und Unsinn von Sass, Less, Stylus und PostCSS, sinnieren über Tool wie <a href="https://autoprefixer.github.io/">Autoprefixer</a>, versuchen CSS Frameworks von UI-Libs abzugrenzen (wobei <a href="https://getbootstrap.com/">Bootstrap</a> und <a href="https://primer.style">Primer</a> unserer Ansicht nach Mixturen darstellen) und kommen via <a href="https://tailwindcss.com/">Tailwind</a> zu den großen Grundsatzfragen rund um Utility-First-CSS (vgl. <a href="https://workingdraft.de/378">Revision 378</a>), CSS in JS, BEM, Atomic Design, Semantisches CSS und den Sinn von Trennung von Markup und Design im Jahr 2020.</dd>
</dl>


Hans und Peter haben Fragen zu Tools, Frameworks und Grundsatzfragen rund um
CSS.


SCHAUNOTIZEN

[00:00:29] CSS-TOOLS UND -FRAMEWORKS

Inspiriert von der großen CSS-Umfrage für 2020 haben Hans und Pe…

Hans und Peter haben Fragen zu Tools, Frameworks und Grundsatzfragen rund um
CSS.


SCHAUNOTIZEN

[00:00:29] CSS-TOOLS UND -FRAMEWORKS

Inspiriert von der großen CSS-Umfrage für 2020 haben Hans und Peter Fragen zu
CSS-Tools. Anders als bei der Folge zu State of JS am letzten Jahresende gibt es
noch keine Ergebnisse, aber viel zu diskutieren und zu hinterfragen. Wir
besprechen den Sinn und Unsinn von Sass, Less, Stylus und PostCSS, sinnieren
über Tool wie Autoprefixer, versuchen CSS Frameworks von UI-Libs abzugrenzen
(wobei Bootstrap und Primer unserer Ansicht nach Mixturen darstellen) und kommen
via Tailwind zu den großen Grundsatzfragen rund um Utility-First-CSS (vgl.
Revision 378), CSS in JS, BEM, Atomic Design, Semantisches CSS und den Sinn von
Trennung von Markup und Design im Jahr 2020.

Revision 449: CSS-Tools und -Frameworks

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 459: Bazel

Working Draft

Revision 458: Cypress

Working Draft

Revision 457: Funktionale Programmierung mit Tobi Timm

Working Draft

Revision 456: Aktuelle Entwicklungen in Node.js mit Golo Roden

Working Draft

Revision 455: Sulu CMS

Working Draft

Special Edition: State of CSS 2020

Working Draft

Revision 454: Late-Night mit Rust, TypeScript, Clojure, Micro-Frontends, uvm.

Working Draft

Revision 453: Webtech-Bücher schreiben

Working Draft

Revision 452: CORS, CORP, (C)ORB, COOP und COEP

Working Draft

Revision 451: Neue Webstandard-Proposals und Podcast-Verstärkung!

Working Draft

Revision 450: HTML5-Glücksrad (Image Maps, History API, Time-Element, Custom Elements)

Working Draft

Revision 449: CSS-Tools und -Frameworks

Working Draft