<p>Rodney, Anselm, Schepp und Stefan trotzen sämtlichen Bahnproblemen und stellen Schlechtredner gnadenlos bloss. </p>
<h3>[00:00:18] News</h3>
<dl>
<dt><a href="https://dev.opera.com/blog/opera-mini-server-upgrade/">Opera Mini server upgrade</a></dt>
<dd>Operas Presto existiert tatsächlich noch. Und hat sogar ein Update erfahren: Auf den Render-Servern des Opera Mini. Flexbox, rem Einheiten und vieles mehr sind jetzt auch nun hier verfügbar.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:07] <a href="https://www.pandastrike.com/posts/20150311-react-bad-idea">React is a terrible idea</a></dt>
<dd>Kaum ein weiteres Pamphlet ging so viral wie Panda Strikes Äpfel und Birnen Vergleich zu React. Wir schütteln verbal Köpfe und zeigen deutlich, warum dieser Beitrag auf so vielen Twitter-Zeitleisten kam, und warum die eigentlichen Inhalte mehr schlecht als recht sind. Man hört schon in den Schaunotizen den allgemeinen Konsens heraus, wie wir zu dem Thema stehen, und hinterfragen kritisch und reflektiert diverse Punkte aus dem Schrieb.</dd>
</dl>
<h3>[00:46:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48">Lint like it&#8217;s 2015</a></dt>
<dd>ES6, Babel, ESLint? So geht&#8217;s.</dd>
<dt><a href="http://updates.html5rocks.com/2015/03/introduction-to-fetch">Introduction to fetch()</a></dt>
<dd>fetch() (a.k.a das native $.ajax) gibt&#8217;s nun in Chrome, der Artikel erklärt die Funktionsweise.</dd>
<dt><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the open web</a></dt>
<dd>Notification API und Web Push Notficiations jetzt in Chrome 42. Hier wird erklärt, wie man solche entwickelt.</dd>
<dt><a href="https://paul.kinlan.me/detecting-injected-content/">Detecting injected content from third-parties on your site</a></dt>
<dd>Der Titel sagt alles. Gute Sicherheitslehre von Paul Kinlan.</dd>
<dt><a href="http://valhead.com/2015/03/10/screencast-ui-animation-reviews-web-navigation/">UI Animation Reviews: Web Navigation</a></dt>
<dd>Wieder mal ein UX Thema. Von Val Head im Screencast.</dd>
</dl>


Rodney, Anselm, Schepp und Stefan trotzen sämtlichen Bahnproblemen und stellen
Schlechtredner gnadenlos bloss.


[00:00:18] NEWS

OPERA MINI SERVER UPGRADE

Operas Presto existiert tatsächlich noch. U…

Working Draft

Rodney, Anselm, Schepp und Stefan trotzen sämtlichen Bahnproblemen und stellen
Schlechtredner gnadenlos bloss.


[00:00:18] NEWS

OPERA MINI SERVER UPGRADE

Operas Presto existiert tatsächlich noch. Und hat sogar ein Update erfahren: Auf
den Render-Servern des Opera Mini. Flexbox, rem Einheiten und vieles mehr sind
jetzt auch nun hier verfügbar.


SCHAUNOTIZEN

[00:03:07] REACT IS A TERRIBLE IDEA

Kaum ein weiteres Pamphlet ging so viral wie Panda Strikes Äpfel und Birnen
Vergleich zu React. Wir schütteln verbal Köpfe und zeigen deutlich, warum dieser
Beitrag auf so vielen Twitter-Zeitleisten kam, und warum die eigentlichen
Inhalte mehr schlecht als recht sind. Man hört schon in den Schaunotizen den
allgemeinen Konsens heraus, wie wir zu dem Thema stehen, und hinterfragen
kritisch und reflektiert diverse Punkte aus dem Schrieb.


[00:46:40] KEINE SCHAUNOTIZEN

LINT LIKE IT’S 2015

ES6, Babel, ESLint? So geht’s.

INTRODUCTION TO FETCH()

fetch() (a.k.a das native $.ajax) gibt’s nun in Chrome, der Artikel erklärt die
Funktionsweise.

PUSH NOTIFICATIONS ON THE OPEN WEB

Notification API und Web Push Notficiations jetzt in Chrome 42. Hier wird
erklärt, wie man solche entwickelt.

DETECTING INJECTED CONTENT FROM THIRD-PARTIES ON YOUR SITE

Der Titel sagt alles. Gute Sicherheitslehre von Paul Kinlan.

UI ANIMATION REVIEWS: WEB NAVIGATION

Wieder mal ein UX Thema. Von Val Head im Screencast.

Revision 213: React is a Good Idea!

<p>HTML5, lange nach dem Hype. Was war gut, was weniger, was nutzen wir tatsächlich und wie hat sich die Weiterentwicklung geändert. Hans, Peter und Stefan resümieren.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:10] <a href="https://www.aeyoun.com/posts/html5-input-number-localization.html">HTML5 number inputs – Comma and period as decimal marks</a></dt>
<dd>Den Artikel über schwer lokalisierbare number-<code>&lt;input&gt;</code>s nehmen wir zum Anlass um über Erfolg und Misserfolg von HTML5 Technologien zu reden. Wo ging gewaltig was schief, welche Dinge sind passabel geraten. Wie schaut der Entwicklungsprozess heute aus und gefällt er uns? Kleiner Spoiler vorweg: Wir sind nicht sonderlich begeistert und haben dutzende Verbesserungsvorschläge, sehen aber gewissen Dingen positiv entgegen. Frage an die Hörerschaft: Welche HTML5 Technologien habt ihr regelmäßig und gut im Einsatz, wo seht ihr Verbesserungspotential? Zum Thema gehören: <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-inputmode">das <code>inputmode</code>-Attribut</a>, ein Video <a href="https://www.youtube.com/watch?v=l4bmZ1gRqCc">zu Zahlen</a> (ohne Graf) und <a href="http://skilldrick.co.uk/wp-content/uploads/2011/06/crockford.jpg">Douglas Crockford als Chuck Norris</a></dd>
<dt>[00:34:12] <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/2LXKVWYkOus">Intent to deprecate: Insecure usage of powerful features</a></dt>
<dd>Blink-Entwickler überlegen, Features wie Webcam, Geolocation, etc. nur noch über HTTPS zur Verfügung zu stellen. Eine Entwicklung, die wir begrüßen und entsprechend kritisch analysieren.</dd>
</dl>
<h3>[00:46:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a">List of pseudo elements</a></dt>
<dd>Vendor-prefixte Pseudo Elemente wollen wir nicht! Aber zu wissen, welche es für welche Hersteller es gibt, ist trotzdem eine gute Sache.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7">ngConf Videos</a></dt>
<dd>In der ersten Märzwoche fand die ngConf statt. Tolle Sachen sind dort passiert, und ein paar sehr lehrreiche Talks gabs auch. Alles dokumentiert auf YouTube.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PLE7tQUdRKcyacwiUPs0CjPYt6tJub4xXU">EmberConf Videos</a></dt>
<dd>Beinah selbe Zeit, anderes Framework. Nicht minder schlechter Inhalt. Hochwertige Keynote und sehr interessante Einblicke in die aktuelle Entwicklung rund um Ember.js.</dd>
<dt><a href="http://philipwalton.com/articles/side-effects-in-css/">Side Effects in CSS</a></dt>
<dd>Phil Walton bricht eine weitere Lanze für BEM.</dd>
<dt><a href="https://mango.github.io/slideout/">Slideout</a></dt>
<dd>Off Canvas Menü zum Dazuinstallieren? Und eines, das sogar funktioniert? Hans ist davon überzeugt.</dd>
</dl>


HTML5, lange nach dem Hype. Was war gut, was weniger, was nutzen wir tatsächlich
und wie hat sich die Weiterentwicklung geändert. Hans, Peter und Stefan
resümieren.


SCHAUNOTIZEN

[00:00:10] HTML5 NU…

HTML5, lange nach dem Hype. Was war gut, was weniger, was nutzen wir tatsächlich
und wie hat sich die Weiterentwicklung geändert. Hans, Peter und Stefan
resümieren.


SCHAUNOTIZEN

[00:00:10] HTML5 NUMBER INPUTS – COMMA AND PERIOD AS DECIMAL MARKS

Den Artikel über schwer lokalisierbare number-<input>s nehmen wir zum Anlass um
über Erfolg und Misserfolg von HTML5 Technologien zu reden. Wo ging gewaltig was
schief, welche Dinge sind passabel geraten. Wie schaut der Entwicklungsprozess
heute aus und gefällt er uns? Kleiner Spoiler vorweg: Wir sind nicht sonderlich
begeistert und haben dutzende Verbesserungsvorschläge, sehen aber gewissen
Dingen positiv entgegen. Frage an die Hörerschaft: Welche HTML5 Technologien
habt ihr regelmäßig und gut im Einsatz, wo seht ihr Verbesserungspotential? Zum
Thema gehören: das inputmode-Attribut, ein Video zu Zahlen (ohne Graf) und
Douglas Crockford als Chuck Norris

[00:34:12] INTENT TO DEPRECATE: INSECURE USAGE OF POWERFUL FEATURES

Blink-Entwickler überlegen, Features wie Webcam, Geolocation, etc. nur noch über
HTTPS zur Verfügung zu stellen. Eine Entwicklung, die wir begrüßen und
entsprechend kritisch analysieren.


[00:46:00] KEINE SCHAUNOTIZEN

LIST OF PSEUDO ELEMENTS

Vendor-prefixte Pseudo Elemente wollen wir nicht! Aber zu wissen, welche es für
welche Hersteller es gibt, ist trotzdem eine gute Sache.

NGCONF VIDEOS

In der ersten Märzwoche fand die ngConf statt. Tolle Sachen sind dort passiert,
und ein paar sehr lehrreiche Talks gabs auch. Alles dokumentiert auf YouTube.

EMBERCONF VIDEOS

Beinah selbe Zeit, anderes Framework. Nicht minder schlechter Inhalt.
Hochwertige Keynote und sehr interessante Einblicke in die aktuelle Entwicklung
rund um Ember.js.

SIDE EFFECTS IN CSS

Phil Walton bricht eine weitere Lanze für BEM.

SLIDEOUT

Off Canvas Menü zum Dazuinstallieren? Und eines, das sogar funktioniert? Hans
ist davon überzeugt.

Revision 212: HTML5 (Retro | Per)spektive

<p>Herr Rossi hat das Glück gefunden. In einem Spartaner. Jacob, seines Zeichens Project Manager bei Microsoft für den IE Nachfolger, erzählt ausführlich alles, was wir vom Projekt wissen wollten und uns nicht fragen trauten. Ab nun in Englisch:</p>
<div lang="en">
<h3>Shownotes</h3>
<dl>
<dt>[00:02:08] <a href="http://www.smashingmagazine.com/2015/01/26/inside-microsofts-new-rendering-engine-project-spartan/">Project Spartan</a></dt>
<dd>Jacob gives deep insights behind the strategy of Spartan, how it&#8217;s related to the Internet Explorer of old, and what we as web developers can expect from it. Included are: The difference between EdgeHTML and Trident, Enterprise Mode (not related to Leonard Nimoy) and <a href="http://www.winbuzzer.com/benchmark-deep-dive-microsoft-windows-10-spartan-browser-vs-ie11-vs-google-chrome-41-vs-mozilla-firefox-36/">overall performance discussion.</a></dd>
<dt>[00:44:49] <a href="https://webrtchacks.com/microsoft-room-ie-webrtc/">WebRTC and ORTC</a></dt>
<dd>Microsoft&#8217;s browser was still lacking a WebRTC implementation. This will change with Spartan, and more: We also will get the next level called &#8222;Object RTC&#8220;. Jacob explains what&#8217;s behind.</dd>
<dt>[00:47:45] <a href="https://dvcs.w3.org/hg/pointerevents/raw-file/tip/pointerEvents.html">Pointer Events vs Touch Events</a></dt>
<dd>Jacob not only is deeply involved in Project Spartan, but has also co-written the sublime and solid Pointer Events API. He explains how it came to fruition, and how Microsoft will behave with not having Apple on board. While the Working Draft crew is strongly ranting about Apple&#8217;s broken <a href="http://www.w3.org/TR/touch-events/#the-touchstart-event">Touch API</a>, Jacob calls Safari developers &#8222;nice guys&#8220; and tells how it came to reverse engineering the standard by the W3C and the implementation in Windows Phone.</dd>
<dt>[01:00:09] Vendor Prefixes and what could be their successor?</dt>
<dd>This also leads us to a discussion on vendor prefixes, which we all think are bad and should be avoided. Nevertheless, browser vendors need to test things. Jacob gives ideas. Nothing written in stone, tough</dd>
</dl>
</div>


Herr Rossi hat das Glück gefunden. In einem Spartaner. Jacob, seines Zeichens
Project Manager bei Microsoft für den IE Nachfolger, erzählt ausführlich alles,
was wir vom Projekt wissen wollten und uns…

Herr Rossi hat das Glück gefunden. In einem Spartaner. Jacob, seines Zeichens
Project Manager bei Microsoft für den IE Nachfolger, erzählt ausführlich alles,
was wir vom Projekt wissen wollten und uns nicht fragen trauten. Ab nun in
Englisch:


SHOWNOTES

[00:02:08] PROJECT SPARTAN

Jacob gives deep insights behind the strategy of Spartan, how it’s related to
the Internet Explorer of old, and what we as web developers can expect from it.
Included are: The difference between EdgeHTML and Trident, Enterprise Mode (not
related to Leonard Nimoy) and overall performance discussion.

[00:44:49] WEBRTC AND ORTC

Microsoft’s browser was still lacking a WebRTC implementation. This will change
with Spartan, and more: We also will get the next level called „Object RTC“.
Jacob explains what’s behind.

[00:47:45] POINTER EVENTS VS TOUCH EVENTS

Jacob not only is deeply involved in Project Spartan, but has also co-written
the sublime and solid Pointer Events API. He explains how it came to fruition,
and how Microsoft will behave with not having Apple on board. While the Working
Draft crew is strongly ranting about Apple’s broken Touch API, Jacob calls
Safari developers „nice guys“ and tells how it came to reverse engineering the
standard by the W3C and the implementation in Windows Phone.

[01:00:09] VENDOR PREFIXES AND WHAT COULD BE THEIR SUCCESSOR?

This also leads us to a discussion on vendor prefixes, which we all think are
bad and should be avoided. Nevertheless, browser vendors need to test things.
Jacob gives ideas. Nothing written in stone, tough

Revision 211: Project Spartan with Jacob Rossi

<p>Peter, Rodney, Hans und Anselm nahmen sich aktuelle Themen zum Anlass, mal ganz grundsätzlich die Lage rund um Webfonts (bescheiden) und JS-Module (kompliziert) auszudiskutieren.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:10] <a href="http://www.filamentgroup.com/lab/font-events.html">Font Loading Revisited with Font Events</a></dt>
<dd>Die Filament Group widmet sich in epischer Breite dem überaus kniffligen Problem des Webfont-Ladens. Da <code>@font-face</code> CSS bzw. das Rendering blockiert (mit unterschiedlichen Effekten in unterschiedlichen Browsern), gibt es zahllose Font-mit-JS-Lade-Techniken, die allesamt mehr oder minder Hacks sind. Es soll mal eine <a href="https://dev.opera.com/articles/better-font-face/">Font-Face-API</a> geben (<a href="https://github.com/zachleat/fontfaceonload">Polyfill</a>, <a href="https://github.com/bramstein/fontfaceobserver">Wrapper-Library</a>) doch eigentlich sind wir uns einig: hier liegt ein Browser- bzw. Spezifikations-Bug vor und die ganze JS-Hackerei ist äußerst unbefriedigend.</dd>
<dt>[00:15:45] JavaScript-Module</dt>
<dd><a href="http://blog.npmjs.org/post/111385956875/welcome-jquery-developers">Dichtmachung des jQuery-Plugin-Repositories</a> nehmen wir zum Anlass, ausführlich über JavaScript-Module (AMD vs. CommonJS vs. ES6) zu quatschen. Peter und Hans glauben dass es lange dauern wird bis ES6-Module in Browsern ankommen werden, sie aber dank <a href="https://github.com/esnext/es6-module-transpiler">Transpilern</a> schon schneller adaptiert werden könnten, wenn die Entwicklerschaft will. Warum sie das ggf. nicht unbedingt möchte, erkkärt Rodney aus seiner Enterpriseperspektive. Nur wenn er demnächst ein komplett neues Script basteln würde, könnte sich Rod die Nutzung von ES6-Module vorstellen, wenn er denn davon ausgehen kann, dass die Community solche Module in der Breite denn schon akzeptiert (was fraglich ist). Und natürlich ist keine Moduldiskussion komplett ohne einen Schwenk in dem Themenbereich Isomorphic JavaScript.</dd>
<h3>[00:52:22] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://codeascraft.com/2015/02/02/transitioning-to-scss-at-scale/">Transitioning to SCSS at Scale</a></dt>
<dd>Etsy hat seine bizarr gigantische CSS-Codebase auf SCSS transformiert und dabei einige bemerkenswerte Techniken zum Einsatz gebracht.</dd>
</dl>


