Working Draft

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.

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.

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.

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.

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

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.

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.

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.

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.

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.