Working Draft

Schepp und Peter betätigen sich in dieser Revision mal wieder mit einem Blick auf ihre jüngsten Experimente mit Browser-APIs aller Arten. Schaunotizen [00:01:10] Follow-up zu Color-Fonts In der Revision 443 quatschten wir bereits über Schepps Abenteuer mit bunten Webfonts, die zu zufriedenstellenden Ergebnissen in Chrome und Chrome-Derivaten führten, nicht aber in Firefox. Jetzt kennen wir den Grund: der Birdfont-Output waren nicht Firefox-kompatibel! Mit Type lässt sich das aber reparieren. Weitere Themen sind fehlende Flaggen in Segoe UI, die Emoji-Historie, Flaggen-Emoji, Emoji-Ligaturen Emoji-Flaggen und das Select-Element als Power-User-Tool. [00:20:00] State-Management im Array Buffer Nachdem wir mit Surma schon mal über Off-Main-Thread-Apps gesprochen hatten hat Peter versuchsweise die gleiche Idee mit SharedArrayBuffer umgesetzt – ganz ohne postMessage! Wir sprechen über State- und Message-Buffer CBOR, Spectre, Service Worker, die Zukunft von SPA und das Ende der aktiven Weiterentwicklung von Moment.js.

Hans und Peter haben zwei neue Tools für sich entdeckt, von denen sie in dieser Revision berichten. Schaunotizen [00:01:40] ClinicJS Hans hat ein Memory Leak gejagt und ClinicJS hat sehr dabei geholfen. Neben den diversen Sub-Tools sprechen wir auch über Nodemon, ts-node, Callbacks, Promises, Node, Deno und das Buch Coders at Work. [00:30:19] TabNine Kurz vor Beginn der Aufzeichnung ist Peter über das AI-Autocomplete-Tool TabNine gestolpert, das als IDE-Extension daherkommt. Wir quatschen über TypeScript, (Teil-) Automatisierung für Entwickler, das Pareto-Prinzip und über die Fähigkeiten und Fehler von AI allgemein.

Aufgrund außerplanmäßiger Ausfälle geplanter Gäste erzählt Schepp etwas von seinen Versuchen, mit allen Mitteln Select-Elemente zu stylen (was nicht gehen sollte, aber trotzdem einigermaßen klappt) und Peter von seinen Versuchen, Elementen ihre Computed Styles zu entlocken (was trivial sein sollte, aber knifflig ist). Moderiert vom unvergleichlichen Hans! Unser Sponsor tradingtwins sucht einen Frontend-Developer für den Aufbau einer digitalen Angebotsplattform. Wenn Du Spezialist für HTML/CSS und Javascript bist, solltest du dir das Startup mal genauer ansehen. Dich erwartet eine Schlüsselrolle in einem Kanban-Team aus Designern und Entwicklern. tradingtwins sitzt im Herzen von Köln, hat aktuell 11 Mitarbeiter. Zwei der drei Gründer sind selbst Entwickler. Sie bauen ein spannendes Produkt mit langfristigem Fokus, sind profitabel und solide finanziert. Eine ausführliche Jobbeschreibung, sämtliche Kontaktdaten und weitere offene Stellen findest du unter www.tradingtwins.com/workingdraft. Schaunotizen [00:01:42] Select-Styling, Farb-Fonts und Unicode Schepp sah sich der Aufgabe gegenüber, mit nativen <select>– <option>-Elementen eine Länderauswahl mit bunten Landesflaggen zu bauen. Native Elemente haben viele Vorteile, sind aber Replaced Elements und daher spätestens seit Firefox Electrolysis in allen Browsern ungestaltbar. Schepp griff zu farbigen Fonts und dem Font-Editor Birdfont um sich einer Problemlösung anzunähern. Des Weiteren geht es um unicode-range, Zero-Width-Spaces, Ligaturen und Swingerclubs. [00:51:15] Computed Styles auslesen Peter hat dank Warhol in der letzten Zeit viel mit dem CSSOM (dem ollen CSSOM, nicht Houdini) zu tun und berichtet von den Herausforderungen beim Auslesen von Computed Styles. Es geht um window.getComputedStyle(), Element.computedStyleMap(), Custom Properties, Browser, Browserbugs in Chrome (v.a. mit font-feature-settings) und die Implementierung von Single-Page-Apps in Netscape-Browsern.

