<p>Die Stammbesetzung von Schepp, Peter, Hans und Stefan durfte in der aktuellen Revision <a href="http://frederic-hemberger.de/">Frederic Hemberger</a> als Gast begrüßen, um uns über die unterschiedlichen Use Cases von Vagrant zu informieren. Spontan stieß auch noch unser treuer Hörer <a href="https://twitter.com/Acconut_">Marius</a> hinzu, der ebenfalls in die Lobeshymnen einstimmte.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:03] <a href="http://www.vagrantup.com/">Vagrant &#8211; Development environments made easy</a></dt>
<dd>Die Entwicklungsumgebung braucht Java, man will sich die eigene Maschine aber nicht versauen? PHP in einer Uraltversion gefordert, die man lokal nicht mehr zum Laufen kriegt? Oder einfach zwischen den Kollegen die gleichen Rahmenparameter für die Entwicklung herstellen? Mit Vagrant alles kein Problem. Frederic und Stefan sind seit längerem Fan des Commandline Tools, welches das Aufsetzen, Steuern und Konfigurieren von virtuellen (Linux-)Maschinen kinderleicht und versionierbar macht. Die beiden machen &#8212; unterstützt von Marius &#8212; dem Rest der Truppe die Vor- und Nachteile an einigen Beispielen schmackhaft und sprechen vom ultimativen Test- und Reproduzierbarkeitsnirvana. Wer auf den Geschmack gekommen ist und mehr als Ubuntu braucht, wird übrigens auf <a href="http://www.vagrantbox.es/">Vagrantbox.es</a> fündig. WordPressentwickler sollten sich <a href="http://vagrantpress.org">VagrantPress</a> genauer ansehehn.</dd>
<dt>[00:20:30] <a href="#">Clientside JavaScript Error Reporting</a></dt>
<dd>Die Hörerfrage von Marius wurde nicht nur über Twitter, sondern auch gleich live in der Sendung vom Fragesteller persönlich eingeworfen: Welche client-seitigen Fehlerreporting Tools verwenden wir eigentlich, und welche Dienste sind uns da am geläufigsten? Frederic schwört auf eine eigene Lösung, bestehend aus ca. 60 Zeilen Code, die ihm beim Ermitteln von Edge Cases schon einige Male enorm geholfen hat. Außerdem gab <a href="https://plus.google.com/+PaulIrish/posts/12BVL5exFJn">Paul Irish</a> auf Google Plus einen guten Überblick über geläufige Services.</dd>
</dl>
<h3>[00:30:48] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html">Application Cache</a></dt>
<dd>Der Application Cache war als Offlinemechanismus eine durchaus ambitionierte Angelegenheit, ging bei uns aber nie über den Demostatus hinaus. Wir erörtern die Gründe und geben auch <a href="http://developers.whatwg.org/">Positivbeispiele</a>. Erwähnung findet auch Frederics <a href="http://manifest-validator.com/">Manifest Validator</a> und ein Blick in die Zukunft mit <a href="https://github.com/slightlyoff/ServiceWorker/">Service Workern</a>.</dd>
</dl>
<h3>[00:40:10] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/">10 Reasons we switched from an icon font to SVG</a></dt>
<dd>Icon Fonts sind toll, haben aber ein paar Nachteile, die für die Autoren des Artikels Grund genug waren komplett auf SVG zu wechseln.</dd>
<dt><a href="http://4waisenkinder.de/blog/2013/12/22/how-to-measure-frontend-performance-with-phantomas-and-grunt/">How to measure Frontend Performance with Phantomas and Grunt</a></dt>
<dd>Die 4Waisenkinder erzählen uns wie man Frontend Performance mit Phantomas und Automatisierungstools wie Grunt hervorragend messen kann.</dd>
<dt><a href="https://github.com/pornel/slip">Slip</a></dt>
<dd>Listen, die auf unterschiedliche Gesten unterschiedlich reagieren, gibt&#8217;s bei Pornels Slip.</dd>
<dt>Accessibility Tools</dt>
<dd>Frederic wirft drei hervorragende Accessibility Tools ins Rennen: <a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb">Eine Chrome Extension</a> nebst anschaulichen Lintern bei <a href="http://www.accesslint.com/">AccessLint</a> und <a href="http://wave.webaim.org/">WAVE</a>.</dd>
<dt><a href="http://fettblog.eu/blog/2014/01/13/manageable-sass-components/">Manageable Sass Components</a></dt>
<dd>Wer mit Bower und Sass Komponenten arbeitet bzw. solche sogar entwickelt, kann in dieser Ode an das !default Flag erkennen, wie man diese für Außenstehende konfigurierbar macht.</dd>
<dt><a href="http://linz.kod.io/">Kod.io Linz</a></dt>
<dd>Stefans Wahlheimatstadt Linz bekommt eine Entwicklerkonferenz. Eine einmalige Gelegenheit mit einem ansehnlichen Line-Up, auch für Frontend Entwickler.</dd>
<dt><a href="http://onmobile.iwanttouse.com/">I Want To Use</a></dt>
<dd>Irgendein modernes Browserfeature erwünscht? Nicht sicher ob das alle mobilen Devices auch können? &#8222;On mobile, I want to use&#8220; gibt Aufschluss.</dd>
<dt><a href="http://opendevicelab.com/DYDD">Donate your dusty device</a></dt>
<dd>Die Open Device Labs der Welt fordern auf, euer ranziges Smartphone für den guten Testzweck zu spenden. Finden wir unterstützenswert!</dd>
</dl>
<h3>[00:49:22] Der Tipp der Woche</h3>
<dl>
<dt><a href="https://twitter.com/blackjack75/status/422036078540103681">Option-Key + Click</a></dt>
<dd>Man lernt eben nie aus: Im OS Terminal kann man bei gedrücktem Option Key und einem Klick die Cursorposition ändern. Enorm hilfreich bei langen Commandline-Befehlen.</dd>
</dl>


Die Stammbesetzung von Schepp, Peter, Hans und Stefan durfte in der aktuellen
Revision Frederic Hemberger als Gast begrüßen, um uns über die unterschiedlichen
Use Cases von Vagrant zu informieren. Spo…

Working Draft

Die Stammbesetzung von Schepp, Peter, Hans und Stefan durfte in der aktuellen
Revision Frederic Hemberger als Gast begrüßen, um uns über die unterschiedlichen
Use Cases von Vagrant zu informieren. Spontan stieß auch noch unser treuer Hörer
Marius hinzu, der ebenfalls in die Lobeshymnen einstimmte.


SCHAUNOTIZEN

[00:01:03] VAGRANT – DEVELOPMENT ENVIRONMENTS MADE EASY

Die Entwicklungsumgebung braucht Java, man will sich die eigene Maschine aber
nicht versauen? PHP in einer Uraltversion gefordert, die man lokal nicht mehr
zum Laufen kriegt? Oder einfach zwischen den Kollegen die gleichen
Rahmenparameter für die Entwicklung herstellen? Mit Vagrant alles kein Problem.
Frederic und Stefan sind seit längerem Fan des Commandline Tools, welches das
Aufsetzen, Steuern und Konfigurieren von virtuellen (Linux-)Maschinen
kinderleicht und versionierbar macht. Die beiden machen — unterstützt von Marius
— dem Rest der Truppe die Vor- und Nachteile an einigen Beispielen schmackhaft
und sprechen vom ultimativen Test- und Reproduzierbarkeitsnirvana. Wer auf den
Geschmack gekommen ist und mehr als Ubuntu braucht, wird übrigens auf
Vagrantbox.es fündig. WordPressentwickler sollten sich VagrantPress genauer
ansehehn.

[00:20:30] CLIENTSIDE JAVASCRIPT ERROR REPORTING

Die Hörerfrage von Marius wurde nicht nur über Twitter, sondern auch gleich live
in der Sendung vom Fragesteller persönlich eingeworfen: Welche client-seitigen
Fehlerreporting Tools verwenden wir eigentlich, und welche Dienste sind uns da
am geläufigsten? Frederic schwört auf eine eigene Lösung, bestehend aus ca. 60
Zeilen Code, die ihm beim Ermitteln von Edge Cases schon einige Male enorm
geholfen hat. Außerdem gab Paul Irish auf Google Plus einen guten Überblick über
geläufige Services.


[00:30:48] GLÜCKSRAD

APPLICATION CACHE

Der Application Cache war als Offlinemechanismus eine durchaus ambitionierte
Angelegenheit, ging bei uns aber nie über den Demostatus hinaus. Wir erörtern
die Gründe und geben auch Positivbeispiele. Erwähnung findet auch Frederics
Manifest Validator und ein Blick in die Zukunft mit Service Workern.


[00:40:10] KEINE SCHAUNOTIZEN

10 REASONS WE SWITCHED FROM AN ICON FONT TO SVG

Icon Fonts sind toll, haben aber ein paar Nachteile, die für die Autoren des
Artikels Grund genug waren komplett auf SVG zu wechseln.

HOW TO MEASURE FRONTEND PERFORMANCE WITH PHANTOMAS AND GRUNT

Die 4Waisenkinder erzählen uns wie man Frontend Performance mit Phantomas und
Automatisierungstools wie Grunt hervorragend messen kann.

SLIP

Listen, die auf unterschiedliche Gesten unterschiedlich reagieren, gibt’s bei
Pornels Slip.

ACCESSIBILITY TOOLS

Frederic wirft drei hervorragende Accessibility Tools ins Rennen: Eine Chrome
Extension nebst anschaulichen Lintern bei AccessLint und WAVE.

MANAGEABLE SASS COMPONENTS

Wer mit Bower und Sass Komponenten arbeitet bzw. solche sogar entwickelt, kann
in dieser Ode an das !default Flag erkennen, wie man diese für Außenstehende
konfigurierbar macht.

KOD.IO LINZ

Stefans Wahlheimatstadt Linz bekommt eine Entwicklerkonferenz. Eine einmalige
Gelegenheit mit einem ansehnlichen Line-Up, auch für Frontend Entwickler.

I WANT TO USE

Irgendein modernes Browserfeature erwünscht? Nicht sicher ob das alle mobilen
Devices auch können? „On mobile, I want to use“ gibt Aufschluss.

DONATE YOUR DUSTY DEVICE

Die Open Device Labs der Welt fordern auf, euer ranziges Smartphone für den
guten Testzweck zu spenden. Finden wir unterstützenswert!


[00:49:22] DER TIPP DER WOCHE

OPTION-KEY + CLICK

Man lernt eben nie aus: Im OS Terminal kann man bei gedrücktem Option Key und
einem Klick die Cursorposition ändern. Enorm hilfreich bei langen
Commandline-Befehlen.

Revision 154: Vagrant und Clientside JavaScript Error Reporting

