<p>Für diese Revision luden sich Schepp und Peter den Node-Nerd Golo Roden (<a href="https://twitter.com/goloroden">Twitter</a>, <a href="http://www.goloroden.de/">Webseite</a>) ein und plauderten über Node.JS und ganz allgemein den Zustand von JavaScript in Gegenwart und Zukunft.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] JavaScript aus der Perspektive eines Backend-Entwicklers</dt>
<dd>Golo erzählt, wie man aus der C#-Welt an JavaScript gerät und das ganze dann auch vernünftig lernt. Gemeinsam sind wir der Auffassung, dass nach den ersten Copy-Paste-Basteleien die Lektüre von <a href="http://www.oreilly.de/catalog/9780596517748/">The Good Parts</a> und <a href="http://shop.oreilly.com/product/9780596805531.do">The Definitive Guide</a> angebracht sind.</dd>
<dt>[00:15:50] ES6 und Async</dt>
<dd>Golo und Peter debattieren die Vor- und Nachteile von ES6-Features wie <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions">Arrow Functions</a>, <a href="http://tc39wiki.calculist.org/es6/classes/">Klassen</a> und <a href="http://www.peterkroener.de/ecmascript-6-generators/">Generator Functions</a> (nebst <a href="https://github.com/visionmedia/co">Libraries</a>), wobei neben <a href="https://github.com/caolan/async">Async.js</a> auch die Artikel <a href="http://steve-yegge.blogspot.de/2006/03/execution-in-kingdom-of-nouns.html">Execution in the Kingdom of Nouns</a> und <a href="http://www.paulgraham.com/diff.html">What Made Lisp different</a> zur Sprache kommen.</dd>
<dt>[00:43:22] Node 0.12</dt>
<dd>Nachdem wir festgestellt haben, dass wir alle schon Node benutzt haben bevor es cool war (Version 0.4) erzählt Golo ein wenig über das kommende Node-Release 0.12. Wir sprechen über instabile APIs und Module, <a href="https://github.com/visionmedia">TJ Holowaychuk</a>, <a href="https://github.com/zpao/spidernode">SpiderNode</a> (mittlerweile eingestellt) und die Causa Joyent versus Strongloop.</dd>
<dt>[00:57:50] <a href="https://twitter.com/mkuehnel/status/437690535047069696">Hörer-Frage: Koa vs Express</a></dt>
<dd>Bei der Frage <a href="http://expressjs.com/">Express</a> versus <a href="http://koajs.com/">Koa</a> (beides Webframeworks) sind wir uns einig: Koa taugt erstmal nur als Spielzeug. Golo weist darauf hin, dass ES6 noch nicht in Node Standardmäßig aktiviert ist und Peter hat obendrein noch kein Vertrauen in die Stabilität von Koa selbst. Der aktuelle Hype erinnert uns ein wenig an die leicht überhypte Frage <a href="http://gruntjs.com/">Grunt</a> versus <a href="http://gulpjs.com/">Gulp</a>.</dd>
<dt>[01:03:44] Wie lernt man am besten Node?</dt>
<dd>Peter behauptet, Node wäre ganz einfach, sofern man JavaScript schon kann; die APIs lernt man besten, indem man wie in jeder anderen Programmiersprache einfache Programme schreibt. Golo geht im Prinzip d‘accord, sieht die größte Hürde im etwas unübersichtlichen Ökosystem von Node. Hilfe findet man natürlich am besten in Golos Buch <a href="http://www.amazon.de/Node-js-hochperformante-echtzeitf%C3%A4hige-Webanwendungen-professionell/dp/389864829X">Node.js &amp; Co: Skalierbare, hochperformante und echtzeitfähige Webanwendungen professionell in JavaScript entwickeln</a>.</dd>
<dt>[01:09:27] <a href="http://www.enterjs.de/">EnterJS</a></dt>
<dd>Golo erzählt von seiner Konferenz EnterJS, die vom 30. Juni bis 2. Juli in Köln stattfindet. Thema ist JavaScript im Unternehmenskontext.</dd>
</dl>
<h3>[01:13:19] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://randomuser.me/">Random User Generator</a></dt>
<dd>Placekitten für User-Daten.</dd>
<dt><a href="http://fettblog.eu/blog/2014/02/20/no-prefixes/">noPrefixes flag in Modernizr</a></dt>
<dd>Stefan bloggt über Fortschritte im Kampf gegen Vendor-Prefixes an der Modernizr-Front</dd>
<dt><a href="https://github.com/w3c-webmob/installable-webapps/blob/gh-pages/ios_standalone/README.md">Installable Standalone WebApps</a></dt>
<dd>Ein Überblick über den Status Quo.</dd>
<dt><a href="http://wurfljs.com/">WURFL.js &#8211; Client Side, meet Server Side</a></dt>
<dd>Die bekannte Device Detection Library jetzt auch clientseitig.</dd>
<dt><a href="http://w3.eleqtriq.com/2014/02/the-4-slice-scaling-technique-for-svg/">The 4 Slice Scaling Technique for SVG</a></dt>
<dd>SVG-Nerd Dirk Weber SVG-Slicing für Fortgeschrittene.</dd>
<dt><a href="http://blogs.adobe.com/webplatform/2014/02/24/using-blend-modes-in-html-canvas/">Using blend modes in HTML Canvas</a></dt>
<dd>Ein weniger bekanntes HTML5-Feature wird vom Adobe-Team beleuchtet.</dd>
</dl>


Für diese Revision luden sich Schepp und Peter den Node-Nerd Golo Roden
(Twitter, Webseite) ein und plauderten über Node.JS und ganz allgemein den
Zustand von JavaScript in Gegenwart und Zukunft.


SC…

Working Draft

