<p>Rod, Hans und Peter sezierten die Features des neuen Safari in iOS 8 und plauderten über ES6, bis uns plötzlich die Zeit ausging.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:12] Safari in iOS 8</dt>
<dd>
Anhand eines <a href="http://www.sencha.com/blog/apple-shows-love-for-html5-with-ios-8">Sencha-Blogposts</a> hangeln wir uns durch die Featureliste der neuesten Safari-Version und reden über CSS Blend Modes (<a href="http://www.w3.org/TR/compositing-1/">Specs</a> <a href="http://webplatform.adobe.com/blend-modes/">Erklär-Artikel</a>, <a href="http://caniuse.com/#feat=css-mixblendmode">Caniuse</a>), die möglicherweise zum Untergang verdammten CSS Shapes (<a href="http://www.w3.org/TR/css-shapes/">Specs</a>, <a href="http://caniuse.com/#feat=css-shapes">Caniuse</a>), WebGL (<a href="https://www.khronos.org/registry/webgl/specs/1.0/">Specs</a>, <a href="http://caniuse.com/#feat=webgl">Caniuse</a>), HTML Templates (<a href="http://www.w3.org/TR/html-templates/">Specs</a>, <a href="http://caniuse.com/#feat=template">Caniuse</a>), ES6-Promises <a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-promise-objects">Specs</a>, <a href="http://caniuse.com/#feat=promises">Caniuse</a>) die Navigation Timing API (<a href="http://www.w3.org/TR/navigation-timing/">Specs</a>, <a href="http://caniuse.com/#feat=nav-timing">Caniuse</a>), SPDY (<a href="http://tools.ietf.org/html/draft-mbelshe-httpbis-spdy-00">Specs</a>, <a href="http://caniuse.com/#feat=spdy">Caniuse</a>), das srcset-Attribut (<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset">Specs</a>, <a href="http://caniuse.com/#feat=srcset">Caniuse</a>), Indexed DB <a href="http://www.w3.org/TR/IndexedDB/, http://caniuse.com/#feat=indexeddb">Specs</a>, <a href="http://caniuse.com/#feat=indexeddb">Caniuse</a>), die Highres Timing API (<a href="http://www.w3.org/TR/hr-time/">Specs</a>, <a href="http://caniuse.com/#feat=high-resolution-time">Caniuse</a>), APNG (<a href="https://wiki.mozilla.org/APNG_Specification">Specs</a>, <a href="http://caniuse.com/#feat=apng">Caniuse</a>), SVG Fragment Identifiers <a href="http://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers">Specs</a>, <a href="http://caniuse.com/#feat=svg-fragment">Caniuse</a>), object-fit und object-position (<a href="http://www.w3.org/TR/css3-images/">Specs</a>, <a href="http://caniuse.com/#search=object-fit">Caniuse</a>), text-decoration-style (<a href="http://dev.w3.org/csswg/css-text-decor-3/">Specs</a>, <a href="http://caniuse.com/#feat=text-decoration">Caniuse</a>) und diverse weitere Webtechnologien. Abseits davon kommen wir auch auf das jetzt Apps zu Verfügung stehende <a href="http://nshipster.com/wkwebkit/">wkwebkit</a> (mit Nitro) zu spechen, machen uns über <a href="https://twitter.com/maddesigns/status/514005100986392576">Bugs</a> lustig und geben am Ende unseren allgemeinen Gesamteindruck wieder.</dd>
<dt>[00:50:08] <a href="http://www.peterkroener.de/erfahrungsbericht-ein-workflow-fuer-ecmascript-6/">ES6-Workflow</a></dt>
<dd>Zu Forschungszwecken hat sich Peter ein ECMAScript&nbsp;6-Projekt aufgebürdet und berichtet von seinen Erfahrungen. Um ES6 in Browsern von heute zu nutzen <a href="http://kangax.github.io/compat-table/es6/">braucht</a> man einen Transpiler, der ES6-Code in ES5-Code transformiert. Zur Auswahl stehen <a href="https://github.com/google/traceur-compiler">Traceur</a>, das <a href="http://sweetjs.org/">Sweet.js</a>-Modul <a href="https://github.com/jlongster/es6-macros">es6-macros</a> und <a href="https://github.com/termi/es6-transpiler">ES6 Transpiler</a>, was trotz Mängeln Peters Favorit ist, kombiniert mit <a href="https://github.com/facebook/regenerator">Regenerator</a>. Kurz kommt auch zu Sprache, wie kompliziert es sein kann, die neuen Features in die tägliche Programmierpraxis einfließen zu lassen.</dd>
</dl>
<h3>[01:25:29] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://twitter.com/toddmparker/status/511626859659153408">CSS only custom selects</a></dt>
<dd>Das ultimative CSS-Styling für Selects.</dd>
<dt><a href="http://htmlelement.info/">HTML Elements</a></dt>
<dd>Übersichtsseite mit den wichtigsten Facetten aller HTML-Elemente.</dd>
<dt><a href="http://christopheraue.net/2014/03/05/vertical-align/">All You Need To Know About Vertical-Align</a></dt>
<dd>Ein kniffliges Thema umfassend aufbereitet.</dd>
</dl>


Rod, Hans und Peter sezierten die Features des neuen Safari in iOS 8 und
plauderten über ES6, bis uns plötzlich die Zeit ausging.


SCHAUNOTIZEN

[00:00:12] SAFARI IN IOS 8

Anhand eines Sencha-Blogpo…

Working Draft

Rod, Hans und Peter sezierten die Features des neuen Safari in iOS 8 und
plauderten über ES6, bis uns plötzlich die Zeit ausging.


SCHAUNOTIZEN

[00:00:12] SAFARI IN IOS 8

Anhand eines Sencha-Blogposts hangeln wir uns durch die Featureliste der
neuesten Safari-Version und reden über CSS Blend Modes (Specs Erklär-Artikel,
Caniuse), die möglicherweise zum Untergang verdammten CSS Shapes (Specs,
Caniuse), WebGL (Specs, Caniuse), HTML Templates (Specs, Caniuse), ES6-Promises
Specs, Caniuse) die Navigation Timing API (Specs, Caniuse), SPDY (Specs,
Caniuse), das srcset-Attribut (Specs, Caniuse), Indexed DB Specs, Caniuse), die
Highres Timing API (Specs, Caniuse), APNG (Specs, Caniuse), SVG Fragment
Identifiers Specs, Caniuse), object-fit und object-position (Specs, Caniuse),
text-decoration-style (Specs, Caniuse) und diverse weitere Webtechnologien.
Abseits davon kommen wir auch auf das jetzt Apps zu Verfügung stehende wkwebkit
(mit Nitro) zu spechen, machen uns über Bugs lustig und geben am Ende unseren
allgemeinen Gesamteindruck wieder.

[00:50:08] ES6-WORKFLOW

Zu Forschungszwecken hat sich Peter ein ECMAScript 6-Projekt aufgebürdet und
berichtet von seinen Erfahrungen. Um ES6 in Browsern von heute zu nutzen braucht
man einen Transpiler, der ES6-Code in ES5-Code transformiert. Zur Auswahl stehen
Traceur, das Sweet.js-Modul es6-macros und ES6 Transpiler, was trotz Mängeln
Peters Favorit ist, kombiniert mit Regenerator. Kurz kommt auch zu Sprache, wie
kompliziert es sein kann, die neuen Features in die tägliche Programmierpraxis
einfließen zu lassen.


[01:25:29] KEINE SCHAUNOTIZEN

CSS ONLY CUSTOM SELECTS

Das ultimative CSS-Styling für Selects.

HTML ELEMENTS

Übersichtsseite mit den wichtigsten Facetten aller HTML-Elemente.

ALL YOU NEED TO KNOW ABOUT VERTICAL-ALIGN

Ein kniffliges Thema umfassend aufbereitet.

Revision 189: iOS 8 und ES6

