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

May 24, 2014 Revision 172: Interview mit Chris Coyier
Wie jedes Jahr waren wir auch diesmal zu mehreren auf der beyond tellerrand und haben einen Speaker in einen Hinterhalt gelockt, aus dem er erst nach einem Interview mit uns wieder freigelassen wurde. Unsere Beute diesmal: Niemand geringeres als Chris Coyier von CSS Tricks, Codepen.io und Shoptalkshow, auch bekannt als „Die Rampensau“! :) Wir stellten viele Fragen über seinen Werdegang, und sein täglich Brot und Butter. Viel Spaß!
31 min
May 24, 2014 Revision 171: Drag & Drop erklärbärt
Wir freuen uns außerordentlich mit dem ehemaligen Dauergast Anselm Hannemann einen neuen Moderator in unserer Runde begrüßen zu dürfen. Zur Feier des Tages legen wir auch gleich mit einer tiefgehenden Analyse der Drag & Drop API los und spielen (mehr oder weniger) wieder HTML5 Glücksrad.
[00:00:32] News
Atom.io
GitHubs Webtechnologien Editor wird frei und Open Source. Finden wir gut!
Schaunotizen
[00:00:56] Drag & Drop erklärbärt
HTML5 Erklärbär Peter hat sich sehr eingehend mit einer seit Urzeiten vorhandenen API beschäftigt, und Drag & Drop sowohl aus Entwickler-, Anwender- und Historikersicht eingehend aufgearbeitet. Wir erfahren, warum Drag & Drop so eine unglaublich grausame API hat, man gefühlte 2 Millionen Events binden muss und warum Browserdefaults eigentlich mal gegen alles sind. Kleiner Spoiler: Der IE ist an allem Schuld. Außerdem gibt’s etymologische Aufklärung in Sachen Planeten mit dem Paradebeispiel Neptun. Und ja, das hat auch was mit dem eigentlichen Thema zu tun.
[00:53:11] Glücksrad
das ruby Element
Glücksfee Anselm landet beim Scrollen in einem uns sehr bekannten Thema. Um die unendliche Geschichte zu vermeiden scrollt der Wandernde vom Alten Berg noch einmal und landet bei den ruby-Elementen
[00:59:40] Keine Schaunotizen
Gremlins.js
Mit dieser JS Bibliothek könnt ihr eine Gremlin Horde auf eure App loslassen und sie einem UI Stresstest unterziehen.
Git Code School
Vorausgesetzt die Server antworten, könnt ihr mit diesem interaktiven Tutorial Git von Grund auf erlernen.
Accessible SVG
SVG ist nicht nur Endprodukt einer Illustrator Speicheroption, sondern kann durchaus Semantik enthalten. Wie man auf ARIA-Ebene diese richtig einsetzen kann, zeigt dieser Sitepoint Artikel.
HTML5 Device Orientation
Ebenfalls auf Sitepoint: Ein guter Artikel zur Device Orientation API. Sehr vollständig und gut illustriert.
[00:00:00] Tipp der Woche
Argumentationsfeuer für Designsünden
Wir alle wissen, dass Scrolling-Areas in Scrolling-Areas nicht funktionieren und kein Mensch Share Buttons klickt. Mit diesem Artikel beim Baymard Institute und den Datenerhebungen von Luke Wroblewski habt ihr nun auch harte Fakten, die ihr im Notfall entgegenhalten könnt.
1 hr 4 min
May 24, 2014 Revision 170: Inline SVGs vs Icon Fonts, Adaptive Placeholders und currentScript
Eine kurze und knackige Episode zu diversen Themen, inklusive den Gewinnern der Verlosung aus Revision 167
[00:00:00] News
Firefox 29
Firefox 29 ist da, inklusive CSS Variablen und will-change Attribut hinter Flag, und einer nicht prefixten Implementierung von box-sizing.
Schaunotizen
[00:00:46] Icon Fonts vs SVG
Chris Coyier schreibt über die Vor- und Nachteile von Icon Fonts und (Inline) SVG, und schlägt sich mit nur wenigen Abstrichen ganz klar auf die Seite der skalierbaren Vektoren. Wir sinnieren über Seperation of concerns, fallbacks, mögliche Sicherheitslücken und resümieren mit unseren eigenen Erfahrungen.
[00:13:20] Adaptive Placeholders
Auch bekannt als das Float Label Pattern sind „Adaptive Placeholders“ der nächste Usability Schrei da draussen. Das jetzt viele Leute (u.a. auch Jonathan Snook) mit diversen Implementierungen versuchen die Grundidee optimal zu implementieren, zeigt nur wie sympathisch diese Idee Designern wie Entwicklern ist. Dass man allerdings nicht allen JavaScript-freien Implementierungen trauen soll und manches Mal das Web ganz schön verbogen wird, zeigen wir.
[00:23:10] Identifying the current
42 min
May 24, 2014 Revision 170: Inline SVGs vs Icon Fonts, Adaptive Placeholders und currentScript
Eine kurze und knackige Episode zu diversen Themen, inklusive den Gewinnern der Verlosung aus Revision 167
[00:00:00] News
Firefox 29
Firefox 29 ist da, inklusive CSS Variablen und will-change Attribut hinter Flag, und einer nicht prefixten Implementierung von box-sizing.
Schaunotizen
[00:00:46] Icon Fonts vs SVG
Chris Coyier schreibt über die Vor- und Nachteile von Icon Fonts und (Inline) SVG, und schlägt sich mit nur wenigen Abstrichen ganz klar auf die Seite der skalierbaren Vektoren. Wir sinnieren über Seperation of concerns, fallbacks, mögliche Sicherheitslücken und resümieren mit unseren eigenen Erfahrungen.
[00:13:20] Adaptive Placeholders
Auch bekannt als das Float Label Pattern sind „Adaptive Placeholders“ der nächste Usability Schrei da draussen. Das jetzt viele Leute (u.a. auch Jonathan Snook) mit diversen Implementierungen versuchen die Grundidee optimal zu implementieren, zeigt nur wie sympathisch diese Idee Designern wie Entwicklern ist. Dass man allerdings nicht allen JavaScript-freien Implementierungen trauen soll und manches Mal das Web ganz schön verbogen wird, zeigen wir.
[00:23:10] Identifying the current
42 min
May 04, 2014 Revision 169: Plausch im Biergarten
Da Peter und Jens Grochtdreis zufällig gerade in Düsseldorf weilten, wo sie über drei Tage verteilt ihre HTML5 MasterClass gaben, dachte Schepp sich: Warum nicht das Angenehme mit dem Nützlichen verbinden, sich mit den Jungs im Biergarten treffen, und ein Mikro auf den Tisch stellen? Gesagt, getan! Statt über das übliche Nerd-Zeugs zu reden, rekapitulierten wir, wie wir im Laufe der Jahre durch Ereignisse und Dinge die wir bewusst taten zu dem beruflichen Punkt angelangten, an dem wir jetzt stehen.
Da wir in einem Biergarten nahe einer Straße saßen, kann die Tonqualität diesmal nicht ganz mit denen der übrigen Folgen mithalten. auphonic hat allerdings wieder mal etwas sehr Brauchbares herbeigezaubert. <3
[00:42:21] Keine Schaunotizen
gitignore.io
Create useful .gitignore files for your project
PuPHPet
Online GUI Configurator for Puppet & Vagrant
Adobe’s Project Parfait
PSD CSS Extraction, Measurements and Image Optimization Service for the Web
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
45 min
May 04, 2014 Revision 169: Plausch im Biergarten
Da Peter und Jens Grochtdreis zufällig gerade in Düsseldorf weilten, wo sie über drei Tage verteilt ihre HTML5 MasterClass gaben, dachte Schepp sich: Warum nicht das Angenehme mit dem Nützlichen verbinden, sich mit den Jungs im Biergarten treffen, und ein Mikro auf den Tisch stellen? Gesagt, getan! Statt über das übliche Nerd-Zeugs zu reden, rekapitulierten wir, wie wir im Laufe der Jahre durch Ereignisse und Dinge die wir bewusst taten zu dem beruflichen Punkt angelangten, an dem wir jetzt stehen.
Da wir in einem Biergarten nahe einer Straße saßen, kann die Tonqualität diesmal nicht ganz mit denen der übrigen Folgen mithalten. auphonic hat allerdings wieder mal etwas sehr Brauchbares herbeigezaubert. <3
[00:42:21] Keine Schaunotizen
gitignore.io
Create useful .gitignore files for your project
PuPHPet
Online GUI Configurator for Puppet & Vagrant
Adobe’s Project Parfait
PSD CSS Extraction, Measurements and Image Optimization Service for the Web
45 min
April 30, 2014 Revision 168: Monitore, Bildkompression, Links
Als Gast konnten Schepp, Hans und Peter diesmal Paul Bakaus begrüßen (bekannt für jQuery UI, später bei Zynga), der heute als Developer Advocate für Google unterwegs ist.
Schaunotizen
[00:01:05] The Illusion of Motion
Paul klärt uns über die Hintergründe von Bildschirmdarstellung auf. Die Kernfrage ist: warum zielen wir bei der Performanceoptimierung im Web auf 60 FPS, wenn doch z.B. Filme mit 24 FPS auskommen? Wir reden über Bewegungsunschärfe, das amerikanische Stromnetz, das Auge, CRTs und LCDs, den Flicker Fusion Threshold, G-Sync, Fernseher und Fernseherhersteller, Zwischenbildberechnung sowie die Lufthansa.
[00:25:11] Bildkompression
Paul wundert sich, warum so wenig in Sachen Bildkompression passiert, obwohl dort doch das meiste Optimierungspotenzial schlummert. Trotzdem es so manches Tool gibt (wir erwähnen unter anderem ImageAlpha, JPEGMini, adept-jpg-compressor und pngquant) fehlt es noch an ausreichend smarten Tools. Auch WebP (und den damit verbundenen Griff ins Klo durch Facebook), Photoshops Generator-Funktionalität für Bilder und ein Performance-Artikel von Luke Wroblewski kommen zur Sprache.
[00:47:01] Winning for Users
In einem Artikel empfiehlt Paul eine auf die User ausgerichtete Argumentationslinie für Webtechnologie. Peter lässt es sich nicht nehmen, den Advocatus Diaboli für Native Apps zu spielen. Schepp empfiehlt in diesem Kontext den spektakulären Talk „How to destroy the web“ von Bruce Lawson.
[01:02:32] Keine Schaunotizen
Cheat Sheets für Shadow DOM und Github
Vor allem letzterer ist von epischer Länge und Tiefe.
Understanding CSS Timing Functions
Wirklich alles was es über Timing Functions zu wissen gibt.
BrowserStage: Web Automation That Just Works
Wir haben es nicht getestet, aber einen Blick scheint dieses Produkt wert.
Conditioner.js
Zitat: Frizz free, environment-aware, javascript modules.
Düsseldorfer Web Platform Doc Sprint
Am 18. Mai Docs schreiben und grillen in Düsseldorf .
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 8 min
April 30, 2014 Revision 168: Monitore, Bildkompression, Links
Als Gast konnten Schepp, Hans und Peter diesmal Paul Bakaus begrüßen (bekannt für jQuery UI, später bei Zynga), der heute als Developer Advocate für Google unterwegs ist.
Schaunotizen
[00:01:05] The Illusion of Motion
Paul klärt uns über die Hintergründe von Bildschirmdarstellung auf. Die Kernfrage ist: warum zielen wir bei der Performanceoptimierung im Web auf 60 FPS, wenn doch z.B. Filme mit 24 FPS auskommen? Wir reden über Bewegungsunschärfe, das amerikanische Stromnetz, das Auge, CRTs und LCDs, den Flicker Fusion Threshold, G-Sync, Fernseher und Fernseherhersteller, Zwischenbildberechnung sowie die Lufthansa.
[00:25:11] Bildkompression
Paul wundert sich, warum so wenig in Sachen Bildkompression passiert, obwohl dort doch das meiste Optimierungspotenzial schlummert. Trotzdem es so manches Tool gibt (wir erwähnen unter anderem ImageAlpha, JPEGMini, adept-jpg-compressor und pngquant) fehlt es noch an ausreichend smarten Tools. Auch WebP (und den damit verbundenen Griff ins Klo durch Facebook), Photoshops Generator-Funktionalität für Bilder und ein Performance-Artikel von Luke Wroblewski kommen zur Sprache.
[00:47:01] Winning for Users
In einem Artikel empfiehlt Paul eine auf die User ausgerichtete Argumentationslinie für Webtechnologie. Peter lässt es sich nicht nehmen, den Advocatus Diaboli für Native Apps zu spielen. Schepp empfiehlt in diesem Kontext den spektakulären Talk „How to destroy the web“ von Bruce Lawson.
[01:02:32] Keine Schaunotizen
Cheat Sheets für Shadow DOM und Github
Vor allem letzterer ist von epischer Länge und Tiefe.
Understanding CSS Timing Functions
Wirklich alles was es über Timing Functions zu wissen gibt.
BrowserStage: Web Automation That Just Works
Wir haben es nicht getestet, aber einen Blick scheint dieses Produkt wert.
Conditioner.js
Zitat: Frizz free, environment-aware, javascript modules.
Düsseldorfer Web Platform Doc Sprint
Am 18. Mai Docs schreiben und grillen in Düsseldorf .
1 hr 8 min
April 22, 2014 Revision 167: Das Decentralize Camp
Die aktuelle Sendung steht ganz im Zeichen der Dezentralisierung. Passend dazu sind Marc Thiele und Bastian Allgeier als Gäste mit dabei, die gemeinsam am 21. Mai das erste Decentralize Camp veranstalten.
[00:00:32] News
CSS Line Grid Module Level 1
Working Draft: Das CSS Line Grid Module befasst sich damit, Inhalte an einer vertikalen Baseline auszurichten.
CSS Extensions
Achtung: Editor’s Draft! Dieser spezifiziert die Möglichkeit der Erweiterung von CSS mittels eigener Eigenschaften, at-Rules, Selektor-Kombinationen und mehr.
Schaunotizen
[00:01:57] Decentralize Camp
Das erste Decentralize Camp findet am 21. Mai 2014 in Düsseldorf statt und kostet gerade mal 30 Euro! Anmeldungen werden auf der Website entgegen genommen.
[00:46:57] Verlosung: Tipp, wie man seine Daten „befreien“ kann
Wer einen guten Tipp oder ein gutes Howto parat hat, mit dem man seine Daten aus den großen Datensilos heraus in heimische Gewässer bekommt, der poste es in den Kommentaren. Jeder nimmt dann automatisch an einer Verlosung zweier Karten für das Decentralize Camp teil.
[00:53:13] Keine Schaunotizen
Meine eigene kleine Datenwolke
Tom Arnold berichtet über seine Erfahrungen mit ownCloud, seiner eigenen, dezentralen Cloud.
RegExr
RegExr ist das perfekte Tool zum Testen von Regulären Ausdrücken.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
56 min
April 21, 2014 Revision 167: Das Decentralize Camp
Die aktuelle Sendung steht ganz im Zeichen der Dezentralisierung. Passend dazu sind Marc Thiele und Bastian Allgeier als Gäste mit dabei, die gemeinsam am 21. Mai das erste Decentralize Camp veranstalten.
[00:00:32] News
CSS Line Grid Module Level 1
Working Draft: Das CSS Line Grid Module befasst sich damit, Inhalte an einer vertikalen Baseline auszurichten.
CSS Extensions
Achtung: Editor’s Draft! Dieser spezifiziert die Möglichkeit der Erweiterung von CSS mittels eigener Eigenschaften, at-Rules, Selektor-Kombinationen und mehr.
Schaunotizen
[00:01:57] Decentralize Camp
Das erste Decentralize Camp findet am 21. Mai 2014 in Düsseldorf statt und kostet gerade mal 30 Euro! Anmeldungen werden auf der Website entgegen genommen.
[00:46:57] Verlosung: Tipp, wie man seine Daten „befreien“ kann
Wer einen guten Tipp oder ein gutes Howto parat hat, mit dem man seine Daten aus den großen Datensilos heraus in heimische Gewässer bekommt, der poste es in den Kommentaren. Jeder nimmt dann automatisch an einer Verlosung zweier Karten für das Decentralize Camp teil.
[00:53:13] Keine Schaunotizen
Meine eigene kleine Datenwolke
Tom Arnold berichtet über seine Erfahrungen mit ownCloud, seiner eigenen, dezentralen Cloud.
RegExr
RegExr ist das perfekte Tool zum Testen von Regulären Ausdrücken.
56 min