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 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 | Keine Kommentare

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!

Revision 425: Unsichtbares HTML

19. Mai 2020 | Keine Kommentare

Nachdem Peter, motiviert durch Warhol, mal wieder einige Zeit im absurden Paralleluniversum semi-relevanter Teile der HTML-Spezifikation verbracht hatte, musste er in dieser Revision Schepp und Hans davon im Detail erzählen.

Schaunotizen

[00:00:30] Welche Elemente sind eigentlich immer unsichtbar?
Auf der Suche nach permanent unsichtbaren HTML-Elementen kommen wir zu manch überraschender Erkenntnis. Vieles, das wir für unsichtbar hielten, kann sichbare Effekte haben, anderem hingegen ist auch mit dem größten CSS-Brecheisen (das wäre die content-Eigenschaft) keine optische Nebenwirkung zu entlocken. Als wahrhaft unsichtbar erweisen sich ausschließlich <audio>-Elemente ohne controls-Attribut, <input type="hidden">, <noscript> wenn Scripting aktiviert ist, <form>-Elemente, die direkte Kinder von <table>, <thead>, <tbody>, <tfoot> oder <tr> sind, sowie Inhalte von Replaced Elements (d.h. <source> und <track> in <video> bzw. <audio> und Fallback-Inhalt in unterstützen <video>-, <audio>– und <canvas>-Elementen).

Flattr this!

Revision 424: Tools!

14. Mai 2020 | Keine Kommentare

Mit Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, plauderten Schepp, Hans und Peter über Webdev-Tools im Allgemeinen und die Auswirkungen von Tools auf den Webdev-Alltag im Besonderen.

Schaunotizen

[00:00:30] Tools
Stefan hat Tiny-Helpers in die Welt gesetzt und hat daher seine ganz eigene Sicht auf Webdev-Tools aller Art. Wir plaudern über Next.js PHP, Typescript, Ant, Yeoman, Grunt, Gulp, Webpack, Rollup, NVM, Parcel, Abenteuer mit Google Maps und OpenDeviceLab.com, Rome, Snowpack, Algolio, die Vor- und Nachteile des Einkaufs bei Cloud-Händler und zu guter letzt über Stefans liebste Tiny Helpers: Namae, Fonty und den CSS-Grid-Generator. Die Workingdraft-Crew empfiehlt ihrerseits die Online-Regex-IDEs Regex101 und Regexr.

Flattr this!

Revision 423: Reactive Systems

5. Mai 2020 | Kommentare deaktiviert für Revision 423: Reactive Systems

Hans und Peter lassen sich in dieser Revision von Roland Kuhn (Web, Twitter), Autor von Reactive Design Patterns alles über Reacive Systems und Webtechnologie in Industrieanwendungen erzählen.

[00:00:29] Schaunotizen

Reactive Systems
Rolands erzählt von seiner Reise, die ihn über den Umweg der Raumfahrt zu Scala, Akka schließlch zum Reactive Manifesto und zur Gründung von Actyx führte. Wie sprechen darüber, wie Web und P2P mit Industrieanwendungen zusammengehen, kommen um das Thema Blockchain nicht herum und sprechen über das Dat-Protokoll, IPFS, den Beaker Browser, Event Sourcing (vgl. Revision 314) Lamport-Uhren, reaktive Programmierung sowie CouchDB/PouchDB (siehe Revision 175).

Flattr this!

Revision 422: Web Worker, ComLink und WASM

28. April 2020 | Kommentare deaktiviert für Revision 422: Web Worker, ComLink und WASM

Nachdem es schon wieder unglaubliche zwei Jahre her ist, dass wir mit ihm über das „Actor Model“ reden durften, war es nun höchste Eisenbahn, Surma wieder einzuladen und über aktuelle Entwicklungen im (multigethreadedten) Web zu plaudern.

[00:00:29] Schaunotizen

Web Worker
Eines von Surmas Steckenpferden ist es, alles was nicht bei „Drei!“ auf dem Baum ist in separate Threads auszulagern. Wir sprechen über Sinn und Zweck dieser Heranangehensweise am Beispiel der Projekte Squoosh und Proxx des Chrome Developer Relations Teams (siehe auch die Google Chrome Labs auf Github). Wir erfahren, dass das Ziel dabei weniger ist, mehr Geschwindigkeit auf ohnehin schnellen Plattformen herauszuholen, sondern vielmehr dem UI-Thread auf Einsteiger-Hardware den Rücken frei zu halten.
ComLink
Einer der Nachteile von Web Worker ist die Tatsache, dass sie anstrengend im Umgang sind. Moderne Programmierparadigmen und Surmas Open-Source-Projekt ComLink schaffen hier allerdings Abhilfe. Und auch wenn das Motto „Comlink makes WebWorkers enjoyable“ lautet, so lässt sich diese Bibliothek auch ganz prima für eine angenehme Kommunikation mit Service Workern oder über Frame-Grenzen hinweg einsetzen (also im Prinzip alles, was auf das Message-Interface setzt).
Wasm, WASI und Interface Types
Surma kennt sich aber nicht nur mit elegant programmierbarem Multithreading aus, sondern auch mit WebAssembly, kurz: Wasm. So nutzt unter anderem das eingangs erwähnte Squoosh unter der Haube von C++ nach Wasm portierte, gebräuchliche Bildkompressoren wie MozJPEG oder OptiPNG. Wir unterhielten uns außerdem über kommende Neuerungen wie Interface Types, sowie nochmal über WASI (höre dazu auch Revision 394). Und wir sinnierten über den Grund, weswegen es so aussieht, als ob Wasm schaffen wird, was Java und Silverlight nicht gelungen ist, nämlich das langersehnte, universelle Runtime-Environment zu werden.

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

Flattr this!