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.

Revision 294: CSS Grids

22. März 2017 | Keine Kommentare

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:

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:

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.

Revision 293: Web Assembly, Bloat und Web Components

12. März 2017 | 2 Kommentare

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.

Revision 292: Bessere APIs mit GraphQL

6. März 2017 | 3 Kommentare

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.

Revision 291: h-Element und ES2017

28. Februar 2017 | 1 Kommentar

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 <h>-Element
Das W3C diskutiert ein neues HTML-Element, das die althergebrachten Überschriften <h1> bis <h6> 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 <h>-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 <h>-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.

Revision 290: Parse & Compile, Safari 10.1, WebGPU

20. Februar 2017 | Keine Kommentare

In ewiger Jagd nach besserer Audioqualität und stabileren Servern sponsort uns diesmal Wire, der sichere Open Source Messaging Client für all eure Plattformen.

[00:01:04] News

Loading Stylesheets in Body
In Revision 254 besprochen, nun Realität: Chrome kann nun progressiv Stylesheets laden, ähnlich wie JavaScript Dateien.

Schaunotizen

[00:02:48] JavaScript parse and compile time
Bei all den Evangelien zur Web performance neigen wir dazu, die Zeit zu vernachlässigen, in der JavaScript geparsed und kompiliert wird. Die Zeit, die in den meisten Wasserfalldiagrammen gähnend weiße Leere verursacht. Die Leute von Google wollen das nun ändern und gehen gleich in mehreren Artikeln groß darauf ein. Allen voran Addy Osmanis Text zur Startup Performance, aber auch Paul Lewis, der die Parse & Compile Zeit von SPA frameworks verglichen hat. Dazu noch ein Video von Alex Russel und Hinweis auf das PRPL pattern. Nicht nur Google beschäftigt sich damit, sondern auch Nolan Lawson von Microsoft. Wir diskutieren, teilen unsere Erfahrung mit und geben einen Rundumschlag.
[00:29:35] Safari 10.1
Safari 10.1 ist da und — hallo — da hat sich was geändert! Wir gehen die Feature Liste durch und freuen uns über ein paar Entscheidungen, die getroffen wurden. .
[00:38:10] WebGPU
Voll im Trend: Direkter und standardisierter Zugriff auf die Grafikkarte im Web Browser. Apple’s Webkit Engine macht da mit einem neuen Interface von sich reden, so aber auch Google und Mozilla. Die Relevanz für uns Webworker sei mal dahingestellt, spannend ist das Thema trotzdem.

[00:46:00] Keine Schaunotizen

Gatsby
Statischer Seitengenerator mit React.
Web Components, the React way
React und Web Components mischen geht nicht? Stimmt nicht! Der Artikel zeigt, wie man das am Saubersten macht.
Mo.js
Bewegung im Web, schön!

Revision 289: Tiefe Einblicke in die Webpack Entwicklung

18. Februar 2017 | Keine Kommentare

Einem Hörertipp zum Anlass haben wir uns den Autor Tobias Koppers sowie einen der Maintainer, Johannes Ewald, des Webpack Projektes eingeladen und den beiden viele wertvolle Tipps entlockt und über die Zukunft ausgefragt.

Schaunotizen

[00:01:00] Webpack
Wir lassen uns zunächst erklären, was Webpack ist, wer unsere beiden Gäste sind und welche Rolle sie bei Webpack spielen und fragen uns, wofür man Webpack braucht. Natürlich lassen wir uns auch erklären, wie so ein riesiges Open Source Projekt funktioniert und wo die Probleme liegen. Wir lassen uns erklären, warum man ganz einfach zu Webpack 2 migrieren kann und gar keine so großen Unterschiede zwischen den Versionen existieren. Zuletzt fragen wir natürlich noch unsere Gäste über die Zukunftspläne von Webpack aus und stellen fest, dass es an interessanten Ideen definitiv nicht mangelt.

[00:53:00] Keine Schaunotizen

Webpack Open Collective
Hier sammelt das Webpack Team Spenden für die Entwicklung des Projektes.
Google Research HTTP/2 Server Push
Nebenbei sprach Johannes Ewald an, dass er eine Studie von Google Mitarbeitern fand, die HTTP/2 Server Push näher beleuchtet, vor allem wie starke Vorteile das aktuell bringen kann. Das wollen wir euch nicht vorenthalten.

Revision 288: Frontify, Styleguides

15. Februar 2017 | Keine Kommentare

Zur Revision 288 haben wir uns einen Gast aus der Schweiz eingeladen: Roger Dudler, der CTO von Frontify.
Gemeinsam sprechen wir über Frontify und das Thema Styleguides.

Schaunotizen

[00:00:36] Frontify
Roger erzählt über seine Arbeit bei Frontify. Frontify befasst sich vor allem mit Marken-Management und der Zusammenarbeit von Entwicklern und Designern. Außerdem berichtet Roger darüber, wie sie Fractal als Inspiration für die eigenen Ideen genutzt haben. Mehr Informationen zu Zepplin gibt es hier. Fronifys Pattern Library API Module findet hier hier. Roger auf Twitter oder per Mail.

[00:48:46] Keine Schaunotizen

Clean Code concepts adapted for JavaScript
Guidelines zum Schreiben von sauberem JavaScript Code.
The end of the clearfix hack?
Braucht man den Clearfix-Hack bald nicht mehr? display: flow-root; soll das Problem lösen.
Detecting text in an image on the web in real-time
Text von Bildern lesen – mit JavaScript.

Revision 287: Microinformationen und CoderDojo

29. Januar 2017 | 7 Kommentare

