<p>Angesichts hoher Temperaturen und eines niedrigen Themenlisten-Pegels nahmen sich Hans, Schepp und Peter <a href="http://workingdraft.de/127/#comments">Themenwünsche der Leser aus Revision 127</a> zur Brust. Obwohl wir jedem Thema nicht mehr als 5 Minuten gewidmet haben, hat die Zeit nicht für alle Fragen gereicht, aber die kommen dann eben nächstes Mal dran. Falls ihr noch weitere Themenwünsche habt, ab damit in die Kommentare.</p>
<h3>[00:00:40] Fragen über Fragen</h3>
<dl>
<dt>[00:00:40] <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-keygen-element">Keygen-Element</a></dt>
<dd>Peter rät von der Benutzung ab, da Implementierungsdetails noch unklar sind. Schepp und Hans haben das Element auch noch nie in freier Wildbahn gesehen. Außerdem klärt Peter darüber auf, dass eine Technologie schon mit nur zwei unabhängigen Implementierungen zum Webstandard erhoben werden kann.</dd>
<dt>[00:04:43] <a href="http://de.wikipedia.org/wiki/WebGL">WebGL</a></dt>
<dd>Wir finden super, dass der IE 11 WebGL können wird, haben es aber selbst nie in irgendwelchen Projekten eingesetzt. Einigkeit herrscht darüber, dass man im Bedarfsfall Libraries benutzen sollte, insbesondere <a href="http://threejs.org/">Three.js</a>.</dd>
<dt>[00:06:57] <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">Application Cache</a></dt>
<dd>Wir linkschleudern die erklärenden Werke von <a href="http://vimeo.com/43336762">Jake Archibald</a> und <a href="http://www.youtube.com/watch?v=RrGo1Sz4IgQ">Andrew Betts</a> (FT) und lobpreisen den Manifest-Generator von <a href="https://github.com/yeoman/yeoman">Yeoman</a> sowie das Bookmarklet <a href="http://westciv.com/tools/manifestR/">manifestR</a>.</dd>
<dt>[00:11:55] Frameworks wie <a href="http://twitter.github.io/bootstrap/">Bootstrap</a>, <a href="http://foundation.zurb.com/">Foundation</a>, Boilerplates und deren Zukunftssicherheit</dt>
<dd>Hans würde solche Frameworks zum Prototyping nutzen, steht ansonsten aber eher auf Handarbeit. Peter erklärt, was Bootstrap und Ikea gemeinsam haben. Major-Updates sollte man nicht mitmachen (außer bei <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>).</dd>
<dt>[00:17:25] CSS Grid Systems</dt>
<dd>Peter und Schepp haben sowas nie genutzt, Schepp höchstens mal <a href="http://www.yaml.de/">YAML</a>. Beide suchen die Schuld dafür bei Designern, die nicht in Grids denken. Der große Hinderungsgrund für Hans war früher mobile, was mit Sass aber kein Problem mehr darstellt.</dd>
<dt>[00:20:30] <a href="http://www.webrtc.org/">WebRTC</a></dt>
<dd>Schepp ist die Technologien noch zu neu und er sieht in seiner Realität auch keine Use Cases. Peter ist für die Zukunft sogar noch leicht skeptisch.</dd>
<dt>[00:00:00] Schriftgrößen: px, %, em oder rem?</dt>
<dd>Wir erklären und empfehlen rem. Allen IE-Opfern empfehlen wir eins der zahlreichen rem-Mixins für die verbreiteten Präprozessoren.</dd>
<dt>[00:27:12] Wie strukturiert man CSS-Dateien?</dt>
<dd>Hans erklärt sein Vorgehen: Seitenbausteine werden komponentenweise modularisier. Es gibt keine globalen Breakpoints, sondern nur komponentenweise vergebene. Peter macht es genau so, baut aber (Präprozessoren sei dank) gerne auch seine Media Queries in die Selektoren selbst ein, was bei Hans Bloat-Befürchtungen schürt.</dd>
<dt>[00:32:17] (Responsive) Wireframes? Wenn ja, wie?</dt>
<dd>Peter war früher immer nur Designer-Sklave und hat nie viel mit Wireframes gemacht, Hans schon. Schepp ebenfalls, aber nicht responsive (obwohl er das für sinnvoll hielte). <a href="http://html.adobe.com/edge/reflow/">Adobe Edge Reflow</a> und <a href="http://balsamiq.com/">Balsamiq</a> werden als (teilweise) relevante Tools genannt</dd>
<dt>[00:34:44] JS-MVC-Frameworks: Warum? Welche?</dt>
<dd>Peter gibt sich für seine Zwecke mit <a href="http://knockoutjs.com/">Knockout</a> zufrieden, während Hans bisher <a href="http://backbonejs.org/">Backbone</a> und <a href="http://emberjs.com/">Ember</a> im Einsatz hatte. Schepp hat ein Auge auf <a href="http://angularjs.org/">Angular</a> geworfen.</dd>
<dt>[00:37:14] Warum wird #a11y selten beachtet? Was ist diesbezüglich neu in HTML5?</dt>
<dd>Peter erklärt was neu in HTML5 ist. Hans führt das desinteresse auf fehlende Nachfrage zurück, und Schepp hält das Thema für unsexy. Peter fordert bessere Artikel und glaubt dass die helfen würden.</dd>
<dt>[00:42:21] <a href="http://www.w3.org/TR/eventsource/">Server-Sent Events</a></dt>
<dd>Wir erklären nochmal kurz das Konzept und verweisen ansonsten auf <a href="http://workingdraft.de/112/">Revision 112</a>.</dd>
<dt>[00:45:18] <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd">HTML5 Drag &amp; Drop</a></dt>
<dd>Peter berichtet, wann man man dieses neu-alte HTML5-Feature einsetzen sollte und wann nicht und zieht Parallelen zwischen HTML5 und der <a href="http://de.wikipedia.org/wiki/Neptun_(Planet)#Entdeckung.2FBenennung">Entdeckung des Planeten Neptun.</a></dd>
<dt>[00:50:26] Welche Hardware zum Entwickeln benutzen?</dt>
<dd>Wir zählen unsere Keyboards, Mäuse und sonstige Hardware auf. Peter steht auf viele Monitore und Kabelfreiheit, der Rest nicht so sehr.</dd>
<dt>[00:55:34] <a href="http://www.w3.org/TR/geolocation-API/">Geolocation</a></dt>
<dd>Schepp und Peter ranten über vergangene und gegenwärtige Probleme mit Geolocation im Firefox (was niemanden grundsätzlich von der Benutzung der API abhalten sollte).</dd>
<dt>[00:59:59] Device APIs</dt>
<dd>Peter erzählt, was gerade im Mobile Firefox <a href="https://wiki.mozilla.org/WebAPI#APIs">alles möglich und geplant ist</a>. Eine bessere Unterstützung für <a href="http://www.w3.org/TR/notifications/">Web Notifications</a> wird in allen Browsern gewünscht.</dd>
<h3>[01:04:22] Links</h3>
<dl>
<dt><a href="http://www.neotys.com/blog/performance-of-spdy-enabled-web-servers/">Evaluating the Performance of SPDY-enabled Web Servers</a></dt>
<dd>SPDY ist schneller <em>und</em> schont die Server-Hardware!</dd>
<dt><a href="http://cssday.nl/coverage">CSS Day Coverage &#8211; Videos und Slides sind komplett</a></dt>
<dd>Falls ihr die nächsten paar Monate nichts vorhabt, hier Material zum Ausfüllen dieser Zeit.</dd>
<dt><a href="http://www.youtube.com/watch?v=i9MHigUZKEM">AngularJS Fundamentals In 60-ish Minutes &#8211; YouTube</a></dt>
<dd>Tolles Thema, tolle Stimme.</dd>
<dt><a href="http://davidwalsh.name/future-sass">Looking Into the Future of Sass</a></dt>
<dd>Einblick in Planungen zu Sass 3.3.</dd>
</dl>


Angesichts hoher Temperaturen und eines niedrigen Themenlisten-Pegels nahmen
sich Hans, Schepp und Peter Themenwünsche der Leser aus Revision 127 zur Brust.
Obwohl wir jedem Thema nicht mehr als 5 Min…

Working Draft

Angesichts hoher Temperaturen und eines niedrigen Themenlisten-Pegels nahmen
sich Hans, Schepp und Peter Themenwünsche der Leser aus Revision 127 zur Brust.
Obwohl wir jedem Thema nicht mehr als 5 Minuten gewidmet haben, hat die Zeit
nicht für alle Fragen gereicht, aber die kommen dann eben nächstes Mal dran.
Falls ihr noch weitere Themenwünsche habt, ab damit in die Kommentare.


[00:00:40] FRAGEN ÜBER FRAGEN

[00:00:40] KEYGEN-ELEMENT

Peter rät von der Benutzung ab, da Implementierungsdetails noch unklar sind.
Schepp und Hans haben das Element auch noch nie in freier Wildbahn gesehen.
Außerdem klärt Peter darüber auf, dass eine Technologie schon mit nur zwei
unabhängigen Implementierungen zum Webstandard erhoben werden kann.

[00:04:43] WEBGL

Wir finden super, dass der IE 11 WebGL können wird, haben es aber selbst nie in
irgendwelchen Projekten eingesetzt. Einigkeit herrscht darüber, dass man im
Bedarfsfall Libraries benutzen sollte, insbesondere Three.js.

[00:06:57] APPLICATION CACHE

Wir linkschleudern die erklärenden Werke von Jake Archibald und Andrew Betts
(FT) und lobpreisen den Manifest-Generator von Yeoman sowie das Bookmarklet
manifestR.

[00:11:55] FRAMEWORKS WIE BOOTSTRAP, FOUNDATION, BOILERPLATES UND DEREN
ZUKUNFTSSICHERHEIT

Hans würde solche Frameworks zum Prototyping nutzen, steht ansonsten aber eher
auf Handarbeit. Peter erklärt, was Bootstrap und Ikea gemeinsam haben.
Major-Updates sollte man nicht mitmachen (außer bei HTML5 Boilerplate).

[00:17:25] CSS GRID SYSTEMS

Peter und Schepp haben sowas nie genutzt, Schepp höchstens mal YAML. Beide
suchen die Schuld dafür bei Designern, die nicht in Grids denken. Der große
Hinderungsgrund für Hans war früher mobile, was mit Sass aber kein Problem mehr
darstellt.

[00:20:30] WEBRTC

Schepp ist die Technologien noch zu neu und er sieht in seiner Realität auch
keine Use Cases. Peter ist für die Zukunft sogar noch leicht skeptisch.

[00:00:00] SCHRIFTGRÖSSEN: PX, %, EM ODER REM?

Wir erklären und empfehlen rem. Allen IE-Opfern empfehlen wir eins der
zahlreichen rem-Mixins für die verbreiteten Präprozessoren.

[00:27:12] WIE STRUKTURIERT MAN CSS-DATEIEN?

Hans erklärt sein Vorgehen: Seitenbausteine werden komponentenweise
modularisier. Es gibt keine globalen Breakpoints, sondern nur komponentenweise
vergebene. Peter macht es genau so, baut aber (Präprozessoren sei dank) gerne
auch seine Media Queries in die Selektoren selbst ein, was bei Hans
Bloat-Befürchtungen schürt.

