<p>Volles Haus bei Working Draft! Neben Schepp und Peter gaben sich heute <a href="http://twitter.com/maddesigns">Sven Wolfermann</a>, <a href="http://twitter.com/czillgens">Christoph Zillgens</a>, <a href="http://twitter.com/g16n">Gunnar Bittersmann</a> und <a href="http://twitter.com/ddprrt">Stefan Baumgartner</a> die Ehre um zu berichten, zu ranten und zu streiten.</p>
<h3>[00:02:15] News</h3>
<dl>
<dt><a href="http://www.golem.de/news/persona-mozillas-passwortkiller-1304-98624.html">Persona einsatzbereit</a></dt>
<dd>„Mozillas Passwortkiller“ (wie Golem.de es nennt) hat Beta 2 erreicht und kann dank Identity Bridging nun auch tatsächlich benutzt werden. <a href="https://developer.mozilla.org/en-US/docs/Persona/Quick_Setup">MDN erklärt die Details.</a></dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:02] <a href="http://bdconf.com/2013/orlando">Breaking Development Orlando</a></dt>
<dd>Stefan liefert einen Tipreport von einer tollen Konferenz an einer originellen Location. Videos der Talks sind noch nicht hochgeladen, aber wenn das soweit ist, sind die Performances von <a href="http://bdconf.com/2013/orlando/schedule#triblondon">Andrew Betts</a> (Offline-Apps), <a href="http://bdconf.com/2013/orlando/schedule#wilto">Mat Marquis</a> (Responsive Assets) und <a href="http://bdconf.com/2013/orlando/schedule#cameronmoll">Cameron Moll</a> (Cross-Alles-UX) besonders sehenswert. Außerdem reden wir über Konferenz-Kultur sowie <a href="http://blog.cloudfour.com/media-queries-in-svg-images/">Media Queries in SVG</a> und verweisen auf <a href="http://www.lukew.com/ff/">die Konferenz-Notizen von Luke Wroblewski</a> sowie <a href="http://eventifier.co/event/bdconf2013/">die hier gesammelten Fotos und Folien</a>.</dd>
<dt>[00:20:51] <a href="https://medium.com/design-ux/926eb80d64e3">Transitional Interfaces</a></dt>
<dd>Medium.com argumentiert pro animierte UI-Elemente und wir gehen d‘accord. Besonders Schepp fordert vehement, dass wir <a href="http://de.wikipedia.org/wiki/Motion-Design">Motion Design</a> bzw. Motion Designer besser in Web-Projekte integrieren. Als mögliche Hindernisse machen wir wie üblich die Troika aus Kunden ohne Zeitbudget für sowas, in Photoshop festhängenden Designern mit statischem Weltbild und es übertreibenden Flashern aus.</dd>
<dt>[00:33:07] IDs versus Classes</dt>
<dd>Vor einigen Wochen poppte die Diskussion bei Twitter auf: IDs sind doof, man sollte nur Klassen verwenden. Peter trollt ohne großartigen Erfolg gegen den Konsens an, der allerlei Argumente für seine Position auffährt. Wir reden außerdem über <a href="http://smacss.com/">SMACSS</a>, <a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html">Selektorspezifität</a>, Attributselektoren, Semantik, Hunde, <a href="http://csswizardry.com/2012/11/code-smells-in-css/">CSS Code Smells</a> und sogar <a href="http://schema.org/">Mikroformate</a>.</dd>
</dl>
<h3>[01:13:44] Glücksrad</h3>
<dl>
<dt>HTML5: <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-dialog-element">das dialog-Element</a></dt>
<dd>Mangels Browserunterstützung für das eigentliche Fundstück schweifen wir in Richtung <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-details-element">details-Element</a> ab und stellen die Frage ob man für all sowas eigene HTML-Elemente braucht. Schepp meint: sofern ARIA-Attribute eingebaut werden, machen diese Elemente Sinn.</dd>
<dt>CSS3: <a href="http://www.w3.org/TR/css3-multicol/">CSS Multi-column Layout Module</a></dt>
<dd>Trotz mittlerweile okayer Browserunterstützung finden wir Spalten-Layouts im Web eher problematisch. Von <a href="http://www.w3.org/TR/css3-regions/">CSS Regions</a> versprechen wir uns da schon mehr</dd>
</dl>
<h3>[01:30:50] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/">Detecting Touch &#8211; the WHY, not the HOW</a></dt>
<dd>Patrick H. Lauke erschlägt die gesamte Touch-Problematik in einem Artikel.</dd>
<dt><a href="http://movement.mgechev.com/">Movement.js</a></dt>
<dd>Webapps in Minority-Report-Manier mit Gesten steuern? Diese Library macht es möglich!</dd>
<dt><a href="http://davatron5000.github.io/TimeJump/">TimeJump</a></dt>
<dd>Polyfill für <a href="http://www.w3.org/TR/media-frags/">Media Fragments URIs</a>.</dd>
<dt>Flexbox</dt>
<dd><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">Ein Artikel</a> und <a href="http://the-echoplex.net/flexyboxes/">ein Generator</a> für Cross-Browser-Flexbox-Code.</dd>
</dl>


Volles Haus bei Working Draft! Neben Schepp und Peter gaben sich heute Sven
Wolfermann, Christoph Zillgens, Gunnar Bittersmann und Stefan Baumgartner die
Ehre um zu berichten, zu ranten und zu streite…

Working Draft

Volles Haus bei Working Draft! Neben Schepp und Peter gaben sich heute Sven
Wolfermann, Christoph Zillgens, Gunnar Bittersmann und Stefan Baumgartner die
Ehre um zu berichten, zu ranten und zu streiten.


[00:02:15] NEWS

PERSONA EINSATZBEREIT

„Mozillas Passwortkiller“ (wie Golem.de es nennt) hat Beta 2 erreicht und kann
dank Identity Bridging nun auch tatsächlich benutzt werden. MDN erklärt die
Details.


SCHAUNOTIZEN

[00:03:02] BREAKING DEVELOPMENT ORLANDO

Stefan liefert einen Tipreport von einer tollen Konferenz an einer originellen
Location. Videos der Talks sind noch nicht hochgeladen, aber wenn das soweit
ist, sind die Performances von Andrew Betts (Offline-Apps), Mat Marquis
(Responsive Assets) und Cameron Moll (Cross-Alles-UX) besonders sehenswert.
Außerdem reden wir über Konferenz-Kultur sowie Media Queries in SVG und
verweisen auf die Konferenz-Notizen von Luke Wroblewski sowie die hier
gesammelten Fotos und Folien.

[00:20:51] TRANSITIONAL INTERFACES

Medium.com argumentiert pro animierte UI-Elemente und wir gehen d‘accord.
Besonders Schepp fordert vehement, dass wir Motion Design bzw. Motion Designer
besser in Web-Projekte integrieren. Als mögliche Hindernisse machen wir wie
üblich die Troika aus Kunden ohne Zeitbudget für sowas, in Photoshop
festhängenden Designern mit statischem Weltbild und es übertreibenden Flashern
aus.

[00:33:07] IDS VERSUS CLASSES

Vor einigen Wochen poppte die Diskussion bei Twitter auf: IDs sind doof, man
sollte nur Klassen verwenden. Peter trollt ohne großartigen Erfolg gegen den
Konsens an, der allerlei Argumente für seine Position auffährt. Wir reden
außerdem über SMACSS, Selektorspezifität, Attributselektoren, Semantik, Hunde,
CSS Code Smells und sogar Mikroformate.


[01:13:44] GLÜCKSRAD

HTML5: DAS DIALOG-ELEMENT

Mangels Browserunterstützung für das eigentliche Fundstück schweifen wir in
Richtung details-Element ab und stellen die Frage ob man für all sowas eigene
HTML-Elemente braucht. Schepp meint: sofern ARIA-Attribute eingebaut werden,
machen diese Elemente Sinn.

CSS3: CSS MULTI-COLUMN LAYOUT MODULE

Trotz mittlerweile okayer Browserunterstützung finden wir Spalten-Layouts im Web
eher problematisch. Von CSS Regions versprechen wir uns da schon mehr


[01:30:50] KEINE SCHAUNOTIZEN

DETECTING TOUCH – THE WHY, NOT THE HOW

Patrick H. Lauke erschlägt die gesamte Touch-Problematik in einem Artikel.

MOVEMENT.JS

Webapps in Minority-Report-Manier mit Gesten steuern? Diese Library macht es
möglich!

TIMEJUMP

Polyfill für Media Fragments URIs.

FLEXBOX

Ein Artikel und ein Generator für Cross-Browser-Flexbox-Code.

Revision 116: Konferenzen, Motion Design, IDs versus Classes

