Working Draft

Nachdem Peter, motiviert durch Warhol, mal wieder einige Zeit im absurden Paralleluniversum semi-relevanter Teile der HTML-Spezifikation verbracht hatte, musste er in dieser Revision Schepp und Hans davon im Detail erzählen. Schaunotizen [00:00:30] Welche Elemente sind eigentlich immer unsichtbar? Auf der Suche nach permanent unsichtbaren HTML-Elementen kommen wir zu manch überraschender Erkenntnis. Vieles, das wir für unsichtbar hielten, kann sichbare Effekte haben, anderem hingegen ist auch mit dem größten CSS-Brecheisen (das wäre die content-Eigenschaft) keine optische Nebenwirkung zu entlocken. Als wahrhaft unsichtbar erweisen sich ausschließlich <audio>-Elemente ohne controls-Attribut, <input type="hidden">, <noscript> wenn Scripting aktiviert ist, <form>-Elemente, die direkte Kinder von <table>, <thead>, <tbody>, <tfoot> oder <tr> sind, sowie Inhalte von Replaced Elements (d.h. <source> und <track> in <video> bzw. <audio> und Fallback-Inhalt in unterstützen <video>-, <audio>– und <canvas>-Elementen).

Mit Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, plauderten Schepp, Hans und Peter über Webdev-Tools im Allgemeinen und die Auswirkungen von Tools auf den Webdev-Alltag im Besonderen. Schaunotizen [00:00:30] Tools Stefan hat Tiny-Helpers in die Welt gesetzt und hat daher seine ganz eigene Sicht auf Webdev-Tools aller Art. Wir plaudern über Next.js PHP, Typescript, Ant, Yeoman, Grunt, Gulp, Webpack, Rollup, NVM, Parcel, Abenteuer mit Google Maps und OpenDeviceLab.com, Rome, Snowpack, Algolio, die Vor- und Nachteile des Einkaufs bei Cloud-Händler und zu guter letzt über Stefans liebste Tiny Helpers: Namae, Fonty und den CSS-Grid-Generator. Die Workingdraft-Crew empfiehlt ihrerseits die Online-Regex-IDEs Regex101 und Regexr.

Hans und Peter lassen sich in dieser Revision von Roland Kuhn (Web, Twitter), Autor von Reactive Design Patterns alles über Reacive Systems und Webtechnologie in Industrieanwendungen erzählen. [00:00:29] Schaunotizen Reactive Systems Rolands erzählt von seiner Reise, die ihn über den Umweg der Raumfahrt zu Scala, Akka schließlch zum Reactive Manifesto und zur Gründung von Actyx führte. Wie sprechen darüber, wie Web und P2P mit Industrieanwendungen zusammengehen, kommen um das Thema Blockchain nicht herum und sprechen über das Dat-Protokoll, IPFS, den Beaker Browser, Event Sourcing (vgl. Revision 314) Lamport-Uhren, reaktive Programmierung sowie CouchDB/PouchDB (siehe Revision 175).

