Working Draft

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!

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.

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

Das Warten hat endlich ein Ende: Nach mehreren Monaten der intensiven Suche — fast schon ein Running Gag! — ist nun jemand mit fundamentalem Svelte-Wissen ins virtuelle Studio reingeschneit: Vanessa Böhner, die treuen Hörern mit ihren versierten Einblicken zu Vue, Frontend-Testing und Micro Frontends bekannt sein dürfte, hat sich im Zuge des Relaunchs ihrer Seite intensiv mit Svelte auseinander gesetzt. Noch intensiver, nachdem die Einladung zum Podcast kam. Podcast Driven Development, sozusagen. In gewohnter Qualität und Genauigkeit gibt uns Vanessa den Svelte Deep Dive, beantwortet alle Fragen zu Framework, Framework-Geschichte und Use Cases. Unser Sponsor Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”). You can read more about Storyblok and use their free plan, reach them on Twitter or in their live chat. Schaunotizen [00:01:32] Svelte Svelte ist anders. Die Rückkehr von „write less, do more“, und exklusiv compiler-orientiert. Das Ergebnis: Wenig Framework, hohe Developer Ergonomie. Durch schlaue Konventionen und dem Aufbrauch gewohnter Framework-Strukturen schafft es Svelte mit einer mächtigen Template Sprache und 0 Boilerplate Code echt Spaß zu machen, und erstaunlich wenig Code zu produzieren. Das Hello World überzeugt, aber auch im späteren Verlauf zeigt Svelte, dass es mit allen Wassern gewaschen ist. Für moderne JAMstack Architekturen gibt es mit Sapper ein auf Svelte basierte Next.js Äquivalent, Styling ist first class citizen und ebenso flott. Wir sind begeistert wie schon lange nicht mehr, und dass, obwohl es noch keinen TypeScript Support gibt. Für weitere Lektüre empfiehlt sich der Svelte Blog, ein Realworld Beispiel, sowie Benchmarks und eine kritische Auseinandersetzung im Vergleich zu anderen Frameworks. Dass Svelte sauflott ist, sieht man auch in sehr anschaulich in diesem Tweet

Hans und Peter hatten diesmal das Vergnügen, sich mit dem langjährigen Podcast-Hörer Tobias Barth (freischaffender Frontend- und gelegentlicher Node-Entwickler, zu finden in Web, Twitter und auf Dev.to) über die Prozesse und Tools rund um die Veröffentlichung von JavaScript-Paketen austauschen zu dürfen. Unser Sponsor Hier kannst du mehr über IONOS erfahren. Schaunotizen [00:02:45] Veröffentlichung von Libraries Die Perspektiven eines kleinen Startups (Peter und Hans mit Warhol.io) und Tobias (MediaMarkt/Saturn) bzgl. Library-Entwicklung und -Veröffentlichung prallen aufeinander! Neben offensichtlichen Fragen wie Dependencies vs. Selbstschreiben (vgl. Revision 397 zu Preact) geht auch um das Handwerk des NPM-Paket-Veröffentlichens mit Semver (bevorzugt mit automatischen Versionsnummern via standard-version und/oder semantic-release) und dem publish-Kommando. Die kniffligen Entscheidungen im Library-Build-Prozess nehmen besonderes Gewicht ein: wie genau passen TypeScript, Babel, Rollup (vgl. Revision 405), Webpack und ähnliche Tools in den Prozess? Was bewirken die Felder main, browser, module und types in der package.json? Am Ende dürfen Verweise auf ein paar Alltags-Helfer nicht fehlen, allen voran das Link-Kommendo (gibt es für NPM wie auch für yarn), die Peer Dependencies, das Dedupe-Kommando und allgemeine Tools wie Prettier, ESLint, Travis, Circle CI, Greenkeeper und Dependabot.

Schepp und Stefan bekommen heute Verstärkung von Lisi Linhart, ihres Zeichens Webentwicklerin und Dozentin an der FH Salzburg, die uns einen ausführlichen und genauen Rundumschlag in Sachen Web Animation gibt. Schaunotizen [00:00:27] Web Animations Die Wege im Web zu animieren sind vielseitig. Wir beginnen unsere Reise bei den Einstiegsdrogen wie CSS Transitions und Animations, die zwar limitiert, aber doch für viele Dinge schön ausreichend sind. Den weiteren Weg gehen wir zur Web Animations API, sehr ählich zu CSS Animations, aber in JavaScript und deshalb über den property-Animationen erhaben. Wem das nicht ausreicht, kann sich in die weite Welt der SVG und Canvas Animationen trauen, und zahlreiche Tools wie Greensock und ähnliches ausprobieren. Zum Abschluß gehen wir in Richtung Animations-Tools, Export-Möglichkeiten, das CSS Houdini Animation Worklet und geben zahlreiche Resourcen und Erfahrungsberichte. Links gibt’s übrigens eine Menge, deswegen bitte schnell in die nächste Sektion um den zahlreichen Namen zu folgen! Links Pratical Web Animation – Script’20 Lisis Vortrag auf der Script’19. Ein prima Überblick mit zahlreichen Beispielen Awesome Web Animation Das Infoportal für alle, die animieren wollen. Bücher, Artikel, Tutorials, Tools Keyframe.rs Livestreams von Animationsexperten CSS Animations vs Web Animations API Wann das eine, wann das andere? GSAP Codepen Collection Zahlreiche Pens zu dem auf Greensock basierten Animations-Plugin GSAP 3 Was kann GSAP 3 eigentlich? Houdini’s Animation Worklet Detaillierte Beschreibung auf Googles Webdeveloper Info-Seiten Tween.js Tweening in JavaScript Fabric.js Eine Zeichenbibliothek für Canvas Pixel.js Eine Game Engine für Canvas Phaser Noch ein Gaming Framework Scroll-linked Animation Ein Proposal zur Animations-API die auf Scroll Offsets reagiert Spirit Ein Timeline-Tool für Web Animationen Tumult Hype Noch ein Animations-Tool Lottie After Effect Animationen exportieren, mobile und im Web verwenden! Uni Salzburg auf der OTS Conf Lisis Fachhochschule gut präsentiert Der Bauer Vor 20 Jahren im Browser, jetzt als Artefakt auf YouTube Barcamp: The next Wek 2x im Jahr ein fesches, web-affines Barcamp kurz vor dem wundervollen Salzburg