<p>Hans und Rod luden sich <a href="http://www.mademyday.de/">Marc Hinse</a> ein, um den wöchentliche Tratsch mal streng Badisch abzuwickeln &#8211; Wir können alles, außer Hochdeutsch.</p>
<h3>[00:00:20] News</h3>
<dl>
<dt><a href="http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html">&lt;hgroup&gt; kommt weg</a></dt>
<dd>Weil <code>&lt;hgroup&gt;</code> nicht fristgerecht von Browserherstellern umgesetzt wurde, wird es aus der Spezifikation gestrichen.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:29] <a href="#">Blink</a></dt>
<dd>Nach Jahren des Mitwirkens trennt sich Google nun von WebKit und macht mit Blink ihr eigenes Ding. Obwohl das erstmal wenige Auswirkungen für uns Webentwickler haben sollte, haben ganz viele Leute ganz viele Meinungen:</p>
<ul>
<li><a href="http://aerotwist.com/blog/hello-blink/">Aerotwist: Hello, Blink!</a></li>
<li><a href="https://plus.google.com/116237864387312784020/posts/d62jMDKXcLb">Jaffathecake: That solves the Monoculture</a></li>
<li><a href="http://www.brucelawson.co.uk/2013/hello-blink/">Brucel: Hello Blink</a></li>
<li><a href="http://www.chromium.org/blink/developer-faq">Chromium FAQ</a></li>
<li><a href="http://www.quirksmode.org/blog/archives/2013/04/blink.html">PPK: Blink</a></li>
<li><a href="https://medium.com/my-ideas/25a947158087">Thoughts on Blink &#8211; a contributor&#8217;s perspective</a></li>
<li><a href="http://www.theregister.co.uk/2013/04/04/webkit_to_purge_chrome_code/">WebKit devs on Blink fork: &#8218;Two can play that game&#8216;</a></li>
<li><a href="http://trac.webkit.org/wiki/UnmaintainedFeatureList">Unmaintained features in WebKit</a></li>
</ul>
</dd>
<dt>[00:17:25] <a href="https://blog.mozilla.org/blog/2013/04/03/mozilla-and-samsung-collaborate-on-next-generation-web-browser-engine/">Servo</a></dt>
<dd>Mozilla forscht schon länger an einer neuen Renderingengine namens Servo. Samsung hat nun die Basis geschaffen, um das Projekt auch auf seinen ARM-basierten Geräten laufen zu lassen.</dd>
<dt>[00:20:55] <a href="http://ianstormtaylor.com/media-queries-are-a-hack/">Media Queries are a hack</a></dt>
<dd>Media-Queries gruppieren unterschiedliche CSS-Anweisungen nach Browsereigenschaft. Es stellt sich die Frage, ob die Verfeinerung einzelner CSS-Anweisungen um die Browsereigenschaft-Einschränkung nicht das logischere Mittel wäre.</dd>
<dt>[00:29:09] <a href="http://daverupert.com/2013/04/responsive-deliverables/">Responsive Deliverables</a></dt>
<dd>&#8222;Responsive&#8220; ist in aller Munde. Doch hat man auch schon angefangen das Konzept &#8222;Seite&#8220; zu verlassen und über &#8222;Module&#8220; respektive &#8222;Komponenten&#8220; nachzudenken?</dd>
<dt>[00:31:27] <a href="http://branch.com/b/redesigning-the-save-symbol-let-s-do-this">New save symbol needed?</a></dt>
<dd>Alle Jahre wieder taucht die Frage auf, ob gewisse Symbole noch zeitgemäß sind. Diesmal traf es (wieder mal) die gute alte Diskette. Man argumentiert, dass die heutige Jugend nicht einmal mehr wisse, was eine Diskette überhaupt sei und deshalb eine andere Metapher für &#8222;Speichern&#8220; herbeigezaubert werden müsse. Wir sehen das anders, wie <a href="http://connortomas.com/2013/04/in-defence-of-the-floppy-disk-save-symbol/">In Defence of the Floppy Disk Save Symbol</a> schön schildert.</dd>
</dl>
<h3>[00:42:53] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#syntax-cdata">CDATA sections</a></dt>
<dd>Das von XML geerbte <code>&lt;![CDATA[</code> wird benutzt, um den Inhalt eines Elements wörtlich zu nehmen, also nicht durch den Parser zu schleusen. Man hat das früher gerne um Inline-JavaScript gepackt, weil XHTML ja ganz Hip war. Das ist bei HTML5 aber so nicht mehr notwendig.</dd>
</dl>
<h3>[00:46:48] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://blog.cloudfour.com/media-queries-in-svg-images/">Media Queries in SVG images – Cloud Four Blog</a></dt>
<dd>Media Queries lassen sich auch in SVG nutzen. Das nette daran, ein <code>max-width</code> wirkt sich hier nicht auf den Viewport, sondern das Bild aus. So kann man also den Inhalt eines SVG Bildes abhängig von der Größe des Bildes nach Belieben umbauen.</dd>
<dt><a href="http://blog.whydoifollow.com/post/angularjs-where-to-start">&lt;learning class=&#8217;always&#8216;&gt;&#8230;</a></dt>
<dd>Wie fange ich eigentlich an AngularJS zu lernen?</dd>
<dt><a href="http://www.netmagazine.com/features/10-tips-designing-localised-interfaces">10 tips for designing localised interfaces</a></dt>
<dd>10 einfache – jedoch gute – Tips einigen Problemen bei mehrsprachigen Webseiten aus dem Weg zu gehen.</dd>
<dt><a href="http://www.smashingmagazine.com/2013/04/05/how-to-sell-the-value-of-mobile-to-clients/">How To Sell The Value Of Mobile To Clients</a></dt>
<dd>Wie verkaufe ich meinen Kunden eigentlich den angeblichen Mehraufwand für Responsive Design?</dd>
<dt><a href="https://trello.com/card/paul-lewis-google-annotate-your-code-gain-insightsup/515b37273df03b734b006048/7">Annotate your code</a></dt>
<dd>In Chromes DevTools kann man die Rendering Timelines mit Markern versehen</dd>
<dt><a href="http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/">Page weight grows 24% year-over-year (not 44%)</a></dt>
<dd>Performance-Papst rudert zurück, wenn auch nur ein bisschen.</dd>
<dt><a href="http://demo.agektmr.com/datalist/">datalist experiment</a></dt>
<dd>Zeigt was der Chrome so alles mit <code>&lt;datalist&gt;</code> anstellen kann. Wir wollen das in allen Browsern. Heute!</dd>
<dt><a href="https://www.google.com/about/jobs/search/#!t=jo&amp;jid=290002">[Job] Interaction Designer</a></dt>
<dd>München: Google sucht einen Interaction Designer für seine DevTools.</dd>
<dt><a href="http://www.mailjet.com/jobs/dev-evangelist-london-or-germany,13.htm">[Job] Developer Evangelist</a></dt>
<dd>Überall: mailjet such einen Developer Evangelist</dd>
<dt><a href="http://www.dasauge.de/jobs/stellenangebote/fest/e229111">[Job] Junior Mobile Web Developer</a></dt>
<dd>Berlin: Geil,Danke! sucht einen Mobile Web Developer.</dd>
</dl>


Hans und Rod luden sich Marc Hinse ein, um den wöchentliche Tratsch mal streng
Badisch abzuwickeln – Wir können alles, außer Hochdeutsch.


[00:00:20] NEWS

<HGROUP> KOMMT WEG

Weil <hgroup> nicht fri…

Hans und Rod luden sich Marc Hinse ein, um den wöchentliche Tratsch mal streng
Badisch abzuwickeln – Wir können alles, außer Hochdeutsch.


[00:00:20] NEWS

<HGROUP> KOMMT WEG

Weil <hgroup> nicht fristgerecht von Browserherstellern umgesetzt wurde, wird es
aus der Spezifikation gestrichen.


SCHAUNOTIZEN

[00:01:29] BLINK

Nach Jahren des Mitwirkens trennt sich Google nun von WebKit und macht mit Blink
ihr eigenes Ding. Obwohl das erstmal wenige Auswirkungen für uns Webentwickler
haben sollte, haben ganz viele Leute ganz viele Meinungen:



 * Aerotwist: Hello, Blink!
 * Jaffathecake: That solves the Monoculture
 * Brucel: Hello Blink
 * Chromium FAQ
 * PPK: Blink
 * Thoughts on Blink – a contributor’s perspective
 * WebKit devs on Blink fork: ‚Two can play that game‘
 * Unmaintained features in WebKit

[00:17:25] SERVO

Mozilla forscht schon länger an einer neuen Renderingengine namens Servo.
Samsung hat nun die Basis geschaffen, um das Projekt auch auf seinen
ARM-basierten Geräten laufen zu lassen.

[00:20:55] MEDIA QUERIES ARE A HACK

Media-Queries gruppieren unterschiedliche CSS-Anweisungen nach
Browsereigenschaft. Es stellt sich die Frage, ob die Verfeinerung einzelner
CSS-Anweisungen um die Browsereigenschaft-Einschränkung nicht das logischere
Mittel wäre.

[00:29:09] RESPONSIVE DELIVERABLES

„Responsive“ ist in aller Munde. Doch hat man auch schon angefangen das Konzept
„Seite“ zu verlassen und über „Module“ respektive „Komponenten“ nachzudenken?

[00:31:27] NEW SAVE SYMBOL NEEDED?

Alle Jahre wieder taucht die Frage auf, ob gewisse Symbole noch zeitgemäß sind.
Diesmal traf es (wieder mal) die gute alte Diskette. Man argumentiert, dass die
heutige Jugend nicht einmal mehr wisse, was eine Diskette überhaupt sei und
deshalb eine andere Metapher für „Speichern“ herbeigezaubert werden müsse. Wir
sehen das anders, wie In Defence of the Floppy Disk Save Symbol schön schildert.


[00:42:53] GLÜCKSRAD

CDATA SECTIONS

Das von XML geerbte <![CDATA[ wird benutzt, um den Inhalt eines Elements
wörtlich zu nehmen, also nicht durch den Parser zu schleusen. Man hat das früher
gerne um Inline-JavaScript gepackt, weil XHTML ja ganz Hip war. Das ist bei
HTML5 aber so nicht mehr notwendig.


[00:46:48] KEINE SCHAUNOTIZEN

MEDIA QUERIES IN SVG IMAGES – CLOUD FOUR BLOG

Media Queries lassen sich auch in SVG nutzen. Das nette daran, ein max-width
wirkt sich hier nicht auf den Viewport, sondern das Bild aus. So kann man also
den Inhalt eines SVG Bildes abhängig von der Größe des Bildes nach Belieben
umbauen.

<LEARNING CLASS=’ALWAYS‘>…

Wie fange ich eigentlich an AngularJS zu lernen?

10 TIPS FOR DESIGNING LOCALISED INTERFACES

10 einfache – jedoch gute – Tips einigen Problemen bei mehrsprachigen Webseiten
aus dem Weg zu gehen.

HOW TO SELL THE VALUE OF MOBILE TO CLIENTS

Wie verkaufe ich meinen Kunden eigentlich den angeblichen Mehraufwand für
Responsive Design?

ANNOTATE YOUR CODE

In Chromes DevTools kann man die Rendering Timelines mit Markern versehen

PAGE WEIGHT GROWS 24% YEAR-OVER-YEAR (NOT 44%)

Performance-Papst rudert zurück, wenn auch nur ein bisschen.

DATALIST EXPERIMENT

Zeigt was der Chrome so alles mit <datalist> anstellen kann. Wir wollen das in
allen Browsern. Heute!

[JOB] INTERACTION DESIGNER

München: Google sucht einen Interaction Designer für seine DevTools.

[JOB] DEVELOPER EVANGELIST

Überall: mailjet such einen Developer Evangelist

[JOB] JUNIOR MOBILE WEB DEVELOPER

Berlin: Geil,Danke! sucht einen Mobile Web Developer.

Revision 115: Browsertriebwerke, RWD und Steinzeitmalerei

<p>Für die neue Revision werden Schepp und Peter von <a href="https://twitter.com/dantz">Andreas Dantz</a> begleitet, der sich sehr über den JavaScript-Schwerpunkt dieser Sendung gefreut hat. Zum Ausgleich drehen wir dieses mal auch am CSS3-Glücksrad.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:35] <a href="http://www.html5rocks.com/en/tutorials/webcomponents/template/">HTML&#8217;s New Template Tag</a></dt>
<dd>HTML5 Rocks berichtet vom neuen <a href="http://www.w3.org/TR/html-templates/"><code>&lt;template&gt;</code>-Element</a>, einen Mechanismus zum Unterbringen von Template-Code in HTML. Bisher hatte man Code für z.B. <a href="http://handlebarsjs.com/">Handlebars</a> in dazu mißbrauchten <code>&lt;script&gt;</code>-Tags verstecken müssen. Das <code>&lt;template&gt;</code>-Element ist hingegen für diesen Zweck gebaut und enthält nichts außer einem einsatzbereiten <a href="https://developer.mozilla.org/de/docs/DOM/DocumentFragment">DocumentFragment</a>. Warum man allerdings Templates als Code in HTML-Elementen und nicht als fertig kompilierte JS-Funktionen würde verwenden wollen, ist uns nicht ganz klar geworden.</dd>
<dt>[00:14:20] <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JanMar/0977.html">Fixing appcache: a proposal to get us started</a></dt>
<dd>Jonas Sicking hat einen Vorschlag, wie man den <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html">HTML5 Application Cache</a> reparieren könnte, da dieser ja bekanntlich <a href="https://www.youtube.com/watch?v=cR-TP6jOSQM&#038;feature=player_embedded">ein Arschpirat</a> ist. Oder? Peter sieht das eher differenziert und hat darüber hinaus etwas gegen das vorgeschlagene JSON-Format für Manifest-Files und die Idee eines „Online-Modus“.</dd>
<dt>[00:34:17] <a href="http://mrale.ph/blog/2013/03/28/why-asmjs-bothers-me.html">Why asm.js bothers me</a></dt>
<dd>Ein V8-Engineer hat Probleme mit asm.js (s. <a href="http://workingdraft.de/108/">Revision 108</a>). Das Ende der Performance-Optimierung von normalem JS wird befürchtet und außerdem sollte man lieber einen richtigen Bytecode statt eines JS-Subsets einführen. Aber <a href="http://www.2ality.com/2012/01/bytecode-myth.html">wie der Doktor schon schrieb</a> ist das mit dem Bytecode auch nicht so einfach, wie es zunächst scheint. Außerdem ist Vorteil des JS-Subsets, dass asm-Scripts bereits heute in allen Browsern laufen, auch wenn <a href="https://blog.mozilla.org/blog/2013/03/27/mozilla-is-unlocking-the-power-of-the-web-as-a-platform-for-gaming/">die Unreal-Demo</a> im IE&nbsp;6 weniger flüssig sein dürfte als im Nightly Firefox.</dd>
</dl>
<h3>[00:47:10] Glücksrad</h3>
<dl>
<dt>CSS3: <a href="http://www.w3.org/TR/css3-fonts/#font-prop-desc">Font property descriptors</a></dt>
<dd>Wir finden mühsam die Details von <a href="http://de.wikipedia.org/wiki/Kursiv#Kursivierung">Kursivierung</a> heraus und spekulieren über das Verhalten von <code>font-stretch</code>.</dd>
<dt>HTML5: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#the-document-object">The Document object</a></dt>
<dd>Wir graben <a href="http://wtfjs.com/2010/02/25/ie-scope">obskure IE-Triva</a> über das Document-Objekt aus und staunen darüber, dass <code>document.head</code> eine eher neue Erfindung ist.</dd>
</dl>
<h3>[01:01:51] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://philbit.com/svgpatterns/">SVG Patterns Library</a></dt>
<dd>Wie die CSS3 Patterns Library, aber mit SVG (und damit im IE 9)</dd>
<dt><a href="https://gist.github.com/kahlil/5245859">Angular.js Resources</a></dt>
<dd>Von Kahlil gesammelte Links zu Angular.</dd>
<dt><a href="https://github.com/yckart/jquery.resize.js">jquery.resize.js</a></dt>
<dd>Wir hatten uns in der letzten Revision dieses Script gewünscht, Yannick Albert liefert.</dd>
<dt><a href="http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/">DevTools Extensions For Web App Developers</a></dt>
<dd>Peter würde Addy Osmanis Chrome-Extension-Liste gern um den <a href="https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd">JavaScript Errors Notifier</a> ergänzt sehen.</dd>
<dt><a href="https://github.com/raimohanska/bacon.js">Bacon.js</a></dt>
<dd>Eine Functional Reactive Programming Library, die Peter ganz toll findet, aber nur sehr inadäquat erklären kann.</dd>
</dl>


Für die neue Revision werden Schepp und Peter von Andreas Dantz begleitet, der
sich sehr über den JavaScript-Schwerpunkt dieser Sendung gefreut hat. Zum
Ausgleich drehen wir dieses mal auch am CSS3-Gl…

Für die neue Revision werden Schepp und Peter von Andreas Dantz begleitet, der
sich sehr über den JavaScript-Schwerpunkt dieser Sendung gefreut hat. Zum
Ausgleich drehen wir dieses mal auch am CSS3-Glücksrad.


SCHAUNOTIZEN

[00:00:35] HTML’S NEW TEMPLATE TAG

HTML5 Rocks berichtet vom neuen <template>-Element, einen Mechanismus zum
Unterbringen von Template-Code in HTML. Bisher hatte man Code für z.B.
Handlebars in dazu mißbrauchten <script>-Tags verstecken müssen. Das
<template>-Element ist hingegen für diesen Zweck gebaut und enthält nichts außer
einem einsatzbereiten DocumentFragment. Warum man allerdings Templates als Code
in HTML-Elementen und nicht als fertig kompilierte JS-Funktionen würde verwenden
wollen, ist uns nicht ganz klar geworden.

[00:14:20] FIXING APPCACHE: A PROPOSAL TO GET US STARTED

Jonas Sicking hat einen Vorschlag, wie man den HTML5 Application Cache
reparieren könnte, da dieser ja bekanntlich ein Arschpirat ist. Oder? Peter
sieht das eher differenziert und hat darüber hinaus etwas gegen das
vorgeschlagene JSON-Format für Manifest-Files und die Idee eines „Online-Modus“.

[00:34:17] WHY ASM.JS BOTHERS ME

Ein V8-Engineer hat Probleme mit asm.js (s. Revision 108). Das Ende der
Performance-Optimierung von normalem JS wird befürchtet und außerdem sollte man
lieber einen richtigen Bytecode statt eines JS-Subsets einführen. Aber wie der
Doktor schon schrieb ist das mit dem Bytecode auch nicht so einfach, wie es
zunächst scheint. Außerdem ist Vorteil des JS-Subsets, dass asm-Scripts bereits
heute in allen Browsern laufen, auch wenn die Unreal-Demo im IE 6 weniger
flüssig sein dürfte als im Nightly Firefox.


[00:47:10] GLÜCKSRAD

CSS3: FONT PROPERTY DESCRIPTORS

Wir finden mühsam die Details von Kursivierung heraus und spekulieren über das
Verhalten von font-stretch.

HTML5: THE DOCUMENT OBJECT

Wir graben obskure IE-Triva über das Document-Objekt aus und staunen darüber,
dass document.head eine eher neue Erfindung ist.


[01:01:51] KEINE SCHAUNOTIZEN

SVG PATTERNS LIBRARY

Wie die CSS3 Patterns Library, aber mit SVG (und damit im IE 9)

ANGULAR.JS RESOURCES

Von Kahlil gesammelte Links zu Angular.

JQUERY.RESIZE.JS

Wir hatten uns in der letzten Revision dieses Script gewünscht, Yannick Albert
liefert.

DEVTOOLS EXTENSIONS FOR WEB APP DEVELOPERS

Peter würde Addy Osmanis Chrome-Extension-Liste gern um den JavaScript Errors
Notifier ergänzt sehen.

BACON.JS

Eine Functional Reactive Programming Library, die Peter ganz toll findet, aber
nur sehr inadäquat erklären kann.

Revision 114: <template>, Appcache, asm.js versus Bytecode

<p>Hans und Rod gaben sich zu Zweit die Ehre &#8211; können ja nicht alle arbeiten oder Häuser kaufen…</p>
<h3>[00:00:18] News</h3>
<dl>
<dt><a href="http://ashkenas.com/backbonejs-1.0/">Backbone.js 1.0 ist da.</a></dt>
<dd>… und bringt Unterstützung für HTTP <code>PATCH</code>, einfacheres Event Handling und vielen anderen kleinen Verbesserungen.</dd>
<dt><a href="http://news.cnet.com/8301-1023_3-57573755-93/microsoft-backs-away-from-flash-ban-in-ie10/">IE10 (Metro) mag Flash</a></dt>
<dd>Im Hause Microsoft ruderte man zurück: Aus der Whiteliste (explizite Freigabe) für Flash im IE10 via Metro wurde nun eine Blackliste (explizites Verbot).</dd>
<dt><a href="http://mobilism.nl/blog/2013/03/ie11-to-disguise-itself">IE11 ist <code>like Gecko</code></a></dt>
<dd>Der IE10 brach mit den Conditional Comments, der IE11 bricht mit dem User Agent String &#8211; Microsoft kappt die Verbindungen zu seiner düsteren Internet Vergangenheit.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:51] <a href="http://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/">jQuery vom CDN &#8211; oder nicht?</a></dt>
<dd>Steve Souders &#8211; der Papst der Web Performance &#8211; hat mal wieder geprüft wie jQuery denn auf Webseiten eingesetzt wird. Hans betet ein paar unverständliche Zahlen herunter und Rod findet CDNs nicht so toll. Am Ende kommt es immer noch drauf an was man da eigentlich macht. Wie immer halt.</dd>
<dt>[00:17:22] <a href="http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/"><code>Resize</code> Event für DOM Elemente</a></dt>
<dd>Wir erfreuen uns an einer Cross-Browser-Lösung für das Ermitteln von Größenänderungen von einzelnen Elementen im DOM. Etwas nutzerfreundlicher wäre die Kapselung in jQuery&#8217;s Special Events &#8211; weitere Infos dazu haben <a href="http://benalman.com/news/2010/03/jquery-special-events/">Ben Alman</a> und <a href="http://learn.jquery.com/events/event-extensions/">learn jQuery</a>.</dd>
</dl>
<h3>[00:30:36] HTML5 Glücksrad</h3>
<p>Wir haben uns ein <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-menuitem-element"><code>menuitem</code></a> Element gewonnen. Damit lassen sich, in Verbindung mit <code>&lt;menu type="context"&gt;</code> native, also in der Browser-UI gerenderte, Kontextmenüs basteln.<br />
Bisher kann das nur der Firefox, doch Rod hatte damals ein <a href="http://medialize.github.com/jQuery-contextMenu/">jQuery Plugin mit HTML5 import</a> gebaut.</p>
<h3>[00:40:10] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.chartjs.org/">Chart.js</a></dt>
<dd>… zeichnet schöne Diagramme in die <code>&lt;canvas&gt;. Wem das zu puristisch ist und SVG sowieso viel besser steht, schaue sich <a href="http://highcharts.com/">HighCharts</a> an.</code></dd>
<dt><a href="http://blogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch-in-your-html5-apps-thanks-to-the-pointer-events-of-ie10-and-windows-8.aspx">Unifying Touch and Mouse</a></dt>
<dd>Microsoft erklärt uns wie unsere Web Apps mit seiner <a href="http://www.w3.org/TR/pointerevents/">Pointer Events API</a> spielen dürfen.</dd>
<dt><a href="http://superherojs.com/">Superhero.js</a></dt>
<dd>… ist eine exzellente Sammlung an Artikeln über professionelle JavaScript-Entwicklung.</dd>
<dt><a href="http://drawscri.pt/">Drawscript</a></dt>
<dd>… ist ein Illustrator Plugin, das Vektor-Grafiken in allen möglichen und unmöglichen Textformaten ausgeben kann.</dd>
<dt><a href="http://www.theshortcutts.com/">The Short Cutts</a></dt>
<dd>… ist eine Aufstellung von SEO Videos von Googles Matt Cutts.</dd>
<dt><a href="http://webplatformtools.org/">WebPlatformTools</a></dt>
<dd>… kennt eine ganze Menge von nützlichen Tools</dd>
<dt><a href="http://discover-devtools.codeschool.com/">Discover DevTools</a></dt>
<dd>Paul Irish hat eine Reihe von Videos zur Nutzung der Chrome&#8217;schen DevTools bereitgestellt.</dd>
<dt><a href="http://drublic.de/blog/printing-the-web/">Printing The Web</a></dt>
<dd>Hans schrieb über CSS Print Styles.</dd>
</dl>


Hans und Rod gaben sich zu Zweit die Ehre – können ja nicht alle arbeiten oder
Häuser kaufen…


[00:00:18] NEWS

BACKBONE.JS 1.0 IST DA.

… und bringt Unterstützung für HTTP PATCH, einfacheres Event H…

Hans und Rod gaben sich zu Zweit die Ehre – können ja nicht alle arbeiten oder
Häuser kaufen…


[00:00:18] NEWS

BACKBONE.JS 1.0 IST DA.

… und bringt Unterstützung für HTTP PATCH, einfacheres Event Handling und vielen
anderen kleinen Verbesserungen.

IE10 (METRO) MAG FLASH

Im Hause Microsoft ruderte man zurück: Aus der Whiteliste (explizite Freigabe)
für Flash im IE10 via Metro wurde nun eine Blackliste (explizites Verbot).

IE11 IST LIKE GECKO

Der IE10 brach mit den Conditional Comments, der IE11 bricht mit dem User Agent
String – Microsoft kappt die Verbindungen zu seiner düsteren Internet
Vergangenheit.


SCHAUNOTIZEN

[00:01:51] JQUERY VOM CDN – ODER NICHT?

Steve Souders – der Papst der Web Performance – hat mal wieder geprüft wie
jQuery denn auf Webseiten eingesetzt wird. Hans betet ein paar unverständliche
Zahlen herunter und Rod findet CDNs nicht so toll. Am Ende kommt es immer noch
drauf an was man da eigentlich macht. Wie immer halt.

[00:17:22] RESIZE EVENT FÜR DOM ELEMENTE

Wir erfreuen uns an einer Cross-Browser-Lösung für das Ermitteln von
Größenänderungen von einzelnen Elementen im DOM. Etwas nutzerfreundlicher wäre
die Kapselung in jQuery’s Special Events – weitere Infos dazu haben Ben Alman
und learn jQuery.


[00:30:36] HTML5 GLÜCKSRAD

Wir haben uns ein menuitem Element gewonnen. Damit lassen sich, in Verbindung
mit <menu type="context"> native, also in der Browser-UI gerenderte,
Kontextmenüs basteln.
Bisher kann das nur der Firefox, doch Rod hatte damals ein jQuery Plugin mit
HTML5 import gebaut.


[00:40:10] KEINE SCHAUNOTIZEN

CHART.JS

… zeichnet schöne Diagramme in die <canvas>. Wem das zu puristisch ist und SVG
sowieso viel besser steht, schaue sich HighCharts an.

UNIFYING TOUCH AND MOUSE

Microsoft erklärt uns wie unsere Web Apps mit seiner Pointer Events API spielen
dürfen.

SUPERHERO.JS

… ist eine exzellente Sammlung an Artikeln über professionelle
JavaScript-Entwicklung.

DRAWSCRIPT

… ist ein Illustrator Plugin, das Vektor-Grafiken in allen möglichen und
unmöglichen Textformaten ausgeben kann.

THE SHORT CUTTS

… ist eine Aufstellung von SEO Videos von Googles Matt Cutts.

WEBPLATFORMTOOLS

… kennt eine ganze Menge von nützlichen Tools

DISCOVER DEVTOOLS

Paul Irish hat eine Reihe von Videos zur Nutzung der Chrome’schen DevTools
bereitgestellt.

PRINTING THE WEB

Hans schrieb über CSS Print Styles.

Revision 113: jQuery vom CDN und Resize Events auf DOM Elementen

<p>Schepp und Peter sahen sich akutem Themenmangel gegenüber und beschlossen daher, einfach ein halbes Stündchen das Glücksrad drehen zu lassen und dann die Links zu verlesen.</p>
<h3>HTML-Glücksrad</h3>
<dl>
<dt>[00:01:05] <a href="http://www.w3.org/TR/eventsource/">Event Sources</a></dt>
<dd>Auch bekannt als Server-sent Events stellen Event Sources eine bequeme Polling-Abstraktion im Browser dar, die in manchen Fällen <a href="http://www.w3.org/TR/websockets/">Web Sockets</a> vorzuziehen sind. Vor allem ist die Server-Komponente so simpel, dass sie sogar mit PHP umsetzbar wäre. Leider <a href="http://caniuse.com/eventsource">fehlt die API in IE und Android-Browser</a>, doch wir halten einen Polyfill für machbar.</dd>
<dt>[00:11:08] <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#dom-input-indeterminate">Indeterminate Checkboxes</a></dt>
<dd>Peter singt ein Loblied auf die Nützlichkeit der HTML5-Specs, während Schepp schnell <a href="http://css-tricks.com/examples/IndeterminateCheckboxes/">einen Tastcase</a> für das <code>indeterminate</code>-DOM-Attribut ergooglet. Stellt sich raus, dass dieses Feature, mit dem man eine Checkbox anzeigen kann, als wäre sie in einem dritten Zustand, in allen Browsern funktioniert.</dd>
<dt>[00:20:11] <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#attr-script-async"><code>async</code> und <code>defer</code></a></dt>
<dd>Performance-Papst Schepp I. referiert über zwei Attribute für Script-Tags, die die Ausführung von Scripts beeinflussen. Fazit: Wenn wir ohnehin alle Scripts in eine Datei zusammenfassen und diese erst am Seitenende einbinden, brauchen wir die Attribute gar nicht so dringend.</dd>
<dt>[00:29:30] <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#parsing">Parsing HTML documents</a></dt>
<dd>Peter erklärt kurz, was es mit HTML und XHTML auf sich hat und warum von beiden Sprachen nur HTML in den HTML5-Spezifikationen steht. Kompliziert wird HTML vor allem durch <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#document.write()"><code>document.write()</code></a>, das auch für das blockierende Verhalten von Scripts verantwortlich ist.</dd>
</dl>
<h3>[00:34:28] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent">Min-Content</a></dt>
<dd>Eine neue Maßangabe für CSS, anschaulich erklärt.</dd>
<dt><a href="http://generatedcontent.org/post/45384206019/writing-modes">Vertical text with CSS 3 Writing Modes</a></dt>
<dd>Die <code>writing-mode</code>-Eigenschaft in den diversen Browsern und ihr Wechselspiel mit anderen CSS-Eigenschaften.</dd>
<dt><a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/">Shadow DOM 201: CSS and Styling &#8211; HTML5 Rocks</a></dt>
<dd>Follow-up zu <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">Shadow DOM 101</a>.</dd>
<dt><a href="http://sokolovstas.github.com/SublimeWebInspector/">Sublime Web Inspector</a></dt>
<dd>Debugging direkt im Editor!</dd>
<dt><a href="http://paulrouget.com/e/devtoolsnext/">Future of Firefox DevTools</a></dt>
<dd>Mozilla rüstet auf.</dd>
<dt><a href="https://github.com/wbond/sublime_package_control/wiki/Sublime-Text-3-Compatible-Packages">Sublime Text 3 Compatible Packages</a></dt>
<dd>Schon von ST2 auf ST3 wechseln oder noch nicht? Diese Liste hilft bei der Entscheidungsfindung.</dd>
<dt><a href="https://gist.github.com/ziadoz/1677679">Awesome PHP Libraries</a></dt>
<dd>Nomen est omen.</dd>
</dl>


Schepp und Peter sahen sich akutem Themenmangel gegenüber und beschlossen daher,
einfach ein halbes Stündchen das Glücksrad drehen zu lassen und dann die Links
zu verlesen.


HTML-GLÜCKSRAD

[00:01:05…

Schepp und Peter sahen sich akutem Themenmangel gegenüber und beschlossen daher,
einfach ein halbes Stündchen das Glücksrad drehen zu lassen und dann die Links
zu verlesen.


HTML-GLÜCKSRAD

[00:01:05] EVENT SOURCES

Auch bekannt als Server-sent Events stellen Event Sources eine bequeme
Polling-Abstraktion im Browser dar, die in manchen Fällen Web Sockets
vorzuziehen sind. Vor allem ist die Server-Komponente so simpel, dass sie sogar
mit PHP umsetzbar wäre. Leider fehlt die API in IE und Android-Browser, doch wir
halten einen Polyfill für machbar.

[00:11:08] INDETERMINATE CHECKBOXES

Peter singt ein Loblied auf die Nützlichkeit der HTML5-Specs, während Schepp
schnell einen Tastcase für das indeterminate-DOM-Attribut ergooglet. Stellt sich
raus, dass dieses Feature, mit dem man eine Checkbox anzeigen kann, als wäre sie
in einem dritten Zustand, in allen Browsern funktioniert.

[00:20:11] ASYNC UND DEFER

Performance-Papst Schepp I. referiert über zwei Attribute für Script-Tags, die
die Ausführung von Scripts beeinflussen. Fazit: Wenn wir ohnehin alle Scripts in
eine Datei zusammenfassen und diese erst am Seitenende einbinden, brauchen wir
die Attribute gar nicht so dringend.

[00:29:30] PARSING HTML DOCUMENTS

Peter erklärt kurz, was es mit HTML und XHTML auf sich hat und warum von beiden
Sprachen nur HTML in den HTML5-Spezifikationen steht. Kompliziert wird HTML vor
allem durch document.write(), das auch für das blockierende Verhalten von
Scripts verantwortlich ist.


[00:34:28] KEINE SCHAUNOTIZEN

MIN-CONTENT

Eine neue Maßangabe für CSS, anschaulich erklärt.

VERTICAL TEXT WITH CSS 3 WRITING MODES

Die writing-mode-Eigenschaft in den diversen Browsern und ihr Wechselspiel mit
anderen CSS-Eigenschaften.

SHADOW DOM 201: CSS AND STYLING – HTML5 ROCKS

Follow-up zu Shadow DOM 101.

SUBLIME WEB INSPECTOR

Debugging direkt im Editor!

FUTURE OF FIREFOX DEVTOOLS

Mozilla rüstet auf.

SUBLIME TEXT 3 COMPATIBLE PACKAGES

Schon von ST2 auf ST3 wechseln oder noch nicht? Diese Liste hilft bei der
Entscheidungsfindung.

AWESOME PHP LIBRARIES

Nomen est omen.

Revision 112: Glücksrad und Links

<p>
Eigentlich haben wir alle keine Zeit, aber das ist keine Ausrede&nbsp;&ndash; jedenfalls nicht für Schepp, Peter und <a href="http://twitter.com/frederichemberger">Frederic</a>.
</p>
<h3>[00:00:23] News</h3>
<dl>
<dt><a href="https://hacks.mozilla.org/2013/03/google-and-mpeg-la-announce-agreement/">Google and MPEG LA Agree, Free VP8</a></dt>
<dd>Der VP8-Codec (verwendet in WebM) wird auch in Zukunft nicht in die Nichtexistenz geklagt werden.</dd>
<dt><a href="http://my.opera.com/ODIN/blog/2013/03/05/opera-14-beta-for-android-is-out">Opera 14 Beta</a></dt>
<dd>Der erste Opera mit Webkit. Besonders schön: Läuft anders als Chrome und Co bereits ab Android 2.3.</dd>
<dt><a href="http://blog.nodejs.org/2013/03/11/node-v0-10-0-stable/">Node.js 0.10</a></dt>
<dd>Neues Streams-Interface, stark verbesserte Performance und diverse Bugfixes.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:51] <a href="https://developers.google.com/chrome/mobile/docs/data-compression">Data Compression Proxy</a></dt>
<dd>Google bastelt einen Performance-Proxy für mobiles Surfen, vergleichbar mit <a href="http://help.opera.com/Linux/10.52/de/turbo.html">Opera Turbo</a>. Jede (nicht-HTTPS) Anfrage wird durch einen Google-Server getunnelt, der Performancetuning mit z.B. <a href="http://dev.chromium.org/spdy/">SPDY</a> und <a href="https://developers.google.com/speed/pagespeed/mod?hl=de">mod_pagespeed</a> vernimmt, bevor die Daten an den Nutzer weitergeleitet werden. Performance-Papst Schepp findet die Idee total klasse, während sich Peter fragt, ob man wirklich jeden seiner HTTP-Requests zu Google tragen möchte&nbsp;&ndash; viel besser wäre es doch, die Mobilfunknetze auszubauen.</dd>
<dt>[00:17:35] <a href="http://www.stucox.com/blog/the-good-and-bad-of-level-4-media-queries/">The Good &amp; Bad of Level 4 Media Queries</a></dt>
<dd>Noch sind <a href="http://dev.w3.org/csswg/mediaqueries4/">Media Queries Level 4</a> alles andere fertig, aber ein bisschen Spec-Exegese kann man schon betreiben. Der Artikel von Stu Cox und wir reiben uns ein wenig am Media Feature <code>pointer</code>, das nicht ganz durchdacht scheint. Nicht zuletzt fehlt eine Option für den <a href="http://www.chromeexperiments.com/detail/gesture-based-revealjs/">Minority Report Mode</a>. Wäre es nicht besser, wenn wir einfach weniger Annahmen über die Eingabegeräte der Nutzer machen würden?</dd>
<dt>[00:27:48] <a href="https://github.com/igrigorik/http-client-hints">http-client-hints</a></dt>
<dd>Ilya Grigorik will, dass wir <em>genauere</em> Annahmen über die Endgeräte der Surfer machen können und spezifiziert einen HTTP-Header für solche Informationen. Peter fühlt sich bei sowas an die <a href="http://webaim.org/blog/user-agent-string-history/">History of the browser user-agent string</a>, Viewports und andere Flunkereien durch Browser erinnert und fragt sich, warum dieses mal alles anders sein sollte.</dd>
</dl>
<h3>[00:40:05] HTML-Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#timed-text-tracks">Timed Text Tracks</a></dt>
<dd>
Wir fabulieren ein wenig über Video-Untertitel, das <a href="http://dev.w3.org/html5/webvtt/">WebVTT-Format</a>, <a href="http://de.scribd.com/doc/99333562/Mario-Heiderich-Got-Your-Nose-How-to-Steal-Your-Precious-Data-Without-Using-Scripts">Security</a> sowie <a href="https://transloadit.com/">Transloadit</a> und andere Datei-Umwandel-Dienste. Außerdem empfehlen wir den Talk <a href="https://vimeo.com/53317252">The State of HTML5 Video</a> von Jeroen Wijering.
</dd>
</dl>
<h3>[00:51:05] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4-text">Finer grained control of hyphenation with CSS4 Text &#8211; Generated Content by David Storey</a></dt>
<dd>Funktioniert sogar schon in IE 10 und Safari.</dd>
<dt><a href="http://css-tricks.com/using-svg/">Using SVG</a></dt>
<dd>Umfassender Überblick von Chris Coyier zum Thema.</dd>
<dt><a href="http://www.codebasehq.com/">Codebase</a></dt>
<dd>Github für mehr als nur Git plus Projektverwaltung.</dd>
<dt><a href="http://www.indiegogo.com/projects/tern-intelligent-javascript-editing">Spenden</a> für <a href="http://ternjs.net/">Tern</a></dt>
<dd>Open-Source-JavaScript-Autocompletion kann man nicht kaufen, aber crowdfunden.</dd>
<dt><a href="http://www.ui-transitions.com/">Meaningful Transitions</a></dt>
<dd>Schöne Patterns für Transitions in UIs.</dd>
</dl>


Eigentlich haben wir alle keine Zeit, aber das ist keine Ausrede – jedenfalls
nicht für Schepp, Peter und Frederic.


[00:00:23] NEWS

GOOGLE AND MPEG LA AGREE, FREE VP8

Der VP8-Codec (verwendet in W…

Eigentlich haben wir alle keine Zeit, aber das ist keine Ausrede – jedenfalls
nicht für Schepp, Peter und Frederic.


[00:00:23] NEWS

GOOGLE AND MPEG LA AGREE, FREE VP8

Der VP8-Codec (verwendet in WebM) wird auch in Zukunft nicht in die
Nichtexistenz geklagt werden.

OPERA 14 BETA

Der erste Opera mit Webkit. Besonders schön: Läuft anders als Chrome und Co
bereits ab Android 2.3.

NODE.JS 0.10

Neues Streams-Interface, stark verbesserte Performance und diverse Bugfixes.


SCHAUNOTIZEN

[00:01:51] DATA COMPRESSION PROXY

Google bastelt einen Performance-Proxy für mobiles Surfen, vergleichbar mit
Opera Turbo. Jede (nicht-HTTPS) Anfrage wird durch einen Google-Server
getunnelt, der Performancetuning mit z.B. SPDY und mod_pagespeed vernimmt, bevor
die Daten an den Nutzer weitergeleitet werden. Performance-Papst Schepp findet
die Idee total klasse, während sich Peter fragt, ob man wirklich jeden seiner
HTTP-Requests zu Google tragen möchte – viel besser wäre es doch, die
Mobilfunknetze auszubauen.

[00:17:35] THE GOOD & BAD OF LEVEL 4 MEDIA QUERIES

Noch sind Media Queries Level 4 alles andere fertig, aber ein bisschen
Spec-Exegese kann man schon betreiben. Der Artikel von Stu Cox und wir reiben
uns ein wenig am Media Feature pointer, das nicht ganz durchdacht scheint. Nicht
zuletzt fehlt eine Option für den Minority Report Mode. Wäre es nicht besser,
wenn wir einfach weniger Annahmen über die Eingabegeräte der Nutzer machen
würden?

[00:27:48] HTTP-CLIENT-HINTS

Ilya Grigorik will, dass wir genauere Annahmen über die Endgeräte der Surfer
machen können und spezifiziert einen HTTP-Header für solche Informationen. Peter
fühlt sich bei sowas an die History of the browser user-agent string, Viewports
und andere Flunkereien durch Browser erinnert und fragt sich, warum dieses mal
alles anders sein sollte.


[00:40:05] HTML-GLÜCKSRAD

TIMED TEXT TRACKS

Wir fabulieren ein wenig über Video-Untertitel, das WebVTT-Format, Security
sowie Transloadit und andere Datei-Umwandel-Dienste. Außerdem empfehlen wir den
Talk The State of HTML5 Video von Jeroen Wijering.


[00:51:05] KEINE SCHAUNOTIZEN

FINER GRAINED CONTROL OF HYPHENATION WITH CSS4 TEXT – GENERATED CONTENT BY DAVID
STOREY

Funktioniert sogar schon in IE 10 und Safari.

USING SVG

Umfassender Überblick von Chris Coyier zum Thema.

CODEBASE

Github für mehr als nur Git plus Projektverwaltung.

SPENDEN FÜR TERN

Open-Source-JavaScript-Autocompletion kann man nicht kaufen, aber crowdfunden.

MEANINGFUL TRANSITIONS

Schöne Patterns für Transitions in UIs.

Revision 111: Performance-Proxy, Media Queries Level 4, http-client-hints

<p>Peter, Hans und Rod diskutieren Rendering Performance auf mobilen Geräten. Wie finden wir die Engpässe, was lässt sich ohne Verluste beheben und wo möchte man freiwillig Abstriche machen? Eine sehr exakte Wissenschaft, wir liefern Fakten Fakten Fakten!</p>
<h3>[00:00:11] News</h3>
<dl>
<dt><a href="http://blogs.msdn.com/b/ie/archive/2013/02/26/ie10-for-windows-7-globally-available-for-consumers-and-businesses.aspx">Internet Explorer 10 auf Windows 7</a></dt>
<dd>Der IE10 ist jetzt für Windows 7 zum <a href="http://windows.microsoft.com/en-us/internet-explorer/downloads/ie-10/worldwide-languages?woldogcb=0">Download</a> verfügbar. Wer sich mit dem neusten Trident noch nicht auseinandergesetzt hat, möchte dies <em>jetzt</em> nachholen.</dd>
<dt><a href="http://dev.w3.org/csswg/css3-box/#the-width-and-height-properties">Intrinsic Dimensions</a></dt>
<dd>Wer schon immer mal ein <code>&lt;div&gt;</code> auf die Größe seines Inhaltes anpassen wollte, wird sich jetzt in Firefox und Chrome an <code>width: fit-content;</code> erfreuen.</dd>
<dt><a href="http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/">jQuery 2.0 beta2</a></dt>
<dd>Der nächste Kandidat ist da &#8211; wieder heisst es: Testet eure Plugins und Seiten.</dd>
<dt><a href="http://coffeescript.org/">CoffeeScript 1.6.1</a></dt>
<dd>Jetzt auch mit <a href="http://coffeescript.org/#source-maps">Source Maps</a> (Achtung: 1.6.0 ist kaputt)</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:56] Mobile Browser Performance</dt>
<dd>Wir diskutieren über Performance &#8211; ausgelöst von den Artikeln <a href="http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/">On Translate3D</a> und <a href="http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/">Myth busting the HTML5 performance of transform:translate vs. top/left</a>. Einen sehr netten Einstieg in das Thema Transforms bietet das Tutorial <a href="http://docs.webplatform.org/wiki/tutorials/css_transforms">Manipulating content with CSS3 transforms</a>.</dd>
</dl>
<h3>[00:26:10] HTML-Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-autocomplete"><code>autocomplete</code> Attribut</a></dt>
<dd>… kann nützlich sein, aber auch für (falsche) Sicherheit missbraucht werden</dd>
</dl>
<h3>[00:34:45] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/vladikoff/grunt-devtools">grunt-devtools</a></dt>
<dd>… integriert <a href="http://gruntjs.com/">Grunts</a> Konsolenausgabe in die Google Chrome Developer Tools</dd>
<dt><a href="http://paulirish.com/2013/webkit-for-developers/">WebKit for Developers</a></dt>
<dd>… Paul erklärt uns was WebKit eigentlich ist und dass WebKit eben nicht gleich WebKit ist.</dd>
<dt><a href="http://blog.new-bamboo.co.uk/2013/02/26/full-text-search-in-your-browser">Full-text search in your browser</a></dt>
<dd><a href="http://lunrjs.com/">lunr.js</a> ist eine Feauture-bepackte Suchmaschine, die im Browser läuft.</dd>
<dt><a href="http://www.youtube.com/watch?v=53tdQeV_pOI">Designing Better JavaScript APIs (Video)</a></dt>
<dd>Rod erklärt uns hier in 20 Minuten, was <a href="http://coding.smashingmagazine.com/2012/10/09/designing-javascript-apis-usability/">sein Artikel</a> in ausführlicherem Umfang liefert.</dd>
</dl>


Peter, Hans und Rod diskutieren Rendering Performance auf mobilen Geräten. Wie
finden wir die Engpässe, was lässt sich ohne Verluste beheben und wo möchte man
freiwillig Abstriche machen? Eine sehr ex…

Peter, Hans und Rod diskutieren Rendering Performance auf mobilen Geräten. Wie
finden wir die Engpässe, was lässt sich ohne Verluste beheben und wo möchte man
freiwillig Abstriche machen? Eine sehr exakte Wissenschaft, wir liefern Fakten
Fakten Fakten!


[00:00:11] NEWS

INTERNET EXPLORER 10 AUF WINDOWS 7

Der IE10 ist jetzt für Windows 7 zum Download verfügbar. Wer sich mit dem
neusten Trident noch nicht auseinandergesetzt hat, möchte dies jetzt nachholen.

INTRINSIC DIMENSIONS

Wer schon immer mal ein <div> auf die Größe seines Inhaltes anpassen wollte,
wird sich jetzt in Firefox und Chrome an width: fit-content; erfreuen.

JQUERY 2.0 BETA2

Der nächste Kandidat ist da – wieder heisst es: Testet eure Plugins und Seiten.

COFFEESCRIPT 1.6.1

Jetzt auch mit Source Maps (Achtung: 1.6.0 ist kaputt)


SCHAUNOTIZEN

[00:01:56] MOBILE BROWSER PERFORMANCE

Wir diskutieren über Performance – ausgelöst von den Artikeln On Translate3D und
Myth busting the HTML5 performance of transform:translate vs. top/left. Einen
sehr netten Einstieg in das Thema Transforms bietet das Tutorial Manipulating
content with CSS3 transforms.


[00:26:10] HTML-GLÜCKSRAD

AUTOCOMPLETE ATTRIBUT

… kann nützlich sein, aber auch für (falsche) Sicherheit missbraucht werden


[00:34:45] KEINE SCHAUNOTIZEN

GRUNT-DEVTOOLS

… integriert Grunts Konsolenausgabe in die Google Chrome Developer Tools

WEBKIT FOR DEVELOPERS

… Paul erklärt uns was WebKit eigentlich ist und dass WebKit eben nicht gleich
WebKit ist.

FULL-TEXT SEARCH IN YOUR BROWSER

lunr.js ist eine Feauture-bepackte Suchmaschine, die im Browser läuft.

DESIGNING BETTER JAVASCRIPT APIS (VIDEO)

Rod erklärt uns hier in 20 Minuten, was sein Artikel in ausführlicherem Umfang
liefert.

Revision 110: Rendering Performance

<p>Kahlil und Rod luden <a href="https://twitter.com/dantz">Andreas Dantz</a> ins virtuelle Studio ein, um die letzte Internetwoche zu reflektieren.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:23] <a href="http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130221/">CSS Counter Styles</a></dt>
<dd>CSS Counter Styles Level 3 (Working Draft) beschreibt wie man Listen (<code>&lt;ul&gt;</code> und <code>&lt;ol&gt;</code>) mit eigenen Zählerstilen versehen können werden wird. Der Futur ist leider korrekt, denn Implementationen lassen noch auf sich warten.</dd>
<dt>[00:06:35] Mobile Betriebssysteme</dt>
<dd><a href="http://www.engadget.com/2013/02/25/lg-acquires-webos-from-hp-smart-tv-future/">LG kauft webOS</a> um damit seine SmartTVs zu betreiben. Ob und wann das von Palm und HP entwickelte, auf Webstandards pochende, Betriebsystem auch auf LGs SmartPhones zum Einsatz kommt, ist noch nicht so ganz klar. <a href="http://news.cnet.com/8301-1023_3-57570214-93/global-allies-give-mozillas-firefox-os-a-mobile-foothold/">Mozilla Firefox OS</a>  Startet im zweiten Quartal 2013 &#8211; mit einer Menge von Partnern.</dd>
<dt>[00:14:17] <a href="http://www.iandevlin.com/blog/2013/02/html5/link">HTML5-Linkelement</a></dt>
<dd>Ian Devlin erklärt uns was das gute alte <code>&lt;a&gt;</code> denn zwischenzeitlich alles kann. Interessant ist vor allem die Möglichkeit Downloads von Resourcen des Servers, sowie der JavaScript Laufzeit des geöffneten Dokuments zu erzwingen. Auch sinnieren wir über den Sinn und Unsinn des ping Attributs.</dd>
<dt>[00:27:41] <a href="http://events.jquery.org/2013/eu/">jQuery Europe Conference</a></dt>
<dd>Schön war&#8217;s beim Kaiser. JavaScript spricht man auch in den prunkvollen Hallen der Paradeiser-Esser. Viele interessante Talks, leider keine Videos. Ohne jQuery-Bezug, stellte man die <a href="http://www.w3.org/TR/CSP/">CSP &#8211; Content Security Policy</a> vor. In Chrome kann man Version 1.0 bereits testen.</dd>
</dl>
<h3>[00:36:34] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/iammerrick/grunt-parallel">grunt-parallel</a></dt>
<dd>… erlaubt das parallele Ausführen bestimmter Aufgaben. Üblicherweise werden Tasks in Sequenz ausgeführt, was aber nicht immer Notwendig ist. Hier kann grunt-parallel für etwas mehr Geschwindigkeit sorgen.</dd>
<dt><a href="http://hugogiraudel.com/2013/02/04/css-gradients/">Dig Deep into CSS Gradients</a></dt>
<dd>… ist ein toller Artikel über die Funktionsweise von Farbverläufen.</dd>
<dt><a href="http://www.quirksmode.org/blog/archives/2013/02/new_css_tests_f.html">CSS Tests &#8211; fonts and text</a></dt>
<dd>… nennt <a href="https://twitter.com/ppk">@ppk</a>s zuletzt gefundene Mobile Browser Bugs.</dd>
</dl>


Kahlil und Rod luden Andreas Dantz ins virtuelle Studio ein, um die letzte
Internetwoche zu reflektieren.


SCHAUNOTIZEN

[00:00:23] CSS COUNTER STYLES

CSS Counter Styles Level 3 (Working Draft) besc…

Kahlil und Rod luden Andreas Dantz ins virtuelle Studio ein, um die letzte
Internetwoche zu reflektieren.


SCHAUNOTIZEN

[00:00:23] CSS COUNTER STYLES

CSS Counter Styles Level 3 (Working Draft) beschreibt wie man Listen (<ul> und
<ol>) mit eigenen Zählerstilen versehen können werden wird. Der Futur ist leider
korrekt, denn Implementationen lassen noch auf sich warten.

[00:06:35] MOBILE BETRIEBSSYSTEME

LG kauft webOS um damit seine SmartTVs zu betreiben. Ob und wann das von Palm
und HP entwickelte, auf Webstandards pochende, Betriebsystem auch auf LGs
SmartPhones zum Einsatz kommt, ist noch nicht so ganz klar. Mozilla Firefox OS 
Startet im zweiten Quartal 2013 – mit einer Menge von Partnern.

[00:14:17] HTML5-LINKELEMENT

Ian Devlin erklärt uns was das gute alte <a> denn zwischenzeitlich alles kann.
Interessant ist vor allem die Möglichkeit Downloads von Resourcen des Servers,
sowie der JavaScript Laufzeit des geöffneten Dokuments zu erzwingen. Auch
sinnieren wir über den Sinn und Unsinn des ping Attributs.

[00:27:41] JQUERY EUROPE CONFERENCE

Schön war’s beim Kaiser. JavaScript spricht man auch in den prunkvollen Hallen
der Paradeiser-Esser. Viele interessante Talks, leider keine Videos. Ohne
jQuery-Bezug, stellte man die CSP – Content Security Policy vor. In Chrome kann
man Version 1.0 bereits testen.


[00:36:34] KEINE SCHAUNOTIZEN

GRUNT-PARALLEL

… erlaubt das parallele Ausführen bestimmter Aufgaben. Üblicherweise werden
Tasks in Sequenz ausgeführt, was aber nicht immer Notwendig ist. Hier kann
grunt-parallel für etwas mehr Geschwindigkeit sorgen.

DIG DEEP INTO CSS GRADIENTS

… ist ein toller Artikel über die Funktionsweise von Farbverläufen.

CSS TESTS – FONTS AND TEXT

… nennt @ppks zuletzt gefundene Mobile Browser Bugs.

Revision 109: Counter Styles, mobile Betriebssysteme, HTML5-Linkelemente

<p>Als lieben Gast hatten sich Christian und Hans diesmal <a href="https://twitter.com/asciidisco">Sebastian Golasch</a> dazu geholt, der bereits einige Male zu Gast war und jedes mal eine Bereicherung für die Sendung ist.</p>
<h3>[00:00:22] News</h3>
<dl>
<dt><a href="http://www.golem.de/news/edge-reflow-html5-tool-fuer-responsive-webdesign-von-adobe-1302-97610.html">Adobe Edge Relow</a></dt>
<dd>Adobe veröffentlicht ein Tool für Responsive Webdesign um Photoshop zu verdrängen.</dd>
<dt><a href="http://gruntjs.com/blog/2013-02-18-grunt-0.4.0-released">Grunt 0.4.0 veröffentlich</a></dt>
<dd>Nach langer Entwicklungszeit ist Grunt 0.4.0 nun endlich veröffentlicht.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:53] <a href="http://asmjs.org/spec/latest/">asm.js</a></dt>
<dd>Mozilla veröffentlicht <a href="http://www.2ality.com/2013/02/asm-js.html">asm.js</a>, einer <a href="http://news.ycombinator.com/item?id=5227637">Untermenge von JavaScript</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840282">getrimmt auf Performance</a>. Wir diskutieren über den Einsatzbereich von asm.js und on man es wirklich braucht.</dd>
<dt>[00:15:02] <a href="https://plus.google.com/104906919451670502090/posts/hUVziQApKtJ">UA Sniffing</a></dt>
<dd>Pamela Fox schreibt über UA Sniffing und Fälle, bei denen es sinnvoll sein kann auf UA Sniffing zu vertrauen, anstatt Feature Detection zu nutzen.</dd>
<dt>[00:25:31] <a href="http://my.opera.com/ODIN/blog/300-million-users-and-move-to-webkit">Opera wechselt zu WebKit</a></dt>
<dd>Buhuu… Die Meldung der Woche. Auch wir beteiligen uns an der Diskussion und sprechen über die Vor- und Nachteile dieses Schrittes. Als Diskussionsgrundlage bauen wir unter anderem auf <a href="https://plus.google.com/116237864387312784020/posts/iRRPVaaPQvo">Jake Archibalds Artikel</a> auf.</dd>
</dl>
<h3>[00:40:45] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.youtube.com/playlist?list=PLNYkxOF6rcICCU_UD67Ga0qLvMjnBBwft">Edge Conference &#8211; Videos</a></dt>
<dd>Einige interessante Panel-Diskussionen zu verschiedensten Webthematiken.</dd>
<dt><a href="https://plus.google.com/118075919496626375791/posts/7U9fkCRM4SM">Screensharing with getUserMedia</a></dt>
<dd>Chrome Canary unterstützt Fullscreen-Sharing. Eine Demo dazu hat Eric Bidelman zusammengezimmert.</dd>
<dt><a href="http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/">Dialogboxen und a11y</a></dt>
<dd>Nicholas Zakas beschreibt wie man mit wenigen aria-roles und ein bisschen JavaScript Dialogboxen zugänglich macht.</dd>
<dt><a href="https://twitter.com/distilledhype/status/302769351654768640">Distilled Hype sucht Nachwuchs</a></dt>
<dd>Unser Co-Host Kahlil such Hilfe für sein Link-Blog <a href="http://distilledhype.com/">Distilled Hype</a>.</dd>
<dt><a href="http://css-tricks.com/using-flexbox/">Flexbox richtig gemacht</a></dt>
<dd>Chris Coyier beschreibt, wie man Flexbox richtig nutzt – mit der alten und neuen Syntax kombiniert.</dd>
<dt><a href="http://jschr.github.com/textillate/">Textillate</a></dt>
<dd>Mit Textillate kann man Buchstaben und Text toll animieren.</dd>
<dt><a href="http://lazylinepainter.info/">Lazy Line Painter</a></dt>
<dd>LLP malt SVGs. Demo anschauen!</dd>
</dl>


Als lieben Gast hatten sich Christian und Hans diesmal Sebastian Golasch dazu
geholt, der bereits einige Male zu Gast war und jedes mal eine Bereicherung für
die Sendung ist.


[00:00:22] NEWS

ADOBE …

Als lieben Gast hatten sich Christian und Hans diesmal Sebastian Golasch dazu
geholt, der bereits einige Male zu Gast war und jedes mal eine Bereicherung für
die Sendung ist.


[00:00:22] NEWS

ADOBE EDGE RELOW

Adobe veröffentlicht ein Tool für Responsive Webdesign um Photoshop zu
verdrängen.

GRUNT 0.4.0 VERÖFFENTLICH

Nach langer Entwicklungszeit ist Grunt 0.4.0 nun endlich veröffentlicht.


SCHAUNOTIZEN

[00:01:53] ASM.JS

Mozilla veröffentlicht asm.js, einer Untermenge von JavaScript, getrimmt auf
Performance. Wir diskutieren über den Einsatzbereich von asm.js und on man es
wirklich braucht.

[00:15:02] UA SNIFFING

Pamela Fox schreibt über UA Sniffing und Fälle, bei denen es sinnvoll sein kann
auf UA Sniffing zu vertrauen, anstatt Feature Detection zu nutzen.

[00:25:31] OPERA WECHSELT ZU WEBKIT

Buhuu… Die Meldung der Woche. Auch wir beteiligen uns an der Diskussion und
sprechen über die Vor- und Nachteile dieses Schrittes. Als Diskussionsgrundlage
bauen wir unter anderem auf Jake Archibalds Artikel auf.


[00:40:45] KEINE SCHAUNOTIZEN

EDGE CONFERENCE – VIDEOS

Einige interessante Panel-Diskussionen zu verschiedensten Webthematiken.

SCREENSHARING WITH GETUSERMEDIA

Chrome Canary unterstützt Fullscreen-Sharing. Eine Demo dazu hat Eric Bidelman
zusammengezimmert.

DIALOGBOXEN UND A11Y

Nicholas Zakas beschreibt wie man mit wenigen aria-roles und ein bisschen
JavaScript Dialogboxen zugänglich macht.

DISTILLED HYPE SUCHT NACHWUCHS

Unser Co-Host Kahlil such Hilfe für sein Link-Blog Distilled Hype.

FLEXBOX RICHTIG GEMACHT

Chris Coyier beschreibt, wie man Flexbox richtig nutzt – mit der alten und neuen
Syntax kombiniert.

TEXTILLATE

Mit Textillate kann man Buchstaben und Text toll animieren.

LAZY LINE PAINTER

LLP malt SVGs. Demo anschauen!

Revision 108: asm.js, UA Sniffing und Operas Wechsel zu WebKit

<p>Mit Schepp, Hans, <a href="https://twitter.com/helloanselm">Anselm</a> und Peter auf der Brücke dampfte Working Draft gezielt auf seine Revision 107 zu.</p>
<h3>[00:00:21] News</h3>
<dl>
<dt><a href="http://firefoxnightly.tumblr.com/post/41871992210/element-main-is-now-supported-by-firefoxnightly">&lt;main&gt;-Support in Firefox</a></dt>
<dd>Das neue Element (siehe <a href="http://workingdraft.de/101/">Revision 101</a>) ist nach Chrome jetzt auch im Firefox gelandet.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:49] <a href="https://gocardless.com/blog/unresponsive-design/">Ditching responsive design</a></dt>
<dd>GoCardless hat für sein letztes Redesign ein unresponsive Design gewählt. Kann man so etwas heutzutage überhaupt machen? Die Firma argumentiert diesen Schritt mit zu wenig Mobile-Usern und Zeit- sowie Geldersparnis beim Bau eines unresponsive Designs. Schepp kann die Argumentation nachvollziehen, Anselm und Peter eher nicht&nbsp;&ndash; sie halten den Aufwand für ein Mimimum an responsiveness für so gering, dass es ihrer Meinung nach keinen validen Grund gibt, es nicht zu machen. Interessant scheint die Existenz einer „Unresponsive-Szene“ auf Twitter, die es genau wie GoCardless sieht.</dd>
<dt>[00:23:51] <a href="http://eventifier.co/event/wpds13">Bericht vom Web Platform Doc Sprint Berlin</a></dt>
<dd>Schepp, Hans und Anselm berichten vom <a href="http://lanyrd.com/2013/wpds/">Web Platform Doc Sprint Berlin</a>, auf dem sie letzte Woche viel für <a href="http://www.webplatform.org/">webplatform.org</a> geschrieben haben. Schepp schrieb Tutorials über IE-Handling, Hans dokumentierte <code>box-sizing</code>, Anselm unter anderem <code>text-overflow</code>. Einstimmiges Urteil: gut organisierte Veranstaltung und durch das Schreiben der Dokumentation gewinnt selbst der größte Nerd noch hier und da neue Erkenntnisse.</dd>
</dl>
<h3>[00:41:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://addyosmani.com/blog/devtools-visually-re-engineering-css-for-faster-paint-times/">DevTools: Visually Re-engineering CSS For Faster Paint Times</a></dt>
<dd>Addy Osmani erklärt, wie man mit den Webkit-Devtools zu lange Paint-Zeiten erkennt.</dd>
<dt><a href="http://2013.front-trends.com/">Front-Trends 2013</a></dt>
<dd>Warschau ist schön und diese Konferenz ist es auch.</dd>
<dt><a href="http://blokkfont.com/">BLOKK font</a></dt>
<dd>Webfont für Wireframes.</dd>
<dt><a href="http://extensionizr.com/">Extensionizr &#8211; boilerplate for your chrome extension</a></dt>
<dd>Nomen est omen.</dd>
<dt><a href="http://corlan.org/2013/02/08/say-hello-to-css-regions-polyfill/">CSS Regions Polyfill</a></dt>
<dd>Im Gegensatz zu anderen Polyfills entspricht dieser der aktuellen Regions-Syntax.</dd>
</dl>


Mit Schepp, Hans, Anselm und Peter auf der Brücke dampfte Working Draft gezielt
auf seine Revision 107 zu.


[00:00:21] NEWS

<MAIN>-SUPPORT IN FIREFOX

Das neue Element (siehe Revision 101) ist nach …

Mit Schepp, Hans, Anselm und Peter auf der Brücke dampfte Working Draft gezielt
auf seine Revision 107 zu.


[00:00:21] NEWS

<MAIN>-SUPPORT IN FIREFOX

Das neue Element (siehe Revision 101) ist nach Chrome jetzt auch im Firefox
gelandet.


SCHAUNOTIZEN

[00:00:49] DITCHING RESPONSIVE DESIGN

GoCardless hat für sein letztes Redesign ein unresponsive Design gewählt. Kann
man so etwas heutzutage überhaupt machen? Die Firma argumentiert diesen Schritt
mit zu wenig Mobile-Usern und Zeit- sowie Geldersparnis beim Bau eines
unresponsive Designs. Schepp kann die Argumentation nachvollziehen, Anselm und
Peter eher nicht – sie halten den Aufwand für ein Mimimum an responsiveness für
so gering, dass es ihrer Meinung nach keinen validen Grund gibt, es nicht zu
machen. Interessant scheint die Existenz einer „Unresponsive-Szene“ auf Twitter,
die es genau wie GoCardless sieht.

[00:23:51] BERICHT VOM WEB PLATFORM DOC SPRINT BERLIN

Schepp, Hans und Anselm berichten vom Web Platform Doc Sprint Berlin, auf dem
sie letzte Woche viel für webplatform.org geschrieben haben. Schepp schrieb
Tutorials über IE-Handling, Hans dokumentierte box-sizing, Anselm unter anderem
text-overflow. Einstimmiges Urteil: gut organisierte Veranstaltung und durch das
Schreiben der Dokumentation gewinnt selbst der größte Nerd noch hier und da neue
Erkenntnisse.


[00:41:00] KEINE SCHAUNOTIZEN

DEVTOOLS: VISUALLY RE-ENGINEERING CSS FOR FASTER PAINT TIMES

Addy Osmani erklärt, wie man mit den Webkit-Devtools zu lange Paint-Zeiten
erkennt.

FRONT-TRENDS 2013

Warschau ist schön und diese Konferenz ist es auch.

BLOKK FONT

Webfont für Wireframes.

EXTENSIONIZR – BOILERPLATE FOR YOUR CHROME EXTENSION

Nomen est omen.

CSS REGIONS POLYFILL

Im Gegensatz zu anderen Polyfills entspricht dieser der aktuellen
Regions-Syntax.

Revision 107: Unresponsive Design, Docsprint und ein paar Links

<p>Neue Revision, neues Glück! Diesmal als Glücksfeen am Start: Kahli, Hans und als Überraschungsgast der feine <a href="https://twitter.com/fhemberger">Herr Hemberger</a>.</p>
<h3>[00:00:29] News</h3>
<dl>
<dt><a href="http://www.sublimetext.com/blog/articles/sublime-text-3-beta">Sublime Text 3 Beta</a></dt>
<dd>Der guteste Texteditor von allen erhält eine dritte Version.</dd>
<dt><a href="http://twitter.github.com/flight/">Flight</a></dt>
<dd>Neues komponentenbasiertes Framework aus der Feder Twitters.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:49] <a href="http://www.modern.ie/">modern.IE &#8211; Testing made easier in Internet Explorer</a></dt>
<p>Das Internet-Explorer-Team poliert weiter seinen ramponierten Ruf auf und bietet eine Webseite mit allerlei hilfreichen Ressourcen rund um Qualitätssicherung an. Besonders hilfreich: <a href="http://www.modern.ie/virtualization-tools">3 Monate kostenloser Browserstack-Zugang.</a></p>
<dd>
</dd>
<dt>[00:17:35] <a href="http://blogs.adobe.com/webplatform/2013/01/30/balancing-text-for-better-readability/">Balancing Text for better Readability</a></dt>
<dd>Adobe stellt einen Vorschlag für eine neue CSS-Eigenschaft vor. Mit <code>text-wrap: balance</code> soll es möglich sein bei zentriertem Text ein ausgeglicheneres Schriftbild zu erzeugen.</dd>
<dt>[00:29:38] <a href="http://scriptogr.am/micmath/post/should-you-use-strict-in-your-production-javascript">Should You &#8222;Use Strict&#8220; in Your Production JavaScript?</a></dt>
<dd>
Der in ECMAScript&nbsp;5 eingeführte Strict Mode verändert das Verhalten von JavaScript im Browser <a href="https://gist.github.com/rwldrn/3920242">recht tiefgreifend</a> und Michael Mathews fragt sich, ob man das im Produktiveinsatz wirklich haben will.</dd>
</dl>
<h3>[00:42:44] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://compatibility.shwups-cms.ch/de/home/">Big JS-Compatibility-Table</a></dt>
<dd>Behauptet, es würde sich um JS drehen, enthält aber vor allem DOM. Und ist daher nützlich.</dd>
<dt><a href="https://github.com/js-coder/js-testing-boilerplates">js-testing-boilerplates</a></dt>
<dd>Schön einfache Boilerplates für Unit Tests für Jasmine, Mocha und QUnit. Hilft vielleicht denen, die sonst immer zu faul sind, sich damit zu befassen.</dd>
<dt><a href="http://remotestorage.io/">remoteStorage – An open protocol for per-user storage</a></dt>
<dd>Jan-Christoph Borchardt erklärt‘s <a href="https://vimeo.com/55616898">im Video</a>.</dd>
<dt><a href="http://icant.co.uk/talks/h5/appday.html">HTML5-Apps mit Firefox OS</a></dt>
<dd>Chris Heilmann erzählt von der Entwicklung von und der Toolchain für Apps in Firefox OS.</dd>
<dt><a href="http://kushagragour.in/lab/hint/">hint.css &#8211; styled tooltips without javascript</a></dt>
<dd>JavaScript ist etwas für Leute, die kein CSS können.</dd>
<dt><a href="http://cssconf.com/">CSSConf</a></dt>
<dd>Nomen est omen.</dd>
<dt><a href="http://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html">Thema</a></dt>
<dd>Das Chrome-Team berichtet von Fortschritten in Sachen Web RTC: Browser&nbsp;A kann Browser&nbsp;B anrufen!</dd>
</dl>