<p>Hans, Stefan und Peter präsentieren auch heute ein strittiges CSS-Thema, garniert mit ein paar Links.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:21] <a href="http://amcss.github.io/">AMCSS &#8211; Attribute Modules for CSS</a></dt>
<dd>HTML-Attribute als <a href="https://developer.mozilla.org/de/docs/Web/CSS/Attributselektoren">Attributselektor</a>-Hooks ausdenken, Genie oder Häresie? Wir werden uns nicht ganz einig. Zum einen ist bekannt, dass Browser nicht bekannte Attribute ignorieren (sonst würden <a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">data-Attribute gar nicht funktionieren</a>), zum anderen sieht der Standard andere selbst erfundene Attribute nicht vor. Beim Versuch, diese Technologie zu bewerten streifen wir <a href="https://angularjs.org/">AngularJS</a> mit seinen eigenen <code>ng-*</code>-Attributen und die <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Element Spec</a> mit der Möglichkeit, sich sogar eigene HTML-Tags auszudenken.</dd>
</dl>
<h3>[00:24:17] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://anijs.github.io/">AniJS, Declarative handling library for UI interactions</a></dt>
<dd>Passend zum Thema „selbsterfundene Attribute“ verwendet AniJS eben solche Attribute um Animationen zu beschreiben.</dd>
<dt><a href="http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard">Naming CSS Stuff Is Really Hard</a></dt>
<dd>Überblicksartikel zu Problemen und Herangehensweisen der Namensfindung in CSS.</dd>
<dt><a href="http://gridbyexample.com/">Grid by Example</a></dt>
<dd>Showcase für Grid-Layout (CSS3).</dd>
<dt><a href="http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/">SVG for JPG Alpha</a></dt>
<dd>Ein schöner Hack: JPG + SVG = PNG.</dd>
</dl>


Hans, Stefan und Peter präsentieren auch heute ein strittiges CSS-Thema,
garniert mit ein paar Links.


SCHAUNOTIZEN

[00:00:21] AMCSS – ATTRIBUTE MODULES FOR CSS

HTML-Attribute als Attributselektor-…

Hans, Stefan und Peter präsentieren auch heute ein strittiges CSS-Thema,
garniert mit ein paar Links.


SCHAUNOTIZEN

[00:00:21] AMCSS – ATTRIBUTE MODULES FOR CSS

HTML-Attribute als Attributselektor-Hooks ausdenken, Genie oder Häresie? Wir
werden uns nicht ganz einig. Zum einen ist bekannt, dass Browser nicht bekannte
Attribute ignorieren (sonst würden data-Attribute gar nicht funktionieren), zum
anderen sieht der Standard andere selbst erfundene Attribute nicht vor. Beim
Versuch, diese Technologie zu bewerten streifen wir AngularJS mit seinen eigenen
ng-*-Attributen und die Custom Element Spec mit der Möglichkeit, sich sogar
eigene HTML-Tags auszudenken.


[00:24:17] KEINE SCHAUNOTIZEN

ANIJS, DECLARATIVE HANDLING LIBRARY FOR UI INTERACTIONS

Passend zum Thema „selbsterfundene Attribute“ verwendet AniJS eben solche
Attribute um Animationen zu beschreiben.

NAMING CSS STUFF IS REALLY HARD

Überblicksartikel zu Problemen und Herangehensweisen der Namensfindung in CSS.

GRID BY EXAMPLE

Showcase für Grid-Layout (CSS3).

SVG FOR JPG ALPHA

Ein schöner Hack: JPG + SVG = PNG.

Revision 188: AMCSS und Links

<p>Zur aktuellen Revision haben sich Stefan und der Schepp <a href="https://twitter.com/fooforge">Mike Adolphs</a> eingeladen, der seines Zeichens im Enterprise Support bei GitHub sitz.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:16] <a href="https://gist.github.com/Schepp/9fb648c7ca4b5ce9e4a4">Arbeiten bei GitHub</a></dt>
<dd>Mike erzählt uns, was es bedeutet für eine große, amerikanische Firma tätig zu sein, die hauptsächlich aus Leuten besteht, die remote arbeiten und über den ganzen Globus verteilt sind. Wie sind die Rekrutierungsprozesse, die Arbeitsbedingungen, was muss man als Deutscher beachten, wenn man den Schritt in diese Richtung wagt? Wir bekommen einen exklusiven und ausführlichen Einblick in die Arbeitsweisen des wohl wichtigsten Social Networks für Entwickler und lernen das Thema &#8222;Support&#8220; ganz neu kennen. Eine ausführliche Zusammenfassung des 2 Stunden Gesprächs von Schriftführer Schepp könnt ihr auf <a href="https://gist.github.com/Schepp/9fb648c7ca4b5ce9e4a4">gist.github.com</a> einsehen.</dd>
</dl>
<h3>[02:14:31] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://alistapart.com/blog/post/jeffrey-zeldman-documentary">Jeffrey Zeldman Documentary</a></dt>
<dd>40-minütige Dokumentation über den Blue Beanie Webdesigner.</dd>
<dt><a href="https://github.com/BYVoid/Batsh">Batsh</a></dt>
<dd>Unix Bash oder Windows Batch? Batsh macht beides, mit JavaScript-ähnlicher Syntax.</dd>
<dt><a href="http://blog.syntaxc4.net/post/2014/09/03/windows-boxes-for-vagrant-courtesy-of-modern-ie.aspx">Windows Boxes for Vagrant</a></dt>
<dd>Modern.ie Virtualisierung über Vagrant? Geht! Endlich!</dd>
<dt><a href="http://blog.revolunet.com/blog/2013/05/01/angular-tips-n-tricks/">Angular JS Tips&amp;Tricks</a></dt>
<dd>Schepp ist gerade voll in Angular JS drin und findet diese Hinweise sehr hilfreich. Nicht <a href="http://blog.revolunet.com/blog/2013/07/23/angularjs-tips-n-tricks-2/">Teil zwei</a> vergessen.</dd>
<dt><a href="http://blogs.adobe.com/webplatform/2014/09/03/css-shapes-editor-for-chrome/">CSS Shapes Editor</a></dt>
<dd>CSS Shapes können echt schwierig sein, mit einem tollen Editor allerdings klappt das ziemlich prima und easy. Danke Adobe!</dd>
<dt><a href="https://github.com/zendesk/cross-storage">Cross Storage</a></dt>
<dd>Zendesk gibt uns eine schöne API, mit der wir alle localStorage Tricks einfach anwenden können, die uns Kommunikation über unterschiedliche Domains erlauben.</dd>
</dl>


Zur aktuellen Revision haben sich Stefan und der Schepp Mike Adolphs eingeladen,
der seines Zeichens im Enterprise Support bei GitHub sitz.


SCHAUNOTIZEN

[00:00:16] ARBEITEN BEI GITHUB

Mike erzählt…

Zur aktuellen Revision haben sich Stefan und der Schepp Mike Adolphs eingeladen,
der seines Zeichens im Enterprise Support bei GitHub sitz.


SCHAUNOTIZEN

[00:00:16] ARBEITEN BEI GITHUB

Mike erzählt uns, was es bedeutet für eine große, amerikanische Firma tätig zu
sein, die hauptsächlich aus Leuten besteht, die remote arbeiten und über den
ganzen Globus verteilt sind. Wie sind die Rekrutierungsprozesse, die
Arbeitsbedingungen, was muss man als Deutscher beachten, wenn man den Schritt in
diese Richtung wagt? Wir bekommen einen exklusiven und ausführlichen Einblick in
die Arbeitsweisen des wohl wichtigsten Social Networks für Entwickler und lernen
das Thema „Support“ ganz neu kennen. Eine ausführliche Zusammenfassung des 2
Stunden Gesprächs von Schriftführer Schepp könnt ihr auf gist.github.com
einsehen.


[02:14:31] KEINE SCHAUNOTIZEN

JEFFREY ZELDMAN DOCUMENTARY

40-minütige Dokumentation über den Blue Beanie Webdesigner.

BATSH

Unix Bash oder Windows Batch? Batsh macht beides, mit JavaScript-ähnlicher
Syntax.

WINDOWS BOXES FOR VAGRANT

Modern.ie Virtualisierung über Vagrant? Geht! Endlich!

ANGULAR JS TIPS&TRICKS

Schepp ist gerade voll in Angular JS drin und findet diese Hinweise sehr
hilfreich. Nicht Teil zwei vergessen.

CSS SHAPES EDITOR

CSS Shapes können echt schwierig sein, mit einem tollen Editor allerdings klappt
das ziemlich prima und easy. Danke Adobe!

CROSS STORAGE

Zendesk gibt uns eine schöne API, mit der wir alle localStorage Tricks einfach
anwenden können, die uns Kommunikation über unterschiedliche Domains erlauben.

Revision 187: Arbeiten bei GitHub

<p>Hans, Schepp und Stefan erzählen diesmal von ihren Erfahrungen in der Zusammenarbeit zwischen Backend und Frontend Entwicklern bei Schnittstellendefinitionen.</p>
<h3>[00:00:16] News</h3>
<dl>
<dt><a href="http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui">YUI</a></dt>
<dd>Yahoo stellt die Entwicklung des in die Jahre gekommenen YUI Frameworks ein. Bei der künftigen Technologiewahl durchaus zu berücksichtigen.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:06] <a href="http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api">Schnittstellendesign</a></dt>
<dd>Schepp und Stefan resümieren über ein paar Tools für Entwickler, die sich für das reibungslose Schnittstellendesign eignen, und werfen mit <a href="http://apiary.io/">Apiary</a> die neue Offenbarung für kollaborative API Definitionen in den Raum, das wir an dieser Stelle noch einmal jedem ans Herz legen wollen. Zusätzlich spricht man über das &#8222;perfekte Lehrbuchprojekt&#8220;: Saubere Definitionen, Mock-Objekte, Unit Tests und Co. So wie es halt sein soll. Weiters auf der Empfehlungs-Liste: <a href="http://fatfreeframework.com/home">Fat Free PHP Framework</a> und <a href="http://www.getpostman.com/">Postman</a>. REST in peace!</dd>
</dl>
<h3>[00:32:55] Keine Schaunotizen</h3>
<dl>
<dt>Regex Editoren</dt>
<dd><a href="https://www.debuggex.com/">Debuggex</a> und <a href="http://regex101.com/">Regex 101</a> sind zwei Regex Testing Tools, die gut visualisieren wie euer regulärer Ausdruck funktioniert.</dd>
<dt><a href="http://perf.fail/">perf.fail</a></dt>
<dd>Von den Performance Gurus zur Schau gestellte Fehltritte, die durchaus zu vermeiden gewesen wären. Gutes Lehrmaterial.</dd>
<dt><a href="https://github.com/lmccart/p5.js">P5.js</a></dt>
<dd>Schöne Visualisierungen mit angenehmer API? P5.js macht das.</dd>
</dl>


