Working Draft

Wöchentlicher News-Podcast für Webdesigner und -entwickler

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Flattern oder direkt bei Auphonic spenden.

Sponsoren gesucht!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Tools, die nicht kostenlos sind. Auch unser Aufnahme-Equipment kostet Geld.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir Herausforderungen im Hosting zu bewältigen, vor allem der Traffic ist recht hoch.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wenn ihr unseren Podcast gut findest, sprecht mit euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 306: Accessibility und CSS Grids

3. Juli 2017 | 3 Kommentare

Mit Manuel Matuzović von den Webclerks gehen wir in den Themen Accessibility und CSS Grids in ein Nachspiel und ergänzen frühere Folgen. Von der Stammpartie mit dabei: Schepp, Hans und Stefan.

Schaunotizen

[00:03:07] Mit einfachen Mitteln Accessibility verbessern
Manuel gibt in seinen Artikeln und Beispielen einen guten Rundumschlag zum Thema Barrierefreiheit. Wir unterhalten uns über seine Artikel, sowie etliche weitere Quellen, die uns in Accessibility noch weiterhelfen können. Zu empfehlen sind die A11ycasts von Google, den in die Jahre gekommenen aber immer noch gültigen Eintrag im YUI Theatre (2, 3) und Heydons Inclusive Components wenns um SPAs geht. Manuel hat auf Codepen noch weitere Beispiele. Außerdem sehen wir uns den Focus Ring genauer an und lassen alte Diskussionen über das lang-Attribut erneut aufkochen, so wie damals im HTML 5 Boilerplate, Hans und Anwesende erinnern sich.
[00:52:49] Grid auto layout
CSS Grid ist nun auch in den Preview Versionen von Edge verfügbar und damit beinah flächendeckend. Wir schauen uns ein wichtiges Feature im Vergleich zur IE10+ Version an, nämlich Auto Layout. Und erklären damit auch gleich ein paar Grundkonzepte, basierend auf Stefans Artikel. Unser Grundsatz: Grid kann man schon gut jetzt einsetzen, vor allem wenn man nicht die ganze Magie benötigt. Für den Schuß Extra-Magie gibt es gute Fallbacks

[01:16:18] Keine Schaunotizen

place-items
Zentrieren in einer CSS Shorthand. Lässt glatt die Hölle zufrieren.
space-evenly
Eine neue Raumverteilung für Flexbox.
Service Workers Outbreak
Fesches Video von der JSConf EU zum Thema Service Workers.
Parsing JavaScript: Better lazy than eager
Die Münchner V8 Garde wieder in bester Form: Marja Hölltä erklärt JavaScript Parsing Interna.

Revision 305: Datenjournalismus

26. Juni 2017 | Keine Kommentare

Als kleinen Themen- und Tapetenwechsel haben wir uns für diese Folge die Datenjournalisten Kira Schacht und Phil Ninh von Journocode eingeladen, um etwas über ihr Berufsfeld und den Herstellungsprozess von datengetriebenen und/oder interaktiven Reportagen zu erfahren.

Schaunotizen

[00:00:18] Datenjournalismus
In unserem Gespräch erkunden wir, was Datenjournalismus, aka „Data Driven Journalism“ (DDJ), überhaupt ist und wann er zum ersten Mal in Erscheinung getreten ist. Vorreiter in der Welt in Sachen datengetriebener Publikationen sind The New York Times und The Guardian, während es in Deutschland die Berliner Morgenpost und in Österreich der Standard und das ORF sind. Wir reden darüber, wie ein solches Reportage-Projekt ans Rollen kommt, und wir reden über die Schwierigkeit der Beschaffung von brauchbaren bzw. gut formatierten Daten hier in unseren Gefilden. Natürlich kommen wir als technischer Podcast irgendwann auch auf das Thema „Tooling“: Welche Software und welche Bibliotheken kommen bei der Datenaufbereitung und später bei der Präsentation zum Einsatz? Das wäre z.B. OpenRefine zur Datenbereinigung (Zitat: „A free, open source, powerful tool for working with messy data“), R für die Extraktion von statistischen Daten und Libraries wie d3.js für eine anschauliche Präsentation im Web.

Keine Schaunotizen