Neue Revision, neues Glück! Diesmal als Glücksfeen am Start: Kahli, Hans und als
Überraschungsgast der feine Herr Hemberger.


[00:00:29] NEWS

SUBLIME TEXT 3 BETA

Der guteste Texteditor von allen er…

Neue Revision, neues Glück! Diesmal als Glücksfeen am Start: Kahli, Hans und als
Überraschungsgast der feine Herr Hemberger.


[00:00:29] NEWS

SUBLIME TEXT 3 BETA

Der guteste Texteditor von allen erhält eine dritte Version.

FLIGHT

Neues komponentenbasiertes Framework aus der Feder Twitters.


SCHAUNOTIZEN

[00:01:49] MODERN.IE – TESTING MADE EASIER IN INTERNET EXPLORER

Das Internet-Explorer-Team poliert weiter seinen ramponierten Ruf auf und bietet
eine Webseite mit allerlei hilfreichen Ressourcen rund um Qualitätssicherung an.
Besonders hilfreich: 3 Monate kostenloser Browserstack-Zugang.



[00:17:35] BALANCING TEXT FOR BETTER READABILITY

Adobe stellt einen Vorschlag für eine neue CSS-Eigenschaft vor. Mit text-wrap:
balance soll es möglich sein bei zentriertem Text ein ausgeglicheneres
Schriftbild zu erzeugen.