Hans, Schepp und Stefan erzählen diesmal von ihren Erfahrungen in der
Zusammenarbeit zwischen Backend und Frontend Entwicklern bei
Schnittstellendefinitionen.


[00:00:16] NEWS

YUI

Yahoo stellt die …

Hans, Schepp und Stefan erzählen diesmal von ihren Erfahrungen in der
Zusammenarbeit zwischen Backend und Frontend Entwicklern bei
Schnittstellendefinitionen.


[00:00:16] NEWS

YUI

Yahoo stellt die Entwicklung des in die Jahre gekommenen YUI Frameworks ein. Bei
der künftigen Technologiewahl durchaus zu berücksichtigen.


SCHAUNOTIZEN

[00:01:06] SCHNITTSTELLENDESIGN

Schepp und Stefan resümieren über ein paar Tools für Entwickler, die sich für
das reibungslose Schnittstellendesign eignen, und werfen mit Apiary die neue
Offenbarung für kollaborative API Definitionen in den Raum, das wir an dieser
Stelle noch einmal jedem ans Herz legen wollen. Zusätzlich spricht man über das
„perfekte Lehrbuchprojekt“: Saubere Definitionen, Mock-Objekte, Unit Tests und
Co. So wie es halt sein soll. Weiters auf der Empfehlungs-Liste: Fat Free PHP
Framework und Postman. REST in peace!


[00:32:55] KEINE SCHAUNOTIZEN

REGEX EDITOREN

Debuggex und Regex 101 sind zwei Regex Testing Tools, die gut visualisieren wie
euer regulärer Ausdruck funktioniert.

PERF.FAIL

Von den Performance Gurus zur Schau gestellte Fehltritte, die durchaus zu
vermeiden gewesen wären. Gutes Lehrmaterial.

P5.JS

Schöne Visualisierungen mit angenehmer API? P5.js macht das.

Revision 186: RESTful API Design

<p>Die aktuelle Folge in (fast) vollständiger Besetzung mit einer Diskussion zum Thema JavaScript Debugging und zur neuen Netzwerk Analyse API.</p>
<h3>[00:00:30] News</h3>
<dl>
<dt><a href="http://blog.sass-lang.com/posts/221239-sass-34-is-released">Sass 3.4 is Released</a></dt>
<dd>Sass 3.4 ist draußen mit einigen Kleinigkeiten. Beim Upgrade ist auf <a href="http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#backwards_incompatibilities__must_read">die Kompatibilität zu alten Versionen</a> zu achten.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:50] <a href="http://strawpoll.me/2375480/r">JavaScript Fehlerbehebungstrategien</a></dt>
<dd>Peter startete eine Umfrage per Twitter, wie Developer JavaScript Fehler analysieren. Wir diskutieren die beiden Ansätze.<br />
Hans benutzt in erster Linie console.log, weil ihm das Debugging zu umständlich ist, und vielleicht auch weil er keine Übung hat. Wenn er ganz viel Details braucht, dann greift er zum Debugger. Im Verhältnis: eine Verteilung von 80% console.log vs. 20% Debugger.<bt><br />
Meist wird zum Debugger gegriffen, wenn man herausfinden will, wo eine Veränderung ursprünglich herkommt. Wenn man nur Werte analysieren will, nimmt man üblicherweise die Konsole.<br />
Ein Tipp kommt von Peter. Er nutzt console.log als bool’schen Wert für einen bedingten Breakpoint im Debugger, um sich Werte ausgeben zu lassen, ohne wirklich console.log in den JavaScript-Code zu schreiben. Außerdem hat er den Eindruck, dass der Debugger nicht angenehm zu bedienen ist, und er ist manchmal zu punktuell und zu detailliert. Manchmal will man eher weniger tief und in der Breite Code analysieren.<br />
Stefan nutzt gerne die Debugger-eigene Konsole.</dd>
<dt>[00:17:17] <a href="http://code.tutsplus.com/tutorials/html5-network-information-api--cms-21598">HTML5: Network Information API &#8211; Tuts+ Code Tutorial</a></dt>
<dd>Stefan meint, über die API kann eine Webseite entscheiden, wie &#8222;fett&#8220; sie daherkommen will. Peter weißt aber darauf hin, dass die gelieferten Infos, respektive die Folgerungen daraus ganz schön daneben liegen können. Peter fragt sich also, warum entwickeln Google und Co. so eine unbrauchbare API? Schepp meint der Usecase könnte in ChromeOS liegen (vgl. <a href="http://w3c-webmob.github.io/netinfo-usecases/">W3C Use Cases</a>). Anselm meint, man kann vielleicht auf bestimmte, &#8222;sichere&#8220; Abfragen, also z.B. die Abfrage nach &#8222;Cellular&#8220;, gehen kann. Peter sieht die einzige brauchbare Umsetzung von soetwas in der Art wie Youtube es tut. Anselm liest folgende von der Spec genannten Use Cases vor: Die BBC-Seite warnt bei &#8222;Cellular&#8220; den Benutzer vor dem Start vor hohen Kosten. Ein weiterer Use Case: der Firefox Marketplace bietet nur dann eine SMS-basierte Authentifizierung an, wenn beim Endgerät &#8222;Cellular&#8220; entdeckt wird. Anselm sieht den Vorteil gegenüber dem Youtube-Verfahren darin, dass die API viel leichter einzubinden und abzufragen ist. Peter meint weiterhin, die API sei nicht zu gebrauchen.</dd>
</dl>
<h3>[00:40:57] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.npmjs.org/package/grunt-split-images">grunt-split-images</a></dt>
<dd>CSS in verschiedene Dateien verteilen, die zum einen Layout, zum anderen Stylingbilder betreffen. Letztere lässt sich dann praktisch per Lazy Loading nachladen.</dd>
<dt><a href="https://medium.com/code-stories/building-markdown-based-developer-docs-87c0317c56f7">Building markdown-based developer docs</a></dt>
<dd>Markdown-basierte Dokumentation im Code, die sich automatisiert auslesen lässt.</dd>
<dt><a href="http://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html">Let&#8217;s build a browser engine!</a></dt>
<dd>Ein Tutorial, das beschreibt, wie man eine eigene Browser Engine bauen kann.</dd>
<dt><a href="https://www.joshemerson.co.uk/blog/secure-your-site">How to secure your site in an afternoon</a></dt>
<dd>SSL für die eigene Website in nur wenigen Schritten.</dd>
</dl>


Die aktuelle Folge in (fast) vollständiger Besetzung mit einer Diskussion zum
Thema JavaScript Debugging und zur neuen Netzwerk Analyse API.


[00:00:30] NEWS

SASS 3.4 IS RELEASED

Sass 3.4 ist drauß…

Die aktuelle Folge in (fast) vollständiger Besetzung mit einer Diskussion zum
Thema JavaScript Debugging und zur neuen Netzwerk Analyse API.


[00:00:30] NEWS

SASS 3.4 IS RELEASED

Sass 3.4 ist draußen mit einigen Kleinigkeiten. Beim Upgrade ist auf die
Kompatibilität zu alten Versionen zu achten.


SCHAUNOTIZEN

[00:00:50] JAVASCRIPT FEHLERBEHEBUNGSTRATEGIEN

Peter startete eine Umfrage per Twitter, wie Developer JavaScript Fehler
analysieren. Wir diskutieren die beiden Ansätze.
Hans benutzt in erster Linie console.log, weil ihm das Debugging zu umständlich
ist, und vielleicht auch weil er keine Übung hat. Wenn er ganz viel Details
braucht, dann greift er zum Debugger. Im Verhältnis: eine Verteilung von 80%
console.log vs. 20% Debugger.
Meist wird zum Debugger gegriffen, wenn man herausfinden will, wo eine
Veränderung ursprünglich herkommt. Wenn man nur Werte analysieren will, nimmt
man üblicherweise die Konsole.
Ein Tipp kommt von Peter. Er nutzt console.log als bool’schen Wert für einen
bedingten Breakpoint im Debugger, um sich Werte ausgeben zu lassen, ohne
wirklich console.log in den JavaScript-Code zu schreiben. Außerdem hat er den
Eindruck, dass der Debugger nicht angenehm zu bedienen ist, und er ist manchmal
zu punktuell und zu detailliert. Manchmal will man eher weniger tief und in der
Breite Code analysieren.
Stefan nutzt gerne die Debugger-eigene Konsole.

[00:17:17] HTML5: NETWORK INFORMATION API – TUTS+ CODE TUTORIAL