Für diese Revision luden sich Schepp und Peter den Node-Nerd Golo Roden
(Twitter, Webseite) ein und plauderten über Node.JS und ganz allgemein den
Zustand von JavaScript in Gegenwart und Zukunft.


SCHAUNOTIZEN

[00:01:50] JAVASCRIPT AUS DER PERSPEKTIVE EINES BACKEND-ENTWICKLERS

Golo erzählt, wie man aus der C#-Welt an JavaScript gerät und das ganze dann
auch vernünftig lernt. Gemeinsam sind wir der Auffassung, dass nach den ersten
Copy-Paste-Basteleien die Lektüre von The Good Parts und The Definitive Guide
angebracht sind.

[00:15:50] ES6 UND ASYNC

Golo und Peter debattieren die Vor- und Nachteile von ES6-Features wie Arrow
Functions, Klassen und Generator Functions (nebst Libraries), wobei neben
Async.js auch die Artikel Execution in the Kingdom of Nouns und What Made Lisp
different zur Sprache kommen.

[00:43:22] NODE 0.12

Nachdem wir festgestellt haben, dass wir alle schon Node benutzt haben bevor es
cool war (Version 0.4) erzählt Golo ein wenig über das kommende Node-Release
0.12. Wir sprechen über instabile APIs und Module, TJ Holowaychuk, SpiderNode
(mittlerweile eingestellt) und die Causa Joyent versus Strongloop.

[00:57:50] HÖRER-FRAGE: KOA VS EXPRESS

Bei der Frage Express versus Koa (beides Webframeworks) sind wir uns einig: Koa
taugt erstmal nur als Spielzeug. Golo weist darauf hin, dass ES6 noch nicht in
Node Standardmäßig aktiviert ist und Peter hat obendrein noch kein Vertrauen in
die Stabilität von Koa selbst. Der aktuelle Hype erinnert uns ein wenig an die
leicht überhypte Frage Grunt versus Gulp.

[01:03:44] WIE LERNT MAN AM BESTEN NODE?

Peter behauptet, Node wäre ganz einfach, sofern man JavaScript schon kann; die
APIs lernt man besten, indem man wie in jeder anderen Programmiersprache
einfache Programme schreibt. Golo geht im Prinzip d‘accord, sieht die größte
Hürde im etwas unübersichtlichen Ökosystem von Node. Hilfe findet man natürlich
am besten in Golos Buch Node.js & Co: Skalierbare, hochperformante und
echtzeitfähige Webanwendungen professionell in JavaScript entwickeln.

[01:09:27] ENTERJS

Golo erzählt von seiner Konferenz EnterJS, die vom 30. Juni bis 2. Juli in Köln
stattfindet. Thema ist JavaScript im Unternehmenskontext.


[01:13:19] KEINE SCHAUNOTIZEN

RANDOM USER GENERATOR

Placekitten für User-Daten.

NOPREFIXES FLAG IN MODERNIZR

Stefan bloggt über Fortschritte im Kampf gegen Vendor-Prefixes an der
Modernizr-Front

INSTALLABLE STANDALONE WEBAPPS

Ein Überblick über den Status Quo.

WURFL.JS – CLIENT SIDE, MEET SERVER SIDE

Die bekannte Device Detection Library jetzt auch clientseitig.

THE 4 SLICE SCALING TECHNIQUE FOR SVG

SVG-Nerd Dirk Weber SVG-Slicing für Fortgeschrittene.

USING BLEND MODES IN HTML CANVAS

Ein weniger bekanntes HTML5-Feature wird vom Adobe-Team beleuchtet.

Revision 160: Node, JavaScript, Links

<p>Gästefrei sind diesmal Schepp, Rodney und Stefan mit am Start, um mit Grunt nach dem Hype in Klausur zu gehen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] Grunt</dt>
<dd>Grunt ist ja nun schon eine Weile bekannt und im Einsatz, und erfreut sich immer größerer Beliebtheit bei den Entwicklern. Sogar Schepp hat seine selbstgebastelten Buildscripts für diverse Projekte verlassen und ist in die Grunt-Welt eingetaucht. Wird reden über den Einsatz des Buildtools in großen und kleinen Projekten, und wie man sich das effiziente Entwickeln, vor allem in Hinblick auf CI und CD ohne Grunt eigentlich nicht mehr vorstellen kann. Plugins die erwähnt werden sind unter anderem <a href="https://www.npmjs.org/package/grunt-spritesmith">spritesmith</a>, <a href="https://www.npmjs.org/package/grunt-autoprefixer">autoprefixer</a>, <a href="https://www.npmjs.org/package/grunt-svgmin">svgmin</a>, <a href="https://www.npmjs.org/package/grunt-contrib-cssmin">cssmin</a> und <a href="https://www.npmjs.org/package/grunt-connect">connect</a>. Außerdem empfiehlt Rodney, statt <a href="https://www.npmjs.org/package/load-grunt-tasks">load-grunt-tasks</a> besser <a href="https://www.npmjs.org/package/matchdep">matchdep</a> zu verwenden. Wer übrigens das letzte aus Grunt herauskitzeln will, dem empfehlen wir <a href="http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/">Paul Bakaus Artikel auf HTML5 Rocks</a></dd>
</dl>
<h3>[00:47:27] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/prasmussen/chrome-cli">Chrome CLI</a></dt>
<dd>Viel im Terminal? Mit der Chrome CLI kann man seinen Entwicklungsbrowser nun auch bequem von der Kommandozeile aus steuern.</dd>
<dt><a href="http://www.sitepoint.com/sass-extend-nobody-told-you/">What nobody told you about Sass @extend</a></dt>
<dd>Hugo Giraudel schreibt über die Funktionsweise und Gefahren der Sass <code>@extend</code> Methode.</dd>
<dt><a href="http://tryhandlebarsjs.com/">Try Handlebars</a></dt>
<dd>Handlebars templates direkt im Browser ausprobieren und sehen, ob selbstgeschriebene Helper funktionieren. Geht hier.</dd>
<dt><a href="https://github.com/sindresorhus/pageres">Pageres</a></dt>
<dd>Mit Sindre Sorhus neuem Tool kann man Screenshots von der Kommandozeile aus machen.</dd>
<dt><a href="http://www.integralist.co.uk/posts/refactoring-techniques/">Refactoring Techniques</a></dt>
<dd>Wie man richtig Refactoring betreibt wird in diesem Artikel erklärt.</dd>
<dt><a href="https://github.com/mdevils/node-jscs">JavaScript Code Style Checker</a></dt>
<dd>Ein weiterer Code Style Checker, aber höchst konfigurierbar und bis aufs kleinste anzupassen</dd>
<dt><a href="http://alistapart.com/article/web-animation-at-work">Web Animation at Work</a></dt>
<dd>Rachel Nabors beschreibt ihr Steckenpferd in diesem List Apart Artikel.</dd>
<dt><a href="http://css-tricks.com/draggable-elements-push-others-way/">Draggable elements that push others out of way</a></dt>
<dd>Chris Coyier schreibt über ein Design Pattern, und die unterschiedlichen Wege und Bibliotheken, es zufriedenstellend umzusetzen.</dd>
</dl>
<h3>[00:53:25] Tipp der Woche</h3>
<dl>
<dt><a href="http://blog.rodneyrehm.de/archives/35-Including-Data-From-Github.html">Including data from Github</a></dt>
<dd>Tipp von Rodney: Wenn man mal Github files im Rohformat braucht, hat man mit diesen Services viel Freude.</dd>
</dl>


