Working Draft

Node.js-Ninja Golo Roden, Big Boss bei The Native Web, schaute mal wieder vorbei (zuletzt: 160, 314) und informierte Stefan und Peter über die neuesten Neuerungen in Node. Schaunotizen [00:00:30] Neues aus Node.js Anlässlich des Release von Node 15 ist ein Rundumschlag angebracht! Zu den wesentlichen Neuheuten gehört NPM 7, worin diverser Ärger mit package.json und package-lock.json ausgeräumt wird. Wir lassen es uns bei dem Thema natürlich nicht nehmen, auch die Volksfront von Judäa und die judäische Volksfront zu erwähnen, den Sinn von SemVer zu hinterfragen und am Ende in den etablierten Standardisierungs-Pessimismus abzugleiten. An konkreten Node-internen Änderungen bequatschen wir String#replaceAll, HTTP/3, den AbortController und das Hickhack um Streams in allen Formen. Warum es immer noch kein Fetch in Node gibt (nur als Library, wobei die populärere Löung ist) besprechen wir genau wie den aktuellen Stand an der Deno-Front (siehe auch: 10 Things I Regret About Node.js und Revision 428). Zum Abschluss kommen wir um das Thema Nachhaltigkeit in OSS nicht herum und plädieren für restriktivere Lizenzen (z.B. AGPL, wie’s auch Golo bei seinem Wolkenkit macht). Zum Ausprobieren der diversen Node-Versionen emfehlen wir nvm und Volta. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Heute haben wir gleich zwei Gäste zum Thema Sulu CMS: Thomas Schedler und Roland Golla. Schaunotizen [00:00:28] Sulu CMS Sulu ist ein PHP-basiertes CMS, das mit dem Framework Symfony gebaut ist. Einst als Agentur CMS gestartet, erfreut es sich mittlerweile größerer Beliebtheit. Als Core-Developer gibt uns Thomas gute Einblicke in den Werdegang und die Features von Sulu CMS, Roland untermauert mit praxisnahen Beispielen. Wer einen Start mit Sulu bekommen möchte, kann sich beispielsweise dieses Video anschauen. Außerdem hat Roland eine ganze Serie an Video-Tutorials zum Thema aufgenommen. Ein Demo-Projekt gibt’s hier. Auch zum Headless-Betrieb ist das CMS geeignet. Wer einen tieferen Einblick sucht, der ist mit der Dokumentation gut bedient. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Stefan und Peter trafen sich um ausnahmsweise mal nicht über TypeScript zu sprechen! Stattdessen geht um die Ergebnisse des State of CSS 2020! Schaunotizen [00:00:45] State of CSS 2020 Wir sprechen über einige Teile der Umfrage-Ergebnisse im Detail (etwa Grid, Subgrid, Masonry-Layout und Flexbox) und überspringen die weniger spannenden. Ausgiebige Brandmarkung erfahren nervige Features (Scroll Snap, position:fixed) und nervige Trends (CSS in React), während wir erneut Anlass finden, BEM zu lobpreisen. Und besonders freut uns natürlich, dass ihr uns in der Kategorie „sonstige Podcasts“ auf einen Mittelfeld-Platz gewählt habt! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Wenn die Kinder schlafen und die Eltern gerade wieder wach geworden sind, ist es Zeit für eine Late-Night Show mit etlichen Themen, wenig rotem Faden, dafür gehörig viel Meinung. Kahlil und Stefan holen weit aus und schmieren gehörig Senf auf folgende Begriffe: Unser Sponsor Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge. Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter timr.com/workingdraft. Schaunotizen [00:01:46] TypeScript in 50 Lessons Stefans Buch ist immer noch hoch im Interesse der Kollegen. Nach einer Revision zum Schreiben an sich, geht’s hier nochmal um ein paar inhaltliche Themen und den Versuch, möglichst lange relevant zu bleiben.. Rust Seit Stefan das Rust Linz Meetup mitorganisiert, bestimmen die schönen Feinheiten dieser Sprache seinen Sinn für Programmieren. Clojure Eine funktionale Programmiersprache auf der JVM, die sich etlicher Beliebtheit in der Java Community erfreut. Wir referenzieren vor allem auf Rich Hickeys Vortrag Simple Made Easy Micro Frontends Noch nicht ganz bei Stefan angekommen, versorgt Kahlil mit den nötigen Nachschlagewerken zum Thema Micro Frontends. Gerade das Werk von DAZN VP of Architecture Luca Mezzalira ist eine der wichtigsten Ressourcen. Dazu gibt es auch ein Buch Next.js Next.js ist mehr als React and Jamstack, es ist mittlerweile eines der besten und angenehmsten Frameworks die es für komplexe und umfangreiche JavaScript Applikationen gibt. Das finden nicht nur Kahlil und Stefan, sondern natürlich auch der Erfinder Guillermo Rauch, der Wegweisendes in seinem Beitrag 7 Principles of Rich Web Applications geschrieben hat, und das schon 2014. Passend, die Keynote der Next.js Conf. Rauch hat auch seine Finger in Prisma, einer SaaS Datenbank. Leo Li Zum Folgen: Leo Li gibt einen tollen Svelte.js Crash Kurs in 10 Tweets. Das gleiche macht er auch für GraphQL. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Nachdem mit TypeScript in 50 Lessons Stefans zweites Buch erschienen ist, quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel HTML5. Webseiten innovativ und zukunftssicher) über das Schreiben von Webtech-Büchern. Schaunotizen [00:00:29] Schreiben von (Webtech-) Büchern Stefan und Peter vergleichen die Entstehung ihrer drei Werke (TypeScript in 50 Lessons, HTML5. Webseiten innovativ und zukunftssicher und Stefans Erstwerk Front-End Tooling with Gulp, Bower, and Yeoman) unter den Gesichtspunkten Recherche, Workflow, Lernings, Wegen zum Buch-Deal, Halbwertszeit von verschriftlichtem Webtech-Wissen und Produktion. Wir klären, ob sich Webtech-Bücherschreiben lohnt (für verschiedene Definitionen des Wortes „lohnt“), besprechen den Umgang mit seltsamem Feedback und komischen Rezensionen und sinnieren ein wenig über Screencasting und Video-Produktion. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Wie Ihr Euch erinnert, hatten wir in Revision 447 Frederik Braun von Mozilla zu Gast, mit dem wir über den Themenblock „Cross-Site-Scripting“ gesprochen haben. Wir hatten damals noch einen zweiten Themenblock auf der Agenda, nämlich „Site Isolation“, zu dem wir aus Zeitgründen nicht mehr kamen und den wir auf eine zukünftige Folge vertagt haben. Hier kommt sie! Unser Sponsor Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge. Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter timr.com/workingdraft. Schaunotizen [00:01:46] CORS, CORP, (C)ORB, COOP und COEP Zur Einführung gehen wir auf eine Angriffsmethode namens „Spectre“ und das Konzept der Site-Isolation ein, um das Problem zu verstehen, für das wir im Folgenden die Lösungen erörtern wollen. Außerdem rufen wir uns ins Gedächtnis, wie die „Same Origin Policy“ in den Browsern greift und wie man seit einigen Jahren per „Cross Origin Resource Sharing“ (CORS) darauf einwirken kann. Und wir klären den Unterschied zwischen „Same Site“ und „Same Origin“. Damit haben wir die Grundlagen gelegt, um einigermaßen neue, fest eingebaute Mechanismen wie (Cross) Origin Request Blocking (Video) ((C)ORB) zu Verstehen, aber vor allem auch, was es mit dem neuen „Cross-Origin Resource Policy“ (CORP) Header auf sich hat. Um es kurz zu machen: Während CORS dem Browser über Origin-Grenzen hinweg Zugriff auf per JavaScript weiterbearbeitete Ressourcen gewährt, verhindert entsprechend gesetztes CORP die passive Anzeige von von fremden Ursprüngen stammender, aber üblicherweise zulässiger Bausteinen wie etwa Bilder. Danach erörtern wir, was es mit einer Gruppe Sicherheitslücken namens „xsleaks“ auf sich hat, um zu verstehen, wie zwei weitere neue HTTP Header namens „Cross-Origin-Opener-Policy“ (COOP) und „Cross-Origin-Embedder-Policy“ (COEP) da hineinspielen. Weil diese ganzen Sicherheitsmaßnahmen die Funktionsweise der Seite stark beeinflussen, ist es ratsam, vor einem Scharfschalten von der Reporting API, respektive dem Report-to-Header Gebrauch zu machen (und Probleme zum Beispiel an sentry.io senden zu lassen). Ob wir am Ende alles richtig gemacht haben und unsere Seite erfolgreich abschotten konnten, können wir im Browser auf der globalen Property window.crossOriginIsolated / self.crossOriginIsolated abfragen. Als Belohnung für unsere Mühen eröffnet uns der Browser Zugang zu Features wie eine hohe Genauigkeit des DOMHighResTimeStamps, SharedArrayBuffers oder performance.measureMemory(). Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Im Rahmen einer Throwback-Folge besprechen nicht nur die üblichen Schepp, Stefan und Peter neue Webstandards/Browser-APIs, sondern begrüßen auch Verstärkung im Podcast-Team! Unser Sponsor Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge. Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter timr.com/workingdraft. Schaunotizen [00:01:46] Hallo Vanessa! Willkommen im Team, Vanessa Böhner! Bekannt aus vergangen Workingdraft-Folgen, von Twitter, von den FrontendFoxes und durch Podcasts über Testing und Wein verstärkt sie nun auch diesen Podcast. [00:11:15] DOM Parts Proposal DOM-Parts verstärken das Template-Element, das eigentlich nur ein deklaratives DocumentFragment ist, um Features aus Template-Sprachen wie Handlebars. Im Rahmen des Über-Themas Templating sprechen wir auch über Frontend-Framework-Monokultur, Security, hyperHTML, JSX und statisch vs. dynamisch typsierte Programmiersprachen. [00:31:20] CentralizedConsentAPI Die API für die Reduktion von Cookie-Consent-Bannern wird kontrovers diskutiert! Während einige von uns an die API glauben, wittern andere eine Verschwörung gegen das Project Fugu und wieder andere berufen sich auf die via Brave Browser und uBlock Origin umgesetzte Castle Doctrine in der eigenen Web-Experience. [00:50:10] Cookie-Store Brauchen wir bessere Frontend-APIs für Coookies? Entsprechende jQuery-Plugins deuten darauf hin. Die neue API verspricht asynchrone Funktionen, Cookie-Events und Cookies im Service Worker. Wir vergleichen die Cookie-API und das entsprechende jQuery-Plugin mit der URL-API und Rodneys URI.js. Außerdem versuchen wir zu ergründen, ob wir asyncrhone APIs brauchen, warum es keinen Cookie-Observer angelehnt an den Mutation Observer gibt und gleichen das Proposal mit Mozillas Positionen zu divsersen Standards ab. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans, Schepp und Peter ließen mal wieder das Glücksrad drehen! Schaunotizen [00:00:30] Image Maps Wir versuchen uns daran zu erinnern, wann wir zuletzt Image Maps genutzt haben (serverseitige und wie clientseitige Image Maps) und wie sich Image-Map-Use-Cases zu SVGs verhalten. Schepp gibt außerdem eine Geschichte zum Besten, in der er mithilfe von Buttons im Image-State das antike Shopsystem XT-Commerce gebändigt hat. [00:14:44] History API Wir zerreißen die History API und die speziell pushState() in der Luft (siehe auch die Podcast-Kollegen von HTTP 203), verkünden die Ankunft von <input type="date"> in Safari, besprechen das Wesen von Webstandards an sich nebst den Aussichten von Open UI und den aktuellen Stand des Hype-Themas Scrollbar-Styling. [00:25:19] <time> Wir nutzen die Gelegenheit, um über Datumsformate (speziell das von HTML5) sowie Datenaustauschformate allgemein zu debattieren. Fazit: Jammern bringt nix, Date-Fns draufwerfen und fertig. [00:51:52] Custom Elements Neben Web Components quatschen wir auch über Svelte (Thema in Revision 413), StencilJS, Shadow DOM, Houdini, Frames und die Unmöglichkeit, Web-Features abzuschaffen. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans und Peter haben Fragen zu Tools, Frameworks und Grundsatzfragen rund um CSS. Schaunotizen [00:00:29] CSS-Tools und -Frameworks Inspiriert von der großen CSS-Umfrage für 2020 haben Hans und Peter Fragen zu CSS-Tools. Anders als bei der Folge zu State of JS am letzten Jahresende gibt es noch keine Ergebnisse, aber viel zu diskutieren und zu hinterfragen. Wir besprechen den Sinn und Unsinn von Sass, Less, Stylus und PostCSS, sinnieren über Tool wie Autoprefixer, versuchen CSS Frameworks von UI-Libs abzugrenzen (wobei Bootstrap und Primer unserer Ansicht nach Mixturen darstellen) und kommen via Tailwind zu den großen Grundsatzfragen rund um Utility-First-CSS (vgl. Revision 378), CSS in JS, BEM, Atomic Design, Semantisches CSS und den Sinn von Trennung von Markup und Design im Jahr 2020. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Am späten Abend eines langen Tages trafen sich Stefan und Peter, um traditionell die Verheißungen der neuesten TypeScript-Version zu interpretieren Schaunotizen [00:00:30] TypeScript 4.1 (Beta) Die Liste der neuen Features beginnt mit Template Literal Types (vgl. Template Literals in JS) sowie rekursiven Conditionals. Daraus resultieren allerlei beeindruckende Tech-Demos wie etwa ein CSS-Selektor-Lexer, eine SQL-Engine und ein Rechtschreibprüfer – alles implementiert als TypeScript-Typ! Den Sinn und/oder Unsinn solcher Features diskutieren wir ebenso in epischer Breite wie die Entstehung und Konzeption von Stefans TypeScript-Buch, die Performance des TS-Compilers (nebst Tools wie Webpack und Vite), React, Preact, Promises, type-challenges und Private Class Fields in TS. Schreibt gerne einen Kommentar, wenn ihr wisst, was es mit den JSX-Factories in React 17 auf sich hat! [00:00:00] Keine Schaunotizen Stefans TypeScript-Buch „TypeScript in 50 lessons“ Kauft Stefans Buch! Es ist sehr gut! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/