Working Draft

Wöchentlicher News-Podcast für Webdesigner und -entwickler

Spenden für Soundqualität!

Alle Spenden fließen zu 100% in die Anschaffung von besserer Aufnahme-Hardware.

Revision 174: Front-End-Workflow

15. Juni 2014 | 7 Kommentare

Schepp, Anselm und Hans fanden sich für Revision 174 zusammen und referieren zum Spezial-Thema Moderner Front-End-Workflow.

[00:00:13] News

Launching status.modern.ie & Internet Explorer platform priorities
Microsoft veröffentlich status.modern.ie als Open Source Projekt und hofft auf die Hilfe beim erfassen von Feature-Support in den übrigen Browsern. Außerdem steht die nächste Version des Internet Explorers an.
Understanding web pages better
Googles Page Crawling Algorithmus versteht nun noch mehr JavaScript.
Preview the new caniuse.com features
Eine Preview des neuen caniuse.com-Designs.

Schaunotizen

[00:02:27] Moderne Art zu entwickeln (agil, modular, etc.)
Was ist eigentlich die moderne Art zu Entwickeln? Hilft agiles Development (zum Beispiel mit Scrum) uns Entwicklern oder verbreiten die vielen Meetings eher Unmut? Wir sprechen auch über komponenten-basiertes Entwickeln, gerade im Bezug auf große Webprojekte.
[00:38:25] How ‘DevOps’ is Killing the Developer
Christoph Rumpel ist der Meinung, dass wir die Rolle von DevOps näher beleuchten sollten. Was sich hinter dem Begriff DevOps verbirgt und wie wir in unseren Teams mit den Arbeiten abseits der eigentlichen Web-Programmierung umgehen, diskutieren wir.
[00:52:12] A Maintainable Style Guide
Style Guides helfen ein Projekt zwischen Designern und Entwicklern besser zu managen und die Kommunikation zu erleichtern. Ian Feather ist der Meinung, dass Style Guides nur Sinn machen, wenn Sie mit dem Code aus dem Projekt selbst erstellt werden und beschreibt die Technik, die Lonely Planet verwendet, um ihren Style Guide zu erzeugen. Wir besprechen diese und decken die Vor- und Nachteile auf.

[01:08:03] Keine Schaunotizen

XSS Game
Ein Hacker-Game mit dem man Cross-Site-Scripting lernt und so Attacken vermeiden kann.
Implement Custom Gestures
Eine Rund-Um-Erklärung zu Touch Input Gesten auf technischer und user-experience Ebene.

Revision 173: Neues aus der Zukunft

30. Mai 2014 | Keine Kommentare

Da die Themenliste nach dem Ausmisten diesmal etwas dünn ausfiel, besprachen Schepp, Anselm und Peter einfach drei neue Features in Chrome 36, der jüngst den Beta-Status erreicht hat.

Schaunotizen

[00:00:35] element.animate()
JavaScript-Animationen steigen aus den Gräbern empor – allerdings in einer mit der CSS-Animations-Engine verzahnten und daher sehr performanten Form. Wer performante JS-Animationen schon heute haben will kann entweder auf einen Polyfill oder die Library VelocityJS zurückgreifen. Jake Archibald hat die Details zu der neuen Animations-API mal im Smashing Magazine aufgeschrieben
[00:07:46] HTML Imports
Klingt wie include() aus PHP, ist aber besser! HTML Imports laden und parsen HTML-Dokumente, die für JS als Document-Objekt bereitgestellt werden. Das Ganze funktioniert auch mit CORS, hat ein async-Attribut und kann via Vulcanize optimiert werden. Peter erklärt die JS-API und Use Cases für HTML Imports, während sich Schepp wehmütig an glorreiche Tage mit XSLT zurückerinnert.
[00:17:28] Object.observe()
Während DOM Mutation Observers das DOM auf Änderungen überwachen (siehe Revision 148), achtet Object.observe() auf alle Arten von JS-Objekten (und Array.observe() auf Arrays). Wichtig ist das vor allem für die Data-Binding-Funktionalität in modernen MVC-Frameworks. Nachdem wir den fälligen Polyfill erwähnt haben, schweifen wir etwas ab und reden auch noch über HTC-Dateien im alten IE, CSS Expressions im alten IE und Polymer (für alles außer dem alten IE)