Stefan meint, über die API kann eine Webseite entscheiden, wie „fett“ sie
daherkommen will. Peter weißt aber darauf hin, dass die gelieferten Infos,
respektive die Folgerungen daraus ganz schön daneben liegen können. Peter fragt
sich also, warum entwickeln Google und Co. so eine unbrauchbare API? Schepp
meint der Usecase könnte in ChromeOS liegen (vgl. W3C Use Cases). Anselm meint,
man kann vielleicht auf bestimmte, „sichere“ Abfragen, also z.B. die Abfrage
nach „Cellular“, gehen kann. Peter sieht die einzige brauchbare Umsetzung von
soetwas in der Art wie Youtube es tut. Anselm liest folgende von der Spec
genannten Use Cases vor: Die BBC-Seite warnt bei „Cellular“ den Benutzer vor dem
Start vor hohen Kosten. Ein weiterer Use Case: der Firefox Marketplace bietet
nur dann eine SMS-basierte Authentifizierung an, wenn beim Endgerät „Cellular“
entdeckt wird. Anselm sieht den Vorteil gegenüber dem Youtube-Verfahren darin,
dass die API viel leichter einzubinden und abzufragen ist. Peter meint
weiterhin, die API sei nicht zu gebrauchen.


[00:40:57] KEINE SCHAUNOTIZEN

GRUNT-SPLIT-IMAGES

CSS in verschiedene Dateien verteilen, die zum einen Layout, zum anderen
Stylingbilder betreffen. Letztere lässt sich dann praktisch per Lazy Loading
nachladen.

BUILDING MARKDOWN-BASED DEVELOPER DOCS

Markdown-basierte Dokumentation im Code, die sich automatisiert auslesen lässt.

LET’S BUILD A BROWSER ENGINE!

Ein Tutorial, das beschreibt, wie man eine eigene Browser Engine bauen kann.

HOW TO SECURE YOUR SITE IN AN AFTERNOON

SSL für die eigene Website in nur wenigen Schritten.

Revision 185: JS Debuggingstrategien & Network Information API

<p>Zwei Stühle, drei Meinungen: Beschaulich kleine Runde mit angenehmen Fortbildungsfaktor.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:17] <a href="https://github.com/reworkcss/rework">Rework.css</a></dt>
<dd>Stefan hat sich näher mit dem Rework.css Framework beschäftigt, einer Node.js Bibliothek die CSS Manipulationen erlaubt, und unter anderem den Grundstein für Projekte wie das auf die Nase gefallene <a href="http://www.myth.io/">Myth</a> oder <a href="https://github.com/visionmedia/styl">Styl</a> legt. Auch Nicolas Ghallagers <a href="https://github.com/suitcss/suit">SUIT Framework</a> bekommt dadurch eine Zwischensprache. Wir erklären, dass man durch die plugingestützte Architektur sich schnell ein ganz passables Tool stricken kann um sich &#8212; nicht unähnlich zum Autoprefixer &#8212; bei etlichen Standardaufgaben die Drecksarbeit erledigen zu lassen. Zaubern wird man aber dennoch nicht können.</dd>
<dt>[00:23:44] <a href="http://developer.telerik.com/featured/web-components-ready-production/">Why Web Components are ready for production</a></dt>
<dd>Web Components sind ja im Moment der letzte Schrei, doch wenn man sich die Kompatibilitätstabelle ansieht, schaut es abseits der Blink-Umgebungen &#8212; von generellem Commitment abgesehen &#8212; eher düster aus. TJ Van Toll meint allerdings, dass man gewisse Bereiche aus dem Gebiet der Web Components auch schon heute verwenden kann. Peter nimmt diesen Artikel zum Anlass um über <a href="http://www.peterkroener.de/web-components-erklaert-teil-3-native-html-elemente-erweitern/">seine jüngsten Recherchen zum Thema Type Extensions</a> zu referieren, die mittlereile auch von <a href="https://github.com/github/time-elements">Github</a> im Live Environment eingesetzt werden.</dd>
</dl>
<h3>[00:50:15] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://filamentgroup.com/lab/tablesaw.html">Tablesaw</a></dt>
<dd>Das dreckige Dutzend an Responsive Tables Techniken, vereint in einer knackigen JavaScript Library von der Filament Group.</dd>
</dl>


Zwei Stühle, drei Meinungen: Beschaulich kleine Runde mit angenehmen
Fortbildungsfaktor.


SCHAUNOTIZEN

[00:00:17] REWORK.CSS

Stefan hat sich näher mit dem Rework.css Framework beschäftigt, einer No…

Zwei Stühle, drei Meinungen: Beschaulich kleine Runde mit angenehmen
Fortbildungsfaktor.


SCHAUNOTIZEN

[00:00:17] REWORK.CSS

Stefan hat sich näher mit dem Rework.css Framework beschäftigt, einer Node.js
Bibliothek die CSS Manipulationen erlaubt, und unter anderem den Grundstein für
Projekte wie das auf die Nase gefallene Myth oder Styl legt. Auch Nicolas
Ghallagers SUIT Framework bekommt dadurch eine Zwischensprache. Wir erklären,
dass man durch die plugingestützte Architektur sich schnell ein ganz passables
Tool stricken kann um sich — nicht unähnlich zum Autoprefixer — bei etlichen
Standardaufgaben die Drecksarbeit erledigen zu lassen. Zaubern wird man aber
dennoch nicht können.

[00:23:44] WHY WEB COMPONENTS ARE READY FOR PRODUCTION

Web Components sind ja im Moment der letzte Schrei, doch wenn man sich die
Kompatibilitätstabelle ansieht, schaut es abseits der Blink-Umgebungen — von
generellem Commitment abgesehen — eher düster aus. TJ Van Toll meint allerdings,
dass man gewisse Bereiche aus dem Gebiet der Web Components auch schon heute
verwenden kann. Peter nimmt diesen Artikel zum Anlass um über seine jüngsten
Recherchen zum Thema Type Extensions zu referieren, die mittlereile auch von
Github im Live Environment eingesetzt werden.


[00:50:15] KEINE SCHAUNOTIZEN

TABLESAW

Das dreckige Dutzend an Responsive Tables Techniken, vereint in einer knackigen
JavaScript Library von der Filament Group.

Revision 184: Web Components Type Extension und Rework.css

<p>Schepp und Peter zogen mit Heldenmut in die Schlacht gegen das Sommerloch. Aber ob das alleine reicht?</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:16] <a href="https://w3c.github.io/manifest/">The Web Manifest specification</a></dt>
<dd>Der HTML5 Doctor <a href="http://html5doctor.com/web-manifest-specification/">verbreitet</a> die Kunde kündet von der <a href="https://w3c.github.io/manifest/">Web Manifest specification</a>, einem Entwurf für ein Webapp-Metadaten-Format. Peter findet es gut, Schepp ist eher gedämpft begeistert. Wir reden über <a href="http://www.2ality.com/2014/06/installable-web-apps.html">installierbare Webapps</a>, <a href="https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md">Service Workers</a>, <a href="http://appcachefacts.info/">App Cache</a>, <a href="http://humanstxt.org/DE">humans.txt</a> und <a href="http://webplatformdaily.org/">Open Web Platform Daily Digest</a>.</dd>
</dl>
<h3>[00:28:38] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://setosa.io/blog/2014/07/26/markov-chains/">Markov Chains</a></dt>
<dd>Markow-Ketten bunt und animiert erklärt.</dd>
<dt><a href="http://sarasoueidan.com/blog/svg-coordinate-systems/">Understanding SVG Coordinate Systems &amp; Transformations</a></dt>
<dd>Epische dreiteilige SVG-Artikelserie aus der Feder Sara Soueidans.</dd>
</dl>


Schepp und Peter zogen mit Heldenmut in die Schlacht gegen das Sommerloch. Aber
ob das alleine reicht?


SCHAUNOTIZEN

[00:00:16] THE WEB MANIFEST SPECIFICATION

Der HTML5 Doctor verbreitet die Kunde …

Schepp und Peter zogen mit Heldenmut in die Schlacht gegen das Sommerloch. Aber
ob das alleine reicht?


SCHAUNOTIZEN

[00:00:16] THE WEB MANIFEST SPECIFICATION

Der HTML5 Doctor verbreitet die Kunde kündet von der Web Manifest specification,
einem Entwurf für ein Webapp-Metadaten-Format. Peter findet es gut, Schepp ist
eher gedämpft begeistert. Wir reden über installierbare Webapps, Service
Workers, App Cache, humans.txt und Open Web Platform Daily Digest.


[00:28:38] KEINE SCHAUNOTIZEN

MARKOV CHAINS

Markow-Ketten bunt und animiert erklärt.

UNDERSTANDING SVG COORDINATE SYSTEMS & TRANSFORMATIONS

Epische dreiteilige SVG-Artikelserie aus der Feder Sara Soueidans.

Revision 183: Web Manifest Spec und Links

