Working Draft

For our 250th episode, we managed to get our greedy hands on no one less than Bruce Lawson from Opera. Having barely returned from a trip to Asia and still dizzy from his jetlag, we managed to extract a whole bunch of classified information on CSS Houdini out of him (also thanks to our German interview style). And a little bit more as well: Show Notes [00:02:01] Safari 9.1 We talked about the new Safari version, what features it brings, and how it looks like it’s the first installment of a new rapid release cycle. [00:12:13] The CSS Houdini Project Bruce told us what the purpose of CSS Houdini is, how at came to be, which parts it consists of, and when to expect first experiments shipping to us in a browser (maybe this year already!). [00:37:50] Subgrids Considered Essential Prompted by a blog post from Eric Meyer we discussed the current CSS Grids spec and how it is badly lacking a subgrids feature. [00:51:18] Links The web accessibility basics Accessibility can never be overly discussed. Marco wrote a good roundup on how do accessibility basics right, and he also takes a glimpse at a few more advanced things. Simple standalone toggletip widget pattern Likewise, Steve Faulkner from the Partiello Group showcases a prototype for an accessible info tooltip widget.

Das ist doch alles kaputt. Entweder sind’s die eigenen Webseiten, die sich partout gegen Wissen und Gewissen wehren, oder gar ganze Dienste, die einem das Blaue vom Himmel für wenig bis gar kein Geld versprechen. Peter, Hans, Anselm und Stefan debattieren über „Gewollt Böse“. Schaunotizen [00:00:26] On Accessibility and the Lack of Proper HTML Was bringt sauberes HTML wenn ein hingeschleudertes DIV ebenso funktioniert und dem gestreßten Webentwickler einiges an Nerven spart. Ja, sogar die Deadline einhalten lässt. Wie sieht der Gute Wille aus, und wie die bittere Realität. Was bringt es, Qualität in seinen Code bringen, wenn es der Benutzer am Ende sowieso nicht sieht. Wir nehmen Ian Devlins Artikel und den von Michiel Bijl als Anlass für die Diskussion. [00:44:36] Choose Your Own HTTPS Dienste wie Cloudflare versprechen HTTPS, HTTP/2, ein CDN, Super Caching und etliche andere Services, die Webseiten schneller, robuster und sicherer machen. Das alles zum Nulltarif. Das es nichts im Leben umsonst gibt, gibt’s natürlich einen Haken. Anselm klärt auf und zeigt die bittere Realität.

Mit Dr. Axel Rauschmayer als Gast haben wir das virtuelle Working Draft Studio kurzerhand in ein ECMAScript-Sprechzimmer umgewandelt. Schaunotizen [00:02:50] ECMAScript 6/7/2015/2016 Axel ist vor allem für seine umfassenden Forschungen zu den neuen Sprachstandards für JavaScript bekannt. In der Sprechstunde nehmen wir sämtliche neuen Sprachfeatures auseinander, reden über syntaktischen Zucker, neue Konzepte und Implementierungen. Außerdem gibt es noch folgendes: Mixins zur Mehrfachvererbung in JavaScript Generator-basierender Flow Control mit co Infos zum TC39 Prozess Aktuelle ECMAScript proposals und ihre Stufe Infos zum TC39 Prozess von Axel selbst Dieses Beispiel, das im Zusammenhang mit Destructuring und Iterables genannt wird: let arr = ['a', 'b', 'c']; for (let [k,v] of arr.entries()) { console.log(`key = ${k}, value = ${v}`); } // Output: // key = 0, value = a // key = 1, value = b // key = 2, value = c Außerdem sprechen wir über das kommende ECMAScript 7, JavaScript Module, und warum die umstrittensten Sachen wie Klassen gleichzeitig zu den wichtigsten fürs JavaScript Ökosystem gehören. Für weitere Informationen empfehlen wir das ECMAScript 6 Buch sowie das Doctor’s Diary. [00:39:54] RollupJS RollupJS ist der neueste Schrei im Modul-Bundling. Hat aber auch einen Grund. Mit ECMAScript 6 Modulen und Technologien wie Tree Shaking kann er etwas, dass bisherige Modulbundler sträflich vernachlässigten: Nur das ins Bundle schmeissen, das man auch wirklich braucht. Der Doktor klärt auf. Auch hier und hier. [01:03:20] Keine Schaunotizen CDNs Rodney kennt eine Menge CDNs, wo JavaScript Developer ihre Bibliotheken gut verteilen können: RawGit (alles von GitHub) BowerCDN (alles von Bower) BrowserifyCDN (alles von NPM) cdnjs jsDelivr TL:DR; Man Pages Wenn Unix manuals zu geschwätzig sind, kommt man mit tldr schnell zu den Beispielen. Do I Use Node Tool, dass dir sagt ob du CSS Features verwendest, die deine zu unterstützenden Browser vielleicht gar nicht können. Chrome CPU Throttling Seit neuestem kann man in den Chrome (Canary) Dev Tools auch die CPU Leistung drosseln. Exploring ES6 Das ECMAScript 6 Buch des Doktors. Setting up ES6 Ein Addon zum vorigen Buch, das sich ums Tool-Setup kümmert.