Peter, Rodney, Hans und Anselm nahmen sich aktuelle Themen zum Anlass, mal ganz
grundsätzlich die Lage rund um Webfonts (bescheiden) und JS-Module (kompliziert)
auszudiskutieren.


SCHAUNOTIZEN

[00:0…

Peter, Rodney, Hans und Anselm nahmen sich aktuelle Themen zum Anlass, mal ganz
grundsätzlich die Lage rund um Webfonts (bescheiden) und JS-Module (kompliziert)
auszudiskutieren.


SCHAUNOTIZEN

[00:00:10] FONT LOADING REVISITED WITH FONT EVENTS

Die Filament Group widmet sich in epischer Breite dem überaus kniffligen Problem
des Webfont-Ladens. Da @font-face CSS bzw. das Rendering blockiert (mit
unterschiedlichen Effekten in unterschiedlichen Browsern), gibt es zahllose
Font-mit-JS-Lade-Techniken, die allesamt mehr oder minder Hacks sind. Es soll
mal eine Font-Face-API geben (Polyfill, Wrapper-Library) doch eigentlich sind
wir uns einig: hier liegt ein Browser- bzw. Spezifikations-Bug vor und die ganze
JS-Hackerei ist äußerst unbefriedigend.

[00:15:45] JAVASCRIPT-MODULE

Dichtmachung des jQuery-Plugin-Repositories nehmen wir zum Anlass, ausführlich
über JavaScript-Module (AMD vs. CommonJS vs. ES6) zu quatschen. Peter und Hans
glauben dass es lange dauern wird bis ES6-Module in Browsern ankommen werden,
sie aber dank Transpilern schon schneller adaptiert werden könnten, wenn die
Entwicklerschaft will. Warum sie das ggf. nicht unbedingt möchte, erkkärt Rodney
aus seiner Enterpriseperspektive. Nur wenn er demnächst ein komplett neues
Script basteln würde, könnte sich Rod die Nutzung von ES6-Module vorstellen,
wenn er denn davon ausgehen kann, dass die Community solche Module in der Breite
denn schon akzeptiert (was fraglich ist). Und natürlich ist keine
Moduldiskussion komplett ohne einen Schwenk in dem Themenbereich Isomorphic
JavaScript.


[00:52:22] KEINE SCHAUNOTIZEN

TRANSITIONING TO SCSS AT SCALE

Etsy hat seine bizarr gigantische CSS-Codebase auf SCSS transformiert und dabei
einige bemerkenswerte Techniken zum Einsatz gebracht.

Revision 210: Webfonts und JavaScript-Module

<p>In trauter Zweisamkeit diskutieren Stefan und Anselm über den Drang zu sechzig Frames pro Sekunde.</p>
<h3>[00:00:21] News</h3>
<dl>
<dt><a href="http://www.wearejh.com/news/browsersync-2-0/">Browsersync 2.0</a></dt>
<dd>Die neue Version des Entwicklertools kommt mit graphischer Oberfläche und verstärktem weinre Support.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:10] <a href="http://aerotwist.com/blog/flip-your-animations/">FLIP your animations</a></dt>
<dd>Geschwindigkeitsrausch: Paul Lewis stellt eine Micro Optimisation für CSS Transitions und Animations vor, und wir fragen uns nur: Warum gibt&#8217;s das nicht nativ in den Browsern? In der anschließenden Diskussion sprechen wir über Sinn und Unsinn dieser feingranularen Optimierungen und stehen für &#8222;nichts implementieren, was eigentlich schon so funktionieren sollte&#8220; ein.</dd>
<dt>[00:17:48] <a href="http://engineering.flipboard.com/2015/02/mobile-web/">60 fps on the mobile web</a></dt>
<dd>Da der DOM für Flipbook viel zu langsam war hat man kurzerhand mit Canvas und React das ganze Ding selbst implementiert (The Fast). Damit aber auch gleich einen massiven Shitstorm der Community ausgelöst (The Furious). Wir hinterfragen die Mutter dieses Gedanken, loben die Vielseitigkeit von React und analysieren ab welchem Zeitpunkt man mehr Probleme damit schafft als löst. Gegen Ende stehen wieder einmal für &#8222;nichts implementieren, was eigentlich schon so funktionieren sollte&#8220; ein und verweisen auf Chris Heilmanns <a href="http://christianheilmann.com/2015/02/15/flipboard-and-the-mobile-web-dream/">exzellenter Sicht der Dinge</a> zu diesem Thema.</dd>
<dt>[00:41:51] <a href="http://aaron-gustafson.com/notebook/css-variables-are-a-bad-idea/">CSS Variables are a bad idea</a></dt>
<dd>Aaron Gustafson schreibt den &#8222;considered harmful&#8220; Artikel der keiner sein möchte und spricht sich gegen CSS Variablen aus. Den Grundgedanken hinter seinen Überlegungen verstanden versucht Stefan allerdings zu missionieren: Sieht man die Spezifikation als Variablen im Sinne eines Präprozessors sollte man es wirklich besser bleiben lassen. Hat man allerdings den Scope der &#8222;CSS Custom Properties&#8220; (so wie sie eigentlich heißen) erkannt, hat man damit ein mächtiges Werkzeug in der Hand, für das es viele ungelöste Use Cases gibt. Vorsicht sei geboten bei Poylfills wie <a href="http://pleeease.io/">Pleeease</a>. Wenn man&#8217;s wirklich meint, lassen sich CSS Custom Properties nicht polyfillen, ohne massiv Browserfeatures nach zu implementieren. Und wir wissen ja, dass wir &#8222;nichts implementieren, was eigentlich so funtionieren sollte&#8220;. Ein Hinweis auf Rodneys <a href="http://blog.rodneyrehm.de/archives/30-CSS-Polyfill-Preprocessor-Its-A-Myth.html">Artikel zu dem Thema</a> aus dem Jahr 2013 sei noch einmal sehr ans Herz gelegt.</dd>
</dl>
<h3>[00:56:39] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.smashingmagazine.com/2015/02/05/designing-digital-technology-for-the-elderly/">Designing for the Elderly</a></dt>
<dd>Worauf man achten muss, wenn man für ältere Menschen designed. Guter Artikel auf Smashing Magazine.</dd>
<dt><a href="http://www.pluminjs.com/">Plumin.js</a></dt>
<dd>Schreib dir deinen eigenen Webfont mit einer pfiffigen JavaScript API. Wir sagen nur Wow!</dd>
<dt><a href="http://fettblog.eu/revisiting-less-stylesheets/">Revisiting LESS</a></dt>
<dd>Als Sass User schreibt Stefan über seine Erfahrungen mit der zwangsbeglückten Nutzung von LESS. Die herausragenden Features scheinen banal, sind aber am Ende die, die am glücklichsten machen.</dd>
</dl>