[00:32:17] (RESPONSIVE) WIREFRAMES? WENN JA, WIE?

Peter war früher immer nur Designer-Sklave und hat nie viel mit Wireframes
gemacht, Hans schon. Schepp ebenfalls, aber nicht responsive (obwohl er das für
sinnvoll hielte). Adobe Edge Reflow und Balsamiq werden als (teilweise)
relevante Tools genannt

[00:34:44] JS-MVC-FRAMEWORKS: WARUM? WELCHE?

Peter gibt sich für seine Zwecke mit Knockout zufrieden, während Hans bisher
Backbone und Ember im Einsatz hatte. Schepp hat ein Auge auf Angular geworfen.

[00:37:14] WARUM WIRD #A11Y SELTEN BEACHTET? WAS IST DIESBEZÜGLICH NEU IN HTML5?

Peter erklärt was neu in HTML5 ist. Hans führt das desinteresse auf fehlende
Nachfrage zurück, und Schepp hält das Thema für unsexy. Peter fordert bessere
Artikel und glaubt dass die helfen würden.

[00:42:21] SERVER-SENT EVENTS

Wir erklären nochmal kurz das Konzept und verweisen ansonsten auf Revision 112.

[00:45:18] HTML5 DRAG & DROP

Peter berichtet, wann man man dieses neu-alte HTML5-Feature einsetzen sollte und
wann nicht und zieht Parallelen zwischen HTML5 und der Entdeckung des Planeten
Neptun.

[00:50:26] WELCHE HARDWARE ZUM ENTWICKELN BENUTZEN?

Wir zählen unsere Keyboards, Mäuse und sonstige Hardware auf. Peter steht auf
viele Monitore und Kabelfreiheit, der Rest nicht so sehr.

[00:55:34] GEOLOCATION

Schepp und Peter ranten über vergangene und gegenwärtige Probleme mit
Geolocation im Firefox (was niemanden grundsätzlich von der Benutzung der API
abhalten sollte).

[00:59:59] DEVICE APIS

Peter erzählt, was gerade im Mobile Firefox alles möglich und geplant ist. Eine
bessere Unterstützung für Web Notifications wird in allen Browsern gewünscht.


[01:04:22] LINKS

EVALUATING THE PERFORMANCE OF SPDY-ENABLED WEB SERVERS

SPDY ist schneller und schont die Server-Hardware!

CSS DAY COVERAGE – VIDEOS UND SLIDES SIND KOMPLETT

Falls ihr die nächsten paar Monate nichts vorhabt, hier Material zum Ausfüllen
dieser Zeit.

ANGULARJS FUNDAMENTALS IN 60-ISH MINUTES – YOUTUBE

Tolles Thema, tolle Stimme.

LOOKING INTO THE FUTURE OF SASS

Einblick in Planungen zu Sass 3.3.

Revision 129: Zuschauerfragen sind heiß

<p>Getreu dem Motto „Viel Feind, viel Ehr‘“ luden sich Stefan, Peter und Rodney mit <a href="https://twitter.com/thedeftone">Jan Monschke</a> und <a href="https://twitter.com/sippndipp">Sebastian Deutsch</a> gleich zwei Gäste ein, die in der Debatte rund um CoffeeScript ordentlich Gas gaben. Das Glückrad entfiel aus Zeitgründen, dafür wurden die Gewinner des Gewinnspiels aus Revision 127 gezogen.</p>
<h3>[00:00:10] News</h3>
<dl>
<dt>Audio-APIs landen im Firefox</dt>
<dd>Firefox Nightly <a href="https://twitter.com/FirefoxNightly/status/354246401363951616">kann jetzt Audio aufnehmen</a> und <a href="https://hacks.mozilla.org/2013/07/web-audio-api-comes-to-firefox/">hat auch die Web Audio API drauf</a>. <a href="http://www.youtube.com/watch?v=PN8Eg1K9xjE">Damit kann man schöne Sachen machen!</a></dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:36] The Battle of CoffeeScript Hill</dt>
<dd>Wir streiten ausführlich über <a href="http://coffeescript.org/">CoffeeScript</a> und andere Zu-JS-Kompilier-Sprachen. Sebastian erklärt, dass die Haupteinflüsse von CoffeeScript <a href="http://de.wikipedia.org/wiki/Ruby_(Programmiersprache)">Ruby</a> und <a href="http://de.wikipedia.org/wiki/Python_(Programmiersprache)">Python</a> sind, was in einer Syntax resultiert, die Rodney nicht besonders schätzt. Ihn stört außerdem, dass zusätzliche Tools die Toolchain länger machen und dass nicht ganz so fitte Entwickler con CS zu sehr gefordert werden könnten. Sebastian hält dem entgegen, dass Vorgaben wie <a href="http://coffeescript.org/#classes">das Klassensystem in CoffeeScript</a> weniger fitten Leuten das Leben eher leichter machen. Peter mokiert weitere syntaktische Details, während Rodney <a href="https://github.com/gre/slider.js/blob/master/slider.coffee#L78-L88">einen Codeschnipsel ausgäbt</a>, der genau so detailliert debattiert wird, wie <a href="https://gist.github.com/sebastiandeutsch/6002323">das von Sebastian erstellte Positivbeispiel</a>. Im Schlussplädoyer führt Rodney an, dass es unhöflich und ggf. nachteilig ist, Libraries in einer so unüblichen Sprache zu schreiben, da es andere von Contributions abhalten kann.</dd>
<dt>[00:50:48] <a href="http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/">Why mobile web-apps are slow</a></dt>
<dd>Ein ausgewachsener Brachiosaurus von einem Artikel legt dar, warum mobile Webapps heutztage so lahmen und macht wenig Hofflung auf Besserung. Der <a href="http://de.wikipedia.org/wiki/Just-in-time-Kompilierung">JIT-Compiler</a> von JavaScript wird als der Flaschenhals ausgemacht, der auf mobile alles 8 &#8211; 32&times; langsamer macht. Warum man sich nicht einfach zurücklehnen und <a lang="en" href="http://de.wikipedia.org/wiki/Mooresches_Gesetz">Moore&#8217;s law</a> die Arbeit machen lassen kann, wird nicht ganz klar. Hans erinnert an <a href="http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story">Senchas HTML5-Facebook-App</a>, die, da mit Fachkenntnis gebaut, schöm schnell war. Dass man JavaScript nebst JIT im Browser wird ersetzen können, zweifelt Peter an.</dd>
<dt>[01:10:36] <a href="http://simonsmith.io/modular-html-components-with-requirejs/">Modular HTML components with RequireJS</a></dt>
<dd>Der Artikel beschreibt, wie man <a href="http://requirejs.org/">RequireJS</a> für Multi-Page-Apps nutzen sollte. Rodney kennt diese Technik aus aus eigener Erfahrung und berichtet vom Praxiseinsatz. Detailliertere Ausführungen und <a href="https://plus.google.com/+JonathanBeri/posts/T1sXXeQqh1y">Gegenvorschläge</a> entfallen wegen akutem Zeitmangel.</dd>
</dl>
<h3>[01:14:18] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/jcartledge/sublime-worksheet">Sublime Worksheet</a></dt>
<dd>Sublime Text als REPL. Super für schnelle Experimente und Demos.</dd>
<dt><a href="http://yellowled.de/archiv/43/Grunt-LiveReload-reloaded.html">Grunt: LiveReload reloaded</a></dt>
<dd>Wie man die neuesten Inkomptibilitäts-Klippen im Grunt-Ökosystem umschifft.</dd>
<dt><a href="http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/">Animating lists with CSS 3 transitions</a></dt>
<dd>Was iOS kann, kann das Web schon lange!</dd>
<dt><a href="http://devsmeetup.de/">Devs Meetup in Freiburg: Funktionale Programmierung</a></dt>
<dd>Hans lädt wieder alle Web-Nerds aus Freiburg und Umgebung ein.</dd>
</dl>
<h3>[01:17:13] Verlosung</h3>
<dl>
<dt>Peter verliest die Sieger</dt>
<dd>Je ein Exemplar des <a href="http://html5-dvd.de/">HTML5/CSS3-Videotrainings</a> von Peter ist bereits auf dem Weg zu <strong>Christian</strong>, <strong>Robert</strong> und <strong>Marius</strong>. Herzlichen Glückwunsch!</dd>
</dl>


Getreu dem Motto „Viel Feind, viel Ehr‘“ luden sich Stefan, Peter und Rodney mit
Jan Monschke und Sebastian Deutsch gleich zwei Gäste ein, die in der Debatte
rund um CoffeeScript ordentlich Gas gaben.…

Getreu dem Motto „Viel Feind, viel Ehr‘“ luden sich Stefan, Peter und Rodney mit
Jan Monschke und Sebastian Deutsch gleich zwei Gäste ein, die in der Debatte
rund um CoffeeScript ordentlich Gas gaben. Das Glückrad entfiel aus Zeitgründen,
dafür wurden die Gewinner des Gewinnspiels aus Revision 127 gezogen.


[00:00:10] NEWS

AUDIO-APIS LANDEN IM FIREFOX

Firefox Nightly kann jetzt Audio aufnehmen und hat auch die Web Audio API drauf.
Damit kann man schöne Sachen machen!


SCHAUNOTIZEN

[00:00:36] THE BATTLE OF COFFEESCRIPT HILL

Wir streiten ausführlich über CoffeeScript und andere Zu-JS-Kompilier-Sprachen.
Sebastian erklärt, dass die Haupteinflüsse von CoffeeScript Ruby und Python
sind, was in einer Syntax resultiert, die Rodney nicht besonders schätzt. Ihn
stört außerdem, dass zusätzliche Tools die Toolchain länger machen und dass
nicht ganz so fitte Entwickler con CS zu sehr gefordert werden könnten.
Sebastian hält dem entgegen, dass Vorgaben wie das Klassensystem in CoffeeScript
weniger fitten Leuten das Leben eher leichter machen. Peter mokiert weitere
syntaktische Details, während Rodney einen Codeschnipsel ausgäbt, der genau so
detailliert debattiert wird, wie das von Sebastian erstellte Positivbeispiel. Im
Schlussplädoyer führt Rodney an, dass es unhöflich und ggf. nachteilig ist,
Libraries in einer so unüblichen Sprache zu schreiben, da es andere von
Contributions abhalten kann.

[00:50:48] WHY MOBILE WEB-APPS ARE SLOW

Ein ausgewachsener Brachiosaurus von einem Artikel legt dar, warum mobile
Webapps heutztage so lahmen und macht wenig Hofflung auf Besserung. Der
JIT-Compiler von JavaScript wird als der Flaschenhals ausgemacht, der auf mobile
alles 8 – 32× langsamer macht. Warum man sich nicht einfach zurücklehnen und
Moore’s law die Arbeit machen lassen kann, wird nicht ganz klar. Hans erinnert
an Senchas HTML5-Facebook-App, die, da mit Fachkenntnis gebaut, schöm schnell
war. Dass man JavaScript nebst JIT im Browser wird ersetzen können, zweifelt
Peter an.

[01:10:36] MODULAR HTML COMPONENTS WITH REQUIREJS

Der Artikel beschreibt, wie man RequireJS für Multi-Page-Apps nutzen sollte.
Rodney kennt diese Technik aus aus eigener Erfahrung und berichtet vom
Praxiseinsatz. Detailliertere Ausführungen und Gegenvorschläge entfallen wegen
akutem Zeitmangel.


