<p>Kahlil und Stefan treffen sich wieder einmal spät-abends um über die diversen Ausschreitungen in der Welt der JavaScript Frameworks zu beleuchten. Diesmal ging&#8217;s um HTML übers Kabel, in verschiedenen Ausprägungen. Und weil HÜK so gar nicht gut klingt, reden Sie über Hotwire und Co!</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="https://hotwire.dev/">Hotwire</a></dt>
<dd>Auch bekannt als NEW MAGIC bzw AJAXIRGENDWIE. Aus dem Hause DHH und Ruby on Rails kommt die Idee, dass man dieses JavaScript ja mal gar nicht angreifen muss und die meiste Dynamik sowieso mit standardisierten Workflows und HTML Schnippseln über Web Sockets hinbekommt. Klingt komisch, aber auch spannend. Wir erläutern warum das jetzt alle toll finden. Oder alle doof finden. Es kommt halt drauf an ob man auf &#8230; Schiene ist!</dd>
<dt><a href="https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html">React Server Components</a></dt>
<dd>Auch aus dem Hause React kommt etwas ähnliches. Was, wenn man nicht alles am Client rendern würde, sondern viele Vorberechnungen, vor allem jene mit vielen Dependencies am Server vornimmt? React will diese Grenze fließend machen, mit einer Integration von Components die man serverseitig rendern kann, und manche die clientseiting gemalt werden. Der Übergang soll fließend sein! Spannendes Konzept, quasi Virtual DOM over the wire &#8212; ein gutes Kürzel gibt es dafür nicht. <a href="https://addyosmani.com/blog/react-server-components/">Addy Osmani hat übrigens viel Material dazu gesammelt</a></dd>
<dt><a href="https://www.youtube.com/watch?v=vG8WpLr6y_U">Let&#8217;s program like it&#8217;s 1999</a></dt>
<dd>In unserer Philosophie-Stunde kommen wir ja wieder von Pontius nach Pilates, und schmeissen unter anderem dieses Video von Lee Byron mit rein, der uns erklärt warum React so ist, wie es ist. Technisch gesehen.</dd>
</dl>


Kahlil und Stefan treffen sich wieder einmal spät-abends um über die diversen Ausschreitungen in der Welt der JavaScript Frameworks zu beleuchten. Diesmal ging&#8217;s um HTML übers Kabel, in verschiedenen Ausprägungen. Und weil HÜK so gar nicht gut klingt, reden Sie über Hotwire und Co! Schaunotizen Hotwire Auch bekannt als NEW MAGIC bzw AJAXIRGENDWIE. Aus dem [&#8230;]

Working Draft

Kahlil und Stefan treffen sich wieder einmal spät-abends um über die diversen Ausschreitungen in der Welt der JavaScript Frameworks zu beleuchten. Diesmal ging’s um HTML übers Kabel, in verschiedenen Ausprägungen. Und weil HÜK so gar nicht gut[...]

Kahlil und Stefan treffen sich wieder einmal spät-abends um über die diversen Ausschreitungen in der Welt der JavaScript Frameworks zu beleuchten. Diesmal ging’s um HTML übers Kabel, in verschiedenen Ausprägungen. Und weil HÜK so gar nicht gut klingt, reden Sie über Hotwire und Co!
Schaunotizen

Hotwire
Auch bekannt als NEW MAGIC bzw AJAXIRGENDWIE. Aus dem Hause DHH und Ruby on Rails kommt die Idee, dass man dieses JavaScript ja mal gar nicht angreifen muss und die meiste Dynamik sowieso mit standardisierten Workflows und HTML Schnippseln über Web Sockets hinbekommt. Klingt komisch, aber auch spannend. Wir erläutern warum das jetzt alle toll finden. Oder alle doof finden. Es kommt halt drauf an ob man auf … Schiene ist!
React Server Components
Auch aus dem Hause React kommt etwas ähnliches. Was, wenn man nicht alles am Client rendern würde, sondern viele Vorberechnungen, vor allem jene mit vielen Dependencies am Server vornimmt? React will diese Grenze fließend machen, mit einer Integration von Components die man serverseitig rendern kann, und manche die clientseiting gemalt werden. Der Übergang soll fließend sein! Spannendes Konzept, quasi Virtual DOM over the wire — ein gutes Kürzel gibt es dafür nicht. Addy Osmani hat übrigens viel Material dazu gesammelt
Let’s program like it’s 1999
In unserer Philosophie-Stunde kommen wir ja wieder von Pontius nach Pilates, und schmeissen unter anderem dieses Video von Lee Byron mit rein, der uns erklärt warum React so ist, wie es ist. Technisch gesehen.