In trauter Zweisamkeit diskutieren Stefan und Anselm über den Drang zu sechzig
Frames pro Sekunde.


[00:00:21] NEWS

BROWSERSYNC 2.0

Die neue Version des Entwicklertools kommt mit graphischer Oberfl…

In trauter Zweisamkeit diskutieren Stefan und Anselm über den Drang zu sechzig
Frames pro Sekunde.


[00:00:21] NEWS

BROWSERSYNC 2.0

Die neue Version des Entwicklertools kommt mit graphischer Oberfläche und
verstärktem weinre Support.


SCHAUNOTIZEN

[00:03:10] FLIP YOUR ANIMATIONS

Geschwindigkeitsrausch: Paul Lewis stellt eine Micro Optimisation für CSS
Transitions und Animations vor, und wir fragen uns nur: Warum gibt’s das nicht
nativ in den Browsern? In der anschließenden Diskussion sprechen wir über Sinn
und Unsinn dieser feingranularen Optimierungen und stehen für „nichts
implementieren, was eigentlich schon so funktionieren sollte“ ein.

[00:17:48] 60 FPS ON THE MOBILE WEB

Da der DOM für Flipbook viel zu langsam war hat man kurzerhand mit Canvas und
React das ganze Ding selbst implementiert (The Fast). Damit aber auch gleich
einen massiven Shitstorm der Community ausgelöst (The Furious). Wir hinterfragen
die Mutter dieses Gedanken, loben die Vielseitigkeit von React und analysieren
ab welchem Zeitpunkt man mehr Probleme damit schafft als löst. Gegen Ende stehen
wieder einmal für „nichts implementieren, was eigentlich schon so funktionieren
sollte“ ein und verweisen auf Chris Heilmanns exzellenter Sicht der Dinge zu
diesem Thema.

[00:41:51] CSS VARIABLES ARE A BAD IDEA

Aaron Gustafson schreibt den „considered harmful“ Artikel der keiner sein möchte
und spricht sich gegen CSS Variablen aus. Den Grundgedanken hinter seinen
Überlegungen verstanden versucht Stefan allerdings zu missionieren: Sieht man
die Spezifikation als Variablen im Sinne eines Präprozessors sollte man es
wirklich besser bleiben lassen. Hat man allerdings den Scope der „CSS Custom
Properties“ (so wie sie eigentlich heißen) erkannt, hat man damit ein mächtiges
Werkzeug in der Hand, für das es viele ungelöste Use Cases gibt. Vorsicht sei
geboten bei Poylfills wie Pleeease. Wenn man’s wirklich meint, lassen sich CSS
Custom Properties nicht polyfillen, ohne massiv Browserfeatures nach zu
implementieren. Und wir wissen ja, dass wir „nichts implementieren, was
eigentlich so funtionieren sollte“. Ein Hinweis auf Rodneys Artikel zu dem Thema
aus dem Jahr 2013 sei noch einmal sehr ans Herz gelegt.


[00:56:39] KEINE SCHAUNOTIZEN

DESIGNING FOR THE ELDERLY

Worauf man achten muss, wenn man für ältere Menschen designed. Guter Artikel auf
Smashing Magazine.

PLUMIN.JS

Schreib dir deinen eigenen Webfont mit einer pfiffigen JavaScript API. Wir sagen
nur Wow!

REVISITING LESS

Als Sass User schreibt Stefan über seine Erfahrungen mit der zwangsbeglückten
Nutzung von LESS. Die herausragenden Features scheinen banal, sind aber am Ende
die, die am glücklichsten machen.

Revision 209: Geschwindigkeitsrausch

