

Working Draft
Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer
Working Draft ist der deutschsprachige Podcast für Frontend-Entwicklung, Webdesign und UI Engineering.
Bei uns geht’s um HTML, CSS, JavaScript, Frameworks wie React, Vue und Angular, Responsive Webdesign, User-Interfaces, moderne UI-Patterns, Barrierefreiheit, Tooling, Design-Systeme, Webstandards und mehr.
Unser Team besteht aus erfahrenen Frontend-Entwickler:innen aus Deutschland und Österreich – mit Gästen aus der Praxis, die regelmäßig Einblicke in aktuelle Tech-Themen geben. Ob neue CSS-Features, die Zukunft von JavaScript, KI im Frontend-Workflow oder einfach gute UI-Erfahrungen: Wir reden drüber – jede Woche neu.
Bei uns geht’s um HTML, CSS, JavaScript, Frameworks wie React, Vue und Angular, Responsive Webdesign, User-Interfaces, moderne UI-Patterns, Barrierefreiheit, Tooling, Design-Systeme, Webstandards und mehr.
Unser Team besteht aus erfahrenen Frontend-Entwickler:innen aus Deutschland und Österreich – mit Gästen aus der Praxis, die regelmäßig Einblicke in aktuelle Tech-Themen geben. Ob neue CSS-Features, die Zukunft von JavaScript, KI im Frontend-Workflow oder einfach gute UI-Erfahrungen: Wir reden drüber – jede Woche neu.
Episodes
Mentioned books

Dec 31, 2019 • 58min
Revision 406: Standort Linz – ScriptConf
Kahlil, Hans und Peter erfahren in dieser Revison von Stefan alles über die ScriptConf, die JavaScript-Konferenz in Österreichs Tech-Hub Linz.
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.

Dec 22, 2019 • 1h 3min
Revision 405: Rollup.js
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.
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.)

Dec 18, 2019 • 1h 28min
Revision 404: Bleeding-Edge JavaScript
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.
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.

Dec 10, 2019 • 41min
Revision 403: Meta-Frameworks
Schepp, Kahlil und Hans quatschen über APIs, die sich von Frameworks-Features zu Browser-APIs entwickeln.
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.

Nov 19, 2019 • 1h 5min
Revision 402: TypeScript 3.7
Hans, Schepp und Stefan analysieren ein Best-Of der kommenden TypeScript Version 3.7.
Schaunotizen
[00:00:59] TypeScript 3.7
Mittlerweile kommen ausführliche TypeScript-Revisionen halbjährlich beim Working Draft. Vor ca. einem Jahr (und 50 Revisionen) haben sich Hans, Peter und Stefan ausführlich über Version 3.0 unterhalten. Laut Hans sogar episch! Ein halbes Jahr und 30 Revisionen später gab’s eine Einführung in TypeScript im Backend. Weitere 20 Revisionen später kommen nun eine Reihe fantastischer Features in Version 3.7 an: Assertion signatures, nullish coalescing, optional chaining, recursive types, top-level await und ES private fields. Eine ganze Reihe an Dingen, von der sich alle recht begeistert zeigen. Wir geben Infos, Hintergrund, und streuen noch einige eigene TypeScript Erfahrungen mit ein. Mittlerweile ist es nämlich bei uns allen angekommen. Und wird wohl auch nicht mehr so schnell wegkommen.
Keine Schaunotizen
Fettblog
Stefans Blog hat sich zur TypeScript-Ressource verwandelt.
Understanding Type Predicates
Neben Stefans Artikel zum Thema etwas aktuelleres auf Dev.to.

Nov 15, 2019 • 17min
On Tour @ #thinkabout19 5/5 mit Anika Zeidler
Dieses Interview ist einer von 5 Teilen unserer Serie On Tour @ #thinkabout19.
Im Mai waren wir mal wieder auf einer neuen Konferenz in Köln-Ehrenfeld zu gegen, die sich neben Design- und Development-Themen auch stark mit der Thematik beschäftigt, wie Software unsere Gesellschaft beeinflusst.
Die Zwei-Track Konferenz schaffte es mit einer sehr guten Organisation und viel Liebe zum Detail eine gesamtheitlich starke Performance abzugeben und eine hohe Messlatte für eine nächste Episode zu setzen.
Und das Beste: Die 2020er Ausgabe steht in den Startlöchern! Die ersten Sprecher sind angekündigt und der Ticketverkauf für die am 4. und 5. Juni 2020 stattfindende Konferenz ist gerade frisch gestartet: https://think-about.io
Anika Zeidler: Algorithmic Bias – Diskriminierung durch Algorithmen erkennen und vermeiden
Der Einfluss von Code auf unsere Gesellschaft ist durch Machine Learning und das Design der damit verbundenen Algorithmen stärker denn je. Jedes Stück Software, dass geschrieben wird, entsteht mit einem bestimmten „Bias“, einer Art Vorurteil, der durch die Zusammensetzung des Projektteams stark beeinflusst wird, mein Anika. Welche Schritte notwendig sind um diesen Bias zu minimalisieren erläutern wir gemeinsam.

Nov 6, 2019 • 55min
Revision 401: React, Redux, Hooks und HOCs
Hans und Peter diskutieren über Patterns in React!
Schaunotizen
[00:01:25] React, Redux, Hooks und HOCs
Redux-Hooks werden ein offizielles Feature, was Hans und Peter zu einer Grundsatzdiskussion über Patterns in React verleitet. Hooks (siehe Revision 385) wurden vor nicht allzulanger Zeit in React eingeführt und haben sich seither in diversen Code Bases breit gemacht – nach einhelliger Meinung (zumindest im Podcast-Studio) mit nicht nur positiven Auswirkungen. Wir diskutieren über verschiedene Patterns rund um State Management in React, Higher-Order Components und Mittel und Wege, Hook-Benutzung von den Nachteilen zu befreien. Hans schlägt hierfür ein Architekturpattern im Stile von Flux vor.

Oct 24, 2019 • 1h 54min
Revision 400
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 …

Oct 21, 2019 • 1h 29min
Revision 399: Project Fugu
Schepp, Hans und Stefan im Gespräch mit Thomas Steiner von Google. Seines Zeichens Dev Advocate für Project Fugu.
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.

Oct 14, 2019 • 1h 17min
Revision 398: Refactoring mit (und zu) TypeScript
Kahlil und Hans erzählen von Refactoring-Projekten mit und zu TypeScript
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.