<p>In dieser Woche durften wir <a href="https://twitter.com/m_ott">Matthias Ott</a> begrüßen. Neben <a href="https://matthiasott.com/articles">seinen Artikeln über Front-end und Design-Themen</a>, schreibt er <a href="https://prototyping.news/">einen Newsletter</a> zu den Themen.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<div class="message_content">
<a href="https://www.factorial.io/de?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/04/FAC_Banner_workingdraft_v3.jpg" alt="" /></a></p>
<p>Factorial ist eine Digitalagentur mit einem internationalen Team und dem Fokus auf Open Source Technologien, die für regionale und internationale Kunden Technologien entwickelt. Mit Kompetenzen im Bereich Development, Design und Projektmanagement treibt die Agentur die digitale Transformation ihrer Kunden voran. Zu den Anwendungsbereichen zählen unter anderem Hosting, Content Management, Qualitätssicherung, Automatisierung und die Integration heterogener Systemlandschaften.<br />
Mehr Infos zu den aktuellen Stellenausschreibungen gibt es hier:<br />
<a href="https://www.factorial.io/de/jobs?ref=workingdraft.de">www.factorial.io/de/jobs</a>.<br />
<a href="https://bit.ly/3tZJjHz">In diesem Video</a> stellt unser Kollege Julian den Frontend Job bei Factorial vor.</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:30] UI und Development: State of the Art</dt>
<dd>In den letzten Jahren hat sich einiges getan. In <a href="https://workingdraft.de/312/">Revision 312</a> haben wir zuletzt über die Zusammenarbeit von Design und Development gesprochen. Somit ist eine Bestandsaufnahme notwendig. Matthias erzählt uns von seinen Erfahrungen und modernem Tooling.<br />
Darüber hinaus sprechen wir über die Art und Weise, wie man gut mit einander kommunizieren kann. Denn das ist das entscheidende, um gute Frontends zu liefern. Außerdem vielleicht auch Component Based Design :) Aber hört selbst.
</dd>
</dl>


In dieser Woche durften wir Matthias Ott begrüßen. Neben seinen Artikeln über
Front-end und Design-Themen, schreibt er einen Newsletter zu den Themen.


UNSER SPONSOR

Factorial ist eine Digitalagentu…

Working Draft

In dieser Woche durften wir Matthias Ott begrüßen. Neben seinen Artikeln über
Front-end und Design-Themen, schreibt er einen Newsletter zu den Themen.


UNSER SPONSOR

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


SCHAUNOTIZEN

[00:01:30] UI UND DEVELOPMENT: STATE OF THE ART

In den letzten Jahren hat sich einiges getan. In Revision 312 haben wir zuletzt
über die Zusammenarbeit von Design und Development gesprochen. Somit ist eine
Bestandsaufnahme notwendig. Matthias erzählt uns von seinen Erfahrungen und
modernem Tooling.
Darüber hinaus sprechen wir über die Art und Weise, wie man gut mit einander
kommunizieren kann. Denn das ist das entscheidende, um gute Frontends zu
liefern. Außerdem vielleicht auch Component Based Design :) Aber hört selbst.

Revision 471: UX und UI trifft Frontend-Development

<p>Kahlil und Stefan treffen sich wieder zu einem nächtlichen Diskurs rund um Webentwicklung. Die gewohnten <a href="https://nextjs.org">Next.js</a> Architektur Referenzen inklusive. </p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://www.netidee.at/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/06/netidee-banner-1.jpg" alt="" /></a></p>
<div class="message_content">Netidee ist die größte Internet Förderaktion in Österreich. Bis zu 1 Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. <a href="https://www.netidee.at/?ref=workingdraft.de">Hier kannst du mehr über netidee erfahren</a>.</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:34] Late Night</dt>
<dd>Fühlen wir uns in der Webentwicklungs-Community noch wohl? Stefan berichtet von seinem jüngsten Twitter Fallout und beschreibt, warum er nach über 8 Jahren auf Twitter endlich den Block-Button gefunden hat. Kahlil erklärt versteckte Twitter-Funktionalität, und wir stimmen im ewigen Geschrei Pro- und Contra-Tailwind, Pro- und Contra-React, mal für ein gemäßigtes Mittel. Nichts ist so toll oder so schlecht, wie man das rundum hört.</dd>
<dd>Des weiteren erzählen wir von den ersten Erlebnissen mit Clubhouse, dem Unterschied zu regulärem Podcasting, und wie die schwarze Szene auch dieses Medium groß gemacht hat.</dd>
<dd>Zu guter Letzt gibt es Geschichten aus dem Agenturleben. Welche Projekte sind gut verlaufen? Welche grottenschlecht? Kann Agentur funktionieren oder muss das Modell überdacht werden</dd>
<dd>Aus den Schaunotizen: <a href="https://twitter.com/techgirl1908">Angie Jones</a> als Twitter-Empfehlung. <a href="https://fettblog.eu/cinema/the-scandalous-story-of-dreadful-code-written-by-the-best-of-us">Katrina Owen und <span lang="en">The Scandalous Story of Dreadful Code Written By The Best Of Us</span></a> zum Nachsehen. Martin Fowlers Buch <a href="https://martinfowler.com/books/refactoring.html">Refactoring</a> als dringende Empfehlung auch für JavaScript Entwickler:innen.</dd>
</dl>