[01:14:18] KEINE SCHAUNOTIZEN

SUBLIME WORKSHEET

Sublime Text als REPL. Super für schnelle Experimente und Demos.

GRUNT: LIVERELOAD RELOADED

Wie man die neuesten Inkomptibilitäts-Klippen im Grunt-Ökosystem umschifft.

ANIMATING LISTS WITH CSS 3 TRANSITIONS

Was iOS kann, kann das Web schon lange!

DEVS MEETUP IN FREIBURG: FUNKTIONALE PROGRAMMIERUNG

Hans lädt wieder alle Web-Nerds aus Freiburg und Umgebung ein.


[01:17:13] VERLOSUNG

PETER VERLIEST DIE SIEGER

Je ein Exemplar des HTML5/CSS3-Videotrainings von Peter ist bereits auf dem Weg
zu Christian, Robert und Marius. Herzlichen Glückwunsch!

Revision 128: CoffeeScript, mobile Apps, Gewinne

<p>
Die Rumpfbesatzung aus Schepp und Peter erfreute sich diese Woche am IE11, fuhr das Glücksrad an den Drehzahlbegrenzer und verlost(e) am Ende sogar noch drei Exemplare von <a href="http://html5-dvd.de/">Peters HTML5/CSS3-Videotraining</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:21] Kompatibilität im IE11</dt>
<dd>Nachdem Schepp für Peter nochmal die <a href="http://generatedcontent.org/post/53943518693/ie11preview1">Features des IE11</a> rezitiert hat, kommen wir zum eigentlichen Thema: der Abwärtskompatibiliät des neuen Internet Explorer. Mehr als je zuvor <a href="http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx#docmode">sägt Microsoft alte Features wie <code>document.all</code> und <code>attachEvent()</code> ab</a> und baut sogar den UA-String um. Zum einen soll so der IE11 von Browsersniffern nicht mehr versehentlich als einer seiner fossilen Vorfahren identifiziert werden, zum anderen wird der Browser so standardkonformer. Das ganze geht allerdings nach Meinung einiger schon fast zu weit, denn auch einige nützliche IE-Eigenheiten wie <a href="https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regarding-ie-10">Filter</a> und <a href="http://blog.getify.com/ie11-please-bring-real-script-preloading-back/">kontrollierte Scriptausführung</a> sind aus dem Browser geworfen worden. Wir halten das eher für ein Luxusproblem. Schepp ist guter Dinge, dass bald alte IE genau so ein Unding sind wie alte Chrome-Versionen, Peter verweist darauf, <a href="http://superuser.com/questions/423061/is-there-a-modern-browser-that-runs-on-windows-3-1">dass sich alte Software im Business-Bereich oft sehr lange hält.</a>
</dd>
</dl>
<h3>[00:23:47] HTML5-Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#browsing-the-web">Browser-Infrastruktur</a></dt>
<dd>Peter lobpreist die Vollständigkeit der HTML5-Specs am Beispiel eine inhaltlich sehr langweiligen Abschnitts über Browser-Infrastruktur.</dd>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media Elements</a></dt>
<dd>Schepp berichtet, dass er in der Praxis keine freien Audio- und Videoformate einsetzt, sondern einfach H.264 und MP3 mit einem Flash-Fallback ausliefert. Seine Player-Libraries der Wahl sind <a href="http://mediaelementjs.com/">MediaElement.js</a> und der <a href="http://www.longtailvideo.com/">JWPlayer</a>.</dd>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-mark-element">Das Mark-Element</a></dt>
<dd>Peter quält Schepp mit Fragen zu obskuren HTML5-Elementen wie &lt;mark&gt;, <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-s-element">&lt;s&gt;</a> und <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-u-element">&lt;u&gt;</a>. An sich finden wir Recycling ganz löblich, aber hier sind wir uns nicht so sicher.</dd>
</dl>
<h3>[00:39:44] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design">Google Glass Browser</a></dt>
<dd>Nichts nerdiges, nur ein kleiner Trip Report von der Benutzung des Glass-Browsers.</dd>
<dt><a href="http://www.2ality.com/2013/06/basic-javascript.html?spref=tw">Basic JavaScript: an introduction to the language</a></dt>
<dd>Der Doktor hat wieder zugeschlagen und liefert eine umfassende JS-Einführung für erfahrene Programmierer ab.</dd>
<dt><a href="https://wpds-zurich.eventbrite.com/">Web Platform Doc Sprint Zurich</a></dt>
<dd>In Zürich treffen sich am 28. August Nerds, um Dokumentation für die Web-Plattform zu schreiben. Klingt langeweilig, ist es aber nicht; Zweifler mögen sich unseren Bericht in <a href="http://workingdraft.de/107/">Revision 107</a> anhören.</dd>
</dl>
<h3>[00:42:57] Verlosung</h3>
<dl>
<dt><a href="http://html5-dvd.de/">Das HTML5/CSS3-Videotraining</a></dt>
<dd>Bis zu drei glückliche Gewinner erhalten je ein Exemplar von Peters Videotraining zu HTML5 und CSS3! Teilnehmen ist einfach: <strong>schreibt einen Kommentar und wünscht euch einen Aspekt von HTML, CSS, JavaScript oder ähnlichem, den wir in einer der kommenden Revisionen für euch im Glücksrad-Style erklären/besprechen/verdammen sollen.</strong> Teilnahme ist ab Erscheinen dieser Revision für eine Woche möglich.</dd>


Die Rumpfbesatzung aus Schepp und Peter erfreute sich diese Woche am IE11, fuhr
das Glücksrad an den Drehzahlbegrenzer und verlost(e) am Ende sogar noch drei
Exemplare von Peters HTML5/CSS3-Videotrain…

Die Rumpfbesatzung aus Schepp und Peter erfreute sich diese Woche am IE11, fuhr
das Glücksrad an den Drehzahlbegrenzer und verlost(e) am Ende sogar noch drei
Exemplare von Peters HTML5/CSS3-Videotraining.


SCHAUNOTIZEN

[00:00:21] KOMPATIBILITÄT IM IE11

Nachdem Schepp für Peter nochmal die Features des IE11 rezitiert hat, kommen wir
zum eigentlichen Thema: der Abwärtskompatibiliät des neuen Internet Explorer.
Mehr als je zuvor sägt Microsoft alte Features wie document.all und
attachEvent() ab und baut sogar den UA-String um. Zum einen soll so der IE11 von
Browsersniffern nicht mehr versehentlich als einer seiner fossilen Vorfahren
identifiziert werden, zum anderen wird der Browser so standardkonformer. Das
ganze geht allerdings nach Meinung einiger schon fast zu weit, denn auch einige
nützliche IE-Eigenheiten wie Filter und kontrollierte Scriptausführung sind aus
dem Browser geworfen worden. Wir halten das eher für ein Luxusproblem. Schepp
ist guter Dinge, dass bald alte IE genau so ein Unding sind wie alte
Chrome-Versionen, Peter verweist darauf, dass sich alte Software im
Business-Bereich oft sehr lange hält.


[00:23:47] HTML5-GLÜCKSRAD

BROWSER-INFRASTRUKTUR

Peter lobpreist die Vollständigkeit der HTML5-Specs am Beispiel eine inhaltlich
sehr langweiligen Abschnitts über Browser-Infrastruktur.

MEDIA ELEMENTS

Schepp berichtet, dass er in der Praxis keine freien Audio- und Videoformate
einsetzt, sondern einfach H.264 und MP3 mit einem Flash-Fallback ausliefert.
Seine Player-Libraries der Wahl sind MediaElement.js und der JWPlayer.

DAS MARK-ELEMENT

Peter quält Schepp mit Fragen zu obskuren HTML5-Elementen wie <mark>, <s> und
<u>. An sich finden wir Recycling ganz löblich, aber hier sind wir uns nicht so
sicher.


[00:39:44] KEINE SCHAUNOTIZEN

GOOGLE GLASS BROWSER

Nichts nerdiges, nur ein kleiner Trip Report von der Benutzung des
Glass-Browsers.

BASIC JAVASCRIPT: AN INTRODUCTION TO THE LANGUAGE

Der Doktor hat wieder zugeschlagen und liefert eine umfassende JS-Einführung für
erfahrene Programmierer ab.

WEB PLATFORM DOC SPRINT ZURICH

In Zürich treffen sich am 28. August Nerds, um Dokumentation für die
Web-Plattform zu schreiben. Klingt langeweilig, ist es aber nicht; Zweifler
mögen sich unseren Bericht in Revision 107 anhören.


[00:42:57] VERLOSUNG

DAS HTML5/CSS3-VIDEOTRAINING

Bis zu drei glückliche Gewinner erhalten je ein Exemplar von Peters
Videotraining zu HTML5 und CSS3! Teilnehmen ist einfach: schreibt einen
Kommentar und wünscht euch einen Aspekt von HTML, CSS, JavaScript oder
ähnlichem, den wir in einer der kommenden Revisionen für euch im Glücksrad-Style
erklären/besprechen/verdammen sollen. Teilnahme ist ab Erscheinen dieser
Revision für eine Woche möglich.

Revision 127: IE11, Glücksrad, Verlosung