[00:29:38] SHOULD YOU „USE STRICT“ IN YOUR PRODUCTION JAVASCRIPT?

Der in ECMAScript 5 eingeführte Strict Mode verändert das Verhalten von
JavaScript im Browser recht tiefgreifend und Michael Mathews fragt sich, ob man
das im Produktiveinsatz wirklich haben will.


[00:42:44] KEINE SCHAUNOTIZEN

BIG JS-COMPATIBILITY-TABLE

Behauptet, es würde sich um JS drehen, enthält aber vor allem DOM. Und ist daher
nützlich.

JS-TESTING-BOILERPLATES

Schön einfache Boilerplates für Unit Tests für Jasmine, Mocha und QUnit. Hilft
vielleicht denen, die sonst immer zu faul sind, sich damit zu befassen.

REMOTESTORAGE – AN OPEN PROTOCOL FOR PER-USER STORAGE

Jan-Christoph Borchardt erklärt‘s im Video.

HTML5-APPS MIT FIREFOX OS

Chris Heilmann erzählt von der Entwicklung von und der Toolchain für Apps in
Firefox OS.

HINT.CSS – STYLED TOOLTIPS WITHOUT JAVASCRIPT

JavaScript ist etwas für Leute, die kein CSS können.

CSSCONF

Nomen est omen.