<p>Wer bei uns einen guten Kommentar abgibt ist dann auch gleich mal Gast im Podcast. So geschehen mit <a href="https://twitter.com/dawitux">David Hasenbeck</a>, der noch einiges an Feedback zu <a href="/174">Revision 174</a> in petto hatte.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:23] Agile Methoden</dt>
<dd>David erklärt mit vier Jahren Scrum-Master Erfahrung, was es nun eigentlich mit dieser mittlerweile zum Usus gewordenen Projektmanagement-Strategie auf sich hat. Er reduziert das Prinzip auf zwei ganz grundlegende Regeln, erzählt von den verschiedenen Rollen und deren Aufgaben und gibt vor allem Klarheit, warum es in Ordnung ist, sich das System für den eigenen Use Case zurechtzubiegen. Schepp und Stefan streuen noch Kanban als Planungsalternative ein, das gewisse Ähnlichkeiten besitzt, aber doch ganz anders funktionieren kann.</dd>
<dt>[00:34:00] <a href="http://dev.opera.com/articles/responsive-images/">Responsive Images sind da!</a></dt>
<dd>Jubelt und jauchzet! Es ist soweit! Die ersten Implementierungen für Responsive Images sind in den Blink-Browsern gelandet. Und Firefox zieht nach. Mit Ende Oktober erwartet man sich in der <a href="http://responsiveimages.org/">RICG</a> eine entsprechend großflächige Abdeckung. Und doch war es ein harter Weg, den vor allem Host Anselm mitbestritten hat. Peter und Anselm erzählen vom Weg zur Spezifikation, die mittlerweile abgesegnet und implementiert ist, und was es mit <code>picture</code>-Element, <code>sizes</code> und <code>srcset</code> auf sich hat. Lektüre dazu: Anselms <a href="http://helloanselm.com/wwnrw-respimg/#/">Präsentation von der WWNRW</a> und der umfangreiche Artikel bei <a href="http://dev.opera.com/articles/responsive-images/">Opera</a>. Guter Polyfill: <a href="https://github.com/scottjehl/picturefill">Picturefill</a>.</dd>
</dl>
<h3>[01:14:07] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://trackingjs.com/">tracking.js</a></dt>
<dd>Face-Tracking und andere Bildverarbeitungsalgorithmen im Browser? tracking.js macht&#8217;s möglich.</dd>
<dt><a href="http://csstriggers.com/">CSS Triggers</a></dt>
<dd>Paul Lewis recherchiert, welche CSS Properties einen Repaint auslösen.</dd>
<dt><a href="http://coldfrontconf.com/">Zwei Tickets für die Coldfront</a></dt>
<dd>Wir verlosen zwei Karten für die Coldfront Conference in Dänemark.</dd>
</dl>


Wer bei uns einen guten Kommentar abgibt ist dann auch gleich mal Gast im
Podcast. So geschehen mit David Hasenbeck, der noch einiges an Feedback zu
Revision 174 in petto hatte.


SCHAUNOTIZEN

[00:00…

Wer bei uns einen guten Kommentar abgibt ist dann auch gleich mal Gast im
Podcast. So geschehen mit David Hasenbeck, der noch einiges an Feedback zu
Revision 174 in petto hatte.


SCHAUNOTIZEN

[00:00:23] AGILE METHODEN

David erklärt mit vier Jahren Scrum-Master Erfahrung, was es nun eigentlich mit
dieser mittlerweile zum Usus gewordenen Projektmanagement-Strategie auf sich
hat. Er reduziert das Prinzip auf zwei ganz grundlegende Regeln, erzählt von den
verschiedenen Rollen und deren Aufgaben und gibt vor allem Klarheit, warum es in
Ordnung ist, sich das System für den eigenen Use Case zurechtzubiegen. Schepp
und Stefan streuen noch Kanban als Planungsalternative ein, das gewisse
Ähnlichkeiten besitzt, aber doch ganz anders funktionieren kann.

[00:34:00] RESPONSIVE IMAGES SIND DA!

Jubelt und jauchzet! Es ist soweit! Die ersten Implementierungen für Responsive
Images sind in den Blink-Browsern gelandet. Und Firefox zieht nach. Mit Ende
Oktober erwartet man sich in der RICG eine entsprechend großflächige Abdeckung.
Und doch war es ein harter Weg, den vor allem Host Anselm mitbestritten hat.
Peter und Anselm erzählen vom Weg zur Spezifikation, die mittlerweile abgesegnet
und implementiert ist, und was es mit picture-Element, sizes und srcset auf sich
hat. Lektüre dazu: Anselms Präsentation von der WWNRW und der umfangreiche
Artikel bei Opera. Guter Polyfill: Picturefill.


[01:14:07] KEINE SCHAUNOTIZEN

TRACKING.JS

Face-Tracking und andere Bildverarbeitungsalgorithmen im Browser? tracking.js
macht’s möglich.

CSS TRIGGERS

Paul Lewis recherchiert, welche CSS Properties einen Repaint auslösen.

ZWEI TICKETS FÜR DIE COLDFRONT

Wir verlosen zwei Karten für die Coldfront Conference in Dänemark.

Revision 182: Agile Methoden, responsive Bilder und noch eine Verlosung

<p>Mit dem <a href="https://twitter.com/asciidisco">Herrn Golasch</a> an Bord ranteten wir (Hans, Schepp und Peter) über JavaScript-Module und erzählten von selbstorganisierten Klein-Events, für die wir an Ort und Stelle auch Tickets verlosen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:14] NPM AMD ES6 JSPM OMG WTF BBQ</dt>
<dd>Ohne so richtig konkreten Anlass sprachen wir über verschiedene Ansätze für JavaScript-Module. <a href="http://jsmodules.io/">ES6-Module</a> sind zwar praktisch fertig, aber noch von keinem Browser (oder sonst irgendwas) unterstützt. Beim Gespräch über die heute nutzbaren Alternativen lässt Peter kein gutes Haar an AMD bzw. <a href="http://requirejs.org/">RequireJS</a> und dem damit verbundenen Konfigurationskrieg. Sein Alternativ-Vorschlag <a href="http://browserify.org/">Browserify</a> bringt Node-Module in den Browser, hat aber seine ganz eigenen Macken. Auch über den Package-Manager-Wildwuchs zürnen wir; zum Glück haben wir heutzutage „nur“ noch <a href="https://www.npmjs.org/">NPM</a>, <a href="http://bower.io/">Bower</a> und toolspezifische Manager wie <a href="https://atmospherejs.com/">Atmosphere</a> von <a href="https://www.meteor.com/">Meteor</a> an der Backe, was uns aber trotzdem recht viel erscheint. Ungeachtet dessen setzen wir für die nahe Zunkunft Hoffnung in <em>noch einen</em> Package Manager: <a href="http://jspm.io/">JSPM</a> ist ein auf ES6 aufsetzender Allesfresser, der die Modulformatsgrenzen zwischen ES6, AMD und allem übrigen verschwimmen lässt (<a href="https://www.youtube.com/watch?v=szJjsduHBQQ">Talk auf der JSConf</a>). Zum Abschluss geben wir ein paar alltagstaugliche Modul-Tool-Tipps von uns (<a href="https://www.npmjs.org/package/grunt-bower-clean">grunt-bower-clean</a>, <a href="http://kenneth.io/blog/2013/04/01/visualize-your-javaScript-dependencies-with-dependo/">dependo</a>) und erklären, warum <a href="https://github.com/SlexAxton/yepnope.js">yepnope.js</a> nicht mehr das Mittel der Wahl sein sollte.</dd>
<dt>[00:37:12] Dalekathon</dt>
<dd>Sebastian und Rodney rufen zur regen Beteiligung an ihrem fünftägigen <a href="http://dalekjs.com/">Dalek.js</a>-Hackathon auf. Gerne auch online!</dd>
<dt>[00:44:25] <a href="http://www.nightlybuild.io/">NightlyBuild.io</a> &#8211; Tickets zu gewinnen!</dt>
<dd>Die halbe Workingdraft-Truppe veranstaltet (mit Verstärkung) eine After-Work-Konferenz in Köln! Für kleines Geld wird viel geboten. Sebastian und Hans erzählen auch direkt, wie man so etwas auf die Beine stellt. Wer die 35&thinsp;€ nicht selbst stemmen, sondern eins von <strong>zwei Tickets gewinnen</strong> möchte, soll uns einfach seinen sehnlichsten Speaker-Wunsch mitteilen.</dd>
</dl>
<h3>[01:01:18] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/shootaroo/jit-grunt">jit-grunt</a></dt>
<dd>Automatisches und vor allem schnelles laden von Grunt-Plugins.</dd>
<dt><a href="http://www.targetprocess.com/articles/speed-in-software-development.html">Speed in Software Development</a></dt>
<dd>Monströser Artikel zum Thema Geschwindigkeit und Produktivität bei Softwareentwicklung.</dd>
</dl>


Mit dem Herrn Golasch an Bord ranteten wir (Hans, Schepp und Peter) über
JavaScript-Module und erzählten von selbstorganisierten Klein-Events, für die
wir an Ort und Stelle auch Tickets verlosen.


SC…

Mit dem Herrn Golasch an Bord ranteten wir (Hans, Schepp und Peter) über
JavaScript-Module und erzählten von selbstorganisierten Klein-Events, für die
wir an Ort und Stelle auch Tickets verlosen.


SCHAUNOTIZEN

[00:00:14] NPM AMD ES6 JSPM OMG WTF BBQ

