Working Draft

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.

In Dreierbesetzung mit Anselm, Hans und Stefan geht es heute um ein recht untechnisches Thema. Schaunotizen [00:00:15] Content Blocker Nachdem mit iOS 9 nun eine sehr zugängliche Möglichkeit geschaffen wurde, schwere Assets auszuknipsen (zum Beispiel Web Fonts oder Werbungen), kommt das Thema vom Ad Blocking bzw. Content Blocking wieder sehr prominent durch. Aktuell zum Beispiel auch bei der Bild, die bei eingeschaltetem Ad Blocker den Zugriff zum Content sperren. Wir betrachten das Thema von verschiedenen Seiten, denken über alternative Businessmodelle nach und stellen uns die Frage: Würden wir für Content zahlen? Und wenn ja, wieviel? [00:26:22] Keine Schaunotizen Khan Coding Style Guides Die Ideen der Khan Academy in Sachen Coding. Von allgemeinen Guidelines bis hin zu sehr spezifischen, z.B. für React. Code Cartoons Die Code Cartoons erklären sehr anschaulich Programmierparadigmen hinter React wie Flux oder Redux.

Eine neue Woche bedeutet auch eine neue Folge Working Draft. Wir rollen das Thema Webfonts mal wieder auf und sprechen über verschiedene Bildformate. Schaunotizen [00:00:22] Using Webfonts in 2015 Anselm hat sich mit den Best-Practices von Webfonts befasst und diese in einem Artikel zusammengefasst. Wir sprechen darüber und stellen die Techniken vor. Weiterführende Links: Brotli Kompressionsalgorithmus Typekit Webfont Loader und Filament Group Font Loading Zach Leatherman on Better @font-face with Font Load Events [00:33:16] FLIF – Free Lossless Image Format Kürzlich wurde das neue Bildformat „FLIF“ veröffentlicht. Dieses Format verspricht noch bessere Datenkomprimierung. Wir vergleichen mit WebP und anderen Bildformaten. Weiterführende Links: https://github.com/antimatter15/weppy [00:46:12] Keine Schaunotizen Inspecting Security and Privacy Settings of a Website Vorstellung des Mozilla Security und Privacy Settings Insepctors. NightlyBuild Conference Videos Die Videos der NightlyBuild Conference sind verfügbar. Thema war „Work-Life-Balance“.

Stefan und Schepp haben heute Martin Schuhfuß eingeladen, der bei den diesjährigen Events der JSConfEU und der OTSConf mit seinen kreativen Entwicklungen für Aufsehen gesorgt hat. Schaunotizen [00:00:12] Creative Coding Martin erzählt uns von seinem „Werdegang“ als Creative Coder, und wie er da grundsätzlich an neue Projekte rangeht. Schepp ergänzt durch seine Erfahrungen beim letztjährigen Beyond Tellerrand Workshop. Neben zahlreichen Spielereien gibt’s da natürlich auch noch einiges tatsächlich sinnvolles zu machen. Ideen und Informationen holen kann man sich hier: Adafruit Hackaday Instructables Creative Coding Podcast [00:21:00] Eyeglass for Sass Sass bietet für die Libsass Implementierung nun eine Möglichkeit, in JavaScript Funktionserweiterungen zu stricken, anstatt wie bislang mühselig mit Ruby oder gar Sass-Syntax zu arbeiten. Wir diskutieren über Sinn und Unsinn, finden wenige Use-Cases und verweise auf das geliebt-gehasste PostCSS, das mit der PostCSS-Functions Erweiterung doch eine viel zugänglichere Möglichkeit dafür bietet. [00:34:19] Accelerated Mobile Pages Google bietet einen Service, um jedermann Facebook-ähnliche Instapages zu ermöglichen. Das ganze basiert auf Webtechnologien und einem Subset, dass hinsichtlich Performance optimiert wurde. Wie alles im Internet sorgt das ganze für Aufregung, sowohl in der einen oder anderen Richtung. Warum, können wir allerdings nicht ganz nachvollziehen. [00:51:29] Keine Schaunotizen Decode HH Martins Design-Concept-Code Meetup braucht dringend kreative Leute, die tolle Dinge zeigen wollen. Perfjankie Perfjankie monitort eure Webseiten und gibt euch Auskunft über lahme Renderzyklen. Surge Supereinfaches Deployment für Seiten. Netlify Ähnlich dem darüber. “Tomato” versus “#FF6347”—the tragicomic history of CSS color names Was hinter Farbnamen alles stehen kann. Get started with functional programming Die Videos der OTS School sind ja alle super, aber dieses eine von Anouk Ruhaak legen wir euch besonders ans Herz Evolutionary Algorithms 101 Ebenso dem von Manuel Ernst CSS Unconf Es wird eine Unkonferenz für CSS geben, die Martin mitorganisiert