Als sich abzeichnete, dass uns kein gutes Thema einfallen würde, konsultierten wir Twitter, um zu fragen, ob jemand dort Lust und Zeit hat, über ein mitgebrachtes Thema zu quatschen. Und wir hatten Glück! Marvin Hagemeister, welcher letztes Jahr schon einmal bei uns zum Thema Preact und Code-Golfing in der Sendung war und der gerade mit seinen Mitstreitern an Preact 11 arbeitet, schlug vor, mit uns über End-to-End-Testing zu reden. Nachdem wir uns letztens mit Frontend-Unit-Testing beschäftigt hatten ein wunderbar passendes Thema. Also griffen wir zu! :) Schaunotizen [00:00:32] „Next Level“ End-to-End-Testing Natürlich war Preact der initiale Grund für Marvin, sich mit End-to-End-Testing-Frameworks zu beschäftigen, denn Marvin suchte nach einem Tool, das das von Preact erzeugte DOM extrahieren und gegen einen Snapshot testen konnte. Darüberhinaus arbeitet Marvin zur Zeit bei der Firma, die hinter den Tonie Boxen steckt. Und auch dort war man auf der Suche nach einem Testing-Framework, das den gesamten Flow von Inbetriebnahme einer neuen Tonie Box, über das Flashen per Web-Oberfläche hin zum Kauf und Teilen von Hörbüchern abtesten konnte. Karma mit dem darunter befindlichen WebDriver war für das Preact-Szenario nicht geeignet, weil es an bestimmten Stellen durch den genutzten Stack limitiert wird. An Jest wiederum stört, dass dieses keine echte Browser zum Testen nutzt, sondern nur ein simuliertes DOM (jsdom), das aber manche Dinge, wie zum Beispiel Intersection Observer nicht implementiert. Und wenn man Jest mit Puppeteer verknüpft, dann kann man keine zwei parallelen Browser-Instanzen steuern. Was macht man also, wenn man nichts vernünftiges findet? Genau! Sein eigenes Testing-Framework programmieren: pentf. Keine Schaunotizen Replay „A new debugger for recording and replaying the web.“ Playwright „Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API.“

Diese Sendung beschäftigt sich mal wieder mit einem Content Management System. Gemeinsam mit Sebastian Helzle und Robert Lemke sprechen Rodney und Hans über Neos CMS (Twitter). Schaunotizen [00:01:35] Neos Wir steigen mit der Geschichte von Neos ein und sprechen über die Verbindung zu TYPO3. Robert und Sebastian erklären die architektonischen Ansätze und die Frontend-Transformation von Ext.js zu Ember und schließlich zu React. Wir machen auch einen kleinen Ausflug zu Domain Driven Design (hört auch mal in die Revision 314). Außerdem erklären die beiden das Konzept hinter Atomic Fusion, der Templating-Sprach von Neos. Und natürlich darf die Community-Arbeit nicht zu kurz kommen, die bei Neos eine große Rolle spielt. Keine Schaunotizen YouTube Channel Gute Videos zu Vorträgen des Neos-Teams Installation-Guide Hier geht’s lang, zum Cold-Start mit Neos Die Foundation Ihr könnt das Open Source Projekt über die Foundation finanziell unterstützen