Kahlil und Stefan treffen sich wieder zu einem nächtlichen Diskurs rund um
Webentwicklung. Die gewohnten Next.js Architektur Referenzen inklusive.


UNSER SPONSOR



Netidee ist die größte Internet Fö…

Kahlil und Stefan treffen sich wieder zu einem nächtlichen Diskurs rund um
Webentwicklung. Die gewohnten Next.js Architektur Referenzen inklusive.


UNSER SPONSOR



Netidee ist die größte Internet Förderaktion in Österreich. Bis zu 1 Million
Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder
Hochschularbeiten, die das Internet weiterentwickeln und einen
gesellschaftlichen Mehrwert liefern. Hier kannst du mehr über netidee erfahren.


SCHAUNOTIZEN

[00:01:34] LATE NIGHT

Fühlen wir uns in der Webentwicklungs-Community noch wohl? Stefan berichtet von
seinem jüngsten Twitter Fallout und beschreibt, warum er nach über 8 Jahren auf
Twitter endlich den Block-Button gefunden hat. Kahlil erklärt versteckte
Twitter-Funktionalität, und wir stimmen im ewigen Geschrei Pro- und
Contra-Tailwind, Pro- und Contra-React, mal für ein gemäßigtes Mittel. Nichts
ist so toll oder so schlecht, wie man das rundum hört.

Des weiteren erzählen wir von den ersten Erlebnissen mit Clubhouse, dem
Unterschied zu regulärem Podcasting, und wie die schwarze Szene auch dieses
Medium groß gemacht hat.

Zu guter Letzt gibt es Geschichten aus dem Agenturleben. Welche Projekte sind
gut verlaufen? Welche grottenschlecht? Kann Agentur funktionieren oder muss das
Modell überdacht werden

Aus den Schaunotizen: Angie Jones als Twitter-Empfehlung. Katrina Owen und The
Scandalous Story of Dreadful Code Written By The Best Of Us zum Nachsehen.
Martin Fowlers Buch Refactoring als dringende Empfehlung auch für JavaScript
Entwickler:innen.

Revision 470: Late Night mit Dev Twitter Fallout, Klubhäusern, Agenturleben