<p>Bei einem schönen Digestivum drehten Stefan und Schepp ein paar mal am HTML5-Glücksrad und ließen einen Berg Links vom Stapel. Im Detail ergab sich das folgendermaßen:</p>
<h3>[00:00:41] News</h3>
<dl>
<dt><a href="https://www.mozilla.org/en-US/firefox/22.0/releasenotes/?utm_source=html5weekly&#038;utm_medium=email">Firefox 22</a></dt>
<dd>Firefox 22 bringt der breiten Masse WebRTC und unprefixtes CSS Flexbox.</dd>
<dt><a href="http://www.mobilexweb.com/blog/ios7-beta-safari-html5">iOS 7 beta and the new Safari for web developers</a></dt>
<dd>Maximiliano Firtman hat sich angeschaut, was iOS7 Neues für uns Entwickler bereithält. Unter anderem sind das Video-Untertitel, XHR 2, CSS Regions und CSS Flexbox.</dd>
</dl>
<h3>Glücksrad</h3>
<dl>
<dt>[00:07:02] <a href="http://www.whatwg.org/specs/web-apps/current-work/#image-button-state-(type=image)">input[type=&#8220;image&#8220;]</a></dt>
<dd>Wir reden über den Sinn und Ursprung dieses Inputs, und dass er fast immer zweckentfremdet anzutreffen ist.</dd>
<dt>[00:16:12] <a href="http://www.whatwg.org/specs/web-apps/current-work/#form-submission-0">Form Submission</a></dt>
<dd>In HTML5 ist es möglich, dass jeder Submit-Knopf eigene Aktionen, Methoden, etc. für das ihn umgebende Formular festlegt.</dd>
<dt>[00:20:35] <a href="http://www.whatwg.org/specs/web-apps/current-work/#pseudo-classes">Pseudo-classes</a></dt>
<dd>Wir betrachten ein paar der interessanteren Pseudoklassen aus der Spec, und streifen dabei das Select-Widget <a href="http://ivaynberg.github.io/select2/">Select2</a>.</dd>
<dt>[00:32:35] <a href="http://www.whatwg.org/specs/web-apps/current-work/#origin-0">Origin</a></dt>
<dd>Wir reden darüber, was der Origin im Client für eine Rolle spielt und wie man mit ihm umgehen kann bzw. sollte.</dd>
</dl>
<h3>[00:39:16] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://adobe-webplatform.github.io/css-regions-polyfill/">CSSRegions.js</a></dt>
<dd>Adobe hat einen CSS Regions Polyfill veröffentlicht. Macht einen guten Eindruck, bald auch mit IE9-Support.</dd>
<dt><a href="http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/">Hinweis zur vergangenen Sendung: display:table hat Auswirkungen auf manche Screenreader</a></dt>
<dd>Danke für den Hinweis an <a href="https://twitter.com/tcaspers">Tomas Caspers</a>!</dd>
<dt><a href="http://goodui.org/">Good UI</a></dt>
<dd>16 kurze und sehr sinnvolle Tipps für einen perfekten Userflow</dd>
<dt><a href="http://bradfrostweb.com/blog/post/mobile-web-problems/">Mobile Web Problems</a></dt>
<dd>Passend dazu zeigt <a href="https://twitter.com/brad_frost">Brad Frost</a>, wie man mit seinen mobilen Besuchern besser nicht umgehen sollte, um deren Flow nicht abrupt zunichte zu machen.</dd>
<dt><a href="http://sarasoueidan.com/blog/ui-transitions-creative-add-remove-effects-for-list-items/">UI Transitions</a></dt>
<dd><a href="https://twitter.com/SaraSoueidan">Sara Soueidan</a> hat ein paar erstklassige CSS Animationen für das Einhängen und Entfernen neuer DOM-Elemente entwickelt und zusammengetragen.</dd>
<dt><a href="http://thenittygritty.co/ffos-apps">Building Apps For Firefox OS, Chrome OS And The Web</a></dt>
<dd>Und der fantastische <a href="https://twitter.com/addyosmani">Addy Osmani</a> schreibt bei Kahlil und Hans drüben wie man eine App entwickelt, die nicht nur im Web sondern auch auf Chrome OS und Firefox OS als Bürger erster Klasse läuft.</dd>
</dl>


Bei einem schönen Digestivum drehten Stefan und Schepp ein paar mal am
HTML5-Glücksrad und ließen einen Berg Links vom Stapel. Im Detail ergab sich das
folgendermaßen:


[00:00:41] NEWS

FIREFOX 22

F…

Bei einem schönen Digestivum drehten Stefan und Schepp ein paar mal am
HTML5-Glücksrad und ließen einen Berg Links vom Stapel. Im Detail ergab sich das
folgendermaßen:


[00:00:41] NEWS

FIREFOX 22

Firefox 22 bringt der breiten Masse WebRTC und unprefixtes CSS Flexbox.

IOS 7 BETA AND THE NEW SAFARI FOR WEB DEVELOPERS

Maximiliano Firtman hat sich angeschaut, was iOS7 Neues für uns Entwickler
bereithält. Unter anderem sind das Video-Untertitel, XHR 2, CSS Regions und CSS
Flexbox.


GLÜCKSRAD

[00:07:02] INPUT[TYPE=“IMAGE“]

Wir reden über den Sinn und Ursprung dieses Inputs, und dass er fast immer
zweckentfremdet anzutreffen ist.

[00:16:12] FORM SUBMISSION

In HTML5 ist es möglich, dass jeder Submit-Knopf eigene Aktionen, Methoden, etc.
für das ihn umgebende Formular festlegt.

[00:20:35] PSEUDO-CLASSES

Wir betrachten ein paar der interessanteren Pseudoklassen aus der Spec, und
streifen dabei das Select-Widget Select2.

[00:32:35] ORIGIN

Wir reden darüber, was der Origin im Client für eine Rolle spielt und wie man
mit ihm umgehen kann bzw. sollte.


[00:39:16] KEINE SCHAUNOTIZEN

CSSREGIONS.JS

Adobe hat einen CSS Regions Polyfill veröffentlicht. Macht einen guten Eindruck,
bald auch mit IE9-Support.

HINWEIS ZUR VERGANGENEN SENDUNG: DISPLAY:TABLE HAT AUSWIRKUNGEN AUF MANCHE
SCREENREADER

Danke für den Hinweis an Tomas Caspers!

GOOD UI

16 kurze und sehr sinnvolle Tipps für einen perfekten Userflow

MOBILE WEB PROBLEMS

Passend dazu zeigt Brad Frost, wie man mit seinen mobilen Besuchern besser nicht
umgehen sollte, um deren Flow nicht abrupt zunichte zu machen.

UI TRANSITIONS

Sara Soueidan hat ein paar erstklassige CSS Animationen für das Einhängen und
Entfernen neuer DOM-Elemente entwickelt und zusammengetragen.

BUILDING APPS FOR FIREFOX OS, CHROME OS AND THE WEB

Und der fantastische Addy Osmani schreibt bei Kahlil und Hans drüben wie man
eine App entwickelt, die nicht nur im Web sondern auch auf Chrome OS und Firefox
OS als Bürger erster Klasse läuft.

Revision 126: Inputs, Formulare, Pseudoklassen und Origin

<p>Diese Woche sind fast alle irgendwie unterwegs. Deshalb lud Hans sich Stammgast <a href="http://helloanselm.com/">Anselm Hannemann</a> ein, um ein bisschen über die aktuellen Themen des Web zu sprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:33] <a href="http://blog.chromium.org/2013/06/retiring-chrome-frame.html">Bye, Bye, Chrome Frame</a></dt>
<dd>Google wird ab Januar 2014 Chrome Frame nicht weiter supporten oder entwickeln. Dadurch fällt die Möglichkeit moderne Features auch in alten Browsern zu nutzen weg. Wir finden es schade, dass Chrome Frame stirbt, sehen es aber als logische Konsequenz des aktuellen User-Zahlen veralteter Browser.</dd>
<dt>[00:12:44] <a href="http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table">CSS stacking with display:table</a></dt>
<dd>Mit CSS Flexbox kann man Elemente beliebig sortieren, egal wie sie im Markup eingebunden sind. Ian Devlin zeigt eine Möglichkeit, wie das zumindest teilweise auch mit <code>display: table</code> und anderen <code>display</code>-Werten gemacht werden kann. Anselm führt an, dass das eventuell zu Problemen auf Screenreadern kommen kann, doch ist das tatsächlich so?</dd>
</dl>
<h3>[00:23:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://wdrl.helloanselm.com/">Web Development Reading List</a></dt>
<dd>Die Reading List von Anselm gibt es nun als tatsächlichen Newsletter. Anmelden!</dd>
<dt><a href="http://www.timkadlec.com/2013/06/why-we-need-responsive-images/">Why We Need Responsive Images</a></dt>
<dd>Eine Auswertung, wie viel Kilobytes man sich mit Responsive Images tatsächlich sparen könnte.</dd>
<dt><a href="http://devtoolsecrets.com/">DevTool Secrets</a></dt>
<dd>Eine Liste an nützlichen Tips für die Developer Tools. Peter hat zufälligerweise <a href="http://www.peterkroener.de/50-kleine-tipps-und-tricks-zu-den-chrome-developer-tools/">auch einige Tips</a> zusammengetragen.</dd>
<dt><a href="http://www.grumpicon.com/">Grumpicon</a></dt>
<dd>Drag and Drop SVGs in die App und man bekommt PNG Fallbacks zurück und die einfachste Möglichkeit diese im CSS einzusetzen.</dd>
<dt><a href="http://ianfeather.co.uk/web-fonts-and-the-critical-path/">Web Fonts and the Critical Path</a></dt>
<dd>Webfonts können die Ladezeit einer Seite negativ beeinflussen. Dieser Artikel gibt eine gute Übersicht, was man beachten sollte.</dd>
<dt><a href="http://tympanus.net/codrops/2013/01/09/designing-for-the-empty-states/">Designing for the empty state</a></dt>
<dd>Einige Ideen für Apps und Websites, wie man leere Inboxes, Fehlermeldungen und ähnliches gestalten kann.</dd>
<dt><a href="http://vimeo.com/fronttrends">Front-Trends Videos</a></dt>
<dd>Interessante Vorträge von der Front-Trends sind nun online.</dd>
<dt><a href="http://philipwalton.com/articles/introducing-html-inspector/">HTML Inspector</a></dt>
<dd>HTML Inspector ist eine JS Library, die als (HTML) Validator, Konventions-Überprüfer und erweiterungsfähiges Tool funktioniert.</dd>
<dt><a href="http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/">The JavaScript Behind Touch-Friendly Sliders</a></dt>
<dd>Es ist nicht so schwierig einen Slider zugänglich für Touch Geräte zu machen. Seht selbst.</dd>
</dl>


Diese Woche sind fast alle irgendwie unterwegs. Deshalb lud Hans sich Stammgast
Anselm Hannemann ein, um ein bisschen über die aktuellen Themen des Web zu
sprechen.


SCHAUNOTIZEN

[00:00:33] BYE, BYE…

Diese Woche sind fast alle irgendwie unterwegs. Deshalb lud Hans sich Stammgast
Anselm Hannemann ein, um ein bisschen über die aktuellen Themen des Web zu
sprechen.


SCHAUNOTIZEN

[00:00:33] BYE, BYE, CHROME FRAME

Google wird ab Januar 2014 Chrome Frame nicht weiter supporten oder entwickeln.
Dadurch fällt die Möglichkeit moderne Features auch in alten Browsern zu nutzen
weg. Wir finden es schade, dass Chrome Frame stirbt, sehen es aber als logische
Konsequenz des aktuellen User-Zahlen veralteter Browser.

[00:12:44] CSS STACKING WITH DISPLAY:TABLE

Mit CSS Flexbox kann man Elemente beliebig sortieren, egal wie sie im Markup
eingebunden sind. Ian Devlin zeigt eine Möglichkeit, wie das zumindest teilweise
auch mit display: table und anderen display-Werten gemacht werden kann. Anselm
führt an, dass das eventuell zu Problemen auf Screenreadern kommen kann, doch
ist das tatsächlich so?


[00:23:00] KEINE SCHAUNOTIZEN

WEB DEVELOPMENT READING LIST

Die Reading List von Anselm gibt es nun als tatsächlichen Newsletter. Anmelden!

WHY WE NEED RESPONSIVE IMAGES

Eine Auswertung, wie viel Kilobytes man sich mit Responsive Images tatsächlich
sparen könnte.

DEVTOOL SECRETS

Eine Liste an nützlichen Tips für die Developer Tools. Peter hat zufälligerweise
auch einige Tips zusammengetragen.

GRUMPICON

Drag and Drop SVGs in die App und man bekommt PNG Fallbacks zurück und die
einfachste Möglichkeit diese im CSS einzusetzen.

WEB FONTS AND THE CRITICAL PATH

Webfonts können die Ladezeit einer Seite negativ beeinflussen. Dieser Artikel
gibt eine gute Übersicht, was man beachten sollte.

DESIGNING FOR THE EMPTY STATE

Einige Ideen für Apps und Websites, wie man leere Inboxes, Fehlermeldungen und
ähnliches gestalten kann.

FRONT-TRENDS VIDEOS

Interessante Vorträge von der Front-Trends sind nun online.

HTML INSPECTOR

HTML Inspector ist eine JS Library, die als (HTML) Validator,
Konventions-Überprüfer und erweiterungsfähiges Tool funktioniert.

THE JAVASCRIPT BEHIND TOUCH-FRIENDLY SLIDERS

Es ist nicht so schwierig einen Slider zugänglich für Touch Geräte zu machen.
Seht selbst.

Revision 125: Bye, Bye, Chrome Frame und Table Layouts

<p>Kleine Runde, große Spieldauer: In der 124. Revision des Working Drafts beleuchten der Schepp und Stefan eine Reihe eher JavaScript-lastige Themen. Neben dem gewohnten Programm gibt es auch noch eine Verlosung: <a href="http://twitter.com/asciidisco">Sebastian Golasch</a> stellt uns ein Ticket für das <a href="http://braincamp-cologne.com/">Braincamp Cologne</a> zur Verfügung! Unsere Trello Notizen findet ihr <a href="https://trello.com/board/revision-124/51af3edd75aa1e654d002c06">hier</a>.</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28] <a title="Screen Readers at a Crossroads" href="http://accessibility.oit.ncsu.edu/blog/2013/05/31/screen-readers-at-a-crossroads/">Screen Readers at a Crossroads</a></dt>
<dd>Auf der letzten Google IO hat man die <a href="http://www.youtube.com/watch?v=YyWu9HB9QtU">ChromeVox API</a> vorgestellt. Diese ermöglicht die zusätzliche Annotierung von Webseiten Content speziell für Screen Reader. Große Chance für qualitative Inhalte oder direkter Weg um Unfug anzustellen? Wir versuchen diese Frage zu beantworten und geben die Quintessenz des Artikels der NC State University wieder.</dd>
<dt>[00:11:58] <a href="https://blog.twitter.com/2013/csp-rescue-leveraging-browser-security">CSP to the Rescue</a></dt>
<dd>Spätestens seit der ersten jQuery EU Konferenz und dem äußerst informativen Primer von <a href="https://mikewest.org/2011/10/content-security-policy-a-primer">Mike West</a> ist die Working Draft Crew erklärter Fan des Content Security Protocols. Twitter hat CSP nun auf ihren Seiten implementiert und den Schalter vorerst auf &#8222;Analyse&#8220; gestellt. Perfektes Timing, denn CSP ist in Version 1.0 nun auch in <a href="https://hacks.mozilla.org/2013/05/content-security-policy-1-0-lands-in-firefox-aurora/">Firefox Aurora</a>. </dd>
<dt>[00:28:00] <a href="http://www.html5rocks.com/en/tutorials/speed/script-loading/">Deep dive into the murky waters of script loading</a></dt>
<dd>JavaScript laden ist ja eh einfach, oder? Nun, theoretisch schon, praktisch gibt&#8217;s da aber eine Menge an Alternativen, die ihr für und wider haben. Jake Archibald listet diese ausführlich auf, die Moderatoren geben fröhlich ihren Senf dazu ab. Die eine wahre Methode? Gibt&#8217;s wahrscheinlich nicht. Dafür aber <a href="http://www.chromium.org/spdy/link-headers-and-server-hint/link-rel-subresource">die subsource Ausprägung des rel-Attributs</a>, die uns zumindest neu war.</dd>
</dl>
<h3>[00:42:43] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://html5accessibility.com/">HTML5 Accesibility</a></dt>
<dd>Über den Status der Accessibility Unterstützung in den aktuellen HTML5 Browsern</dd>
<dt><a href="http://www.youtube.com/playlist?list=PL055Epbe6d5avZGXwE5u039VQq_oQFgrc">Fluent Conf 2013</a></dt>
<dd>Die Videos der diesjährigen Fluent Conf sind da!</dd>
<dt><a href="https://github.com/google/ios-webkit-debug-proxy">iOS Webkit Debug Proxy</a></dt>
<dd>Google veröffentlicht einen Proxy, um in den Dev Tools nicht nur Mobile Safari, sondern auch alle UIWebViews zu debuggen</dd>
<dt><a href="http://hop.ie/blog/portal/">Portal in CSS3</a></dt>
<dd>Eine Szene aus dem Portal Game in CSS3 implementiert. Und nebenbei gute Übersicht über alle 3D Transformationen.</dd>
<dt><a href="https://github.com/rikschennink/conditioner">Conditioner</a></dt>
<dd>Browsereigenschaften checken und entsprechend Content laden? Das macht der Conditioner.</dd>
<dt><a href="https://picni.cc/">Picnicc</a></dt>
<dd>Parametrisierte Builds, einfach gemacht.</dd>
<dt><a href="http://braincamp-cologne.com">Verlosung: Ticket für BrainCamp Cologne</a></dt>
<dd>Wir verlosen ein Ticket zum BrainCamp Cologne! Aufgabe ist easy und an entsprechender Stelle im Podcast zu hören. Antwort einfach in die Kommentare!</dd>
</dl>