<p>Zu viert machten wir uns diese Woche auf in die Sendung. Mit von der Partie war als Gast <a href="https://github.com/asciidisco">Sebastian Golasch</a>.</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:25] <a href="https://github.com/csswizardry/typecsset">Typecsset</a></dt>
<dd>Harry Roberts beschreibt in seinem Artikel <a href="http://csswizardry.com/2012/06/single-direction-margin-declarations/"><i>Single-direction margin declarations</i></a> die Vorzüge, margins für Elemente nur in eine Richtung zu verwenden und entwickelt mit Typecsset die passende Library um vertikalen Rhythmus innerhalb einer Seite zu nutzen. Stefan benutzt ein solches Tool, der Rest allerdings noch nicht. Rod und Sebastian kennen bestenfalls <a href="http://media.smashingmagazine.com/wp-content/uploads/technical-type/img/06.jpg">Grid Backgrounds</a> (oder auch per <a href="http://basehold.it/">Tool</a>). Die Vorteile von Typecsset sind vor allem im Zusammenspiel mit ausgefeilten Designs nicht von der Hand zu weisen.</dd>
<dt>[00:10:46] <a href="http://www.iandevlin.com/blog/2014/01/javascript/using-the-web-speech-api-to-control-a-html5-video">Web Speech API</a></dt>
<dd>Mit der Web Speech API lässt sich Sprache in Text umwandeln. Supported wird das Ganze in <a href="http://stackoverflow.com/questions/14257598/what-are-language-codes-for-voice-recognition-languages-in-chromes-implementati">verschiedenen Sprachen</a> per Google Translate. Aber gerade das ist auch das Manko: Bisher supported nur Google Chrome die API.</dd>
</dl>
<h3>[00:26:05] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd">Drag &#8217;n&#8216; Drop</a></dt>
<dd>Die Drag and Drop API ist quasi in <a href="http://caniuse.com/#feat=dragndrop">allen Browsern verfügbar</a>. Mittels Progressive Enhancement lässt sich DnD ziemlich einfach für alle Web-Anwendungen, zum Beispiel <a href="http://html5demos.com/dnd-upload">für File-Uploads</a>, <a href="http://www.html5rocks.com/en/tutorials/dnd/basics/">umsetzen</a>.</dd>
</dl>
<h3>[00:41:21] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/igrigorik/ga-beacon">Google Analytics für GitHub</a></dt>
<dd>Mit GA Beacon lässt sich Google Analytics leicht in jedes GitHub-Projekt integrieren. <a href="https://github.com/blog/1672-introducing-github-traffic-analytics">Mittlerweile werden Statistiken</a> auch direkt von GitHub unterstützt.</dd>
<dt><a href="http://engineering.appfolio.com/2012/11/16/css-architecture/">CSS Architecture</a></dt>
<dd>Ein gutes Wrap-up zum Thema CSS Architektur und Theorien im Allgemeinen.</dd>
<dt><a href="http://antimatter15.github.io/ocrad.js/demo.html">Ocrad.js</a></dt>
<dd>Ocrad.js ist ein OCR (Optical Character Recognition) Tool, dass mit Emscripten nach JavaScript konvertiert wurde und gescannte Texte in richtigen Text umwandeln kann.</dd>
<dt><a href="http://www.shaundunne.com/gulp-is-the-new-black/">Gulp is the new black</a></dt>
<dd>Eine Einführung in Gulp und die Theorien mit denen Gulp sich beschäftigt.</dd>
<dt><a href="http://blog.teamtreehouse.com/getting-started-bower">Getting started with Bower</a></dt>
<dd>Für alle, die noch nicht mit einem Package-Manager im Front-End arbeiten hier eine Einführung in Bower.</dd>
<dt><a href="http://christianheilmann.com/2014/01/05/endangered-species-of-the-web-the-link/">Endangered species of the web: The Link</a></dt>
<dd>Christian Heilmann philosophiert darüber, dass Links zu oft missbraucht werden und propagiert man solle sich auf die eigentliche Aufgabe von Links zurückbesinnen.</dd>
<dt><a href="http://unicode.johnholtripley.co.uk/">Unify</a></dt>
<dd>Unify ist ein Tool um den Browser-support von einzelnen Unicode-Zeichen zu überprüfen.</dd>
<dt><a href="http://clrs.cc/">Web Color Palette</a></dt>
<dd>Die Entwickler von Web Color Palette wünschen sich eine neue, verbesserte Color Palette fürs Internet und geben ein schönes Beispiel vor, wie die Standardfarben und dazu gehörende Color-Codes besser gewählt sein können.</dd>
</dl>


Zu viert machten wir uns diese Woche auf in die Sendung. Mit von der Partie war
als Gast Sebastian Golasch.


KEINE NEWS


SCHAUNOTIZEN

[00:00:25] TYPECSSET

Harry Roberts beschreibt in seinem Artike…

Zu viert machten wir uns diese Woche auf in die Sendung. Mit von der Partie war
als Gast Sebastian Golasch.


KEINE NEWS


SCHAUNOTIZEN

[00:00:25] TYPECSSET

Harry Roberts beschreibt in seinem Artikel Single-direction margin declarations
die Vorzüge, margins für Elemente nur in eine Richtung zu verwenden und
entwickelt mit Typecsset die passende Library um vertikalen Rhythmus innerhalb
einer Seite zu nutzen. Stefan benutzt ein solches Tool, der Rest allerdings noch
nicht. Rod und Sebastian kennen bestenfalls Grid Backgrounds (oder auch per
Tool). Die Vorteile von Typecsset sind vor allem im Zusammenspiel mit
ausgefeilten Designs nicht von der Hand zu weisen.

[00:10:46] WEB SPEECH API

Mit der Web Speech API lässt sich Sprache in Text umwandeln. Supported wird das
Ganze in verschiedenen Sprachen per Google Translate. Aber gerade das ist auch
das Manko: Bisher supported nur Google Chrome die API.


[00:26:05] GLÜCKSRAD

DRAG ’N‘ DROP

Die Drag and Drop API ist quasi in allen Browsern verfügbar. Mittels Progressive
Enhancement lässt sich DnD ziemlich einfach für alle Web-Anwendungen, zum
Beispiel für File-Uploads, umsetzen.


[00:41:21] KEINE SCHAUNOTIZEN

GOOGLE ANALYTICS FÜR GITHUB

Mit GA Beacon lässt sich Google Analytics leicht in jedes GitHub-Projekt
integrieren. Mittlerweile werden Statistiken auch direkt von GitHub unterstützt.

CSS ARCHITECTURE

Ein gutes Wrap-up zum Thema CSS Architektur und Theorien im Allgemeinen.

OCRAD.JS

Ocrad.js ist ein OCR (Optical Character Recognition) Tool, dass mit Emscripten
nach JavaScript konvertiert wurde und gescannte Texte in richtigen Text
umwandeln kann.

GULP IS THE NEW BLACK

Eine Einführung in Gulp und die Theorien mit denen Gulp sich beschäftigt.

GETTING STARTED WITH BOWER

Für alle, die noch nicht mit einem Package-Manager im Front-End arbeiten hier
eine Einführung in Bower.

ENDANGERED SPECIES OF THE WEB: THE LINK

Christian Heilmann philosophiert darüber, dass Links zu oft missbraucht werden
und propagiert man solle sich auf die eigentliche Aufgabe von Links
zurückbesinnen.

UNIFY

Unify ist ein Tool um den Browser-support von einzelnen Unicode-Zeichen zu
überprüfen.

WEB COLOR PALETTE

Die Entwickler von Web Color Palette wünschen sich eine neue, verbesserte Color
Palette fürs Internet und geben ein schönes Beispiel vor, wie die Standardfarben
und dazu gehörende Color-Codes besser gewählt sein können.

Revision 153: Typecsset und die Web Speech API

