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

Flattr this!

Revision 434: TypeScript 4.0

21. Juli 2020 | 1 Kommentar

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!

Flattr this!

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.

Flattr this!

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.

Flattr this!

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

Flattr this!

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!

Flattr this!

Revision 429: HTML5 in Vergangenheit, Gegenwart und Zukunft

16. Juni 2020 | Keine Kommentare

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.

Flattr this!

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.

Flattr this!

Revision 427: CSS Next

2. Juni 2020 | 3 Kommentare

Schepp führt Hans und Peter durch eine Präsentation über neue CSS-Features, die er für das Meetup Web Design Cologne vorbereitet hatte.

[00:00:29] Schaunotizen

CSS Next
Ungeachtet der komplizierten Frage, ob es so etwas wie ein CSS4 gibt oder geben sollte (siehe auch Revision 420) starten wir einen wilden Ritt durch neue CSS-Features! Wir sprechen über LCH-Farben, neue Lösungen für Floats und Clearfixes, attr() 2.0, Seitenverhältnisse (auch für Video) Scrollbar-Styling (mit Shoutout an den IE6) und Houdini, speziell das Typed CSSOM und die Paint-API. Mehr neue Features findet ihr unter cssdb.org und in Schepps Präsentation (Chrome Canary empfohlen).

Flattr this!

Revision 426: gastliches Glücksrad mit Stefan Judis

26. Mai 2020 | Kommentare deaktiviert für Revision 426: gastliches Glücksrad mit Stefan Judis

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 <track>-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] <meter> und <progress>
Warum gibt es Extra-Elemente für Fortschrittsbalken und Klapp-Dialoge a la <details>, 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?

Flattr this!