Zum Jahresabschluss holten wir uns mal wieder den Kahlil ins Haus und besprachen mit ihm das Konzept der reaktiven funktionalen Programmierung anhand der JavaScript-Frameworks cycle.js, Rx und Bacon.js. Schaunotizen [00:00:13] Reaktive funktionale Programmierung Reactive Extensions Cycle.js Bacon.js Observables: Collections auf einer Zeitleiste zur Datentransformation Kahlil: „Es ist wie Rohre legen“ Talk zu Cycle: What if the user was a function? Slides zu Bacon: Functional Reactive Programming and Bacon.js MVI-Pattern, Komponenten, React Grundlagen funktionaler Programmierung [01:14:37] Keine Schaunotizen postcss-bem-linter A BEM linter for postcss stylelint A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Descriptive Podcast zum Thema „Programmer Origin Stories“ Reactive „A podcast in which we merge, filter, scan and map streams of thoughts and talk about software engineering, culture, and technology.“

Da sich das Jahr dem Ende zuneigt, haben sich Rodney und Schepp die Glaskugel geschnappt und wagen ein paar Prognosen für 2016: Welche Webtechnologien werden massenfähig? Welches Framework spielt eine gewichtige Rolle? Mit welcher neuen Technologie dürfen wir herumspielen? [00:00:14] Unsere Prognosen für 2016 Apple kommt in die Pötte Service Workers allerorten Eine exponentielle Zunahme von HTTPS Viele Webserver werden auf HTTP/2 upgraden Immer mehr Produkte werden REST Schnittstellen haben (siehe auch JSON API und HAL) Angular 2 Web Components werden ohne groß Tammtamm eingesetzt (siehe auch What happened to Web Components? und The state of Web Components) Wir werden erste Webseiten mit CSS Grids bauen ES7/Next/2016 kommt auf uns zu und wird dank Babel direkt nutzbar sein (siehe auch: nativer Browsersupport) WebAssembly könnte ein paar interessante Dinge hervorbringen [01:05:03] Keine Schaunotizen The “Blur Up” Technique for Loading Background Images Schöne Art und Weise, niedrigaufgelöste weichgezeichnete Bilder als Platzhalter für die höher aufgelösten zu verwenden

Schepp, Stefan und Peter debattierten Web Components und verteilten die allwöchentliche Ladung Links. Schaunotizen [00:00:10] Web Components und Gremlin.js Angeregt durch das Erscheinen der Minimal-Web-Components-Library Gremlin.js (nicht zu verwechseln mit dem Test-Tool Gremlins.js) plaudern wir über Web Components allgemein. Neben Web Components in unserem Alltag (nicht existent) geht es um Custom Elements, WAI-ARIA, Mutation Observers, und Handlebars.js sowie die möglichen Alternativ-Libraries X-Tag und Polymer. Am Ende stellen wir in Frage, ob für man für den Funktionsumfang von Gremlin.js überhaupt Gremlin.js selbst braucht. [00:37:20] Keine Schaunotizen Zwei Flexbox-Links Flexbox Grid Finesse gibt Tipps für den Einsatz von Flexbox für Grid-Layouts. Flexbox’s Best-Kept Secret zeigt, was man im Flexbox-Kontext mit Auto-Margins anstellen kann. Taking Let’s Encrypt for a Spin Tim Kadlec beschreibt, wie einfach es ist, Let’s encrypt zu verwenden. Optimizing performance of multi-tier web applications using HTTP/2 push Das Push-Feature von HTTP/2 erklärt. HTTP/2 is here! Goodbye SPDY? Not quite yet Warum SPDY auch in einer Welt mit HTTP/2 erst mal noch wichtig ist.