Ohne so richtig konkreten Anlass sprachen wir über verschiedene Ansätze für
JavaScript-Module. ES6-Module sind zwar praktisch fertig, aber noch von keinem
Browser (oder sonst irgendwas) unterstützt. Beim Gespräch über die heute
nutzbaren Alternativen lässt Peter kein gutes Haar an AMD bzw. RequireJS und dem
damit verbundenen Konfigurationskrieg. Sein Alternativ-Vorschlag Browserify
bringt Node-Module in den Browser, hat aber seine ganz eigenen Macken. Auch über
den Package-Manager-Wildwuchs zürnen wir; zum Glück haben wir heutzutage „nur“
noch NPM, Bower und toolspezifische Manager wie Atmosphere von Meteor an der
Backe, was uns aber trotzdem recht viel erscheint. Ungeachtet dessen setzen wir
für die nahe Zunkunft Hoffnung in noch einen Package Manager: JSPM ist ein auf
ES6 aufsetzender Allesfresser, der die Modulformatsgrenzen zwischen ES6, AMD und
allem übrigen verschwimmen lässt (Talk auf der JSConf). Zum Abschluss geben wir
ein paar alltagstaugliche Modul-Tool-Tipps von uns (grunt-bower-clean, dependo)
und erklären, warum yepnope.js nicht mehr das Mittel der Wahl sein sollte.

[00:37:12] DALEKATHON

Sebastian und Rodney rufen zur regen Beteiligung an ihrem fünftägigen
Dalek.js-Hackathon auf. Gerne auch online!

[00:44:25] NIGHTLYBUILD.IO – TICKETS ZU GEWINNEN!

Die halbe Workingdraft-Truppe veranstaltet (mit Verstärkung) eine
After-Work-Konferenz in Köln! Für kleines Geld wird viel geboten. Sebastian und
Hans erzählen auch direkt, wie man so etwas auf die Beine stellt. Wer die 35 €
nicht selbst stemmen, sondern eins von zwei Tickets gewinnen möchte, soll uns
einfach seinen sehnlichsten Speaker-Wunsch mitteilen.


[01:01:18] KEINE SCHAUNOTIZEN

JIT-GRUNT

Automatisches und vor allem schnelles laden von Grunt-Plugins.

SPEED IN SOFTWARE DEVELOPMENT

Monströser Artikel zum Thema Geschwindigkeit und Produktivität bei
Softwareentwicklung.

Revision 181: Module, Events, Verlosung

<p>Hans, Schepp und Anselm fanden dieses mal zwei spannende Themen, die uns als responsive Webentwickler mehr oder weniger betreffen und es gibt eine Menge Linktipps.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:19] <a href="http://www.slideshare.net/yiibu/the-future-of-mediaqueries">The Future of Media Queries</a></dt>
<dd>Nachdem in neuen Spezifikationen immer mehr neue Media Query Typen auftauchen, nehmen wir dies als Anlass, um über den Sinn und Unsinn von zu spezifischer Auswahl an Media Queries und die damit einhergehenden Problematiken für Entwickler zu sprechen. Auf mögliche Alternativen zu Media Queries und die in der Präsentation aufgezeigten Lösungen gehen wir kurz ein und geben unsere Meinung kund.</dd>
<dt>[00:19:48] <a href="https://medium.com/@rogerdudler/front-end-technology-stack-survey-2014-809f7a8c92f3">Front-End Technology Survey Round-Up</a> und die <a href="http://webkrauts.de/artikel/2014/jetzt-wissen-wir-es">Webkrauts Umfrage-Ergebnisse</a></dt>
<dd>Zwei umfangreiche Umfragen im Front-End und Webentwicklungsbereich nahmen wir zum Anlass, um über Verwendung und Verbreitung von Front-End Technologien zu sprechen, um herauszufinden, wie nischenhaft unsere verwendeten Tools wirklich sind und wie verbreitet Bootstrap tatsächlich ist. Im zweiten Teil, der Webkrauts-Umfrage, geht es hingegen mehr um den Webworker an sich, seine Arbeitsweise, sein Einkommen, Arbeitszeiten und Weiterbildungmöglichkeiten. Wir sprechen, wie es uns ergeht, was wir aus den Ergebnissen für Rückschlüsse ziehen können und wo wir die Szene ganz anders eingeschätzt hätten…</dd>
</dl>
<h3>[00:51:56] Links</h3>
<dl>
<dt><a href="https://www.youtube.com/user/lxjs2012/videos">LXJS (2014) Videos</a></dt>
<dd>Alle Videos der LXJS Konferenz in Lissabon, Portugal, sind bereits online auf ihrem YouTube Kanal ansehbar und bringen eine Menge Wissen mit. Alles in allem lohnenswerte Stunden Material, die man sich ansehen sollte.</dd>
<dt><a href="http://aerotwist.com/blog/pixels-are-expensive/">How a browser paints a Pixel</a></dt>
<dd>Paul Lewis erklärt ganz beiläufig an Hand von perceived Performance Optimierung (aka 60fps) wie ein Browser eigentlich CSS in Pixel umwandelt, was dabei passiert und wie man vermeiden kann, die Performance einer Seite kaputt zu machen, weil der Browser zu viele Pixelberechnungen in der Zeit durchführen muss, als dass er dies noch flüssig darstellen könnte.</dd>
<dt><a href="http://mo.phlow.de/gulp/">Durchstarten mit Gulp</a></dt>
<dd>Wer sich noch nicht richtig mit Gulp beschäftigen konnte, aber einen guten Einstieg sucht, dem sei dieser ausführliche Artikel empfohlen, der Schritt für Schritt erklärt, wie man Gulp aufsetzt, Tasks einrichtet, konfiguriert und seine Abläufe damit automatisieren kann.</dd>
<dt><a href="http://sarasoueidan.com/blog/css-svg-clipping/">CSS / SVG Clipping</a></dt>
<dd>Sara Soueidan erklärt in ihrem Blogartikel ausführlich, wie man mit CSS und / oder SVG seine HTML, CSS oder SVG Elemente mit Clip-Paths beschneiden kann und so in schöne Formen wie Hexagone oder Freiformen bringt.</dd>
<dt><a href="http://bastianallgeier.com/notes/simplicity">Simplicity</a></dt>
<dd>Bastian Allgeier schreibt in seinem Artikel „Simplicity“ über die Veränderung unseres Workflows. Oftmals sinnieren wir darüber, welche Toolchain wir für ein Projekt brauchen und lassen dabei die eigentliche kreative Arbeit außen vor. Er appelliert daran, sich auf das Wesentliche zu konzentrieren und sich nicht auf technische Hilfsmittel zu beschränken.</dd>
<dt><a href="https://medium.com/@joaomilho/festina-lente-e29070811b84">Technical Dept 101</a></dt>
<dd>Ein Einstieg, um zu verstehen, woher Legacy-Code kommt, wie dieser entstehen kann und warum Code-Rewrites notwendig sind. Zum besseren Verständnis für Manager oder andere Außenstehende, die nicht selbst in der Coder-Rolle stecken.</dd>
<dt><a href="http://www.nightlybuild.io/">NightlyBuild.io</a></dt>
<dd>Zum Zeitpunkt der Revisionsaufnahme noch nicht bereit, mittlerweile online: Die Website zur nächtlichen 1-Tageskonferenz im September in Köln, mitorganisiert unter anderem von Hans und Anselm. Die Tickets kosten 35€ und es sind noch ein paar erhältlich.</dd>
</dl>


Hans, Schepp und Anselm fanden dieses mal zwei spannende Themen, die uns als
responsive Webentwickler mehr oder weniger betreffen und es gibt eine Menge
Linktipps.


SCHAUNOTIZEN

[00:00:19] THE FUTUR…

Hans, Schepp und Anselm fanden dieses mal zwei spannende Themen, die uns als
responsive Webentwickler mehr oder weniger betreffen und es gibt eine Menge
Linktipps.


SCHAUNOTIZEN

[00:00:19] THE FUTURE OF MEDIA QUERIES

Nachdem in neuen Spezifikationen immer mehr neue Media Query Typen auftauchen,
nehmen wir dies als Anlass, um über den Sinn und Unsinn von zu spezifischer
Auswahl an Media Queries und die damit einhergehenden Problematiken für
Entwickler zu sprechen. Auf mögliche Alternativen zu Media Queries und die in
der Präsentation aufgezeigten Lösungen gehen wir kurz ein und geben unsere
Meinung kund.

[00:19:48] FRONT-END TECHNOLOGY SURVEY ROUND-UP UND DIE WEBKRAUTS
UMFRAGE-ERGEBNISSE

Zwei umfangreiche Umfragen im Front-End und Webentwicklungsbereich nahmen wir
zum Anlass, um über Verwendung und Verbreitung von Front-End Technologien zu
sprechen, um herauszufinden, wie nischenhaft unsere verwendeten Tools wirklich
sind und wie verbreitet Bootstrap tatsächlich ist. Im zweiten Teil, der
Webkrauts-Umfrage, geht es hingegen mehr um den Webworker an sich, seine
Arbeitsweise, sein Einkommen, Arbeitszeiten und Weiterbildungmöglichkeiten. Wir
sprechen, wie es uns ergeht, was wir aus den Ergebnissen für Rückschlüsse ziehen
können und wo wir die Szene ganz anders eingeschätzt hätten…


