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.

On Tour @ #thinkabout19 5/5 mit Anika Zeidler

15. November 2019 | Keine Kommentare

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.

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.

Flattr this!

Revision 401: React, Redux, Hooks und HOCs

6. November 2019 | 2 Kommentare

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.

Flattr this!

Revision 400

24. Oktober 2019 | 2 Kommentare

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 im Revision 36 („Ohne Jan, aber mit Delay“) und Kahlil erstmals im 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-Framworks in Frameworks in Vergangenheit, Gegenwart und Zukunft (ggf. powered by WASM) zu sprechen und wieder mal etwas technischer zu werden …

Flattr this!

Revision 399: Project Fugu

21. Oktober 2019 | Keine Kommentare

Schepp, Hans und Stefan im Gespräch mit Thomas Steiner von Google. Seines Zeichens Dev Advocate für Project Fugu.

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.

Flattr this!

Revision 398: Refactoring mit (und zu) TypeScript

14. Oktober 2019 | 2 Kommentare

Kahlil und Hans erzählen von Refactoring-Projekten mit und zu TypeScript

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.

Flattr this!

On Tour @ #cssday 2019 4/4 with Elika J. Etemad (aka. Fantasai) and Florian Rivoal

29. September 2019 | Keine Kommentare

This interview is part of our four-part series On Tour @ #cssday.

[00:09:31] Elika J. Etemad (Fantasai): Line Layout & Vertical Rhythm and Florian Rivoal: Line Breaking

Elika and Florian both work a lot on CSS Specifications. We discuss the different topics of Line Breaking and Vertical Layout for text which were the talks of the both speakers. After some historical background we speak about the challenges the W3C Experts face when writing specifications and how they evolve over time.
Both Elika and Florian are also members of the W3C Advisory Board. They give us a short insight in what the board does and how the processes at W3C affect their work.

About the conference

In June 2019 we visited beautiful Amsterdam again to be part of CSS Day 2019 (with a UI special) taking place at Compagnietheater. CSS Day is organised since 2013 by Peter-Paul Koch, Krijn Hoetmer, and Martijn van Duuren – the people behind performance.now(), Mobilism and dsgnday.

This year’s edition featured great CSS talks going into details of how CSS properties like word-break work and talks about more design focused topics like how we can design better interfaces.
We’re sure there will be another CSS Day next year. So stay tuned.

Flattr this!

Revision 397: Preact (und Code-Golfing)

25. September 2019 | Keine Kommentare

Mit Code-Golf-Großmeister Marvin Hagemeister (Webseite, Twitter) hatten wir in dieser Revision das Vergnügen, das Warum und das Wie von Preact zu ergründen.

Schaunotizen

[00:01:00] Preact
Preact (Github) ist ein 3kb-Front-Framework mit einer React-artige API. Wegen des schon immer ausgezeichneten Supports für Server-Side-Rendering fand Marvin erst Interesse an Preact und dann uns seinen Weg in das ca. 5 akive Personen zählende Kern-Team. Wir kommen natürlich nicht umhin, die Mittel und Wege zum 3kb-Framework zu besprechen. Zum Ziel führen (neben dem Luxus, anders als React nicht jede Zeile Code von Facebook unterstützen zu müssen) der Verzicht auf ein eigenes Event-System, Anpassungen im Code-Stil (z.B. Prototypen statt Klassen) und natürlich Code-Golf. Mittlerweile hat Preact als Unterbau von unter Anderem Google AMP, Smashing Magazine und dev.to allerdings selbst diverse Großprojekte zu supporten. Wir besprechen DOM-Diffing vs. Virtual-DOM-Diffing, Fragen der React-Kompatibilität, Performance, das Addon-System von Preact (mit Projekten wie preact-router und wouter), Minifizierer (Google Closure Compiler und Terser), Zukunftfragen und natürlich das Dasein als Open-Source-Contributer-Dasein in Kombination mit einem (fast) normalen Job.

Flattr this!

On Tour @ #thinkabout19 4/5 mit Christopher Grebs

13. September 2019 | Kommentare deaktiviert für On Tour @ #thinkabout19 4/5 mit Christopher Grebs

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.

[00:01:07] Christopher Grebs: Maintain your ancient projects without getting lost

Wir haben uns mit Christopher über seine Erfahrungen in der fast 10 Jahre alten Code von add-ons.mozilla.org unterhalten. Er gab uns einige Einblicke über die Ansätze von Refactorings und welche Methoden ein guter Ansatz zum Umgang mit historisch entstandenen Code sind. Wir teilen auch unsere eigenen Erfahrungen.

Flattr this!

Revision 396: Elm und F# – Funktionale Programmiersprachen im Browser

5. September 2019 | 1 Kommentar

Hans, Schepp und Stefan bekommen Besuch von Daniel Bachler, der uns über Front-End Entwicklung mit rein funktionalen Programmiersprachen aufklärt.

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.

Flattr this!

Revision 395: ProseMirror und TipTap

30. August 2019 | Kommentare deaktiviert für Revision 395: ProseMirror und TipTap

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.

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.

Flattr this!