Hans, Schepp und Stefan widmen sich heute zwei Meta-Themen: Schaunotizen [00:00:20] Remote First vs Remote Friendly Zach Holmans Beitrag zur Remote-Arbeit nehmen wir zum Anlass um unsere Erfahrungen zu teilen. Wir erläutern, was gut funktioniert, was weniger gut läuft, und auf welche Dinge man achten muss um anständig verteilt zu arbeiten. Hans macht das mittlerweile sehr oft und sehr gern, Schepp holt sich familienbedingt die Abwechslung im Agentur-Büro. Stefan erzählt, dass Remote Work Best Practices auch sehr hilfreich sind, wenn die Büros sich über den Globus verteilen. [00:21:07] The fallacy of keeping up Tim Kadlec schreibt wie er bei neuen Technologien am Ball bleibt. Wir klinken uns da ein und beschreiben unsere Wege, um mit dem neuesten Schritt halten zu können. Viel selektives Lesen, Konzepte statt Frameworks lernen, und Newsletter (vor allem die WDRL) abonnieren. Und natürlich Working Draft hören. [00:48:10] Keine Schaunotizen Why do we have repeating-linear-gradient anyway Ana Tudor ana-lysiert die repeating-linear-gradient Funktion der background-image Eingeschaft aufs Genaueste. Möglichkeiten inklusive Browser-Unterschiede in diesem umfangreichen Artikel. Loupe Loupe zeigt euch was die JavaScript Engine macht wenn Code ausgeführt wird. CSS Vintage Washout Una Kravets‘ Serie über CSS Filtereffekte ist nicht nur außerordentlich unterhaltsam, sondern auch sehr lehrreich. Empfehlenswert!. Chrome DevTools Update Addy Osmani zeigt, was alles neu ist in den Chrome DevTools. HTMLGL HTML Rendering in WebGL? Das ganze noch 100% accessible? Tolle Techdemo mit gutem Artikel. RUM SpeedIndex Berechnet den angenäherten SpeedIndex am Client.

Eine neue Folge des Working Drafts und wir sind mit geballter Manpower am Start. Keine News Schaunotizen [00:00:10] CSS Round Display Level 1 Es gibt einen neuen Vorschlag im Media Query Umfeld: Abfragen für runde Displays. Die Spezifikation befasst sich mit abgerundeten Displays wie für Uhren, jedoch nicht für Achtecke o.Ä. Wir fragen uns, warum man sich nicht auch Gedanken über 3D-Wölbungen macht. Zum Beispiel für den Einsatz von 3D in CSS. Außerdem diskutieren wir den allgemeinen Ansatz dieser Spezifikation und vergleichen mit Media Queries Level 2 und dem Media Type „Handheld“. Unser Fazit: First Public Working Draft, Kaffeesatzleserei unsererseits. [00:15:59] Checklist for your new Open Source JavaScript Project Eric Douglas schlägt einen Checkliste für JavaScript Open Source Projekte vor. Peters Diffsync-JSON-File-Adapter dient uns als Minimal-Diskussionsstartpunkt ohne Tests etc. Nächste Stufe: Store von Hans mit Tests, Doku, Travis und Coverall (maximaler Gewinn mit minimalem Aufwand). Wir nehmen Bezug auf eine kürzlich erschienene Tool-Umfrage. Stefans Perspektive als Teilnehmer an OSS-Projekten: Tests sind das wichtigste. [00:43:47] Keine Schaunotizen iOS9 Viewport Change iOS9 Safari Mobile rendert Webseiten neuerdings anders, wenn man initial-scale=1 or width=device-width setzt. Dies bricht bestehende Websites. Vorsicht, bitte! The Best Regex Trick Der beste Regex Trick, wenn man einen bestimmten String sucht, jedoch nicht, wenn dieser von bestimmten Zeichen umgeben ist.

Es ergab sich, dass wir Philipp Tarasiewicz, AngularJS- und Go-Entwickler, erneut für die Sendung gewinnen konnten. Wir sprechen mit ihm über seine Kernkompetenzen. Schaunotizen [00:01:19] The Performance of Houdini Paint Es gibt einen neuen Player im Pool der Standardisierungen: Houdini, eine Art „Web Components für CSS“ zum Beschreiben von eigener Styling-Funktionalität. Beispielsweise könnte man etwas wie Schepps box-sizing Polyfill damit beschreiben. Wir sprechen über die Aufgaben einer API und diskutieren über bereits bestehende Funktionalitäten, wie beispielsweise Web Animations. Weitere Links: HTML as Custom-Elements [00:11:00] Go Lang Go ist eine von Google entworfene Low-Level Programmiersprache, die zumindest ursprünglich ziemlich systemnah arbeitet. Mittlerweile ist Go eine „General Purpose“ Sprache geworden, die wir in der Diskussion mit C++ und Rust vergleichen. Philipp erklärt uns das gute Ökosystem von Go. Weitere Links: https://github.com/ubolonton/js-csp Go für IOT Zum Start: Go-Webseite reicht [00:35:30] AngularJS 2.0 Wie wir bereits schon öfter angesprochen haben, ist bei Angular zeitnah eine Überarbeitung fällig. Mit Angular 2 wird das Framework aufgeräumt und arbeitet unter der Haube mit Web Components bzw. Polymer. Wir sprechen über Isomorphe Ansätze und den Alpha-Status. Philipp empfiehlt neue Projekte nur mit Angular 2 anzufangen, wenn es sich um langfristige Projekte handelt. Angular 1.x Projekte sollte man dann aber so bauen, dass sie leicht nach Angular 2 zu konvertieren sind. [00:59:53] Keine Schaunotizen What forces layout / reflow Eine Liste an JavaScript-Eigenschaften, die einen Reflow im Browser triggern.