<p>Nach vielen Revisionen mit Rumpfbesatzung und Themenmangel geht es diemal wieder voll zur Sache: Schepp, Rodney, Stefan und Peter erklären ranten und mäandern durch die diesmal durchaus vorhandenen Themen der vergangenen Woche.</p>
<p>Außerdem führen wir versuchsweise eine neue Rubrik ein: beim Tipp der Woche werden wir (un)regemäßig Kleinst-Tipps für den Weballtag absondern, die uns im Laufe der letzten sieben Tage über den Weg gelaufen sind. Außerdem neu aus Github: <a href="https://github.com/workingdraft/metadata">Workingdraft-Metadata</a>!</p>
<h3>[00:00:12] News</h3>
<dl>
<dt><a href="https://github.com/ai/autoprefixer/releases/tag/1.0">Autoprefixer 1.0</a></dt>
<dd>Jetzt mit Source Maps!</dd>
<dt><a href="https://github.com/workingdraft/metadata">Workingdraft Metadata</a></dt>
<dd>Alle Daten zu allen Episoden von Working Draft auf Github. Gehet hin und hacket!</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:34] <a href="http://blog.methvin.com/2013/12/please-stop-jsperfcom-abuse.html">Stop JSPerf abuse</a></dt>
<dd>
Wir reden über einen Rant, der einen unsauberen <a href="http://jsperf.com/">JSPerf</a>-Vergleich von jQuerys <code>.addClass()</code> mit nativer <code>classList</code> (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.classList">MDN</a>) zum Thema hat. Rodney zürnt über die classList-API und berichtet von seinen eigenen JSPerf-Erfahrungen. Performance-Pontifex Schepp ordnet das Thema etwas ein: Man sollte kein JSPerf-Nazi werden, da Rendering und CSS die eigentlichen Problemfelder sind und der Browser automatisch JS optimiert, <a href="http://www.youtube.com/watch?v=65-RbBwZQdU">was im Falle von Chrome auch bequem nachvollzogen werden kann</a>.</p>
</dd>
<dt>[00:16:30] <a href="http://blog.rodneyrehm.de/archives/32-Updating-to-iScroll-5.html">Upgrading to iScroll 5</a></dt>
<dd>Rodney hatte großen Spaß am Versuch, Version&nbsp;5 von <a href="https://github.com/cubiq/iscroll">iScroll</a> (einer Library für Scrollerei auf Mobilgeräten) zu benutzen und lässt uns alle daran teilhaben. Breaking Changes beim Wechsel von&nbsp;4 auf&nbsp;5 sind laut <a href="http://semver.org/">Semantic Versioning</a> zwar möglich, werden aber zum Ärgernis wenn sie nicht dokumentiert sind. So fordern wir Changelog und Migration Guide für alle Open-Source-Projekte, denn das reduziert nicht nur Nutzerfrust, sondern sorgt auch dafür, dass Autoren von Software weniger Supportanfragen bearbeiten müssen&nbsp;&ndash; Rod spricht <a href="http://medialize.github.io/URI.js/">aus Erfahrung</a>.</dd>
<dt>[00:39:42] <a href="https://github.com/gulpjs/gulp">Gulp</a> und funktionale Programmierung</dt>
<dd>Gulp ist ein Buildsystem wie <a href="http://gruntjs.com/">Grunt</a>, allerdings streambasiert (<a href="http://slid.es/contra/gulp">siehe Slides</a>). Ein Wechsel scheint dann sinnvoll, wenn man großen gruntinduzierten Leidensdruck verspürt, was bei Peter noch nicht der Fall ist, bei Rodney hingegen schon&nbsp; ein Gruntfile-Vergleich ergibt, dass Rod den mit Abstand längsten hat, was mit Streams weniger unübersichtlich wäre. Dem Stream-Prinzip gegenüber sind wir grundsätzlich alle sehr positiv eingestellt; <a href="http://de.wikipedia.org/wiki/Pipe_(Informatik)">Pipes</a> und die daran andockende <a href="http://de.wikipedia.org/wiki/Unix-Kommando#Die_Baukasten-Philosophie">Unix-Philosophie</a> sind was feines. Über Pipes kommen wir zum Thema <a href="http://promises-aplus.github.io/promises-spec/">Promises</a> und <a href="http://de.wikipedia.org/wiki/Funktionale_Programmierung">funktionale Programmierung</a>, das Peter mit etwas Fabuliererei über <a href="https://github.com/baconjs/bacon.js">Bacon.js</a> abschließt.</dd>
</dl>
<h3>[01:14:47] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/ai/postcss">PostCSS</a></dt>
<dd>Tool zum Parsen und Manipulieren von CSS.</dd>
<dt><a href="http://philipwalton.github.io/polyfill/">Polyfill.js</a></dt>
<dd>Das Tool für euren nächsten CSS-Polyfill.</dd>
<dt>JS Test &#8211; Code Coverage</dt>
<dd><a href="http://ariya.ofilabs.com/2013/12/code-coverage-of-mocha-tests-using-istanbul-and-karma.html">Drei</a> <a href="http://ariya.ofilabs.com/2013/10/code-coverage-of-jasmine-tests-using-istanbul-and-karma.html">Artikel</a> <a href="http://ariya.ofilabs.com/2013/10/code-coverage-of-qunit-tests-using-istanbul-and-karma.html">erklären</a> wie ihr die Coverage eurer JS-Tests ermitteln könnt.</dd>
</dl>
<h3>[01:18:54] Tipp der Woche</h3>
<dl>
<dt>Chrome Devtools</dt>
<dd>Stefan hat herausgefunden: die Suche im Elements-Panel (<key>STRG</key>/<key>CMF</key>+<key>F</key>) akzeptiert auch CSS-Selektoren (und XPath).</dd>
</dl>


Nach vielen Revisionen mit Rumpfbesatzung und Themenmangel geht es diemal wieder
voll zur Sache: Schepp, Rodney, Stefan und Peter erklären ranten und mäandern
durch die diesmal durchaus vorhandenen Th…

Nach vielen Revisionen mit Rumpfbesatzung und Themenmangel geht es diemal wieder
voll zur Sache: Schepp, Rodney, Stefan und Peter erklären ranten und mäandern
durch die diesmal durchaus vorhandenen Themen der vergangenen Woche.

Außerdem führen wir versuchsweise eine neue Rubrik ein: beim Tipp der Woche
werden wir (un)regemäßig Kleinst-Tipps für den Weballtag absondern, die uns im
Laufe der letzten sieben Tage über den Weg gelaufen sind. Außerdem neu aus
Github: Workingdraft-Metadata!


[00:00:12] NEWS

AUTOPREFIXER 1.0

Jetzt mit Source Maps!

WORKINGDRAFT METADATA

Alle Daten zu allen Episoden von Working Draft auf Github. Gehet hin und hacket!


SCHAUNOTIZEN

[00:00:34] STOP JSPERF ABUSE

Wir reden über einen Rant, der einen unsauberen JSPerf-Vergleich von jQuerys
.addClass() mit nativer classList (MDN) zum Thema hat. Rodney zürnt über die
classList-API und berichtet von seinen eigenen JSPerf-Erfahrungen.
Performance-Pontifex Schepp ordnet das Thema etwas ein: Man sollte kein
JSPerf-Nazi werden, da Rendering und CSS die eigentlichen Problemfelder sind und
der Browser automatisch JS optimiert, was im Falle von Chrome auch bequem
nachvollzogen werden kann.



[00:16:30] UPGRADING TO ISCROLL 5

Rodney hatte großen Spaß am Versuch, Version 5 von iScroll (einer Library für
Scrollerei auf Mobilgeräten) zu benutzen und lässt uns alle daran teilhaben.
Breaking Changes beim Wechsel von 4 auf 5 sind laut Semantic Versioning zwar
möglich, werden aber zum Ärgernis wenn sie nicht dokumentiert sind. So fordern
wir Changelog und Migration Guide für alle Open-Source-Projekte, denn das
reduziert nicht nur Nutzerfrust, sondern sorgt auch dafür, dass Autoren von
Software weniger Supportanfragen bearbeiten müssen – Rod spricht aus Erfahrung.

[00:39:42] GULP UND FUNKTIONALE PROGRAMMIERUNG

Gulp ist ein Buildsystem wie Grunt, allerdings streambasiert (siehe Slides). Ein
Wechsel scheint dann sinnvoll, wenn man großen gruntinduzierten Leidensdruck
verspürt, was bei Peter noch nicht der Fall ist, bei Rodney hingegen schon  ein
Gruntfile-Vergleich ergibt, dass Rod den mit Abstand längsten hat, was mit
Streams weniger unübersichtlich wäre. Dem Stream-Prinzip gegenüber sind wir
grundsätzlich alle sehr positiv eingestellt; Pipes und die daran andockende
Unix-Philosophie sind was feines. Über Pipes kommen wir zum Thema Promises und
funktionale Programmierung, das Peter mit etwas Fabuliererei über Bacon.js
abschließt.


[01:14:47] KEINE SCHAUNOTIZEN

POSTCSS

Tool zum Parsen und Manipulieren von CSS.

POLYFILL.JS

Das Tool für euren nächsten CSS-Polyfill.

JS TEST – CODE COVERAGE

Drei Artikel erklären wie ihr die Coverage eurer JS-Tests ermitteln könnt.


[01:18:54] TIPP DER WOCHE

CHROME DEVTOOLS

Stefan hat herausgefunden: die Suche im Elements-Panel (STRG/CMF+F) akzeptiert
auch CSS-Selektoren (und XPath).

Revision 152: JSPerf, Open Source, Gulp, Funktionales

<p>Kurz vor Weihnachten plauderten Rodney und Peter über den neuesten CSS-Präprozessor (den niemand benutzen sollte) und statische Webseiten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:24] <a href="http://www.myth.io/">Myth</a></dt>
<dd>Myth ist ein CSS-Präprozessor, der sich als CSS-Polyfill verkauft, dabei aber den Verkaufs-Part wesentlich besser macht als den Polyfill-Part. Rodney macht eins der Probleme darin aus, dass man nicht mehr erkennen kann, ob CSS/Myth-Code vom Browser oder vom Präprozessor verarbeitet wird. Das ist besonders problematisch, da Myth z.B. Variablen nur in der Syntax <a href="http://www.w3.org/TR/css-variables-1/">dem Standard</a> nachempfindet und nicht die Kaskade berücksichtigt (<a href="https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/">siehe</a> <a href="https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/">auch</a>). Das wiederum verhindert, dass man die richtigen CSS-Vars überhaupt nutzt. Die sind ggf. sehr nutzenswert, auch wenn Rodney in den aktuellen Browsern noch einige Bugs ausfindig gemacht hat. Die Zusamenfasung (<a href="http://blog.rodneyrehm.de/archives/30-CSS-Polyfill-Preprocessor-Its-A-Myth.html">hier aus Rodneys Feder in lang</a>): Myth sollte man dringend ignorieren und keinesfalls benutzen.</dd>
<dt>[00:35:05] <a href="http://www.typeandgrids.com/blog/goodbye-wordpress-2014-will-be-the-year-of-flat-file-cmses">Goodbye WordPress: 2014 Will Be the Year of Flat-File CMSes — Type &#038; Grids</a></dt>
<dd>Jeremiah Shoaf lässt einen Abgesang auf fette CMS vom Stapel, in den Rodney und Peter eingeschränkt einstimmen. Peters hatte in der Vergangenheit PHP-Monstren wie WordPress und <a href="http://modx.com/">ModX</a> im Einsatz und will aus Performance-, Sicherheits- und Genervtheitsgründen schleunigst zurück zu einer statischen Seite. Rodneys Seite besteht schon aus einem Kirby-ähnlichem Eigenbau-Produkt, während sein Blog noch <a href="http://www.s9y.org/">Serendipity</a> nutzt. Das große Problem für das Statische-Seiten-Jahr 2014 machen wir darin aus, Nicht-Nerds das Konzept zu verkaufen&nbsp;&hellip;</dd>
</dl>
<h3>[00:45:32] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/addyosmani/es6-tools">addyosmani/es6-tools</a></dt>
<dd>Echte JS-Hipster benutzen schon ES6 bevor es Standard ist.</dd>
<dt><a href="http://tobiasahlin.com/spinkit/">SpinKit</a></dt>
<dd>Was früher das Ajax-Gif war macht man heute mit CSS.</dd>
<dt><a href="http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php">How Do Users Really Hold Mobile Devices?</a></dt>
<dd>Interessante Erkenntnisse.</dd>
<dt><a href="http://www.youtube.com/watch?v=NTJUFQmHbvc">Lea Verou: CSS in the 4th Dimension</a></dt>
<dd>Leicht bekömmlicher Rundumschlag zum Thema Animationen und Transitions.</dd>
<dt><a href="https://github.com/use-init/generator-init">generator-init</a></dt>
<dd>Ein Yeoman-Generator für <a href="http://use-init.com/">INIT</a>.</dd>
</dl>


Kurz vor Weihnachten plauderten Rodney und Peter über den neuesten
CSS-Präprozessor (den niemand benutzen sollte) und statische Webseiten.


SCHAUNOTIZEN

[00:00:24] MYTH

Myth ist ein CSS-Präprozesso…

Kurz vor Weihnachten plauderten Rodney und Peter über den neuesten
CSS-Präprozessor (den niemand benutzen sollte) und statische Webseiten.


SCHAUNOTIZEN

[00:00:24] MYTH

Myth ist ein CSS-Präprozessor, der sich als CSS-Polyfill verkauft, dabei aber
den Verkaufs-Part wesentlich besser macht als den Polyfill-Part. Rodney macht
eins der Probleme darin aus, dass man nicht mehr erkennen kann, ob CSS/Myth-Code
vom Browser oder vom Präprozessor verarbeitet wird. Das ist besonders
problematisch, da Myth z.B. Variablen nur in der Syntax dem Standard
nachempfindet und nicht die Kaskade berücksichtigt (siehe auch). Das wiederum
verhindert, dass man die richtigen CSS-Vars überhaupt nutzt. Die sind ggf. sehr
nutzenswert, auch wenn Rodney in den aktuellen Browsern noch einige Bugs
ausfindig gemacht hat. Die Zusamenfasung (hier aus Rodneys Feder in lang): Myth
sollte man dringend ignorieren und keinesfalls benutzen.

[00:35:05] GOODBYE WORDPRESS: 2014 WILL BE THE YEAR OF FLAT-FILE CMSES — TYPE &
GRIDS

