Working Draft » Podcast Feed

Oct 20 2020 61 mins 376

Der wöchentliche News-Podcast für Webdesigner und -entwickler. Supported uns bei Patreon: https://patreon.com/workingdraft







Revision 446: State of the Art PHP 2020
Oct 13 2020 99 mins  
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: [email protected] 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!







Revision 443: Select-Styling und Computed Styles
Sep 22 2020 79 mins  
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! a.message_link { margin: 0 0 1rem; width: 100%; border-bottom: 0; display: block; } a.message_link img { margin: 0 0 0 1rem; max-width: 25rem; width: 100%; } Unser Sponsor tradingtwins sucht einen Frontend-Developer für den Aufbau einer digitalen Angebotsplattform. Wenn Du Spezialist für HTML/CSS und Javascript bist, solltest du dir das Startup mal genauer ansehen. Dich erwartet eine Schlüsselrolle in einem Kanban-Team aus Designern und Entwicklern. tradingtwins sitzt im Herzen von Köln, hat aktuell 11 Mitarbeiter. Zwei der drei Gründer sind selbst Entwickler. Sie bauen ein spannendes Produkt mit langfristigem Fokus, sind profitabel und solide finanziert. Eine ausführliche Jobbeschreibung, sämtliche Kontaktdaten und weitere offene Stellen findest du unter www.tradingtwins.com/workingdraft. Schaunotizen [00:01:42] Select-Styling, Farb-Fonts und Unicode Schepp sah sich der Aufgabe gegenüber, mit nativen – -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.


Revision 442: „Next Level“-End-to-End-Testing
Sep 15 2020 68 mins  
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.“











Revision 437: 15 Jahre MDN!
Aug 12 2020 66 mins  
Nach SelfHTML feierten am 23. Juli 2020 auch die MDN Web Docs ein Jubiläum, nämlich ihr fünfzehnjähriges Bestehen. Für uns ein toller Anlass, einen Gast einzuladen, mit dem wir schon länger sprechen wollten: Kadir Topal, Mozilla-Urgestein und Product Lead der MDN Web Docs. a.message_link { margin: 0 0 1rem; width: 100%; border-bottom: 0; display: block; } a.message_link img { margin: 0 0 0 1rem; max-width: 25rem; width: 100%; } Unser Sponsor Unser Patreon Markus ist Core-Entwickler des CMS Neos und Sponsor dieser Revision! Neos ist aus einem Typo3-Fork entstanden, doch steht mittlerweile auf eigenen, sehr modernen Füßen! In einem voll integrierten Inline-Editor lassen sich die semantisch strukturierten Inhalte mit einer eigenen (JSX-artigen) DSL auf jede beliebige Weise darstellen, was Neos zu einem vielseitigen Tool für Websites, eCommerce-Anwendungen, PWAs und andere Web-Projekte macht. Die Community rund um Neos vertritt dabei eine Philosophie der Offenheit und Innovation und stellt sehr beeindruckende Events auf die Beine. Demnächst erscheint die LTS-Version 5.3 von Neos. Alle Infos dazu findet ihr auf neos.io. Schaunotizen [00:01:50] 15 Jahre MDN Web Docs Zusammen mit Kadir rollen wir den Werdegang der MDN Web Docs auf – von ihren Anfängen als Netscape DevEdge unter AOL, über das „Mozilla Developer Network“ hin zur Browser-agnostischen und allumfassenden Dokumentation fürs Web, wie sie sich heute darstellt, und die zu gleichen Teilen von allen Browser-Herstellern co-finanziert und gemanaged wird (außer Apple natürlich). Dann widmen wir uns neueren Entwicklungen, die den Status der MDN Web Docs als Anlaufpunkt für Webentwickler zementiert haben. Das wären zum einen die ab 2018 in den Beschreibungstexten eingebetteten interaktiven Code-Samples. Desweiteren die 2019 verkündete, zusammen mit Can I Use von Grund auf neu konzipierten Kompatibilitätstabellen, aka „MDN browser compatibility data“, die auf GitHub liegen, und dort von jederfrau, aber vor allem den Browser-Herstellern regelmäßig erweitert werden. Mittlerweile finden sie nicht nur bei MDN und Can I Use selbst Verwendung, sondern auch in Lintern, Prefixern und IDEs wie Visual Studio Code. Und drittens sind es regelmäßige (remote) Nutzertests und die jährlich stattfindende „MDN Developer Needs Assessment“_umfrage, deren Ergebnisse im Web DNA Report mündet und die sogar Google dazu bewegt haben, Geld in die Hand zu nehmen, um konkurrierende Browser besser zu machen. Für die Zukunft ist geplant, Einsteiger-Leitfäden in der MDN Learning Area bereitzustellen, die nicht mehr nur Browser-Technologien zum Fokus haben, sondern die beim Einstieg in JavaScript-Frameworks oder Node.js helfen. Keine Schaunotizen Contributing to MDN Sollten wir Euer Interesse geweckt haben und Ihr Euch fragt, wie Ihr Euch in das Projekt einbringen könnt, dann ist hier der richtige Anlaufpunkt für Euch. MDN Web Docs Store Wenn Ihr das MDN-Projekt lieber finanziell unterstützen möchtet, dann schaut Euch im MDN Web Docs Store um und vielleicht findet Ihr dort das eine oder andere an Merch, das Euch gefällt?




Revision 435: Open, Decentralized, Federated und Indie
Jul 28 2020 77 mins  
Peter lies sich in dieser Revision das Open/Decentralized/Federated/Indie Web erklären und konnte dabei auf den Input von Matthias Pfefferle (Blog, Twitter) und Sebastian Lasse (Mastodon, Autor von Redaktor) zurückgreifen. Schaunotizen [00:00:29] Das Open/Decentralized/Federated/Indie Web Beginnend mit einem Versuch, die Begriffe Open, Decentralized, Federated, Indie etc. zu definieren steigen wir, wie die Nerds die wir sind, recht bald in die technischen Untiefen herab. Neben Protkollen wie ATOM, RSS und ActivityPub sind auch die solche Protokolle nutzenden Software wie Mastodon, Diaspora, oStatus, Identica, Status.net, Tent.io, Friendica ein Thema. Dezentral betriebene Software-Instanzen mit konpatiblen Protokollen bilden das Fediverse, dessen technische Inkompatibilitäten (u.A. betreffend Peer Tube und WebFinger, registerProtocolHandler) ebenso wie nichttechnische Aspekte (unter anderem Monetarisierung, Gouvernance, Nazis, Fake News (siehe Eunomia), End-User-Features wie den universellen Follow-Button und Förderungsmöglichkeiten) durchgekaut werden. Gegen Ende legen wir den Fokus auf das Indie Web (komplett mit IndieWebCamps und Homebrew Website Clubs), Self-Hosting und wagen Rückgriffe auf das Web 2.0 mit Bestandteilen wie Flickr, Ping- und Trackbacks (in neu und cool: Webmention) und die von uns erst kürzlich abfällig betrachteten Microformats. Zuletzt darf der Verweis auf die mehrfacht erwähnte Offizielle ActivityPub Konferenz 2020 nicht fehlen – die Anmeldungs-Phase läuft! Ceterum censeo faciem liber esse delendam.


Revision 434: TypeScript 4.0
Jul 21 2020 75 mins  
Beinahe schon Tradition: Stefan und Peter analysieren die nächste TypeScript Version im Detail. Das erwartet euch in Version 4. a.message_link { margin: 0 0 1rem; width: 100%; border-bottom: 0; display: block; } a.message_link img { margin: 0 0 0 1rem; max-width: 25rem; width: 100%; } Unser Sponsor Die ATMINA Solutions GmbH entwickelt am Standort Hannover Web-Applikationen, Mobile-Apps und unterstützende Backend Systeme. Das Team aus Software Ingenieur*innen, Programmierer*innen und Designer*innen setzt dabei auf moderne, transparente Prozesse und liefert zum frühestmöglichen Zeitpunkt Prototypen und ausführbare Software. Du kannst dort erfolgreiche Portallösungen für Telekommunikationsprovider sowie SaaS Pakete für den Pflege- und Gesundheitssektor mit vielen Tausend Nutzern entwickeln. Oder für die Bundeszentrale für gesundheitliche Aufklärung ein mobile-first Online-Game als Progressive Web App. Egal wofür Du dich entscheidest, bei ATMINA steht der Mensch im Vordergrund, sowohl Mitarbeiter*in als auch Anwender*in. Schau Dich bei uns um. Schaunotizen [00:01:39] TypeScript 4.0 Die nächste TypeScript Version steht vor der Tür! Bevor wir allerdings über den kommenden Release reden sprechen wir über „Development in the open“, und wie das TypeScript Team mit neuen Features umgeht. Veröffentlicht wird ja nun vier mal im Jahr, und was kommt kann man sehr gut auf deren Roadmap sehen, z.B. ein Versuch zu nominalen Typen. Im Detail sehen wir uns allerdings das Herzstück Variadic Tuple Types an, das Stefan dazu gebracht hat die TypeScript Quelldateien mal selbst zu kompilieren und gehörig Bugs und Feedback einzutragen. Wir sprechen über bewusst unfertige Types, was spannend an strukturellen Typsystemen ist, und natürlich warum wir OOP doof finden. Das tun andere übrigens auch. Zu Recht! Abschließend gehen wir auf Editor-Verbesserungen ein, Short circuit assignements und Updates bei JSX. Tolles Release!