Gästefrei sind diesmal Schepp, Rodney und Stefan mit am Start, um mit Grunt nach
dem Hype in Klausur zu gehen.


SCHAUNOTIZEN

[00:00:29] GRUNT

Grunt ist ja nun schon eine Weile bekannt und im Einsat…

Gästefrei sind diesmal Schepp, Rodney und Stefan mit am Start, um mit Grunt nach
dem Hype in Klausur zu gehen.


SCHAUNOTIZEN

[00:00:29] GRUNT

Grunt ist ja nun schon eine Weile bekannt und im Einsatz, und erfreut sich immer
größerer Beliebtheit bei den Entwicklern. Sogar Schepp hat seine
selbstgebastelten Buildscripts für diverse Projekte verlassen und ist in die
Grunt-Welt eingetaucht. Wird reden über den Einsatz des Buildtools in großen und
kleinen Projekten, und wie man sich das effiziente Entwickeln, vor allem in
Hinblick auf CI und CD ohne Grunt eigentlich nicht mehr vorstellen kann. Plugins
die erwähnt werden sind unter anderem spritesmith, autoprefixer, svgmin, cssmin
und connect. Außerdem empfiehlt Rodney, statt load-grunt-tasks besser matchdep
zu verwenden. Wer übrigens das letzte aus Grunt herauskitzeln will, dem
empfehlen wir Paul Bakaus Artikel auf HTML5 Rocks


[00:47:27] KEINE SCHAUNOTIZEN

CHROME CLI

Viel im Terminal? Mit der Chrome CLI kann man seinen Entwicklungsbrowser nun
auch bequem von der Kommandozeile aus steuern.

WHAT NOBODY TOLD YOU ABOUT SASS @EXTEND

Hugo Giraudel schreibt über die Funktionsweise und Gefahren der Sass @extend
Methode.

TRY HANDLEBARS

Handlebars templates direkt im Browser ausprobieren und sehen, ob
selbstgeschriebene Helper funktionieren. Geht hier.

PAGERES

Mit Sindre Sorhus neuem Tool kann man Screenshots von der Kommandozeile aus
machen.

REFACTORING TECHNIQUES

Wie man richtig Refactoring betreibt wird in diesem Artikel erklärt.

JAVASCRIPT CODE STYLE CHECKER

Ein weiterer Code Style Checker, aber höchst konfigurierbar und bis aufs
kleinste anzupassen

WEB ANIMATION AT WORK

Rachel Nabors beschreibt ihr Steckenpferd in diesem List Apart Artikel.

DRAGGABLE ELEMENTS THAT PUSH OTHERS OUT OF WAY

Chris Coyier schreibt über ein Design Pattern, und die unterschiedlichen Wege
und Bibliotheken, es zufriedenstellend umzusetzen.


[00:53:25] TIPP DER WOCHE

INCLUDING DATA FROM GITHUB

Tipp von Rodney: Wenn man mal Github files im Rohformat braucht, hat man mit
diesen Services viel Freude.

Revision 159: Grunt im Einsatz