Nachdem es schon wieder unglaubliche zwei Jahre her ist, dass wir mit ihm über das „Actor Model“ reden durften, war es nun höchste Eisenbahn, Surma wieder einzuladen und über aktuelle Entwicklungen im (multigethreadedten) Web zu plaudern. [00:00:29] Schaunotizen Web Worker Eines von Surmas Steckenpferden ist es, alles was nicht bei „Drei!“ auf dem Baum ist in separate Threads auszulagern. Wir sprechen über Sinn und Zweck dieser Heranangehensweise am Beispiel der Projekte Squoosh und Proxx des Chrome Developer Relations Teams (siehe auch die Google Chrome Labs auf Github). Wir erfahren, dass das Ziel dabei weniger ist, mehr Geschwindigkeit auf ohnehin schnellen Plattformen herauszuholen, sondern vielmehr dem UI-Thread auf Einsteiger-Hardware den Rücken frei zu halten. ComLink Einer der Nachteile von Web Worker ist die Tatsache, dass sie anstrengend im Umgang sind. Moderne Programmierparadigmen und Surmas Open-Source-Projekt ComLink schaffen hier allerdings Abhilfe. Und auch wenn das Motto „Comlink makes WebWorkers enjoyable“ lautet, so lässt sich diese Bibliothek auch ganz prima für eine angenehme Kommunikation mit Service Workern oder über Frame-Grenzen hinweg einsetzen (also im Prinzip alles, was auf das Message-Interface setzt). Wasm, WASI und Interface Types Surma kennt sich aber nicht nur mit elegant programmierbarem Multithreading aus, sondern auch mit WebAssembly, kurz: Wasm. So nutzt unter anderem das eingangs erwähnte Squoosh unter der Haube von C++ nach Wasm portierte, gebräuchliche Bildkompressoren wie MozJPEG oder OptiPNG. Wir unterhielten uns außerdem über kommende Neuerungen wie Interface Types, sowie nochmal über WASI (höre dazu auch Revision 394). Und wir sinnierten über den Grund, weswegen es so aussieht, als ob Wasm schaffen wird, was Java und Silverlight nicht gelungen ist, nämlich das langersehnte, universelle Runtime-Environment zu werden. If WASM+WASI existed in 2008, we wouldn’t have needed to created Docker. That’s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let’s hope WASI is up to the task! https://t.co/wnXQg4kwa4 — Solomon Hykes (@solomonstre) March 27, 2019 Keine Schaunotizen rollup-plugin-off-main-thread Dieses Plugin für den Bundler Rollup macht es möglich ES Modules innerhalb von Workern zu nutzen. importFromWorker() Dieses andere Projekt von Surma in Zusammenarbeit mit Jason Miller ermöglicht es, analog zu ES Modulen, Funktionen aus Web Workern transparent in den UI-Thread „zu importieren“ und sie dort wie gewohnt zu nutzen. WebAssembly Summit 2020 Kurz vor Corona-Ladenschluss fand der von Surma organisierte WebAssembly Summit statt, dessen Videos online zum Binge-Watchen bereit stehen. HTTP 203 In ihrer Videoserie diskutieren Surma und Jake Archibald regelmäßig neue Web Features und Konzepte, garniert mit einer guten Portion Humor :) HTTP 203 Podcast Nachdem dank Coronavirus auch die Google Developer Relations Menschen von zu Hause arbeiten müssen, setzen Jake und Surma ihre Serie nun einfach in Form eines Podcasts fort (we approve!).

In dieser Revision wurde Peter von Hans und Rodney über den Inhalt seines Posts über JavaScript-Generators ausgequetscht Schaunotizen [00:00:30] Use Cases für Generators Nachdem Generators an sich zuletzt 2013 Thema bei uns waren und wir im Special zum Ende von 2019 nur kurz über die asynchrone Variante von Generators gesprochen haben, geht es diesmal um die ganz normalen Generators. Wir sprechen über Generators als solche, Iterations-Protokolle in modernem ECMAScript, Regenerator, redux-saga, andere Use Cases für Generatoren und am Ende auch kurz über die TreeWalker-API.

This time, again in English, we invited Adam Argyle of Google (take a look at his fancy website and Twitter) to our show to talk about his work especially in the field of CSS specification writing. [00:00:30] Schaunotizen VisBug VisBug is a tool for designers and developers which helps you to edit design changes and communicate it in code. This enables designers to handle design testing and fixes on their own on production websites and helps you to give more valuable feedback even if you don’t know how to code. Shameless self promotion: Take a look at Warhol if you want to take it a step further and automate design testing. CSS Specifications Adam works on a couple of CSS Specifications and drafts for the spec which we talk about. We take a look at what Colors currently can do and what changes are coming up in Colors Module Level 5. Then there is Typed OM which is part of the Houdini APIs and we discuss changes that are coming to the default form controls. To close the discussion we take a quick look at CSS‘ future. [00:00:30] Keine Schaunotizen [00:00:30] The CSS Podcast Together with Una Kravets, Adam has his own (pretty new) podcast where they discuss CSS-related topics in depth.

