<p><a href="https://twitter.com/luka5c0m">Lukas Holzer</a>, seines Zeichens Senior Software Engineer bei Dynatrace bringt Hans, Stefan und Peter auf den neusten Stand was <a href="https://graphql.org/">GraphQL</a> und speziell Developer-Experience-Upgrades im Zusammenhang mit GraphQL angeht!</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<div class="message_content">
<a href="https://www.sumcumo.com/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/04/SC_Banner_Audio-AD.jpg" alt="" /></a></p>
<p>Die professionelle – weil ganzheitliche – Digitalisierung von Geschäftsmodellen ist unser Business. Renommierten Unternehmen aus der Lotterie- und Versicherungsbranche bieten wir von unseren Büros in Hamburg, Düsseldorf und Zürich aus, effiziente Produkte und Komplettlösungen aus einer Hand – von der Entwicklung einer digitalen Strategie bis hin zu ihrer Umsetzung. Bei sum.cumo findest du ein Umfeld vor, in dem sich alle Bereiche ständig weiterentwickeln wollen und in dem wir Veränderungen offen gegenüberstehen. Mit diesen Voraussetzungen meistern wir unser gesundes Unternehmenswachstum und legen dabei Wert auf einen absolut respektvollen, offenen und unkomplizierten Umgang miteinander legen.</p></div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:33] GraphQL in 2021</dt>
<dd>Obwohl wir in <a href="https://workingdraft.de/382/">Revision 382</a> den Kampf REST vs. GraphQL bereits durchgekaut hatten, lässt sich Backend-Noob Peter GraphQL und die nochmal kurz erklären. <br />
Zusammenfassung: Facebook baut GraphQL und Over-Download beim Anzeigen der Timeline zu verhindern, macht es Open Source, gibt es an die <a href="https://foundation.graphql.org/">GraphQL Foundation</a> ab und ein Ökosystem mit Tools wie <a href="https://swagger.io/">Swagger</a> und Clients wie <a href="https://www.apollographql.com/">Apollo</a> entsteht. Ein Beispiel zum herumklicken ist die <a href="http://api.spacex.land/graphql/">GraphQL-API von SpaceX</a>. Lukas macht sich im GraphQL-Kontext vor allem Gedanken um die Developer Experience und den Implementierungsaufwand von GraphQL. Hierbei geht&#8217;s vor allem um Codegenerierung, die Zusammenarbeit von TypeScript und GraphQL (z.B. mit <a href="https://github.com/drwpow/openapi-typescript">openapi-typescript</a>), Data Stitching und andere Herausforderungen beim Groß-Einsatz, was u.a. die Integration von Nicht-GraphQL-Services mit <a href="https://github.com/Urigo/graphql-mesh">GraphQL Mesh</a> einschließt.<br />
Wir debattieren des Weiteren die großen Fragen des API-Designs an sich, <a href="https://netflixtechblog.com/how-netflix-scales-its-api-with-graphql-federation-part-1-ae3557c187e2">Netflix&#8216; GraphQL-Einsatz</a>, Frontend-Tooling (v.a. <a href="https://github.com/evanw/esbuild">esbuild</a> <a href="https://github.com/vitejs/vite">vite</a> und <a href="https://www.snowpack.dev/">Snowpack</a>) und den blast from the Past in der <a href="https://www.youtube.com/watch?v=bJdefMsie24">jüngsten Cookie Bar</a>.
</dd>
</dl>


Lukas Holzer, seines Zeichens Senior Software Engineer bei Dynatrace bringt Hans, Stefan und Peter auf den neusten Stand was GraphQL und speziell Developer-Experience-Upgrades im Zusammenhang mit GraphQL angeht! Unser Sponsor Die professionelle – weil ganzheitliche – Digitalisierung von Geschäftsmodellen ist unser Business. Renommierten Unternehmen aus der Lotterie- und Versicherungsbranche bieten wir von unseren Büros in [&#8230;]

Working Draft

Lukas Holzer, seines Zeichens Senior Software Engineer bei Dynatrace bringt Hans, Stefan und Peter auf den neusten Stand was GraphQL und speziell Developer-Experience-Upgrades im Zusammenhang mit GraphQL angeht!

Unser Sponsor


Die professionelle –[...]

Lukas Holzer, seines Zeichens Senior Software Engineer bei Dynatrace bringt Hans, Stefan und Peter auf den neusten Stand was GraphQL und speziell Developer-Experience-Upgrades im Zusammenhang mit GraphQL angeht!

Unser Sponsor


Die professionelle – weil ganzheitliche – Digitalisierung von Geschäftsmodellen ist unser Business. Renommierten Unternehmen aus der Lotterie- und Versicherungsbranche bieten wir von unseren Büros in Hamburg, Düsseldorf und Zürich aus, effiziente Produkte und Komplettlösungen aus einer Hand – von der Entwicklung einer digitalen Strategie bis hin zu ihrer Umsetzung. Bei sum.cumo findest du ein Umfeld vor, in dem sich alle Bereiche ständig weiterentwickeln wollen und in dem wir Veränderungen offen gegenüberstehen. Mit diesen Voraussetzungen meistern wir unser gesundes Unternehmenswachstum und legen dabei Wert auf einen absolut respektvollen, offenen und unkomplizierten Umgang miteinander legen.

Schaunotizen

[00:01:33] GraphQL in 2021
Obwohl wir in Revision 382 den Kampf REST vs. GraphQL bereits durchgekaut hatten, lässt sich Backend-Noob Peter GraphQL und die nochmal kurz erklären. 
Zusammenfassung: Facebook baut GraphQL und Over-Download beim Anzeigen der Timeline zu verhindern, macht es Open Source, gibt es an die GraphQL Foundation ab und ein Ökosystem mit Tools wie Swagger und Clients wie Apollo entsteht. Ein Beispiel zum herumklicken ist die GraphQL-API von SpaceX. Lukas macht sich im GraphQL-Kontext vor allem Gedanken um die Developer Experience und den Implementierungsaufwand von GraphQL. Hierbei geht’s vor allem um Codegenerierung, die Zusammenarbeit von TypeScript und GraphQL (z.B. mit openapi-typescript), Data Stitching und andere Herausforderungen beim Groß-Einsatz, was u.a. die Integration von Nicht-GraphQL-Services mit GraphQL Mesh einschließt.
Wir debattieren des Weiteren die großen Fragen des API-Designs an sich, Netflix‘ GraphQL-Einsatz, Frontend-Tooling (v.a. esbuild vite und Snowpack) und den blast from the Past in der jüngsten Cookie Bar.

Revision 472: GraphQL in 2021

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

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

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

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

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 &#8222;Robust Clientside JavaScript&#8220; veröffentlich hat, ist das nun erschienene &#8222;Testing Angular&#8220; so etwas wie dessen Fortführung. Angular musste in dem Fall als Framework herhalten, allerdings können Mathias Empfehlungen aus dem [&#8230;]

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

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 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;. Schaunotizen [00:00:30] CSS in [&#8230;]

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

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>
<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>
<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 JavaScript, Angular, React, HTML &#38; CSS Vier Tracks mit über 40 Workshops von mehr als 25 (inter-)national bekannten Trainern:innen vermitteln tiefgehend, wie Sie JavaScript- &#38; HTML-basierte Anwendungen optimal planen und [&#8230;]

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

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

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

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

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

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 472: GraphQL in 2021

Working Draft

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