<p>In der heutigen Revision haben Hans, Peter und Stefan den Performance-König <a href="http://tobias.is/who/">Tobias Baldauf</a> eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen Webperformance zu plaudern.</p>
<h3>[00:01:08] News</h3>
<dl>
<dt><a href="http://www.mozilla.org/en-US/firefox/27.0/releasenotes/">Firefox 27</a></dt>
<dd>Neuer Release des Independent Browser, mit der neuen CSS Eigenschaft <code>all:unset</code> und einigen anderen Änderungen.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:56] Bleeding Edge Bildoptimierung</dt>
<dd>Tobias erzählt über aktuelle Trends in der Bildoptimierung, und wie man aus langgedienten Grafikformaten wie JPEG dank Machine Learning noch weitere 10% rausholen möchte.</dd>
<dt>[00:07:56] <a href="http://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/">Renderingoptimierungsmöglichkeiten bei Webfonts</a></dt>
<dd>Chrome hat seinen Webfont Renderingprozess neu gelöst, und zeigt nach 30 Sekunden ohne geladener Font eine Fallbackschrift an. Außerdem erzählen wir welche weiteren Steuerungsmöglichkeiten es gibt, ob <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/text-rendering">text-rendering</a></code> Unterschiede macht und wie man <a href="http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/">Subsetting</a> richtig einsetzen kann!</dd>
<dt>[00:13:15] Automatisiert Performance Metriken generieren</dt>
<dd>Performance kann und soll man klarerweise messen. Tobias gibt Tipps und verweist auf Tools wie <a href="https://github.com/macbre/phantomas">Phantomas</a> (samt <a href="https://github.com/stefanjudis/grunt-phantomas">Grunt-Plugin</a>) und das <a href="http://httparchive.org/">HTTP Archive</a>.</dd>
<dt>[00:17:41] <a href="http://praegnanz.de/weblog/webfonts-fette-fehlerquelle">Viele Schriftschnitte vs. Performance</a></dt>
<dd>Der Schriftenkaiser Gerrit van Aaken ruft zu Recht auf, verschiedene Fettschnitte in Webfonts zu beachten. Doch was des Designers Freud&#8216; ist des Performanceoptimierers Leid. Wo liegt die optimale Grenze, und welche Möglichkeiten würden wir uns wünschen um beide Welten zufrieden zu stellen. Wir philosophieren.</dd>
<dt>[00:22:06] Performance-Guidelines und -Budgets</dt>
<dd>Performance ist wichtig und kann auch gut argumentiert bzw. verkauft werden! Stefan erzählt von Kompromissen aus dem täglichen Agenturleben und welche Probleme man sich fernhält, wenn man das Performance-Augenmerk von Anfang an in Betracht zieht. Der Rest stimmt in der Reflexion mit ein und gibt Ratschläge.</dd>
<dt>[00:27:58] <a href="https://twitter.com/christophrumpel/status/430731865205374976">Leserfrage: Unsere Erfahrungen zu custom styled Inputs</a></dt>
<dd>Stammhörer Christoph Rumpel fragt, wie man Formularelemente am besten stylen kann, und welche Bibliotheken bzw. Tools wir dafür nehmen. Eine Antwort mit einem Plottwist. Erwähnt werden: Ryan Seddons <a href="http://www.thecssninja.com/css/custom-inputs-using-css">Technik über :checked Attribut</a> und das ähnlich funktionierende <a href="https://github.com/micjamking/Navigataur">Navigataur</a>. Außerdem wird es Zeit <code>alert</code> und <code>confirm</code> wieder aus ihrer Versenkung zu bringen!</dd>
<dt>[00:35:37] <a href="http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/">Layoutgeschwindigkeit von CSS Flexbox</a></dt>
<dd>CSS Flexbox rendert langsam und hat nicht unbedenkliche Aufbaustrukturen. Doch lieber CSS3 Grid-Layouts verwenden! Doch was, wenn manches davon noch gar nicht in den aktuellen Browsern implementiert wurde? Wir ranten über Angebot und Nachfrage, den IE9 und die Zukunft des Internet Explorers, und geben Peter in einer spontanen Selbsthilfegruppensitzung Platz.</dd>
<dt>[00:46:47] <a href="https://twitter.com/owzim/status/431829497353342976">Leserfrage: Gute Onlinecommunities für Webentwicklung?</a></dt>
<dd>Christian fragt: Welche guten Onlinecommunities gibt es? Die Leute kurz vor oder jenseits der 30 erzählen mit weißen Rauschebärten über die gute, alte Forenzeit, dass deren Abgesang eigentlich eh nicht so schlecht ist, und warum Twitter und Co. sich in den letzten Jahren behauptet haben.</dd>
</dl>
<h3>[00:58:52] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/drdk/dr-css-inliner">CSS Above the fold Inliner</a></dt>
<dd>Dinge, die über der Fenstergrenze passieren sollten auch besonders schnell sichtbar sein. Dieses PhantomJS basierte Tool hilft!</dd>
<dt><a href="http://maddesigns.de/responsive-images-lazy-loading-2151.html">Responsive Images &#038; Lazy Loading</a></dt>
<dd>Der sehr aktive Sven Wolfermann über Responsive Images und Lazy Loading. Pflichtartikel</dd>
</dl>
<h3>Tipp der Woche</h3>
<dt><a href="http://topcoat.io/">Topcoat.io</a></dt>
<dd>Man braucht fesches UI, ohne sich dabei gleich Boliden wie Bootstrap oder Foundation zu installieren, hat Ansprüche auf Performance und Anpassung? Dann sollte man auf Adobes Topcoat einen genaueren Blick werfen.</dd>


In der heutigen Revision haben Hans, Peter und Stefan den Performance-König
Tobias Baldauf eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen
Webperformance zu plaudern.


[00:01:08] NE…

In der heutigen Revision haben Hans, Peter und Stefan den Performance-König
Tobias Baldauf eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen
Webperformance zu plaudern.


[00:01:08] NEWS

FIREFOX 27

Neuer Release des Independent Browser, mit der neuen CSS Eigenschaft all:unset
und einigen anderen Änderungen.


SCHAUNOTIZEN

[00:01:56] BLEEDING EDGE BILDOPTIMIERUNG

Tobias erzählt über aktuelle Trends in der Bildoptimierung, und wie man aus
langgedienten Grafikformaten wie JPEG dank Machine Learning noch weitere 10%
rausholen möchte.

[00:07:56] RENDERINGOPTIMIERUNGSMÖGLICHKEITEN BEI WEBFONTS

Chrome hat seinen Webfont Renderingprozess neu gelöst, und zeigt nach 30
Sekunden ohne geladener Font eine Fallbackschrift an. Außerdem erzählen wir
welche weiteren Steuerungsmöglichkeiten es gibt, ob text-rendering Unterschiede
macht und wie man Subsetting richtig einsetzen kann!