Willkommen zur zweiten Late Night DadOps Folge mit Stefan und Kahlil. Die beiden haben sich mal wieder zu später Stunde vor die Mics geklemmt um über Dinge zu sprechen die sie gerade bewegen. [00:00:28] Schaunotizen Thema dieses mal ist der Karrierepfad des Engineering Managers. Kahlil wechselte Ende letzten Jahres in diesen Beruf und gibt einen Einblick in seine Eindrücke bisher und was das eigentlich ist. Stefan hat über die letzten Jahre bei Dynatrace die Karrieremöglichkeiten dort mit entwickelt um den Entwicklern dort bessere Entwicklungsmöglichkeiten zu bieten. Er plaudert aus dem Nähkästchen. [01:15:43] Keine Schaunotizen Podcast: Managing UP Ein sehr schöner Podcast in dem langjährige Engineering Manager über die Herausforderungen sprechen kreative und technische Teams zu managen.

Florian Herlings betätigt sich bei SPICED Academy als Coach bei Coding Bootcamps und plaudert in dieser Revision zum Vorteil von Hans und Peter aus dem Nähkästchen. Schaunotizen [00:00:28] Florian erzählt vom Dasein als Coach für Coding Bootcamps, nachdem wir die andere Seite in Revision 430 (Berufseinstieg per Coding Bootcamp) schon kennenlernen durften. Der Weg der vom Entwickler zum Coach, der Arbeitsalltag, das Up-To-Date-Bleiben und von die Veränderungen, die einem Coach selbst durch seine Tätigkeit zuteil werden, sind allesamt Thema. Auch die Unterschiede von Bootcamp-Coaching zur Erklärbär-Tätigkeit von Peter (der fast ausschließlich Schulungen für erfahrene Nerds macht) werden besprochen, vor allem was die Wissensvermittlung angeht. Gemeinsamkeiten gibt es aber auch!

Marcel Poelker (Twitter) ist CTO von Taledo (Twitter, Insta), einer digitalen Recruiting-Plattform, und erzählt Schepp und Peter in dieser Revision, wie der Weg vom Nerd zum Startup-Gründer aussieht. Schaunotizen [00:00:30] Von Studium bis Startup Wir machen einen Rundumschlag der Startup-Gründung von der Ideenfindung bis zum fertigen Produkt! Beginnend mit Marcels Werdegang (von der Uni via Festanstellung zur Gründung) und dem Finden der Co-Gründer plaudern wir über die Anfänge eines bootstrapped Startups. Wir besprechen, wie man über Irrungen und Wirrungen das passende Projekt findet, das Henne-Ei-Problem löst und Product-Market-Fit erreicht. Die Gewichtung von Fragen wie der Wahl der passenden Technologien (im Falle Taledos Ruby on Rails) und Investoren führt uns bis in die Details der täglichen Entscheidungen, etwa bzgl. der Preisgestaltung von Produkten. [00:00:00] Keine Schaunotizen Igalia Open Prioritization Einer neuer Ansatz Webbrowser-Feature-Priorisierung zu crowdfunden. Das ist doch mal etwas wirklich neues!