<p>Einen Dialekt im Team (bestehend aus Hans, Peter, Anselm und Stefan), zig Dialekte in unserer Themenliste.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28] JavaScript Dialekte</dt>
<dd>
Wir nehmen den jüngsten Artikel des Doktors zu <a href="http://www.2ality.com/2015/02/soundscript.html?m=1">Googles SoundScript</a> zum Anlass mal generell über JavaScript Dialekte und deren Sinnhaftigkeit bzw. -losigkeit zu reden. Wir erkennen, dass SoundScript etwas ganz anderes vorhat als Googles andere Dialekte wie <a href="https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit">AtScript</a> und mit der zwingenden VM-Unterstützung wohl weiterhin Nische bleiben wird. </p>
<p>Bei der Diskussion zu Dialekten und statischer Typisierung ebenso im Programm: <a href="http://www.peterkroener.de/typescript-teil-2-die-einordnung/">TypeScript</a>, <a href="http://coffeescript.org/">CoffeeScript</a>, Facebook&#8217;s Typechecker <a href="http://www.peterkroener.de/kurz-ausprobiert-flow-statischer-typchecker-javascript/">Flow</a>, sowie der ursprüngliche und eingestampfte Versuch von EcmaScript in der <a href="http://www.ecmascript.org/es4/spec/overview.pdf">Zombie-Version 4</a>.</p>
<p>Sämtliche Themen in Union finden sich dann in einem anschließenden Review zu EcmaScript 6 und den Möglichkeiten mit <a href="https://github.com/jlongster/es6-macros">SweetJS</a> und <a href="https://babeljs.io/">6to5</a> (jetzt BabelJS). Mit der unausweichlichen Frage: Werden wir das überhaupt nutzen?</p>
<p>Gegen Ende brechen wir allerdings eine Lanze für <a href="https://facebook.github.io/react/">ReactJS</a> (und den damit verbundenen <a href="https://facebook.github.io/jsx/">JSX</a> Dialekt): Sieht auf den ersten Blick etwas abstoßend aus, macht aber Spaß.
</dd>
</dl>
<h3>[00:41:18] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/phanan/htaccess">htaccess Snippets</a></dt>
<dd>Mal wieder was für Apache konfigurieren? Hier gibt&#8217;s Rezepte. Gibt&#8217;s ebenso vom <a href="https://github.com/h5bp/server-configs">HTML5 Boilerplate</a> für verschiedene Servertypen.</dd>
<dt><a href="http://timkadlec.com/2015/02/client-side-templatings-major-bug/">Client-side templating&#8217;s major bug</a></dt>
<dd>Tim Kadlec beschreibt seine sehr interessante Sicht bez. Client-side Templating.</dd>
<dt><a href="https://github.com/AlloyTeam/Mars/blob/master/tools/es5-mobile-compat-table.md">EcmaScript 5 compatibilty table</a></dt>
<dd>Für mittlerweile ausrangierte Browser.</dd>
<dt><a href="http://alistapart.com/article/reframing-accessibility-for-the-web">Reframing Accessibilty for the Web</a></dt>
<dd>Accessibility hat nicht zwingend mit Behinderungen zu tun. Der Artikel von A List Apart klärt gut auf.</dd>
<dt><a href="http://tympanus.net/codrops/2015/02/03/introducing-codrops-css-reference/">Codrops CSS Reference</a></dt>
<dd>Sehr umfangreiche und mit vielen, vielen Beispielen ausgestattete CSS Referenz von Sara Soueidan.</dd>
</dl>


Einen Dialekt im Team (bestehend aus Hans, Peter, Anselm und Stefan), zig
Dialekte in unserer Themenliste.


SCHAUNOTIZEN

[00:00:28] JAVASCRIPT DIALEKTE

Wir nehmen den jüngsten Artikel des Doktors z…

Einen Dialekt im Team (bestehend aus Hans, Peter, Anselm und Stefan), zig
Dialekte in unserer Themenliste.


SCHAUNOTIZEN

[00:00:28] JAVASCRIPT DIALEKTE

Wir nehmen den jüngsten Artikel des Doktors zu Googles SoundScript zum Anlass
mal generell über JavaScript Dialekte und deren Sinnhaftigkeit bzw. -losigkeit
zu reden. Wir erkennen, dass SoundScript etwas ganz anderes vorhat als Googles
andere Dialekte wie AtScript und mit der zwingenden VM-Unterstützung wohl
weiterhin Nische bleiben wird.



Bei der Diskussion zu Dialekten und statischer Typisierung ebenso im Programm:
TypeScript, CoffeeScript, Facebook’s Typechecker Flow, sowie der ursprüngliche
und eingestampfte Versuch von EcmaScript in der Zombie-Version 4.

Sämtliche Themen in Union finden sich dann in einem anschließenden Review zu
EcmaScript 6 und den Möglichkeiten mit SweetJS und 6to5 (jetzt BabelJS). Mit der
unausweichlichen Frage: Werden wir das überhaupt nutzen?

Gegen Ende brechen wir allerdings eine Lanze für ReactJS (und den damit
verbundenen JSX Dialekt): Sieht auf den ersten Blick etwas abstoßend aus, macht
aber Spaß.


[00:41:18] KEINE SCHAUNOTIZEN

HTACCESS SNIPPETS

Mal wieder was für Apache konfigurieren? Hier gibt’s Rezepte. Gibt’s ebenso vom
HTML5 Boilerplate für verschiedene Servertypen.

CLIENT-SIDE TEMPLATING’S MAJOR BUG

Tim Kadlec beschreibt seine sehr interessante Sicht bez. Client-side Templating.

ECMASCRIPT 5 COMPATIBILTY TABLE

Für mittlerweile ausrangierte Browser.

REFRAMING ACCESSIBILTY FOR THE WEB

Accessibility hat nicht zwingend mit Behinderungen zu tun. Der Artikel von A
List Apart klärt gut auf.

CODROPS CSS REFERENCE

Sehr umfangreiche und mit vielen, vielen Beispielen ausgestattete CSS Referenz
von Sara Soueidan.

Revision 208: JavaScript Dialekte

<p>Mit Ehrengast <a href="http://michael-kuehnel.de/">Michael Kühnel</a> (<a href="https://twitter.com/mkuehnel">@mkuehnel</a>, Selbstbeschreibung „Webentwickler seit seit Netscape 4.7“) ackerten sich Schepp, Hans, Peter und Stefan durch die Themen der Woche.</p>
<h3>[00:02:22] News</h3>
<dl>
<dt><a href="https://github.com/h5bp/html5-boilerplate/blob/v5.0.0/CHANGELOG.md">HTML5 Boilerplate 5.0</a></dt>
<dd>Die neueste Version des allseits beliebten Webseiten-Starterkits.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:54] <a href="http://6to5.org/blog/2015/01/27/2to3/">6to5, 2to3</a></dt>
<dd>Der neueste ES6-Transpiler im Hype-Durchlauferhitzer ist aktuell <a href="http://6to5.org/">6to5</a>, laut der <a href="https://kangax.github.io/compat-table/es6/">ECMAScript 6 compatibility table</a> mit der größten Feature-Abdeckung überhaupt. Nachdem Hans eine mäßig steile ES6-These in den Raum geworfen hat, beginnt ein unausgeschlafener Peter über alles mögliche aus dem ES6-Dunstkreis (v.a. Klassen und die <a href="https://github.com/addyosmani/es6-tools">diversen Tools und Transpiler</a>) abzuranten. Zentrale Aussage: so viel wird sich für Otto Normalentwickler gar nicht ändern, dann die meisten Features einer Programmiersprache benutzt man in 90% der Fälle eh nicht.</dd>
<dt>[00:37:30] <a href="http://yeoman.io/">Yeoman</a></dt>
<dd>Michael ist Yeoman-Fan und lässt seiner Begeisterung freien Lauf. Vor allem wirbt er dafür, eigene Generatoren zu bauen, was mit Hilfe der <a href="http://yeoman.io/authoring/">Docs</a> und dem <a href="https://github.com/yeoman/generator-generator">Yeoman-Generator für Yeoman-Generatoren</a> (yo dawg) auch ganz einfach ist. Mit <a href="https://github.com/SBoudrias/Inquirer.js">Inquirer.js</a> wird Prompting einfach und auch <a href="http://yeoman.io/authoring/testing.html">testen</a> ist ganz einfach. Selbst Generators für WordPress und Typo3 sollen in freier Wildbahn gesichtet worden sein.</dd>
</dl>
<h3>[00:57:19] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://formatjs.io/">FormatJS</a></dt>
<dd>Diverse JavaScript-Libs um Daten nutzerfreundlich zu formatieren.</dd>
<dt><a href="http://engineering.pinterest.com/post/109318939139/demystifying-seo-with-experiments">Making Pinterest — Demystifying SEO with experiments</a></dt>
<dd>Die wissenschaftliche Methodik (est. 1700) erreicht Pinterest bzw. Suchmaschinenoptimierer. Das ist schon eine Meldung wert!</dd>
<dt><a href="http://devdocs.io/">Devdocs.io</a></dt>
<dd>Die Webdev-Dokumentations-Metasuchmaschine ist jetzt offlinefähig!</dd>
</dl>
<h3>[01:01:28] Jobbörse</h3>
<dl>
<dt><a href="http://www.micromata.de/karriere/jobs.html">Software-Entwickler in Kassel gesucht</a></dt>
<dd>Michaels Firma (Softwarehaus mit Sitz in Kassel und Bonn) sucht fähige Entwickler &#8211; vom Frontendler bis hin zum Java-Guru.</dd>
</dl>


Mit Ehrengast Michael Kühnel (@mkuehnel, Selbstbeschreibung „Webentwickler seit
seit Netscape 4.7“) ackerten sich Schepp, Hans, Peter und Stefan durch die
Themen der Woche.


[00:02:22] NEWS

HTML5 BO…

Mit Ehrengast Michael Kühnel (@mkuehnel, Selbstbeschreibung „Webentwickler seit
seit Netscape 4.7“) ackerten sich Schepp, Hans, Peter und Stefan durch die
Themen der Woche.


[00:02:22] NEWS

HTML5 BOILERPLATE 5.0

Die neueste Version des allseits beliebten Webseiten-Starterkits.


SCHAUNOTIZEN

[00:02:54] 6TO5, 2TO3

Der neueste ES6-Transpiler im Hype-Durchlauferhitzer ist aktuell 6to5, laut der
ECMAScript 6 compatibility table mit der größten Feature-Abdeckung überhaupt.
Nachdem Hans eine mäßig steile ES6-These in den Raum geworfen hat, beginnt ein
unausgeschlafener Peter über alles mögliche aus dem ES6-Dunstkreis (v.a. Klassen
und die diversen Tools und Transpiler) abzuranten. Zentrale Aussage: so viel
wird sich für Otto Normalentwickler gar nicht ändern, dann die meisten Features
einer Programmiersprache benutzt man in 90% der Fälle eh nicht.

[00:37:30] YEOMAN

Michael ist Yeoman-Fan und lässt seiner Begeisterung freien Lauf. Vor allem
wirbt er dafür, eigene Generatoren zu bauen, was mit Hilfe der Docs und dem
Yeoman-Generator für Yeoman-Generatoren (yo dawg) auch ganz einfach ist. Mit
Inquirer.js wird Prompting einfach und auch testen ist ganz einfach. Selbst
Generators für WordPress und Typo3 sollen in freier Wildbahn gesichtet worden
sein.