<p>Vanessa, Schepp und Stefan reden heute mit <a href="https://molily.de/">Mathias Schäfer</a> (<a href="https://twitter.com/molily">@molily</a>) über Testing mit Angular.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] <a href="https://molily.de/testing-angular/">Testing Angular</a></dt>
<dd>Nachdem Mathias im Jahr 2017 sein Werk <a href="https://molily.de/robust-javascript/">&#8222;Robust Clientside JavaScript&#8220;</a> veröffentlich hat, ist das nun erschienene <a href="https://molily.de/testing-angular/">&#8222;Testing Angular&#8220;</a> so etwas wie dessen Fortführung. Angular musste in dem Fall als Framework herhalten, allerdings können Mathias Empfehlungen aus dem Buch auf alle anderen Frameworks übertragen werden. Angular hat den Vorteil, dass es zu Beginn etwas mehr Tooling mitliefert als etwa React. Das Problem ist aber, dass man anschließend ohne Unterstützung bei der Test-Methodik allein gelassen wird. Diese Lücke wollte Mathias schließen. Dabei ist Mathias ohne vorgefertigte Meinung gestartet. Stattdessen ging es ihm darum, Testing zu durchdenken und zu einer eigenen Position zu kommen, die dann begründet wird. Das Buch erklärt, was sinnvolle Tests sind. Für Mathias sind es diejenigen Tests, die Komponenten als Ganzes testen, also inklusive dem DOM und nicht nur die dahinterstehende (Klassen-)Logik. Letzteres nennt man &#8222;White-Box-Tests&#8220;, weil man zum Testen wissen muss, wie das JavaScript aufgebaut ist. Besser sind aber die &#8222;Black-Box-Tests&#8220;, die das HTML abtesten und denen völlig egal ist, was hinter den Kulissen an Abläufen notwendig ist. Diese Art von Tests nehmen zudem stärker die Nutzerperspektive ein und sie gehen bei späteren Refactorings weniger oft kaputt, was weniger Wartungsaufwände an den Tests zur Folge hat. Mathias reiht sich damit hinter Vordenker wie <a href="https://kentcdodds.com/blog/write-tests/">Kent C. Dodds</a> ein. Was Mathias als mitgeliefertes Werkzeug nicht überzeugt hat, ist <a href="https://www.protractortest.org/">Protractor</a>, und zwar vorwiegend weil es WebDriver-basiert ist und weil es ein paar seiner ehemaligen Verzahnungen mit Angular verloren hat. Stattdessen bevorzugt er <a href="https://www.cypress.io/">Cypress</a>, <a href="https://workingdraft.de/458/">das wir vor nicht allzu langer Zeit hier im Podcast zum Thema hatten</a>. Folgende Links spielen im Laufe unseres Gesprächs eine Rolle:</p>
<ul>
<li><a href="https://github.com/9elements/angular-workshop/blob/main/src/app/spec-helpers/element.spec-helper.ts">Mathias&#8216; Testing Helpers</a></li>
<li><a href="https://github.com/ngneat/spectator">Spectator</a></li>
<li><a href="https://github.com/NagRock/ts-mockito">TS Mockito</a></li>
<li><a href="https://github.com/ike18t/ng-mocks">ng Mocks</a></li>
<li><a href="https://playwright.dev/">PlayWright</a></li>
<li><a href="https://www.manning.com/books/testing-angular-applications">Das Buch &#8222;Testing Angular Applications&#8220; von Manning</a></li>
</ul>
</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://expect-exception.fail/">expect(Exception)</a></dt>
<dd>Vanessas Podcast über Frontend Testing.</dd>
<dt><a href="https://flowchart.fun/">flowchart.fun</a></dt>
<dd>Eine Web-App, in der man Flußdiagramme mit Hilfe von speziellem Markup schreibt/zeichnet</dd>
</dl>


Vanessa, Schepp und Stefan reden heute mit Mathias Schäfer (@molily) über
Testing mit Angular.


SCHAUNOTIZEN

[00:00:29] TESTING ANGULAR

Nachdem Mathias im Jahr 2017 sein Werk „Robust Clientside Jav…

Vanessa, Schepp und Stefan reden heute mit Mathias Schäfer (@molily) über
Testing mit Angular.


SCHAUNOTIZEN

[00:00:29] TESTING ANGULAR

