Working Draft

Wöchentlicher News-Podcast für Webdesigner und -entwickler

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Dort könnt Ihr uns Processing-Time kaufen.

Alternativ findet Ihr uns jetzt auch auf Patreon:

Become a Patron!

Ihr sucht neue Kollegen? 🤔 Wir suchen Sponsoren!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Equipment und Tools, die nicht kostenlos sind. Und jede Folge kostet Zeit: Aufnehmen, Schneiden und Shownotes schreiben, Gäste und Termine koordinieren.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir auch Herausforderungen im Hosting zu bewältigen.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wir glauben, dass unser Podcast eine gute Plattform ist, um darüber gleichgesinnte Programmierkollegen als Verstärkung für Euer Team zu finden. Wenn Ihr das auch so seht, dann sprecht doch mal mit Euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 437: 15 Jahre MDN!

12. August 2020 | 2 Kommentare

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.

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 436: Frontend Unit-Testing

5. August 2020 | 3 Kommentare

Vor einiger Zeit fragten wir auf Twitter, wer von euch eigentlich Tests im Frontend schreibt. Die Antwort war mehr als verblüffend und somit geht’s in der neusten Revision Working Draft mal wieder um Testing, um genau zu sein Unit-Testing im Frontend. Unser Gast Tim Seckinger gibt uns noch mal eine Übersicht über Testing im Allgemeinen und baut auf der Revision 375 auf, in der wir auch über Testing gesprochen haben.

Schaunotizen

[00:00:28] Frontend Unit-Testing
Los geht es mit einer kurzen Betrachtung des Themas Testing im Allgemeinen: Welche Arten des Testing gibt es eigentlich und wozu braucht man was? Ein kleiner Ausflug, welche Unterschiede Unit-Tests zu Integration-Tests haben, darf nicht fehlen. Schließlich landen wir beim Thema CI/CD und wie man Testing am besten in eine Pipeline integrieren kann. Das Thema Test Driven Development schneiden wir an und kommen schließlich zu dem Schluss, dass es noch so viele weitere Themen gibt, über die wir reden müssen und beschließen deshalb eine zweite Revision zum Thema, die schon bald folgen wird.

[00:00:00] Keine Schaunotizen

Jest Contributor
Jest sucht Contributor, die helfen das Projekt voran zu treiben und Bugs lösen. Wenn du dich berufen fühlst, schau mal auf der GitHub-Seite vorbei. Dort gibts weitere Infos.

Revision 435: Open, Decentralized, Federated und Indie

28. Juli 2020 | Keine Kommentare

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

21. Juli 2020 | 2 Kommentare

Beinahe schon Tradition: Stefan und Peter analysieren die nächste TypeScript Version im Detail. Das erwartet euch in Version 4.

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 433: Eleventy

15. Juli 2020 | Keine Kommentare

Kahlil und Stefan gehen in eine Late-Night-DadOps-Episode, um über Eleventy und moderne, statische Seitengeneratoren zu reden. Latenzen und Lags inklusive!

Schaunotizen

[00:02:12] Eleventy
Eleventy — oder kurz 11ty — ist ein neuer, Node-basierter, statischer Seitengenerator der gerade in der Jamstack Community ziemlich viel Hype und Liebe erfährt. Von außen ähnlich dem Urgestein Jekyll, hat 11ty einige Dinge unter der Haube, die irrsinnig interessant sind und Entwickler sehr produktiv machen. Das Arbeiten mit Kollektionen, die mächtigen Pagination-Features (mit denen man so Dinge wie Vorschaubilder generieren kann) und die Mächtigkeit der unterschiedlichen Template-Systeme machen 11ty ein Schweizer Messer mit niedriger Lernkurve. Wir reden außerdem über das Lernen durch Code (Stefan hat sehr viel von Chris Coyiers Conference Website und dem Template von Max Böck gelernt), und über Schreiben, Veröffentlichen, und Lernen in der Öffentlichkeit.

Revision 432: Firefox und seine Devtools

7. Juli 2020 | 1 Kommentar

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 431: 25 Jahre SelfHTML

30. Juni 2020 | Keine Kommentare

Anlässlich seines 25-jährigen Jubiläums und weil einige von uns ohne niemals zur Webentwicklung gekommen wären, luden wir Matthias Scharwies und Gunnar Bittersmann (bittersmann.de / @g16n) vom SelfHTML-Projekt in die Sendung ein.

Schaunotizen

[00:00:27] SelfHTML wird 25
Mit SelfHTML hat Schepp Ende der Neunziger Webseiten Coden gelernt und Rodney war damals sogar Contributor und Teil der SelfHTML-Community. Und nicht zuletzt liefen Schepp und Rodney sich im SelfHTML-Forum überhaupt das erste Mal über den Weg. Mit Matthias und Gunnar ließen wir die Geschichte des Projekts Revue passieren, von seinen Anfängen auf Diskette, dem später davon abgeleiteten Buch, von den Schwierigkeiten, so ein Projekt ohne Versionierungssystem mit mehreren Leuten zu bearbeiten und auf Stand zu halten, bis hin zur großen Implosion und der anschließenden Auferstehung mit modernem, handgeschriebenen Forensystem. Wir sprachen außerdem über die tolle Community und die nicht minder coolen, jährlichen „SelfTreffen“.

Revision 430: Berufseinstieg per Coding Bootcamp

23. Juni 2020 | 2 Kommentare

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 (marie.vonderwehl@sumcumo.com / @MarWehl), die ein solches Bootcamp im vergangenen Jahr bei neue fische in Hamburg durchlaufen ist, sowie Franziska Gertz (franziska.gertz@sumcumo.com / @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 429: HTML5 in Vergangenheit, Gegenwart und Zukunft

16. Juni 2020 | Kommentare deaktiviert für Revision 429: HTML5 in Vergangenheit, Gegenwart und Zukunft

Schepp, Kahlil und Peter diskutierten in epischer Breite die Erfolge und Misserfolge von HTML5 und viele andere Dinge

Schaunotizen

[00:01:40] HTML5 in Vergangenheit, Gegenwart und Zukunft
Vor 10 Jahren erblickte Peters HTML5-Buch das Licht der Welt, woraufhin er ein HTML5-Fazit verfasste. Diese Revision sollte die Talkshow-Audioversion des Artikels werden, doch wir sprachen am Ende nicht nur über HTML-Parser, SGML vs. HTML vs. XHTML, HTML5-Formularvalidierung sowie Video- und Audio-Elemente, sondern vor allem über TinyMCE, PWA, Service Worker, Push Notifications, Abstraktion und Über-Abstraktion, Unknown unknowns in Webstandards, das Extensible Web Manifesto, Performance, Podcasts und Musicals.

Revision 428: Deno

9. Juni 2020 | 2 Kommentare

Hans und Rodney unterhalten sich über Deno, das ziemlich genau zwei Jahre nach dem ersten Commit in Version 1.0 veröffentlicht wurde.

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