[00:13:15] AUTOMATISIERT PERFORMANCE METRIKEN GENERIEREN

Performance kann und soll man klarerweise messen. Tobias gibt Tipps und verweist
auf Tools wie Phantomas (samt Grunt-Plugin) und das HTTP Archive.

[00:17:41] VIELE SCHRIFTSCHNITTE VS. PERFORMANCE

Der Schriftenkaiser Gerrit van Aaken ruft zu Recht auf, verschiedene
Fettschnitte in Webfonts zu beachten. Doch was des Designers Freud‘ ist des
Performanceoptimierers Leid. Wo liegt die optimale Grenze, und welche
Möglichkeiten würden wir uns wünschen um beide Welten zufrieden zu stellen. Wir
philosophieren.

[00:22:06] PERFORMANCE-GUIDELINES UND -BUDGETS

Performance ist wichtig und kann auch gut argumentiert bzw. verkauft werden!
Stefan erzählt von Kompromissen aus dem täglichen Agenturleben und welche
Probleme man sich fernhält, wenn man das Performance-Augenmerk von Anfang an in
Betracht zieht. Der Rest stimmt in der Reflexion mit ein und gibt Ratschläge.

[00:27:58] LESERFRAGE: UNSERE ERFAHRUNGEN ZU CUSTOM STYLED INPUTS

Stammhörer Christoph Rumpel fragt, wie man Formularelemente am besten stylen
kann, und welche Bibliotheken bzw. Tools wir dafür nehmen. Eine Antwort mit
einem Plottwist. Erwähnt werden: Ryan Seddons Technik über :checked Attribut und
das ähnlich funktionierende Navigataur. Außerdem wird es Zeit alert und confirm
wieder aus ihrer Versenkung zu bringen!

[00:35:37] LAYOUTGESCHWINDIGKEIT VON CSS FLEXBOX

CSS Flexbox rendert langsam und hat nicht unbedenkliche Aufbaustrukturen. Doch
lieber CSS3 Grid-Layouts verwenden! Doch was, wenn manches davon noch gar nicht
in den aktuellen Browsern implementiert wurde? Wir ranten über Angebot und
Nachfrage, den IE9 und die Zukunft des Internet Explorers, und geben Peter in
einer spontanen Selbsthilfegruppensitzung Platz.

[00:46:47] LESERFRAGE: GUTE ONLINECOMMUNITIES FÜR WEBENTWICKLUNG?

Christian fragt: Welche guten Onlinecommunities gibt es? Die Leute kurz vor oder
jenseits der 30 erzählen mit weißen Rauschebärten über die gute, alte Forenzeit,
dass deren Abgesang eigentlich eh nicht so schlecht ist, und warum Twitter und
Co. sich in den letzten Jahren behauptet haben.


[00:58:52] KEINE SCHAUNOTIZEN

CSS ABOVE THE FOLD INLINER

Dinge, die über der Fenstergrenze passieren sollten auch besonders schnell
sichtbar sein. Dieses PhantomJS basierte Tool hilft!

RESPONSIVE IMAGES & LAZY LOADING

Der sehr aktive Sven Wolfermann über Responsive Images und Lazy Loading.
Pflichtartikel


TIPP DER WOCHE

TOPCOAT.IO

Man braucht fesches UI, ohne sich dabei gleich Boliden wie Bootstrap oder
Foundation zu installieren, hat Ansprüche auf Performance und Anpassung? Dann
sollte man auf Adobes Topcoat einen genaueren Blick werfen.

Revision 158: Performance, Performance, Performance; sowie Leserfragen

<p>Keine Gäste, trotzdem Themen in einer – mal wieder – etwas längeren Sendung.</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:20] <a href="http://studiotendra.com/2014/01/29/html-is-too-complex/">HTML is too complex</a></dt>
<dd>Wir stellen uns die Frage, ob HTML mit den Additionen in HTML5 zu komplex für uns Developer geworden ist. Hans vertritt die Meinung, dass mehr Möglichkeiten auch verbesserte Semantik mit sich bringt. Rodney ist da eher skeptisch, in wie fern dies dem durchschnittlichen Web Entwickler tatsächlich hilft.</dd>
<dt>[00:12:00] <a href="https://medium.com/p/f98103d09ce1">Putting CSS in the head</a></dt>
<dd>Basierend auf Hans&#8216; Artikel und dessen Vorläufer &#8222;<a href="https://medium.com/coding-design/24888fbbd2e2">What’s with putting the CSS in the head?</a>&#8220; diskutieren wir die Vor– und Nachteile von der Platzierung des CSS inline im Head-Element einer Website. Wir sprechen über allgemeine Performance, CDNs und die Use Cases dieser Technik.</dd>
<dt>[00:29:19] <a href="http://www.mnot.net/blog/2014/01/30/http2_expectations">Nine Things to Expect from HTTP/2</a></dt>
<dd>Wir erklären HTTP/2 und SPDY etwas genauer. Die beiden neuen Netzwerk-Technologien sind gerade auf dem aufsteigenden Ast und werden uns Web-Entwicklern die Arbeit, gerade im Bezug auf Netzwerk-Performance erleichtern, sobald sie dann bei der breiten Masse angekommen sind. Testen, ob eine Website SPDY einsetzt, kann man mit <a href="http://spdycheck.org/">SPDY-Check</a> und eine gute Erklärung zum Thema SPDY Push <a href="http://www.youtube.com/watch?v=4Ai_rrhM8gA">gibt&#8217;s in diesem Video</a>.</dd>
<dt>[00:49:19] <a href="http://aerotwist.com/blog/bye-bye-layer-hacks/">CSS Will Change</a></dt>
<dd>Aktuell nutzen wir CSS 3D-Transforms um Grafik-Hardware-Beschleunigung für Elemente zu erreichen, damit diese flüssiger rendern. Mit der CSS-Eigenschaft <code>will-change</code> soll diesem Hack nun abgeholfen werden.</dd>
</dl>
<h3>[00:55:06] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html">HTML5 Media</a></dt>
<dd>Die Audio- und Video-API sind wichtige Bestandteile von HTML5. Leider sind diese allerdings für komplexere Anwendungen noch ziemlich inkonsistent in den verschiedenen Browsers implementiert. Schepp erzählt von seinen Erfahrungen.</dd>
</dl>
<h3>[01:04:06] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://maddesigns.de/static-site-generators-2138.html">Static Site Generators</a></dt>
<dd>Eine Sammlung von Static Site Generatoren gibt Sven Wolfermann inklusive Wertung. Hans möchte zusätzlich sein <a href="http://use-init.com/">INIT</a> Projekt anpreisen.</dd>
<dt><a href="http://www.youtube.com/user/takeoffconference">Take Off Conf Videos</a></dt>
<dd>Die Videos der Take Off Conference, die Ende Januar statt fand, sind bereits online.</dd>
<dt><a href="https://speakerdeck.com/phuu/frontendlondon-serviceworker-and-the-offline-web">Service Worker</a></dt>
<dd>Ein Slidedeck mit allen Infos zu Service Workern.</dd>
</dl>


