Working Draft

Anlässlich der Veröffentlichung seines Buches „Accessible Vue“ luden wir Barrierefreiheitsexperte Marcus Herrmann (@_marcusherrmann) aus Berlin zu uns ein, um über Barrierefreiheit im Allgemeinen und über die besonderen Herausforderungen der barrierearmen Programmierung von Single-Page-Applications im Besonderen zu sprechen. Schaunotizen [00:02:00] Barrierefreiheit in Single Page Applications Folgende Links spielten während unseres Gesprächsverlaufs eine Rolle: Apple Human Interface Guidelines AxeCore von den Deque Labs WAVE Web Accessibility Evaluation Tool Manuel Matuzović: Building the most inaccessible site possible with a perfect Lighthouse score Web Content Accessibility Guidelines (WCAG) The New York Times Modale Das inert-Attribut WAI-ARIA Authoring Practices 1.1 Sarah Higley prefers-reduced-motion Windows High Contrast Mode

Im September 2020 war das Release von Vue 3. Ein gutes halbes Jahr später besprechen wir mit Markus Oberlehner über Erfahrungen über die Einsatz der Änderungen in echten Projekten. Schaunotizen [00:00:59] Vue 3 und die Composition API Über keine eine andere Änderung bei Vue 3 wird so viel gesprochen wie die Composition API. Denn, wenn man das so möchte, hat sie den größten Effekt auf die Programmierweise von Frontend Applikation mit Vue.js. Zudem gibt es Performance Boosts, das Entfernen des notwendig Root-Elements jeder Single File Component und die Möglichkeit mehrere v-models an Kind Komponenten zu binden. Die sind zwar alle super, aber deswegen haben Hans, Schepp, Vanessa und Markus auch nicht viel dazu gesagt. Vergleichbar ist die umumstrittene Composition API mit React Hooks, von denen sie wohl auch inspiriert war, wie Evan You, der Erfinder von Vue.js, in einem Tweet von 2018 durchblicken lässt. Markus und Vanessa sind sich einig, dass die Composition API eine tolle Sache ist, aber die Best Practices noch fehlen. Glücklicherweise sorgt Markus auf seinem Blog mit vielen hilfreichen Artikeln. Er berichtet über das Group, Extract, Share Konzept, den Einsatzgebieten von watch und watchEffect und Möglichkeiten im State Management, auch ganz ohne Vuex. Markus erzählt ebenfalls von swrv, einem state-while-revalidate Plugin.  Außerdem gibt es ein Open Source Projekt über Lazy Hydration auf Github. Zum Abschluss besprechen sie den Support von TypeScript und IDE Extensions wie Vetur, Vue DX und Volar. Wer Vue 3 jetzt mal ausprobieren möchte, kann sich auf dem SFC Playground austoben. Keine Schaunotizen markus.oberlehner.net/blog Der Blog von Markus. Revision 365 Vue.js – Eine Einleitung Revision 367 Vue.js – Der Deep Dive

Lukas Holzer, seines Zeichens Senior Software Engineer bei Dynatrace bringt Hans, Stefan und Peter auf den neuesten 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.

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.

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.

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

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.