Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen

Unterstützung

Wir optimieren unser Audio mit Auphonic, wo ihr uns Processing-Time kaufen könnt! Alternativ findet Ihr uns auch auf Patreon:

Become a Patron!

Werben bei Working Draft!

Mit zwölfjähriger Geschichte und über 5.000 Downloads pro Folge ist Working Draft der etablierteste Podcast für Webentwickler im deutschsprachigen Raum. Wenn ihr neue Entwicklerkollegen sucht oder ein Produkt für Webentwickler anbietet, schreibt uns unter sponsoring@workingdraft.de.

Revision 247: Reaktive funktionale Programmierung

31. Dezember 2015 | 5 Kommentare

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

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

Revision 246: Der Blick in die Glaskugel

25. Dezember 2015 | 2 Kommentare

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

[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

Revision 244: Accessibility Deep Dive und ally.js

4. Dezember 2015 | 1 Kommentar

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.

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 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 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 228: Wie Sipgate arbeitet

6. August 2015 | 2 Kommentare

Heute gibt es mal wieder ein Interview von uns, und zwar mit der VoIP-Firma Sipgate zum Thema „Arbeitsstrukturen“. Anlass ist ein sehr detaillierter und wahnsinnig interessanter Artikel der Firma darüber, wie man dort zu Werke geht. Für uns klang das so ungewöhnlich und so gut, dass wir dachten, wir lassen uns das „System Sipgate“ nochmal persönlich erklären. Unsere Gesprächspartner bei Sipgate waren die Texterin Anna Müller und der Backend-Entwickler David Hasenbeck.

Schaunotizen

[00:00:00] Willkommen bei Sipgate! Wie wir arbeiten. Eine Bedienungsanleitung.
„Jedes Unternehmen hat seinen Mikrokosmos mit eigenen Regeln und individuellen Gepflogenheiten — so auch wir bei sipgate. Um neuen Kolleginnen und Kollegen einen schnellen Einstieg in unseren Modus Operandi zu ermöglichen, haben wir diese Bedienungsanleitung verfasst. Und dann festgestellt, dass diese vielleicht auch für andere interessant sein könnte.“ – Oh ja, sehr interessant!

[00:31:41] Verlosung

Gewinnt ein Ticket für die NightlyBuild 2015
Wir verlosen ein Ticket für die Anfang September in Köln stattfindende Abend-Konferenz NightlyBuild 2015. Wer Lust drauf hat, kommentiert hier drunter und landet dann automatisch im Topf. Sinnvolle Kommentare werden bevorzugt.

[00:32:34] Keine Schunotizen

Styling SVG Content with CSS
An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings.

Revision 227: Ask Anselm Anything und Underscore

30. Juli 2015 | 5 Kommentare

An diesem lauen Sommerabend telefonieren sich Anselm, Hans und Peter zusammen, um letzte wichtige Fragen vor dem Urlaub zu klären. Als da wären…

Schaunotizen

[00:00:13] Ask me Anything
Reddit und Sindre Sorhus zum Vorbild, hat Anselm auf GitHub eine sogenannte „Ask me Anything“-Sektion (AMA) aufgemacht, auf der jedermann ihn zu allem befragen kann. Ob er jedem immer antwortet und was das Ganze für einen Sinn haben könnte, das wollen Hans und Peter in einem persönlichen AMA gerne herausfinden. Fest steht: Hans sieht für sich da nicht viel Sinn drin und Peter antwortet bei sich im Blog eigentlich nur auf Fachfragen.
[00:14:57] You Might Not Need Underscore
Peter und Hans unterhalten sich eine gute Dreiviertelstunde über die Nützlichkeit von Underscore bzw. seinem Zwilling lodash, und ob die Bibliotehken dank neuerer ECMAScript Features nicht vielleicht sogar gänzlich überflüssig geworden sind. Wir stellen fest: Beide haben ihre ganz eigenen Perspektiven auf die Dinge.

[00:58:18] Keine Schaunotizen

Introducing Material Design Lite
Google stellt die UI-Bibliothek Material Design Lite vor, die es erlaubt, den Material Design Look & Feel mit jedem beliebigen MVC-Framework zu verheiraten.
Web Platform Incubator Community Group (WICG)
Ihr habt eine Idee für einen neuen nützlichen Webstandard? Ihr habt Lust, Eure Idee bis zu einer Spezifikation voranzutreiben? Diese Community Group soll Euch dabei helfen, Eure Idee zu validieren und sie gedanklich wie auch inhaltlich „zur Marktreife“ zu bringen, auf dass sie am Ende tatsächlich in eine gut durchdachte und dokumentierte Spezifikation münden kann.

Revision 226: Progressive Enhancement

22. Juli 2015 | 1 Kommentar

Diesmal widmen Hans, Rodney und Schepp sich einzig und allein einem Thema, und zwar…

Schaunotizen

[00:00:22] Progressive Enhancement
Angeregt durch eine Diskussion auf Twitter zwischen Jake Archibald und Jeremy Keith, und aufgrund des Artikels von Jeremy, sprachen wir darüber, inwieweit wir das Thema „Progressive Enhancement“ in unsere Projekte implementieren.. Rodney erwähnte dabei Aaron Gustafsons Konzept der Interface Experience Maps. Wir stellten auch fest, dass wenn man eine Single Page Webapp baut, es sehr schwierig wird, einen Ausfall von JavaScript mit einzuplanen.

[00:42:06] Keine Schaunotizen

Watchman
Ein generischer Watcher/Taskrunner, von Facebook. Oldie but Goldie!