Zur Feierlichkeit des ally.js Release haben sich Rodney, Anselm und Hans niemand geringeren als Marco Zehe eingeladen, der für Mozilla im Bereich Accessibility arbeitet. Schaunotizen [00:01:44] Marcos iPhone Accessibility Erfahrungen Etwas abseits vom Web-Thema lassen wir uns von Marco erzählen, warum iPhones solch eine tolle Sache für Blinde sind und wie er sich damit schnell und einfach selbst in fremden Regionen zurechtfinden kann. [00:17:42] What even is a table? A quick look at Accessibility APIs Wir nehmen dann einen Talk als Anlass, über die Zugänglichkeit von Tabellen zu sprechen und schweifen ab in generelle Diskussionen über Semantik. Wer aber zum Beispiel mit responsive Tables arbeiten möchte, der kann mit einigen Tricks arbeiten und bewusst eine div-Suppe kreieren, die dann mit aria-roles ausgestattet wird, um semantisch wieder zur Tabelle zu werden. Wichtig ist allerdings, dass man abschließend ein aria-readonly="true" Attribut setzt, denn sonst wäre die Tabelle als bearbeitbar gekennzeichnet. [00:47:30] ally.js Unser Rodney hat sich 14 Monate lang damit auseinandergesetzt, wie Accessibility in verschiedenen Browsern umgesetzt wird und eine Art jQuery für Barrierefreiheit gebaut. In diesem kleinen Tutorial kannst du lernen, wie du einen accessible Dialog bauen kannst. Wir besprechen die Probleme damit, dass es viel zu tun gibt und wir hoffen, dass die Library in vielen Projekten zukünftig zu finden sein wird. [01:19:55] Abschließende Accessibility Tipps Abschließend wollte Anselm von Rodney und Marco noch ein paar kleine Alltags-Tipps wissen, die jeder von uns umsetzen kann. Rodney beschreibt seinen Ansatz von Accessibility aus Eigennutz durch Tastaturnutzung, Marco erklärt, warum ein leeres alt="" oft wichtiger ist als gar keins, dass Kontraste wichtig sind und wie ärgerlich es ist, wenn Seiten pinch-to-zoom deaktivieren.

Diesmal haben wir (Peter, Schepp, Hans und Anselm) Mathias Schäfer eingeladen und unterhalten uns über Unlearning und Diversity, sowie den Einstieg in die Webentwicklung. Schaunotizen [00:01:40] Unlearning Mathias hat durch seine Arbeit früher bei selfhtml und heute bei OpenTechSchool tiefe Einblicke in die „Kultur“ der Webentwickler-Community. Wir nehmen das als Anlass und lassen uns von Problemen erzählen, wie schwierig es für Neulinge ist, sich in einer Entwicklergemeinde willkommen zu fühlen. Wir sprechen über Initiativen wie die RailsGirls, nehmen ein Velocity-Conference Video als Anlass darüber, wie wir mehr Diversity erreichen können und kommen leider zwangsläufig auf Negativbeispiele und die Nicht-Willkommenskultur zu sprechen. Wir finden jedoch auch Lösungen, wie zum Beispiel die, privat oder bei der Open Tech School Mentor zu werden. [00:58:51] Links A Cartoon Intro To Redux Eine anschauliche Erklärung der Unterschiede zwischen Flux und Redux als Cartoon. JavaScript dates, trains, Passover, and Henry VIII Wir haben einen sehr interessanten, wenn auch lang und komplizierten Beitrag zum Thema JavaScript Dates gefunden. Mozilla’s Service Workers Cookbook Eine Kollektion an Service Worker Beispielen. Und hier könnt ich nachsehen, welche Service Worker features ihr wo benutzen könnt. Model View Culture Magazine Passend zu unserem Hauptthema haben wir hier noch einen Link zu einem guten Magazin über Technologie und Diversity-Kultur.