Jeremiah Shoaf lässt einen Abgesang auf fette CMS vom Stapel, in den Rodney und
Peter eingeschränkt einstimmen. Peters hatte in der Vergangenheit PHP-Monstren
wie WordPress und ModX im Einsatz und will aus Performance-, Sicherheits- und
Genervtheitsgründen schleunigst zurück zu einer statischen Seite. Rodneys Seite
besteht schon aus einem Kirby-ähnlichem Eigenbau-Produkt, während sein Blog noch
Serendipity nutzt. Das große Problem für das Statische-Seiten-Jahr 2014 machen
wir darin aus, Nicht-Nerds das Konzept zu verkaufen …


[00:45:32] KEINE SCHAUNOTIZEN

ADDYOSMANI/ES6-TOOLS

Echte JS-Hipster benutzen schon ES6 bevor es Standard ist.

SPINKIT

Was früher das Ajax-Gif war macht man heute mit CSS.

HOW DO USERS REALLY HOLD MOBILE DEVICES?

Interessante Erkenntnisse.

LEA VEROU: CSS IN THE 4TH DIMENSION

Leicht bekömmlicher Rundumschlag zum Thema Animationen und Transitions.

GENERATOR-INIT

Ein Yeoman-Generator für INIT.

Revision 151: Myth, statische Seiten, Links

<p>Das 150er-Jubiläum geriet aufgrund von Themen- und Personalmangel sowie leichter Verpestung seitens Peters etwas kurz. Da konnte auch der eigentlich sehr motivierte Schepp nicht mehr viel ausrichten.</p>
<h3>[00:00:37] News</h3>
<dl>
<dt><a href="http://mcc.id.au/blog/2013/12/variables">CSS-Variablen im Firefox</a></dt>
<dd>In der endgültigen Standard-Fassung.</dd>
</dl>
<h3>[00:01:31] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-colgroup-element">Das colgroup-Element</a></dt>
<dd>Wir quasseln etwas über das unterbewertete colgroup-Element und über die ähnlich unterbewerteten <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-col-element">col-</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-caption-element">caption-</a> und <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tbody-element">tbody</a>-Elemente. Durch CSS3-Selektoren wie die <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">nth-child-Pseudoklasse</a> erachten wir <code>colgroup</code> und <code>col</code> für weitgehend überflüssig und anstelle von <code>caption</code> sollte man in der HTML5-Ära wohl auch besser zum <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figure-element">figure-Element</a> greifen. Und auch über den Wechsel von Selfhtml zu <a href="http://developers.whatwg.org/">developers.whatwg.org</a> kann man mal nachdenken. Zum Schluss ranten wir noch in guter Tradition etwas über Mobile-Browser.</dd>
</dl>
<h3>[00:14:01] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://dev.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892">What You May Not Know About the Z-Index Property</a></dt>
<dd>Nicht-offensichtliches zum Z-Index.</dd>
<dt><a href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/">jquery.adaptive-backgrounds.js</a></dt>
<dd><i lang="en">A jQuery plugin for extracting dominant colors from images and applying it to its parent</i>.</dd>
<dt><a href="http://blogs.msdn.com/b/ie/archive/2013/12/12/understanding-the-real-world-performance-of-your-web-application-across-ie11-and-other-browsers.aspx">Understanding the Real-World Performance of your Web Application Across IE11 and Other Browsers</a></dt>
<dd>Im Prinzip ein Tutorial für die verschiedenen Performance-APIs in IE11 und einigen anderen Browsern.</dd>
<dt><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises &#8211; There and back again</a></dt>
<dd>Jake Archibald erklärt <em>alles</em> was es zum Thema Promises zu wissen gibt.</dd>
<dt><a href="https://github.com/elmarburke/hoodie-plugin-angularjs">hoodie-plugin-angularjs</a></dt>
<dd>Verheiratet Hoodie mit AngularJS.</dd>
</dl>


Das 150er-Jubiläum geriet aufgrund von Themen- und Personalmangel sowie leichter
Verpestung seitens Peters etwas kurz. Da konnte auch der eigentlich sehr
motivierte Schepp nicht mehr viel ausrichten.
…

Das 150er-Jubiläum geriet aufgrund von Themen- und Personalmangel sowie leichter
Verpestung seitens Peters etwas kurz. Da konnte auch der eigentlich sehr
motivierte Schepp nicht mehr viel ausrichten.


[00:00:37] NEWS

CSS-VARIABLEN IM FIREFOX

In der endgültigen Standard-Fassung.


[00:01:31] GLÜCKSRAD

DAS COLGROUP-ELEMENT

Wir quasseln etwas über das unterbewertete colgroup-Element und über die ähnlich
unterbewerteten col-, caption- und tbody-Elemente. Durch CSS3-Selektoren wie die
nth-child-Pseudoklasse erachten wir colgroup und col für weitgehend überflüssig
und anstelle von caption sollte man in der HTML5-Ära wohl auch besser zum
figure-Element greifen. Und auch über den Wechsel von Selfhtml zu
developers.whatwg.org kann man mal nachdenken. Zum Schluss ranten wir noch in
guter Tradition etwas über Mobile-Browser.


[00:14:01] KEINE SCHAUNOTIZEN

WHAT YOU MAY NOT KNOW ABOUT THE Z-INDEX PROPERTY

Nicht-offensichtliches zum Z-Index.

JQUERY.ADAPTIVE-BACKGROUNDS.JS

A jQuery plugin for extracting dominant colors from images and applying it to
its parent.

UNDERSTANDING THE REAL-WORLD PERFORMANCE OF YOUR WEB APPLICATION ACROSS IE11 AND
OTHER BROWSERS

Im Prinzip ein Tutorial für die verschiedenen Performance-APIs in IE11 und
einigen anderen Browsern.

JAVASCRIPT PROMISES – THERE AND BACK AGAIN

Jake Archibald erklärt alles was es zum Thema Promises zu wissen gibt.

HOODIE-PLUGIN-ANGULARJS

Verheiratet Hoodie mit AngularJS.

Revision 150: Kurz-Jubiläum mit News, Glücksrad und Links

<p>Hans und Stefan luden sich zu dieser Revision <a href="http://praegnanz.de">Gerrit von Aaken</a> ein, deutsches Podcast-Urgestein und Meister der Webtypografie.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:44] Die Toolchain-Welt aus Designersicht</dt>
<dd>Grunt, Yeoman, Jekyll, Travis und co. in allen Ehren, oft braucht man Tooling an Ort und Stelle. Gerrit erzählt uns von seinem Einstieg ins Tooling mit <a href="http://incident57.com/codekit/">Codekit</a> und wir philosophieren etwas über die Toolchain-Welten, in denen wir uns bewegen.</dd>
<dt>[00:18:52] <a href="http://www.webtypobuch.de">Wissenswertes zum Thema WebFonts</a></dt>
<dd>In Anlehnung an die Hörerfrage aus einer früheren <a href="/142/">Revision</a> graben wir das Thema Webfonts und vor allem Webfont Hosting-Services aus. Gerrit erzählt von den unumstrittenen Vorteilen, die ein Fremdhosting bieten kann.</dd>
<dt>[00:38:22] Offline First vs. Progressive Enhancement. Unvereinbar?</dt>
<dd>Offline First! Zuvor bei <a href="/145">Workingdraft</a>, dann bei <a href="http://alistapart.com/article/offline-first">A List Apart</a>. Doch beisst sich der Gedanke nicht mit den Grundlagen des Progressive Enhancements? Und was gilt jetzt eigentlich wirklich? Mobile First? Desktop First? Offline First? Coffee First? Wir nehmen den unumstrittenen Paradigmen ein wenig Wind aus den Segeln.</dd>
</dl>
<h3>[00:51:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://thenittygritty.co/shared-grunt-configuration">Share Grunt Configuration</a></dt>
<dd>Hans beschreibt, wie man seine Grunt tasks super versionierbar macht.</dd>
<dt><a href="http://calendar.perfplanet.com/2013/phantomas/">Phantomas</a></dt>
<dd>Webperformance Metriken via PhantomJS unter Node.</dd>
<dt><a href="http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/">How the browser preloader makes pages load faster</a></dt>
<dd>Bei der Vielzahl an unterschiedlichen prefetch Methoden der Browser verwirrt? Dieser Artikel gibt Aufschluss.</dd>
<dt><a href="http://www.html5rocks.com/en/tutorials/developertools/mobile/">Android Chrome Dev Tools</a></dt>
<dd>Chrome am Desktop und Chrome auf Android. Ein Gespann wie es im Buche steht. Welche neuen Möglichkeiten es gibt, Chrome auf Android auf eurem Desktop zu debuggen, findet ihr hier..</dd>
<dt><a href="http://haveibeenpwned.com/">Have I been PWNED?</a></dt>
<dd>Sind eure Mailadressen in den großen Sicherheitslückenoffenbarungen der letzten Monate dabei gewesen? Hier könnt ihr es ausprobieren.</dd>
<dt><a href="http://davidshariff.com/quiz/">Front-end development quiz</a></dt>
<dd>Bei einer durchschnittlichen Antwortgenauigkeit von 53% ist eins sicher: Knackig und nichts für Anfänger</dd>
</dl>


Hans und Stefan luden sich zu dieser Revision Gerrit von Aaken ein, deutsches
Podcast-Urgestein und Meister der Webtypografie.


SCHAUNOTIZEN

[00:02:44] DIE TOOLCHAIN-WELT AUS DESIGNERSICHT

Grunt, Y…

Hans und Stefan luden sich zu dieser Revision Gerrit von Aaken ein, deutsches
Podcast-Urgestein und Meister der Webtypografie.


SCHAUNOTIZEN

[00:02:44] DIE TOOLCHAIN-WELT AUS DESIGNERSICHT

Grunt, Yeoman, Jekyll, Travis und co. in allen Ehren, oft braucht man Tooling an
Ort und Stelle. Gerrit erzählt uns von seinem Einstieg ins Tooling mit Codekit
und wir philosophieren etwas über die Toolchain-Welten, in denen wir uns
bewegen.

[00:18:52] WISSENSWERTES ZUM THEMA WEBFONTS

In Anlehnung an die Hörerfrage aus einer früheren Revision graben wir das Thema
Webfonts und vor allem Webfont Hosting-Services aus. Gerrit erzählt von den
unumstrittenen Vorteilen, die ein Fremdhosting bieten kann.

[00:38:22] OFFLINE FIRST VS. PROGRESSIVE ENHANCEMENT. UNVEREINBAR?

Offline First! Zuvor bei Workingdraft, dann bei A List Apart. Doch beisst sich
der Gedanke nicht mit den Grundlagen des Progressive Enhancements? Und was gilt
jetzt eigentlich wirklich? Mobile First? Desktop First? Offline First? Coffee
First? Wir nehmen den unumstrittenen Paradigmen ein wenig Wind aus den Segeln.


[00:51:00] KEINE SCHAUNOTIZEN

SHARE GRUNT CONFIGURATION

Hans beschreibt, wie man seine Grunt tasks super versionierbar macht.

PHANTOMAS

Webperformance Metriken via PhantomJS unter Node.

HOW THE BROWSER PRELOADER MAKES PAGES LOAD FASTER

Bei der Vielzahl an unterschiedlichen prefetch Methoden der Browser verwirrt?
Dieser Artikel gibt Aufschluss.

ANDROID CHROME DEV TOOLS

Chrome am Desktop und Chrome auf Android. Ein Gespann wie es im Buche steht.
Welche neuen Möglichkeiten es gibt, Chrome auf Android auf eurem Desktop zu
debuggen, findet ihr hier..

HAVE I BEEN PWNED?

Sind eure Mailadressen in den großen Sicherheitslückenoffenbarungen der letzten
Monate dabei gewesen? Hier könnt ihr es ausprobieren.

FRONT-END DEVELOPMENT QUIZ

Bei einer durchschnittlichen Antwortgenauigkeit von 53% ist eins sicher: Knackig
und nichts für Anfänger

Revision 149: Toolchains, WebFonts und Offline-First

<p>Die Not macht erfinderisch: Aus akutem Mangel an Themen zauberten Schepp, Peter und Stefan eine sehr JavaScript-lastige Revision aus dem Hut, die sich mit brandneuen bzw. noch nicht so geläufigen Technologien auseinandersetzt:</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:26] <a href="http://dev.opera.com/articles/view/mutation-observers-tutorial/">DOM Mutation Events &#038; Mutation Observers</a></dt>
<dd>Bei seinen Arbeiten am <a href="http://dev.w3.org/csswg/css-images-3/#object-fit">object-fit</a> Polyfill mit Anselm stieß Schepp auf die (älteren, mittlerweile obsoleten) DOM Mutation Events bzw. die (neueren, flotteren) Mutation Observer, mit denen sich Änderungen an DOM Knoten ab IE9 fein überwachen lassen. Schepp erzählt von seinen Erfahrungen und nennt Anwendungsmöglichkeiten, und verrät auch wie man rein theoretisch im alten IE8 etwas ähnliches nutzen könnte.</dd>
<dt>[00:19:09] <a href="http://www.peterkroener.de/ecmascript-6-generators/">ECMAScript 6: Generators</a></dt>
<dd>Aus dem Webtechnologienlabor des Erklärbärs kommt ein feiner Artikel zu den neuen Generator Funktionen, die mit ECMAScript 6 spruchreif werden, und in Chrome via Flag und den Nightly Builds von Firefox sogar schon eingesetzt werden können. Peter erklärt Syntax und Funktionsweise und gibt einen Anwendungsfall an, mit dem man der Callback-Hölle entfliehen und ins asynchrone Nirvana eintreten kann. Das Schöne: Mit ES6 auf ES3 Transpilern wie <a href="https://github.com/google/traceur-compiler">Traceur</a> und dem dazu passenden <a href="https://github.com/aaronfrost/grunt-traceur">Grunt task</a> lässt sich das ganze sogar heute schon einsetzen!</dd>
</dl>
<h3>[00:42:31] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.youtube.com/watch?v=1aPR43fhIWk">Chrome Dev Summit: Service Worker</a></dt>
<dd>Ab 1:05:00 gibt&#8217;s einen tollen Ausblick auf die kommende <a href="https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md">Service Worker API</a>.</dd>
<dt><a href="http://responsivecomments.com/">Responsive Comments</a></dt>
<dd>Responsive Inhalte (wie z.B.: Bilder) ressourcenschonend in Kommentare verpacken und mit dieser JavaScript Bibliothek auslesen.</dd>
<dt><a href="http://refreshless.com/nouislider/">noUISlider</a></dt>
<dd>jQuery Plugins seien passé? Nicht wenn man so ein sauber implementiertes und sogar auf Touchgeräten absolut funktionierendes Sliding Control vorgesetzt bekommt.</dd>
<dt><a href="http://unicode.johnholtripley.co.uk/">Unicode in Fonts</a></dt>
<dd>Wer braucht denn gleich die Iconfont, wenn man mit Unicode Characters auch seine Herzchen bekommt. Diese Liste enthält alle Details.</dd>
<dt><a href="https://github.com/mozilla/localforage">LocalForage</a></dt>
<dd>Auf die IndexedDB mit der aus localStorage bekannten API zugreifen. LocalForage von Mozilla macht das möglich.</dd>
<dt>Advent, Advent &#8230;</dt>
<dd>Die besinnlichste Zeit des Jahres wäre nicht dasselbe ohne die beliebten Advent(s)kalender von <a href="http://24ways.org/">24 ways</a>, <a href="http://calendar.perfplanet.com/2013/">Perfplanet</a> und natürlich den <a href="http://webkrauts.de/serien/adventskalender/2013">Webkrauts</a>. Gerade bei letzterem empfehlen wir <a href="http://webkrauts.de/artikel/2013/mehr-sicherheit-im-frontend-durch-http-header">Frederic Hembergers</a> HTTP Header Artikel.</dd>
</dl>


