

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

Jun 17, 2018 • 43min
Revision 344: ReactPHP
Hans und Peter fragten in dieser Revision Christian Lück (Web, Github, Twitter), seines Zeichens einer der Maintainer von React PHP, zu seinem Lieblingsthema aus.
Schaunotizen
[00:00:43] ReactPHP
ReactPHP ist ein Open-Source-Projekt, das aus Node.js bekannte Konzepte (v.a. asynchrones IO) für PHP umsetzt. Ein Use Case hierfür wäre alles, was mit Kommunikation und Datenströmen zu tun hat, für 0815-Webseiten eignet sich ReactPHP nicht so sehr (und es würde bei traditionellen Hostern auch nicht ohne weiteres funktionieren). Und so quatschten wir über Streaming-APIs, Event Loops, Streams, Promises, synchrone und asynchrone Funktionen in PHP …

Jun 15, 2018 • 1h 7min
Revision 343: Neue Features für JavaScript
Inspiriert von einem vergleichsweise dünnen Artikel über ein paar unspektakuläre JS-Neuerungen diskutierten Schepp, Hans, Stefan und Peter ihre persönlichen Favoriten in der JS-Feature-Pipeline.
Schaunotizen
[00:00:12] Kommende JavaScript-Features
Wir bespechen sowohl kommende Features die wir gut finden als auch einige, die uns nicht zusagen. Im einzelnen kommen zur Sprache:
der Safe Navigation Operator (auch bereits bekannt aus CoffeeScript o.Ä.)
der Nullish Coalescing Operator (bekannt aus PHP o.Ä.)
der Pipeline Operator (bekannt aus Elm)
Asynchrone Iteration
Private Methoden und private Felder für Klassen
das Global-Proposal
Decorators
BigInt
Dynamisches Import und Metainformationen für Imports
Unterstriche in Zahlen
flatMap
Observables(bekannt aus u.A. RxJS)
Außerdem erträumt sich Peter Selbstdefinierte Equality-Logik, ist aber pessimistisch

Jun 13, 2018 • 60min
Revision 342: Was gibt es Neues in Laravel?
Nachdem wir in Revision 147 schon einmal über das PHP Framework Laravel gesprochen haben, dachten wir uns, es sei langsam mal wieder Zeit für eine Auffrischung.
Deshalb ist in dieser Revision Johannes Pichler unser Gast und wir sprechen gemeinsam über die Neuerungen und technischen Gegebenheiten von Laravel.
Schaunotizen
[00:02:00] Laravel
Johannes erklärt, was es seit der Revision 147 alles Neues zum Thema Laravel gibt. Wir sprechen über Bootstrapping, Facades, Collections, Events, Queues und vieles mehr.
Anhand eines praktischen Beispiels hangeln wir uns an einer Umsetzung einer Applikation entlang:
REST Schnittstelle fürs Frontend
Datenhaltung in DB mit Produkten, User, Metadaten
User Daten kommen von Schnittstelle und können gecacht werden
Übergeben von Daten an Payment Schnittstelle
Darüber hinaus sprechen wir über die Möglichkeiten, Laravel fürs Frontend einzusetzen.
Weitere Links:
Eloquent ORM
Spark – User Verwaltung
Bezahlungsmethode
Lumen – ein Micro-Service Framework
Artisan – das Commandline Interface
Horizon – Redis Monitoring Tool
Dusk – End to End Testing
[00:55:14] Keine Schaunotizen
Laravel Docs
Viele gute Videos zum Thema Laravel und rund ums Thema. Ideal für jeden Einsteiger und auch Fortgeschrittene.
Laracasts
Viele gute Videos zum Thema Laravel und rund ums Thema. Ideal für jeden Einsteiger und auch Fortgeschrittene.

Jun 11, 2018 • 60min
Revision 341: Visual Studio Code
Hans und Peter nutzen beide Visual Studio Code und geben ihre Tool-, Extension-, und Konfigurations-Tipps zum besten! Anlass waren die Veröffentlichung des Artikels Top JavaScript VSCode Extensions for Faster Development sowie vscodecandothat.com.
Schaunotizen
[00:00:08] Visual Studio Code
Hans und Peter nutzen beide früher Sublime Text und sind nun großteils auf Visual Studio Code umgestiegen. VS Code ist umfassend erweiterbar und konfigurierbar, also gibt es viel an Extensions und Geheimtipps zu verteilen. Neben eingebauten Features wie dem Debugger, dem Git-Support und der visuellen Anpassbarkeit (hier ein Bild von Peters Ton-in-Ton-Setup) gibt es eine Menge von Extensions zu besprechen:
Import Cost
TODO highlight
GitLens
vscode-jest (für Integration in Jest)
coverage-gutters
css-triggers (mit Daten von csstriggers.com)
HTMLHint
EditorConfig
gitignore (ähnliche Extensions gibt es auch für die Config-Files von Docker, Jenkins etc.)
HTML Escape
Instant Markdown und markdownlint
WordCounter
Außerdem sprechen wir über das integrierte Terminal von VS Code und warum wir stattdessen Hyper und Terminator benutzen und warum damit unsere Benutzung der Desktop-Manager Divvy und Unity einhergeht.
[00:54:53] Keine Schaunotizen
Scrolling
Hans empfiehlt den Artikel Scroll to the future sowie die CSS-Features scroll-behavior und Scroll Snap Points.