Nachdem Mathias im Jahr 2017 sein Werk „Robust Clientside JavaScript“
veröffentlich hat, ist das nun erschienene „Testing Angular“ so etwas wie dessen
Fortführung. Angular musste in dem Fall als Framework herhalten, allerdings
können Mathias Empfehlungen aus dem Buch auf alle anderen Frameworks übertragen
werden. Angular hat den Vorteil, dass es zu Beginn etwas mehr Tooling mitliefert
als etwa React. Das Problem ist aber, dass man anschließend ohne Unterstützung
bei der Test-Methodik allein gelassen wird. Diese Lücke wollte Mathias
schließen. Dabei ist Mathias ohne vorgefertigte Meinung gestartet. Stattdessen
ging es ihm darum, Testing zu durchdenken und zu einer eigenen Position zu
kommen, die dann begründet wird. Das Buch erklärt, was sinnvolle Tests sind. Für
Mathias sind es diejenigen Tests, die Komponenten als Ganzes testen, also
inklusive dem DOM und nicht nur die dahinterstehende (Klassen-)Logik. Letzteres
nennt man „White-Box-Tests“, weil man zum Testen wissen muss, wie das JavaScript
aufgebaut ist. Besser sind aber die „Black-Box-Tests“, die das HTML abtesten und
denen völlig egal ist, was hinter den Kulissen an Abläufen notwendig ist. Diese
Art von Tests nehmen zudem stärker die Nutzerperspektive ein und sie gehen bei
späteren Refactorings weniger oft kaputt, was weniger Wartungsaufwände an den
Tests zur Folge hat. Mathias reiht sich damit hinter Vordenker wie Kent C. Dodds
ein. Was Mathias als mitgeliefertes Werkzeug nicht überzeugt hat, ist
Protractor, und zwar vorwiegend weil es WebDriver-basiert ist und weil es ein
paar seiner ehemaligen Verzahnungen mit Angular verloren hat. Stattdessen
bevorzugt er Cypress, das wir vor nicht allzu langer Zeit hier im Podcast zum
Thema hatten. Folgende Links spielen im Laufe unseres Gesprächs eine Rolle:



 * Mathias‘ Testing Helpers
 * Spectator
 * TS Mockito
 * ng Mocks
 * PlayWright
 * Das Buch „Testing Angular Applications“ von Manning


KEINE SCHAUNOTIZEN

EXPECT(EXCEPTION)

Vanessas Podcast über Frontend Testing.

FLOWCHART.FUN

Eine Web-App, in der man Flußdiagramme mit Hilfe von speziellem Markup
schreibt/zeichnet

Revision 469: Testing mit Angular

<p>Anders als ursprünglich geplant geht es in dieser Revision nicht mit dem vergangene Woche angekündigten Thema weiter. Unseren Hauptakteur, Peter, hatte es nämlich gesundheitlich dahingerafft, so dass Hans und Schepp sich auf ein alternatives Thema verlegen mussten. Angeregt durch eine konkrete Situation aus dem Job landeten wir bei &#8222;CSS in JS&#8220;.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] CSS in JS</dt>
<dd>Ausgehend von der Frage, was man denn heutzutage am Besten für eine CSS-in-JS-Lösung anwendet, also ob <a href="https://cssinjs.org/">JSS</a>, <a href="https://github.com/css-modules/css-modules">CSS Modules</a> oder doch eher <a href="https://styled-components.com/">Styled Components</a> arbeiten wir uns nach und nach durch den gesamten CSS-Technologiepark durch. Wir reden über die Vorteile der JS-basierten Lösungen und vergleichen sie mit reinen Konventionen wie <a href="http://getbem.com/">BEM</a>. Wir blicken zurück auf unsere Folge über <a href="https://workingdraft.de/464/">TailwindCSS</a> und verweisen auf <a href="https://workingdraft.de/464/#comments">die sehr lesenswerten Kommentare, die wir dazu bekommen haben</a>. Und auch <a href="https://twitter.com/supremebeing09">Nils Binder</a> hat zu TailwindCSS <a href="https://codepen.io/enbee81/full/BaQNZLQ">einen sehr lesenswerten Blogpost geschrieben</a>. Wir erwähnen die CSS-Heldinnen <a href="https://codepen.io/thebabydino">Ana Tudor</a> und <a href="https://lea.verou.me/">Lea Verou</a>. Und wir kommen aus irgendwelchen Gründen <a href="https://www.oreilly.com/library/view/javascript-the-good/9780596517748/">Douglas Crockfords Buch &#8222;JavaScript The Good Parts&#8220;</a>.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.meetup.com/CSS-Cafe/">Das CSS Café</a></dt>
<dd>Weil CSS ohnehin unser Thema war, pluggen wir einfach Mal dieses Online-Meetup, in dem der oben schon verlinkte Nils Binder, wie auch der Schepp mitwirken.</dd>
</dl>


Anders als ursprünglich geplant geht es in dieser Revision nicht mit dem
vergangene Woche angekündigten Thema weiter. Unseren Hauptakteur, Peter, hatte
es nämlich gesundheitlich dahingerafft, so dass …