Kleine Runde, große Spieldauer: In der 124. Revision des Working Drafts
beleuchten der Schepp und Stefan eine Reihe eher JavaScript-lastige Themen.
Neben dem gewohnten Programm gibt es auch noch eine …

Kleine Runde, große Spieldauer: In der 124. Revision des Working Drafts
beleuchten der Schepp und Stefan eine Reihe eher JavaScript-lastige Themen.
Neben dem gewohnten Programm gibt es auch noch eine Verlosung: Sebastian Golasch
stellt uns ein Ticket für das Braincamp Cologne zur Verfügung! Unsere Trello
Notizen findet ihr hier.


KEINE NEWS


SCHAUNOTIZEN

[00:00:28] SCREEN READERS AT A CROSSROADS

Auf der letzten Google IO hat man die ChromeVox API vorgestellt. Diese
ermöglicht die zusätzliche Annotierung von Webseiten Content speziell für Screen
Reader. Große Chance für qualitative Inhalte oder direkter Weg um Unfug
anzustellen? Wir versuchen diese Frage zu beantworten und geben die Quintessenz
des Artikels der NC State University wieder.

[00:11:58] CSP TO THE RESCUE

Spätestens seit der ersten jQuery EU Konferenz und dem äußerst informativen
Primer von Mike West ist die Working Draft Crew erklärter Fan des Content
Security Protocols. Twitter hat CSP nun auf ihren Seiten implementiert und den
Schalter vorerst auf „Analyse“ gestellt. Perfektes Timing, denn CSP ist in
Version 1.0 nun auch in Firefox Aurora. 

[00:28:00] DEEP DIVE INTO THE MURKY WATERS OF SCRIPT LOADING

JavaScript laden ist ja eh einfach, oder? Nun, theoretisch schon, praktisch
gibt’s da aber eine Menge an Alternativen, die ihr für und wider haben. Jake
Archibald listet diese ausführlich auf, die Moderatoren geben fröhlich ihren
Senf dazu ab. Die eine wahre Methode? Gibt’s wahrscheinlich nicht. Dafür aber
die subsource Ausprägung des rel-Attributs, die uns zumindest neu war.


[00:42:43] KEINE SCHAUNOTIZEN

HTML5 ACCESIBILITY

Über den Status der Accessibility Unterstützung in den aktuellen HTML5 Browsern

FLUENT CONF 2013

Die Videos der diesjährigen Fluent Conf sind da!

IOS WEBKIT DEBUG PROXY

Google veröffentlicht einen Proxy, um in den Dev Tools nicht nur Mobile Safari,
sondern auch alle UIWebViews zu debuggen

PORTAL IN CSS3

Eine Szene aus dem Portal Game in CSS3 implementiert. Und nebenbei gute
Übersicht über alle 3D Transformationen.

CONDITIONER

Browsereigenschaften checken und entsprechend Content laden? Das macht der
Conditioner.

PICNICC

Parametrisierte Builds, einfach gemacht.

VERLOSUNG: TICKET FÜR BRAINCAMP COLOGNE

Wir verlosen ein Ticket zum BrainCamp Cologne! Aufgabe ist easy und an
entsprechender Stelle im Podcast zu hören. Antwort einfach in die Kommentare!

Revision 124: Screen Readers, CSP und In-depth Script Loading

<p>Zur Revision 123 begrüßen wir <a href="http://www.fettblog.eu/">Stefan Baumgartner</a> als neuen Co-Moderator im Team. Außerdem sind Peter, Schepp und Hans mit von der Partie.<br />
Das <a href="https://trello.com/board/revision-123/519c7f3e2dc601e777001702">Board zur Sendung findet ihr hier</a>.</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:26] <a href="http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/">Smartphone Browser localStorage is up to 5x Faster than Native Cache</a></dt>
<dd>Eine relativ aktueller Test hat ergeben, dass das Speichern von Daten im <a href="http://www.w3.org/TR/webstorage/">LocalStorage</a> eines Smartphones bis zu 5x schneller sein kann als der Browser-Cache. Das widerlegt einige Behauptungen aus der Vergangenheit. Wir sprechen über den zusätzlichen Zeitaufwand, den man mit der Nutzung von LocalStorage investieren muss, aber Schepp erklärt uns, dass es sich lohnt. Das Präsentations-Framework von Peter über das wir sprechen, findet ihr <a href="http://pik.peterkroener.de/">hier</a>.</dd>
<dt>[00:16:07] <a href="http://net.tutsplus.com/tutorials/javascript-ajax/cargo-culting-in-javascript/">Cargo-Culting in JavaScript</a></dt>
<dd><a href="http://de.wikipedia.org/wiki/Cargo-Kult">James Padolsey</a> ist der Meinung, dass viele Developer <a href="http://de.wikipedia.org/wiki/Cargo-Kult">Cargo-Culting</a> mit manchen JavaScript Konventionen betreiben. Aber wer von uns nutzt schon den <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function-Constructor</a> oder <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a>? Und <a href="http://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockfords</a> Guidelines sind sicher ein guter Anhaltspunkt für JavaScript-Entwickler. Man muss sie nur verstehen, anstatt sie blind zu adaptieren.</dd>
<dt>[00:28:50] <a href="http://www.holovaty.com/writing/prerendering/">Using HTML5 prerendering to speed up a multi-page registration process</a></dt>
<dd>Mit <a href="https://developers.google.com/chrome/whitepapers/prerender">Prerendering</a> von Inhalten und <a href="https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching#Controlling_prefetching_from_content">Link-</a< &#038; <a href="https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching">DNS-Prefetching</a> kann man die Performance von vielen Seiten verbessern, gerade wenn man die nächsten Aktionen des Nutzers &#8222;vorhersehen&#8220; kann. Aber man muss aufpassen, dass man das Netzwerk nicht zu sehr beansprucht. Vor allem wenn der Nutzer <a href="http://www.youtube.com/watch?v=dASOm88Wh8g">mobil unterwegs</a> ist.</dd>
</dl>
<h3>[00:41:38] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#canvaspathmethods">CanvasPathMethods</a></dt>
<dd>Canvas wird für &#8222;normales&#8220; Web-Development eher selten verwendet. Dabei gibt es ziemlich viele Anwendungsmöglichkeiten, die sich mit <a href="http://flashcanvas.net/">Fallbacks</a> auch für alte Browser umsetzen lassen. Abstraktionen und <a href="https://github.com/gokercebeci/canvasresize">Helper</a> gibt es sowieso genug.</dd>
</dl>
<h3>[00:48:32] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://uptodate.frontendrescue.org/">How to keep up to date on Front-End Technologies</a></dt>
<dd>Listen von interessanten Developern, Podcasts, Blogs und vielem mehr um auf dem aktuellen Stand zu bleiben.</dd>
<dt><a href="http://www.heidisql.com/forum.php?t=12650">HeidiSQL 8.0</a></dt>
<dd>Die Windows SQL Administrationsoberfläche HeidiSQL wurde in Version 8.0 veröffentlicht. Auf Mac macht <a href="http://www.sequelpro.com/">Sequel Pro</a> glücklich.</dd>
<dt><a href="http://xregexp.com/">XRegExp</a></dt>
<dd>Eine JavaScript RegEx Library.</dd>
<dt><a href="https://github.com/ai/autoprefixer">Autoprefixer</a></dt>
<dd>CSS Vendor-Prefixes mit JavaScript. Ähnlich wie <a href="http://leaverou.github.io/prefixfree/">Prefixfree</a>, nur maintained und besser.</dd>
<dt><a href="https://github.com/marijnh/tern_for_sublime">Tern for Sublime</a></dt>
<dd>Das Tern-Plugin für Sublime Text, das funktioniert.</dd>
<dt><a href="http://css-tricks.com/sass-style-guide/">Sass Style Guide</a></dt>
<dd>Ein paar Tips zum sauberen Aufbau von Sass Code.</dd>
<dt><a href="http://devsmeetup.de/">Developer MeetUp Freiburg</a></dt>
<dd>Hans organisiert am 12. Juni ein Developer und Software Engineering MeetUp in Freiburg. Wer Lust hat kommt vorbei.</dd>
</dl>