[00:51:56] LINKS

LXJS (2014) VIDEOS

Alle Videos der LXJS Konferenz in Lissabon, Portugal, sind bereits online auf
ihrem YouTube Kanal ansehbar und bringen eine Menge Wissen mit. Alles in allem
lohnenswerte Stunden Material, die man sich ansehen sollte.

HOW A BROWSER PAINTS A PIXEL

Paul Lewis erklärt ganz beiläufig an Hand von perceived Performance Optimierung
(aka 60fps) wie ein Browser eigentlich CSS in Pixel umwandelt, was dabei
passiert und wie man vermeiden kann, die Performance einer Seite kaputt zu
machen, weil der Browser zu viele Pixelberechnungen in der Zeit durchführen
muss, als dass er dies noch flüssig darstellen könnte.

DURCHSTARTEN MIT GULP

Wer sich noch nicht richtig mit Gulp beschäftigen konnte, aber einen guten
Einstieg sucht, dem sei dieser ausführliche Artikel empfohlen, der Schritt für
Schritt erklärt, wie man Gulp aufsetzt, Tasks einrichtet, konfiguriert und seine
Abläufe damit automatisieren kann.

CSS / SVG CLIPPING

Sara Soueidan erklärt in ihrem Blogartikel ausführlich, wie man mit CSS und /
oder SVG seine HTML, CSS oder SVG Elemente mit Clip-Paths beschneiden kann und
so in schöne Formen wie Hexagone oder Freiformen bringt.

SIMPLICITY

Bastian Allgeier schreibt in seinem Artikel „Simplicity“ über die Veränderung
unseres Workflows. Oftmals sinnieren wir darüber, welche Toolchain wir für ein
Projekt brauchen und lassen dabei die eigentliche kreative Arbeit außen vor. Er
appelliert daran, sich auf das Wesentliche zu konzentrieren und sich nicht auf
technische Hilfsmittel zu beschränken.

TECHNICAL DEPT 101

Ein Einstieg, um zu verstehen, woher Legacy-Code kommt, wie dieser entstehen
kann und warum Code-Rewrites notwendig sind. Zum besseren Verständnis für
Manager oder andere Außenstehende, die nicht selbst in der Coder-Rolle stecken.

NIGHTLYBUILD.IO

Zum Zeitpunkt der Revisionsaufnahme noch nicht bereit, mittlerweile online: Die
Website zur nächtlichen 1-Tageskonferenz im September in Köln, mitorganisiert
unter anderem von Hans und Anselm. Die Tickets kosten 35€ und es sind noch ein
paar erhältlich.

Revision 180: Media Queries und Web-Worker Analysen

<p>Revision 179 ohne besondere Vorkommnisse.</p>
<h3>[00:00:10] News</h3>
<dl>
<dt><a href="http://src.chromium.org/viewvc/blink?view=revision&#038;revision=177128">position: sticky aus Blink entfernt</a></dt>
<dd>Die Blink-Entwickler (Google) entfernen position: sticky erst mal wieder, bis sie das Compositing System erneuert haben.</dd>
<dt><a href="http://www.elijahmanor.com/enhanced-chrome-emulation-tools/">Chrome Canary Connection Emulation</a></dt>
<dd>Die Chrome Developer Tools können nun Verbindungsgeschwindigkeit simulieren.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:27] Web Components</dt>
<dd>Web-Components wird als Oberbegriff für Technologien, die HTML um neue, eigene Elemente (also komplette Interfaces) erweitern.<br />
Das HTML5 video-Tag erzeugt im Browser beispielsweise einen Player, bestehend aus verschiedenen Elementen, diese werden mithilfe des ShadowDOM gebaut. Dazu kommt die Funktionalität, die dahinter steht: Das alles ist durch Web-Components für Web-Interface-Entwickler nun auch möglich. Und zwar bereits ab sofort, denn das <a href="http://www.polymer-project.org/">Polymer Framework</a> für Web-Component Umsetzung bietet die neuen Technologien cross-browser an.<br />
Einige grundlegenden Dinge werden <a href="http://toddmotto.com/web-components-concepts-shadow-dom-imports-templates-custom-elements/">von Todd Motto</a> und <a href="http://www.peterkroener.de/web-components-erklaert-teil-1-was-sind-web-components/">Peter in seiner Artikel-Serie zum Thema</a> noch mal ausführlicher beschrieben.<br />
Wir diskutieren über die Anzahl der Dateien, die geladen werden müssen: Styles, HTML, JS pro Component. Unsere Schlussfolgerung: dies wird nicht mehr all zu wichtig sein, wenn man SPDY verwendet, da man besser Deltas als große Dateien durchs Kabel jagt. Auch Probleme mit den Spezifikationen sprechen wir ans: Peter vermisst bei Components beispielsweise das Responsive Web-Design und auch sogenannte <a href="http://www.xanthir.com/b4PR0">Element Queries</a> fehlen noch. Des weiteren hat man zum Thema <a href="https://www.youtube.com/watch?v=BgvDZZ8Ms8c">Barrierefreiheit von Components</a> auch noch nicht viel gehört.
</dd>
</dl>
<h3>[00:47:22] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.youtube.com/watch?v=4uQMl7mFB6g">The ServiceWorker: The network layer is yours to own</a></dt>
<dd>Ein lustiges Video, welches Service Worker näher erläutert.</dd>
<dt><a href="http://blog.spreedly.com/2014/06/24/merge-pull-request-considered-harmful/#.U8u8HvKSweT">&#8222;Merge Pull Requests&#8220; Considered Harmful</a></dt>
<dd>Ein Artikel, der zu besseren Merging-Strategien rät, als den “Merge Pull Request” Button auf GitHub zu verwenden.</dd>
<dt><a href="http://schepp.github.io/HTTP-2/#/">HTTP/2</a></dt>
<dd>Schepps Präsentation zum Thema HTTP/2 und SPDY deckt so ziemlich die meisten Fragen in diesem Context ab.</dd>
</dl>


Revision 179 ohne besondere Vorkommnisse.


[00:00:10] NEWS

POSITION: STICKY AUS BLINK ENTFERNT

Die Blink-Entwickler (Google) entfernen position: sticky erst mal wieder, bis
sie das Compositing Syst…

Revision 179 ohne besondere Vorkommnisse.


[00:00:10] NEWS

POSITION: STICKY AUS BLINK ENTFERNT

Die Blink-Entwickler (Google) entfernen position: sticky erst mal wieder, bis
sie das Compositing System erneuert haben.

CHROME CANARY CONNECTION EMULATION

Die Chrome Developer Tools können nun Verbindungsgeschwindigkeit simulieren.


SCHAUNOTIZEN

[00:01:27] WEB COMPONENTS

Web-Components wird als Oberbegriff für Technologien, die HTML um neue, eigene
Elemente (also komplette Interfaces) erweitern.
Das HTML5 video-Tag erzeugt im Browser beispielsweise einen Player, bestehend
aus verschiedenen Elementen, diese werden mithilfe des ShadowDOM gebaut. Dazu
kommt die Funktionalität, die dahinter steht: Das alles ist durch Web-Components
für Web-Interface-Entwickler nun auch möglich. Und zwar bereits ab sofort, denn
das Polymer Framework für Web-Component Umsetzung bietet die neuen Technologien
cross-browser an.
Einige grundlegenden Dinge werden von Todd Motto und Peter in seiner
Artikel-Serie zum Thema noch mal ausführlicher beschrieben.
Wir diskutieren über die Anzahl der Dateien, die geladen werden müssen: Styles,
HTML, JS pro Component. Unsere Schlussfolgerung: dies wird nicht mehr all zu
wichtig sein, wenn man SPDY verwendet, da man besser Deltas als große Dateien
durchs Kabel jagt. Auch Probleme mit den Spezifikationen sprechen wir ans: Peter
vermisst bei Components beispielsweise das Responsive Web-Design und auch
sogenannte Element Queries fehlen noch. Des weiteren hat man zum Thema
Barrierefreiheit von Components auch noch nicht viel gehört.


[00:47:22] KEINE SCHAUNOTIZEN

THE SERVICEWORKER: THE NETWORK LAYER IS YOURS TO OWN

Ein lustiges Video, welches Service Worker näher erläutert.

„MERGE PULL REQUESTS“ CONSIDERED HARMFUL

Ein Artikel, der zu besseren Merging-Strategien rät, als den “Merge Pull
Request” Button auf GitHub zu verwenden.

HTTP/2

Schepps Präsentation zum Thema HTTP/2 und SPDY deckt so ziemlich die meisten
Fragen in diesem Context ab.

Revision 179: Web Components