Anders als ursprünglich geplant geht es in dieser Revision nicht mit dem
vergangene Woche angekündigten Thema weiter. Unseren Hauptakteur, Peter, hatte
es nämlich gesundheitlich dahingerafft, so dass Hans und Schepp sich auf ein
alternatives Thema verlegen mussten. Angeregt durch eine konkrete Situation aus
dem Job landeten wir bei „CSS in JS“.


SCHAUNOTIZEN

[00:00:30] CSS IN JS

Ausgehend von der Frage, was man denn heutzutage am Besten für eine
CSS-in-JS-Lösung anwendet, also ob JSS, CSS Modules oder doch eher Styled
Components arbeiten wir uns nach und nach durch den gesamten CSS-Technologiepark
durch. Wir reden über die Vorteile der JS-basierten Lösungen und vergleichen sie
mit reinen Konventionen wie BEM. Wir blicken zurück auf unsere Folge über
TailwindCSS und verweisen auf die sehr lesenswerten Kommentare, die wir dazu
bekommen haben. Und auch Nils Binder hat zu TailwindCSS einen sehr lesenswerten
Blogpost geschrieben. Wir erwähnen die CSS-Heldinnen Ana Tudor und Lea Verou.
Und wir kommen aus irgendwelchen Gründen Douglas Crockfords Buch „JavaScript The
Good Parts“.


KEINE SCHAUNOTIZEN

DAS CSS CAFÉ

Weil CSS ohnehin unser Thema war, pluggen wir einfach Mal dieses Online-Meetup,
in dem der oben schon verlinkte Nils Binder, wie auch der Schepp mitwirken.

Revision 468: CSS in JS

<p>Peter hat mal wieder ein randständiges Webstandards-Thema beforscht und berichtet in dieser Revision Hans und Schepp von seinen Erkenntnissen.</p>
<hr><aside class="message long-message">
<div class="message_content">
<p><a class="message_link" href="https://javascript-days.de/?ref=workingdraft.de"><img class="alignnone size-medium" style="display: block; float: right; margin-left: 1rem; margin-bottom: 1rem; max-width: 400px;" src="https://workingdraft.de/wp-content/uploads/2021/03/JSD_MUC21_Kombibanner_Newsletter_600x300_60417_v1.jpg" alt="" /></a></p>
<h2 style="display: block;">Unser Sponsor</h2>
<p><b>Das große Online-Trainingsevent für JavaScript, Angular, React, HTML &amp; CSS</b><br />
Vier Tracks mit über 40 Workshops von mehr als 25 (inter-)national bekannten Trainern:innen vermitteln tiefgehend, wie Sie JavaScript- &amp; HTML-basierte Anwendungen optimal planen und erfolgreich realisieren, welche Stärken und Schwächen die Technologien haben und wie Sie bei der Wahl geeigneter Architekturen vorgehen sollten. Als JavaScript- oder HTML-Einsteiger:in oder -Umsteiger:in ist der Fundamentals Day die beste Vorbereitung auf die Workshoptage! Anschließend erwarten Sie Themen, wie Electron, Project Fugu, Cypress oder TypeScript. Mit dem 4-in-1-Paket buchen Sie also ein Event &amp; können gleichzeitig an allen vier teilnehmen!</p>
<p>Alle aktuellen Online und Vor-Ort-Trainings und Events finden Sie unter: <a href="https://e-academy.net/?ref=workingdraft.de">e-academy.net</a><br />
Mehr Infos zu den JavaScript Days: <a href="https://javascript-days.de/?ref=workingdraft.de">javascript-days.de</a>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:59] Event Handler (für Web Components)</dt>
<dd><a href="https://www.peterkroener.de/das-warum-und-das-wie-von-event-handlern-in-web-components/">In Peters jüngstem Blogpost geht es um Event Handler für Web Components.</a> Wir klären zunächst die Beziehung zwischen <a href="https://html.spec.whatwg.org/#event-handler-attributes">Event Handlers</a> (mit <code>on</code> beginnende Properties und Attribute) und <a href="https://dom.spec.whatwg.org/#concept-event-listener">Event Listeners</a> und besprechen dann, wie Event Handler genau funktionieren (Spoiler: es ist kompliziert). Danach diskutieren wir, ob auch die Custom Events von Custom Elements (aka Web Web Components) über Event Handler ansteuerbar sein sollten. Für den Ja-Fall hat Peter das <a href="https://github.com/SirPepe/OnEventMixin">OnEventMixin</a> gebaut, das Event-Handler-Logik in Web-Component-Klassen hineinpatched.</dd>
</dl>


