Working Draft

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

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.