Keine Gäste, trotzdem Themen in einer – mal wieder – etwas längeren Sendung.


KEINE NEWS


SCHAUNOTIZEN

[00:00:20] HTML IS TOO COMPLEX

Wir stellen uns die Frage, ob HTML mit den Additionen in HTML5…

Keine Gäste, trotzdem Themen in einer – mal wieder – etwas längeren Sendung.


KEINE NEWS


SCHAUNOTIZEN

[00:00:20] HTML IS TOO COMPLEX

Wir stellen uns die Frage, ob HTML mit den Additionen in HTML5 zu komplex für
uns Developer geworden ist. Hans vertritt die Meinung, dass mehr Möglichkeiten
auch verbesserte Semantik mit sich bringt. Rodney ist da eher skeptisch, in wie
fern dies dem durchschnittlichen Web Entwickler tatsächlich hilft.

[00:12:00] PUTTING CSS IN THE HEAD

Basierend auf Hans‘ Artikel und dessen Vorläufer „What’s with putting the CSS in
the head?“ diskutieren wir die Vor– und Nachteile von der Platzierung des CSS
inline im Head-Element einer Website. Wir sprechen über allgemeine Performance,
CDNs und die Use Cases dieser Technik.

[00:29:19] NINE THINGS TO EXPECT FROM HTTP/2

Wir erklären HTTP/2 und SPDY etwas genauer. Die beiden neuen
Netzwerk-Technologien sind gerade auf dem aufsteigenden Ast und werden uns
Web-Entwicklern die Arbeit, gerade im Bezug auf Netzwerk-Performance
erleichtern, sobald sie dann bei der breiten Masse angekommen sind. Testen, ob
eine Website SPDY einsetzt, kann man mit SPDY-Check und eine gute Erklärung zum
Thema SPDY Push gibt’s in diesem Video.

[00:49:19] CSS WILL CHANGE

Aktuell nutzen wir CSS 3D-Transforms um Grafik-Hardware-Beschleunigung für
Elemente zu erreichen, damit diese flüssiger rendern. Mit der CSS-Eigenschaft
will-change soll diesem Hack nun abgeholfen werden.


[00:55:06] GLÜCKSRAD

HTML5 MEDIA

Die Audio- und Video-API sind wichtige Bestandteile von HTML5. Leider sind diese
allerdings für komplexere Anwendungen noch ziemlich inkonsistent in den
verschiedenen Browsers implementiert. Schepp erzählt von seinen Erfahrungen.


[01:04:06] KEINE SCHAUNOTIZEN

STATIC SITE GENERATORS

Eine Sammlung von Static Site Generatoren gibt Sven Wolfermann inklusive
Wertung. Hans möchte zusätzlich sein INIT Projekt anpreisen.

TAKE OFF CONF VIDEOS

Die Videos der Take Off Conference, die Ende Januar statt fand, sind bereits
online.

SERVICE WORKER

Ein Slidedeck mit allen Infos zu Service Workern.

Revision 157: Komplexes Markup, Styles Inlinen und HTTP/2