Zur Revision 123 begrüßen wir Stefan Baumgartner als neuen Co-Moderator im Team.
Außerdem sind Peter, Schepp und Hans mit von der Partie.
Das Board zur Sendung findet ihr hier.


KEINE NEWS


SCHAUNOT…

Zur Revision 123 begrüßen wir Stefan Baumgartner als neuen Co-Moderator im Team.
Außerdem sind Peter, Schepp und Hans mit von der Partie.
Das Board zur Sendung findet ihr hier.


KEINE NEWS


SCHAUNOTIZEN

[00:00:26] SMARTPHONE BROWSER LOCALSTORAGE IS UP TO 5X FASTER THAN NATIVE CACHE

Eine relativ aktueller Test hat ergeben, dass das Speichern von Daten im
LocalStorage eines Smartphones bis zu 5x schneller sein kann als der
Browser-Cache. Das widerlegt einige Behauptungen aus der Vergangenheit. Wir
sprechen über den zusätzlichen Zeitaufwand, den man mit der Nutzung von
LocalStorage investieren muss, aber Schepp erklärt uns, dass es sich lohnt. Das
Präsentations-Framework von Peter über das wir sprechen, findet ihr hier.

[00:16:07] CARGO-CULTING IN JAVASCRIPT

James Padolsey ist der Meinung, dass viele Developer Cargo-Culting mit manchen
JavaScript Konventionen betreiben. Aber wer von uns nutzt schon den
Function-Constructor oder eval? Und Douglas Crockfords Guidelines sind sicher
ein guter Anhaltspunkt für JavaScript-Entwickler. Man muss sie nur verstehen,
anstatt sie blind zu adaptieren.

[00:28:50] USING HTML5 PRERENDERING TO SPEED UP A MULTI-PAGE REGISTRATION
PROCESS

Mit Prerendering von Inhalten und Link-DNS-Prefetching kann man die Performance
von vielen Seiten verbessern, gerade wenn man die nächsten Aktionen des Nutzers
„vorhersehen“ kann. Aber man muss aufpassen, dass man das Netzwerk nicht zu sehr
beansprucht. Vor allem wenn der Nutzer mobil unterwegs ist.


[00:41:38] GLÜCKSRAD

CANVASPATHMETHODS

Canvas wird für „normales“ Web-Development eher selten verwendet. Dabei gibt es
ziemlich viele Anwendungsmöglichkeiten, die sich mit Fallbacks auch für alte
Browser umsetzen lassen. Abstraktionen und Helper gibt es sowieso genug.


[00:48:32] KEINE SCHAUNOTIZEN

HOW TO KEEP UP TO DATE ON FRONT-END TECHNOLOGIES

Listen von interessanten Developern, Podcasts, Blogs und vielem mehr um auf dem
aktuellen Stand zu bleiben.

HEIDISQL 8.0

Die Windows SQL Administrationsoberfläche HeidiSQL wurde in Version 8.0
veröffentlicht. Auf Mac macht Sequel Pro glücklich.

XREGEXP

Eine JavaScript RegEx Library.

AUTOPREFIXER

CSS Vendor-Prefixes mit JavaScript. Ähnlich wie Prefixfree, nur maintained und
besser.

TERN FOR SUBLIME

Das Tern-Plugin für Sublime Text, das funktioniert.

SASS STYLE GUIDE

Ein paar Tips zum sauberen Aufbau von Sass Code.

DEVELOPER MEETUP FREIBURG

Hans organisiert am 12. Juni ein Developer und Software Engineering MeetUp in
Freiburg. Wer Lust hat kommt vorbei.

Revision 123: Cargo-Culting in JS, localStorage und Prerendering

<p>Letzte Woche haben wir die <a href="http://2013.beyondtellerrand.com/">beyond tellerrand 2013</a> in Düsseldorf besucht und dabei die Gelegenheit genutzt, <a href="http://christianheilmann.com/">Christian Heilmann</a> von Mozilla vors Mikro zu bekommen und ihn zu <a href="http://www.mozilla.org/de/firefox/partners/">Firefox OS</a> zu befragen. Das Gespräch haben wir im Foyer aufgenommen, was leider mit vielen Nebengeräuschen einher ging. Sorry dafür.</p>


Letzte Woche haben wir die beyond tellerrand 2013 in Düsseldorf besucht und
dabei die Gelegenheit genutzt, Christian Heilmann von Mozilla vors Mikro zu
bekommen und ihn zu Firefox OS zu befragen. Das …

Letzte Woche haben wir die beyond tellerrand 2013 in Düsseldorf besucht und
dabei die Gelegenheit genutzt, Christian Heilmann von Mozilla vors Mikro zu
bekommen und ihn zu Firefox OS zu befragen. Das Gespräch haben wir im Foyer
aufgenommen, was leider mit vielen Nebengeräuschen einher ging. Sorry dafür.

Revision 122: Interview mit Chris Heilmann zu Firefox OS

<p>Neue Browser, alte Probleme&nbsp;&ndash; diesmal mit Schepp, Peter und Rodney an den Mikrofonen.</p>
<h3>[00:00:20] News</h3>
<dl>
<dt><a href="http://www.mozilla.org/en-US/firefox/21.0/releasenotes/">Firefox 21</a></dt>
<dd>Frisch released und mit Support für <code>&lt;main&gt;</code>, Scoped Stylesheets (<a href="http://workingdraft.de/104/">Working Draft berichtete</a>) und ersten Teilen der Crypto-API.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="http://blog.alexmaccaw.com/requestautocomplete">Chrome’s requestAutocomplete()</a></dt>
<dd>Chrome hat <a href="http://www.chromium.org/developers/using-requestautocomplete">ein neues Feature</a>, das es Webseiten erlaubt Autocomplete für Formulare anzufordern. Gedacht ist das ganze eigentlich nur für Payment, was Peter etwas einschränkend findet, Schepp aber ob der ranzigkeit der Alternativlösungen für ganz großartig erachtet. Außerdem kommen der <a href="http://de.wikipedia.org/wiki/Payment_Card_Industry_Data_Security_Standard">Payment Card Industry Data Security Standard</a> und <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute">das neuerdings globale hidden-Attribut</a> zur Sprache.</dd>
<dt>[00:17:06] <a href="http://www.golem.de/news/web-components-html-elemente-selber-bauen-1305-99318.html">Web Components</a></dt>
<dd>Neben <a href="https://hacks.mozilla.org/2013/05/speed-up-app-development-with-x-tag-and-web-components/">Mozillas X-Tag</a> hat nun auch Google mit <a href="http://polymer-project.appspot.com/">Polymer</a> Polyfill-Material für Web Components gebaut. Rodney erklärt den Unterschied zwischen <a href="http://www.w3.org/standards/techs/components#w3c_all">Web Components</a> und <a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/">Shadow DOM</a> und den diversen Einzelteilen der jeweiligen Technologien.</dd>
<dt>[00:31:31] <a href="http://www.icenium.com/blog/icenium-team-blog/2013/04/23/is-this-thing-on-(part-1)">Is This Thing On?</a></dt>
<dd>Einen eigentlich nur mittelguten Artikel nehmen Rodney und Peter zum Anlass, sich um die beste Story im Bereich &#8222;worst of Offline-Status-Festellung im Browser&#8220; zu kabbeln.Weder die <a href="http://www.whatwg.org/specs/web-apps/current-work/#browser-state">HTML5-APIs für den Online-Status</a> noch die Disconnect-Events von <a href="http://www.w3.org/TR/websockets/">Web Sockets</a> noch <a href="http://www.w3.org/TR/eventsource/">Event Sources</a> taugen. Rodney kam in seinem Projekt nicht umhin, eine <a href="http://de.wikipedia.org/wiki/Endlicher_Automat">State Machine</a> mit Heartbeats auf Basis von Web Sockets (und Long Polling für Android) zu bauen. Außerdem kommt kurz <a href="Socket.IO">http://socket.io/</a> zur Sprache.</dd>
</dl>
<h3>[00:35:30] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#attr-iframe-sandbox">Sandbox-Attribut</a></dt>
<dd>Das Sandbox-Attribut wird es einst erlauben, die Möglichkeiten einer Seite in einem Iframe einzuschränken oder sogar zu erweitern.</dd>
</dl>
<h3>[01:01:50] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://alphapixels.com/prepros/">Prepros</a></dt>
<dd>Das darf man nicht außer Acht lassen: ein Präprozessor-GUI für Windows!</dd>
<dt><a href="http://web-design-weekly.com/2013/05/12/handy-sass-mixins/">Handy Sass Mixins</a></dt>
<dd>Bei diesem Titel sind die Zusammenhänge glasklar.</dd>
<dt><a href="http://filepicker.github.io/codeblock.js/">Codeblock.js</a></dt>
<dd>Im Prinzip brauchen wir nur drei Dinge um allen Code zu beschreiben: einen Syntaxhighlighter, einen darin eingebautem Editor und einen &#8222;Run&#8220;-Button. Alles andere ist unnötig und deshalb enthält dieses Plugin auch nur diese drei Funktionen.</dd>
<dt><a href="http://www.hongkiat.com/blog/google-maps-styles/">How to Style Google Maps</a></dt>
<dd>Dass das überhaupt geht wissen auch nur die wenigsten.</dd>
<dt><a href="http://tech.pro/tutorial/1214/javascript-regular-expression-enlightenment">JavaScript Regular Expression Enlightenment</a></dt>
<dd>Wie reguläre Ausdrücke funktionieren muss man wissen und dieser Artikel erklärt es in epischer Breite.</dd>
<dt><a href="http://vier.fm/diskussionen/">Vier Diskussionen</a></dt>
<dd>Podcast-Kameraden, bekannt, ja? Nicht? Dann anhören!</dd>
</dl>


Neue Browser, alte Probleme – diesmal mit Schepp, Peter und Rodney an den
Mikrofonen.