[00:57:19] KEINE SCHAUNOTIZEN

FORMATJS

Diverse JavaScript-Libs um Daten nutzerfreundlich zu formatieren.

MAKING PINTEREST — DEMYSTIFYING SEO WITH EXPERIMENTS

Die wissenschaftliche Methodik (est. 1700) erreicht Pinterest bzw.
Suchmaschinenoptimierer. Das ist schon eine Meldung wert!

DEVDOCS.IO

Die Webdev-Dokumentations-Metasuchmaschine ist jetzt offlinefähig!


[01:01:28] JOBBÖRSE

SOFTWARE-ENTWICKLER IN KASSEL GESUCHT

Michaels Firma (Softwarehaus mit Sitz in Kassel und Bonn) sucht fähige
Entwickler – vom Frontendler bis hin zum Java-Guru.

Revision 207: 6to5, Yeoman, Links

<p>Ganz unverhofft gesellte sich diese Revision der gute <a href="https://twitter.com/codepo8">Chris Heilmann</a> auf einen Plauderabend zu uns.</p>
<h3>[00:00:45] News</h3>
<dl>
<dt><a href="https://twitter.com/saambarati/status/558740930501419008">&#8222;WebKit&#8217;s JavaScriptCore and Web Inspector now have a code coverage profiler that tells you what JS code has executed&#8220;</a></dt>
<dd>Die News der Woche ist dieses neue Feature des kommenden Safari bzw. des jetzigen WebKit-Nightlys, mit Hilfe dessen man ungenutzte Code-Stellen in seinem JavaScript ausfindig machen kann.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:02] <a href="http://updates.html5rocks.com/2015/01/ES6-Template-Strings">ES6 Template Strings</a></dt>
<dd>Die neuen ESCMAScript 6/2015 Template Strings erlauben in ihren Backticks viele neue String-Spielereien, wie etwa Multiline-Strings, Variablen-Ersetzung innerhalb des Strings, Filterung und Internationalisierung. Mit dem Browsersupport sieht es leider <a href="http://kangax.github.io/compat-table/es6/#template_strings">noch nicht so gut aus</a>, aber es gibt Transpiler und Polyfills dafür.</dd>
<dt>[00:17:25] <a href="http://christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/">Chris Heilmann geht zu Microsoft</a></dt>
<dd>Dass für Chris bei Mozilla die Luft ein wenig raus war, war ja bekannt. Dass er jetzt zu Microsoft geht war hingegen ein ganz schöne Überraschung (<a href="http://aaron-gustafson.com/notebook/ch-ch-ch-changes/">Aaron Gustafson übrigens ebenfalls</a>). Wir sprachen mit Chris über seine Zeit bei Mozilla und seine Aufgaben und Pläne im neuen Job. Außerdem durfte auch <a href="http://www.smashingmagazine.com/2015/01/26/inside-microsofts-new-rendering-engine-project-spartan/">Microsofts Spartan Browser</a> in unserer Diskussion nicht fehlen.</dd>
</dl>
<h3>[01:06:42] Erkenntnis der Woche</h3>
<dl>
<dt><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c2">display: flex doesn&#8217;t work for button elements</a></dt>
<dd>Rodney erzählt von seinen erfolglosen Versuchen, die Firefox-Buttons in eine Flexbox-Konstruktion zu zwängen. Er erzählt uns außerdem, warum das alles sowas von nicht funktioniert und welchen Workaround-Joker man erfolgreich ziehen kann.</dd>
</dl>
<h3>[01:17:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b">JavaScript Application Architecture On The Road To 2015</a></dt>
<dd>Addy Osmani legt uns seine Sicht auf die JavaScript-Architektur des Jahres 2015 in einem ellenlangen Artikel dar. Lesenswert!</dd>
<dt><a href="http://alistapart.com/article/a-vision-for-our-sass">A Vision for Our Sass</a></dt>
<dd>Felicity Evans formuliert und erklärt in diesem ALA-Artikel Ihr Manifest für guten SASS-Code-Stil. Gehen wir sehr mit d&#8217;accord!</dd>
<dt><a href="http://sarasoueidan.com/blog/svgo-tools/">Useful SVGO[ptimization] Tools</a></dt>
<dd>Sara Soueidan bietet hier ein kleines Roundup an verschiedenen GUIs und Ausprägungen des SVG-Optimierers <a href="https://github.com/svg/svgo">SVGO</a> auf. Gutes Thema!</dd>
<dt><a href="http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/">Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr</a></dt>
<dd>Zoltan “Du Lac” Hawryluk, Urgestein der Webszene, widmet sich der Frage, welche Vorzüge die verschiedenen exotischeren Bildformate abseits von JPEG haben und wie man sie im Alltag einsetzen kann. Erschöpfend, gut!</dd>
</dl>


Ganz unverhofft gesellte sich diese Revision der gute Chris Heilmann auf einen
Plauderabend zu uns.


[00:00:45] NEWS

„WEBKIT’S JAVASCRIPTCORE AND WEB INSPECTOR NOW HAVE A CODE COVERAGE PROFILER
THAT…

Ganz unverhofft gesellte sich diese Revision der gute Chris Heilmann auf einen
Plauderabend zu uns.


[00:00:45] NEWS

„WEBKIT’S JAVASCRIPTCORE AND WEB INSPECTOR NOW HAVE A CODE COVERAGE PROFILER
THAT TELLS YOU WHAT JS CODE HAS EXECUTED“

Die News der Woche ist dieses neue Feature des kommenden Safari bzw. des
jetzigen WebKit-Nightlys, mit Hilfe dessen man ungenutzte Code-Stellen in seinem
JavaScript ausfindig machen kann.


SCHAUNOTIZEN

[00:03:02] ES6 TEMPLATE STRINGS

Die neuen ESCMAScript 6/2015 Template Strings erlauben in ihren Backticks viele
neue String-Spielereien, wie etwa Multiline-Strings, Variablen-Ersetzung
innerhalb des Strings, Filterung und Internationalisierung. Mit dem
Browsersupport sieht es leider noch nicht so gut aus, aber es gibt Transpiler
und Polyfills dafür.

[00:17:25] CHRIS HEILMANN GEHT ZU MICROSOFT

Dass für Chris bei Mozilla die Luft ein wenig raus war, war ja bekannt. Dass er
jetzt zu Microsoft geht war hingegen ein ganz schöne Überraschung (Aaron
Gustafson übrigens ebenfalls). Wir sprachen mit Chris über seine Zeit bei
Mozilla und seine Aufgaben und Pläne im neuen Job. Außerdem durfte auch
Microsofts Spartan Browser in unserer Diskussion nicht fehlen.


[01:06:42] ERKENNTNIS DER WOCHE

DISPLAY: FLEX DOESN’T WORK FOR BUTTON ELEMENTS

Rodney erzählt von seinen erfolglosen Versuchen, die Firefox-Buttons in eine
Flexbox-Konstruktion zu zwängen. Er erzählt uns außerdem, warum das alles sowas
von nicht funktioniert und welchen Workaround-Joker man erfolgreich ziehen kann.


[01:17:40] KEINE SCHAUNOTIZEN

JAVASCRIPT APPLICATION ARCHITECTURE ON THE ROAD TO 2015

Addy Osmani legt uns seine Sicht auf die JavaScript-Architektur des Jahres 2015
in einem ellenlangen Artikel dar. Lesenswert!

A VISION FOR OUR SASS

Felicity Evans formuliert und erklärt in diesem ALA-Artikel Ihr Manifest für
guten SASS-Code-Stil. Gehen wir sehr mit d’accord!

USEFUL SVGO[PTIMIZATION] TOOLS

Sara Soueidan bietet hier ein kleines Roundup an verschiedenen GUIs und
Ausprägungen des SVG-Optimierers SVGO auf. Gutes Thema!

USING WEBP/JPEG 2000/JPEG-XR/APNG NOW WITH PICTUREFILL AND MODERNIZR

Zoltan “Du Lac” Hawryluk, Urgestein der Webszene, widmet sich der Frage, welche
Vorzüge die verschiedenen exotischeren Bildformate abseits von JPEG haben und
wie man sie im Alltag einsetzen kann. Erschöpfend, gut!

Revision 206: ES6 Template Strings, Jobwechsel, Spartan

<p>Zur 205. begrüßen Anselm und Stefan Schrödingers Co-Host (ist er aktiv, ist er es nicht?) Kahlil Lechelt wieder im virtuellen Studio. Die (Wieder-)Entdeckung eines vielversprechenden Frameworks hat ihn zurückgerufen.</p>
<h3>[00:01:03] News</h3>
<dl>
<dt><a href="http://blog.risingstack.com/iojs-overview/">IO.js</a></dt>
<dd>Node.js ohne Node.js? Ein Open Source Fork der JavaScript-Umgebung beschäftigt die Szene. Dieser Beitrag klärt auf.</dd>
<dt><a href="https://developer.mozilla.org/en-US/Firefox/Releases/35">Firefox 35</a></dt>
<dd>Allerlei sinnvolle Neuerungen in der 35er Version des Fuches.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:04:40] <a href="https://github.com/whatwg/fetch/issues/19">Perceived Performance &#038; fetch()</a></dt>
<dd>Folgender Gedankengang: Ein <a href="https://www.npmjs.com/package/whatwg-fetch">Polyfill</a> zum kommenden <code>fetch</code>-Befehl wird veröffentlicht und kommt gut an (in Kürze: verdauliches XHR mit Promies). Ein gewisser Steve Souders bringt seine Meinung, dass es doch ideal wäre mit diesem Standard auch Ladebalken steuern zu lassen, um dem User eine gewisse Geschwindigkeit anzuzeigen, oder im schlimmsten Fall vorzugaukeln. Hat bei <a href="http://calendar.perfplanet.com/2014/the-power-of-perceived-performance/">eBay</a> ja auch gut funktioniert. Wir sprechen &#8212; im Vorgaukel-Falle &#8212; von unseren eigenen Erfahrungen und überlegen, wie so ein Standard ideal aussehen könnte.</dd>
<dt>[00:26:46] <a href="http://ampersandjs.com/">Ampersand.js</a></dt>
<dd>Aufgepumptes Backbone.js mit saftiger Tool-Chain im Hintergrund? Kahlil hat Ampersand für sich entdeckt und schwärmt uns im Beinah-Monolog entsprechend vor. Wer damit noch nichts zu tun hatte bisher, und sich nicht irgendwelchen Hype-Frameworks verschrieben hat, sollte durchaus einen längeren Blick darauf werfen. Ebenso erwähnt: <a href="http://jade-lang.com/">Jade</a> als Templating-Language und das Buch der AmpersandJS Entwickler <a href="http://humanjavascript.com/">Human Javascript</a>.</dd>
</dl>
<h3>[00:55:18] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/tiimgreen/github-cheat-sheet">GitHub Cheat Sheet</a></dt>
<dd>Was mit Git und GitHub doch alles möglich ist. Tolle Kniffe, die oft unentdeckt bleiben.</dd>
</dl>