Pestbedingt fielen uns die Gäste aus, sodass Schepp und Peter einfach spontan ein paar Runden HTML5-Glücksrad spielten. [00:00:27] Glücksrad Link Types Ein Link ist in HTML nicht unbedingt ein <a>-Element, sondern ggf. auch eine Image Map, ein Formular oder ein <link>-Element. Über dieses und die diversen Sorten von Links quatschen wir ausgiebig. Performance-Papst Schepp kriegt außerdem die Kurve zu Resource Hints und Priority Hints. FormData-Event Das FormData-Event ist uns beiden völlig neu und entsprechend fällt uns nichts schlaues dazu ein. Klar, es gehört zu FormData (Specs, MDN), was von Safari nur sehr unzureichend unterstützt wird (wie unter anderem auch classList), aber sonst? Meta-Element Den Treffer auf dem Meta-Element nehmen wir zum Anlass, die Fähigkeiten und Use Cases des http-equiv-Attributs ausgiebig zu diskutieren. (Shared) Workers Shared Worker sind Multi-Client-Worker. Peter fordert, wie ungefähr alle drei Sekunden, neue Frontend-Frameworks auf Worker-Basis, wofür Schepp mit neo.mjs bereits einen Kandidaten kennt. Außerdem erwähnen wir noch Comlink und diskutieren das Für und Wider von LocalStorage als Kommunikationsmittel. Form Validation Ist die HTML5-Formularvalidierung gut oder mehr so mittel? Es wird kontrovers! Auf webwewant.fyi gibt es noch einige offene Wünsche, andererseits ist die Validierung mächtig genug, um mit ihrer Hilfe ein HTML/CSS-Mariocart zu bauen. Gegen Ende bewundern wir ein wenig CSS-Kunst.

Wie jetzt? Im TypeScript-affinen Working Draft erlauben wir uns gegen den Heilsbringer zu ketzen? Tatsächlich erlauben wir gegenteilige Meinungen, hergebracht von Robert Weber, der schon in einigen Sendungen zu Gast war. Schaunotizen [00:02:17] Es muss nicht immer TypeScript sein Auf Basis seines Vortrags und den Erfahrungen in einem Projekt mit vielen, vielen Back-End Entwicklern gibt Robert bekannt, was nicht alles schlimm und unnötig an TypeScript ist. Er findet sogar Gehör! Und Gegenrede! Beides gleichzeitig! In einer sehr nuancierten Betrachtung reden wir über: Warum Types beim Bugfinden total überbewertet sind, Wie man als JavaScripter zu TypeScript stehen kann, Test Driven Development, JSDoc, EcmaScript 4 und sogar Action Script 3. Das und noch vieles mehr in knapp unter 90 Minuten!

In einer extralangen Folge nehmen sich Schepp und Peter Zeit für einen Rückblick auf die Internet-Explorer-Ära und speziell die vom IE etablierten Webtechnologien, die auch heute noch teilweise ihresgleichen suchen. Schaunotizen [00:02:30] Angewandte Internet-Explorer-Historie Peter und Schepp besprechen die Inhalte von Schepps viralem Blogpost über das Ende und die Errungenschaften der Trident-Engine und des Internet Explorers. Wir quatschen über den Browserkrieg, den Einfluss des Internet Explorers auf HTML5, einen alten HTML5-Talk von Peter und die (ernst gemeinte) Frage, ob Chrome der neue IE 6 ist.

Kinder, wie die Zeit vergeht! Erst in der Revision 402 haben wir TypeScript 3.7 analysiert und nun steht auch schon Version 3.8 vor der Tür. Peter und Stefan nehmen sich dieses Themas (und weitläufig abschweifend auch diverser anderer Themen) an. Schaunotizen [00:00:40] TypeScript 3.8 Die neue (Non-SemVer) Version von TypeScript bietet diverse Neuheiten, angefangen mit Type-Only Imports and Export. Diese sind vor allem für Angular-Services nützlich, Stefan erwartet aber, wie schon bei Assertion Signatures, auch andere Use Cases. Der Support von Private Class Fields haut uns nicht vom Sockel, die neue Export-NS-From-Syntax gefällt da schon eher. Über Top-Level-Await schweifen wir zu den Herausforderugen für die Autoren von JS-Tooling ab, das manchmal Blüten wie die .mjs-Dateierweiterung treibt. Außerdem geht noch um Optional Chaining, Sinn, Zweck und Nutzer von JSDoc, watchOptions und ts-node, Incremental Checking sowie Stricter Assignability Checks to Unions with Index Signatures. Was immer das auch sei mag!