Die Not macht erfinderisch: Aus akutem Mangel an Themen zauberten Schepp, Peter
und Stefan eine sehr JavaScript-lastige Revision aus dem Hut, die sich mit
brandneuen bzw. noch nicht so geläufigen Tech…

Die Not macht erfinderisch: Aus akutem Mangel an Themen zauberten Schepp, Peter
und Stefan eine sehr JavaScript-lastige Revision aus dem Hut, die sich mit
brandneuen bzw. noch nicht so geläufigen Technologien auseinandersetzt:


SCHAUNOTIZEN

[00:00:26] DOM MUTATION EVENTS & MUTATION OBSERVERS

Bei seinen Arbeiten am object-fit Polyfill mit Anselm stieß Schepp auf die
(älteren, mittlerweile obsoleten) DOM Mutation Events bzw. die (neueren,
flotteren) Mutation Observer, mit denen sich Änderungen an DOM Knoten ab IE9
fein überwachen lassen. Schepp erzählt von seinen Erfahrungen und nennt
Anwendungsmöglichkeiten, und verrät auch wie man rein theoretisch im alten IE8
etwas ähnliches nutzen könnte.

[00:19:09] ECMASCRIPT 6: GENERATORS

Aus dem Webtechnologienlabor des Erklärbärs kommt ein feiner Artikel zu den
neuen Generator Funktionen, die mit ECMAScript 6 spruchreif werden, und in
Chrome via Flag und den Nightly Builds von Firefox sogar schon eingesetzt werden
können. Peter erklärt Syntax und Funktionsweise und gibt einen Anwendungsfall
an, mit dem man der Callback-Hölle entfliehen und ins asynchrone Nirvana
eintreten kann. Das Schöne: Mit ES6 auf ES3 Transpilern wie Traceur und dem dazu
passenden Grunt task lässt sich das ganze sogar heute schon einsetzen!


[00:42:31] KEINE SCHAUNOTIZEN

CHROME DEV SUMMIT: SERVICE WORKER

Ab 1:05:00 gibt’s einen tollen Ausblick auf die kommende Service Worker API.

RESPONSIVE COMMENTS

Responsive Inhalte (wie z.B.: Bilder) ressourcenschonend in Kommentare verpacken
und mit dieser JavaScript Bibliothek auslesen.

NOUISLIDER

jQuery Plugins seien passé? Nicht wenn man so ein sauber implementiertes und
sogar auf Touchgeräten absolut funktionierendes Sliding Control vorgesetzt
bekommt.

UNICODE IN FONTS

Wer braucht denn gleich die Iconfont, wenn man mit Unicode Characters auch seine
Herzchen bekommt. Diese Liste enthält alle Details.

LOCALFORAGE

Auf die IndexedDB mit der aus localStorage bekannten API zugreifen. LocalForage
von Mozilla macht das möglich.

ADVENT, ADVENT …

Die besinnlichste Zeit des Jahres wäre nicht dasselbe ohne die beliebten
Advent(s)kalender von 24 ways, Perfplanet und natürlich den Webkrauts. Gerade
bei letzterem empfehlen wir Frederic Hembergers HTTP Header Artikel.

Revision 148: Generatoren und Mutationen

<p>Stefan, Hans und Schepp luden sich diesmal <a href="http://christoph-rumpel.com/">Christoph Rumpel</a> aus dem schönen Wien ein. Und darum ging es:</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:29] <a href="http://thenittygritty.co/reducing-boilerplate-code-front-end-init">INIT</a></dt>
<dd>INIT ist ein Frontend-Boilerplate aus Hans&#8216; Feder, das zunächst voll auf seine Bedürfnisse hin zugeschnitten gestartet war. Im Laufe der Zeit gesellten sich allerlei Contributions anderer Leute hinzu, so dass das Paket ab Stand heute zu einer ansehnlichen 1.0er-Version herangewachsen ist.</dd>
<dt>[00:17:57] <a href="http://www.kendoui.com/blogs/teamblog/posts/13-11-07/know-when-to-cdn.aspx">Know when to CDN</a></dt>
<dd>Wir nahmen den KendoUI-Artikel zum Anlass uns nochmal das Thema CDNs vorzunehmen: Welche Typen von CDNs gibt es? Wann ist der Einsatz von CDNs angesagt? Wann von Nachteil?</dd>
<dt>[00:40:48] <a href="http://laravel.com/">Laravel</a></dt>
<dd>Das Laravel Framework, mittlerweile in Version 4 vorliegend, erhebt den Anspruch, PHP eleganten und ausdrucksstarken Code abzutrotzen. Und das gelingt ihm auch. Christoph erzählt uns wie das funktioniert.</dd>
</dl>
<h3>[00:57:01] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/giakki/uncss">uncss</a></dt>
<dd>Mit Grunt und uncss lässt sich ganz hervorragend überflüssiges CSS aus aufgeblähten Stylesheets entfernen.</dd>
<dt><a href="http://helloanselm.com/2013/fix-image-resizing-with-object-fit/">object-fit Polyfill</a></dt>
<dd>Wer schon immer mal mit der CSS-Eigenschaft <code>object-fit</code> herumhantieren wollte, dem könnte dieser Polyfill gefallen.</dd>
<dt><a href="https://twitter.com/davatron5000/status/403624163664875520">Die Google Page Speed Insights um UX-Hinweise ergänzt</a></dt>
<dd>Mit einem angehängten GET-Parameter <code>&ux=1</code> lassen sich den Page Speed Insights auch User Experience Hinweise zur untersuchten Seite entlocken.</dd>
<dt><a href="http://pa11y.org/">pa11y</a></dt>
<dd>pa11y erlaubt ein automatisiertes Testing einer Seite gegen verschiedene Accessibility-Kriterien.</dd>
<dt><a href="http://leanmeanfightingmachine.github.io/dploy/">DPLOY</a></dt>
<dd>DPLOY ist ein Node-basiertes Script, das Änderungen in einem Git-Repository auf einem (S)FTP-Server nachvollzieht.</dd>
<dt><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></dt>
<dd>Hovereffekte führen beim Scrollen auf Geräten mit auf dem Bildschirm stehendem Mauszeiger zu versehentlichen &#8222;Paint Storms&#8220;. Diese Technik kann sie verhindern.</dd>
<dt><a href="https://vimeo.com/74356973">Kate Kiefer Lee: Voice and tone</a></dt>
<dd>Kate Kiefer Lee von Mailchimp gibt wertvolle Einblicke darin, wie man optimal für seine Zielgruppe und einen bestimmten Bereich seiner Seite textet. Als Guide liegt das Ganze zudem unter der Adresse <a href="http://voiceandtone.com/">voiceandtone.com</a> für alle zum Nachschlagen.</dd>
<dt><a href="https://chrome.google.com/webstore/detail/clockwork/dmggabnehkmmfmdffgajcflpdjlnoemp">Chrome Extension: Clockwork</a></dt>
<dd>Mit Clockwork lassen sich Laravel-interne Metriken nach vorne in die Chrome Devtools herausgeben.</dd>
<dt><a href="https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa">Chrome Extension: JSON Formatter</a></dt>
<dd>Der JSON Formatter sorgt für eine deutlich angenehmere Handhabbarkeit von JSON-Objekten in den Chrome Devtools.</dd>
<dt><a href="http://www.meetup.com/Laravel-Frameworkers-Vienna/events/151465372/">Laravel Meetup Vienna</a></dt>
<dd>Wer in der Gegen um Wien herum lebt und mehr über das Laravel-Framework erfahren möchte, dem sei das Laravel Meetup Vienna sehr ans Herz gelegt!</dd>
</dl>


