Working Draft

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!

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.

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.

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

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.

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.

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.

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!

Viel zu lange ist es her (nämlich fast 6 Jahre), dass wir das letzte Mal über das Thema „Security“ im Frontend gesprochen haben. Mit Frederik Braun (@freddyb) von Mozilla haben wir endlich wieder jemand zu Gast, der sich damit auskennt und der uns über neue fiese Tricks und aktuelle wie auch zukünftige Abwehrstrategien ins Bild setzen kann. Schaunotizen [00:00:30] XSS und die HTML Sanatizer API Angefangen bei einer Begriffsdefinition von Cross-Site-Scripting, aka XSS, und ihrem historischen Einsatz arbeiten wir uns langsam vor zu den eher neueren Kategorien der „Script Gadgets (Video)“ (PDF) und der „Mutated XSS“ (Video) (Slides), bei denen im ersten Fall ein Frontend-Framework wie Bootstrap, und im zweiten die im Browser eingebauten (und standardisierten) HTML-Parser und -Serialisierer clever zu Komplizen gemacht werden. In solch einem Fall helfen einem Content Security Policy (CSP) oder auch Tools wie HTML Purifier, DOMPurify oder Bleach nicht. Und auch Chromes Konzept der Trusted Types dürfte für den Durchschnittsentwickler nicht geeignet sein. Deshalb arbeitet Frederik bei Mozilla neuerdings an einer in den Browser eingebauten HTML Sanitizer API, die all die oben beschriebenen Schwächen nicht hat (benötigt aktuell den Firefox Nightly mit aktiviertem dom.security.sanitizer.enabled-Flag in about:configure).

Hans, Schepp und Peter lassen sich von PHP-Oberguru Sebastian Bergmann (bekannt von thePHP.cc und PHPUnit, online zu finden unter sebastian-bergmann.de sowie auf GitHub und Twitter) erklären, was PHP im Jahr 2020 alles so zu bieten hat. Es stellt sich raus: nicht alles an 2020 ist eine Vollkatastrophe! Unser Sponsor Seit 2016 ist ecx.io Teil der Agenturfamilie iX des IT-Giganten IBM und gehört somit zu einer der größten Digitalagenturen Europas. Die Marke IBM iX ist in Deutschland noch recht unbekannt, aber das soll jetzt geändert werden! Denn das Team arbeitet gemeinsam an tollen Projekten für namhafte Kunden wie z.B. Henkel, Fressnapf und Cyberport. Die Entwickler, Product Owner, Consultants und Designer entwickeln ihre innovativen Arbeitsweisen dabei kontinuierlich weiter. ecx.io sucht unter anderem auch Frontend Entwickler. Neugierig geworden? Wenn ihr mehr über die Projekte, Arbeitsweisen und aktuelle Stellenpositionen erfahren wollt, dann besucht die Website: ecx.io oder meldet Euch bei Sissi Kistner: sissi@ecx.io. Schaunotizen [00:02:15] PHP Wir spannen den Bogen von dem PHP aus Sebastians Anfangstagen (die ca. 21 Jahre her sind) hin zu den neuesten Features von PHP 8. Beginnend mit der Originalidee von Rasmus Lerdorf über die Jahre des Wildwuchs (die den heutigen Ruf von PHP immer noch prägen) bis hin zu den Anfängen der Gegenwart (mit Verbesserungen an PHP-Interna, Facebooks u.a. von HHVM geprägtem Einsatz für PHP und den Versuchen eine Spezifikation von PHP zu schreiben) lassen wir kein Kapitel der bewegten Geschichte aus. An moderneren Features kommen unter anderem Traits, Typ-Annotationen, und mögliche zukünftige Generics zur Sprache. Konkrete Features in PHP8 sind unter anderem der JIT, Union Types, Attributes und zahlreiche Aufräumaktionen, speziell an Interna. Für die Zukunft stehen u.A. Features wie Editions (inspiriert von Rust) und weitere Aufräumaktionen an. Am Rande geht es außerdem um Tools wie Composer und Psalm, Frameworks wie Lavarel, Nette und TYPO3, Paamayim Nekudotayim, IBM-Mainframes und die Borg. [01:33:12] Keine Schaunotizen The Online PHP Conference 2021 Schaut bei der von Sebastians Firma angekurbelten Online-PHP-Konferenz vorbei!