Journocode
Die Gruppierung aus Dortmund hat es sich zur Aufgabe gemacht, Datenjournalismus zu fördern, indem Journalisten ans Programmieren, und vis versa Coder und Statistiker an Journalismus herangeführt werden. Zu diesem Zweck gibt es regelmäßig Meetups und Hack-Sessions.
Snow Fall – The Avalanche at Tunnel Creek
Das von unseren Gästen erwähnte „Interactive Story Telling“-Projekt der New York Times.
Berliner Morgenpost Interaktiv
Landingpage für Datenjournalismus-Projekte der Berliner Morgenpost.
Rheinische Post Interaktiv
Landingpage für Datenjournalismus-Projekte der Rheinischen Post.
Tour de France in Düsseldorf
Das im Gespräch erwähnte Projekt, an dem Kira und Phil gerade saßen.
Video: Hacking the Visual Norm – Nadieh Bremer
„During this talk Nadieh will take you through several of her data visualisation projects, both from the business environment of her day job and the experiments made in her evenings.“
Video: Des Traynor – Creating Dashboards – Data Visualisations that Resonate
„Info-graphics & data visualisations are popping up everywhere and they don’t always make sense. Many horrible acts have been committed in the name of ‚Making this chart seem a bit more fun'“
Video: Alex Graul | Using JS to build bigger, better datavis to enlighten and elate
„With this talk I want to show you how to design and build not just simple and not-so-simple charts to illustrate data but how to design & architect larger more complex pieces of content that tell stories and illustrate ideas.“
Netzwerk Recherche Konferenz 2017
Die alljährliche Konferenz des Netzwerk Recherche e.V., ein gemeinnütziger Verein, der 2001 von Journalistinnen und Journalisten gegründet wurde, um die journalistische Recherche und den Qualitätsjournalismus in Deutschland zu stärken.

Revision 304: Native Browser-APIs

24. Juni 2017 | 3 Kommentare

Hans und Schepp telefonierten sich diesmal zusammen und sprachen über die weite Verbreitung und Vorteile moderner Browser-APIs.

Schaunotizen

[00:00:15] Native Browser-APIs
Schepp hat sich in letzter Zeit verstärkt damit befasst, wie man auf einer klassischen Webseite den ganzen JavaScript-Balast loswerden kann. Ziel des Ganzen ist zum einen, Download- und Parsezeiten zu vermeiden, aber auch eine schnelle Ausführungsgeschwindigkeit zu erhalten, bedingt durch den dahintersteckenden, nativen C-Code. Und da sieht es eigentlich recht gut aus mit APIs und deren Support durch Browser. Folgende Themenbereiche lassen sich heute ohne viel zusätzliches JavaScript gut bedienen:

[00:57:09] Keine Schaunotizen

How the minmax() Function Works
Die CSS Grid Spec führt eine minmax()-Funktion ein, welche recht praktisch ist.
Lea Verou – CSS Variables: var(–subtitle);
Wie alle Talks von Lea sehr sehenswert, diesmal mit dem Thema CSS Custom Properties (im Volksmund „CSS Variablen“) zum Thema.
Essential apps for switching from Mac to Windows
Tolle Ressource für Entwickler, die an einem Wechsel zu Windows interessiert sind, ergänzend zu dem vor zwei Revisionen schon einmal verlinkten „Turning Windows into an environment ready for modern development„.
Inside Chrome: The Secret Project to Crush IE and Remake the Web
Weil Chrome bald 10 Jahre alt wird dachten wir, verlinken wir dieses historische Fundstück.

Revision 303: Cloud Hosting

21. Juni 2017 | 2 Kommentare

Eine knifflige Problemstellung mit einem der dutzend AWS Dienste brachte Hans und Stefan in den Dialog. Prompt war ein Working Draft Thema geboren. So gesellte sich noch Anselm dazu um die Diskussionsrunde zu komplettieren und einen guten Rundumschlag über die modernen Hosting-Möglichkeiten über den Wolken geben.

[00:00:15] News

NPM 5
NPM 5 ist draussen und hat etliche Neuerungen hinsichtlich Versionslocks, Download-Performance u.ä. Das vielleicht größte NPM Upgrade seit semi-flachen Abhängigkeitsbäumen.

Schaunotizen

[00:05:32] Cloud Hosting
Vorbei sind die Zeiten, in denen man sich beim Rechenzentrum nebenan ein paar hundert Megabyte für’s teure Geld besorgte. Heute sind alle hippen Websites und Web-Applikationen in der Cloud! Wir erzählen von unseren Erfahrungen mit Diensten wie AWS und den damit verbundenen Services wie S3, EC2, CF,
SES, RDS, MFG, KTHXBYE. Zahlreiche Kürzel, für die man jeweils ein eigenes Diplom benötigt. Da machen es 1-Click Dienstleister wie Digital Ocean, Heroku, Now und Netlify doch um einiges einfacher, und helfen auch die Kosten entsprechend zu kalkulieren. Wenn man nämlich nach Stunde und Megabyte bezahlt, kann das einem bei entsprechend hohem Traffic schonmal böse überraschen