Stefan, Hans und Schepp luden sich diesmal Christoph Rumpel aus dem schönen Wien
ein. Und darum ging es:


SCHAUNOTIZEN

[00:01:29] INIT

INIT ist ein Frontend-Boilerplate aus Hans‘ Feder, das zunächs…

Stefan, Hans und Schepp luden sich diesmal Christoph Rumpel aus dem schönen Wien
ein. Und darum ging es:


SCHAUNOTIZEN

[00:01:29] INIT

INIT ist ein Frontend-Boilerplate aus Hans‘ Feder, das zunächst voll auf seine
Bedürfnisse hin zugeschnitten gestartet war. Im Laufe der Zeit gesellten sich
allerlei Contributions anderer Leute hinzu, so dass das Paket ab Stand heute zu
einer ansehnlichen 1.0er-Version herangewachsen ist.

[00:17:57] KNOW WHEN TO CDN

Wir nahmen den KendoUI-Artikel zum Anlass uns nochmal das Thema CDNs
vorzunehmen: Welche Typen von CDNs gibt es? Wann ist der Einsatz von CDNs
angesagt? Wann von Nachteil?

[00:40:48] LARAVEL

Das Laravel Framework, mittlerweile in Version 4 vorliegend, erhebt den
Anspruch, PHP eleganten und ausdrucksstarken Code abzutrotzen. Und das gelingt
ihm auch. Christoph erzählt uns wie das funktioniert.


[00:57:01] KEINE SCHAUNOTIZEN

UNCSS

Mit Grunt und uncss lässt sich ganz hervorragend überflüssiges CSS aus
aufgeblähten Stylesheets entfernen.

OBJECT-FIT POLYFILL

Wer schon immer mal mit der CSS-Eigenschaft object-fit herumhantieren wollte,
dem könnte dieser Polyfill gefallen.

DIE GOOGLE PAGE SPEED INSIGHTS UM UX-HINWEISE ERGÄNZT

Mit einem angehängten GET-Parameter &ux=1 lassen sich den Page Speed Insights
auch User Experience Hinweise zur untersuchten Seite entlocken.

PA11Y

pa11y erlaubt ein automatisiertes Testing einer Seite gegen verschiedene
Accessibility-Kriterien.

DPLOY

DPLOY ist ein Node-basiertes Script, das Änderungen in einem Git-Repository auf
einem (S)FTP-Server nachvollzieht.

60FPS SCROLLING USING POINTER-EVENTS: NONE

Hovereffekte führen beim Scrollen auf Geräten mit auf dem Bildschirm stehendem
Mauszeiger zu versehentlichen „Paint Storms“. Diese Technik kann sie verhindern.

KATE KIEFER LEE: VOICE AND TONE

Kate Kiefer Lee von Mailchimp gibt wertvolle Einblicke darin, wie man optimal
für seine Zielgruppe und einen bestimmten Bereich seiner Seite textet. Als Guide
liegt das Ganze zudem unter der Adresse voiceandtone.com für alle zum
Nachschlagen.

CHROME EXTENSION: CLOCKWORK

Mit Clockwork lassen sich Laravel-interne Metriken nach vorne in die Chrome
Devtools herausgeben.

CHROME EXTENSION: JSON FORMATTER

Der JSON Formatter sorgt für eine deutlich angenehmere Handhabbarkeit von
JSON-Objekten in den Chrome Devtools.

LARAVEL MEETUP VIENNA

Wer in der Gegen um Wien herum lebt und mehr über das Laravel-Framework erfahren
möchte, dem sei das Laravel Meetup Vienna sehr ans Herz gelegt!

Revision 147: Über das INIT Boilerplate und das Laravel PHP-Framework