[00:00:20] NEWS

FIREFOX 21

Frisch released und mit Support für <main>, Scoped Stylesheets (Working Draft
beric…

Neue Browser, alte Probleme – diesmal mit Schepp, Peter und Rodney an den
Mikrofonen.


[00:00:20] NEWS

FIREFOX 21

Frisch released und mit Support für <main>, Scoped Stylesheets (Working Draft
berichtete) und ersten Teilen der Crypto-API.


SCHAUNOTIZEN

[00:01:00] CHROME’S REQUESTAUTOCOMPLETE()

Chrome hat ein neues Feature, das es Webseiten erlaubt Autocomplete für
Formulare anzufordern. Gedacht ist das ganze eigentlich nur für Payment, was
Peter etwas einschränkend findet, Schepp aber ob der ranzigkeit der
Alternativlösungen für ganz großartig erachtet. Außerdem kommen der Payment Card
Industry Data Security Standard und das neuerdings globale hidden-Attribut zur
Sprache.

[00:17:06] WEB COMPONENTS

Neben Mozillas X-Tag hat nun auch Google mit Polymer Polyfill-Material für Web
Components gebaut. Rodney erklärt den Unterschied zwischen Web Components und
Shadow DOM und den diversen Einzelteilen der jeweiligen Technologien.

[00:31:31] IS THIS THING ON?

Einen eigentlich nur mittelguten Artikel nehmen Rodney und Peter zum Anlass,
sich um die beste Story im Bereich „worst of Offline-Status-Festellung im
Browser“ zu kabbeln.Weder die HTML5-APIs für den Online-Status noch die
Disconnect-Events von Web Sockets noch Event Sources taugen. Rodney kam in
seinem Projekt nicht umhin, eine State Machine mit Heartbeats auf Basis von Web
Sockets (und Long Polling für Android) zu bauen. Außerdem kommt kurz
http://socket.io/ zur Sprache.


[00:35:30] GLÜCKSRAD

SANDBOX-ATTRIBUT

Das Sandbox-Attribut wird es einst erlauben, die Möglichkeiten einer Seite in
einem Iframe einzuschränken oder sogar zu erweitern.


[01:01:50] KEINE SCHAUNOTIZEN

PREPROS

Das darf man nicht außer Acht lassen: ein Präprozessor-GUI für Windows!

HANDY SASS MIXINS

Bei diesem Titel sind die Zusammenhänge glasklar.

CODEBLOCK.JS

Im Prinzip brauchen wir nur drei Dinge um allen Code zu beschreiben: einen
Syntaxhighlighter, einen darin eingebautem Editor und einen „Run“-Button. Alles
andere ist unnötig und deshalb enthält dieses Plugin auch nur diese drei
Funktionen.

HOW TO STYLE GOOGLE MAPS

Dass das überhaupt geht wissen auch nur die wenigsten.

JAVASCRIPT REGULAR EXPRESSION ENLIGHTENMENT

Wie reguläre Ausdrücke funktionieren muss man wissen und dieser Artikel erklärt
es in epischer Breite.

VIER DISKUSSIONEN

Podcast-Kameraden, bekannt, ja? Nicht? Dann anhören!

Revision 121: requestAutocomplete, Web Components, Offline-Detection

<p>Christian und Hans besprachen diese Woche die Themen aus der Welt von CSS, Touch-Detection und verschlüsselten Medien.</p>
<h3>[00:00:15] News</h3>
<dl>
<dt><a href="http://www.jpegmini.com/windows">JPEGmini Windows App</a></dt>
<dd>JPEGmini gibt es nun endlich auch als Windows App.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:52] <a href="http://undercaffeinated.tumblr.com/post/49878531442/css-is-not-an-amoral-monster">CSS is not an amoral monster</a></dt>
<dd>Ben Henick ist der Meinung, dass CSS für Websites gar nicht so komplex ist, wie man vielleicht annehmen mag, wenn man die richtigen Methoden anwendet. Wir diskutieren darüber, wie modulares CSS das Bauen von Websites und Apps erleichtern kann und worauf man achten sollte.</dd>
<dt>[00:18:46] <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">You Can&#8217;t Detect A Touchscreen</a></dt>
<dd>Stu Cox weist darauf hin, dass es keine verlässliche Methode gibt, um Geräte zu kennen, die einen Touchscreen haben. Man kann lediglich erkennen, ob es die API für Touch-Gesten gibt, was aber nicht verlässlich ist. Aber braucht man die Information überhaupt? Und sollte man Websites nicht so bauen, dass sie für alle Eingabemethoden funktionieren?</dd>
<dt>[00:28:20] <a href="http://www.golem.de/news/drm-fuers-web-w3c-treibt-entwicklung-der-encrypted-media-extensions-voran-1305-99173.html">Encrypted Media Extensions</a></dt>
<dd>Inhalte im Web zu schützen ist eine problematische Angelegenheit, da Medien per se erst einmal offen zugänglich sind und somit downloadbar. Oft wird versucht die Inhalte beispielsweise durch Flash zu schützen. Diese Methode ist allerdings proprietär. Das W3C versucht nun mit einer eigenen Spezifikation für verschlüsselte Medien eine standardisierte Methode fürs Web zu kreieren.</dd>
</dl>
<h3>[00:41:39] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://angularjs.de/buch/">AngularJS Buch / Tutorial</a></dt>
<dd>Ein freies Buch über AngularJS, dass sich gerade noch in der Entwicklung befindet.</dd>
<dt><a href="http://csste.st/">csste.st</a></dt>
<dd>Resources und Tools zum Thema CSS Tests.</dd>
<dt><a href="http://html5doctor.com/howto-subheadings/">How to markup sub-headings (now that &lt;hgroup&gt; is gone)</a></dt>
<dd>Steve Faulkner beschreibt einige Methoden um Subheadlines mit den richtigen Tags zu verstehen.</dd>
<dt><a href="http://unicode-table.com/">Unicode Table</a></dt>
<dd>Eine übersichtliche Tabelle der Unicode Zeichen zum einfachen Copy&#038;Paste.</dd>
<dt><a href="http://vanamco.com/ghostlab/">Ghostlab</a></dt>
<dd>Ein weiteres Tool zum Debugging Cross-Browser und Cross-Device.</dd>
<dt><a href="http://demosthenes.info/blog/692/Vanishing-Acts-The-CSS-empty-Selector">The :empty selector</a></dt>
<dd>Der CSS Selector :empty wird viel zu selten verwendet. Hier gibt es eine Einführung und eine Liste an Dingen, die man bei der Nutzung beachten sollte.</dd>
<dt><a href="https://plus.google.com/u/0/106697091536876736486/posts/ea4Sy8bwAoU">Zopfli</a></dt>
<dd>Mathias Bynens beschreibt den neuen Komprimierungsalgorithmus Zopfli und stellt Tools zur Nutzung vor.</dd>
<dt><a href="http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/">Avoiding Unnecessary Paints</a></dt>
<dd>Wie man verhindert unnötige Repaints im Browser während des Scrollens verhindert, beschreibt Paul Lewis.</dd>
</dl>


Christian und Hans besprachen diese Woche die Themen aus der Welt von CSS,
Touch-Detection und verschlüsselten Medien.


[00:00:15] NEWS

JPEGMINI WINDOWS APP

JPEGmini gibt es nun endlich auch als Wi…

Christian und Hans besprachen diese Woche die Themen aus der Welt von CSS,
Touch-Detection und verschlüsselten Medien.


[00:00:15] NEWS

JPEGMINI WINDOWS APP

JPEGmini gibt es nun endlich auch als Windows App.


SCHAUNOTIZEN

[00:00:52] CSS IS NOT AN AMORAL MONSTER

Ben Henick ist der Meinung, dass CSS für Websites gar nicht so komplex ist, wie
man vielleicht annehmen mag, wenn man die richtigen Methoden anwendet. Wir
diskutieren darüber, wie modulares CSS das Bauen von Websites und Apps
erleichtern kann und worauf man achten sollte.

[00:18:46] YOU CAN’T DETECT A TOUCHSCREEN

Stu Cox weist darauf hin, dass es keine verlässliche Methode gibt, um Geräte zu
kennen, die einen Touchscreen haben. Man kann lediglich erkennen, ob es die API
für Touch-Gesten gibt, was aber nicht verlässlich ist. Aber braucht man die
Information überhaupt? Und sollte man Websites nicht so bauen, dass sie für alle
Eingabemethoden funktionieren?

[00:28:20] ENCRYPTED MEDIA EXTENSIONS

Inhalte im Web zu schützen ist eine problematische Angelegenheit, da Medien per
se erst einmal offen zugänglich sind und somit downloadbar. Oft wird versucht
die Inhalte beispielsweise durch Flash zu schützen. Diese Methode ist allerdings
proprietär. Das W3C versucht nun mit einer eigenen Spezifikation für
verschlüsselte Medien eine standardisierte Methode fürs Web zu kreieren.


[00:41:39] KEINE SCHAUNOTIZEN

ANGULARJS BUCH / TUTORIAL

Ein freies Buch über AngularJS, dass sich gerade noch in der Entwicklung
befindet.

CSSTE.ST

Resources und Tools zum Thema CSS Tests.

HOW TO MARKUP SUB-HEADINGS (NOW THAT <HGROUP> IS GONE)

Steve Faulkner beschreibt einige Methoden um Subheadlines mit den richtigen Tags
zu verstehen.

UNICODE TABLE

Eine übersichtliche Tabelle der Unicode Zeichen zum einfachen Copy&Paste.

GHOSTLAB

Ein weiteres Tool zum Debugging Cross-Browser und Cross-Device.

THE :EMPTY SELECTOR

Der CSS Selector :empty wird viel zu selten verwendet. Hier gibt es eine
Einführung und eine Liste an Dingen, die man bei der Nutzung beachten sollte.

ZOPFLI

Mathias Bynens beschreibt den neuen Komprimierungsalgorithmus Zopfli und stellt
Tools zur Nutzung vor.

AVOIDING UNNECESSARY PAINTS

Wie man verhindert unnötige Repaints im Browser während des Scrollens
verhindert, beschreibt Paul Lewis.

Revision 120: CSS Strukturieren, Sinn und Unsinn von Touchdetection, DRM