Revision 432: Firefox und seine Devtools
Jul 07 2020 77 mins  
Lange geplant, jetzt in die Tat umgesetzt, haben wir diese Revision Harald Kirschner zu Gast, um über den gesamten Firefox Cosmos zu sprechen. Harald ist aktuell nicht nur Produkt Manager für die Firefox Developer Tools und Performance Tooling zuständig, sondern hat zuvor maßgeblich am Projekt „Quantum“ mitgewirkt, bei dem Firefox‘ Infrastruktur nach und nach durch modernere und performantere Bausteine ersetzt wurde. [00:00:33] Schaunotizen Der Next-Gen-Firefox für Android: Firefox Preview „Quantum“ ist ein gutes Stichwort, denn dieses vor einem halben Jahrzehnt begonnene Projekt hat „Firefox Preview“ (interner Projektname „Fenix“) erst möglich gemacht: Einen mobilen Browser, der ganz ohne Tricksen und Abkürzen wahnsinnig schnell ist. Ein wesentlicher Bestandteil von „Quantum“, der das möglich gemacht hat, ist „Web Render“, eine neugedachte und fürs Web optimierte Render-Engine, die auf OpenGL basiert, multithreaded ist, und die für das Abbilden eines Rendertrees optimiert ist anstatt einen General-Purpose-Ansatz zu verfolgen. Und auf Firefox Preview wiederum basiert der neue GeckoView, der es anderen Produkten leicht macht, Gecko als Web-Engine zu integrieren. Firefox + Puppeteer Version 3 von Puppeteer bringt eine experimentelle Unterstützung von Firefox mit. Wir sprechen darüber, dass Puppeteer eigentlich das Chrome Debugging Protocol (CDP) nutzt und Firefox für die Anbindung an Puppeteer vom Mozilla-Team um CDP-Fähigkeiten erweitert wurde (und weiterhin wird). Wir sprechen außerdem kurz über Playwright, hinter dem auch viele der Puppeteer-Leute stecken, das eigens dafür gepatchedte Firefoxe und WebKits mitliefert. Und schließlich sprechen wir über CDP selbst, über die Frage, warum die Debugging Protokolle der verschiedenen Browser nicht kompatibel gemacht werden, sowie über die Unterschiede von CDP und der standardisierten Web Driver Schnittstelle, und wie Web Driver 3 irgendwann alles besser machen wird. Firefox Profiler Intern hat Mozilla lange einen sehr mächtigen Profiler genutzt, um seine Fortschritte beim „Quantum“-Umbau besser messen zu können. Dieser steht uns jetzt allen zur Verfügung, und zwar nicht nur in Form eines mitgelieferten Devtools-Panels, sondern als externe Web-basierte App, die lokale Messungen anzeigt. Kollaborativ kann man die dann auch hochladen und mit anderen Entwickler per URL teilen und vergleichen. Die typischen Flame Charts und Call Trees lösen alles bis ins kleinste Detail auf und für die Abenteuerlichen können auch Firefox-Internals angezeigt werden. Keine Schaunotizen Firefox Developer Tools – Community & Documentation Wer Lust bekommen hat, das Devtools-Team zu unterstützen und vielleicht sogar neue Features zu implementieren, findet hier alle relevanten Ressourcen für einen gelungenen Einstieg. „Developer in the Middle“ (DITM) Erweiterung für Firefox Diese Erweiterung ermöglicht es, Ressourcen einer Seite on-the-fly durch lokal oder anderswo liegende zu ersetzen. CSS Grid Video Tutorial Das beste Videotraining, um CSS Grid lernen, vom grandiosen Wes Bos. Flexbox Zombies Spielerisch CSS Flexbox lernen? Das geht! Dave Geddes hat nämlich ein Flexbox-Lernspiel gebaut.




Revision 430: Berufseinstieg per Coding Bootcamp
Jun 23 2020 64 mins  
Zur Abwechslung beschäftigen wir uns in dieser Revision einmal nicht mit Technik, sondern mit dem relativ neuen Phänomen der Coding Bootcamps. Mit dabei sind Marie von der Wehl ([email protected] / @MarWehl), die ein solches Bootcamp im vergangenen Jahr bei neue fische in Hamburg durchlaufen ist, sowie Franziska Gertz ([email protected] / @frau_scholle), die als Teamlead für UI Engineers bei sum.como von vielen Vorzügen der Bootcamp-Abgänger zu berichten weiß. Schaunotizen [00:00:27] Coding Bootcamps Von Marie erfahren wir zunächst, wie sie als Logopädin auf die Idee kommt, es doch lieber mit der Programmiererei zu versuchen, und wie sie auf das Angebot der „neuen fische“ gestoßen ist. Wir reden darüber, wie der erste Kontakt zum Anbieter zustande kam und wie anschließend die Ausbildung im Schnelldurchlauf sowohl vom Ablauf her als auch inhaltlich vonstatten ging. Natürlich wollen wir auch wissen, wie sich solche Bootcamps ihre Leistung entlohnen lassen. Und schließlich interessiert uns, wie Marie sich nach der abgeschlossenen Ausbildung auf dem Arbeitsmarkt geschlagen hat. Von Franzi wiederum bekommen wir attestiert, dass diese Bootcamps tatsächlich tollen Output liefern und ihre Firma derweil einige „neue fische“-Abgänger beschäftigt, nämlich ganze drei Entwicklerinnen und zwei Entwickler. Franzi und ihr gesamtes Team genießen die Begeisterung und den Wissensdurst, den alle Bootcamp-Abgänger gleichermaßen in die Firma einbringen (und den man bei Marie hört). Gleichzeitig ist aber auch klar, dass so ein Bootcamp nur der Anfang ist und so unterstützt und begleitet ihr Team die Neueinsteiger:innen, so dass sie sich bestmöglich in der Praxis einfinden (oder auch in Vue anstelle des im Bootcamp behandelten React). Uns hat das Befragen der beiden sehr viel Spaß gemacht und wenn Ihr oder bekannte von Euch ebenfalls über ein Coding Bootcamp nachdenken, dann hört diese Folge und kommt gerne auf Marie oder Franzi mit weiteren Fragen zu. Und wenn Ihr selbst ein solches Bootcamp absolviert habt, dann würde uns interessieren, wie Eure Erfahrung war. Hinterlasst gerne eine Nachricht in unserem Kommentarbereich!





Revision 428: Deno
Jun 09 2020 61 mins  
Hans und Rodney unterhalten sich über Deno, das ziemlich genau zwei Jahre nach dem ersten Commit in Version 1.0 veröffentlicht wurde. .long-message a.message_link { margin: 0 0 1rem; width: 100%; border-bottom: 0; display: block; } .long-message a.message_link img { margin: 0 auto; } Unser Sponsor netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. Hier kannst du mehr über netidee erfahren. [00:00:27] Schaunotizen Deno Mit Deno versucht Ryan Dahl bei der Entwicklung von Node.js gemachten Fehler zu korrigieren. Wir erklären wie Deno auf ein Package Management verzichtet und stattdessen auf das direkte Referenzieren von einzelnen Ressourcen „im Internet“ setzt (ähnlich wie Browser ES6 Module Specifiers auflösen). Deno setzt außerdem von Haus aus auf TypeScript (erlaubt aber dennoch schnödes JavaScript). Compiler und Bundler sind mit an Board und dürften Diskussionen um Tooling erstmal etwas dämpfen. Mit einer ausbalancierten Runtime API und breiter gehenden Standard Library erlaubt Deno schon eine ganze Menge direkt ab Werk. Wir machen uns zwar stellenweise über das eine oder andere Fundstück in der Standard Library lustig, glauben jedoch, dass diese Art des betreuten Wohnens angenehmer sein dürfte, als wir das vom SIY (Search for It Yourself) des Node/NPM Campingplatzes gewohnt sind. Wenigstens einer von mehr zu bieten, als nur mal eben die Doku zu überfliegen: Hans von seinen ersten Gehversuchen mit Deno. Am Ende bleiben wir aber vermutlich doch eher auf der konservativen Seite und warten mal ab was im nächsten Jahr mit Deno passiert, bevor wir uns von Node.js trennen.