THEMA

Das Chrome-Team berichtet von Fortschritten in Sachen Web RTC: Browser A kann
Browser B anrufen!

Revision 106: modern.IE, Textbalance und der ES5 Strict Mode

<p>Schepp und Peter holten sich Verstärkung bei <a href="https://twitter.com/asciidisco">Sebastian Golasch</a> und beackerten mit ihm zwei Themen aus dem Bereich der Frontend-Performance. Dazu kommt die übliche Ladung Links.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:17] CSS-Performance</dt>
<dd>Angestachelt von der Frage <a href="http://www.jonathanklein.net/2013/01/how-much-css-should-you-have.html">how much CSS should you have</a> mäandern wir quer durch den Problemkomplex CSS-Performance. Peter und Sebastian grillten Performance-Papst Schepp unter anderem mit Fragen zum Einfluss vom Browsercache (groß) und Selektorperformance (vernachlässigbar) und erfahren, ob Sprites oder das Inlining von Bildern besser sind (Inlining gewinnt). Wir befinden die <a href="http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/">CSS Profiler</a> von Dragonfly und Chrome für gut, <a href="http://csslint.net/">CSS Lint</a> ob zu strenger Regeln für weniger gut. Das DOM zu entrümpeln erscheint da schon sinnvoller. Schepp lobt das <a href="http://mir.aculo.us/dom-monster/">DOM Monster</a> und verwendet <a href="https://developer.mozilla.org/de/docs/DOM/Storage">Web Storage</a> als Cache, Peter will durch CSS-Pseudoelemente sein DOM verschlanken.</dd>
<dt>[00:24:41] Web Workers</dt>
<dd><a href="http://blog.teamtreehouse.com/using-web-workers-to-speed-up-your-javascript-applications">Eine Einführung zum Thema Web Workers</a> scollte an uns vorbei und verleitete zu der Frage, wozu man sowas denn brauchen könnte. HTML5-Erklärbär Peter nennt als Use Case unter anderem <a href="http://badassjs.com/post/1461943420/face-detection-in-javascript-via-html5-canvas">JavaScript-Gesichtserkennung</a> und erläutert die Vorzüge des <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#safe-passing-of-structured-data">structured clone algorithm</a>. Darauf fallen uns einige weitere Anwendungsmöglichkeiten ein, die nur durch <a href="http://caniuse.com/webworkers">mangelnde Browserunterstützung</a> eingeschränkt werden.</dd>
</dl>
<h3>[00:49:14] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://shanetomlinson.com/2013/testing-javascript-frontend-part-1-anti-patterns-and-fixes/">Writing Testable Frontend Javascript</a></dt>
<dd>Das Wissen, das andere in einem ganzen Buch ausbreiten ist hier kompakt zusammengefasst.</dd>
<dt><a href="https://www.paymill.com/de-de/">Paymill &#8211; The Payment Engineers</a></dt>
<dd>Verspricht Online-Payment ohne die ganz großen Schmerzen.</dd>
<dt><a href="http://a11yproject.com/">A11Y Project</a></dt>
<dd>Links, Artikel und Checklisten zum Thema Accessibility.</dd>
<dt><a href="http://interior.substance.io/modules/surface.html">Surface &#8211; A building block for web-based text editors.</a></dt>
<dd><q lang="en">A building block for web-based text editors.</q></dd>
</dl>