[00:55:30] Keine Schaunotizen

H2 Push is tougher than I thought
Schönes neues HTTP2 Feature, allerdings noch nicht reif genug, mein Jake Archibald.
Preload, Prefetch & Priorities in Chrome
Ein Artikel von Addy Osmani beschreibt wie sich die neuen HTML Attribute auf den Ladevorgang im Chrome Browser auswirken.
11 things I learned reading the Flexbox spec
In der Spezifikation von Flexbox stecken ein paar spannende Details, die man berücksichtigen kann wenn man mit den Properties jongliert.
70% CSS Repetition
Quasi Nachlese zu unserer Revision 301.

Revision 302: Zukunft und Vergangenheit von JS-Tools und Libraries

19. Juni 2017 | 3 Kommentare

Rodney und Peter hockten sich zusammen um über sehr neue und sehr alte JavaScript-Technologie zu schwafeln.

Schaunotizen

[00:00:12] Prepack
Prepack ist ein „partial evaluator for JavaScript“. Prepack führt, sofern möglich, den Initialisierungs-Code eines JS-Bundles in einem Compile-Schritt aus, damit es der Browser nicht zur Laufzeit machen muss. Es werden z.B. Closures wegoptimiert und Berechnungen durchgeführt, wo immer dies möglich ist. In eine ähnliche Kerbe schlägt das bereits mehrfach in diesem Podcast erwähnte optimize-js, was weniger kann, aber schon eingesetzt werden kann. Prepack hingegen ist noch Alpha-Software (obwohl es schon ein Webpack-Plugin gibt), was wir anhand von mehreren Code-Samples erfahren.
[00:13:32] Früher war alles besser anders
Das HTTP Archive hat Statistiken über verbreitete JS-Libraries gesammelt und wir lassen es uns nicht nehmen, die Top 10 einzeln durchzusprechen. Auf Platz 1 thront wenig überraschend jQuery, über jQuery UI auf Nummer 2 (und Rodneys Schwank zur position()-Funktion) wundern wir uns hingegen schon etwas. Zu den ollen Polyfill-Libraries Modernizer (Platz 3) und YepNope (Platz 5) fällt uns vor allem eine Reflow-Visualisierung mit der alten Modernizer-Webseite als Testsubjekt ein. Bootstraps JS-Komponenten auf Platz 4 verwundern nur mäßig, FlexSlider an Position 6 war uns völlig unbekannt. Die Erinnerung an swfobject (Platz 7) bewegt Rodney zu Geständnissen aus einer Jugend voller ActionScript. Das achtplatzierte Underscore.js lebt in Form von lo-dash bis heute in unseren package.json-Files weiter. Mit Grausen denken wir an die Google-Maps-API (Platz 9), wenn auch Peter neue Ideen zum nicht-sachgerechten Einsatz von Maps und Headless Browser anzubieten hat. Die Liste endet mit Moment.js auf Platz 10, was uns aus irgendwelchen Gründen zur PHP-Funktion strtotime() abschweifen lässt. Da das aber kein geeigneter Abschluss für einen Podcast im Jahre des Herrn 2017 ist, wirft Rodney zum Schluss noch einen persönlichen Platz 11 in die Runde: Libraries für Layout-Rearrangements wie FLIP (was Rodneys Favorit Vue.js von Haus aus macht). Libraries wie Vue und Tools wie Babel zeigen aber ganz klar auf wohin der Trend geht: weg von Insellösungen, hin zu integrierten Tools und Frameworks.

[01:06:14] Keine Schaunotizen

ECMAScript modules in browsers
Gewohnte Erklärbär-Qualität aus dem Hause Jake Archibald.
Getting Started with Headless Chrome
PhantomJS ist tot, es lebe Headless Chrome!
Turning Windows into an environment ready for modern development
Tools für Windows.
Install npm packages globally without sudo on macOS and Linux
Pakete global für den jeweiligen User installieren.
zeit/pkg
Bundlet Node-Apps in Executables.
Videos von der JSConf EU 2017
Schöne kurze Talks.

Revision 301: Optimierung und Wartbarkeit von CSS

22. Mai 2017 | 1 Kommentar

Letzte Revision noch über ihn, bzw. einen seiner Artikel gesprochen, heute schon in unserer Sendung: Jens Oliver Meiert! Wir haben ihn auf der gerade vergangenen beyond tellerrand Düsseldorf zufällig getroffen und ihn erfolgreich in ein Interview zum Thema CSS verstrickt.