<p>Wenn es keine Themen gibt, macht man sich einfach welche. So luden Schepp, Peter und Stefan kurzerhand den <a href="http://helloanselm.com/">Anselm</a> ein und sprachen über Responsive Images (Anselm ist zufällig Experte auf dem Gebiet) sowie Verträge und Geschäftspraktiken im Webentwickler-Alltag.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:20] Responsive Images</dt>
<dd>Anselm ist seit Anbeginn der Zeiten mit den Thema Responsive Images befasst und versucht, einen Überblick über die aktuelle Situation zu geben. Es gibt viele Vorschläge (<a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/">srcset</a>, <a href="http://tabatkins.github.io/specs/respimg/Overview.html">src-n</a>, <a href="http://www.w3.org/TR/html-picture-element/">&lt;picture&gt;</a>) die von verschiedenen Parteien aus verschiedenen Gründen abgelehnt werden. Andere Ansätze wären ein <a href="http://blog.yoav.ws/2013/09/Responsive-Image-Container">responsives Bildformat</a> (das wir für sehr schwer einführbar halten; siehe <a href="http://de.wikipedia.org/wiki/WebP">WebP</a>) und JavaScript-Gehacke (das wir für sehr unzureichend halten). Am liebste hätten wir &lt;picture&gt;, müssen uns aber wohl für den Moment mit <a href="https://github.com/scottjehl/picturefill">Polyfills</a> oder <a href="http://responsivenews.co.uk/post/58244240772/imager-js">komplizierten Libraries</a> begnügen. Und zeitnahe Besserung ist nicht wirklich in Sicht&nbsp;&hellip;</dd>
<dt>[00:32:59] Verträge und Geschäftspraktiken</dt>
<dd>Angeregt durch <a href="https://github.com/csswizardry/Contract/blob/master/Contract.md">die bei Github eingestellte Vertrags-Vorlage</a> von Harry Roberts geben wir ein paar Tipps aus diesem Bereich zum besten. Wir sprechen unter anderem über</p>
<ul>
<li>Vorauszahlungen und Verzug
<li>Mitwirkungspflichten, Projektänderungen und -abbruch
<li>Copyright und Open Source
<li>Zeitplanung und Aufwandseinschätzung
</ul>
<p>Zum Abschluss geben wir alle jeweils einen Tipp zum besten, von dem wir glauben, dass ihn jeder befolgen sollte. Falls ihr weitere Vorschläge habt: ab in die Kommentare!</dd>
</dl>
<h3>[01:11:12] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://net.tutsplus.com/tutorials/tools-and-tips/setting-up-a-mac-dev-machine-from-zero-to-hero-with-dotfiles/">Setting Up your dev machine with dotfiles</a></dt>
<dd>Intro für alle, die das Themas Dotfiles bisher nur aus sicherer Distanz beobachtet haben.</dd>
<dt><a href="http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/">An Introduction To DOM Events</a></dt>
<dd>Epische Detail-Einführung in das Thema DOM-Events.</dd>
<dt><a href="http://dtr.fm/">Donau Tech Radio</a></dt>
<dd>Fast wie Working Draft, nur für das Backend.</dd>
<dt><a href="http://wdrl.info/">Web Development Reading List</a></dt>
<dd>Anselms Newsletter/Linkschleuder, neuerdings sogar mit Newsfeed!</dd>
</dl>


Wenn es keine Themen gibt, macht man sich einfach welche. So luden Schepp, Peter
und Stefan kurzerhand den Anselm ein und sprachen über Responsive Images (Anselm
ist zufällig Experte auf dem Gebiet) s…

Wenn es keine Themen gibt, macht man sich einfach welche. So luden Schepp, Peter
und Stefan kurzerhand den Anselm ein und sprachen über Responsive Images (Anselm
ist zufällig Experte auf dem Gebiet) sowie Verträge und Geschäftspraktiken im
Webentwickler-Alltag.


SCHAUNOTIZEN

[00:00:20] RESPONSIVE IMAGES

Anselm ist seit Anbeginn der Zeiten mit den Thema Responsive Images befasst und
versucht, einen Überblick über die aktuelle Situation zu geben. Es gibt viele
Vorschläge (srcset, src-n, <picture>) die von verschiedenen Parteien aus
verschiedenen Gründen abgelehnt werden. Andere Ansätze wären ein responsives
Bildformat (das wir für sehr schwer einführbar halten; siehe WebP) und
JavaScript-Gehacke (das wir für sehr unzureichend halten). Am liebste hätten wir
<picture>, müssen uns aber wohl für den Moment mit Polyfills oder komplizierten
Libraries begnügen. Und zeitnahe Besserung ist nicht wirklich in Sicht …

[00:32:59] VERTRÄGE UND GESCHÄFTSPRAKTIKEN

Angeregt durch die bei Github eingestellte Vertrags-Vorlage von Harry Roberts
geben wir ein paar Tipps aus diesem Bereich zum besten. Wir sprechen unter
anderem über



 * Vorauszahlungen und Verzug
 * Mitwirkungspflichten, Projektänderungen und -abbruch
 * Copyright und Open Source
 * Zeitplanung und Aufwandseinschätzung

Zum Abschluss geben wir alle jeweils einen Tipp zum besten, von dem wir glauben,
dass ihn jeder befolgen sollte. Falls ihr weitere Vorschläge habt: ab in die
Kommentare!


[01:11:12] KEINE SCHAUNOTIZEN

SETTING UP YOUR DEV MACHINE WITH DOTFILES

Intro für alle, die das Themas Dotfiles bisher nur aus sicherer Distanz
beobachtet haben.

AN INTRODUCTION TO DOM EVENTS

Epische Detail-Einführung in das Thema DOM-Events.

DONAU TECH RADIO

Fast wie Working Draft, nur für das Backend.

WEB DEVELOPMENT READING LIST

Anselms Newsletter/Linkschleuder, neuerdings sogar mit Newsfeed!

Revision 146: Responsive Images, Verträge und Links

<p>Eine weitere Sendung mit Besonderheiten und tollen Gästen: <a href="http://getkirby.com/">Kirby</a>-Papa <a href="http://bastianallgeier.com/">Bastian Allgeier</a> und <a href="http://hood.ie/">Hoodie</a>-Mitentwickler <a href="http://alexfeyerke.com/">Alex Feyerke</a> waren diesmal mit von der Partie.</p>
<h3>[00:01:45] News</h3>
<dl>
<dt><a href="http://blogs.msdn.com/b/ie/archive/2013/11/07/ie11-for-windows-7-globally-available-for-consumers-and-businesses.aspx">IE11 für Windows 7</a></dt>
<dd>Den Internet Explorer 11 gibt es nun auch für Windows 7.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:09] <a href="http://decentralize.it/">Grand Decentral Station</a></dt>
<dd>Unser Gast Bastian erzählt zu seinem neuen Projekt Grand Decentral Station, über das er auf der <a href="http://vimeo.com/78798346">border:none</a> sprach, bei dem es darum geht <a href="http://getkirby.com/blog/lets-build-a-better-web">ein besseres, freies Web zu etablieren</a>. Die Idee spielt im gleiche Spektrum wie <a href="http://aralbalkan.com/notes/the-missing-quadrant-of-consumer-technology/">Aral Balkans Quadranten</a> und <a href="http://aralbalkan.com/notes/codename-prometheus/">Projekt Prometheus</a> und hat als These, dass das Netz zwischen Zentralisierung und Dezentralisierung oszilliert. Darauf kam Bastian über seine Arbeit an <a href="http://zootool.com/">Zootool</a>, bei dem er viel Verantwortung für die Daten Dritter hat. Mehr zum Thema gibt es im <a href="https://github.com/grand-decentral-station/concept/">Starting Point</a> zu GDS zu lesen.</dd>
<dt>[00:30:13] <a href="http://hood.ie/">Hood.ie</a></dt>
<dd>Der zweite Gast, Alex, erklärt das <a href="https://github.com/hoodiehq">Open Source Projekt Hoodie</a>: Eine Library für schnell gebaute Data-Driven-Webapps, die komplett im Front-end geschrieben werden und den Ansatz Offline-First verfolgen. Peters erste Versuche mit Hoodie waren ziemlich schnell erfolgreich und Alex beschreibt, wie sie eine komplette <a href="http://css-tricks.com/examples/EditableInvoice/">Invoicing App</a> in einem Samstags-Hack geschrieben haben. Und nicht nur Hoodies Gegenwart ist interessant, sondern auch die Zukunft: geplant ist Sharing/Public Data, Payments und einiges mehr.</dd>
</dl>
<h3>[00:56:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://sarasoueidan.com/blog/css-shapes/index.html">CSS Shapes</a></dt>
<dd>Ein Rundum-Schlag zum Thema CSS Shapes.</dd>
<dt><a href="http://html5doctor.com/cite-and-blockquote-reloaded/">cite and blockquote – reloaded</a></dt>
<dd>Mit HTML5 bekommt das Zitieren in Markup eine ganz neue Bedeutung. Alle Infos dazu haben die HTML5 Doktoren.</dd>
<dt><a href="http://adactio.com/journal/6555/">Icon fonts, unicode ranges, and IE8’s compatibility mode</a></dt>
<dd>Jeremy Keith setzt sich mit dem Thema Unicode Ranges für Icons näher auseinander.</dd>
<dt><a href="http://timkadlec.com/2013/11/why-we-need-responsive-images-part-deux/">Why We Need Responsive Images: Part Deux</a></dt>
<dd>Noch mehr Gründe, warum wir Responsive Images brauchen.</dd>
</dl>


Eine weitere Sendung mit Besonderheiten und tollen Gästen: Kirby-Papa Bastian
Allgeier und Hoodie-Mitentwickler Alex Feyerke waren diesmal mit von der Partie.


[00:01:45] NEWS

IE11 FÜR WINDOWS 7

De…

Eine weitere Sendung mit Besonderheiten und tollen Gästen: Kirby-Papa Bastian
Allgeier und Hoodie-Mitentwickler Alex Feyerke waren diesmal mit von der Partie.


[00:01:45] NEWS

IE11 FÜR WINDOWS 7

Den Internet Explorer 11 gibt es nun auch für Windows 7.


SCHAUNOTIZEN

[00:02:09] GRAND DECENTRAL STATION

Unser Gast Bastian erzählt zu seinem neuen Projekt Grand Decentral Station, über
das er auf der border:none sprach, bei dem es darum geht ein besseres, freies
Web zu etablieren. Die Idee spielt im gleiche Spektrum wie Aral Balkans
Quadranten und Projekt Prometheus und hat als These, dass das Netz zwischen
Zentralisierung und Dezentralisierung oszilliert. Darauf kam Bastian über seine
Arbeit an Zootool, bei dem er viel Verantwortung für die Daten Dritter hat. Mehr
zum Thema gibt es im Starting Point zu GDS zu lesen.

[00:30:13] HOOD.IE

Der zweite Gast, Alex, erklärt das Open Source Projekt Hoodie: Eine Library für
schnell gebaute Data-Driven-Webapps, die komplett im Front-end geschrieben
werden und den Ansatz Offline-First verfolgen. Peters erste Versuche mit Hoodie
waren ziemlich schnell erfolgreich und Alex beschreibt, wie sie eine komplette
Invoicing App in einem Samstags-Hack geschrieben haben. Und nicht nur Hoodies
Gegenwart ist interessant, sondern auch die Zukunft: geplant ist Sharing/Public
Data, Payments und einiges mehr.


[00:56:00] KEINE SCHAUNOTIZEN

CSS SHAPES

Ein Rundum-Schlag zum Thema CSS Shapes.

CITE AND BLOCKQUOTE – RELOADED

Mit HTML5 bekommt das Zitieren in Markup eine ganz neue Bedeutung. Alle Infos
dazu haben die HTML5 Doktoren.

ICON FONTS, UNICODE RANGES, AND IE8’S COMPATIBILITY MODE

Jeremy Keith setzt sich mit dem Thema Unicode Ranges für Icons näher
auseinander.

WHY WE NEED RESPONSIVE IMAGES: PART DEUX

Noch mehr Gründe, warum wir Responsive Images brauchen.

Revision 145: Dezentralisierung und Hoodie

<p>Diese Woche war mal wieder ein Gast im Working Draft dabei: <a href="http://maddesigns.de/">Sven Wolfermann</a> gab sich die Ehre ein wenig über seine Projekte und Erfahrungen mit Responsive Images und vielem mehr Preis zu geben.</p>
<h3>[00:01:09] News</h3>
<dl>
<dt><a href="http://workingdraft.de/1/">3 Jahre Working Draft!</a></dt>
<dd>Uns gibt es drei Jahre, und wir sind cool. Danke an Mama!</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/25">Firefox 25 veröffentlicht</a></dt>
<dd>Firefox 25 für Entwickler liest sich ziemlich interessant.</dd>
<dt><a href="https://brendaneich.com/2013/10/ciscos-h-264-good-news/">Cisco’s H.264</a></dt>
<dd>Cisco stellt seinen H.264 Codec für alle kostenfrei zur Verfügung. Somit wird H.264 der neue Video-Standard im Web werden.</dd>
<dt><a href="http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview">Android 4.4 KitKat</a></dt>
<dd>Chrome wird der neue Standard Brower für alle Android Geräte und vieles mehr.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:05:38] <a href="http://maddesigns.de/RESS/#1">Responsive Bilder und RESS</a></dt>
<dd>Mit Sven haben wir einen guten Entwickler zu Gast, der im Bereich Responsive Bilder auf einen großen Erfahrungsschatz zurück greift. Gemeinsam besprechen wir BBCs <a href="http://www.integralist.co.uk/posts/imager-js-bbc-news-responsive-images-solution/">Imager.js</a>, <a href="http://fleximg.com/">fleximg</a>, <a href="http://www.resrc.it/">ReSRC</a> und den generellen Ansatz der server-seitigen Implementierung von Responsive Images an. Svens <a href="http://maddesigns.de/RESS/#1">Slidedeck zum Thema RESS</a> bietet eine gute Grundlage für diese Diskussion, durch die wir schließlich auf das Thema <a href="https://docs.google.com/presentation/d/1y_A6VOZy9bD2i0VLHv9ZWr0W3hZJvlTNCDA0itjI0yM/edit#slide=id.p19">Mobile Performance</a> kommen.</dd>
<dt>[00:37:06] Hörerfrage: Welche FTP/SFTP/SCP-Clients nutzen wir so?</dt>
<dd>Aufgrund eine Hörerfrage sprechen wir über die Tools, die wir nutzen, um Ding irgendwo hoch zu laden. Einige FTP Clients, die genannt werden sind <a href="http://cyberduck.ch/">CyberDuck</a> und <a href="http://panic.com/transmit/">Transmit</a>. Allerdings schweifen wir etwas ab und besprechen andere Deployment Strategien für Websites, z.B. erwähnen wir <a href="http://deployhq.com/">deployhq.com</a>.</dd>
</dl>
<h3>[00:47:20] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://conditionerjs.com/">Conditioner.js</a></dt>
<dd>Laden und löschen von bestimmten JavaScript Modulen mittels einer Bibliothek.</dd>
<dt><a href="http://scottkellum.com/2013/10/25/the-new-kellum-method.html">The new Kellum method</a></dt>
<dd>Scroll Kellum beschreib seine neue Methode für Image Replacement, vor allem im Bezug auf Icons.</dd>
<dt><a href="http://triflejs.org/">TrifleJS</a></dt>
<dd>Ein Headless Internet Explorer für Windows (als Pendant zu PhantomJS).</dd>
</dl>


Diese Woche war mal wieder ein Gast im Working Draft dabei: Sven Wolfermann gab
sich die Ehre ein wenig über seine Projekte und Erfahrungen mit Responsive
Images und vielem mehr Preis zu geben.