Peter hat mal wieder ein randständiges Webstandards-Thema beforscht und
berichtet in dieser Revision Hans und Schepp von seinen Erkenntnissen.


UNSER SPONSOR

Das große Online-Trainingsevent für Java…

Peter hat mal wieder ein randständiges Webstandards-Thema beforscht und
berichtet in dieser Revision Hans und Schepp von seinen Erkenntnissen.


UNSER SPONSOR

Das große Online-Trainingsevent für JavaScript, Angular, React, HTML & CSS
Vier Tracks mit über 40 Workshops von mehr als 25 (inter-)national bekannten
Trainern:innen vermitteln tiefgehend, wie Sie JavaScript- & HTML-basierte
Anwendungen optimal planen und erfolgreich realisieren, welche Stärken und
Schwächen die Technologien haben und wie Sie bei der Wahl geeigneter
Architekturen vorgehen sollten. Als JavaScript- oder HTML-Einsteiger:in oder
-Umsteiger:in ist der Fundamentals Day die beste Vorbereitung auf die
Workshoptage! Anschließend erwarten Sie Themen, wie Electron, Project Fugu,
Cypress oder TypeScript. Mit dem 4-in-1-Paket buchen Sie also ein Event & können
gleichzeitig an allen vier teilnehmen!

Alle aktuellen Online und Vor-Ort-Trainings und Events finden Sie unter:
e-academy.net
Mehr Infos zu den JavaScript Days: javascript-days.de


SCHAUNOTIZEN

[00:01:59] EVENT HANDLER (FÜR WEB COMPONENTS)

In Peters jüngstem Blogpost geht es um Event Handler für Web Components. Wir
klären zunächst die Beziehung zwischen Event Handlers (mit on beginnende
Properties und Attribute) und Event Listeners und besprechen dann, wie Event
Handler genau funktionieren (Spoiler: es ist kompliziert). Danach diskutieren
wir, ob auch die Custom Events von Custom Elements (aka Web Web Components) über
Event Handler ansteuerbar sein sollten. Für den Ja-Fall hat Peter das
OnEventMixin gebaut, das Event-Handler-Logik in Web-Component-Klassen
hineinpatched.

Revision 467: Event Handler (für Web Components)

<p>Diese Ausgabe widmen wir uns zusammen mit unseren Gästinnen <a href="https://www.sumcumo.com/people/autoren/franziska-gertz">Franziska Gertz</a> (<a href="https://twitter.com/frau_scholle">@frau_scholle</a>) und <a href="https://www.linkedin.com/in/svenja-motzek-552938178/">Svenja Motzek</a> dem Thema Diversität, mit speziellem Fokus auf den Bereich Entwicklung.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] Diversität im Bereich Entwicklung</dt>
<dd>Wir beginnen zunächst mit der Frage, was Diversität denn überhaupt bedeutet. Geht es nur um Frau/Mann, oder kann man das umfassender betrachten? Spoiler: Aber ja! Hier sind verschiedenartig gehandicappedte Personen zu nennen, oder (Nicht-)Muttersprachler und (Nicht-)Muttersprachlerinnen oder auch Quereinsteigerinnen und Quereinsteiger mit Erfahrungen aus ganz anderen Branchen.</p>
<p>Wir sind uns einig, dass ein diverses Team mehr Dynamik hat und am Ende durch die vielen unterschiedlichen Perspektiven das bessere Produkte entwickelt als eines, das sehr homogen ist. Wir stellen auch fest, dass Corona Vielen die Möglichkeit eröffnet, von zu Hause an Projekten mitzuwirken, die sonst nicht so oft ins Büro kommen können. Auch das sorgt für diversere Teams.</p>
<p>Aus dem Frau/Mann-Bereich erzählen Franzi, Svenja und Vanessa von Erlebnissen rund um das Thema Diversität aus ihrer Vergangenheit, guten wie schlechten. Und natürlich reden wir auch über das Konzept der Frauenquote.</p>
<p>Wir wagen einen Blick über den Tellerrand in andere, der Software-Entwicklung angeschlossene Berufe und stellen fest, dass es dort um Diversität möglicherweise noch weitaus schlechter bestellt ist als bei uns.</p>
<p>Last but not least geht es auch um unseren alltäglichen Sprachgebrauch und wie sich nicht-männliche Personen unterbewusst nicht eingeschlossen oder angesprochen fühlen, wenn wir Dinge, gleichwohl sprachlich korrekt, im generischen Maskulinum formulieren (der Duden hat hier auch <a href="https://www.deutschlandfunk.de/gendergerechter-online-duden-wie-maennlich-ist-der-lehrer.691.de.html?dram:article_id=490547">gerade umgestellt</a>).</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://ng-girls.org/">ngGirls</a></dt>
<dd>ngGirls aims to introduce women to the world of technology and increase the diversity. Angular is a great technology to start with.</dd>
</dl>