Anselm und Hans haben dieses mal Joschi Kuphal (seine Firma, Twitter) zu Gast.

Keine News

Schaunotizen

[00:00:53] Microinformationen
Joschi Kuphal beschäftigt sich seit vielen Jahren mit Microinformationen – Informationen, die gerade Suchmaschinen helfen, Inhalte besser zu erkennen (sein Parser). Aufgrund seiner Expertise, hilft er uns als unwissende das Thema zu verstehen.
Er erklärt uns die Unterschiede zwischen den einzelnen Formaten: Microformats 2, Microdata, JSON LD und RDFa.
[00:43:25] CoderDojo
Joschi hat in Nürnberg aus Eigeninitiative (eigenes Kind) vor ca. 2 Jahren das CoderDojo gegründet. Dort lernen Mentoren mit Kindern spielerisch Robotik und Programmierung. Die Veranstaltungen gibt es weltweit.
Beim CoderDojo in Nürnberg gab es nun eine Crowdfunding Kampagne, um 50 gute Stühle für die Kinder zu besorgen.
Mentoren sind beim CoderDojo überall herzlich willkommen. Wenn man Interesse an der Organisation eines eigenen Dojos hat sollte einfach Leute finden, die mitmachen möchten, und den Anregungen der Mutter-Foundation folgen oder andere CoderDojos fragen.

[01:02:28] Keine Schaunotizen

WDRL – Web Development Reading List | The 2016 Almanac
Anselm hat alle Links seiner WDRL von 2016 in einem übersichtlichen Nachschlagewerk aufbereitet.

Revision 286: Aurelia

23. Januar 2017 | 2 Kommentare

Auf der Reise durch Frontend-Framework-Mordor sehen sich die Gefährten des Teams Working Draft unversehens dem Aurelia-Framework gegenüber. Aber keine Angst: die heldenhafte Katharina Bähr (Blog, Twitter) ist dabei und beantwortet jede Frage, die Schepp, Hans und Peter zu Aurelia haben.

Schaunotizen

[00:01:02] Aurelia
Katharina ist Webentwicklerin bei Zühlke und berichtet von ihren Einsatzerfahrungen mit Aurelia. Aurelia ist ein OpenSource-Projekt (MIT-Lizenz) aus der Feder des ehemaligen Angular-Entwicklers Rob Eisenberg bzw. seiner Firma Blue Spire. Aurelia ist ein modulares Frontend-JavaScript-Framework und setzt auf moderne Webstandards statt Neuerfindungen. So kommt anstelle von Eigenbau-JS-Dialekten ES6 zum Einsatz und Web Components finden ebenfalls Verwendung (aktuelle Typinformationen für TypeScript gibt es natürlich trotzdem). Das Framework folgt dem Convention-Over-Configuration-Paradigma und enthält so ziemlich alle Features, die man von einem Frontend-Framework erwarten würde (Data Binding usw.), einzig Server-Side-Rendering fehlt noch. Des weiteren sprechen wir über die Aurelia-Community, speziell im deutschsprachigen Raum, Aurelia-Plugins (u.A. für jQuery, KendoUI, Electron, Cordova) vergleichen Aurelia mit Ember, React, Angular und Konsorten und sprechen am Ende über geplante Features und Katharinas Wunschzettel für die nächsten Versionen.

[00:54:35] Keine Schaunotizen

How I converted my React app to VanillaJS (and whether or not it was a terrible idea)
Erhellende kleine Reise durch das Innenleben von Frontend-Webapps.
Hyper – HTML/CSS/JS Terminal
Na, wie lange haltet ihr das Video auf der Startseite aus, ehe ihr auf den Download-Button drücken müsst?
Videos vom JS Kongress 2016
Youtube-Playlist mit vielen ca. 25 Minuten kurzen Talks.

Revision 285: Plausch mit Vitaly Friedman

29. Dezember 2016 | 2 Kommentare

Zum Jahresende haben sich Hans, Anselm, Schepp und Stefan niemand geringeren als Vitaly Friedman vom Smashing Magazine eingeladen, um
ausgiebig über aktuelle Trends, Vitalys Werdegang und natürlich das Smashing Magazine zu plaudern.

Schaunotizen

[00:01:24] Vitaly Friedman
Vitaly erzählt uns von seinem Werdegang: Aufgewachsen in Weißrussland kommt er zur Jahrtausendwende nach Deutschland und bringt sich im Autodidakt die nötigen Dinge fürs Web Design bei (und schwört immer noch auf Adobe Imagestyler). Nach einigen Projekten landet er bei Doktor Web und schließlich beim Smashing Magazine.
[00:18:50] Web Performance und Style Guides
Vitaly ist auch als Consultant unterwegs und berät weltweit Firmen zu UX und Technikthemen. Aktuell beschäftigt er sich sehr stark mit Web Performance (siehe oben) und Pattern Libraries. Wir plaudern über aktuelle Technologien und Tools zu diesen Themen, und sind sehr begeistert von Air/Shots, HTTP/2 und Zeplin.
[00:49:52] Des Frequent Flyers Geldspartipps.
Vitaly fliegt viel. Sehr, sehr viel. Viele Reisen bedeuten auch viele kleine Optimierungsmöglichkeiten, wie man das maximale aus einem minimalen Flugbudget bekommt.
[01:12:54] Schreiben für das Smashing Magazine
Das Smashing Magazine hat sich von einer Top-Ten-Listen-Seite zu einem der renommiertesten Web Magazine gemausert. Dazu gehört eine unglaublich genaue Qualitätskontrolle und auch viel Ausmusterung des Contents. Vitaly erzählt über den Review Prozess, Stefan steuert seine eigenen Erfahrungen bei.