Revision 426: gastliches Glücksrad mit Stefan Judis
May 26 2020 86 mins  
Eine nie dagewesenen Neuheit: HTML5-Glücksrad mit Gast! Der aus Funk, Fernsehen und Revision 424 bekannte Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, scrollte mit Schepp und Peter durch die HTML-Specs, um frei über Webstandards und Trends zu assoziieren. Glücksrad [00:00:29] event.submitter Hätten Sie’s gewusst? event.submitter (MDN) verrät, welcher Button zum Absenden eines Formulars verwendet wurde. Wir fragen uns, wozu das gut sein könnte, lernen die requestSubmit()-Methode kennen und Peter gelingt es erneut, sich über React zu echauffieren. [00:12:00] Microdata Sind Microformats (zuvor Thema in den Revisionen 262 und 287) und damit das Semantic Web wie auch RSS und APIs als Gefallene des Web2.0-Kriegs zu rubrizieren? Uns fallen nur wenige aktuelle Use Cases für HTML5-Microdata oder Microformats oder JSON-LD ein. Sie sind Bewohner einer längst untergegangenen Welt. [00:18:48] Server-Sent Events aka Event Source Ein (soweit wir es sagen können) kaum genutzter Webstandard lässt uns zu localForage, Accessibility und dem jüngsten Dependency-Desaster in JavaScript abschweifen. [00:37:28] Tracks Für den Einsatz mit dem -Element ersann man das ureigene WebVTT-Format, das uns dezent an SMIL erinnert (auch wenn SMIL, des größeren Alters zum Trotz noch weniger gut als WebVTT unterstützt wird). [00:48:42] Sections, Headlines und Outlines Wir lassen das Outline-Drama revue passieren. Vom an sich sehr eleganten Algorithmus ist außer ein paar Browser-Standardstyles nicht viel geblieben. [01:03:32] und Warum gibt es Extra-Elemente für Fortschrittsbalken und Klapp-Dialoge a la , aber kein eingebautes Tab Widget? Peter versucht sich an einer Erklärung. Am Ende landen wir unsersehens in den ECMAScript-Specs und staunen über die diversen weniger bekannten Rudimente in JavaScript. Vielleicht machen wir nächstes Mal ein JavaScript-Glücksrad?








Revision 422: Web Worker, ComLink und WASM
Apr 28 2020 73 mins  
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!).







Revision 419: HTML5-Glücksrad
Apr 07 2020 64 mins  
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.













Revision 413: Svelte
Feb 18 2020 71 mins  
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. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } 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


Revision 412: Veröffentlichung von JS-Libraries
Feb 11 2020 63 mins  
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. .ionos a.message_link { margin: 0 0 1rem; width: 100%; border-bottom: 0; display: block; } .ionos a.message_link img { margin: 0 auto; } 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.


Revision 411: Web Animations
Feb 06 2020 59 mins  
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




Revision 409: Style Containment und Display Lock API
Jan 21 2020 55 mins  
Leise rendert der Schnee bei dieser in der Vorweihnachtszeit aufgenommenen Revision … und damit er das auch halbwegs zügig macht, sprechen Schepp und Peter über zwei Features, die Webentwicklern bessere Kontrolle über das Browser-Rendering geben. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 300px; border-bottom: 0; } Unser Sponsor ABOUT YOU ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion Online Shop in zehn europäischen Märkten vertreten. Die Plattform verarbeitet täglich mehr als 300 Millionen API-Aufrufe und hat insgesamt 15 Millionen aktive Nutzer. Da das Unternehmen weiterhin schnell wächst, ist ABOUT YOU immer auf der Suche nach neuen, motivierten Talenten. Derzeit sind z.B. Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager und andere aufregende Führungspositionen frei. Hört sich spannend an? Bewirb Dich jetzt unter aboutyou.com/bewerben. Schaunotizen [00:01:40] CSS Containment CSS Containment ist mittlerweile ein solider Webstandard (fast jedenfalls) sowie vergleichsweise gut unterstützt und vielerorts gut erklärt, aber eine Auffrischung lohnt sich. Schepp und Peter sprechen über die contain-Eigenschaft und ihre diversen Werte, display:contents (Draft, CanIUse) und position:sticky [00:25:12] Display Locking Es gibt einen Entwurf für eine API, die viele Performance-Use-Cases für Intersection Observers abdeckt und dabei noch besser ist! Wir vergleichen das vorgeschlagene rendersubtree-Attribut mit display: none (und klassischem Lazy Loading) sowie Origin Trials mit Vendor Prefixes. Am Ende phantasieren wir ein wenig über einen Polyfill für rendersubtree und eine Layout-Performance-Test-Seite im Stile von JSPerf. [00:52:44] Keine Schaunotizen Videos der Performance.now() Schepp war auf der jüngsten Installation der Web-Performance-Konferenz und empfiehlt zahlreiche Talks.




Revision 407: Micro Frontends mit Project Mosaic
Jan 07 2020 89 mins  
Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang Vanessa Böhnert zum Thema Micro Frontends. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } 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:03:06] Project Mosaic, aka Mosaic 9 & Micro-Frontends Vanessa erzählt uns kurz was sie mit Mosaic 9 zu tun hat. Danach geht es erstmal darum was Micro-Frontends überhaupt sind, in welchem Fall man diese einsetzen möchte und wie man das machen kann. Ein Mosaic 9 Crash-Kurs kommt dabei natürlich nicht zu kurz. Vanessa erklärt uns, wie sie die verschiedenen Software Projekte aus denen Mosaic 9 besteht, selber bei der Arbeit einsetzt.





Revision 406: Standort Linz – ScriptConf
Dec 31 2019 58 mins  
Kahlil, Hans und Peter erfahren in dieser Revison von Stefan alles über die ScriptConf, die JavaScript-Konferenz in Österreichs Tech-Hub Linz. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor devjobs.at ist Österreichs erste Job- und Karriereplattform SPEZIELL für Software Entwickler:innen. UND wurde von Grund auf von Developern für Developer konzipiert. Das Besondere auf dem Portal sind auf Programmierer:innen abgestimmte Stelleninserate und Firmenpräsentationen, welche umfassende Einblicke in die Entwicklungsabteilung geben. Damit ihr immer den passenden Job findet, funktioniert devjobs.at mit einer neuen, auf KI basierten Such- und Matchingtechnologie. Jetzt schon nutzen mehr als 500 Entwickler:innen täglich das Portal des Mitte Juni gelaunchten Linzer Startups. Besucht am besten gleich den neuen smarten Wunschjob-Assistenten, mit dem es ein leichtes ist JavaScript und TypeScript-Jobs zu finden. Schaunotizen [00:01:50] ScriptConf Stefan erzählt die Geschichte der ScriptConf, beginnend mit der ersten Iteration von 2017, die Stefan und Sebastian nach einem Treffen in einer belgischen Bierbar mehr oder minder spontan anschoben. Als Inspirationsquellen für die ScriptConf dienten neben der Beyond Tellerrand auch die Nightlybuild (seinerzeit mitorganisiert von Hans). Nach einem Rückblick auf die großen Erfolge und kleineren Fehler der Vergangenheit berichtet Stefan von der Planung (dem Quasi-Neustart) für die jüngste Iteration, während Hans Eindrücke aus der Teilnehmer-Perspektive beisteuert. Neben einem Auftritt von Webtech-Tausendsassa Vitaly Friedman bot die ScriptConf den hundertsten Tak von CSS-Überguru Harry Roberts – eine schöne Gelegenheit zu feiern, haben sich Stefan und Harry bei Harrys erstem Talk ja kennengelernt! Wir kommen nicht umhin festzustellen, dass das Techboom-Land Österreich zur Zeit vor Konferenzen geradezu explodiert: neben der Webclerks-Konferenz, der tsconf.eu und SoCraTes Austria ist hier vor allem die DevOne zu nennen, bei der DynaTrace und damit auch Stefan ihre Finger im Spiel haben. Generell der Standort Linz scheint für viele Software-Entwicklungs-Firmen interessant zu sein. Stefan hat ein paar Ideen, warum das so ist. Nach einem kurzen Talk-Review der ScriptConf III (von der mittlerweile alle Videos hochgeladen wurden) enden wir mit einem kleinen Exkurs über Software-Entwicklungs-Trend-Zyklen, wozu Kahlil mit Why Isn’t Functional Programming the Norm und Peter mit Object-Oriented Programming is Bad zwei Unterschiedliche Erklär-Ansätze zur Dominanz von Enterprise-OOP zu Felde führen. Und wir decken auf, dass Stefan die tsconf.eu eigentlich nur angeschoben hat, um TypeScript-Erfinder Anders Hejlsberg nach Linz zu lotsen. Aber pssst! [00:59:40] Keine Schaunotizen Videos von der ScriptConf III Alle Talks auf YouTube.