[00:34:30] Keine Schaunotizen

EmpireJS
Konferenztalks auf Youtube.
Compressor Head
Datenkompression als solche anschaulich als Video erklärt.
Fluxxor
Facebooks M und C für die Kombination mit der View-Engine React.
Performance Budget with Grunt
Ein Grunt-Task, der motzt, wenn man langsame Webseiten baut.
Script-injected “async scripts” considered harmful
Ein subtiles Detail über dynamisch eingefügte Scripts.

Revision 172: Interview mit Chris Coyier

24. Mai 2014 | 2 Kommentare

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ß!

Revision 171: Drag & Drop erklärbärt

24. Mai 2014 | Keine Kommentare

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.

Revision 170: Inline SVGs vs Icon Fonts, Adaptive Placeholders und currentScript

24. Mai 2014 | Keine Kommentare

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 <script> element
Unser JavaScript Guru Rodney hält eine Audienz der JavaScript Eminenz Axel Rauschmayer, und zeigt uns was mit neuen JavaScript APIs wie document.currentScript und document.scripts getan werden kann, und wozu das eigentlich gut ist.
[00:33:25] Gewinner Decentralize Camp
In Revision 167 wollten wir von euch wissen, wie man seine Daten “befreien” kann. Als Gewinn winken zwei Tickets zum Decentralize Camp am 21. Mai in Düsseldorf. Gewonnen haben Sebastian und Philip, wie Rodneys unparteiisch einwandfreies Auswahl-Skript entschied.

[00:37:30] Keine Schaunotizen

JavaScript Promises in Wicked Detail
Noch Fragen zu JavaScript Promises? Hier wird alles äußerst ausführlich beantwortet.
The difference between Sass and SCSS
Den Unterschied zwischen den beiden Syntax-Varianten von Sass sollten mittlerweile alle Anwender kennen. Die geschichtlichen Hintergründe sind vielleicht noch unbekannt. Hugo Giraudel klärt auf.
The Secret Messages Inside Chinese URLs
Etliche Aha-Effekte in diesem Artikel, der zeigt warum 888888888.com für China eine ganz tolle Domain ist.
webcomponents.org
Web Components sind das nächste große Ding, das Portal ist das dazu passende Wissensarchiv.

Revision 169: Plausch im Biergarten

4. Mai 2014 | 3 Kommentare

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

Revision 168: Monitore, Bildkompression, Links

30. April 2014 | 2 Kommentare

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 .

Revision 167: Das Decentralize Camp

22. April 2014 | 6 Kommentare

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.

Revision 166: Open Source, React und AssetGraph

20. April 2014 | Keine Kommentare

Eine weitere Woche mit einem Gast. Diesmal ist Pascal Hartig aka. Passy vom Yeoman- und Todo-MVC-Team mit dabei.

Keine News

Schaunotizen

[00:00:58] Open Source
Pascal spricht über seine Arbeit im Open-Source-Bereich und erzählt vom Anfang seiner Karriere mit 24 Pull Requests. Dadurch wurde vom TodoMVC-Team rekrutiert, kurz danach folgte Yeoman, dann Bower und nun arbeitet er bei Twitter in London.
Pascal erzählt von der Balance zwischen “normaler” Arbeit und Open Source, dem Unterschied zwischen einer kleiner Agentur und der großen Firma Twitter.
Für alle, die auch so enden möchten, gibt er als Tipp, dass man konsistent an OSS Projekten mitarbeitet und nicht nur hier und da ein Pull Request erstellt.
[00:20:43] React
Pascals Wunschthema ist Facebooks React, eine Bibliothek für User Interfaces, dessen Hauptfunktion die Erstellung von wiederverwertbaren Komponenten ist. Pete Hunts Talk gibt nähere Einblicke zur Funktionalität: HTML in JS durch virtuelles DOM erstellen, das mit nativem DOM verglichen wird. Das Interessante an React ist, dass es auch mit anderen Frameworks, wie AngularJS o. Ä., kombinierbar ist, da sich React nur um die Views kümmert.
Der größte Nachteil ist wohl die Kombination mit anderen DOM-verändernden Libraries (wie z. B. jQuery), aber auch dieses Problem ist laut Pascal, unter Kontrolle zu bekommen.
Reacts Starting-Tutorial ist auf jeden Fall einen Blick wert.
[00:31:29] AssetGraph
AssetGraph ist der Versuch einen Graphen einer Webseite abzubilden – welche Ressourcen werden von welchen anderen Ressourcen verwendet.
Dadurch ergeben sich Möglichkeiten, wie intelligentes Autocomplete in der IDE, einfache Diagnose von Problemen, Optimierung von Web-Seiten und Applikationen. Die Nachteile sind allerdings die hohe Komplexität und, durch seine Neuartigkeit, die gegebenenfalls noch etwas mühsame Benutzung.