Schaunotizen

[00:00:18] Optimierung und Wartbarkeit von CSS
Wir sprachen mit Jens über sein aktuelles Forschungsthema, nämlich der Frage, wie man CSS besser optimieren und gleichzeitig gut wartbar halten kann. Ausgangslage war Jens‘ Erkenntnis, dass 70% des CSS, das die Durchschnittsseite mit sich herumschleift, aus vorher bereits definierten Deklarationen besteht. Das daraus resultierende Gespräch führte uns über Bootstrap und die Möglichkeit, es an die eigenen Bedürfnisse anzupassen, über Tachyons, Yahoos Atomic CSS, und OOCSS hin zu Googles GWT. Zur weiteren Erforschung des Themenkomplexes bittet Jens in einem Artikel darum, seine Umfrage das Thema betreffend auszufüllen.

Keine Schaunotizen

Alle Videos der beyond tellerrand Düsseldorf 2017
Die Videos der beyonds gehen mittlerweile so schnell online, da fehlt nicht mehr viel, dass man die Talks dort schon vor dem Bühnenauftritt sehen kann. Wenn Ihr nicht die Zeit findet, alle Videos zu schauen, dann doch wenigstens das von Espen Brunborg.

Revision 300: Glücksrad!

6. Mai 2017 | Kommentare deaktiviert für Revision 300: Glücksrad!

Revision 300! Aus Gründen™ gab es diesmal aber keine Spezial-Sonder-Revision, sondern Anselm, Schepp, Stefan und Peter ließen einfach das Glücksrad kreisen.

Glücksrad

[00:01:06] Canvas-Element
Schepp nutzt die Canvas gerne für Bild-Dateiformat-Konvertierung und Bildmanipulation und berichtet, wie man (u.A. mit dom-to-image) via JS, SVG und Canvas Screenshots vom aktuellen DOM machen kann. Außerdem erfahren wir von der Existenz von Canvas-Hintergründen in CSS und der Offscreen Canvas.
[00:09:17] Web Sockets
Einstimmiges Urteil: alle lieben Socket.IO. Größere Datenmengen mit WebRTC durch die Gegend zu schaufeln hat hingegen noch keiner von uns versucht.
[00:16:45] Der HTML-Parser
Peter feiert den in HTML5 spezifizierten HTML-Parser hart, denn vorher haben Browser teils sehr exotische Parsing-Strategien verfolgt – das MS-Team hat ihren irren Legacy-Parser kürzlich erläutert. Kein Wunder, dass man da früher den html5shiv brauchte!
[00:22:21] input[type=date]
Kurze Diskussion um das beste und schlimmste Webtech-Feature aller Zeiten. Dass es allerdings nicht die ECMAScript Internationalization API unterstützt, ist schon doof.
[00:28:58] Keyboard-Shortcuts
Schepp verblüfft uns, indem er sich sofort an einen Artikel über Accesskeys erinnert – von 2004! Unser Fazit: Accesskeys sind für die Tonne, JS-Keyboard-Shortcuts allerdings nicht unbedingt.
[00:37:00] Tabellen
Während wir anfangs noch tatsächlich über Tabellen sprechen (u.A. die jQuery-Plugins DataTables und jsGrid) schweifen wir kurz in Richtung „Verdienste langlebiger JS-Libraries“ ab; unter anderem fallen die Namen Dojo (dem wir Promises und Module in JS zu verdanken haben), ExtJS, Kendo UI und MooTools. Zum Ende hin geht es wieder kurz um Tabellen (speziell die weithin unbekannten Attribute scope und headers) und Layout-Tricks, die sich mit Tabellen abziehen lassen.

Revision 299: Electron

3. Mai 2017 | Kommentare deaktiviert für Revision 299: Electron

In dieser Revision haben wir das Vergnügen, uns von Stefan Judis (Twitter, GitHub, Webseite) alles über Electron erzählen zu lassen.

Ein vorerst letztes mal wird unser Podcast von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen, welcher auch den Desktop als First-Class-Citizen betrachtet. Jetzt auch mit Open-Source-Server-Komponenten!

Schaunotizen