Revision 405: Rollup.js
Dec 22 2019 63 mins  
Maintainer Lukas Taegert-Atkinson (Twitter, Github) gab uns einen tiefen Einblick in das Was, Warum und Wie des JavaScript-Modul-Bundlers Rollup.js – nicht nur was die Technik angeht, sondern auch mit Fokus auf das Dasein als Open-Source-Maintainer. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 300px; border-bottom: 0; } Unser Sponsor ABOUT YOU ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion Online Shop in zehn europäischen Märkten vertreten. Die Plattform verarbeitet täglich mehr als 300 Millionen API-Aufrufe und hat insgesamt 15 Millionen aktive Nutzer. Da das Unternehmen weiterhin schnell wächst, ist ABOUT YOU immer auf der Suche nach neuen, motivierten Talenten. Derzeit sind z.B. Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager und andere aufregende Führungspositionen frei. Hört sich spannend an? Bewirb Dich jetzt unter aboutyou.com/bewerben. Schaunotizen [00:06:03] Rollup.js Lukas war einst Mathematiker, dann Entwickler … und bekam 2017 nach nur 4 Pull Requests vom Rollup-Ursprungs-Erfinder Rich Harris die Admin-Rechte des Github-Repositories übergeholfen. Im Podcast erzählt Lukas nicht nur, was es mit Rollup technischerseits auf sich hat (es ist ein Modul-Bundler mit Tree Shaking), sondern zeigt auch die Verbindungen zu SystemJS, RequireJS, Browserify und natürlich Webpack auf. Mit letzterem wird Rollup gern verglichen, obwohl die Ähnlichkeiten doch recht überschaubar sind. Wir erfahren alles über die Mechanik hinter Tree Shaking (auch innerhalb von Modulen), den Support von CommonJS und Plugins in Rollup (inklusive Exkursen in die Details der Plugin-Entwicklung) und die Unterstützung von Rollup für CSS, StencilJS, HMR und inkrementelle Rebuilds. Natürlich kommen wir nicht umhin, Rollup (im Rahmen der Möglichkeiten) mit Projekten wie Webpack Parcel und Nollup zu vergleichen. Am Ende geht es natürlich um Pläne für die Rollup-Weiterentwicklung und das Los des Open-Source-Maintainers, der Rollup als ein Nebenher-Projekt pflegt … und natürlich jederzeit auf der Suche nach fleißigen Helfern ist! [01:00:17] Keine Schaunotizen Bandcamp von Baldower Shameless plug der Bandcamp-Page des Konferez-DJs Baldower (bekannt von der beyond tellerrand, Nightly Build, Smashing Conf, Scriptconf usw.)


Revision 404: Bleeding-Edge JavaScript
Dec 18 2019 87 mins  
This revision we had the pleasure to sit down with Christophe Porteneuve (@porteneuve) who is based in Paris. Christophe made his entry to web development almost twenty-five years ago and is well known in today’s JavaScript scene since back in the days when he became core team member of prototype.js (who still remmebers this?). Nowadays he runs the consultancy & training company Delicious Insights together with a pertner where they offer (Node-)JS, Tooling and Git Workshops. On top of that Christophe can usually be found MC’ing the dotJS Conferences. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 300px; border-bottom: 0; } Our Sponsor ABOUT YOU is one of the fastest growing e-commerce companies in Europe with headquarters in Hamburg. The Fashion Online Shop is currently represented in ten European markets. The platform processes more than 300 million API calls daily and has a total of 15 million active users. ABOUT YOU is always on the lookout for new, motivated talents. For example Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager and other exciting management positions are currently vacant. Does this sound exciting? Apply now at aboutyou.com/bewerben. We are looking forward to seeing you! Shownotes [00:04:14] Bleeding-Edge JavaScript In our fireside-chat we talked about old and new JavaScript additions, which we find very helpful, if not even mind-blowing. We started off with an older but underappreciated feature, ES Proxies, as Christophe just recently held a talk about those at the Fronteers Conference (Slides). Proxies allow to watch objects like in immer.js or like in Vue.js 3, or build traps in order to instrument property access, or to do meta-programming. Afterwards we talked about how new features find their way into JavaScript, what ECMA is, what JavaScript, what TC-39 and the different „Stages“ means and why JavaScript today is still a trademark of Oracle in the United States. And of course we also talked about these features: private fields/methods (scattered acress three proposals) nullish coalescing optional chaining Promise.allSettled/any pipelines partial application first-class protocols numeric separators [01:21:34] Links This time we have two links for you: Delicious Insights Screencasts We can really recommend Christophe’s screencasts. Right now there are four available for you to watch: Git Core Concepts (this one is free) “Git undo” or the art of rolling back JavaScript: this is it (about the „this“ keyword) Writing Modern Async JavaScript The later three ones are not free, but as listeners of this podcast, you get a 30% discount until January 15th, 2020, with this link: screencasts.delicious-insights.com/?coupon=WORKINGDRAFT-30-OFF. Think About! Conference 2020 The second thing, we’d like to promote is next year’s iteration of the Think About! Conference. The inaugural 2-day-conference happened this year in Cologne and not only were we blown away but the concept and contents, we also happened to do five super interesting interviews there: workingdraft.de/category/on-tour/thinkabout19/. Ticket sales for next year opened and there are still Early Bird Tickets left, for EUR 380 instead of the regular EUR 500.


Revision 403: Meta-Frameworks
Dec 10 2019 40 mins  
Schepp, Kahlil und Hans quatschen über APIs, die sich von Frameworks-Features zu Browser-APIs entwickeln. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor devjobs.at ist Österreichs erste Job- und Karriereplattform SPEZIELL für Software Entwickler:innen. UND wurde von Grund auf von Developern für Developer konzipiert. Das Besondere auf dem Portal sind auf Programmierer:innen abgestimmte Stelleninserate und Firmenpräsentationen, welche umfassende Einblicke in die Entwicklungsabteilung geben. Damit ihr immer den passenden Job findet, funktioniert devjobs.at mit einer neuen, auf KI basierten Such- und Matchingtechnologie. Jetzt schon nutzen mehr als 500 Entwickler:innen täglich das Portal des Mitte Juni gelaunchten Linzer Startups. Besucht am besten gleich den neuen smarten Wunschjob-Assistenten, mit dem es ein leichtes ist JavaScript und TypeScript-Jobs zu finden. Schaunotizen [00:01:39] Meta-Frameworks Kahlil hat auf der React Rally einen berichtenswerten Talk von Nicole Sullivan alias @stubbornella aufgeschnappt. Thema ist die Zusammenarbeit des Chrome-Teams mit diversen Framework-Entwicklern, bei der das Ziel ist, den Browser zu einer besseren Plattform für die diversen Web-Frameworks zu machen. Eine wichtiges Takeaway aus dem Talk ist die offizielle Google-Empfehlung, Meta-Frameworks wie Next.js (ein Wrapper um React) und Nuxt.js (ein Wrapper um Vue) einzusetzen um Performance-Best-Practices wie SSR auf Framework-Ebene zu etablieren. Aus der Zusammenarbeit zwischen React und Google sind unter anderem die Main thread Scheduling APIs und isInputPending in Chrome zurückgeflossen. Wir quatschen über 7 Principles of Rich Web Applications, create-react-app, Frameworks allgemein, Server-Side Rendering, HTML5 Boilerplate, Ember Fastboot, Code Splitting, CSS Modules (nicht das JS-Projekt), Web Components, GatsbyJS, Uberspace und mögliche Gründe gegen den Einsatz von Meta-Frameworks.








