Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

June 25, 2013 Revision 125: Bye, Bye, Chrome Frame und Table Layouts
Diese Woche sind fast alle irgendwie unterwegs. Deshalb lud Hans sich Stammgast Anselm Hannemann ein, um ein bisschen über die aktuellen Themen des Web zu sprechen.
Schaunotizen
[00:00:33] Bye, Bye, Chrome Frame
Google wird ab Januar 2014 Chrome Frame nicht weiter supporten oder entwickeln. Dadurch fällt die Möglichkeit moderne Features auch in alten Browsern zu nutzen weg. Wir finden es schade, dass Chrome Frame stirbt, sehen es aber als logische Konsequenz des aktuellen User-Zahlen veralteter Browser.
[00:12:44] CSS stacking with display:table
Mit CSS Flexbox kann man Elemente beliebig sortieren, egal wie sie im Markup eingebunden sind. Ian Devlin zeigt eine Möglichkeit, wie das zumindest teilweise auch mit display: table und anderen display-Werten gemacht werden kann. Anselm führt an, dass das eventuell zu Problemen auf Screenreadern kommen kann, doch ist das tatsächlich so?
[00:23:00] Keine Schaunotizen
Web Development Reading List
Die Reading List von Anselm gibt es nun als tatsächlichen Newsletter. Anmelden!
Why We Need Responsive Images
Eine Auswertung, wie viel Kilobytes man sich mit Responsive Images tatsächlich sparen könnte.
DevTool Secrets
Eine Liste an nützlichen Tips für die Developer Tools. Peter hat zufälligerweise auch einige Tips zusammengetragen.
Grumpicon
Drag and Drop SVGs in die App und man bekommt PNG Fallbacks zurück und die einfachste Möglichkeit diese im CSS einzusetzen.
Web Fonts and the Critical Path
Webfonts können die Ladezeit einer Seite negativ beeinflussen. Dieser Artikel gibt eine gute Übersicht, was man beachten sollte.
Designing for the empty state
Einige Ideen für Apps und Websites, wie man leere Inboxes, Fehlermeldungen und ähnliches gestalten kann.
Front-Trends Videos
Interessante Vorträge von der Front-Trends sind nun online.
HTML Inspector
HTML Inspector ist eine JS Library, die als (HTML) Validator, Konventions-Überprüfer und erweiterungsfähiges Tool funktioniert.
The JavaScript Behind Touch-Friendly Sliders
Es ist nicht so schwierig einen Slider zugänglich für Touch Geräte zu machen. Seht selbst.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
34 min
June 25, 2013 Revision 125: Bye, Bye, Chrome Frame und Table Layouts
Diese Woche sind fast alle irgendwie unterwegs. Deshalb lud Hans sich Stammgast Anselm Hannemann ein, um ein bisschen über die aktuellen Themen des Web zu sprechen.
Schaunotizen
[00:00:33] Bye, Bye, Chrome Frame
Google wird ab Januar 2014 Chrome Frame nicht weiter supporten oder entwickeln. Dadurch fällt die Möglichkeit moderne Features auch in alten Browsern zu nutzen weg. Wir finden es schade, dass Chrome Frame stirbt, sehen es aber als logische Konsequenz des aktuellen User-Zahlen veralteter Browser.
[00:12:44] CSS stacking with display:table
Mit CSS Flexbox kann man Elemente beliebig sortieren, egal wie sie im Markup eingebunden sind. Ian Devlin zeigt eine Möglichkeit, wie das zumindest teilweise auch mit display: table und anderen display-Werten gemacht werden kann. Anselm führt an, dass das eventuell zu Problemen auf Screenreadern kommen kann, doch ist das tatsächlich so?
[00:23:00] Keine Schaunotizen
Web Development Reading List
Die Reading List von Anselm gibt es nun als tatsächlichen Newsletter. Anmelden!
Why We Need Responsive Images
Eine Auswertung, wie viel Kilobytes man sich mit Responsive Images tatsächlich sparen könnte.
DevTool Secrets
Eine Liste an nützlichen Tips für die Developer Tools. Peter hat zufälligerweise auch einige Tips zusammengetragen.
Grumpicon
Drag and Drop SVGs in die App und man bekommt PNG Fallbacks zurück und die einfachste Möglichkeit diese im CSS einzusetzen.
Web Fonts and the Critical Path
Webfonts können die Ladezeit einer Seite negativ beeinflussen. Dieser Artikel gibt eine gute Übersicht, was man beachten sollte.
Designing for the empty state
Einige Ideen für Apps und Websites, wie man leere Inboxes, Fehlermeldungen und ähnliches gestalten kann.
Front-Trends Videos
Interessante Vorträge von der Front-Trends sind nun online.
HTML Inspector
HTML Inspector ist eine JS Library, die als (HTML) Validator, Konventions-Überprüfer und erweiterungsfähiges Tool funktioniert.
The JavaScript Behind Touch-Friendly Sliders
Es ist nicht so schwierig einen Slider zugänglich für Touch Geräte zu machen. Seht selbst.
34 min
June 14, 2013 Revision 124: Screen Readers, CSP und In-depth Script Loading
Kleine Runde, große Spieldauer: In der 124. Revision des Working Drafts beleuchten der Schepp und Stefan eine Reihe eher JavaScript-lastige Themen. Neben dem gewohnten Programm gibt es auch noch eine Verlosung: Sebastian Golasch stellt uns ein Ticket für das Braincamp Cologne zur Verfügung! Unsere Trello Notizen findet ihr hier.
Keine News
Schaunotizen
[00:00:28] Screen Readers at a Crossroads
Auf der letzten Google IO hat man die ChromeVox API vorgestellt. Diese ermöglicht die zusätzliche Annotierung von Webseiten Content speziell für Screen Reader. Große Chance für qualitative Inhalte oder direkter Weg um Unfug anzustellen? Wir versuchen diese Frage zu beantworten und geben die Quintessenz des Artikels der NC State University wieder.
[00:11:58] CSP to the Rescue
Spätestens seit der ersten jQuery EU Konferenz und dem äußerst informativen Primer von Mike West ist die Working Draft Crew erklärter Fan des Content Security Protocols. Twitter hat CSP nun auf ihren Seiten implementiert und den Schalter vorerst auf „Analyse“ gestellt. Perfektes Timing, denn CSP ist in Version 1.0 nun auch in Firefox Aurora.
[00:28:00] Deep dive into the murky waters of script loading
JavaScript laden ist ja eh einfach, oder? Nun, theoretisch schon, praktisch gibt’s da aber eine Menge an Alternativen, die ihr für und wider haben. Jake Archibald listet diese ausführlich auf, die Moderatoren geben fröhlich ihren Senf dazu ab. Die eine wahre Methode? Gibt’s wahrscheinlich nicht. Dafür aber die subsource Ausprägung des rel-Attributs, die uns zumindest neu war.
[00:42:43] Keine Schaunotizen
HTML5 Accesibility
Über den Status der Accessibility Unterstützung in den aktuellen HTML5 Browsern
Fluent Conf 2013
Die Videos der diesjährigen Fluent Conf sind da!
iOS Webkit Debug Proxy
Google veröffentlicht einen Proxy, um in den Dev Tools nicht nur Mobile Safari, sondern auch alle UIWebViews zu debuggen
Portal in CSS3
Eine Szene aus dem Portal Game in CSS3 implementiert. Und nebenbei gute Übersicht über alle 3D Transformationen.
Conditioner
Browsereigenschaften checken und entsprechend Content laden? Das macht der Conditioner.
Picnicc
Parametrisierte Builds, einfach gemacht.
Verlosung: Ticket für BrainCamp Cologne
Wir verlosen ein Ticket zum BrainCamp Cologne! Aufgabe ist easy und an entsprechender Stelle im Podcast zu hören. Antwort einfach in die Kommentare!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
51 min
June 14, 2013 Revision 124: Screen Readers, CSP und In-depth Script Loading
Kleine Runde, große Spieldauer: In der 124. Revision des Working Drafts beleuchten der Schepp und Stefan eine Reihe eher JavaScript-lastige Themen. Neben dem gewohnten Programm gibt es auch noch eine Verlosung: Sebastian Golasch stellt uns ein Ticket für das Braincamp Cologne zur Verfügung! Unsere Trello Notizen findet ihr hier.
Keine News
Schaunotizen
[00:00:28] Screen Readers at a Crossroads
Auf der letzten Google IO hat man die ChromeVox API vorgestellt. Diese ermöglicht die zusätzliche Annotierung von Webseiten Content speziell für Screen Reader. Große Chance für qualitative Inhalte oder direkter Weg um Unfug anzustellen? Wir versuchen diese Frage zu beantworten und geben die Quintessenz des Artikels der NC State University wieder.
[00:11:58] CSP to the Rescue
Spätestens seit der ersten jQuery EU Konferenz und dem äußerst informativen Primer von Mike West ist die Working Draft Crew erklärter Fan des Content Security Protocols. Twitter hat CSP nun auf ihren Seiten implementiert und den Schalter vorerst auf „Analyse“ gestellt. Perfektes Timing, denn CSP ist in Version 1.0 nun auch in Firefox Aurora.
[00:28:00] Deep dive into the murky waters of script loading
JavaScript laden ist ja eh einfach, oder? Nun, theoretisch schon, praktisch gibt’s da aber eine Menge an Alternativen, die ihr für und wider haben. Jake Archibald listet diese ausführlich auf, die Moderatoren geben fröhlich ihren Senf dazu ab. Die eine wahre Methode? Gibt’s wahrscheinlich nicht. Dafür aber die subsource Ausprägung des rel-Attributs, die uns zumindest neu war.
[00:42:43] Keine Schaunotizen
HTML5 Accesibility
Über den Status der Accessibility Unterstützung in den aktuellen HTML5 Browsern
Fluent Conf 2013
Die Videos der diesjährigen Fluent Conf sind da!
iOS Webkit Debug Proxy
Google veröffentlicht einen Proxy, um in den Dev Tools nicht nur Mobile Safari, sondern auch alle UIWebViews zu debuggen
Portal in CSS3
Eine Szene aus dem Portal Game in CSS3 implementiert. Und nebenbei gute Übersicht über alle 3D Transformationen.
Conditioner
Browsereigenschaften checken und entsprechend Content laden? Das macht der Conditioner.
Picnicc
Parametrisierte Builds, einfach gemacht.
Verlosung: Ticket für BrainCamp Cologne
Wir verlosen ein Ticket zum BrainCamp Cologne! Aufgabe ist easy und an entsprechender Stelle im Podcast zu hören. Antwort einfach in die Kommentare!
51 min
June 09, 2013 Revision 123: Cargo-Culting in JS, localStorage und Prerendering
Zur Revision 123 begrüßen wir Stefan Baumgartner als neuen Co-Moderator im Team. Außerdem sind Peter, Schepp und Hans mit von der Partie.
Das Board zur Sendung findet ihr hier.
Keine News
Schaunotizen
[00:00:26] Smartphone Browser localStorage is up to 5x Faster than Native Cache
Eine relativ aktueller Test hat ergeben, dass das Speichern von Daten im LocalStorage eines Smartphones bis zu 5x schneller sein kann als der Browser-Cache. Das widerlegt einige Behauptungen aus der Vergangenheit. Wir sprechen über den zusätzlichen Zeitaufwand, den man mit der Nutzung von LocalStorage investieren muss, aber Schepp erklärt uns, dass es sich lohnt. Das Präsentations-Framework von Peter über das wir sprechen, findet ihr hier.
[00:16:07] Cargo-Culting in JavaScript
James Padolsey ist der Meinung, dass viele Developer Cargo-Culting mit manchen JavaScript Konventionen betreiben. Aber wer von uns nutzt schon den Function-Constructor oder eval? Und Douglas Crockfords Guidelines sind sicher ein guter Anhaltspunkt für JavaScript-Entwickler. Man muss sie nur verstehen, anstatt sie blind zu adaptieren.
[00:28:50] Using HTML5 prerendering to speed up a multi-page registration process
Mit Prerendering von Inhalten und Link-DNS-Prefetching kann man die Performance von vielen Seiten verbessern, gerade wenn man die nächsten Aktionen des Nutzers „vorhersehen“ kann. Aber man muss aufpassen, dass man das Netzwerk nicht zu sehr beansprucht. Vor allem wenn der Nutzer mobil unterwegs ist.
[00:41:38] Glücksrad
CanvasPathMethods
Canvas wird für „normales“ Web-Development eher selten verwendet. Dabei gibt es ziemlich viele Anwendungsmöglichkeiten, die sich mit Fallbacks auch für alte Browser umsetzen lassen. Abstraktionen und Helper gibt es sowieso genug.
[00:48:32] Keine Schaunotizen
How to keep up to date on Front-End Technologies
Listen von interessanten Developern, Podcasts, Blogs und vielem mehr um auf dem aktuellen Stand zu bleiben.
HeidiSQL 8.0
Die Windows SQL Administrationsoberfläche HeidiSQL wurde in Version 8.0 veröffentlicht. Auf Mac macht Sequel Pro glücklich.
XRegExp
Eine JavaScript RegEx Library.
Autoprefixer
CSS Vendor-Prefixes mit JavaScript. Ähnlich wie Prefixfree, nur maintained und besser.
Tern for Sublime
Das Tern-Plugin für Sublime Text, das funktioniert.
Sass Style Guide
Ein paar Tips zum sauberen Aufbau von Sass Code.
Developer MeetUp Freiburg
Hans organisiert am 12. Juni ein Developer und Software Engineering MeetUp in Freiburg. Wer Lust hat kommt vorbei.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
54 min
June 09, 2013 Revision 123: Cargo-Culting in JS, localStorage und Prerendering
Zur Revision 123 begrüßen wir Stefan Baumgartner als neuen Co-Moderator im Team. Außerdem sind Peter, Schepp und Hans mit von der Partie.
Das Board zur Sendung findet ihr hier.
Keine News
Schaunotizen
[00:00:26] Smartphone Browser localStorage is up to 5x Faster than Native Cache
Eine relativ aktueller Test hat ergeben, dass das Speichern von Daten im LocalStorage eines Smartphones bis zu 5x schneller sein kann als der Browser-Cache. Das widerlegt einige Behauptungen aus der Vergangenheit. Wir sprechen über den zusätzlichen Zeitaufwand, den man mit der Nutzung von LocalStorage investieren muss, aber Schepp erklärt uns, dass es sich lohnt. Das Präsentations-Framework von Peter über das wir sprechen, findet ihr hier.
[00:16:07] Cargo-Culting in JavaScript
James Padolsey ist der Meinung, dass viele Developer Cargo-Culting mit manchen JavaScript Konventionen betreiben. Aber wer von uns nutzt schon den Function-Constructor oder eval? Und Douglas Crockfords Guidelines sind sicher ein guter Anhaltspunkt für JavaScript-Entwickler. Man muss sie nur verstehen, anstatt sie blind zu adaptieren.
[00:28:50] Using HTML5 prerendering to speed up a multi-page registration process
Mit Prerendering von Inhalten und Link-
54 min
June 04, 2013 Revision 122: Interview mit Chris Heilmann zu Firefox OS
Letzte Woche haben wir die beyond tellerrand 2013 in Düsseldorf besucht und dabei die Gelegenheit genutzt, Christian Heilmann von Mozilla vors Mikro zu bekommen und ihn zu Firefox OS zu befragen. Das Gespräch haben wir im Foyer aufgenommen, was leider mit vielen Nebengeräuschen einher ging. Sorry dafür.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
35 min
June 03, 2013 Revision 122: Interview mit Chris Heilmann zu Firefox OS
Letzte Woche haben wir die beyond tellerrand 2013 in Düsseldorf besucht und dabei die Gelegenheit genutzt, Christian Heilmann von Mozilla vors Mikro zu bekommen und ihn zu Firefox OS zu befragen. Das Gespräch haben wir im Foyer aufgenommen, was leider mit vielen Nebengeräuschen einher ging. Sorry dafür.
35 min
May 22, 2013 Revision 121: requestAutocomplete, Web Components, Offline-Detection
Neue Browser, alte Probleme – diesmal mit Schepp, Peter und Rodney an den Mikrofonen.
[00:00:20] News
Firefox 21
Frisch released und mit Support für , Scoped Stylesheets (Working Draft berichtete) und ersten Teilen der Crypto-API.
Schaunotizen
[00:01:00] Chrome’s requestAutocomplete()
Chrome hat ein neues Feature, das es Webseiten erlaubt Autocomplete für Formulare anzufordern. Gedacht ist das ganze eigentlich nur für Payment, was Peter etwas einschränkend findet, Schepp aber ob der ranzigkeit der Alternativlösungen für ganz großartig erachtet. Außerdem kommen der Payment Card Industry Data Security Standard und das neuerdings globale hidden-Attribut zur Sprache.
[00:17:06] Web Components
Neben Mozillas X-Tag hat nun auch Google mit Polymer Polyfill-Material für Web Components gebaut. Rodney erklärt den Unterschied zwischen Web Components und Shadow DOM und den diversen Einzelteilen der jeweiligen Technologien.
[00:31:31] Is This Thing On?
Einen eigentlich nur mittelguten Artikel nehmen Rodney und Peter zum Anlass, sich um die beste Story im Bereich „worst of Offline-Status-Festellung im Browser“ zu kabbeln.Weder die HTML5-APIs für den Online-Status noch die Disconnect-Events von Web Sockets noch Event Sources taugen. Rodney kam in seinem Projekt nicht umhin, eine State Machine mit Heartbeats auf Basis von Web Sockets (und Long Polling für Android) zu bauen. Außerdem kommt kurz http://socket.io/ zur Sprache.
[00:35:30] Glücksrad
Sandbox-Attribut
Das Sandbox-Attribut wird es einst erlauben, die Möglichkeiten einer Seite in einem Iframe einzuschränken oder sogar zu erweitern.
[01:01:50] Keine Schaunotizen
Prepros
Das darf man nicht außer Acht lassen: ein Präprozessor-GUI für Windows!
Handy Sass Mixins
Bei diesem Titel sind die Zusammenhänge glasklar.
Codeblock.js
Im Prinzip brauchen wir nur drei Dinge um allen Code zu beschreiben: einen Syntaxhighlighter, einen darin eingebautem Editor und einen „Run“-Button. Alles andere ist unnötig und deshalb enthält dieses Plugin auch nur diese drei Funktionen.
How to Style Google Maps
Dass das überhaupt geht wissen auch nur die wenigsten.
JavaScript Regular Expression Enlightenment
Wie reguläre Ausdrücke funktionieren muss man wissen und dieser Artikel erklärt es in epischer Breite.
Vier Diskussionen
Podcast-Kameraden, bekannt, ja? Nicht? Dann anhören!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 6 min
May 22, 2013 Revision 121: requestAutocomplete, Web Components, Offline-Detection
Neue Browser, alte Probleme – diesmal mit Schepp, Peter und Rodney an den Mikrofonen.
[00:00:20] News
Firefox 21
Frisch released und mit Support für , Scoped Stylesheets (Working Draft berichtete) und ersten Teilen der Crypto-API.
Schaunotizen
[00:01:00] Chrome’s requestAutocomplete()
Chrome hat ein neues Feature, das es Webseiten erlaubt Autocomplete für Formulare anzufordern. Gedacht ist das ganze eigentlich nur für Payment, was Peter etwas einschränkend findet, Schepp aber ob der ranzigkeit der Alternativlösungen für ganz großartig erachtet. Außerdem kommen der Payment Card Industry Data Security Standard und das neuerdings globale hidden-Attribut zur Sprache.
[00:17:06] Web Components
Neben Mozillas X-Tag hat nun auch Google mit Polymer Polyfill-Material für Web Components gebaut. Rodney erklärt den Unterschied zwischen Web Components und Shadow DOM und den diversen Einzelteilen der jeweiligen Technologien.
[00:31:31] Is This Thing On?
Einen eigentlich nur mittelguten Artikel nehmen Rodney und Peter zum Anlass, sich um die beste Story im Bereich „worst of Offline-Status-Festellung im Browser“ zu kabbeln.Weder die HTML5-APIs für den Online-Status noch die Disconnect-Events von Web Sockets noch Event Sources taugen. Rodney kam in seinem Projekt nicht umhin, eine State Machine mit Heartbeats auf Basis von Web Sockets (und Long Polling für Android) zu bauen. Außerdem kommt kurz http://socket.io/ zur Sprache.
[00:35:30] Glücksrad
Sandbox-Attribut
Das Sandbox-Attribut wird es einst erlauben, die Möglichkeiten einer Seite in einem Iframe einzuschränken oder sogar zu erweitern.
[01:01:50] Keine Schaunotizen
Prepros
Das darf man nicht außer Acht lassen: ein Präprozessor-GUI für Windows!
Handy Sass Mixins
Bei diesem Titel sind die Zusammenhänge glasklar.
Codeblock.js
Im Prinzip brauchen wir nur drei Dinge um allen Code zu beschreiben: einen Syntaxhighlighter, einen darin eingebautem Editor und einen „Run“-Button. Alles andere ist unnötig und deshalb enthält dieses Plugin auch nur diese drei Funktionen.
How to Style Google Maps
Dass das überhaupt geht wissen auch nur die wenigsten.
JavaScript Regular Expression Enlightenment
Wie reguläre Ausdrücke funktionieren muss man wissen und dieser Artikel erklärt es in epischer Breite.
Vier Diskussionen
Podcast-Kameraden, bekannt, ja? Nicht? Dann anhören!
1 hr 6 min