[00:39:34] Keine Schaunotizen

JSON Generator
Generiert JSON passend zur API-Definition.
Status IE
Status IE ist eine Aufzeichnung der aktuellen Feature-Implementierung in Internet Explorer. Chromes Pendent dazu gibt’s hier.
Node JSCS
Ein JavaScript Code Style Checker – mehr als nur JSHint.

[00:41:33] Tipp(s) der Woche

visibility: visible undoes visibility: hidden
Setzt man visibility: hidden auf ein Element, kann man ein Kinds-Element mit visibility: visible wieder sichtbar machen.
Use of .apply() with ‘new’ operator. Is this possible?
Beliebig viele Argumente an einen Constructor in JavaScript mit Function.prototype.bind übergeben.

Revision 165: Über den Webkongress Erlangen und den Zustand mancher Website

14. April 2014 | 6 Kommentare

Stefan und Peter haben sich Matthias Mees und Jens Grochtdreis ins virtuelle Studio geholt um den kürzlich stattgefundenen Webkongress in Erlangen Revue passieren zu lassen, sowie über den Zustand diverser Websites zu philosophieren.

Schaunotizen

[00:00:15] Rückblick Webkongress Erlangen
Im März fand der dritte Webkongress der Uni Erlangen statt, der sich auch um die Themen kümmert, die nicht so viel Beachtung auf den großen Konferenzen der Branche finden: Barrierefreiheit und Content Management System, zum Beispiel. Jens und Matthias erzählen von ihren Erlebnissen in der Universitätststadt und geben folgende Anschautipps: Marc Hinse – Die Gefahren von Webdesign Trends, Wolfgang Wiese – The Beauty and the Beast, Patrick Lobacher – Typo 3 Neos, Nils Pooker – Alles so schön responsive hier?, sowie alle Barrierefreiheits-Talks
[00:13:17] Die Beschissenheit mancher Websites, und Ihre Gründe
Warum gibt es immer noch Restaurants, die ihre Menükarten als PDF verlinken und nicht einfach den Text auf der Website zugänglich machen? Wenn es schon so viele Profis gibt, die gute Websites erzeugen, warum findet man immer noch soviel Mist im Web? Und wie geht man als Entwickler/Designer mit der Beratungsresistenz mancher Kunden um? In einer groß angelegten Raunz-Runde versuchen wir die Gründe zu erörtern und lassen sich über einige Misstände der Branche aus.
[00:47:04] Our Enclosed Space
Rachel Andrew schreibt, dass wir uns in einer elitären und sehr kleinen Referenzgruppe bewegen und viel vom echten Leben “da draussen” gerne mal vergessen. Oder vergessen würden. Bei all den schönen, tollen, neuen Technologien die auf den Konferenzen propagiert werden, wären doch am Ende die wenigsten heute doch auch wirklich einsetzbar. Vermitteln wir ein falsches Bild und vergessen die Dinge, auf die es wirklich ankommt? Ranting-Runde, Teil 2.

[01:02:58] Keine Schaunotizen

Was ist WAI-ARIA?
WAI-ARIA ist eine W3C Recommendation, und Marco Zehe erklärt, was es damit auf sich hat.
SmashingConf 2014
Jan Deppisch erzählt uns seine Highlights der letzen SmashingConf.
jQuery San Diego
Videos und Material zur letzten jQuery Konferenz.
Formular Elemente gestalten
Ein Artikel, wie man Formular Elemente gestalten kann, und ein begleitender Artikel von Microsoft zum gleichen Thema.
HTML5 Master Class
Der CSS Buddha und der HTML5 Erklärbär für drei ganze Tage in Düsseldorf!
CodeFront
Linz bekommt die Front-End Konferenz mit dem schönsten Logo.