Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

May 06, 2017 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
51 min
May 06, 2017 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.
51 min
May 03, 2017 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
47 min
May 03, 2017 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.
47 min
April 24, 2017 Revision 298: Module, Bundling und Optimierung
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
37 min
April 24, 2017 Revision 298: Module, Bundling und Optimierung
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.
37 min
April 18, 2017 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
54 min
April 18, 2017 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.
54 min
April 03, 2017 Revision 296: Das Accessibility Object Model
Diese Folge haben sich Hans und Schepp zusammengesetzt, und über die Idee eines Accessibility Object Model diskutiert.
Wie jede zweite Ausgabe wird unser Podcast wieder von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen, welcher auch den Desktop als First-Class-Citizen betrachtet. Demnächst mit erweiterten Funktionen für Teams!
Schaunotizen
[00:01:41] The Accessibility Object Model
Für jede Webseite erstellen unsere Browser einen Document Tree, einen Layout Tree, sowie einen Accessiblity Tree. Folgerichtig kommt aus der Web Incubator Community Group (WICG) die Idee, den Entwicklern zusätzlich zum Document Object Model (DOM) und CSS Object Model (CSSOM) auch ein Accessibility Object Model (AOM) an die Hand zu geben. Wir erforschen, welche neuen Programmierszenarien damit möglich werden, und ob wir die Idee insgesamt eher für gut oder für schlecht befinden (damit thematisieren wir auch die Ausführungen von Marco Zehe aus Revision 162).
[00:36:30] Keine Schaunotizen
Modern JavaScript for Ancient Web Developers
Ein Artikel voller guter Links, um moderne JavaScript-zentrierte Entwicklung zu lernen.
Fuse.js
Lightweight fuzzy-search, in JavaScript
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
40 min
April 03, 2017 Revision 296: Das Accessibility Object Model
Diese Folge haben sich Hans und Schepp zusammengesetzt, und über die Idee eines Accessibility Object Model diskutiert.
Wie jede zweite Ausgabe wird unser Podcast wieder von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen, welcher auch den Desktop als First-Class-Citizen betrachtet. Demnächst mit erweiterten Funktionen für Teams!
Schaunotizen
[00:01:41] The Accessibility Object Model
Für jede Webseite erstellen unsere Browser einen Document Tree, einen Layout Tree, sowie einen Accessiblity Tree. Folgerichtig kommt aus der Web Incubator Community Group (WICG) die Idee, den Entwicklern zusätzlich zum Document Object Model (DOM) und CSS Object Model (CSSOM) auch ein Accessibility Object Model (AOM) an die Hand zu geben. Wir erforschen, welche neuen Programmierszenarien damit möglich werden, und ob wir die Idee insgesamt eher für gut oder für schlecht befinden (damit thematisieren wir auch die Ausführungen von Marco Zehe aus Revision 162).
[00:36:30] Keine Schaunotizen
Modern JavaScript for Ancient Web Developers
Ein Artikel voller guter Links, um moderne JavaScript-zentrierte Entwicklung zu lernen.
Fuse.js
Lightweight fuzzy-search, in JavaScript
40 min