Revision 400
Oct 24 2019 113 mins  
Zur Feier des Tages versammelte sich das komplette Team (Peter, Hans, Rodney, Stefan, Schepp) nebst allen Alumni Markus Schlegel, Kahlil Lechelt und Anselm Hannemann in einer Videokonferenz! Von dieser Revision gibt es also auch eine Youtube-Version mit Bewegtbild: In Video wie in Podcast sprachen wir über das Big Picture: die Webentwicklung (und der Podcast) von damals verglichen mit heute und wie auch wir selbst uns im Laufe der Zeit so verändert haben. Schaunotizen [00:01:50] Gott und die Welt Wir beginnen mit den Anfängen von Working Draft (Revision 1: Sencha Animator, Webfernsehen und Firesheep), die damals unter anderem Peters Blog-Linkliste ersetzte. Damals waren er und Schepp mit originellen Projekten wie Turbine und dem CSS-JS-Booster befasst und wurden dann von Markus zum Podcast rekrutiert. Gestützt durch unser Metadaten-Archiv ermitteln wir, dass Anselm zuerst in Revision 36 („Ohne Jan, aber mit Delay“) und Kahlil erstmals in Folge 37 („speak.js, Native Client und JS-MVC-Frameworks“) dabei waren. In Revision 40 („Zerskyped“) taucht erstmals Rodney auf und Hans feiert seine Workingdraft-Premiere mit Revision 44 („HTTP-Statuscodes, TYPO3 und ’n Echo, echo, cho, o….“). Wie die frühen Revisionstitel erkennen lassen, hatten wir früher noch erheblich mehr mit Tonproblemen zu kämpfen und auch die Web-Technik war damals eine andere. So kommen wir auch in dieser Revision nicht umhin, über JavaScript-Frameworks iin Vergangenheit, Gegenwart und Zukunft (ggf. powered by WASM) zu sprechen und wieder mal etwas technischer zu werden …



Revision 399: Project Fugu
Oct 21 2019 88 mins  
Schepp, Hans und Stefan im Gespräch mit Thomas Steiner von Google. Seines Zeichens Dev Advocate für Project Fugu. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor VisionX ist eine Low-Code Plattform die Unternehmen unterstützt Applikationen schneller zu entwickeln. VisionX hilft dabei die eigene Softwareentwicklung zu beschleunigen und komplexe Applikationen mit geringem Aufwand zu erstellen. Schaunotizen [00:04:00] The Web Capabilities Project – Fugu Warum denn immer Electron Apps installieren oder gleich mit Cordova Hybrid-Apps bauen, wenn das Web an sich im Browser doch eh so viele Möglichkeiten bieten? Nun, vielleicht fehlt doch das eine oder andere. Wie File System Access, oder Zugriff auf wichtige Kontakte. Vielleicht die Direkt-Verbindung zu SMS, Background Sync von Inhalten und mehr? Tja, es gibt doch etwas, das in Betriebssystemen steck und man irgendwie gerne im Browser auch haben möchte. Hier setzt Project Fugu an. Fugu bietet dem Web das zarte und absolut köstlichste Filet, dass man für Apps finden kann. Bei allem anderen kann man sich gleich mal giftigst verschlucken (erzählen die Simpsons). APIs für den Browser, die aus dem Web endlich die Applikationsplattform machen, die es schon immer sein sollte. Mit im Programm: Alles vorher genannte und noch viel, viel mehr. Wie der API Tracker verrät. Ein ambitioniertes Projekt, bei dem viel Hirnschmalz und noch mehr Kommunikation drinsteckt. Thomas erzählt uns von der generellen Herangehensweise, der offenen Entwicklung, Kollaboration mit Partnern und Browserherstellern, und auch wie alles ins große Bild von Google passt. Viel Wissen verpackt in knackige anderthalb Stunden. Viel Spaß! [01:23:31] Keine Schaunotizen Google IO/19: Unlocking New Capabilities for the Web Der Talk von Thomas und seinem Kollegen Pete LePage zum Thema Fugu.


Revision 398: Refactoring mit (und zu) TypeScript
Oct 14 2019 77 mins  
Kahlil und Hans erzählen von Refactoring-Projekten mit und zu TypeScript a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor devjobs.at ist Österreichs erste Job- und Karriereplattform SPEZIELL für Software Entwickler:innen. UND wurde von Grund auf von Developern für Developer konzipiert. Das Besondere auf dem Portal sind auf Programmierer:innen abgestimmte Stelleninserate und Firmenpräsentationen, welche umfassende Einblicke in die Entwicklungsabteilung geben. Damit ihr immer den passenden Job findet, funktioniert devjobs.at mit einer neuen, auf KI basierten Such- und Matchingtechnologie. Jetzt schon nutzen mehr als 500 Entwickler:innen täglich das Portal des Mitte Juni gelaunchten Linzer Startups. Ob JavaScript oder TypeScript auf devjobs.at findet ihr euren passenden Job. Schaunotizen [00:01:50] Refactoring Das heutige Refactoring-Thema beginnt mit Kahlils Projekt, das 5 Jahre alt ist und mit Knockout gebaut ist. Nach einem Rant von Peter darüber, dass früher (in einer Welt mit 2-Way-Databinding) auch nicht alles schlecht war und einem kurzen Ausflug in das Œuvre von Andrea Giammarchi (hyperHTML, lighterhtml und neverland) geht es wieder um das eigentliche Thema. Wir setzen Joel Spolskys legendäres Anti-Rewrite-Essay in Kontext und lassen auch Hans von einem langen Migrations-Projekt (JS nach TS) erzählen. Am Ende erwähnen wir noch einen TypeScript-Hack und TypeScript/JSDoc-Magie. [01:14:40] Keine Schaunotizen NodeGUI Kahlil möchte euch das neueste Tool für Desktop-Apps mit JavaScript ans Herz legen.








Revision 396: Elm und F# – Funktionale Programmiersprachen im Browser
Sep 04 2019 72 mins  
Hans, Schepp und Stefan bekommen Besuch von Daniel Bachler, der uns über Front-End Entwicklung mit rein funktionalen Programmiersprachen aufklärt. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor Mit StormForger kannst du Last- und Performancetests automatisiert in der Cloud durchführen. Lerne, das Verhalten deiner Software-Architektur, deiner Infrastruktur (z.B. AWS Cloud), deiner API und deiner Web-Applikation besser zu verstehen. Melde dich kostenfrei unter stormforger.com/podcast an und nutze den vollen Funktionsumfang in unserer Trial-Version. DevOps und die Cloud sind auch wichtige Themen für uns und unsere Kunden. Deswegen hier noch zwei Veranstaltungshinweise: Am 19.09.2019 tagt bei uns die AWS User Group Cologne mit einem Special zu Kubernetes. Es gibt Talks von Giant Swarm CTO Timo sowie Mindcurv Technical Lead Stefan und Solutions Architect David. Schaut gerne vorbei! meetup.com/aws-cologne Direkt am nächsten Tag, Freitag den 20.09.2019, findet unser (kostenloses) Enterprise Performance Lab statt. Dort gibt es Vorträge und informativem Austausch zu digitaler Produktentwicklung, Software-Architektur, Agile & Performance Testing, Digital Transformation, DevOps und Cloud. Konzipiert ist das Ganze für Menschen aus der digitalen Produktentwicklung und IT, die vor komplexen Fragestellungen stehen. Falls Ihr teilnehmen wollt oder Ihr jemanden kennt, für den das interessant sein könnte, dann findet Ihr alle Infos unter stormforger.com/events. Schaunotizen [00:02:45] Elm Das noch sehr junge Elm ist so etwas wie Haskell im Browser, allerdings zugänglicher und mit vielen schönen Runtime Features, die Fremdbibliotheken fast unnötig machen. Eine strikte funktionale Ausrichtung, alles immutable, superstarke Typisierung keine Side Effects dank Steuer-Strukturen und der Abstinenz von null sorgt für — hört, hört — keinerlei Laufzeitfehler! Mit der Elm Architecture bekommen wir auch so etwas wie Redux frei Haus geliefert (oder bekommen wir mit Redux die Elm Architektur geliefert?) und können fesche Web-Anwendungen bauen. Eigenheiten, Vor- und Nachteile und wie man mit JavaScript spricht, erfährt ihr alles hier. Weiteres Info-Material ist weiter unten verlinkt [00:43:40] F# F# von Microsoft ist seit 2002 der funktionale Bruder von C# für die .NET Laufzeitumgebung. Mit Microsofts Offenheit gegenüber neuen Technologien gibt’s das auch jetzt auf Linux, und seit neuem auch im Browser. Dank Fable übersetzt man den F# Syntaxbaum auf etwas Babel-kompatibels. Mit dem SAFE-Stack ist man dann auch End-to-End F# fähig, und Bolero geht erste Schritte Richtung Web Assembly. Weiteres Lernmaterial wieder weiter unten. [01:07:30] Keine Schaunotizen F# for Fun and Profit DIE Referenz für funktionalie Programmierung, nicht nur zu F#. Making impossible states impossible Legendäres Video von Rich Feldman über die großen Vorteile von funktionalen Programmiersprachen: Keine unvorhergesehenen Fälle! Make Web Apps Fun and Easy to Refactor Daniels eigener Vortrag zu Elm. Elm Guides Elm zum lernen. Try Elm Elm zum (online) ausprobieren.