Zur 205. begrüßen Anselm und Stefan Schrödingers Co-Host (ist er aktiv, ist er
es nicht?) Kahlil Lechelt wieder im virtuellen Studio. Die (Wieder-)Entdeckung
eines vielversprechenden Frameworks hat ih…

Zur 205. begrüßen Anselm und Stefan Schrödingers Co-Host (ist er aktiv, ist er
es nicht?) Kahlil Lechelt wieder im virtuellen Studio. Die (Wieder-)Entdeckung
eines vielversprechenden Frameworks hat ihn zurückgerufen.


[00:01:03] NEWS

IO.JS

Node.js ohne Node.js? Ein Open Source Fork der JavaScript-Umgebung beschäftigt
die Szene. Dieser Beitrag klärt auf.

FIREFOX 35

Allerlei sinnvolle Neuerungen in der 35er Version des Fuches.


SCHAUNOTIZEN

[00:04:40] PERCEIVED PERFORMANCE & FETCH()

Folgender Gedankengang: Ein Polyfill zum kommenden fetch-Befehl wird
veröffentlicht und kommt gut an (in Kürze: verdauliches XHR mit Promies). Ein
gewisser Steve Souders bringt seine Meinung, dass es doch ideal wäre mit diesem
Standard auch Ladebalken steuern zu lassen, um dem User eine gewisse
Geschwindigkeit anzuzeigen, oder im schlimmsten Fall vorzugaukeln. Hat bei eBay
ja auch gut funktioniert. Wir sprechen — im Vorgaukel-Falle — von unseren
eigenen Erfahrungen und überlegen, wie so ein Standard ideal aussehen könnte.

[00:26:46] AMPERSAND.JS

Aufgepumptes Backbone.js mit saftiger Tool-Chain im Hintergrund? Kahlil hat
Ampersand für sich entdeckt und schwärmt uns im Beinah-Monolog entsprechend vor.
Wer damit noch nichts zu tun hatte bisher, und sich nicht irgendwelchen
Hype-Frameworks verschrieben hat, sollte durchaus einen längeren Blick darauf
werfen. Ebenso erwähnt: Jade als Templating-Language und das Buch der
AmpersandJS Entwickler Human Javascript.


[00:55:18] KEINE SCHAUNOTIZEN

GITHUB CHEAT SHEET

Was mit Git und GitHub doch alles möglich ist. Tolle Kniffe, die oft unentdeckt
bleiben.

Revision 205: Perceived Performance, Ampersand.js

<p>Wer keine spannenden Themen hat, muss eben selbst spannend sein. Und so grillten Hans, Peter, Stefan und Anselm Fokus-Forscher Rodney zu seinen neuesten Forschungsergebnissen und wärmten kurz (und ohne nennenswerten Erkenntnisgewinn) die große Build-Tool-Debatte wieder auf.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:15] Neues von der Fokus-Front</dt>
<dd>Nach seinem ersten Bericht in <a href="http://workingdraft.de/198/">Revision 198</a> meldet sich Rodney wieder zu Wort und berichtet von neuen Erkenntnissen aus seinem Fokus-Forschungs-Projekt, speziell von neuen Erkenntnissen rund um Shadow DOM, <a href="http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-dialog-element"><code>&lt;dialog&gt;</code></a>, Canvas-Element und <code>&lt;video&gt;</code>. Letzteres ist interessanterweise je nach Browser unterschiedlich zu bedienen. Tabindex in Shadow DOM funktioniert in Chrome auf sinnvolle Weise, ist in Firefox (wie auch der Rest von Shadow DOM) noch buggy. In <code>&lt;dialog&gt;</code> wirken sich die bekannten Probleme von Image Maps verwirrend aus. Die Fokussierbarkeit von Canvas-Subtrees könnte für <a href="http://n12v.com/focus-transition/">Focus Transitions</a> genutzt werden. Aus Rodneys bisherigen Erkenntnissen lassen sich drei Empfehlungen ableiten:</p>
<ol>
<li>Repariert Browser-Bugs mit <a href="https://github.com/medialize/ally.js">Rodneys Scriptsammlung</a></li>
<li>niemals positiven <code>tabindex</code> benutzen, nur <code>0</code> und <code>-1</code> sind brauchbare Werte</li>
<li>niemals <code>accesskey</code> benutzen</li>
</ol>
<p>Als nächste Themen wird sich Rodney blutige SVG-Details sowie fokus-relevante Pseudoklassen (<code>:focus</code>, <code>:active</code> etc) zur Brust nehmen.</p>
</dd>
<dt>[00:42:15] <a href="http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/">How to Use npm as a Build Tool</a></dt>
<dd>Keith Cirkel hat <a href="http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/">keine Lust mehr auf Grunt und Gulp</a> und erklärt daher mal, wie man auch NPM als Build-Tool einsetzen kann (<a href="http://substack.net/task_automation_with_npm_run">wie auch andere vor ihm</a>). Wir mit all unseren Monster-Projekten sind nur mäßig überzeugt: große Aufgaben können durchaus komplexe Tools erfordern. Peter gibt wieder eine Theorie von den in jedem Projekt vorhandenen hässlichen Ecken zum besten und will trotzdem für sein nächstes Projekt mal <a href="https://blog.jcoglan.com/2014/02/05/building-javascript-projects-with-make/">Makefiles</a> versuchen.</dd>
</dl>
<h3>[00:55:31] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/gr2m/appcache-nanny">appcache-nanny</a></dt>
<dd>Soll den Umgang mit dem gefürchteten Application Cache etwas verschönern.</dd>
<dt><a href="http://reports.quickleft.com/css">The 2014 CSS Report: Examining how CSS is being used in the wild</a></dt>
<dd>Datenpunkte zum CSS-Einsatz in freier Wildbahn.</dd>
</dl>