Revision 461: Late-Night mit Hotwire und React Server Components

<p><a href="https://workingdraft.de/334/">Annähernd drei Jahre ist es her</a>, dass wir zuletzt mit <a href="https://www.zeichenschatz.net/">Oliver Schöndorfer</a> (<a href="https://twitter.com/glyphe">Twitter</a>) über Typografie im Web reden durften. Seitdem ist viel passiert, unter anderem nämlich dass Oliver einen eigenen <a href="https://www.youtube.com/c/pimpmytype">Youtube-Kanal</a> zum Thema &#8222;Gute Schriftwahl&#8220; ins Leben gerufen hat. Und genau über dieses Thema wollten wir mit ihm gerne reden. Wie geht man am besten vor, wenn man auf der Suche nach einer passenden Schriftart ist?</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] Auswahl der richtigen Webfonts</dt>
<dd>Wir leiten ein mit ein wenig <a href="https://almanac.httparchive.org/en/2020/fonts#popular-fonts">&#8222;Open Sans&#8220;-Einheitsbrei</a>-Bashing, und stellen heraus, wie viel vom individuellen Charakter einer Seite <a href="https://www.zeichenschatz.net/typografie/stop-using-open-sans-why-your-font-choice-matters.html">ein unverbrauchter Webfont ausmacht</a>. Um eine Schriftwahl zu treffen, müssen wir allerdings erst einmal wissen, welche <a href="https://www.zeichenschatz.net/typografie/how-to-choose-a-typeface-1-different-kinds-of-text.html">Kategorien von Schriften es generell gibt</a>, und <a href="https://www.zeichenschatz.net/typografie/how-to-choose-a-typeface-for-display-text.html">für welche Anwendungsfälle sich die besonders gut oder auch eher nicht eignen</a>. Auch gut zu wissen ist, wer außer Google Fonts <a href="https://www.zeichenschatz.net/typografie/free-quality-fonts.html">noch Schriften anbietet</a>. Da man <a href="https://wicki.io/posts/2020-11-goodbye-google-fonts/">von Google Fonts sowieso nicht mehr profitiert</a>, sollte man am besten vom eigenen Webspace als <a href="https://almanac.httparchive.org/en/2020/fonts#formats-and-mime-types">WOFF2</a> ausliefern und per <a href="https://vimeo.com/304099438">Subsetting und Preloading</a> möglichst schnell machen.</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://www.youtube.com/c/PimpmyType/">Pimp my Type</a></dt>
<dd>Olivers YouTube-Kanal zum Thema Schriftarten <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/2728.png" alt="✨" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt><a href="https://almanac.httparchive.org/en/2020/">Web Almanac 2020</a></dt>
<dd>Die aktuellste Ausgabe des Web Alamanac, der versucht, die Struktur des Webs zu skizzieren.</dd>
<dt><a href="https://vimeo.com/304099438">Zach Leatherman | The Five Whys of Web Font Loading Performance (Video)</a></dt>
<dd>Wie man Webfonts möglichst schnell geladen bekommt.</dd>
<dt><a href="https://developers.google.com/web/updates/2020/10/http-cache-partitioning">Google Developers: Gaining security and privacy by partitioning the cache</a></dt>
<dd>Artikel über den nun auch in Chrome eingeführten partitionierten Cache.</dd>
<dt><a href="https://medium.com/uxmarker/a-story-behind-comic-sans-probably-the-most-notorious-typeface-49c812264d5d">A Story Behind Comic Sans, (Probably) The Most Notorious Typeface</a></dt>
<dd>Die Entstehungsgeschichte von Comic Sans.</dd>
<dt><a href="http://omgfacts.com/comic-sans-helps-people-with-dyslexia/">Comic Sans Helps People With Dyslexia</a></dt>
<dd>Eine überraschende Eigenschaft von Comic Sans ist dass sie Menschen mit Dyslexie beim Lesen unterstützt.</dd>
<dt><a href="https://www.youtube.com/watch?v=u1v_G1yQhTU">Readability &amp; Web: Let&#8217;s build great inclusive projects – Damien Senger</a></dt>
<dd>Ein spannender Vortrag darüber, was Lesbarkeit ausmacht.</dd>
<dt><a href="https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance">Progressive Font Enrichment: reinventing web font performance</a></dt>
<dd>Work-in-Progress einer neue Technologie, bei der Schriften progressiv/gestreamt geladen werden. Vielleicht die Zukunft?</dd>
</dl>