May 28, 2018 • 58min
Revision 340: Glücksrad
Mangels tagesaktueller Themen spielten wir in Person von Schepp, Peter, Hans und Stefan mal wieder eine Runde HTML5-Glücksrad.
[00:00:00] Glücksrad
[00:00:47] Drag & Drop
Von der Benutzung der nativen HTML5-D&D-Api ohne Library raten wir dringend ab, wenngleich Peter zur Zeit eine entsprechende React-Library sucht. Für seine Zwecke nicht brauchbar sind, aber trotzdem erwähnt wurden Draggable Dragula Filepond Interact.js und Sortable.
[00:08:30] Das Form-Element
Damit er selbst nichts zu diesem Thema erzählen muss, fordert Peter den Rest der Mannschaft zu Quick-Fire-Funfacts über Formulare auf. Und sie gehen ihm tatsächlich auf den Leim! Schepp informiert darüber, dass Submit-Buttons selbst Werte übermitteln (ihre value-Eigenschaft), Hans unterliegt einem kleinen Irrtum bzgl. Input-Types, Stefan findet einen Use Case für Fieldsets und Legend-Elemente. Am Ende versuchen wir noch zu klären, warum die TextSelection-Api bei Number nicht fluppt und betrauern zum wiederholten Male die schlechte Unterstützung für das inputmode-Attribut.
[00:20:24] Das Script-Element
Wir kommen über async und defer relativ schnell zu document.write(). Und dann ist der Weg nicht mehr weit zum 90s WebDev Meetup und einen faszinierenden Talk über Netscape Navigator 2.0. Früher war eben doch nicht alles besser!
[00:28:15] document.open()
Wir verwechseln erst mal alle document.open() mit window.open() und sinnieren ein wenig über die verloren gegangene Kulturtechnik des Popups. Mit der egentlichen Funktion wissen wir nicht viel anzufangen, allerdings hat Jake Archibald mal etwas lustiges damit zusammengehackt.
[00:34:50] Das tbody-Element
Gehört zusammen mit thead und tfoot zu den obskursten HTML-Elementen. Wir quatschen über Tabellenelemente allgemein, wobei Hans und Peter besonders intensiv debattieren, ob ein Datagrid-Element in den HTML-Standard gehören sollte (der IE4 konnte das sogar schon mal).
[00:50:16] Das beforeunload-Event
Wir sprechen über window.alert(), window.prompt() und window.confirm() sowie mögliche Use Cases für das Unload-Event. Je nachdem was man vorhat, ist man mit entweder der Beacon API oder Background Sync besser bedient. Wenn das alles nun bloß auch überall funktionieren würde …

May 13, 2018 • 60min
Revision 339: ReasonML
Als Gäste sind diesmal Nik Graf und Patrick Stapfer zu Gast. Nik ist den Zuhörern schon aus Sendungen zum Thema React und Serverless bekannt. Patrick ist zum ersten Mal richtig mit dabei.
Schaunotizen
[00:03:00] ReasonML
Unsere beiden Gäste Nik und Patrick erklären Hans, das ReasonML eine Meta Language basierend auf OCaml ist und gerade einigen Hype erfährt. Gerade im React Umfeld ist ReasonML gerade sehr sichtbar – React wurde ursprünglich mal in ReasonML implementiert. ReasonML wird zu JavaScript transpiliert. Die Verwendung mit Rollup und Webpack ermöglicht BuckleScript.
[00:57:17] Keine Schaunotizen
ReasonML für Beginner
Nik hat einige Video-Tutorials aufgenommen. Diese sind bei Egghead verfügbar.
ReasonML Discord Channel
Für jegliche Frage relevant und hilfreich: die ReasonMl Community.
ReasonConf
Vom 11. – 13. Mai fand die erste Reason Conference in Wien statt.