Wer keine spannenden Themen hat, muss eben selbst spannend sein. Und so grillten
Hans, Peter, Stefan und Anselm Fokus-Forscher Rodney zu seinen neuesten
Forschungsergebnissen und wärmten kurz (und ohn…

Wer keine spannenden Themen hat, muss eben selbst spannend sein. Und so grillten
Hans, Peter, Stefan und Anselm Fokus-Forscher Rodney zu seinen neuesten
Forschungsergebnissen und wärmten kurz (und ohne nennenswerten Erkenntnisgewinn)
die große Build-Tool-Debatte wieder auf.


SCHAUNOTIZEN

[00:00:15] NEUES VON DER FOKUS-FRONT

Nach seinem ersten Bericht in Revision 198 meldet sich Rodney wieder zu Wort und
berichtet von neuen Erkenntnissen aus seinem Fokus-Forschungs-Projekt, speziell
von neuen Erkenntnissen rund um Shadow DOM, <dialog>, Canvas-Element und
<video>. Letzteres ist interessanterweise je nach Browser unterschiedlich zu
bedienen. Tabindex in Shadow DOM funktioniert in Chrome auf sinnvolle Weise, ist
in Firefox (wie auch der Rest von Shadow DOM) noch buggy. In <dialog> wirken
sich die bekannten Probleme von Image Maps verwirrend aus. Die Fokussierbarkeit
von Canvas-Subtrees könnte für Focus Transitions genutzt werden. Aus Rodneys
bisherigen Erkenntnissen lassen sich drei Empfehlungen ableiten:



 1. Repariert Browser-Bugs mit Rodneys Scriptsammlung
 2. niemals positiven tabindex benutzen, nur 0 und -1 sind brauchbare Werte
 3. niemals accesskey benutzen

Als nächste Themen wird sich Rodney blutige SVG-Details sowie fokus-relevante
Pseudoklassen (:focus, :active etc) zur Brust nehmen.

[00:42:15] HOW TO USE NPM AS A BUILD TOOL

Keith Cirkel hat keine Lust mehr auf Grunt und Gulp und erklärt daher mal, wie
man auch NPM als Build-Tool einsetzen kann (wie auch andere vor ihm). Wir mit
all unseren Monster-Projekten sind nur mäßig überzeugt: große Aufgaben können
durchaus komplexe Tools erfordern. Peter gibt wieder eine Theorie von den in
jedem Projekt vorhandenen hässlichen Ecken zum besten und will trotzdem für sein
nächstes Projekt mal Makefiles versuchen.


[00:55:31] KEINE SCHAUNOTIZEN

APPCACHE-NANNY

Soll den Umgang mit dem gefürchteten Application Cache etwas verschönern.

THE 2014 CSS REPORT: EXAMINING HOW CSS IS BEING USED IN THE WILD

Datenpunkte zum CSS-Einsatz in freier Wildbahn.

Revision 204: Fokus, Build-Tools, Links

<p>Unser Peter musste sich in letzter Zeit berufsbedingt deutlicher mit AngularJS auseinandersetzen und hatte sich doch eine Meinung gebildet. Verbunden mit genereller Verwunderung über die kürzliche AngularJS 2.0 Ankündigung war das für uns Grund genug, diesem Framework noch eine weitere Episode zu spendieren. Hilfestellung bot <a href="http://pascalprecht.github.io/">Pascal Precht</a>, der dem Kommentar- und Fragefeuerwerk entgegenstand.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:08] AngularJS x.x</dt>
<dd>Phase 2 des <a href="http://en.wikipedia.org/wiki/Hype_cycle">Hype Cycles</a> erfolgreich überstanden, nähern wir uns beim AngularJS Framework in raschen Zügen Phase Nummer 3: Desillusionierung. Von vielen Seiten hört man, <a href="https://medium.com/@mnemon1ck/why-you-should-not-use-angularjs-1df5ddf6fc99">AngularJS soll man gar nicht verwenden</a> (andere Frameworks übrigens auch nicht), andere meinen sogar, das Toolset eignet sich <a href="http://www.fse.guru/2-years-with-angular">sowieso nur für Demos</a> und ist von der Pieke auf gebrochen. Es helfe Google mit der kommenden Version, die alles umreisst, was wir bislang kennen!</p>
<p>Doch warum wirkt <a href="http://eisenbergeffect.bluespire.com/all-about-angular-2-0/?utm_source=javascriptweekly">Angular 2.0</a> wie eine große Entschuldigung seitens Google und als wehmütiger Versuch, jetzt alles richtig zu machen? Und warum bringt dieser Versuch wieder die Gemüter zum kochen? Sollte man Angular 1.x nun komplett in die Tonne werfen? Warum braucht&#8217;s wieder eine eigene Sprache und Tool-Chain mit <a href="https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit">AtScript</a>, und warum sagt man ständig, AtScript sei keine eigene Sprache? Frage um Fragen und ein Thema nach dem anderen. In ihrer Mitte ein tapferer Jungentwickler namens <a href="http://pascalprecht.github.io/">Pascal Precht</a>, der uns die Welt von AngularJS erklärt und aufzeigt, warum alles so katastrophal und verwirrend wirkt.</p>
<p>Apropos verwirrend: Wir finden die AngularJS Quellen für 1.x <a href="https://github.com/angular/angular.js">in diesem GitHub Repository</a>, für Angular 2.x <a href="https://github.com/angular/angular">in jenem</a>. Man erkenne den feinen Unterschied.</p>
<p>Zum Schluß noch ein kleiner Disclaimer: Wir bemühten uns redlichst, etwaige Vergleiche zu anderen und anderwertigen Frameworks zu vermeiden um entsprechenden Grundsatzdiskussionen aus dem Weg zu gehen, allerdings rutscht uns das eine oder andere Schlüsselwort in den Gesprächsverlauf rein. Seht es uns nach und erkennt die Anstrengung, den Fokus wieder auf Angular zu richten.</dd>
<h3>[01:13:50] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://angularjs.de/artikel/angularjs-login-sicherheit?utm_content=buffer47481&#038;utm_medium=social&#038;utm_source=twitter.com&#038;utm_campaign=buffer">AngularJS: Login und Sicherheit</a></dt>
<dd>von unseren Kollegen bei AngularJS.de!</dd>
<dt><a href="http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/">Integrating Web Components with AngularJS</a></dt>
<dd>Unser Gast beschreibt eine laut Eigenaussage &#8222;Hacky Solution&#8220;, wie man jetzt schon Web Components in AngularJS 1.3 verwenden kann. Also noch vor der 2.0er Revolution. Diese Erklärung gibt es auch in audiovisueller Darbietung samt Kollegin Carmen Popoviciu auf der letztjährigen <a href="https://www.youtube.com/watch?v=gSTNTXtQwaY">NG Europe</a> Konferenz</dd>
<dt><a href="http://mediathek.hhu.de/watch/a5c73fd1-f751-4465-87e9-fce057eb1d08">Moderne Web-Entwicklung mit AngularJS</a></dt>
<dd>Robin und Phil, die ihr schon vom Podcast kennen solltet, zeigen euch ausführlich eine Einleitung in die aktuelle Angular JS Version, die sie bei der Rhein Java User Group zum Besten gaben. Sehr detailliert und empfehlenswert, sowie eine gute Einleitung für die <a href="https://angularjs.de/veranstaltungen">Workshops</a>, die sie zusammen mit Peter geben.</dd>
<dt><a href="http://thoughtram.io/">Thoughtram</a></dt>
<dd>Apropos Workshop. Auch Gast Pascal zeigt euch die Vor- und Nachteile von Angular 1.x live und in Farbe. Buchbar auf dieser Seite</dd>
<dt><a href="http://maxwellito.github.io/vivus/">vivus.js</a></dt>
<dd>Themenwechsel. Animierte Strokes bei SVG, einfach steuerbar per Bibliothek. Vivus macht das für euch.</dd>
<dt><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">The origin of the &lt;blink&gt; tag</a></dt>
<dd>Schon etwas älter, nicht minder interessant: Wie ist eigentlich der &lt;blink&gt; Tag entstanden? Der Erfinder plaudert aus dem Nähkästchen. Spoiler: Entsteht so wie alle <strike>großartigen</strike> blöden Ideen.</dd>
</dl>


Unser Peter musste sich in letzter Zeit berufsbedingt deutlicher mit AngularJS
auseinandersetzen und hatte sich doch eine Meinung gebildet. Verbunden mit
genereller Verwunderung über die kürzliche Ang…

Unser Peter musste sich in letzter Zeit berufsbedingt deutlicher mit AngularJS
auseinandersetzen und hatte sich doch eine Meinung gebildet. Verbunden mit
genereller Verwunderung über die kürzliche AngularJS 2.0 Ankündigung war das für
uns Grund genug, diesem Framework noch eine weitere Episode zu spendieren.
Hilfestellung bot Pascal Precht, der dem Kommentar- und Fragefeuerwerk
entgegenstand.


SCHAUNOTIZEN

[00:01:08] ANGULARJS X.X

Phase 2 des Hype Cycles erfolgreich überstanden, nähern wir uns beim AngularJS
Framework in raschen Zügen Phase Nummer 3: Desillusionierung. Von vielen Seiten
hört man, AngularJS soll man gar nicht verwenden (andere Frameworks übrigens
auch nicht), andere meinen sogar, das Toolset eignet sich sowieso nur für Demos
und ist von der Pieke auf gebrochen. Es helfe Google mit der kommenden Version,
die alles umreisst, was wir bislang kennen!



Doch warum wirkt Angular 2.0 wie eine große Entschuldigung seitens Google und
als wehmütiger Versuch, jetzt alles richtig zu machen? Und warum bringt dieser
Versuch wieder die Gemüter zum kochen? Sollte man Angular 1.x nun komplett in
die Tonne werfen? Warum braucht’s wieder eine eigene Sprache und Tool-Chain mit
AtScript, und warum sagt man ständig, AtScript sei keine eigene Sprache? Frage
um Fragen und ein Thema nach dem anderen. In ihrer Mitte ein tapferer
Jungentwickler namens Pascal Precht, der uns die Welt von AngularJS erklärt und
aufzeigt, warum alles so katastrophal und verwirrend wirkt.

Apropos verwirrend: Wir finden die AngularJS Quellen für 1.x in diesem GitHub
Repository, für Angular 2.x in jenem. Man erkenne den feinen Unterschied.

Zum Schluß noch ein kleiner Disclaimer: Wir bemühten uns redlichst, etwaige
Vergleiche zu anderen und anderwertigen Frameworks zu vermeiden um
entsprechenden Grundsatzdiskussionen aus dem Weg zu gehen, allerdings rutscht
uns das eine oder andere Schlüsselwort in den Gesprächsverlauf rein. Seht es uns
nach und erkennt die Anstrengung, den Fokus wieder auf Angular zu richten.


[01:13:50] KEINE SCHAUNOTIZEN

ANGULARJS: LOGIN UND SICHERHEIT

von unseren Kollegen bei AngularJS.de!

INTEGRATING WEB COMPONENTS WITH ANGULARJS

Unser Gast beschreibt eine laut Eigenaussage „Hacky Solution“, wie man jetzt
schon Web Components in AngularJS 1.3 verwenden kann. Also noch vor der 2.0er
Revolution. Diese Erklärung gibt es auch in audiovisueller Darbietung samt
Kollegin Carmen Popoviciu auf der letztjährigen NG Europe Konferenz

MODERNE WEB-ENTWICKLUNG MIT ANGULARJS

Robin und Phil, die ihr schon vom Podcast kennen solltet, zeigen euch
ausführlich eine Einleitung in die aktuelle Angular JS Version, die sie bei der
Rhein Java User Group zum Besten gaben. Sehr detailliert und empfehlenswert,
sowie eine gute Einleitung für die Workshops, die sie zusammen mit Peter geben.

THOUGHTRAM

Apropos Workshop. Auch Gast Pascal zeigt euch die Vor- und Nachteile von Angular
1.x live und in Farbe. Buchbar auf dieser Seite

VIVUS.JS

Themenwechsel. Animierte Strokes bei SVG, einfach steuerbar per Bibliothek.
Vivus macht das für euch.

THE ORIGIN OF THE <BLINK> TAG