Eine einfache Sendung mit allgemeinen Themen ohne Aufhänger. [00:00:16] News Object.observe ist tot Das ECMAScript-Komitee hat entschieden, Object.observe als „veraltet“ zu markieren und aus der Spezifikation zu streichen, da die Funktionalität nicht den erwarteten Anklang findet. Schaunotizen [00:01:00] Welche Services nutzen wir als Web-Entwickler in Projekten („SaaS“)? Bezahlte Services werden im Entwickler-Alltag immer gebräuchlicher. Wir sprechen darüber, welche Dienste wir nutzen und warum. Ingesamt lässt sich feststellen, dass jeder von uns für Dienste zahlt, es als Freelancer jedoch schwierig ist bei jedem Projekt die Dienste zu verwenden, die man gerne nutzen würde. Ähnlich verhält es sich auch bei großen Firmen, wie Rodney schildert.Einige der erwähnten Dienste: BrowserStack and SauceLabs – bieten VMs für automatisiertes Testing, kostenlos für Open Source Projekte Code Climate – automatisierte Code Analyse, kostenlos für Open Source Projekte Travis CI – Build server, kostenlos für Open Source Projekte MaxCDN – Content Delivery Network, kostenlos für Open Source Projekte newrelic.com – Logging und mehr für Front- und Backend [00:26:45] Wie gehen wir mit Accessibility in der täglichen Arbeit um? Jeder behandelt die Zugänglichkeit von Websites in Projekten anderes. Offizielle Stellen müssen sich an bestimmte Guidelines und Standards halten, die freie Industrie hingegen nicht. Wie wir mit Accessibility in unserer Arbeit umgehen besprechen wir ausführlich. Manchmal ist es schon ganz einfach, wie dieser Artikel von Ebays Techteam zeigt.

Diesmal konnten wir wieder einen Gast bei uns begrüßen, und zwar Kai Niklas. Kai beschäftigt sich seit einiger Zeit mit OpenGL und seinem Abkömmling WebGL, programmiert 3D-Anwendungen und tourt als Trainer für OpenGL durch Deutschland. Und so verwundert es kaum, dass wir mit ihm zusammen das Thema „WebGL“ erkunden. Schaunotizen [00:01:54] WebGL Im Laufe unseres Gesprächs fielen diverse Stichworte und Links, die Ihr nachfolgend findet: Die Khronos Group spezifiziert OpenGL und WebGL OpenCL und WebCL, analog zu OpenGL und WebGL die „Compute Languages“ zum Berechnen von Dingen WebGL Browsersupport Anwendungsfälle: Virtuelle Museen, 3D Charts, Produkt Konfiguratoren oder Customer Experiences Die WebGL-Frameworks Three.js Babylon.js und Blend4Web Blender als Autorenwerkzeug für 3D (also Modellieren, Szenerien zusammenstellen, Beleuchten, Texturieren) Autodesks ImageModeler als ein Werkzeug, das 3D-Modelle aus Fotografien erzeugen kann Shadertoy, Shdr und RenderMonkey als Autorenwerkzeuge für WebGL-Shader (Vertex-, sowie Pixel-/Fragement-Shader) Die Swiftless-Online-Tutorials zum Erlernen der OpenGL/WebGL Basics Die Seiten von Three.js, Shadertoy, sowie die Chrome WebGL Experiments als Inspirationsquellen (und zum Abgucken) Und ein Blick in die Zukunft auf den OpenGL-Nachfolger „Vulkan„ [00:45:31] Keine Schaunotizen mdcss Mit mdcss kann man Markdown-Kommentare direkt in seinem CSS verbauen und aus diesem CSS dann einen Styleguide kompilieren. Buchtipp: CSS Secrets Lea Verou hat ein Buch geschrieben, in das nicht nur die CSS Tricksereien ihrer vergangenen Talks geflossen sind, sondern noch einige Geheimnisse mehr stecken. Das Gute an dem Buch ist: Die Tipps haben durchaus Praxisrelevanz.