Nach SelfHTML feierten am 23. Juli 2020 auch die MDN Web Docs ein Jubiläum, nämlich ihr fünfzehnjähriges Bestehen. Für uns ein toller Anlass, einen Gast einzuladen, mit dem wir schon länger sprechen wollten: Kadir Topal, Mozilla-Urgestein und Product Lead der MDN Web Docs. Unser Sponsor Unser Patreon Markus ist Core-Entwickler des CMS Neos und Sponsor dieser Revision! Neos ist aus einem Typo3-Fork entstanden, doch steht mittlerweile auf eigenen, sehr modernen Füßen! In einem voll integrierten Inline-Editor lassen sich die semantisch strukturierten Inhalte mit einer eigenen (JSX-artigen) DSL auf jede beliebige Weise darstellen, was Neos zu einem vielseitigen Tool für Websites, eCommerce-Anwendungen, PWAs und andere Web-Projekte macht. Die Community rund um Neos vertritt dabei eine Philosophie der Offenheit und Innovation und stellt sehr beeindruckende Events auf die Beine. Demnächst erscheint die LTS-Version 5.3 von Neos. Alle Infos dazu findet ihr auf neos.io. Schaunotizen [00:01:50] 15 Jahre MDN Web Docs Zusammen mit Kadir rollen wir den Werdegang der MDN Web Docs auf – von ihren Anfängen als Netscape DevEdge unter AOL, über das „Mozilla Developer Network“ hin zur Browser-agnostischen und allumfassenden Dokumentation fürs Web, wie sie sich heute darstellt, und die zu gleichen Teilen von allen Browser-Herstellern co-finanziert und gemanaged wird (außer Apple natürlich). Dann widmen wir uns neueren Entwicklungen, die den Status der MDN Web Docs als Anlaufpunkt für Webentwickler zementiert haben. Das wären zum einen die ab 2018 in den Beschreibungstexten eingebetteten interaktiven Code-Samples. Desweiteren die 2019 verkündete, zusammen mit Can I Use von Grund auf neu konzipierten Kompatibilitätstabellen, aka „MDN browser compatibility data“, die auf GitHub liegen, und dort von jederfrau, aber vor allem den Browser-Herstellern regelmäßig erweitert werden. Mittlerweile finden sie nicht nur bei MDN und Can I Use selbst Verwendung, sondern auch in Lintern, Prefixern und IDEs wie Visual Studio Code. Und drittens sind es regelmäßige (remote) Nutzertests und die jährlich stattfindende „MDN Developer Needs Assessment“_umfrage, deren Ergebnisse im Web DNA Report mündet und die sogar Google dazu bewegt haben, Geld in die Hand zu nehmen, um konkurrierende Browser besser zu machen. Für die Zukunft ist geplant, Einsteiger-Leitfäden in der MDN Learning Area bereitzustellen, die nicht mehr nur Browser-Technologien zum Fokus haben, sondern die beim Einstieg in JavaScript-Frameworks oder Node.js helfen. Keine Schaunotizen Contributing to MDN Sollten wir Euer Interesse geweckt haben und Ihr Euch fragt, wie Ihr Euch in das Projekt einbringen könnt, dann ist hier der richtige Anlaufpunkt für Euch. MDN Web Docs Store Wenn Ihr das MDN-Projekt lieber finanziell unterstützen möchtet, dann schaut Euch im MDN Web Docs Store um und vielleicht findet Ihr dort das eine oder andere an Merch, das Euch gefällt?

Vor einiger Zeit fragten wir auf Twitter, wer von euch eigentlich Tests im Frontend schreibt. Die Antwort war mehr als verblüffend und somit geht’s in der neusten Revision Working Draft mal wieder um Testing, um genau zu sein Unit-Testing im Frontend. Unser Gast Tim Seckinger gibt uns noch mal eine Übersicht über Testing im Allgemeinen und baut auf der Revision 375 auf, in der wir auch über Testing gesprochen haben. Schaunotizen [00:00:28] Frontend Unit-Testing Los geht es mit einer kurzen Betrachtung des Themas Testing im Allgemeinen: Welche Arten des Testing gibt es eigentlich und wozu braucht man was? Ein kleiner Ausflug, welche Unterschiede Unit-Tests zu Integration-Tests haben, darf nicht fehlen. Schließlich landen wir beim Thema CI/CD und wie man Testing am besten in eine Pipeline integrieren kann. Das Thema Test Driven Development schneiden wir an und kommen schließlich zu dem Schluss, dass es noch so viele weitere Themen gibt, über die wir reden müssen und beschließen deshalb eine zweite Revision zum Thema, die schon bald folgen wird. [00:00:00] Keine Schaunotizen Jest Contributor Jest sucht Contributor, die helfen das Projekt voran zu treiben und Bugs lösen. Wenn du dich berufen fühlst, schau mal auf der GitHub-Seite vorbei. Dort gibts weitere Infos.