<p>Ganz ohne Gäste und großen Themenbogen hockten sich Schepp, Hans und Peter zusammen, um ein paar Fundstücke und Artikel aus der letzten Zeit zu bequatschen</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28] CSS-Features (und fehlende Web-Component-Features)</dt>
<dd>Peter ist begeistert von <a href="https://www.w3.org/TR/css-cascade-5/#cascade-layers">der geplanten @layer-Regel für CSS</a>, hat aber gleichzeitig mit <a href="https://github.com/WICG/webcomponents/issues/468">nicht existiertenden Default Styles für Custom Elements</a> zu kämpfen, die es <a href="https://nolanlawson.com/2021/01/03/options-for-styling-web-components/">nur in Verbindung mit Shadow DOM wirklich gibt</a>. Schepp schlägt <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:where">die Pseudoklasse <code>:where</code></a> als Workaround vor.</dd>
<dt>[00:17:40] <a href="https://schepp.dev/posts/smooth-scrolling-and-page-search/">Fixing Smooth Scrolling &amp; Page Search</a></dt>
<dd>Schepp berichtet von seinen auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within"><code>:focus-within</code></a> fußenden Hacks rund um Smooth Scrolling. Während er Schwerstarbeit verrichtet, <a href="https://twitter.com/jordwalke/status/1355681285717385217">brät Mobile Safari anderen Webseiten einfach Extrawürste</a>.</dd>
<dt>[00:30:51] <a href="https://www.peterkroener.de/array-ex-machina/">Array Ex Machina</a></dt>
<dd>Peter nimmt seinen neuesten Artikel zum Anlass, um über JS-Arrays zu philosophieren. Wir einigen uns darauf, dass <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from"><code>Array.from()</code></a> <em>das</em> Mittel der Wahl ist, um Arrays einer gegebenen Länge zu erzeugen.</dd>
</dl>