Revision 395: ProseMirror und TipTap
Aug 30 2019 65 mins  
In dieser Revision kitzelte unser Gast Philipp Kühn (Webseite, Github, Twitter), seines Zeichens Gründer von Ueberdosis und Scrumpy, unsere Nerven mit den neuesten Gruselgeschichten aus der WYSIWYG-Krypta und erzählte uns alles über sein eigenes WYSIWYG-Werk Tiptap. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor Storyblok ist ein headless CMS, das die Grenze zwischen einem traditionellen CMS und einem Pagebuilder sprengt. Das Verwalten digitaler Inhalte mit einem CMS kann eine schwierige Aufgabe sein. Ohne eine visuelle Vorschau arbeiten Redakteure oft blind vor sich hin und benötigen selbst für einfache Änderungen Anweisungen. Storyblok bietet die Benutzererfahrung eines Pagebuilders mit einer modernen, vollständig API-basierten Architektur. Das gibt dem Entwickler die Freiheit bei der Wahl der Technologie und dem Editor eine selbsterklärende und intuitive Oberfläche. Du kannst mehr über Storyblok lesen und ihren kostenlosen Plan ausprobieren, sie auf Twitter oder in ihrem Live-Chat erreichen. Schaunotizen [00:03:20] WYSIWYG Wir beginnen mir einer Bestandsaufnahme: das olle HTML-Standard-Attribut contenteditable ist noch immer so gruselig wie es in der Kreidezeit bereits war uns seine etablierten Nutzer CKEditor und TinyMCE sind ebenso solide wie angestaubt. Leider führen die diversen Alternativen wie der Medium Editor und Quill auf der Haben-Seite kein „solide“ zu Felde, sondern glänzen eher durch Bugs (Medium Editor) und Einschränkungen (Qill). Solidität wäre aber eine der Kern-Anforderungen einer modernen WYSIWYG-Lösung, zusammen mit stetiger Weiterentwicklung (wg. vieler Edge Cases), extremer Anpassbarkeit des UI sowie der Unterstützung dynamischer Inhalte (z.b. @username-Referenzen in Text). Die heute gängige Grundlage eines jeden WYSIWYG-Editors mit Unterstützung für die genannten Features ist ProseMirror aus der Feder von Marijn Haverbeke (Webseite, Github, Twitter), das eher ein Editor-Toolkit als ein WYSIWYG-Editor ist. ProseMirror ist, anders als CodeMirror, sehr lowlevelig und sogleich verlieren wir uns in diversen Details. Damit sich aber nicht jeder Entwickler in Details verlieren muss, hat Philipp TipTap entwickelt, einen CodeMirror-basierten WYSIWYG-Baukausten für VueJS. Tiptap ist highleveliger als Code Mirror und renderless, was wir ausgiebig bequatschen, ebenso wie Collaboration-Features, das junge, knackige Vue und sein Ökosystem und contenteditable 2.0 als mögliches neues (standardbasierte) Fundament für die WYSIWYG-Editoren von morgen.







Revision 394: Web Assembly, WASM, WASI, Rust
Aug 21 2019 49 mins  
Web Assembly kommt und macht doch endlich Schluß mit JavaScript, oder? Nun, fast. Web Assembly ist schon da. JavaScript braucht man — im Moment! — immer noch. Was hat es jetzt mit WASM auf sich, wie entwickelt man dafür und wohin geht die Reise? Ryan Levick von Microsoft erzählt uns alles! a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor Storyblok ist ein headless CMS, das die Grenze zwischen einem traditionellen CMS und einem Pagebuilder sprengt. Das Verwalten digitaler Inhalte mit einem CMS kann eine schwierige Aufgabe sein. Ohne eine visuelle Vorschau arbeiten Redakteure oft blind vor sich hin und benötigen selbst für einfache Änderungen Anweisungen. Storyblok bietet die Benutzererfahrung eines Pagebuilders mit einer modernen, vollständig API-basierten Architektur. Das gibt dem Entwickler die Freiheit bei der Wahl der Technologie und dem Editor eine selbsterklärende und intuitive Oberfläche. Du kannst mehr über Storyblok lesen und ihren kostenlosen Plan ausprobieren, sie auf Twitter oder in ihrem Live-Chat erreichen. Schaunotizen [00:01:34] Rust und WASM 101 Episoden hat es gedauert (siehe Revision 293) bis wir wieder auf WASM zu sprechen kommen. Ryan Levick, seines Zeichens Developer Advocate für Azure bei Microsoft in Berlin, erzählt uns warum er Rust gerade so liebt, und wie man damit supergut für Web Assembly entwickeln kann. Ryan klärt auf über Vor- und Nachteile, VMs in VMs in VMs und wohin die Reise mit WASM geht. Außerdem erzählt er uns, dass es mit WASMTime bereits JIT Umgebungen in WASM gibt, und wie man mit Rust und WASM am Besten starten kann. Außerdem gibt’s einen kleinen Exkurs zu Go, Glimmer, .NET und C#, Blazor und vielen, weiteren, SEO relevanten Keywords. [00:31:26] WASI WASI steht für Web Assembly Systems Interface und ist noch in der Konzeptionsphase. Mit WASI will man eine Schnittstelle zum Dateisystem, Sockets, Network I/O und dergleichen erzeugen, mit der man die geschütze VM Umgebung mit der Echtwelt verbindet. Praktisch das Node.js zur V8. Oder viel spannender: Das betriebssystemunabhängige Docker. Was es damit auf sich hat und warum Stefan im Serverless Kontext gerade voll ausflippt, hört ihr hier.








Revision 393: Babelgebabbel
Aug 02 2019 60 mins  
Hans, Peter und Rodney analysieren in gewohnt messerscharfer Manier ein paar neue, alte und vorgeschlagene JavaScript-Features – teilweise sogar im Grenzbereich zur kontroversen Diskussion! Bitte anschnallen … a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor Mit StormForger kannst du Last- und Performancetests automatisiert in der Cloud durchführen. Lerne, das Verhalten deiner Software-Architektur, deiner Infrastruktur (z.B. AWS Cloud), deiner API und deiner Web-Applikation besser zu verstehen. Damit sicherst du hohe Verfügbarkeit sowie schnelle Performance unter jeglichen Bedingungen – von normalem Traffic bis hin zu Marketing-Kampagnen. Tests sind zeitgesteuert oder durch Integration durchführbar, so dass du immer den Performance-Impact von neuen Features und Infrastruktur-Veränderungen im Blick hast. Melde dich kostenfrei unter stormforger.com/podcast an und nutze den vollen Funktionsumfang in unserer Trial-Version. Folge uns auch gerne auf Twitter: @StormForgerApp :) Schaunotizen [00:02:12] Babel 7.5.0 Released: dynamic import and F# pipelines Wir nehmen das Release von Babel 7.5 zum Anlass, neuere Features wie Dynamic Import (Proposal, MDN) zu besprechen. Peter besteht auf die Festellung, dass import() nur wie eine Funktion aussieht, tatsächlich aber keine ist, in etwa wie super() in Klassen. Dynamic Import verwenden wir allesamt häufig und gern und tauschen uns etwas über Code Splitting in Theorie und Praxis sowie Lazy React aus. Etwas weniger Begeistung können wir für den F# pipeline operator und den Konkurrenzentwurf Smart Pipelines (Proposal) aufbringen. Während Hans durchaus glaubt, dass es ein Publikum für dieses Feature gibt, ist Rodney eher unterwältigt und Peter eher ent- als begeistert. Weiterhin kommen ein Proposal für Built-in Immutability sowie der Umstand, dass Array.prototype.sort() nunmehr stabil sein muss zur Sprache (worüber Rodney in grauer Vorzeit mal einen ausführlichen Artikel schrieb). [00:00:00] Keine Schaunotizen The Babel Podcast Ihr braucht noch mehr JavaScript-Podcast? Babel-Mastermind Henry Zhu hat da was für euch!