Schon etwas älter, nicht minder interessant: Wie ist eigentlich der <blink> Tag
entstanden? Der Erfinder plaudert aus dem Nähkästchen. Spoiler: Entsteht so wie
alle großartigen blöden Ideen.

Revision 203: AngularJS x.x

<p>Wir haben uns kurz vor Heiligabend den <a href="http://mario.heideri.ch/">Mario Heiderich</a> eingeladen, um über grauenvolle, abstruse und schier unlösbare Sicherheitslücken moderner Browser zu reden. Der richtige Stoff für besinnliche Weihnachtsstimmung und frohlockende Ausblicke ins neue Jahr!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:11] DOM Clobbering, XSS via CSS, Template Injection, etc.</dt>
<dd>Mario Heiderich, ehemaliger Webentwickler, heutiger Security-Experte, erzählt uns von den ganzen, dunklen Seiten der modernen Webentwicklung, die verheerende Schäden anrichten können, ohne das wir uns richtig wehren können. So beschreibt er aktuelle Sicherheitslücken in den <a href="https://code.google.com/p/mustache-security/">Template Engines</a> von AngularJS oder KendoUI und hält auch fest, dass diese Dinge gerne von den Bibliotheksherstellern auch mal auf die lange Bank geschoben werden (wie beispielsweise Frederic Hembergers <a href="https://github.com/jquery/jquery/pull/1506">jQuery Pull Request</a> von &#8222;neulich&#8220; zeigt). Es gibt Hilfestellungen, wie beispielswiese Marios <a href="https://github.com/cure53/DOMPurify">DOMPurify</a>, mit dem man Zeichenketten auf verdächtigen Code prüfen und gegebenenfalls bereinigen kann.</p>
<p>Es muss allerdings nicht immer JavaScript sein. Mit CSS kann man mit Hilfe der <code>@-moz-document</code> Regel und Regular Expressions im Firefox ganz einfach <a href="https://html5sec.org/cssession/">Session Token aus der URL klauen</a>. Mario erklärt ausserdem, wie man die Paint-Zyklen der Browser und CSS Filter dazu ausnutzen kann, um auf bestimmte Zeichen zu schließen, die der Benutzer eingibt. Zukünftige Spaßquelle bieten SVGs im Allgemeinen und <a href="https://html5sec.org/otfsvg/">SVGs in Webfonts im Speziellen</a>.</p>
<p>Ebenfalls lückenreich und angriffsanfällig ist der DOM. Mit <a href="http://de.slideshare.net/x00mario/in-the-dom-no-one-will-hear-you-scream">In the DOM, no one will hear you scream</a> gibt es einen mittlerweile sehr bekannten Talk von Mario, der uns das Prinzip des DOM Clobbering näherbringt. Der Abwärtskompatibilität von HTML sei es geschuldet, dass man derartige Dinge überhaupt durchführen kann.</p>
<p>Dass man allerdings auch mit kommenden Technologien allerlei Unfung anstellen kann, zeigt der Ausblick auf Template Strings in EcmaScript 6. Mario sieht sich in seiner Rolle für die nächsten Jahre auf jeden Fall beschäftigt.</p>
<p>Abhilfe gewünscht? Mario lässt uns nicht im Schneeregen stehen, sondern gibt auch ein paar hilfreiche Schutzhinweise. Für hundertprozentige Absicherung empfiehlt die Workingdraft Crew eine Ausbildung zum Reisbauer auf dem zweiten Bildungsweg.</p>
<p>Weitere Links zu den Themen, die besprochen wurden:</p>
<ul>
<li><a href="https://github.com/cure53/xss-challenge-wiki">XSS CHallenge Wiki</a> von Mario</li>
<li><a href="https://html5sec.org/">Sicherheitslücken im Test auf html5sec.org</a></li>
<li><a href="http://kangax.github.io/compat-table/es6/">EcmaScript 6 Compatibilty Table</a></li>
<li><a href="https://code.google.com/p/mustache-security/">Mustache Security</a></li>
</ul>
<p>Zu guter Letzt gibt es noch einige Hinweise auf themenbezogene Konferenzen.</p>
</dd>
</dl>
<h3>[01:35:37] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.golem.de/news/netzverschluesselung-mythen-ueber-https-1412-111188.html">HTTPS Mythen</a></dt>
<dd>Golem klärt auf, was es mit den herumschwirrenden HTTPS Gerüchten und Mythen tatsächlich auf sich hat.</dd>
<dt><a href="https://pomax.github.io/#gh-weblog-1418833974687">Let&#8217;s make a Firefox Extension, the painless way</a></dt>
<dd>Ein knackiges Tutorial beschreibt, wie man Extensions für Firefox entwickelt.</dd>
<dt><a href="http://chriswrightdesign.com/experiments/flexbox-adventures/">Flexbox Adventures</a></dt>
<dd>Schon wieder ein Flexbox Tutorial? Ja! Dieses zeigt allerdings interaktiv und ausführlich, was es mit den Properties <code>flex-grow</code>, <code>flex-shrink</code> und <code>flex-basis</code> auf sich hat.</dd>
</dl>


Wir haben uns kurz vor Heiligabend den Mario Heiderich eingeladen, um über
grauenvolle, abstruse und schier unlösbare Sicherheitslücken moderner Browser zu
reden. Der richtige Stoff für besinnliche We…

Wir haben uns kurz vor Heiligabend den Mario Heiderich eingeladen, um über
grauenvolle, abstruse und schier unlösbare Sicherheitslücken moderner Browser zu
reden. Der richtige Stoff für besinnliche Weihnachtsstimmung und frohlockende
Ausblicke ins neue Jahr!


SCHAUNOTIZEN

[00:00:11] DOM CLOBBERING, XSS VIA CSS, TEMPLATE INJECTION, ETC.

Mario Heiderich, ehemaliger Webentwickler, heutiger Security-Experte, erzählt
uns von den ganzen, dunklen Seiten der modernen Webentwicklung, die verheerende
Schäden anrichten können, ohne das wir uns richtig wehren können. So beschreibt
er aktuelle Sicherheitslücken in den Template Engines von AngularJS oder KendoUI
und hält auch fest, dass diese Dinge gerne von den Bibliotheksherstellern auch
mal auf die lange Bank geschoben werden (wie beispielsweise Frederic Hembergers
jQuery Pull Request von „neulich“ zeigt). Es gibt Hilfestellungen, wie
beispielswiese Marios DOMPurify, mit dem man Zeichenketten auf verdächtigen Code
prüfen und gegebenenfalls bereinigen kann.



Es muss allerdings nicht immer JavaScript sein. Mit CSS kann man mit Hilfe der
@-moz-document Regel und Regular Expressions im Firefox ganz einfach Session
Token aus der URL klauen. Mario erklärt ausserdem, wie man die Paint-Zyklen der
Browser und CSS Filter dazu ausnutzen kann, um auf bestimmte Zeichen zu
schließen, die der Benutzer eingibt. Zukünftige Spaßquelle bieten SVGs im
Allgemeinen und SVGs in Webfonts im Speziellen.

Ebenfalls lückenreich und angriffsanfällig ist der DOM. Mit In the DOM, no one
will hear you scream gibt es einen mittlerweile sehr bekannten Talk von Mario,
der uns das Prinzip des DOM Clobbering näherbringt. Der Abwärtskompatibilität
von HTML sei es geschuldet, dass man derartige Dinge überhaupt durchführen kann.

Dass man allerdings auch mit kommenden Technologien allerlei Unfung anstellen
kann, zeigt der Ausblick auf Template Strings in EcmaScript 6. Mario sieht sich
in seiner Rolle für die nächsten Jahre auf jeden Fall beschäftigt.

Abhilfe gewünscht? Mario lässt uns nicht im Schneeregen stehen, sondern gibt
auch ein paar hilfreiche Schutzhinweise. Für hundertprozentige Absicherung
empfiehlt die Workingdraft Crew eine Ausbildung zum Reisbauer auf dem zweiten
Bildungsweg.

Weitere Links zu den Themen, die besprochen wurden:

 * XSS CHallenge Wiki von Mario
 * Sicherheitslücken im Test auf html5sec.org
 * EcmaScript 6 Compatibilty Table
 * Mustache Security

Zu guter Letzt gibt es noch einige Hinweise auf themenbezogene Konferenzen.


[01:35:37] KEINE SCHAUNOTIZEN

HTTPS MYTHEN

Golem klärt auf, was es mit den herumschwirrenden HTTPS Gerüchten und Mythen
tatsächlich auf sich hat.

LET’S MAKE A FIREFOX EXTENSION, THE PAINLESS WAY

Ein knackiges Tutorial beschreibt, wie man Extensions für Firefox entwickelt.

FLEXBOX ADVENTURES

Schon wieder ein Flexbox Tutorial? Ja! Dieses zeigt allerdings interaktiv und
ausführlich, was es mit den Properties flex-grow, flex-shrink und flex-basis auf
sich hat.

Revision 202: Sicherheitslücken – DOM Clobbering, XSS via CSS, ES6 Fallen

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 213: React is a Good Idea!

Working Draft

Revision 212: HTML5 (Retro | Per)spektive

Working Draft

Revision 211: Project Spartan with Jacob Rossi

Working Draft

Revision 210: Webfonts und JavaScript-Module

Working Draft

Revision 209: Geschwindigkeitsrausch

Working Draft

Revision 208: JavaScript Dialekte

Working Draft

Revision 207: 6to5, Yeoman, Links

Working Draft

Revision 206: ES6 Template Strings, Jobwechsel, Spartan

Working Draft

Revision 205: Perceived Performance, Ampersand.js

Working Draft

Revision 204: Fokus, Build-Tools, Links

Working Draft

Revision 203: AngularJS x.x

Working Draft

Revision 202: Sicherheitslücken – DOM Clobbering, XSS via CSS, ES6 Fallen

Working Draft