<p>Wenig Themen, viel Diskussion! Peter, Rodney und Stefan besprechen Browserbugs, die keine sein sollten und sinnieren über einen jüngst veröffentlichten A List Apart Artikel, den man wohl ohne Weiteres in die Kategorie &#8222;Große Erschütterung der Macht&#8220; stecken darf.</p>
<h3>[00:00:15] News</h3>
<dl>
<dt><a href="http://dev.w3.org/csswg/css-transitions/">CSS Editor&#8217;s Draft contains links to Shepherd</a></dt>
<dd>Noch in Beta und in starker Bearbeitung, aber nach jahrelanger Wartezeit endlich Realität: Im CSS Editor&#8217;s Draft der W3C werden die Shepherd Tests verlinkt.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html">Viewport Units in iOS</a></dt>
<dd>Trotz recht weitreichender <a href="http://caniuse.com/viewport-units">Kompatibilität</a> und echtem Bedarf sind Viewport Units <a href="https://code.google.com/p/chromium/issues/detail?id=137617">überaus</a> <a href="https://code.google.com/p/chromium/issues/detail?id=168840">buggy</a> und <a href="https://bugs.webkit.org/show_bug.cgi?id=94158">beinah unbrauchbar</a>, wie Rodney jüngst herausfinden musste. Wir sprechen über die <a href="https://developer.mozilla.org/de/docs/Web/CSS/length#Relativ_zum_Viewport">eigentliche Nutzung</a> und wie man Dank <a href="http://dev.w3.org/csswg/cssom/">CSSOM</a> zu einem netten <a href="https://github.com/rodneyrehm/viewport-units-buggyfill">Buggyfill</a> kommt (Term coined by <a href="http://twitter.com/asciidisco">Sebastian Golasch</a>.</dd>
<dt>[00:24:05] <a href="http://alistapart.com/blog/post/css-regions-considered-harmful">CSS Regions considered harmful</a></dt>
<dd>Wenn einer der <a href="https://de.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie">CSS Erfinder</a> CSS Regions öffentlich für Scheiße erklärt, kann das Internet schonmal Kopf stehen. Browserhersteller treten den Rückzug an und nehmen <a href="http://news.cnet.com/8301-1023_3-57617840-93/reversing-course-google-rejects-adobe-web-publishing-tech/">experimentelle Implementierungen aus der Codebase</a>. Wir sprechen über Sinn und Unsinn, Web vs. Webtechnologie und  den Bedarf an &#8222;Generated Content&#8220;. Außerdem flattert pünktlich zur Sendung ein sehr interessanter <a href="http://flippinawesome.org/2014/01/27/css-regions-matter/">Pro-Artikel</a> von <a href="http://twitter.com/SaraSoueidan">Sara Soueidan</a> zum Thema herein.</dd>
</dl>
<h3>[00:44:31] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#table-sorting-model">Table Sorting Model</a></dt>
<dd>Tabellensortieren im Browser, wie einst beim guten, alten jQuery Tablesorter! Existiert momentan allerdings nur am Papier.</dd>
</dl>
<h3>[00:49:25] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.peterkroener.de/html5-drag-drop-fuer-dateien/">Drag &#038; Drop für Dateien</a></dt>
<dd>Peter beschreibt eine uralte API, mit der man sogar ganz brauchbare Dinge anstellen kann. Erster Teil einer Minireihe.</dd>
<dt><a href="http://toddmotto.com/avoiding-anonymous-javascript-functions/">Avoiding anonymous JavaScript funcitons</a></dt>
<dd>Todd Motto erklärt anonyme Funktionen, deren Nachteil und wie man sie vermeidet.</dd>
<dt><a href="https://github.com/evilstreak/markdown-js">Markdown.js</a></dt>
<dd>Markdown Parser in JavaScript. Mitsamt Abstract Syntax Tree.</dd>
</dl>


Wenig Themen, viel Diskussion! Peter, Rodney und Stefan besprechen Browserbugs,
die keine sein sollten und sinnieren über einen jüngst veröffentlichten A List
Apart Artikel, den man wohl ohne Weiteres…

Wenig Themen, viel Diskussion! Peter, Rodney und Stefan besprechen Browserbugs,
die keine sein sollten und sinnieren über einen jüngst veröffentlichten A List
Apart Artikel, den man wohl ohne Weiteres in die Kategorie „Große Erschütterung
der Macht“ stecken darf.


[00:00:15] NEWS

CSS EDITOR’S DRAFT CONTAINS LINKS TO SHEPHERD

Noch in Beta und in starker Bearbeitung, aber nach jahrelanger Wartezeit endlich
Realität: Im CSS Editor’s Draft der W3C werden die Shepherd Tests verlinkt.


SCHAUNOTIZEN

[00:01:00] VIEWPORT UNITS IN IOS

Trotz recht weitreichender Kompatibilität und echtem Bedarf sind Viewport Units
überaus buggy und beinah unbrauchbar, wie Rodney jüngst herausfinden musste. Wir
sprechen über die eigentliche Nutzung und wie man Dank CSSOM zu einem netten
Buggyfill kommt (Term coined by Sebastian Golasch.

[00:24:05] CSS REGIONS CONSIDERED HARMFUL

Wenn einer der CSS Erfinder CSS Regions öffentlich für Scheiße erklärt, kann das
Internet schonmal Kopf stehen. Browserhersteller treten den Rückzug an und
nehmen experimentelle Implementierungen aus der Codebase. Wir sprechen über Sinn
und Unsinn, Web vs. Webtechnologie und den Bedarf an „Generated Content“.
Außerdem flattert pünktlich zur Sendung ein sehr interessanter Pro-Artikel von
Sara Soueidan zum Thema herein.


[00:44:31] GLÜCKSRAD

TABLE SORTING MODEL

Tabellensortieren im Browser, wie einst beim guten, alten jQuery Tablesorter!
Existiert momentan allerdings nur am Papier.


[00:49:25] KEINE SCHAUNOTIZEN

DRAG & DROP FÜR DATEIEN

Peter beschreibt eine uralte API, mit der man sogar ganz brauchbare Dinge
anstellen kann. Erster Teil einer Minireihe.

AVOIDING ANONYMOUS JAVASCRIPT FUNCITONS

Todd Motto erklärt anonyme Funktionen, deren Nachteil und wie man sie vermeidet.

MARKDOWN.JS

Markdown Parser in JavaScript. Mitsamt Abstract Syntax Tree.

Revision 156: Viewport Units in iOS und Gegenwind für CSS Regions

<p>Revision 155 ging zwar ohne Gäste an den Start, dafür war Rodney aber top in Form und erzählt über sein letztes Projekt. Über Kommentare zu den Themen freuen wir uns und beantworten diese (manchmal zeitversetzt).</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:18] <a href="http://blog.rodneyrehm.de/archives/33-libsass.js-An-Emscripten-Experiment.html">Sass.js</a></dt>
<dd>Rodney und <a href="https://github.com/asciidisco">Sebastian</a> arbeiteten vor kurzer Zeit an einem Port von <a href="https://github.com/hcatlin/libsass">libsass</a> nach JavaScript mit <a href="https://github.com/kripken/emscripten">Emscripten</a> um Sass im Browser kompilieren zu können (zum Beispiel für Services wie Dabblet). libsass ist eine C-Compiler für Sass, der unter anderem auch in <a href="https://github.com/andrew/node-sass">node-sass</a> Anwendung findet. Rod erzählt über seine Reise hinab ins C++-Kaninchenloch und weist auf eine <a href="http://shoptalkshow.com/episodes/070-with-hampton-catlin/">Shoptalk Folge</a> mit dem SASS-Erfinder und libsass-Autoren) hin.<br />
Fazit: solide C/C++-Kenntnisse sind empfohlen für Emscripten-Experimente</dd>
<dt>[00:29:51] <a href="https://twitter.com/malteriechmann/status/423400547425603584">Konferenzen 2014</a></dt>
<dd>Auf die Hörerfrage von Malte antworten wir mit einer Liste: Welche Konferenzen sollte man 2014 besuchen, wenn man die Working Draft Crew treffen will?</p>
<ul>
<li><a href="http://reasons.to/">Reasons</a>, London</li>
<li><a href="http://2013.dconstruct.org/">dConstruct</a>, Brighton</li>
<li><a href="http://2013.lxjs.org/">LXJS</a>, Lissabon</li>
<li><a href="http://javascript-days.de/2014/">JavaScript Days / HTML5 Days</a>, München</li>
<li><a href="http://www.gentics.com/jquery-eu-2014/page/2014/eu.html">jQuery Europe</a>, Wien</li>
<li><a href="http://smashingconf.com/">Smashing Conf</a>, Oxford</li>
<li><a href="http://edgeconf.com/2014-london/">Edge Conf</a>, London</li>
<li><a href="http://beyondtellerrand.com/">Beyond Tellerrand</a>, Düsseldorf</li>
<li><a href="http://fronteers.nl/congres/2014">Fronteers</a>, Amsterdam</li>
<li><a href="http://www.dotjs.eu/">dotJS</a>, Paris</li>
</ul>
</dl>
<h3>Diese Woche haben wir nicht am Glücksrad gedreht</h3>
<h3>[00:51:41] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://speaking.io/">Speaking.io</a></dt>
<dd>Eine Website, die sich ums Public Speaking dreht und wertvolle Tips für Speaker bereit hält.</dd>
<dt><a href="http://www.gistboxapp.com/">GistBoxApp</a></dt>
<dd>GistBoxApp ergänzt gist.github.com mit tagging, suche und weiterem. Also quasi alles Nützliche, was fehlt.</dd>
<dt><a href="https://github.com/btford/zone.js/">Zone.js</a></dt>
<dd>Execution Context für JavaScript Development.</dd>
<dt><a href="https://github.com/veltman/principles">Principles for making things for the web</a></dt>
<dd>Eine Zusammenstellung an Richtlinien, die man beachten sollte, wenn man fürs Web entwickelt.</dd>
</dl>


