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

April 02, 2017 Revision 295: Next, Git, Guetzli
In der Kürze liegt die Würze: Hans und Peter lassen sich diesmal von Stefan ein Framework für Isomorphic JS-SPAs erklären und verlesen zwei kleine Links.
Schaunotizen
[00:00:10] Next.js
Inspiriert von einem Artikel aus der Feder Arunoda Susiripalas lauschen Hans und Peter den Ausführungen Stefans zu Next.js. Dabei handelt es sich um ein React-basiertes SPA-Framework, das dem geneigten Entwickler viel vom früher üblichen Tool-Stress mit u.A. Webpack (siehe auch Revision 289: Tiefe Einblicke in die Webpack-Entwicklung) erspart. Serverside rendering, Code splitting, hot reload etc. sind ab Werk dabei. Das ganze ist ein Werk von Zeit Inc., deren übrige Produkte ebenfalls in die Kategorie „X, aber in unkompliziert“ fallen (man vergleiche now mit Heroku).
[00:32:28] Keine Schaunotizen
Flight rules for Git
Was tun, wenn man in Git einen Fehler gemacht hat? Handliche Katastrophen-Checkliste!
Guetzli, Google’s New JPEG Encoder
Kurzer Überblick über das neueste Werk der Magier aus Googles Kompressions-Hogwarts.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
36 min
April 02, 2017 Revision 295: Next, Git, Guetzli
In der Kürze liegt die Würze: Hans und Peter lassen sich diesmal von Stefan ein Framework für Isomorphic JS-SPAs erklären und verlesen zwei kleine Links.
Schaunotizen
[00:00:10] Next.js
Inspiriert von einem Artikel aus der Feder Arunoda Susiripalas lauschen Hans und Peter den Ausführungen Stefans zu Next.js. Dabei handelt es sich um ein React-basiertes SPA-Framework, das dem geneigten Entwickler viel vom früher üblichen Tool-Stress mit u.A. Webpack (siehe auch Revision 289: Tiefe Einblicke in die Webpack-Entwicklung) erspart. Serverside rendering, Code splitting, hot reload etc. sind ab Werk dabei. Das ganze ist ein Werk von Zeit Inc., deren übrige Produkte ebenfalls in die Kategorie „X, aber in unkompliziert“ fallen (man vergleiche now mit Heroku).
[00:32:28] Keine Schaunotizen
Flight rules for Git
Was tun, wenn man in Git einen Fehler gemacht hat? Handliche Katastrophen-Checkliste!
Guetzli, Google’s New JPEG Encoder
Kurzer Überblick über das neueste Werk der Magier aus Googles Kompressions-Hogwarts.
36 min
March 22, 2017Revision 294: CSS Grids
Für diese Revision haben wir uns nach längerer Zeit mal wieder den Sven Wolfermann eingeladen, den man desöfteren auf Konferenzen, Community-Events und Unkonferenzen mit Vorträgen zu fortgeschrittenen CSS-Techniken antreffen kann. Selbiges gilt für sein Blog unter maddesigns.de. Denn wir wollten diese Woche gerne über die neuen CSS Grids sprechen, die jetzt nach und nach in den neuen Browsern freigeschaltet werden.
Bereits zum dritten Mal wird unser Podcast jetzt von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen. Dank verbesserter Technik verbindet sich der Messenger nun noch schneller mit der Gegenseite, und die Übertragungsqualität ist dabei auch noch gestiegen!
Schaunotizen
[00:02:28] CSS Grids
Lange wurde daran gearbeitet und wir hatten sie eigentlich schon letztes Jahr erwartet, nun ist es endlich soweit: CSS Grids kommen! Mit Sven sprechen wir darüber, welche Lücke die Grids füllen und inwiefern sie vergleichbar sind mit den guten alten Tabellenlayouts oder Flexbox. Weiter geht es mit der Frage des Browser-Supports, und ob der Internet Explorer mit seiner Vorversion von Grids gut genug ist, um den praktischen Einsatz zu wagen. Die Möglichkeiten und Vorzüge von Grids machen einige Demos deutlich, die man mal gesehen haben sollte:
Grid by Example
CSS Grid Article Layout
Async CSS Grid Article Layout (5 columns)
CSS Grids Panel
CSS Grid Layout – responsive gallery demo
" rel="noopener noreferrer">Websafe colors meet CSS Grid (auto-placement demo)
CSS grid layout – skeleton demo steps
The Experimental Layout Lab of Jen Simmons
Wer nach unserem Gespräch Lust bekommen hat, sich selbst mit den CSS Grids zu befassen, dem empfiehlt Sven folgendes Lernmaterial, um schnell in die Spur zu kommen:
Grid by Example
Basic concepts of grid layout
CSS Reference: Grid
CSS Grid Layout Examples
Learn CSS Grid
Abschließend blicken wir in die Zukunft und sprechen über das Konzept der „Subgrids„, das von vielen Entwicklern im Zuge der Grids-Entwicklung nachgefragt wurde, und das in eine nächste Ausbaustufe des Layoutstandards gewandert ist.
[00:43:57] Keine Schaunotizen
Animista
Eine Bibliothek von fix und fertigen CSS-Animationen
Scram.js
Ein Electron-basiertes Framework, das es erlaubt, mit Web Components serverseitigen Code zu schreiben.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
47 min
March 22, 2017 Revision 294: CSS Grids
Für diese Revision haben wir uns nach längerer Zeit mal wieder den Sven Wolfermann eingeladen, den man desöfteren auf Konferenzen, Community-Events und Unkonferenzen mit Vorträgen zu fortgeschrittenen CSS-Techniken antreffen kann. Selbiges gilt für sein Blog unter maddesigns.de. Denn wir wollten diese Woche gerne über die neuen CSS Grids sprechen, die jetzt nach und nach in den neuen Browsern freigeschaltet werden.
Bereits zum dritten Mal wird unser Podcast jetzt von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen. Dank verbesserter Technik verbindet sich der Messenger nun noch schneller mit der Gegenseite, und die Übertragungsqualität ist dabei auch noch gestiegen!
Schaunotizen
[00:02:28] CSS Grids
Lange wurde daran gearbeitet und wir hatten sie eigentlich schon letztes Jahr erwartet, nun ist es endlich soweit: CSS Grids kommen! Mit Sven sprechen wir darüber, welche Lücke die Grids füllen und inwiefern sie vergleichbar sind mit den guten alten Tabellenlayouts oder Flexbox. Weiter geht es mit der Frage des Browser-Supports, und ob der Internet Explorer mit seiner Vorversion von Grids gut genug ist, um den praktischen Einsatz zu wagen. Die Möglichkeiten und Vorzüge von Grids machen einige Demos deutlich, die man mal gesehen haben sollte:
Grid by Example
CSS Grid Article Layout
Async CSS Grid Article Layout (5 columns)
CSS Grids Panel
CSS Grid Layout – responsive gallery demo
Websafe colors meet CSS Grid (auto-placement demo)
CSS grid layout – skeleton demo steps
The Experimental Layout Lab of Jen Simmons
Wer nach unserem Gespräch Lust bekommen hat, sich selbst mit den CSS Grids zu befassen, dem empfiehlt Sven folgendes Lernmaterial, um schnell in die Spur zu kommen:
Grid by Example
Basic concepts of grid layout
CSS Reference: Grid
CSS Grid Layout Examples
Learn CSS Grid
Abschließend blicken wir in die Zukunft und sprechen über das Konzept der „Subgrids„, das von vielen Entwicklern im Zuge der Grids-Entwicklung nachgefragt wurde, und das in eine nächste Ausbaustufe des Layoutstandards gewandert ist.
[00:43:57] Keine Schaunotizen
Animista
Eine Bibliothek von fix und fertigen CSS-Animationen
Scram.js
Ein Electron-basiertes Framework, das es erlaubt, mit Web Components serverseitigen Code zu schreiben.
47 min
March 12, 2017 Revision 293: Web Assembly, Bloat und Web Components
Rodney, Hans und Peter widmeten sich in dieser Revision dem Thema Web Assemby sowie der ewigen Frage nach Frameworks, Bloat … und Web Components.
Schaunotizen
[00:00:15] Web Assembly kommt
Web Assembly ist beschlossene Sache. Grund genug, sich dem Thema einmal vertiefend zu widmen. Web Assembly ist ein im Browser lauffähiges binäres Code-Format, das als Kompilierziel für andere Programmiersprachen dient (ähnlich wie einst der Vorläufer asm.js). Web-Assembly-Code wird aus einer Reihe von Gründen sehr schnell sein, schneller als normales JS, das den Optimizern der JS-Engine bis zum heutigen Tage Kopfzerbrechen bereitet. Und da es nun ein dediziertes Kompilierziel für Browser gibt, muss ECMAScript nicht mit noch weiteren für normales JS uninteressanten Funktionen wie Math.imul() aufgerüstet werden. Gegen Ende phantasieren wir noch ein wenig über Webentwicklung mit Rust, Go sowie Parallelität im Browser – alles Dinge, die es zwar noch nicht wirklich gibt, die aber in endlicher Zeit kommen könnten.
[00:26:19] Und ewig grüßt das Bloat-Murmeltier
Auch diese Woche gab es wieder einiges an Diskussionen um die Frage, ob wir uns nicht die Webentwicklung zu kompliziert und zu langsam machen. Zum einen schrieb Marcus Hellberg über bessere Performance mit Web Components, zum anderen schraubte der umtriebige Andrea Giammarchi eine performante Virtual-DOM-Alternative in 200 Zeilen zusammen. Dass aus all diesen Erkenntnissen, Blogposts und Codezeilen irgendwelche Folgen erwachsen, glauben wir allerdings nicht und besprechen im Zuge dessen gleich auch Preact sowie Vue.js und verweisen auf einen demnächst bei Screenguide erscheinenden Artikel von Schepp. Und warum in Sachen Web Components im Moment so wenig passiert, klären wir bei dieser Gelegenheit gleich auch.
[01:00:26] Keine Schaunotizen
ScrollDir
Kleines JS-Plugin für Arbeit mit der vertikalen Scrollrichtung.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 2 min
March 12, 2017 Revision 293: Web Assembly, Bloat und Web Components
Rodney, Hans und Peter widmeten sich in dieser Revision dem Thema Web Assemby sowie der ewigen Frage nach Frameworks, Bloat … und Web Components.
Schaunotizen
[00:00:15] Web Assembly kommt
Web Assembly ist beschlossene Sache. Grund genug, sich dem Thema einmal vertiefend zu widmen. Web Assembly ist ein im Browser lauffähiges binäres Code-Format, das als Kompilierziel für andere Programmiersprachen dient (ähnlich wie einst der Vorläufer asm.js). Web-Assembly-Code wird aus einer Reihe von Gründen sehr schnell sein, schneller als normales JS, das den Optimizern der JS-Engine bis zum heutigen Tage Kopfzerbrechen bereitet. Und da es nun ein dediziertes Kompilierziel für Browser gibt, muss ECMAScript nicht mit noch weiteren für normales JS uninteressanten Funktionen wie Math.imul() aufgerüstet werden. Gegen Ende phantasieren wir noch ein wenig über Webentwicklung mit Rust, Go sowie Parallelität im Browser – alles Dinge, die es zwar noch nicht wirklich gibt, die aber in endlicher Zeit kommen könnten.
[00:26:19] Und ewig grüßt das Bloat-Murmeltier
Auch diese Woche gab es wieder einiges an Diskussionen um die Frage, ob wir uns nicht die Webentwicklung zu kompliziert und zu langsam machen. Zum einen schrieb Marcus Hellberg über bessere Performance mit Web Components, zum anderen schraubte der umtriebige Andrea Giammarchi eine performante Virtual-DOM-Alternative in 200 Zeilen zusammen. Dass aus all diesen Erkenntnissen, Blogposts und Codezeilen irgendwelche Folgen erwachsen, glauben wir allerdings nicht und besprechen im Zuge dessen gleich auch Preact sowie Vue.js und verweisen auf einen demnächst bei Screenguide erscheinenden Artikel von Schepp. Und warum in Sachen Web Components im Moment so wenig passiert, klären wir bei dieser Gelegenheit gleich auch.
[01:00:26] Keine Schaunotizen
ScrollDir
Kleines JS-Plugin für Arbeit mit der vertikalen Scrollrichtung.
1 hr 2 min
March 06, 2017 Revision 292: Bessere APIs mit GraphQL
Zur neusten Sendung ist Johannes Schickling mit von der Partie. Nachdem er in London sein erstes Startup erfolgreich hinter sich gelassen hat, arbeitet er nun in Berlin am nächsten Coup. Das Thema ist GraphQL, die Firma heißt Graphcool.
Wie bereits vor zwei Wochen wird diese Revision von Wire, dem sicheren Open Source Messaging Client für all eure Plattformen gesponsort. Zudem gehören – dank der neuen Textsuche – verlorengegangene Nachrichten ab sofort der Vergangenheit an.
Schaunotizen
[00:01:39] GraphQL
Johannes hat uns das Thema GraphQL mitgebracht. Wir sprechen darüber, für was man GraphQL einsetzen kann und wie man den Umgang damit lernt.
Mit Apollo (flexibel in der Nutzung, Integrationen für alle möglichen SPA-Frameworks) gibt es ein tolles Tool, was den Einsatz von GraphQL stark vereinfacht. Auch Facebooks Relay (viel automatisches Caching, React only) ist ganz interessant.
Außerdem stellt uns Johannes eine Test API von Graphcool zur Verfügung.
Mit GraphQL-Europe findet zusätzlich im Mai die erste europäische Konferenz zum Thema statt.
Weitere Links zum Thema findet ihr hier.
[01:03:31] News
Die erste SHA1 Kollision
SHA1 ist mittlerweile nicht mehr sicher. Mit einiger Rechenpower hat ein Google-Team die ersten beiden gleichen SHA1-Strings erzeugt.
[01:04:51] Keine Schaunotizen
A Detailed Introduction To Webpack
In Revision 289 haben wir uns ausführlich zum Thema Webpack unterhalten. Für alle, die die Grundlagen von Webpack noch mal in einem Artikel zusammengefasst lesen möchten, gibt es diesen jetzt beim Smashing Magazine.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 7 min
March 06, 2017 Revision 292: Bessere APIs mit GraphQL
Zur neusten Sendung ist Johannes Schickling mit von der Partie. Nachdem er in London sein erstes Startup erfolgreich hinter sich gelassen hat, arbeitet er nun in Berlin am nächsten Coup. Das Thema ist GraphQL, die Firma heißt Graphcool.
Wie bereits vor zwei Wochen wird diese Revision von Wire, dem sicheren Open Source Messaging Client für all eure Plattformen gesponsort. Zudem gehören – dank der neuen Textsuche – verlorengegangene Nachrichten ab sofort der Vergangenheit an.
Schaunotizen
[00:01:39] GraphQL
Johannes hat uns das Thema GraphQL mitgebracht. Wir sprechen darüber, für was man GraphQL einsetzen kann und wie man den Umgang damit lernt.
Mit Apollo (flexibel in der Nutzung, Integrationen für alle möglichen SPA-Frameworks) gibt es ein tolles Tool, was den Einsatz von GraphQL stark vereinfacht. Auch Facebooks Relay (viel automatisches Caching, React only) ist ganz interessant.
Außerdem stellt uns Johannes eine Test API von Graphcool zur Verfügung.
Mit GraphQL-Europe findet zusätzlich im Mai die erste europäische Konferenz zum Thema statt.
Weitere Links zum Thema findet ihr hier.
[01:03:31] News
Die erste SHA1 Kollision
SHA1 ist mittlerweile nicht mehr sicher. Mit einiger Rechenpower hat ein Google-Team die ersten beiden gleichen SHA1-Strings erzeugt.
[01:04:51] Keine Schaunotizen
A Detailed Introduction To Webpack
In Revision 289 haben wir uns ausführlich zum Thema Webpack unterhalten. Für alle, die die Grundlagen von Webpack noch mal in einem Artikel zusammengefasst lesen möchten, gibt es diesen jetzt beim Smashing Magazine.
1 hr 7 min
February 28, 2017 Revision 291: h-Element und ES2017
Peter und Anselm widmeten sich diese Woche in gebotener Kürze einem (vielleicht) neuen HTML-Element sowie den Features von ES2017. Es gab während der Aufnahme keinerlei technische Probleme und wer glaubt, irgendwelche Schnitte zu hören, ist Fake News aufgesessen. Sad!
Schaunotizen
[00:00:17] Das -Element
Das W3C diskutiert ein neues HTML-Element, das die althergebrachten Überschriften bis ersetzen bzw. ergänzen soll. Während wir zwar den Use Case im Prinzip anerkennen, sehen wir aber doch recht viele Probleme: das größte ist, dass das -Element eigentlich ein Sub-Feature des Outline-Algorithmus von HTML5 ist, der seit Jahren unimplementiert vor sich hin schimmelt. Styling ist eine weitere unüberwundene Hürde. Hingegen kritisiert Jake Archibald vor allem eine mangelhafte Entscheidungsgrundlage – es gibt viele Behauptungen und wenig Daten. Prognose: das mit dem -Element wird nichts.
[00:20:56] What’s new in ECMAScript 2017
Pawel Grzybek hat eine kleine Liste mit den Features von ES2017 zusammengetragen und wir sprechen die einzelnen Neuerungen kurz durch. Von async/await über Shared Memory und kleine Neuerungen für Strings und Objekte bis hin zu mehr Kommas für Funktionsparameter lassen wir kein Feature unerwähnt, empfehlen aber für genauere Infos doch die verlinkten Artikel.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
45 min
February 28, 2017 Revision 291: h-Element und ES2017
Peter und Anselm widmeten sich diese Woche in gebotener Kürze einem (vielleicht) neuen HTML-Element sowie den Features von ES2017. Es gab während der Aufnahme keinerlei technische Probleme und wer glaubt, irgendwelche Schnitte zu hören, ist Fake News aufgesessen. Sad!
Schaunotizen
[00:00:17] Das -Element
Das W3C diskutiert ein neues HTML-Element, das die althergebrachten Überschriften bis ersetzen bzw. ergänzen soll. Während wir zwar den Use Case im Prinzip anerkennen, sehen wir aber doch recht viele Probleme: das größte ist, dass das -Element eigentlich ein Sub-Feature des Outline-Algorithmus von HTML5 ist, der seit Jahren unimplementiert vor sich hin schimmelt. Styling ist eine weitere unüberwundene Hürde. Hingegen kritisiert Jake Archibald vor allem eine mangelhafte Entscheidungsgrundlage – es gibt viele Behauptungen und wenig Daten. Prognose: das mit dem -Element wird nichts.
[00:20:56] What’s new in ECMAScript 2017
Pawel Grzybek hat eine kleine Liste mit den Features von ES2017 zusammengetragen und wir sprechen die einzelnen Neuerungen kurz durch. Von async/await über Shared Memory und kleine Neuerungen für Strings und Objekte bis hin zu mehr Kommas für Funktionsparameter lassen wir kein Feature unerwähnt, empfehlen aber für genauere Infos doch die verlinkten Artikel.
45 min