Revision 390: The great Gatsby.js
Jul 09 2019 59 mins  
Schepp had the great opportunity to sit together with Jason Lengstorf to talk about Gatsby.js a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Our Sponsor This Revision is sponsored by Storyblok. Storyblok is a headless CMS that straddles the line between a CMS and a page builder like no other. Managing digital content with a CMS can be a difficult task. Without a visual preview, editors are often lost and need instruction even for simple changes. Storyblok has the user experience of a page builder with a modern, fully API-based architecture behind. That gives the developer freedom in choice of technology and the editor a self-explaining and intuitive interface. For the Gatsby.js lovers: There is also a tutorial on how to integrate Storyblok in Gatsby.js. You can read more about Storyblok and try their free plan, reach them on Twitter or in their live chat. Show notes [00:01:40] Gatsby.js There hasn’t been a static site generator that got so much buzz like Gatsby.js. Based on React and GraphQL, it not only takes the hottest new techniques, but bridges the gap between static sites and app like no other. Plug any content into any page, and get some nice HTML to deploy anywhere you like. Jason talks at lenghts about the big benefits from Gatsby.js, how it is build and why it is a little bit more than just a static site generator. Namely a application framework based on pregenerated content. We also talk about where Gatsby still needs improvement: How incremental builds shall slow down build times tremendously, and how investment in DX and learning will improve onboarding of new developers. Last, but not least, we talk about how Gatsby.js the open source project differs from Gatsby.js, the company, and how filling the shortcomings of traditional static site generators shall create a sustainable pricing model. Enjoy! Transcript The fine folks from Gatsby provided a transcript of the show. Click on the details button to see the whole show in text: The Transcript Schepp 00:00: Hello, and welcome to Working Draft, Revision 390. Peter 00:35: This Revision of Working Draft is brought to you by Storyblok. Storyblok is a headless content management system with an impressive visual editor that lets you change your webpage while you’re browsing. This is quite useful, but in my opinion, the most important thing about Storyblok is that it works with any technology stack that you can think of. Storyblok works with PHP, and also with Node and of course with Ruby and with Gatsby and with basically everything else. Peter 00:59: And it does not only work with just about everything, but there’s also documentation for just about everything. The Storyblok team will even write a tutorial just for you, and your strange tech stack, if whatever you’re working with is not covered by their existing documentation. Peter 01:13: You can try Storyblok for free for an unlimited time, as long as it’s just you as a single user. So get started now at storyblok.com. That’s story, B-L-O-K, .com. Our thanks to Storyblok for supporting this Revision of Working Draft. Schepp 01:29: As you might suspect, we will have a guest today. Usually, we’re not in English. We are two people. I’m Christian, and our guest is Jason Lengstorf. Hello. Jason Lengstorf 01:42: Hey, thanks for having me. Schepp 01:44: Thanks for coming. So Jason, it’s the first time that you appear in our podcast, so maybe you can tell the people who you are and what you’re doing. Jason Lengstorf 01:55: Sure. My name is Jason Lengstorf. I am the Head of Developer Relations at Gatsby. Gatsby is a React and GraphQL powered framework for building really high performance websites and apps that compile down to static assets, so they’re easy to deploy. Schepp 02:13: All right, and where do you live? So where are [...]




Revision 389: Portal-Element und neues JavaScript
Jun 20 2019 84 mins  
Unser allerliebstes weltumspannendes Internet-Konglomerat (das mit der großen Suchmaschine) hat mal wieder gekreist und neben einem fragwürdigen HTML-Element auch ein Video über diverse JavaScript-Neuerungen fabriziert. Hans und Peter nehmen sich der Sachen an. Unser Sponsor Diese Folge wird gesponsert von Flagbit aus Karlsruhe. Flagbit konzipiert, entwickelt und optimiert Online Shops für seine Kunden und sucht insbesondere Frontend Developer mit Angular und TypeScript Skills für die Entwicklung von (PWA) Storefronts. Mehr dazu erfahrt ihr unter flagbit.de/karriere/jobs. Schaunotizen [00:02:29] Das Portal-Element Google hat ein neues HTML-Element erfunden (Pressebericht, Artikel von Google, Spezifikation), das einen neuen, smooth animierten Weg zur Navigation durch Webseiten ermöglichen soll. Wir sind davon dezent verwirrt, denn sofern man sowas überhaupt haben möchte, könnte man auch eine SPA schreiben. Die trumpfarbene Kommentarspalte glaubt eine Tracking-Verschwörung seitens Google zu erkennen (nein, wirklich!), was wir nicht ganz entkräften können. Zum Abschluss erklärt Hans kurz, was das vorgeschlagene Portal-Element mit Portals in React gemeinsam hat (Spoiler: nix). [00:18:24] Neues von JavaScript In einem spontanen-erfrischenden Talk zeigen zwei Googler was es alles an Neuheiten in JavaScript der V8-Engine gibt. Peter erklärbärt im Expressverfahren was es mit (privaten) Class Fields, String.prototype.matchAll(), Numeric Separators, BigInt, neuen Intl-APIs (ausführlich in Revison 370 besprochen), Array.prototype.flat() nebst Array.prototype.flatMap(), Object.entries() nebst Object.fromEntries(), globalThis, Top-Level Await, Promise.allSettled() nebst Promise.any() sowie WeakRefs auf sich hat. Am Ende kommt er aber nicht umhin, die mangelnde Innovationskraft der JS-Fortentwicklung zu beklagen und wünscht sich (wie so oft) eine Möglichkeit, eigene Vergleichsalgorithmen für Objekte implementieren zu dürfen. Ein anderes seiner Wunsch-Features ist in seinem Lieblings-Programmiervideo Object-Oriented Programming is Bad an Stelle 41:42 erklärt.











Revision 384: Micro-Frontends
May 08 2019 73 mins  
Komplexe Web-Applikationen und -Seiten werden oft in unterschiedliche Domänen geteilt. Frontend wird klassisch als eine eigene Domäne angesehen. Doch was passiert, wenn man den Micro-Service-Gedanken auch ins Frontend überträgt und die Zuständigkeiten des Frontend-Codes auch an die korrekten Business-Domänen anpasst? Das klären wir gemeinsam mit Mark Lubkowitz der uns einen Einblick in seine Erfahrungen mit Micro-Frontends gibt. Unser Sponsor Diese Folge wird gesponsert von Arvato Systems. Arvato Systems ist ein international agierender IT-Spezialist und unterstützt namhafte Unternehmen bei der Digitalen Transformation. Mit mehr als 2.700 Mitarbeiter an weltweit über 25 Standorten entwickelt Arvato Systems als Team innovative IT-Lösungen, bringt seine Kunden in die Cloud, integriert digitale Prozesse und übernimmt den Betrieb sowie die Betreuung von IT-Systemen. Mehr dazu erfahrt ihr unter www.arvato-systems.de/arvato-systems/karriere oder kontaktiert Annika Pohl oder Nils Erdmann gerne unkompliziert via Xing. Schaunotizen [00:04:50] Micro-Frontends Nach einer Einführung in das Thema und das Beleuchten der Vor- und Nachteile von Micro-Frontends, beschäftigen wir uns mit den Erfahrungen auf dem Gebiet. Neben Mark, spricht auch Hans über seine Arbeit bei einem großen Online-Shop, bei dem der Gedanke der Micro-Frontends verfolgt wurde. Einige Links: Zalandos Micro-Frontend Software Facebook BigPipe [01:09:52] Keine Schaunotizen Developer Week Die Konferenz findet vom 24. bis 27. Juni in Nürnberg statt. Mark wird vor Ort sein und einen Vortrag halten. UI & CSS Day Am 13. & 14. Juni 2019 findet wieder der CSS Day in Amsterdam statt. Dieses Mal mit UI-Special.






Revision 381: Layered APIs und der Stand der Dinge bei HTTP/2
Mar 24 2019 60 mins  
In kleiner und gemütlicher Runde besprachen Stefan und Schepp, was es mit dem Konzept der Layered APIs auf sich hat und wie es derzeit so um HTTP/2 steht. Schaunotizen [00:01:20] Layered APIs Bei den Layered APIs handelt es sich um sowas wie eine im Browser mitgelieferte Standard-Bibliothek, welche neuen syntaktischen API-Zucker bereitstellt, ohne dazu auf neue API-Primitive zurückgreifen zu müssen. Die Idee dabei ist, den Entwicklern an den Standardgremien vorbei schneller bessere Werkzeuge zu liefern, die Sie zudem auch nur bei Bedarf hochfahren/laden können. Das hält die Browser schlanker. Da die neue APIs rein per JavaScript geschrieben sind und auf längst bestehenden APIs aufsetzen, können Browser, die diese Layered APIs nicht eingebaut mitbringen, diese Bibliotheken einfach aus dem Netz nachladen. Analog zu einem Polyfill. Dafür gibt es eine spezielle, neue und rückwärtskompatible Modul-Syntax. Der erste Kandidat für eine Layered API ist der KV Storage, den man jetzt per Origin Trial Verfahren auf seine Besucher loslassen kann. [00:26:18] The Right Way to Bundle Your Assets for Faster Sites over HTTP/2 Unser zweites Thema befasste sich nach längerer Zeit mal wieder mit HTTP/2. Anlass war der oben verlinkte Artikel, in dem getestet wurde, inwiefern veränderte Bundling-Strategien zu besserer Performance führen, und wo Dinge sich ins Negative verkehren. Das ist insofern relevant, als dass mittlerweile gut 50% aller Webseiten mit dem Prototoll ausgeliefert werden. Wir fanden außerdem beiläufig heraus, dass rund 75% aller Webseiten auf HTTPS laufen. [00:54:50] Keine Schaunotizen swc swc, der „speedy web compiler“, ist ein in Rust geschriebener, besonders schneller JavaScript-Transpiler, der laut eigener Aussage Feature-technisch mit Babel gleichauf liegt. sucrase sucrase ist ein Babel-Fork und verfolgt ähnliche Ziele. Diese werden in diesem Fall dadurch erreicht, dass verlangsamende, aber auch kaum benötigte Features aus Babel wegfallen. Darunter das Rückkompilieren zu älteren ES-Versionen. Dadurch wird sucrase also eher zu einem Metasprache-nach-Current-ES-Compiler. Feature Policy Playground Der Feature Policy Playground möchte eine Art „Can I Use“ für Feature Policy Features sein. Es geht zum einen um den aktuellen Browser-Support, als auch darum, auf die entsprechenden Explainer-Dokumente zu verlinken.