<p>Hans, Rodney und Peter erzählten, ranteten und verlasen wie üblich das neues aus der Web-Welt.</p>
<h3>[00:00:18] News</h3>
<dl>
<dt><a href="https://github.com/blog/1482-heads-up-nosniff-header-support-coming-to-chrome-and-firefox">nosniff header</a></dt>
<dd>Github berichtet, dass erste Browser den gegen Hotlinking helfenden HTTP-Header <code>nosniff</code> unterstützen.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:00] <a href="http://coding.smashingmagazine.com/2013/04/26/css3-transitions-thank-god-specification/">Thank God We Have A Specification</a></dt>
<dd>Hans und Peter erstarrten in Ehrfurcht vor Rodneys bei Smashing Mag erschienenem Magnum Opus über Bugs in CSS-Transitions. Rod gibt seine liebsten Bugs zum besten und berichtet über die Entstehung seiner <a href="http://test.csswg.org/shepherd/search/spec/CSS3-TRANSITIONS/">Testsuite</a>. Wir empfehlen außerdem die <a href="http://testthewebforward.org/">Test the Web Forward</a> für alle Hörer&nbsp;&ndash; Tests schreiben ist überraschend produktiv und man lernt extrem viel, auch wenn man kein Uber-Nerd ist.</dd>
<dt>[00:25:25] <a href="https://coderwall.com/p/knyvug">Using flag in language selector is still okay</a></dt>
<dd>Landesflaggen als Sprachauswahl-Icon&nbsp;&ndash; gute Idee oder beknackte Idee? Der Artikel ist die Gegenrede zur <a href="http://bittersmann.de/articles/no-flags/">Position von Gunnar Bittersmann</a>. Es fiel uns nicht leicht, großes Interesse für dieses Thema aufzubringen.</dd>
</dl>
<h3>[00:36:22] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">Canvas-Element</a> bzw. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#building-paths">Canvas-Pfadfunktionen</a></dt>
<dd>Weder Rodney noch Hans haben das Canvas-Element (oder seine Pfad-API) je gebraucht. Peter hackt damit zumindest gelegentlich herum und empfiehlt den Katzen-Erkenner <a href="http://harthur.github.io/kittydar/">Kittydar</a> sowie <a href="http://threejs.org/">three.js</a>, die WebGL-Engine für Dummies.</dd>
</dl>
<h3>[00:46:02] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://theintern.io/">Intern</a></dt>
<dd>Großes Dingens zum Testen von Webapps.</dd>
<dt><a href="http://pik.peterkroener.de/">Pik7 1.0.0</a></dt>
<dd>Peters HTML5-Präsentationsframework ist released. <a href="http://www.peterkroener.de/pik7-ein-html5-praesentationsframework-fuer-nerds/">Details in seinem Blog.</a></dd>
<dt><a href="http://html-differences.whatwg.org/">HTML differences from HTML5</a></dt>
<dd>Übersicht der WHATWG.</dd>
<dt><a href="http://drublic.github.io/css-modal/">CSS Modals</a></dt>
<dd>Hans hat eine Lösung für CSS-only Content-Lightboxen gebaut.</dd>
</dl>


Hans, Rodney und Peter erzählten, ranteten und verlasen wie üblich das neues aus
der Web-Welt.


[00:00:18] NEWS

NOSNIFF HEADER

Github berichtet, dass erste Browser den gegen Hotlinking helfenden HT…

Hans, Rodney und Peter erzählten, ranteten und verlasen wie üblich das neues aus
der Web-Welt.


[00:00:18] NEWS

NOSNIFF HEADER

Github berichtet, dass erste Browser den gegen Hotlinking helfenden HTTP-Header
nosniff unterstützen.


SCHAUNOTIZEN

[00:02:00] THANK GOD WE HAVE A SPECIFICATION

Hans und Peter erstarrten in Ehrfurcht vor Rodneys bei Smashing Mag erschienenem
Magnum Opus über Bugs in CSS-Transitions. Rod gibt seine liebsten Bugs zum
besten und berichtet über die Entstehung seiner Testsuite. Wir empfehlen
außerdem die Test the Web Forward für alle Hörer – Tests schreiben ist
überraschend produktiv und man lernt extrem viel, auch wenn man kein Uber-Nerd
ist.

[00:25:25] USING FLAG IN LANGUAGE SELECTOR IS STILL OKAY

Landesflaggen als Sprachauswahl-Icon – gute Idee oder beknackte Idee? Der
Artikel ist die Gegenrede zur Position von Gunnar Bittersmann. Es fiel uns nicht
leicht, großes Interesse für dieses Thema aufzubringen.


[00:36:22] GLÜCKSRAD

CANVAS-ELEMENT BZW. CANVAS-PFADFUNKTIONEN

Weder Rodney noch Hans haben das Canvas-Element (oder seine Pfad-API) je
gebraucht. Peter hackt damit zumindest gelegentlich herum und empfiehlt den
Katzen-Erkenner Kittydar sowie three.js, die WebGL-Engine für Dummies.


[00:46:02] KEINE SCHAUNOTIZEN

INTERN

Großes Dingens zum Testen von Webapps.

PIK7 1.0.0

Peters HTML5-Präsentationsframework ist released. Details in seinem Blog.

HTML DIFFERENCES FROM HTML5

Übersicht der WHATWG.

CSS MODALS

Hans hat eine Lösung für CSS-only Content-Lightboxen gebaut.

Revision 119: Transitions, Flaggen, Links

<p>Aufgrund von Konferenzen, Betankung und privater Großereignisse gibt es diese Woche ein kleines Loch an Themen. Schepp und Hans haben aber versucht das Beste draus zu machen.</p>
<p>News gibt es diese Woche keine zu verkünden.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:33] <a href="http://blog.hut8labs.com/coding-fast-and-slow.html">Coding, Fast and Slow: Developers and the Psychology of Overconfidence</a></dt>
<dd>Wir kennen es alle: Ein neues Projekt soll geschätzt werden und das am besten gleich in der nächsten halben Stunde. Wir kalkulieren irgendwelche Aufwände von Features, die wir gar nicht kennen. Dadurch entstehen oft Fehlschätzungen, die wir später oft selbst ausbaden müssen. Der oben genannte Artikel beschäftigt sich mit genau dieser Problematik und wir diskutieren, in wie fern man dem Entgegenwirken kann.</dd>
</dl>
<h3>[00:15:18] Glücksrad</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/col"><code>&lt;col&gt;</code> und <code>&lt;colgroup&gt;</code></a></dt>
<dd>Mit <code>&lt;col&gt;</code> und <code>&lt;colgroup&gt;</code> erzeugt man in Tabellen Kontexte für einzelne Spalten, denen man Eigenschaften (wie zum Beispiel <code>lang</code>) zuweisen kann ohne sich in jeder Zeile wiederholen zu müssen. Die meisten Attribute, die man früher zum Stylen verwendet hat, sind mittlerweile obsolete.</dd>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#inline-documentation-for-external-scripts">Erlaubte Zeichen in JavaScript Kommentaren</a></dt>
<dd>Welche Zeichen darf man eigentlich in JavaScript Kommentaren verwenden? Und welche Mime-Types sind für JavaScripts erlaubt?</dd>
</dl>
<h3>[00:30:30] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://trace.gl/">traceGL</a></dt>
<dd>traceGL visualisiert den Code-Fluss einer App.</dd>
<dt><a href="http://www.smashingmagazine.com/2013/04/19/podcasts-for-designers-developers/">Listen, Watch And Share!</a></dt>
<dd>Eine Liste an angesagten englischen web-spezifischen Podcasts.</dd>
<dt><a href="https://github.com/qiao/PathFinding.js">PathFinding.js</a></dt>
<dd>Mit PathFinding.js kann man anhand komplexer Algorithmen festlegen, wie sich Elemente auf einer Fläche bewegen dürfen. Vor allem für Spiele-Entwickler interessant.</dd>
<dt><a href="http://tldr.huddle.com/blog/css-testing/">PhantomCSS</a></dt>
<dd>Mit PhantomCSS lassen sich CSS-Tests automatisiert durchführen.</dd>
<dt><a href="http://robflaherty.github.io/jquery-annotated-source/">jQuery Annotated Source</a></dt>
<dd>Für alle, die etwas vom jQuery Core Code lernen möchten.</dd>
<dt><a href="https://github.com/jakiestfu/Snap.js">Snap.js</a></dt>
<dd>Snap.js bietet die Möglichkeit Menüs zu bauen, wie man sie von Facebooks oder Spotifys Mobile-App kennt.</dd>
<dt><a href="http://www.unheap.com/">Unheap</a></dt>
<dd>Unheap ist eine schön aufbereitete Sammlung von guten jQuery Plugins.</dd>
</dl>


Aufgrund von Konferenzen, Betankung und privater Großereignisse gibt es diese
Woche ein kleines Loch an Themen. Schepp und Hans haben aber versucht das Beste
draus zu machen.

News gibt es diese Woche…

Aufgrund von Konferenzen, Betankung und privater Großereignisse gibt es diese
Woche ein kleines Loch an Themen. Schepp und Hans haben aber versucht das Beste
draus zu machen.

News gibt es diese Woche keine zu verkünden.


SCHAUNOTIZEN

[00:00:33] CODING, FAST AND SLOW: DEVELOPERS AND THE PSYCHOLOGY OF
OVERCONFIDENCE

Wir kennen es alle: Ein neues Projekt soll geschätzt werden und das am besten
gleich in der nächsten halben Stunde. Wir kalkulieren irgendwelche Aufwände von
Features, die wir gar nicht kennen. Dadurch entstehen oft Fehlschätzungen, die
wir später oft selbst ausbaden müssen. Der oben genannte Artikel beschäftigt
sich mit genau dieser Problematik und wir diskutieren, in wie fern man dem
Entgegenwirken kann.


[00:15:18] GLÜCKSRAD

<COL> UND <COLGROUP>

Mit <col> und <colgroup> erzeugt man in Tabellen Kontexte für einzelne Spalten,
denen man Eigenschaften (wie zum Beispiel lang) zuweisen kann ohne sich in jeder
Zeile wiederholen zu müssen. Die meisten Attribute, die man früher zum Stylen
verwendet hat, sind mittlerweile obsolete.

ERLAUBTE ZEICHEN IN JAVASCRIPT KOMMENTAREN

Welche Zeichen darf man eigentlich in JavaScript Kommentaren verwenden? Und
welche Mime-Types sind für JavaScripts erlaubt?


[00:30:30] KEINE SCHAUNOTIZEN

TRACEGL

traceGL visualisiert den Code-Fluss einer App.

LISTEN, WATCH AND SHARE!

Eine Liste an angesagten englischen web-spezifischen Podcasts.

PATHFINDING.JS

Mit PathFinding.js kann man anhand komplexer Algorithmen festlegen, wie sich
Elemente auf einer Fläche bewegen dürfen. Vor allem für Spiele-Entwickler
interessant.

PHANTOMCSS

Mit PhantomCSS lassen sich CSS-Tests automatisiert durchführen.

JQUERY ANNOTATED SOURCE

Für alle, die etwas vom jQuery Core Code lernen möchten.

SNAP.JS

Snap.js bietet die Möglichkeit Menüs zu bauen, wie man sie von Facebooks oder
Spotifys Mobile-App kennt.

UNHEAP

Unheap ist eine schön aufbereitete Sammlung von guten jQuery Plugins.

Revision 118: Die Problematik des Schätzens

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 129: Zuschauerfragen sind heiß

Working Draft

Revision 128: CoffeeScript, mobile Apps, Gewinne

Working Draft

Revision 127: IE11, Glücksrad, Verlosung

Working Draft

Revision 126: Inputs, Formulare, Pseudoklassen und Origin

Working Draft

Revision 125: Bye, Bye, Chrome Frame und Table Layouts

Working Draft

Revision 124: Screen Readers, CSP und In-depth Script Loading

Working Draft

Revision 123: Cargo-Culting in JS, localStorage und Prerendering

Working Draft

Revision 122: Interview mit Chris Heilmann zu Firefox OS

Working Draft

Revision 121: requestAutocomplete, Web Components, Offline-Detection

Working Draft

Revision 120: CSS Strukturieren, Sinn und Unsinn von Touchdetection, DRM

Working Draft

Revision 119: Transitions, Flaggen, Links

Working Draft

Revision 118: Die Problematik des Schätzens

Working Draft