Diese Ausgabe widmen wir uns zusammen mit unseren Gästinnen Franziska Gertz
(@frau_scholle) und Svenja Motzek dem Thema Diversität, mit speziellem Fokus auf
den Bereich Entwicklung.


SCHAUNOTIZEN

[0…

Diese Ausgabe widmen wir uns zusammen mit unseren Gästinnen Franziska Gertz
(@frau_scholle) und Svenja Motzek dem Thema Diversität, mit speziellem Fokus auf
den Bereich Entwicklung.


SCHAUNOTIZEN

[00:00:29] DIVERSITÄT IM BEREICH ENTWICKLUNG

Wir beginnen zunächst mit der Frage, was Diversität denn überhaupt bedeutet.
Geht es nur um Frau/Mann, oder kann man das umfassender betrachten? Spoiler:
Aber ja! Hier sind verschiedenartig gehandicappedte Personen zu nennen, oder
(Nicht-)Muttersprachler und (Nicht-)Muttersprachlerinnen oder auch
Quereinsteigerinnen und Quereinsteiger mit Erfahrungen aus ganz anderen
Branchen.



Wir sind uns einig, dass ein diverses Team mehr Dynamik hat und am Ende durch
die vielen unterschiedlichen Perspektiven das bessere Produkte entwickelt als
eines, das sehr homogen ist. Wir stellen auch fest, dass Corona Vielen die
Möglichkeit eröffnet, von zu Hause an Projekten mitzuwirken, die sonst nicht so
oft ins Büro kommen können. Auch das sorgt für diversere Teams.

Aus dem Frau/Mann-Bereich erzählen Franzi, Svenja und Vanessa von Erlebnissen
rund um das Thema Diversität aus ihrer Vergangenheit, guten wie schlechten. Und
natürlich reden wir auch über das Konzept der Frauenquote.

Wir wagen einen Blick über den Tellerrand in andere, der Software-Entwicklung
angeschlossene Berufe und stellen fest, dass es dort um Diversität
möglicherweise noch weitaus schlechter bestellt ist als bei uns.

Last but not least geht es auch um unseren alltäglichen Sprachgebrauch und wie
sich nicht-männliche Personen unterbewusst nicht eingeschlossen oder
angesprochen fühlen, wenn wir Dinge, gleichwohl sprachlich korrekt, im
generischen Maskulinum formulieren (der Duden hat hier auch gerade umgestellt).


KEINE SCHAUNOTIZEN

NGGIRLS

ngGirls aims to introduce women to the world of technology and increase the
diversity. Angular is a great technology to start with.

Revision 466: Diversität im Bereich Entwicklung

<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…

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>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<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><hr>
<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! ?</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 Bo…

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,…

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-Tes…

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 berichten. 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 berichten. Diesmal
ging’s um HTML übers Kabel, in verschiedenen A…

Kahlil und Stefan treffen sich wieder einmal spät-abends um über die diversen
Ausschreitungen in der Welt der JavaScript Frameworks zu berichten. 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 ✨</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 Yout…

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

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen

PODLIST

Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen.

Neue Episoden

Revision 471: UX und UI trifft Frontend-Development

Working Draft

Revision 470: Late Night mit Dev Twitter Fallout, Klubhäusern, Agenturleben

Working Draft

Revision 469: Testing mit Angular

Working Draft

Revision 468: CSS in JS

Working Draft

Revision 467: Event Handler (für Web Components)

Working Draft

Revision 466: Diversität im Bereich Entwicklung

Working Draft

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