Annähernd drei Jahre ist es her, dass wir zuletzt mit Oliver Schöndorfer (Twitter) über Typografie im Web reden durften. Seitdem ist viel passiert, unter anderem nämlich dass Oliver einen eigenen Youtube-Kanal zum Thema &#8222;Gute Schriftwahl&#8220; ins Leben gerufen hat. Und genau über dieses Thema wollten wir mit ihm gerne reden. Wie geht man am besten [&#8230;]

Annähernd drei Jahre ist es her, dass wir zuletzt mit Oliver Schöndorfer (Twitter) über Typografie im Web reden durften. Seitdem ist viel passiert, unter anderem nämlich dass Oliver einen eigenen Youtube-Kanal zum Thema „Gute Schriftwahl[...]

Annähernd drei Jahre ist es her, dass wir zuletzt mit Oliver Schöndorfer (Twitter) über Typografie im Web reden durften. Seitdem ist viel passiert, unter anderem nämlich dass Oliver einen eigenen Youtube-Kanal zum Thema „Gute Schriftwahl“ ins Leben gerufen hat. Und genau über dieses Thema wollten wir mit ihm gerne reden. Wie geht man am besten vor, wenn man auf der Suche nach einer passenden Schriftart ist?
Schaunotizen

[00:00:29] Auswahl der richtigen Webfonts
Wir leiten ein mit ein wenig „Open Sans“-Einheitsbrei-Bashing, und stellen heraus, wie viel vom individuellen Charakter einer Seite ein unverbrauchter Webfont ausmacht. Um eine Schriftwahl zu treffen, müssen wir allerdings erst einmal wissen, welche Kategorien von Schriften es generell gibt, und für welche Anwendungsfälle sich die besonders gut oder auch eher nicht eignen. Auch gut zu wissen ist, wer außer Google Fonts noch Schriften anbietet. Da man von Google Fonts sowieso nicht mehr profitiert, sollte man am besten vom eigenen Webspace als WOFF2 ausliefern und per Subsetting und Preloading möglichst schnell machen.

Links

Pimp my Type
Olivers YouTube-Kanal zum Thema Schriftarten 
Web Almanac 2020
Die aktuellste Ausgabe des Web Alamanac, der versucht, die Struktur des Webs zu skizzieren.
Zach Leatherman | The Five Whys of Web Font Loading Performance (Video)
Wie man Webfonts möglichst schnell geladen bekommt.
Google Developers: Gaining security and privacy by partitioning the cache
Artikel über den nun auch in Chrome eingeführten partitionierten Cache.
A Story Behind Comic Sans, (Probably) The Most Notorious Typeface
Die Entstehungsgeschichte von Comic Sans.
Comic Sans Helps People With Dyslexia
Eine überraschende Eigenschaft von Comic Sans ist dass sie Menschen mit Dyslexie beim Lesen unterstützt.
Readability & Web: Let’s build great inclusive projects – Damien Senger
Ein spannender Vortrag darüber, was Lesbarkeit ausmacht.
Progressive Font Enrichment: reinventing web font performance
Work-in-Progress einer neue Technologie, bei der Schriften progressiv/gestreamt geladen werden. Vielleicht die Zukunft?

Revision 460: Augen auf bei der Webfont-Wahl

<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>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<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>
<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 – 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 [&#8230;]

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 [...]

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 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>Es wird kein TypeScript zum Tests-Schreiben 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</li>
<li>Up- und Downloads können nicht getestet werden</li>
</ul>
</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 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) [&#8230;]

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är[...]

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
Es wird kein TypeScript zum Tests-Schreiben unterstützt
Cypress kann keine Tests durchführen, die mehr als einen Origin gleichzeitig umfassen
Cypress kann nicht mehrere Tests parallel durchführen
Up- und Downloads können nicht getestet werden

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 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 [&#8230;]

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.
Sch[...]

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] 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 [&#8230;]

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[...]

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. 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 [&#8230;]

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 mitt[...]

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 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 [&#8230;]

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[...]

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>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<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>
<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 holen weit aus und schmieren gehörig Senf auf folgende Begriffe: Unser Sponsor Kennst Du das Gefühl&#8230; die Projektleitung benötigt dringend die Stunden für [&#8230;]

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 folgen[...]

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 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 [&#8230;]

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
[...]

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>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<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>
<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 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 [&#8230;]

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“[...]

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>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<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>
<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 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 [&#8230;]

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 dr[...]

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!

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 461: Late-Night mit Hotwire und React Server Components

Working Draft

Revision 460: Augen auf bei der Webfont-Wahl

Working Draft

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