Ganz ohne Gäste und großen Themenbogen hockten sich Schepp, Hans und Peter zusammen, um ein paar Fundstücke und Artikel aus der letzten Zeit zu bequatschen Schaunotizen [00:00:28] CSS-Features (und fehlende Web-Component-Features) Peter ist begeistert von der geplanten @layer-Regel für CSS, hat aber gleichzeitig mit nicht existiertenden Default Styles für Custom Elements zu kämpfen, die es [&#8230;]

Working Draft

Ganz ohne Gäste und großen Themenbogen hockten sich Schepp, Hans und Peter zusammen, um ein paar Fundstücke und Artikel aus der letzten Zeit zu bequatschen
Schaunotizen

[00:00:28] CSS-Features (und fehlende Web-Component-Features)
Peter ist begeist[...]

Ganz ohne Gäste und großen Themenbogen hockten sich Schepp, Hans und Peter zusammen, um ein paar Fundstücke und Artikel aus der letzten Zeit zu bequatschen
Schaunotizen

[00:00:28] CSS-Features (und fehlende Web-Component-Features)
Peter ist begeistert von der geplanten @layer-Regel für CSS, hat aber gleichzeitig mit nicht existiertenden Default Styles für Custom Elements zu kämpfen, die es nur in Verbindung mit Shadow DOM wirklich gibt. Schepp schlägt die Pseudoklasse :where als Workaround vor.
[00:17:40] Fixing Smooth Scrolling & Page Search
Schepp berichtet von seinen auf :focus-within fußenden Hacks rund um Smooth Scrolling. Während er Schwerstarbeit verrichtet, brät Mobile Safari anderen Webseiten einfach Extrawürste.
[00:30:51] Array Ex Machina
Peter nimmt seinen neuesten Artikel zum Anlass, um über JS-Arrays zu philosophieren. Wir einigen uns darauf, dass Array.from() das Mittel der Wahl ist, um Arrays einer gegebenen Länge zu erzeugen.

Revision 465: Fundstücke und Artikel

<p>Wir nehmen das Release von Version 2.0 von TailwindCSS als Anlass, das Framework <a href="https://workingdraft.de/378/">nach längerer Zeit</a> einmal wieder unter die Lupe zu nehmen. Als kompetenten Gast haben wir uns dafür <a href="http://www.milanmatull.com/">Milan Matull</a> ins Boot geholt, der uns durch die Ideen und Konzepte von Tailwind führt und mit dem wir über Vor- und Nachteile des Frameworks (fruchtvoll und zielführend) debattieren.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<div class="message_content"><a class="message_link" href="https://heev.me/workingdraft/"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-left: 0.5rem; margin-bottom: 1rem; max-width: 400px;" src="https://workingdraft.de/wp-content/uploads/2021/02/Heev_Banner_Desktop_WorkingDraft@2x-1.png" alt="" /></a></p>
<h3><a href="https://heev.me/workingdraft/">Heev.me</a></h3>
<p>Du bist nicht selbständig, um dich mit Bürokratie zu befassen.<br />
Schlanke, moderne Zeiterfassung, Angebote, Rechnungen und Ausgaben. Smart, intuitiv und auf das absolut Wesentliche reduziert. Als Working Draft Hörer:in erhältst du exklusiv 30% Rabatt auf alle ausgewählten Module, für die ersten 3 Monate.</p>
<p>Weitere Infos unter: <a href="https://heev.me/workingdraft/">heev.me/workingdraft</a></p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:47] <a href="https://blog.tailwindcss.com/tailwindcss-v2">TailwindCSS 2.0</a></dt>
<dd>Einleitend rekapitulieren wir noch einmal, was das erklärte Missionsziel von TailwindCSS überhaupt ist. Dabei erkennen wir einige konzeptionelle Vorläufer:</p>
<ul>
<li><a href="https://basscss.com/">Basscss</a></li>
<li><a href="https://tachyons.io/">Tachyons</a>, und</li>
<li><a href="https://suitcss.github.io/">SUIT CSS</a></li>
</ul>
<p>Als ehrenwerte Konkurrenz erwähnen wir:</p>
<ul>
<li><a href="https://getbootstrap.com/docs/5.0/utilities/borders/">die Bootstrap Utilities</a>, und</li>
<li><a href="https://bulma.io/">Bulma</a>.</li>
</ul>
<p>Wir stellen als Hauptvorteile heraus, dass die vorgegebenen Leitplanken verhindern, dass Entwickler:innen in einem Team unterschiedliche Wege in Sachen Notationen und Eigenschaftenwahl gehen. Fifty Shades of Grey ist mit TailwindCSS nicht zu machen. Außerdem ist Tailwind im Production-Build unschlagbar klein und vor allem wächst es nicht mit zunehmendem Projekt- und Komponentenumfang. Klein bleibt klein, und damit schnell! Und zu guter Letzt ist es auch sehr angenehm, beim Komponentenbauen einfach in seinem HTML bleiben zu können, ohne zum Stylen ständig den Kontext hin zu CSS wechseln zu müssen.</p>
<p>Milan hat zu den Vorteilen von, und den Vor*UR*teilen gegen Tailwind aber auch <a href="https://docs.google.com/presentation/d/16AwHOSYdHSSHo2639_LBf37upnTT53_CmljQyWbdE7c/edit#slide=id.p1">ein komplettes Slidedeck am Start</a>.</p>
<p>Selbstverständlich geht es in unserem Gespräch irgendwann tatsächlich auch um <a href="https://www.youtube.com/watch?v=HZcI17tCp6U">die Neuerungen</a>, die Version 2 bringt. Im Wesentlichen sind das ein Dark Mode, sinnvoll vorkonfigurierte Zeilenhöhen, sinnvoll vorkonfigurierte Animations-Easings und unterlassene Hilfeleistung für den IE 11 (Custom Properties FTW!). Ansonsten gibt es von allem mehr: Mehr Farbabstufungen, mehr Grautöne, mehr Breakpoints, mehr Spacing, mehr Schriftgrößen. Wir wissen allerdings nicht, ob das gut ist, oder eher schlecht &#8211; wegen der Leitplanken und so…</p>
<p>Ach so, und TailwindCSS 2.0 dürfte das erste Framework mit <a href="https://www.youtube.com/watch?v=3u_vIdnJYLc">kinoreifem Trailer</a> sein! <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f929.png" alt="🤩" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p>Weitere Frameworks und Tools aus dem TailwindCSS-Dunstkreis, die spannend und Teil der Folge sind:</p>
<ul>
<li><a href="https://tailwindui.com/">Tailwind UI</a></li>
<li><a href="https://headlessui.dev/">Headless UI</a></li>
<li><a href="https://usewindy.com/">Windy</a></li>
</ul>
<p>Die augenöffnenste Lektüre, die unser Gast mitgebracht hat, ist ein neun Jahre alter Artikel mit dem Titel <a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/">About HTML semantics and front-end architecture</a> von Nicolas Gallagher.</p>
<p>Einen super Kniff hingegen zeigt ein Artikel namens <a href="https://adamwathan.me/composing-the-uncomposable-with-css-variables/">Composing the Uncomposable with CSS Variables</a> von Adam Wathan.</dd>
</dl>