[00:…

Diese Woche war mal wieder ein Gast im Working Draft dabei: Sven Wolfermann gab
sich die Ehre ein wenig über seine Projekte und Erfahrungen mit Responsive
Images und vielem mehr Preis zu geben.


[00:01:09] NEWS

3 JAHRE WORKING DRAFT!

Uns gibt es drei Jahre, und wir sind cool. Danke an Mama!

FIREFOX 25 VERÖFFENTLICHT

Firefox 25 für Entwickler liest sich ziemlich interessant.

CISCO’S H.264

Cisco stellt seinen H.264 Codec für alle kostenfrei zur Verfügung. Somit wird
H.264 der neue Video-Standard im Web werden.

ANDROID 4.4 KITKAT

Chrome wird der neue Standard Brower für alle Android Geräte und vieles mehr.


SCHAUNOTIZEN

[00:05:38] RESPONSIVE BILDER UND RESS

Mit Sven haben wir einen guten Entwickler zu Gast, der im Bereich Responsive
Bilder auf einen großen Erfahrungsschatz zurück greift. Gemeinsam besprechen wir
BBCs Imager.js, fleximg, ReSRC und den generellen Ansatz der server-seitigen
Implementierung von Responsive Images an. Svens Slidedeck zum Thema RESS bietet
eine gute Grundlage für diese Diskussion, durch die wir schließlich auf das
Thema Mobile Performance kommen.

[00:37:06] HÖRERFRAGE: WELCHE FTP/SFTP/SCP-CLIENTS NUTZEN WIR SO?

Aufgrund eine Hörerfrage sprechen wir über die Tools, die wir nutzen, um Ding
irgendwo hoch zu laden. Einige FTP Clients, die genannt werden sind CyberDuck
und Transmit. Allerdings schweifen wir etwas ab und besprechen andere Deployment
Strategien für Websites, z.B. erwähnen wir deployhq.com.


[00:47:20] KEINE SCHAUNOTIZEN

CONDITIONER.JS

Laden und löschen von bestimmten JavaScript Modulen mittels einer Bibliothek.

THE NEW KELLUM METHOD

Scroll Kellum beschreib seine neue Methode für Image Replacement, vor allem im
Bezug auf Icons.

TRIFLEJS

Ein Headless Internet Explorer für Windows (als Pendant zu PhantomJS).

Revision 144: RESS und unsere Deployment Strategien

<p>Mit fast voller Stammbesatzung (Schepp, Stefan, Hans und Peter) stellten wir uns den CSS-Themen der Woche und nahmen uns auch eine Hörerfrage vor.</p>
<h3>[00:00:12] News</h3>
<dl>
<dt><a href="https://github.com/less/less.js/blob/master/CHANGELOG.md">LESSCSS 1.5</a></dt>
<dd>Totgesagte bringen mehr neue Versionen raus. Jetzt mit Source Maps!</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:40] CSS best practices</dt>
<dd>Artikel über <a href="http://www.kapowaz.net/articles/cargo-cult-css">Cargo Cult CSS</a> und <a href="http://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/">eine Herangehensweise mit vielen Klassen</a> laden zur Diskussion über CSS best practices ein. Wir sind <a href="http://adactio.com/journal/6537/">nicht die einzigen</a>, die beide postulierten Methoden etwas krass finden. Konventionen und Systeme schön und gut, aber <a href="http://smacss.com/">SMACSS</a>, <a href="http://bem.info/">BEM</a>, <a href="http://oocss.org/">OOCSS</a>, und Konsorten scheinen uns in ihrer Gesamtheit (Stefan findet BEM zumindest in Teilen gut) dann doch Probleme lösen zu wollen, die mit CSS allein nicht zu bewältigen sind. Wir sind uns einig, dass sehr viele Probleme einfach aus der Welt zu schaffen wären, wenn man nur einen Präprozessor benutzen würde.</dd>
<dt>[00:19:11] <a href="http://wilsonpage.co.uk/introducing-layout-boundaries/">Introducing layout boundaries</a></dt>
<dd>Der <i>Summus Pontifex Ecclesiae Performansis</i> erklärt, wie (nach den Informationen von Wilson Page) bestimmte CSS-Eigenschaften genutzt werden können, um die Auswirkungen von Reflows (<i>layout thrashing</i>) auf Teilbereiche der Webseite zu beschränken. Des weiteren regen wir uns darüber auf, dass es nur in Chrome (und neuerdings im IE11) Devtools gibt, die die Diagnose solcher Probleme/Features erlauben und reden über die Performance-Sünder CSS-Gradients, Box-Shadow und Border-Radius. Schepps Tipp, in Mobile-Media-Queries solcherlei Spielkram auszuschalten (z.B. per Präprozessor-Mixin) findet großen Anklang.</dd>
<dt>[00:28:57] <a href="http://wilsonpage.co.uk/batching-image-insertion/">Batching image insertion</a></dt>
<dd>Sie kennen das: sie wollen über 9000 Bildelemente mit Data-URLs einfügen und plötzlich ruckelt der Browser. Wilson Page hat eine Technik bzw. mit <a href="http://github.com/wilsonpage/fastdom">fastdom</a> eine JS-Library ausgegraben, mit der sich dieses Problem in den Griff bekommen lässt. Auch Performance-Papst Schepp und sein treuer Kardinal Stefan schwören drauf.</dd>
<dt>[00:47:59] Hörerfrage: Wie geht ihr vor, wenn ihr ohne Designer arbeiten müsst/dürft?</dt>
<dd>Peter bruteforced mangels Designtalent seine Webdesigns mit viel Zeit und natürlich im Browser. Ansonsten finden wir Webdesigner doch ganz praktisch (vor allem wenn sie zur entspannten Zusammenarbeit bereit sind) und fabulieren ein bisschen über Transitions und Hover-States (die manch ein Designer gern vergisst), Browserdesign versus Photoshop, Flash und Hitler.</dd>
</dl>
<h3>[00:50:08] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-img-element">Das img-Element</a></dt>
<dd>Zum <code>img</code>-Element fällt uns nicht viel Intelligentes oder gar spannendes ein und so reden wir stattdessen über den Coolness-Faktor von <a href="http://www.whatwg.org/specs/web-apps/current-work/#image-maps">Image Maps</a>. Das <a href="http://www.whatwg.org/specs/web-apps/current-work/#attr-img-crossorigin">crossorigin-Attribut</a> klingt zwar interessant, aber so richtig viel Plan haben wir davon auch nicht. Mehr Plan und Verwendung hätten wir da schon von und für die <code>lazyload</code> und <code>postpone</code>-Attribute aus der <a href="http://www.w3.org/TR/resource-priorities/">Resource-Priorities-Spec</a>, deren flächendeckende Unterstützung allerdings noch auf sich warten lässt.</dd>
</dl>
<h3>[00:56:28] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://snapsvg.io/">Snap.svg</a> und <a href="http://bonsaijs.org/">BonsaiJS</a></dt>
<dd>SVG-Grafiklibraries.</dd>
<dt><a href="http://webkrauts.de/termine/2013/1-kasseler-web-montag">1. Kasseler Web Montag</a></dt>
<dd>18. November, 19:00 Uhr.</dd>
<dt><a href="https://speakerdeck.com/addyosmani/automating-front-end-workflow">Automating Front-end Workflow</a></dt>
<dd>Episches Slide Deck von Addy Osmani.</dd>
<dt><a href="http://localtunnel.me/">localtunnel</a></dt>
<dd>Schnell eine Web-URL für ein lokales Projekt anlegen.</dd>
</dl>


Mit fast voller Stammbesatzung (Schepp, Stefan, Hans und Peter) stellten wir uns
den CSS-Themen der Woche und nahmen uns auch eine Hörerfrage vor.


[00:00:12] NEWS

LESSCSS 1.5

Totgesagte bringen me…

Mit fast voller Stammbesatzung (Schepp, Stefan, Hans und Peter) stellten wir uns
den CSS-Themen der Woche und nahmen uns auch eine Hörerfrage vor.


[00:00:12] NEWS

LESSCSS 1.5

Totgesagte bringen mehr neue Versionen raus. Jetzt mit Source Maps!


SCHAUNOTIZEN

[00:00:40] CSS BEST PRACTICES

Artikel über Cargo Cult CSS und eine Herangehensweise mit vielen Klassen laden
zur Diskussion über CSS best practices ein. Wir sind nicht die einzigen, die
beide postulierten Methoden etwas krass finden. Konventionen und Systeme schön
und gut, aber SMACSS, BEM, OOCSS, und Konsorten scheinen uns in ihrer Gesamtheit
(Stefan findet BEM zumindest in Teilen gut) dann doch Probleme lösen zu wollen,
die mit CSS allein nicht zu bewältigen sind. Wir sind uns einig, dass sehr viele
Probleme einfach aus der Welt zu schaffen wären, wenn man nur einen Präprozessor
benutzen würde.

[00:19:11] INTRODUCING LAYOUT BOUNDARIES

Der Summus Pontifex Ecclesiae Performansis erklärt, wie (nach den Informationen
von Wilson Page) bestimmte CSS-Eigenschaften genutzt werden können, um die
Auswirkungen von Reflows (layout thrashing) auf Teilbereiche der Webseite zu
beschränken. Des weiteren regen wir uns darüber auf, dass es nur in Chrome (und
neuerdings im IE11) Devtools gibt, die die Diagnose solcher Probleme/Features
erlauben und reden über die Performance-Sünder CSS-Gradients, Box-Shadow und
Border-Radius. Schepps Tipp, in Mobile-Media-Queries solcherlei Spielkram
auszuschalten (z.B. per Präprozessor-Mixin) findet großen Anklang.

[00:28:57] BATCHING IMAGE INSERTION

Sie kennen das: sie wollen über 9000 Bildelemente mit Data-URLs einfügen und
plötzlich ruckelt der Browser. Wilson Page hat eine Technik bzw. mit fastdom
eine JS-Library ausgegraben, mit der sich dieses Problem in den Griff bekommen
lässt. Auch Performance-Papst Schepp und sein treuer Kardinal Stefan schwören
drauf.

[00:47:59] HÖRERFRAGE: WIE GEHT IHR VOR, WENN IHR OHNE DESIGNER ARBEITEN
MÜSST/DÜRFT?

Peter bruteforced mangels Designtalent seine Webdesigns mit viel Zeit und
natürlich im Browser. Ansonsten finden wir Webdesigner doch ganz praktisch (vor
allem wenn sie zur entspannten Zusammenarbeit bereit sind) und fabulieren ein
bisschen über Transitions und Hover-States (die manch ein Designer gern
vergisst), Browserdesign versus Photoshop, Flash und Hitler.


[00:50:08] GLÜCKSRAD

DAS IMG-ELEMENT

Zum img-Element fällt uns nicht viel Intelligentes oder gar spannendes ein und
so reden wir stattdessen über den Coolness-Faktor von Image Maps. Das
crossorigin-Attribut klingt zwar interessant, aber so richtig viel Plan haben
wir davon auch nicht. Mehr Plan und Verwendung hätten wir da schon von und für
die lazyload und postpone-Attribute aus der Resource-Priorities-Spec, deren
flächendeckende Unterstützung allerdings noch auf sich warten lässt.


[00:56:28] KEINE SCHAUNOTIZEN

SNAP.SVG UND BONSAIJS

SVG-Grafiklibraries.

1. KASSELER WEB MONTAG

18. November, 19:00 Uhr.

AUTOMATING FRONT-END WORKFLOW

Episches Slide Deck von Addy Osmani.

LOCALTUNNEL

Schnell eine Web-URL für ein lokales Projekt anlegen.

Revision 143: CSS, Performance, Hörerfragen

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

PODLIST

Working Draft

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

Neue Episoden

Revision 154: Vagrant und Clientside JavaScript Error Reporting

Working Draft

Revision 153: Typecsset und die Web Speech API

Working Draft

Revision 152: JSPerf, Open Source, Gulp, Funktionales

Working Draft

Revision 151: Myth, statische Seiten, Links

Working Draft

Revision 150: Kurz-Jubiläum mit News, Glücksrad und Links

Working Draft

Revision 149: Toolchains, WebFonts und Offline-First

Working Draft

Revision 148: Generatoren und Mutationen

Working Draft

Revision 147: Über das INIT Boilerplate und das Laravel PHP-Framework

Working Draft

Revision 146: Responsive Images, Verträge und Links

Working Draft

Revision 145: Dezentralisierung und Hoodie

Working Draft

Revision 144: RESS und unsere Deployment Strategien

Working Draft

Revision 143: CSS, Performance, Hörerfragen

Working Draft