May 5, 2018 • 1h 7min
Revision 338: Web Apps, PWAs und Offline in der Praxis
Für diese Revision haben wir uns den Robin Mehner (@rmehner auf Twitter) eingeladen, der nicht nur (Mit-)Organisator verschiedener Berliner Meetups wie der BerlinJS oder der Up.front ist, sondern auch der Reject.JS-Konferenz (als es sie noch gab). Wir quatschten mit Robin über seine Erfahrungen und Learnings beim Bau von offline-fähigen Web Apps, über die Erwartungshaltung von Benutzern dieser Anwendungen und über die Service Worker Technologie und ihre Fallstricke im Speziellen.
Schaunotizen
[00:01:08] (Progressive) Web Apps
Im Verlauf unseres Gesprächs über den Bau und den Betrieb von Web-Apps, berührten wir folgende Punkte (not in order of appearance):
Service Worker Intro Talk: „The ServiceWorker is coming, look busy“
Service Worker Support in Browsern
PWAs in iOS
Die Service Worker Toolbox
Das fantastische Google Workbox Toolkit
Talk zu Service Worker Gotschas: „ServiceWorkers Outbreak: index-sw-9a4c43b4b47781ca619eaaf5ac1db.js“
Push Notifications
Die web-push Library
Building Botnets on ServiceWorkers
Service Worker Offline Analytics
[01:04:16] Keine Schaunotizen
Nightly Build 2018
Auch dieses Jahr gibt es wieder eine Ausgabe von Hans‘, Anselms, Sebastians und Davids After-Work-Konferenz im Herbst in Köln-Ehrenfeld. Diesmal aber in einer neuen Location. Thema ist „Die Zukunft des Arbeitens“.

Apr 26, 2018 • 53min
Revision 337: DevOps
Wir hatten mal wieder Frederic Hemberger (Web, Twitter) zu Gast, mit dem wir uns über das neueste aus der DevOps-Welt austauschten.
Schaunotizen
[00:01:12] DevOps
Wir quatschen über DevOps und tauschen Erfahrungen mit diverse Tools aus (bzw. stellen im Falle von Peter allerlei naive Fragen).
[00:49:58] Keine Schaunotizen
Wildcard TLS-Zertifikate bei Let’s Encrypt
Es gibt einiges neues bei Let’s Encrypt, nicht nur (aber auch) Wildcard-Zertifikate.
Git’s Hidden Feature: Notes
Eines der zahllosen Git-Features, die nicht jeder kennt.
gitleaks
Durchsucht die gesamte History eine Git-Repositories nach versehentlich eingecheckten privaten Schlüssen und mehr.

Apr 13, 2018 • 1h 29min
Revision 336: DSGVO
Für alle Entwickler, die mit personenbezogenen Daten arbeiten ist der 25. Mai 2018 ein spezielles Datum. Eine Richtlinie der EU, welche aktuell in vielen Firmen kurz vor Frist behandelt werden muss, erhält an diesem Tag ohne Wenn und Aber ihre Wirksamkeit: die Datenschutzgrundverordnung, kurz DSGVO oder englisch GDPR (General Data Protection Regulation).
Da dieses Thema so präsent ist, haben wir uns drei Experten zum Thema eingeladen:
Sebastian Greger (@sebastiangreger), der als Designer die Effekte und direkten Auswirkungen der DSGVO auf Websites analysiert
Baltasar Cevc (@l_a_w_4_2), Anwalt für IT Recht, der die juristische Seite der DSGVO sehr genau kennt und
Joschi Kuphal (@jkphl), der als Entwickler und Agentur-Chef die DSGVO umsetzen muss und mit den anderen zusammen Workshops zum Thema organisiert
Schaunotizen
[00:03:40] DSGVO
Die Datenschutzgrundverordnung birgt einige Herausforderungen für Entwickler und IT Projektarbeiter. Wir beleuchten diese und unterhalten uns über UX-Herausforderungen wie das Cookie-Overlay und Doppel-Opt-In, sowie das Löschen von nutzerspezifischen Daten in komplexen Systemen, die Behandlung von Cookies, LocalStorage und anderen Client-seitigen Speichermöglichkeiten.
Es stellt sich heraus, dass das alles ganz schön komplex ist und die Gesetzgebung noch nicht eindeutig: Es fehlt die Auslegung der Judikative, die in den nächsten Jahren Klarheit schaffen wird.
[01:24:00] Keine Schaunotizen
Workshop
Die Gäste organisieren einen weiteren Workshop im Umfeld der Beyond Tellerrand Konferenz in Düsseldorf. Dieser findet am 9. Mai 2018 statt. Für alle Interessierten: Es gibt noch Tickets.

Apr 13, 2018 • 1h 7min
Revision 335: EME? CDM? DRM? CENC? IDK!
Anselm, Hans und Rodney lassen sich von Sebastian Golasch alles rund um DRM (Digital Rights Management, auch Dumb Restrictions Mania) erklären. Sebastian wollte eigentlich nur Netflix in Kodi zum Laufen bringen. Wir stellen wieder einmal fest: Kaninchenlöcher können ganz schön tief sein…
Schaunotizen
[00:02:00] Web Video DRM
Ein epischer Monolog, gelegentlich unterbrochen von Fragen und Halbwissen, entfaltet sich, im Zuge dessen folgende Stichworte eine Rolle spielen:
Encrypted Media Extensions (spec)
Media Source Extensions (spec)
What is EME?
Encrypted Media Extensions (EME), HTML5Rocks
Android Docs – DRM
Paid Video Content in Chrome (slides)
EFF Statement – Web DRM, intent to publish
End-to-End Adaptive Video Streaming with DASH and HLS (video)
Building a Streaming HTML5 Video Player (video)
DRM In the Age of HTML5: What You Need to Do Now (video)
Kodi Netflix Plugin