Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

May 05, 2020 Revision 423: Reactive Systems
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).
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 23 min
April 28, 2020 Revision 422: Web Worker, ComLink und WASM
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!).
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 14 min
April 21, 2020 Revision 421: Use Cases für Generators
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 3 min
April 14, 2020 Revision 420: CSS Specifications & VisBug
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 29 min
April 07, 2020 Revision 419: HTML5-Glücksrad
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 -Element, sondern ggf. auch eine Image Map, ein Formular oder ein -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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 5 min
March 31, 2020 Revision 418: TypeScript ist doof!
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!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 18 min
March 25, 2020 Revision 417: Das Ende einer Ära
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
2 hr 1 min
March 17, 2020 Revision 416: TypeScript 3.8
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!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 16 min
March 03, 2020 Revision 414: Warhol
Diese Revision fragt Schepp das dynamische Duo aus Hans und Peter über ihr SAAS-Projekt Warhol aus.
Schaunotizen
[00:00:30] Warhol
Hans und Peter plaudern und über Sinn, Zweck und Umsetzung ihres Tools, das aus Pattern Libraries Test für Webdesign generiert (Demo-Video). Wir sprechen über Sinn und Zweck von Pattern Libraries, vergleichen Warhol mit SiteEffect sowie Screenshot-Tools für Visual Regression Testing, besprechen mögliche Use Cases für automatisiertes Design-Testing und kommen auch auf Details wie Warhols Browser-Extension und Warhol’s Law zu sprechen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 10 min
February 25, 2020 Revision 415: Werbung und Tracker domptieren
In diese Revision dreht sich alles um Werbung und Tracking Scripte. Denn Hans interviewte Schepp anlässlich seines Blogposts zu dem Thema aus Dezember.
Unser Sponsor
Hier kannst du mehr über IONOS erfahren.
Schaunotizen
[00:02:26] Werbung und Tracker domptieren
Zunächst erklärt Schepp, wie Werbung heutzutage in Webseiten gelangen, nämlich vollautomatisiert, und wie wenig Kontrolle man dadurch über die tatsächliche Auswahl hat.
Dann reden wir über den Konflikt von Werbung mit einem echten responsiven Ansatz, und Lösungsmöglichkeiten.
Werbemittel sind meist auch nicht performant programmiert, sondern eher hemdsärmelig. Deshalb findet man darin auch oft das antike und render-blockierende document.write. Schepp hat eine
Werbeslots, die auf einer Seite ständig auf und zuklappen, je nachdem welche Werbung darin geladen wird, stören den Lesefluss gewaltig. Ein Ansatz mit position: sticky hilft hier aus der Misere.
Sogenannte Wolkenkratzer- oder Hintergrundbild-Anzeigen neigen dazu, dafür zu sorgen, dass sie immer sichtbar sind. Das kann zur Folge haben, dass sie manchmal wichtige UI wie den Webseiten-Kopf oder das Off-Canvas-Menü abdecken und diese Elemente dadurch unbedienbar werden. Der Trick hier ist, die Werbung in einem Container einzufangen, und diesen dann geschickt in den restlichen Stacking Context einzubinden.
Zu guter Letzt entpuppen sich Werbeanzeigen manchmal als Trojanische Pferde, deren eigentliches Ziel es ist, unbemerkt sensible Daten der User zu stehlen. Dafür lesen sie vorhandene, oder heimlich eingefügte Inputs aus. Dem hat Schepp einen Riegel vorgeschoben, indem er den Prototypen des Input Elements gepatcht hat.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 14 min