Schepp und Peter holten sich Verstärkung bei Sebastian Golasch und beackerten
mit ihm zwei Themen aus dem Bereich der Frontend-Performance. Dazu kommt die
übliche Ladung Links.


SCHAUNOTIZEN

[00:00:…

Schepp und Peter holten sich Verstärkung bei Sebastian Golasch und beackerten
mit ihm zwei Themen aus dem Bereich der Frontend-Performance. Dazu kommt die
übliche Ladung Links.


SCHAUNOTIZEN

[00:00:17] CSS-PERFORMANCE

Angestachelt von der Frage how much CSS should you have mäandern wir quer durch
den Problemkomplex CSS-Performance. Peter und Sebastian grillten
Performance-Papst Schepp unter anderem mit Fragen zum Einfluss vom Browsercache
(groß) und Selektorperformance (vernachlässigbar) und erfahren, ob Sprites oder
das Inlining von Bildern besser sind (Inlining gewinnt). Wir befinden die CSS
Profiler von Dragonfly und Chrome für gut, CSS Lint ob zu strenger Regeln für
weniger gut. Das DOM zu entrümpeln erscheint da schon sinnvoller. Schepp lobt
das DOM Monster und verwendet Web Storage als Cache, Peter will durch
CSS-Pseudoelemente sein DOM verschlanken.

[00:24:41] WEB WORKERS

Eine Einführung zum Thema Web Workers scollte an uns vorbei und verleitete zu
der Frage, wozu man sowas denn brauchen könnte. HTML5-Erklärbär Peter nennt als
Use Case unter anderem JavaScript-Gesichtserkennung und erläutert die Vorzüge
des structured clone algorithm. Darauf fallen uns einige weitere
Anwendungsmöglichkeiten ein, die nur durch mangelnde Browserunterstützung
eingeschränkt werden.


[00:49:14] KEINE SCHAUNOTIZEN

WRITING TESTABLE FRONTEND JAVASCRIPT

Das Wissen, das andere in einem ganzen Buch ausbreiten ist hier kompakt
zusammengefasst.

PAYMILL – THE PAYMENT ENGINEERS

Verspricht Online-Payment ohne die ganz großen Schmerzen.

A11Y PROJECT

Links, Artikel und Checklisten zum Thema Accessibility.

SURFACE – A BUILDING BLOCK FOR WEB-BASED TEXT EDITORS.

A building block for web-based text editors.

Revision 105: CSS-Performance, Web Workers und ein paar Links

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 116: Konferenzen, Motion Design, IDs versus Classes

Working Draft

Revision 115: Browsertriebwerke, RWD und Steinzeitmalerei

Working Draft

Revision 114: <template>, Appcache, asm.js versus Bytecode

Working Draft

Revision 113: jQuery vom CDN und Resize Events auf DOM Elementen

Working Draft

Revision 112: Glücksrad und Links

Working Draft

Revision 111: Performance-Proxy, Media Queries Level 4, http-client-hints

Working Draft

Revision 110: Rendering Performance

Working Draft

Revision 109: Counter Styles, mobile Betriebssysteme, HTML5-Linkelemente

Working Draft

Revision 108: asm.js, UA Sniffing und Operas Wechsel zu WebKit

Working Draft

Revision 107: Unresponsive Design, Docsprint und ein paar Links

Working Draft

Revision 106: modern.IE, Textbalance und der ES5 Strict Mode

Working Draft

Revision 105: CSS-Performance, Web Workers und ein paar Links

Working Draft