Wir nehmen das Release von Version 2.0 von TailwindCSS als Anlass, das Framework nach längerer Zeit einmal wieder unter die Lupe zu nehmen. Als kompetenten Gast haben wir uns dafür Milan Matull ins Boot geholt, der uns durch die Ideen und Konzepte von Tailwind führt und mit dem wir über Vor- und Nachteile des Frameworks [&#8230;]

Wir nehmen das Release von Version 2.0 von TailwindCSS als Anlass, das Framework nach längerer Zeit einmal wieder unter die Lupe zu nehmen. Als kompetenten Gast haben wir uns dafür Milan Matull ins Boot geholt, der uns durch die Ideen und Konzepte v[...]

Wir nehmen das Release von Version 2.0 von TailwindCSS als Anlass, das Framework nach längerer Zeit einmal wieder unter die Lupe zu nehmen. Als kompetenten Gast haben wir uns dafür Milan Matull ins Boot geholt, der uns durch die Ideen und Konzepte von Tailwind führt und mit dem wir über Vor- und Nachteile des Frameworks (fruchtvoll und zielführend) debattieren.

Unser Sponsor

Heev.me
Du bist nicht selbständig, um dich mit Bürokratie zu befassen.
Schlanke, moderne Zeiterfassung, Angebote, Rechnungen und Ausgaben. Smart, intuitiv und auf das absolut Wesentliche reduziert. Als Working Draft Hörer:in erhältst du exklusiv 30% Rabatt auf alle ausgewählten Module, für die ersten 3 Monate.
Weitere Infos unter: heev.me/workingdraft


Schaunotizen

[00:01:47] TailwindCSS 2.0
Einleitend rekapitulieren wir noch einmal, was das erklärte Missionsziel von TailwindCSS überhaupt ist. Dabei erkennen wir einige konzeptionelle Vorläufer:

Basscss
Tachyons, und
SUIT CSS

Als ehrenwerte Konkurrenz erwähnen wir:

die Bootstrap Utilities, und
Bulma.

Wir stellen als Hauptvorteile heraus, dass die vorgegebenen Leitplanken verhindern, dass Entwickler:innen in einem Team unterschiedliche Wege in Sachen Notationen und Eigenschaftenwahl gehen. Fifty Shades of Grey ist mit TailwindCSS nicht zu machen. Außerdem ist Tailwind im Production-Build unschlagbar klein und vor allem wächst es nicht mit zunehmendem Projekt- und Komponentenumfang. Klein bleibt klein, und damit schnell! Und zu guter Letzt ist es auch sehr angenehm, beim Komponentenbauen einfach in seinem HTML bleiben zu können, ohne zum Stylen ständig den Kontext hin zu CSS wechseln zu müssen.
Milan hat zu den Vorteilen von, und den Vor*UR*teilen gegen Tailwind aber auch ein komplettes Slidedeck am Start.
Selbstverständlich geht es in unserem Gespräch irgendwann tatsächlich auch um die Neuerungen, die Version 2 bringt. Im Wesentlichen sind das ein Dark Mode, sinnvoll vorkonfigurierte Zeilenhöhen, sinnvoll vorkonfigurierte Animations-Easings und unterlassene Hilfeleistung für den IE 11 (Custom Properties FTW!). Ansonsten gibt es von allem mehr: Mehr Farbabstufungen, mehr Grautöne, mehr Breakpoints, mehr Spacing, mehr Schriftgrößen. Wir wissen allerdings nicht, ob das gut ist, oder eher schlecht – wegen der Leitplanken und so…
Ach so, und TailwindCSS 2.0 dürfte das erste Framework mit kinoreifem Trailer sein! 
Weitere Frameworks und Tools aus dem TailwindCSS-Dunstkreis, die spannend und Teil der Folge sind:

Tailwind UI
Headless UI
Windy

Die augenöffnenste Lektüre, die unser Gast mitgebracht hat, ist ein neun Jahre alter Artikel mit dem Titel About HTML semantics and front-end architecture von Nicolas Gallagher.
Einen super Kniff hingegen zeigt ein Artikel namens Composing the Uncomposable with CSS Variables von Adam Wathan.

Revision 464: TailwindCSS 2.0

<p>Es ist wieder ein Quartal vorbei und entsprechend steht eine neue TypeScript-Version vor der Tür. Stefan und Peter analysieren die kargen Neuerungen und philosophieren über TypeScript, Klassen, React, Gatekeeping und die Auswirkungen von Tooling und TS auf die weitere Webdev-Welt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-2-beta/">TypeScript 4.2</a></dt>
<dd>Das erste nennenswerte neue Feature ist, dass <strong>Template Literals</strong> nun den Typ eines <a href="https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html">Template Literal Type</a> haben können. Zuvor waren Template Literal Types vor allem für Späße wie <a href="https://github.com/codemix/ts-sql">ts-sql</a> und Pfad-Typ-Parsing (u.A. für <a href="https://www.fastify.io/">Fastify</a>-Routen) von Belang. Ebenfalls ein Upgrade für ein bestehendes Feature sind <strong>Leading/Middle Rest Elements in Tuple Types</strong> als Ergänzung zu <a href="https://fettblog.eu/variadic-tuple-types-preview/">Variadic Tuple Types</a>. <strong>Smarter Type Alias Preservation</strong> verbessert die Fehler-Ausgabe, während <strong>Stricter Checks for the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> Operator</a></strong> TypeScript etwas näher an JavaScript heranbringt (wenn auch, wie wir glauben, JavaScript es in diesem Fall nicht ganz richtig macht). Zu <strong><code>abstract</code> Construct Signatures</strong> haben wir primär die Akronyme <a title="Patterns of Object Oriented Programming" href="https://fettblog.eu/tidy-typescript-avoid-traditional-oop/">POOP</a> und <a title="System Hierarchies of Inheritance Topologies" href="https://fettblog.eu/why-i-use-typescript/">SHIT</a> beizutragen, das neue CLI-Argument <code>--noPropertyAccessFromIndexSignature</code> scheint uns sinnvoll und wir sind sicher, dass wir es nicht verwenden wollen und den Parameter <code>--explainFiles</code> sollte man auch auf Menschen anwenden können. Am Rande geht es außerdem um <a href="https://www.peterkroener.de/ambiguitaetstoleranz-loecher-und-constructor-funktionen/">Löcher in TS bzw. Programmiersprachen allgemein</a>, Typ-Parameter-Benamung, die Sinnhaftigkeit von Klassen in JS/TS, die Rückwirkungen von Tooling und TS auf die weitere Webdev-Welt, Rust und Go.</dd>
</dl>


Es ist wieder ein Quartal vorbei und entsprechend steht eine neue TypeScript-Version vor der Tür. Stefan und Peter analysieren die kargen Neuerungen und philosophieren über TypeScript, Klassen, React, Gatekeeping und die Auswirkungen von Tooling und TS auf die weitere Webdev-Welt. Schaunotizen [00:00:28] TypeScript 4.2 Das erste nennenswerte neue Feature ist, dass Template Literals nun den [&#8230;]

Es ist wieder ein Quartal vorbei und entsprechend steht eine neue TypeScript-Version vor der Tür. Stefan und Peter analysieren die kargen Neuerungen und philosophieren über TypeScript, Klassen, React, Gatekeeping und die Auswirkungen von Tooling und[...]

Es ist wieder ein Quartal vorbei und entsprechend steht eine neue TypeScript-Version vor der Tür. Stefan und Peter analysieren die kargen Neuerungen und philosophieren über TypeScript, Klassen, React, Gatekeeping und die Auswirkungen von Tooling und TS auf die weitere Webdev-Welt.
Schaunotizen

[00:00:28] TypeScript 4.2
Das erste nennenswerte neue Feature ist, dass Template Literals nun den Typ eines Template Literal Type haben können. Zuvor waren Template Literal Types vor allem für Späße wie ts-sql und Pfad-Typ-Parsing (u.A. für Fastify-Routen) von Belang. Ebenfalls ein Upgrade für ein bestehendes Feature sind Leading/Middle Rest Elements in Tuple Types als Ergänzung zu Variadic Tuple Types. Smarter Type Alias Preservation verbessert die Fehler-Ausgabe, während Stricter Checks for the in Operator TypeScript etwas näher an JavaScript heranbringt (wenn auch, wie wir glauben, JavaScript es in diesem Fall nicht ganz richtig macht). Zu abstract Construct Signatures haben wir primär die Akronyme POOP und SHIT beizutragen, das neue CLI-Argument --noPropertyAccessFromIndexSignature scheint uns sinnvoll und wir sind sicher, dass wir es nicht verwenden wollen und den Parameter --explainFiles sollte man auch auf Menschen anwenden können. Am Rande geht es außerdem um Löcher in TS bzw. Programmiersprachen allgemein, Typ-Parameter-Benamung, die Sinnhaftigkeit von Klassen in JS/TS, die Rückwirkungen von Tooling und TS auf die weitere Webdev-Welt, Rust und Go.

Revision 463: TypeScript 4.2

<p>In dieser Revision durften wir wieder einmal <a href="https://twitter.com/_jeysal_">Tim Seckinger</a>, Mitwirkender von <a href="https://jestjs.io/">Jest</a> und Entwickler bei <a href="https://www.yld.io/">YLD</a> als Gast begrüßen. In <a href="https://workingdraft.de/436/">Revision 436</a> sprachen wir bereits mit ihm generell über Frontend Unit-Testing, dieses Mal konkret über Jest.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28] <a href="#">Jest</a></dt>
<dd>
<p>Das Ecosystem Jests besteht aus mehreren Helfer-Tools, wie <a href="https://airbnb.io/projects/enzyme/">Airbnb Enzyme</a>. Auch der Jest Runner lässt sich austauschen, von <a href="https://github.com/jsdom/jsdom">jsdom</a> zu einem <a href="https://github.com/playwright-community/jest-playwright">Playwright Environment</a> bis hin zu sogar Python Tests. Etwas praxisnäher ist das Tool <a href="https://github.com/jest-community/jest-runner-eslint">jest-runner-eslint</a>, das wie andere Tools bei <a href="https://github.com/jest-community/awesome-jest">Awesome Jest</a> aufgelistet ist.</p>
<p>Die nahe Zukunft bringt ein <strong>Major Release: Jest 27</strong>. Veränderungen sind: <a href="https://jestjs.io/docs/en/snapshot-testing">Inline Snapshots</a> ohne <a href="https://prettier.io/">Prettier</a> und Node als Standard-Umgebung (bisher: jsdom). Das, und andere technische Änderungen, sorgt für eine schnelle Ausführung. Bei <strong>Jest 28</strong> könnte die Testing Library wohl sogar aus einzelnen Packages bestehen, damit nicht jedes einzelne Feature automatisch installiert werden muss. Eine weitere Idee ist eine <a href="https://reactjs.org/docs/hooks-intro.html">Hooks</a>-like Syntax anstelle von Funktionen wie beforeEach/afterEach, wie man in <a href="https://github.com/facebook/jest/issues/10453">Issue 10453</a> nachlesen kann.</p>
<p>Tim erzählt uns auch ausführlich, wie man <strong>Snapshot Tests</strong> am Besten einsetzen kann und was <strong>Anti-Patterns</strong> sind. Mit seiner Erklärung wird deutlich, wie man mit Jest sog. <strong>resilient tests</strong>, also robuste und nicht fehleranfällige Tests schreiben kann.</p>
</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/facebook/jest/blob/master/CONTRIBUTING.md">Jest Contributor</a></dt>
<dd>Jest entstand vor bereits über 10 Jahren und wie <a href="https://reactjs.org/">React.js</a> wurde es intern im Hause von FaceBook entwickelt. Doch mittlerweile wird Jest vor allem von drei Core Contributers, u.a. Tim verwaltet. Wenn du dich berufen fühlst, schau mal auf der GitHub-Seite vorbei. Dort gibts weitere Infos.</dd>
</dl>
<dl>
<dt><a href="https://workingdraft.de/458/">Revision 458: Cypress</a></dt>
<dd>Wer sich nun auch für End-to-End Testing interessiert, kann gerne in <a href="https://workingdraft.de/458/">Revision 458</a> reinhören, in der wir mit <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> über <a href="https://www.cypress.io/">Cypress</a> sprachen.</dd>
</dl>


In dieser Revision durften wir wieder einmal Tim Seckinger, Mitwirkender von Jest und Entwickler bei YLD als Gast begrüßen. In Revision 436 sprachen wir bereits mit ihm generell über Frontend Unit-Testing, dieses Mal konkret über Jest. Schaunotizen [00:00:28] Jest Das Ecosystem Jests besteht aus mehreren Helfer-Tools, wie Airbnb Enzyme. Auch der Jest Runner lässt sich [&#8230;]

In dieser Revision durften wir wieder einmal Tim Seckinger, Mitwirkender von Jest und Entwickler bei YLD als Gast begrüßen. In Revision 436 sprachen wir bereits mit ihm generell über Frontend Unit-Testing, dieses Mal konkret über Jest.
Schaunotizen
[...]

In dieser Revision durften wir wieder einmal Tim Seckinger, Mitwirkender von Jest und Entwickler bei YLD als Gast begrüßen. In Revision 436 sprachen wir bereits mit ihm generell über Frontend Unit-Testing, dieses Mal konkret über Jest.
Schaunotizen

[00:00:28] Jest

Das Ecosystem Jests besteht aus mehreren Helfer-Tools, wie Airbnb Enzyme. Auch der Jest Runner lässt sich austauschen, von jsdom zu einem Playwright Environment bis hin zu sogar Python Tests. Etwas praxisnäher ist das Tool jest-runner-eslint, das wie andere Tools bei Awesome Jest aufgelistet ist.
Die nahe Zukunft bringt ein Major Release: Jest 27. Veränderungen sind: Inline Snapshots ohne Prettier und Node als Standard-Umgebung (bisher: jsdom). Das, und andere technische Änderungen, sorgt für eine schnelle Ausführung. Bei Jest 28 könnte die Testing Library wohl sogar aus einzelnen Packages bestehen, damit nicht jedes einzelne Feature automatisch installiert werden muss. Eine weitere Idee ist eine Hooks-like Syntax anstelle von Funktionen wie beforeEach/afterEach, wie man in Issue 10453 nachlesen kann.
Tim erzählt uns auch ausführlich, wie man Snapshot Tests am Besten einsetzen kann und was Anti-Patterns sind. Mit seiner Erklärung wird deutlich, wie man mit Jest sog. resilient tests, also robuste und nicht fehleranfällige Tests schreiben kann.


Keine Schaunotizen

Jest Contributor
Jest entstand vor bereits über 10 Jahren und wie React.js wurde es intern im Hause von FaceBook entwickelt. Doch mittlerweile wird Jest vor allem von drei Core Contributers, u.a. Tim verwaltet. Wenn du dich berufen fühlst, schau mal auf der GitHub-Seite vorbei. Dort gibts weitere Infos.


Revision 458: Cypress
Wer sich nun auch für End-to-End Testing interessiert, kann gerne in Revision 458 reinhören, in der wir mit Priyanka Kore und Tobias Struckmeier von der Adesso über Cypress sprachen.

Revision 462: Jest

<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;]

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

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 465: Fundstücke und Artikel

Working Draft

Revision 464: TailwindCSS 2.0

Working Draft

Revision 463: TypeScript 4.2

Working Draft

Revision 462: Jest

Working Draft

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