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 242: Nützliche Services und a11y im täglichen Job

30. November 2015 | Kommentare deaktiviert für Revision 242: Nützliche Services und a11y im täglichen Job

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:

[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.

Revision 241: WebGL

8. November 2015 | 4 Kommentare

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:

[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.

Revision 240: Content Blocker

7. November 2015 | 5 Kommentare

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.

Revision 239: Webfonts Best Practices und FLIF

27. Oktober 2015 | Kommentare deaktiviert für Revision 239: Webfonts Best Practices und FLIF

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:

[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“.

Revision 238: Creative Coding, Sass Eyeglass und AMP

18. Oktober 2015 | Kommentare deaktiviert für Revision 238: Creative Coding, Sass Eyeglass und AMP

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:

[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

Revision 237: Remote Work und Informationsnachschub

17. Oktober 2015 | 4 Kommentare

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.

Revision 236: CSS Round Display Spec und Open Source Projekte

6. Oktober 2015 | Kommentare deaktiviert für Revision 236: CSS Round Display Spec und Open Source Projekte

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.

Revision 235: Houdini, Go Lang und Angular 2

3. Oktober 2015 | Kommentare deaktiviert für Revision 235: Houdini, Go Lang und Angular 2

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:

[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:

[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.

Revision 234: Probleme mit Feature-Detection und Vererbung in CSS

20. September 2015 | 8 Kommentare

Auch diese Sendung ist nur leicht besetzt: Anselm und Hans geben ihr bestes aus der aktuellen Themenlage die schönsten Themen zu besprechen.

[00:00:13] News

Node.js v4.0
Node.js wurde in Version 4.0 veröffentlicht. Dies ist die erste Version, die vorne keine Null hat.
Modernizr v3
Lange hat es gedauert, aber nun ist es endlich so weit: Modernizr Version 3 mit vielen neuen Feature-Detects und einem neuen Builder ist da.

Schaunotizen

[00:02:24] The Problems with Feature Detection
Die Veröffentlichung von Modernizr v3 nehmen wir zum Anlasse einmal genauer über Feature-Detection und die damit verbundenen Schwierigkeiten von „False-Positives“ und nicht zu erkennenden Features zu sprechen.
[00:23:20] Back to the :roots
Simurais Artikel „Back to the :roots“ zeigt auf, welche Möglichkeiten CSS von Haus aus mitbringt, um beispielsweise per inherit– oder currentColor-Eigenschaften durch Vererbung zum Theming nutzen kann. Wir diskutieren, wie sich diese Art der Vererbung in Projekten einsetzen lässt und wie unser Vorgehen in solchen Situationen ist.

Revision 233: CSS Layout Techniken

14. September 2015 | Kommentare deaktiviert für Revision 233: CSS Layout Techniken

Dank Post-Nightlybuild-schem Glückssyndrom gehen wir in reduzierter Besetzung aus Anselm und Stefan in die Gefilde der modernen Layout-Techniken.

[00:00:12] News

Mobile Friendly Web Pages using App Banners
Wer seinen Usern mit dreister, großflächiger App-Werbung die Tür zum Content vor der Nase zuschmeißt, wird ab 1. November von Google in den Such-Rankings bestraft. Gute Sache.
Edge und Video
Edge implementiert den WebM Container. Ein Schritt näher zu offenen, hochoptimierten Medienformaten. Der nächste Schritt: Die Allianz für offene Medien.

Schaunotizen

[00:01:47] CSS Grid / Flex Layout
Rachel Andrew hat es sich zum Ziel gesetzt, das CSS Grid Layout Modul solange zu evangelisieren, bis Browser es auch unterstützen. Sie macht das nicht nur hochmotiviert, sondern auch sehr gut. Ihren jüngsten Artikel nehmen wir zum Anlass um über die neuen Layoutmöglichkeiten zu diskutieren. Grundkonsens: Die Spezifikationen sind umfangreich und wirken auf den ersten Blick höchst kompliziert. In der Anwendung sind sowohl Grid– als auch Flexbox höchst einfach. Etwas, auf das wir uns freuen können. Nebenbei erwähnen wir auch noch Vasilis‘ responsive Layout-Techniken, die Media-Query frei funktionieren und großartige Ergebnisse liefern.

[00:35:07] Keine Schaunotizen

Toxy
Node Proxy, der suboptimale Bedingungen simuliert. Von Latenzzeiten bis zum Paketverlust ist alles drin.
Reactive Programming mit ES6
Buzzword oder tolle, neue Progammieridee? Der Artikel gibt Aufschluß.
Front-End Tooling mit Gulp, Yeoman und Bower
Stefan schreibt ein Buch über Front-End Automatisierung. Working Draft Hörer bekommen da mit dem Code fetoolpc eine Menge Rabatt