Revision 155 ging zwar ohne Gäste an den Start, dafür war Rodney aber top in
Form und erzählt über sein letztes Projekt. Über Kommentare zu den Themen freuen
wir uns und beantworten diese (manchmal ze…

Revision 155 ging zwar ohne Gäste an den Start, dafür war Rodney aber top in
Form und erzählt über sein letztes Projekt. Über Kommentare zu den Themen freuen
wir uns und beantworten diese (manchmal zeitversetzt).


KEINE NEWS


SCHAUNOTIZEN

[00:00:18] SASS.JS

Rodney und Sebastian arbeiteten vor kurzer Zeit an einem Port von libsass nach
JavaScript mit Emscripten um Sass im Browser kompilieren zu können (zum Beispiel
für Services wie Dabblet). libsass ist eine C-Compiler für Sass, der unter
anderem auch in node-sass Anwendung findet. Rod erzählt über seine Reise hinab
ins C++-Kaninchenloch und weist auf eine Shoptalk Folge mit dem SASS-Erfinder
und libsass-Autoren) hin.
Fazit: solide C/C++-Kenntnisse sind empfohlen für Emscripten-Experimente

[00:29:51] KONFERENZEN 2014

Auf die Hörerfrage von Malte antworten wir mit einer Liste: Welche Konferenzen
sollte man 2014 besuchen, wenn man die Working Draft Crew treffen will?



 * Reasons, London
 * dConstruct, Brighton
 * LXJS, Lissabon
 * JavaScript Days / HTML5 Days, München
 * jQuery Europe, Wien
 * Smashing Conf, Oxford
 * Edge Conf, London
 * Beyond Tellerrand, Düsseldorf
 * Fronteers, Amsterdam
 * dotJS, Paris


DIESE WOCHE HABEN WIR NICHT AM GLÜCKSRAD GEDREHT


[00:51:41] KEINE SCHAUNOTIZEN

SPEAKING.IO

Eine Website, die sich ums Public Speaking dreht und wertvolle Tips für Speaker
bereit hält.

GISTBOXAPP

GistBoxApp ergänzt gist.github.com mit tagging, suche und weiterem. Also quasi
alles Nützliche, was fehlt.

ZONE.JS

Execution Context für JavaScript Development.

PRINCIPLES FOR MAKING THINGS FOR THE WEB

Eine Zusammenstellung an Richtlinien, die man beachten sollte, wenn man fürs Web
entwickelt.

Revision 155: Sass.js und die Konferenzen 2014

<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…

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

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 160: Node, JavaScript, Links

Working Draft

Revision 159: Grunt im Einsatz

Working Draft

Revision 158: Performance, Performance, Performance; sowie Leserfragen

Working Draft

Revision 157: Komplexes Markup, Styles Inlinen und HTTP/2

Working Draft

Revision 156: Viewport Units in iOS und Gegenwind für CSS Regions

Working Draft

Revision 155: Sass.js und die Konferenzen 2014

Working Draft

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