[00:03:05] Electron
Mit Electron können Frontend-Entwickler mit HTML, CSS und JavaScript Desktop-Apps für alle Plattformen bauen – mit Zugriff auf das Dateisystem und allem. Es handelt sich um ein auf Chromium und Node basierendes Projekt aus der Feder von Github, das aus dem Atom-Editor geboren wurde. Andere bekannte Electron-Apps sind Visual Studio Code und Hyper. Wir diskutieren Fragen und um Cross-Plattform-Apps und Accessibility sowie die Vergleiche von Electron mit PWAs, Adobe AIR und Flash. Außerdem gibt uns Stefan einen kleinen App-Bastel-Walkthrough, bei dem wir speziell auf Tools wie den nativefier, electron-packager und electron-builder eingehen. Weitere Ressourcen sind bei Sindre Sorhus und im Projekt Electron Userland zu finden.

[00:42:54] Keine Schaunotizen

The Definitive Guide to Object Streams in Node.js
Unser liebster Österreicher erklärbärt ein gar nicht mal so unkompliziertes Thema.
JavaScript is a buffet, not the enemy
Talk von Chris Heilmann (auf einer von unserem liebsten Österreicher organisierten Konferenz).
Sublime Text, Atom & VS Code snippet generator
Gerade für VS Code ein Segen, denn dessen doofes JSON-Format erlaubt auch bei mehrzeiligen Snippets keine Zeilenumbrüche.
Using flow-root today
Clearfix 2.0, erklärt von Anselm.
The invisible parts of CSS
Diverse nicht-offensichtliche Teile von CSS anschaulich erklärt.

Revision 298: Module, Bundling und Optimierung

24. April 2017 | 2 Kommentare

Hans, Schepp und Peter (mit einer Extraportion Heuschnupfen im Gepäck) widmeten sich in dieser Revision voll und ganz ECMAScript-Modulen und den dazugehörigen Tools.

Schaunotizen

[00:00:13] Module, Bundling und Optimierung
Das Contentful-Blog fragt: is it time to rethink bundling? Wir sind uns da noch nicht ganz sicher. Zwar unterstützen mittlerweile einige Browser die neue Syntax, die zusätzlichen Details sowie den module-Type für Scripts (nebst dem dazugehörigen nomodule-Attribut), aber nur weil es einen neuen Hammer gibt, ist nicht plötzlich alles ein Nagel. Um Tree Shaking wirklich effektiv zu braucht man auch Dependencies in ES6-Syntax, was heute noch nicht die Regel ist. Zudem braucht man heutzutage, wenn man auf Transpilieren verzichtet, noch dedizierte ES6-Minifier wie das Babal-Plugin babili. Zum Abschluss sprechen wir noch über den Vergleich Rollup vs. Webpack und automatisierte Mikro-Optimierungen wie optimize-js (die, weil Teil des Buildprozesses und nicht des Source Codes, nicht so schlimm sind wie sonst).

[00:34:40] Keine Schaunotizen

Free Microsoft Edge testing in partnership with BrowserStack
Wer sich kein Windows installieren mag, kann sich jetzt mit Browser Stack behelfen.
Async iterators and generators
Von Jake Archibald in gewohnter Qualität erklärt.

Revision 297: Elm

18. April 2017 | Kommentare deaktiviert für Revision 297: Elm

In dieser Sendung ist Bastian Krol mit am Start und spricht mit uns über Elm.

Wieder wird unser Podcast von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen, welcher auch den Desktop als First-Class-Citizen betrachtet.

Schaunotizen

[00:03:43] Promises vs. Reactive
Aufgrund von Hans‘ Frage aus der Vorbesprechung, wie aktuell Promises in JavaScript sind und welche Alternativen sich bieten, sprechen wir über Reactive Programming im Frontend und Node.js.
[00:13:08] Elm
Bastians mitgebrachtes Thema ist Elm. Elm ist eine eigene Programmiersprache, die nach JavaScript kompiliert. Wir sprechen über die Vorzüge und die Einsatzbereiche. Bastian ist Teil der deutschen Community, es gibt einen Slack Channel, man kann Elm im Browser ausprobieren, die Diskussionen zur Sprache finden auf der Mailingliste statt. Außerdem möchten wir noch auf die Atom-Erweiterung hinweisen.

[00:51:00] Keine Schaunotizen

eslint-plugin-promise: Enforce best practices for JavaScript promises
Passend zur Diskussion über Promises liefern wir einen Link zum ESLint Plugin für schöneren Promise-Code.
CSS Custom Properties in Microsoft Edge
CSS Custom properties landen in Microsoft Edge. Damit sind diese nun einsatzbereit.
CSS Grids Garden
Ein guter Einstieg ins Thema CSS Grids und wie diese funktionieren.
RuhrJS Konferenz
Die zweite Ausgabe der JavaScript Konferenz findet am 14. und 15. Oktober 2017 in Bochum statt.