<p>Das vorherrschende Sommerloch veranlasst die Working Draft Crew zu einer Spezialrevision: Peter, Anselm und Stefan geben sich in rekordverdächtigen 8 Minuten die Klinke in die Hand und klappern die Eckpfeiler unseres Newspodcasts ab, bevor wir die Tür und Tor für ein ausgedehntes Face To Face Gespräch rund um Ember.js öffnen. Dazu eingeladen sind Runtastic Mitarbeiter und Stahlstadt.js Organisatoren <a href="https://twitter.com/pangratz">Clemens Müller</a>, <a href="https://twitter.com/LevelBossMike">Michael Klein</a>, <a href="https://twitter.com/jakoblehner">Jakob Lehner</a> und <a href="https://twitter.com/manuel_mitasch">Manuel Mitasch</a>. Viel Spaß!</p>
<h3>[00:00:36] News</h3>
<dl>
<dt><a href="http://dev.opera.com/blog/opera-mini-8-for-ios/">Opera Mini auf iOS</a></dt>
<dd>Opera hat die neue Version ihres Mini-Browsers für iOS veröffentlicht und mit dem Turbo Mode ein neues, sehr spannendes Feature entworfen: Anstatt wie bislang die gesamte Seite auf den Presto-Servern des norwegischen Browserherstellers vorrendern zu lassen, kann man nun in unterschiedlichen Qualitätsstufen die Bilder reduzieren. JavaScript und CSS wird wie im hauseigenen Safari interpretiert.</dd>
</dl>
<h3>[00:02:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://jonibologna.com/a-look-at-preserveaspectratio-in-svg/">A Look At preserveAspectRatio in SVG</a></dt>
<dd>Sehr anschaulich und mit vielen Insights erklärt Joni Trythall wie man das Seitenverhältnis in SVG steuert.</dd>
<dt><a href="http://julian.com/research/velocity/">Velocity.js</a></dt>
<dd>Schneller als CSS3 und so komfortabel wie jQuery.animate? Velocity.js machts möglich.</dd>
<dt><a href="http://de.slideshare.net/igalia/blinkon2">Grid Layouts in CSS3</a></dt>
<dd>Sehr anschauliche und unmfassende Präsentation zu CSS3 Grid Layouts.</dd>
<dt><a href="http://www.2ality.com/2014/06/installable-web-apps.html">Installable Web Apps</a></dt>
<dd>JavaScript-Doktor Rauschmayr zeigt den aktuellen Status von installierbaren Web Applikationen unterschiedlichster Plattformen auf.</dd>
</dl>
<h3>[00:07:34] Ember.js Interview (Schaunotizen)</h3>
<dl>
<dt><a href="http://emberjs.com/">Ember.js</a></dt>
<dd>Nach dem letzten Linzer JavaScript Meetup &#8212; <strong><a href="http://www.meetup.com/stahlstadt-js/events/187301912/">stahlstadt.js</a></strong> &#8212; konnte Stefan die Organisatoren zu einer sehr ausführlichen Diskussion rund um das <a href="http://www.emberjs.com">Ember.js</a> Framework gewinnen. Wir erfahren, was Ember mit &#8222;ambitionierten Web-Applikationen&#8220; meint, welchen Zusammenhang es mit Ruby/Ruby on Rails gibt und welche Prinzipien hinter dem JavaScript Toolset stecken. Außerdem wird aus dem Nähkästchen geplaudert, wie Ember mit Hilfe der Community in die Administrationsoberfläche von <a href="http://ghost.io">Ghost</a> gewandert ist. Bei der nicht unbedingt flachen Lernkurve haben wir ausserdem noch eine Menge Tipps und Informationen für Einsteiger parat!</dd>
<h3>Ember.js Links</h3>
<dl>
<dt><a href="http://iamstef.net/ember-cli/">Ember-CLI</a></dt>
<dd>Ein ganz eigener Projektgenerator für Ember in Form einer hübschen Command Line.</dd>
<dt><a href="http://ember.codeschool.com/levels/1">Ember.js Codeschool</a></dt>
<dd>Zwar kostenpflichtig, aber laut Expertenmeinung immer noch der beste Kurs zu Ember.</dd>
<dt><a href="https://github.com/emberjs/ember.js/#how-to-run-unit-tests">Ember.js Unit Tests</a></dt>
<dd>Die Ember.js Unit Tests geben guten Einblick in die zahlreichen Features des Frameworks.</dd>
<dt><a href="https://www.youtube.com/watch?v=1QHrlFlaXdI">Ember.js Tutorial Video</a></dt>
<dd>Toller Einstieg, der einige Basisfeatures zeigt.</dd>
<dt><a href="http://emberjs.com/guides/getting-started/">Getting Started with Ember</a></dt>
<dd>So wünscht man es sich: Die offizielle Doku ist immer noch die Beste.</dd>
<dt><a href="http://dev.ghost.org/hello-ember/">Hello Ember</a></dt>
<dd>Wie und warum die Blogging-Plattform Ghost sich für Ember entschieden hat. Inklusive Link auf eine der <a href="https://github.com/TryGhost/Ghost/issues/2144">schönsten Github Diskussionen</a></dd>
</dl>


Das vorherrschende Sommerloch veranlasst die Working Draft Crew zu einer
Spezialrevision: Peter, Anselm und Stefan geben sich in rekordverdächtigen 8
Minuten die Klinke in die Hand und klappern die Ec…

Das vorherrschende Sommerloch veranlasst die Working Draft Crew zu einer
Spezialrevision: Peter, Anselm und Stefan geben sich in rekordverdächtigen 8
Minuten die Klinke in die Hand und klappern die Eckpfeiler unseres Newspodcasts
ab, bevor wir die Tür und Tor für ein ausgedehntes Face To Face Gespräch rund um
Ember.js öffnen. Dazu eingeladen sind Runtastic Mitarbeiter und Stahlstadt.js
Organisatoren Clemens Müller, Michael Klein, Jakob Lehner und Manuel Mitasch.
Viel Spaß!


[00:00:36] NEWS

OPERA MINI AUF IOS

Opera hat die neue Version ihres Mini-Browsers für iOS veröffentlicht und mit
dem Turbo Mode ein neues, sehr spannendes Feature entworfen: Anstatt wie bislang
die gesamte Seite auf den Presto-Servern des norwegischen Browserherstellers
vorrendern zu lassen, kann man nun in unterschiedlichen Qualitätsstufen die
Bilder reduzieren. JavaScript und CSS wird wie im hauseigenen Safari
interpretiert.


[00:02:00] KEINE SCHAUNOTIZEN

A LOOK AT PRESERVEASPECTRATIO IN SVG

Sehr anschaulich und mit vielen Insights erklärt Joni Trythall wie man das
Seitenverhältnis in SVG steuert.

VELOCITY.JS

Schneller als CSS3 und so komfortabel wie jQuery.animate? Velocity.js machts
möglich.

GRID LAYOUTS IN CSS3

Sehr anschauliche und unmfassende Präsentation zu CSS3 Grid Layouts.

INSTALLABLE WEB APPS

JavaScript-Doktor Rauschmayr zeigt den aktuellen Status von installierbaren Web
Applikationen unterschiedlichster Plattformen auf.


[00:07:34] EMBER.JS INTERVIEW (SCHAUNOTIZEN)

EMBER.JS

Nach dem letzten Linzer JavaScript Meetup — stahlstadt.js — konnte Stefan die
Organisatoren zu einer sehr ausführlichen Diskussion rund um das Ember.js
Framework gewinnen. Wir erfahren, was Ember mit „ambitionierten
Web-Applikationen“ meint, welchen Zusammenhang es mit Ruby/Ruby on Rails gibt
und welche Prinzipien hinter dem JavaScript Toolset stecken. Außerdem wird aus
dem Nähkästchen geplaudert, wie Ember mit Hilfe der Community in die
Administrationsoberfläche von Ghost gewandert ist. Bei der nicht unbedingt
flachen Lernkurve haben wir ausserdem noch eine Menge Tipps und Informationen
für Einsteiger parat!


EMBER.JS LINKS

EMBER-CLI

Ein ganz eigener Projektgenerator für Ember in Form einer hübschen Command Line.

EMBER.JS CODESCHOOL

Zwar kostenpflichtig, aber laut Expertenmeinung immer noch der beste Kurs zu
Ember.

EMBER.JS UNIT TESTS

Die Ember.js Unit Tests geben guten Einblick in die zahlreichen Features des
Frameworks.

EMBER.JS TUTORIAL VIDEO

Toller Einstieg, der einige Basisfeatures zeigt.

GETTING STARTED WITH EMBER

So wünscht man es sich: Die offizielle Doku ist immer noch die Beste.

HELLO EMBER

Wie und warum die Blogging-Plattform Ghost sich für Ember entschieden hat.
Inklusive Link auf eine der schönsten Github Diskussionen

Revision 178: Ember.js in der Stahlstadt

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 189: iOS 8 und ES6

Working Draft

Revision 188: AMCSS und Links

Working Draft

Revision 187: Arbeiten bei GitHub

Working Draft

Revision 186: RESTful API Design

Working Draft

Revision 185: JS Debuggingstrategien & Network Information API

Working Draft

Revision 184: Web Components Type Extension und Rework.css

Working Draft

Revision 183: Web Manifest Spec und Links

Working Draft

Revision 182: Agile Methoden, responsive Bilder und noch eine Verlosung

Working Draft

Revision 181: Module, Events, Verlosung

Working Draft

Revision 180: Media Queries und Web-Worker Analysen

Working Draft

Revision 179: Web Components

Working Draft

Revision 178: Ember.js in der Stahlstadt

Working Draft