Revision 380: Chrome-Devtools-Extension-Entwicklung
Mar 20 2019 72 mins  
Eine Rarität! Das komplette Podcast-Kernteam vereint in einer Revision. Keine ganz so große Rarität: der Löwenanteil der Sprechzeit entfällt auf Peter, der einen Einblick in die Entwicklung einer Chrome-Devtools-Extension gibt. Unser Sponsor Diese Folge wird gesponsert von Flagbit aus Karlsruhe. Flagbit konzipiert, entwickelt und optimiert Online Shops für seine Kunden und sucht insbesondere Frontend Developer mit Angular und TypeScript Skills für die Entwicklung von (PWA) Storefronts. Mehr dazu erfahrt ihr unter flagbit.de/karriere/jobs. Schaunotizen [00:02:40] Chrome-Devtools-Development Für Warhol, ein Joint Venture von Peter und Hans, entsteht eine Browser-Extension, von deren Entwicklung Peter lang und breit berichtet. Zu den Herausforderungen zählt die Verteilung der einzelnen Extension-Bauteile über viele verschiedene Browsing Contexts, die Verwendung von TypeScript (@types/chrome hilft) und die nicht besonders strukturierte API-Dokumentation (für Extensions allgemein und für Devtools im Besonderen), in deren Angesicht Stack Overflow Gold wert ist. [01:09:02] Keine Schaunotizen Mask Compositing: The Crash Course Die CSS-Magierin Ana Tudor führt in die Geheimnisse von Mask Composition ein. Cache-Control for Civilians Cache-Control Header so erklärt, dass man es auch als Nicht-Performance-Nerd versteht. @pika/web JavaScript-Pakete ohne Buildprozesse und sonstigen Overhead im Browser benutzen! Ganz wie früher! Baldower Aus der Rubrik „Shameless Plug“: die Musik von Tobi Lessnow













Revision 376: Angular, Angular, Angular!
Feb 20 2019 78 mins  
In dieser Revision ließen sich Schepp, Peter und Stefan von Johannes Busch (@jomungand) alles über aktuellen Angular-Angelegen ausrichten. Schaunotizen [00:01:20] Angular Die Sendung beginnt mit Geschichten aus dem Krieg: Schepp erzählt von seinen Angular-Anfängen und wir hören nichts gutes über die schlechte alte Zeit, vor allem die Migration von V1 (AngularJS) zu V2. Danach beginnen wir uns halbwegs systematisch in die Grundkonzepte von Angular einzufuchsen (Module, Provider, Templates), spechen ausführlicher über TypeScripts Decorators und die heutige Angular-Compiler-Pipeline (sowie dessen Vorgänger AtScript). Weiter geht es mit Angular-Templates, Direktiven, Syntax und Data Binding. Beim Thema Datenverbeitung kommen wir auf Redux (im Angular-Kontext) sowie ngrx mit RxJS sowie diverse Alternativen zu sprechen. Zwischendrin geht es natürlich auch immer wieder um Upgrades und Breaking Changes sowie die Konkurren (v.a. React und Ember inkl. Next und Nuxt, Googles internes Wiz Framework und Exoten wie Stimulus). Als gern verwendete Third-Party-Libs listet Johannes unter anderem Angular Material, das Component Dev Kit und Nx Workspace auf. Über die Themen Server-Side Rendering und Lazy Loading kommen wir auf Ivy, die neue aber bald verfügbare Rendering Engine von Angular zu sprechen. Zum Einstieg in die Angular-Welt empfiehlt Johannes neben den offiziellen Docs das Programm von Workshops.de, die Sandbox von StackBlitz, die Angular Checklist sowie Konferenzen in Deutschland, Belgien und nordischen Gefilden.


Revision 375: Frontend-Testing
Feb 11 2019 65 mins  
Hans und Peter durften zum wiederholen Male Vanessa Böhner als Gast begrüßen (zuletzt in Revision 367 dabei, außerdem mit Webseite und Twitter ausgerüstet) und diesmal über alle Formen und Spielarten des (Frontend-) Testings sprechen. Schaunotizen [00:00:52] Frontend-Testing Wir quatschen über die tägliche Praxis von Unit Testing, End-To-End-Test, Integration Tests und Snapshot-Tests mit Jest und JSDOM aber auch über Paradigmen wie Test Driven Development und Regressionstests. Den Wert von Tests als Dokumentation stellen wir tatsächlicher Dokumentation und Code-Kommentaren gegenüber. Anhand der Test-Pyramide besprechen wir den Wert unterschiedlicher Testverfahren (z.B. Monkey Testing vs. End-to-End-Tests mit Tools wie Selenium, Cypress und Puppeteer sowie seiner Firefox-Variante), Testing bei Oracle und den zweifelhaften Wert von Test-Coverage. Vanessa empfielt die diversen Werke von Kent C. Dodds als Einstieg in die Welt des JS-Testings. Zum Ende hin streifen wir kurz Visual Regression Testing, ziehen den naheliegenden Vergleich zwischen Softwaretest und Sport und kommen auf das allseits beliebte Thema des Reinregierens von „denen da Oben“ in die Software-Entwicklung zu sprechen. [00:59:32] Keine Schaunotizen ai-driven Podcast Die Ankündigung aus Revison 362 ist wahr geworden: Tobias‘ Podcast über KI ist da! Veranstaltungen mit Vanessa Wer Vanessa live erleben möchte hat dazu in den nächsten Wochen in Hamburg in zweimal in München Gelegenheit!

















Revision 370: Internationalisierung und Lokalisierung
Dec 23 2018 69 mins  
Zu fünft griffen Peter, Hans, Schepp, Rodney und Mehrfach-Gast Sebastian Golasch (Web, Twitter) die Themen Internationalisierung und Lokalisierung frontal an. Rodney und Sebastian konnten dabei auf ihrem reichen Erfahrungsschatz aus einem großen IOT-Projekt schöpfen und plaudern munter drauflos. Schaunotizen [00:01:28] I18N und L10N Nachdem wir die Begriffe Internationalisierung (I18N, technische Vorbereitung einer Software für Lokalisierung) und Lokalisierung (L10N, Anpassung von Sprache, Währung und kulturellen Feinheiten) voneinander abgegrenzt haben, geht es sofort in die diversen technischen Feinheiten. Wir lernen, dass Apple und übereifrige Webfont-Kompressoren es mit dem Griechischen Alphabet nicht so genau nehmen und das was das alles mit dem Versal-Eszett zu schaffen hat. Standards zum identifizieren und benennen von Sprachen und Regionen wie BCP 47, ISO 639 und ISO 3166-1 kommen ebenso zur Sprache wie die Unicode-CLDR (gibt es auch im JavaScript-Standard mit okayer Browserunterstützung und einem Polyfill sowie als NPM-Package mit Ergänzungen wie RelativeFormat) als Fundament jedes Lokalisierungs-Versuchs. Neben allen technischen Nerd-Details geht es auch um die ganz praktischen Hürden beim Übersetzen, Software wie Weblate und Transifex, das originelle ICU Message Format (Parser-Package auf NPM) und die oftmals nur mittelguten eingebauten I18N-Module der diversen Frontend-Frameworks. Zum Abschluss drei Talk-Empfehlungen zum Thema: ENTSCHULDIGEN YOU, PARLEZ VOUZ JAVASCRIPT? von Sebastian Jen Simmons über Writing Modes 180 Degrees Eastvon Holger Bartel















No review available yet...