Working Draft

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!

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!

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!

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

Standard Podcast [ 1:01:47 | 0.01 MB ] Jetzt abspielen | Play in Popup | Download