<p>Peter war als HTML5-Sithlord seine Padawane schulen und Markus qualmte von einer sehr produktiven Woche noch der Schädel. Daher hat sich Schepp mal mit dem lieben <a href="http://bueltge.de/">Frank Bültge</a> (<a href="http://twitter.com/#!/bueltge">@bueltge</a>) zusammengetan, seines Zeichens <a href="http://wpengineer.com/">WordPress-Experte</a>, <a href="http://wordpress-buch.bueltge.de/">Autor</a> und <a href="http://inpsyde.com/">Mitveranstalter</a> des alljährlichen <a href="http://wordcamp.de/">WordCamp Deutschland</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:45] <a href="http://blog.codeplane.com/why-ive-built-an-alternative-to-github.html">Why I&#8217;ve built an Alternative to GitHub</a></dt>
<dd>Dieser Artikel, in dem jemand verkündet dass er sich sein eigene GitHub gebaut hat, ist für uns Anlass darüber zu reden, was neben den Omnipräsenten <a href="https://github.com">GitHub</a>, <a href="http://sourceforge.net/">SourceForge</a> und <a href="http://code.google.com/">Google Code</a> noch so für Repositories gibt. Denn GitHub kann bei Zunahme privater Repositories doch schon <a href="https://github.com/plans">recht teuer</a> werden. Frank hat für sich recherchiert, und am Ende blieben folgende vielversprechende Kandidaten übrig: indefero.net, <a href="https://codeplane.com">codeplane.com</a>, <a href="http://gitorious.org/">gitorious.org</a>, <a href="http://xp-dev.com/">xp-dev.com</a></dd>
<dt>[00:12:33] <a href="http://www.blaze.io/mobile/understanding-mobile-cache-sizes/">Understanding Mobile Cache Sizes</a></dt>
<dd>Wie große einzelne Ressourcen sein können, um noch von mobilen Geräten gecached werden zu können, <a href="http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/">wissen wir</a>. Was wir bislang jedoch nicht wussten ist: Wie groß ist denn eigentlich der gesamte Browsercache? Und gibt einen Unterschied zwischen flüchtigem Cache im Arbeitsspeicher, und dauerhaftem Cache auf der Festspeicher? Und tatsächlich fördert eine entsprechende Untersuchung Erstaunliches zu Tage: iOS hat zwar massig Arbeitsspeichercache, aber null Festspeicher-Cache. Vor allem aber: Android 2.x verfügt nur über jeweils 4 MB Cache! Sprich: Traditionelle Cache-Strategien versagen komplett.</dd>
<dt>[00:26:02] <a href="http://boxjs.com/">BoxJS, BoxJSON, BoxCSS und BoxResizer</a></dt>
<dd>Diese Box&#8230;-Dienste bieten tolle Funktionen: BoxJS ist zugleich JavaScript-Loader wie auch Coffee-Script-Parser, BoxJSON ist ein simpler Datenspeicher, BoxCSS fügt Deine lokalen CSS-Dateien zu einer gecachten Datei zusammen und kann dabei sogar LESS-Dateien parsen, und BoxResizer kann im Flug Bilder umrechnen (Stichwort: Responsive Webdesign).</dd>
<dt>[00:34:36] <a href="https://browserid.org/">BrowserID &#8211; A better way to sign in</a></dt>
<dd>Mozilla hat sich genau angesehen, was bei OpenID und Konsorten falsch lief und läuft, und hat ein mit BrowserID ein neues offenes System vorgeschlagen, das <a href="http://identity.mozilla.com/post/7669886219/how-browserid-differs-from-openid">deren Nachteile nicht hat</a>. Für Webentwickler ist es obendrein <a href="https://browserid.org/developers">recht einfach einzubinden</a>.</dd>
<dt>[00:43:04] <a href="http://minimal.be/lab/Sprite3D/">Sprite3D.js</a></dt>
<dd>Da die Hürde zur Verwendung von 3D in WebGL relativ hoch liegt ist es sehr begrüßenswert, dass hier jemand eine Bibliothek anbietet, die 3D ausschließlich mit bekannten HTML-Elementen und CSS3-3D-Transforms abfeiert. Für kleinere 3D-Spielereien, wie sie sicherlich die Mehrheit der Szenarien darstellen, ein tolle Sache! Derzeit aber noch WebKit-only&#8230;</dd>
<dt>[00:48:40] <a href="http://my.opera.com/ODIN/blog/2011/07/15/web-education-moving-forward-opera-wsc-goes-to-the-w3c">Web Education moving forward &#8211; Opera WSC goes to the W3C!</a></dt>
<dd>Das sehr erfolgreiche, von Opera initiierte Nachschlagewerk <a href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/">&#8222;Web Standards Curriculum&#8220;</a> wird nun beim W3C eingeklinkt und in eine <a href="http://www.w3.org/wiki/Web_Standards_Curriculum">Wiki-Form</a> überführt. Das macht es möglich, dass nunmehr jeder seinen Teil beitragen kann. Gesucht werden allerlei freiwillige Helfer, die Themen vorschlagen und Artikel schreiben, gegenlesen oder übersetzen. Wer sich angesprochen fühlt, aber lieber in Deutsch liest und schreibt, der kann sich natürlich auch beim <a href="http://wiki.selfhtml.org/wiki/Startseite">SelfHTML Wiki</a> engagieren. Und wir schweifen ab :)</dd>
<dt>[01:02:35] <a href="http://wordcamp.de/">WordCamp 2011 in Köln</a></dt>
<dd>Frank und Schepp werden beide bei dem WordCamp 2011, am 24.09.2011 in Köln am Start sein. Frank ist Mitorganisator und erzählt ein wenig zu den Hintergründen des WordCamps. Es gibt nur 250 Plätze, insofern, wer dabei sein will: Schnell <a href="http://wordcamp.de/anmeldung/">anmelden</a>! Ach ja: Und wir schweifen ab :)</dd>
</dl>
<h3>[01:18:31] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://ocanvas.org/">oCanvas</a></dt>
<dd>Wieder eine dieser zahlreichen Canvas-Bibliotheken. Eines allerdings macht sie anders als der Rest: Sie arbeitet ähnlich SVG mit Einzelobjekten anstatt mit Pixeln, die im ganzen transfomiert und animiert, und die mit den typischen Events belegt werden können.</dd>
<dt><a href="http://devongovett.github.com/pdfkit/">PDFKit &#8211; A PDF generation library for Node.js</a></dt>
<dd>Nach und nach erscheinen für Node.js all die nützlichen Bibliotheken, die den Griff zu anderen Sprachen so attraktiv gestalten. Nun kommt PDFKit zur serverseitigen Erzeugung von PDFs hinzu.</dd>
<dt><a href="http://javascriptweblog.wordpress.com/2011/07/11/waldo-search-the-javascript-runtime-in-under-1-kb/">Waldo</a></dt>
<dd>Waldo durchsucht alle Objekte im DOM nach Kriterien wie Inhaltstyp oder Eigenschaftenname. Ideal, um fremden Code zu erkunden.</dd>
</dl>


Peter war als HTML5-Sithlord seine Padawane schulen und Markus qualmte von einer
sehr produktiven Woche noch der Schädel. Daher hat sich Schepp mal mit dem
lieben Frank Bültge (@bueltge) zusammengetan…

Working Draft

Peter war als HTML5-Sithlord seine Padawane schulen und Markus qualmte von einer
sehr produktiven Woche noch der Schädel. Daher hat sich Schepp mal mit dem
lieben Frank Bültge (@bueltge) zusammengetan, seines Zeichens WordPress-Experte,
Autor und Mitveranstalter des alljährlichen WordCamp Deutschland.


SCHAUNOTIZEN

[00:03:45] WHY I’VE BUILT AN ALTERNATIVE TO GITHUB

Dieser Artikel, in dem jemand verkündet dass er sich sein eigene GitHub gebaut
hat, ist für uns Anlass darüber zu reden, was neben den Omnipräsenten GitHub,
SourceForge und Google Code noch so für Repositories gibt. Denn GitHub kann bei
Zunahme privater Repositories doch schon recht teuer werden. Frank hat für sich
recherchiert, und am Ende blieben folgende vielversprechende Kandidaten übrig:
indefero.net, codeplane.com, gitorious.org, xp-dev.com

[00:12:33] UNDERSTANDING MOBILE CACHE SIZES

Wie große einzelne Ressourcen sein können, um noch von mobilen Geräten gecached
werden zu können, wissen wir. Was wir bislang jedoch nicht wussten ist: Wie groß
ist denn eigentlich der gesamte Browsercache? Und gibt einen Unterschied
zwischen flüchtigem Cache im Arbeitsspeicher, und dauerhaftem Cache auf der
Festspeicher? Und tatsächlich fördert eine entsprechende Untersuchung
Erstaunliches zu Tage: iOS hat zwar massig Arbeitsspeichercache, aber null
Festspeicher-Cache. Vor allem aber: Android 2.x verfügt nur über jeweils 4 MB
Cache! Sprich: Traditionelle Cache-Strategien versagen komplett.

[00:26:02] BOXJS, BOXJSON, BOXCSS UND BOXRESIZER

Diese Box…-Dienste bieten tolle Funktionen: BoxJS ist zugleich JavaScript-Loader
wie auch Coffee-Script-Parser, BoxJSON ist ein simpler Datenspeicher, BoxCSS
fügt Deine lokalen CSS-Dateien zu einer gecachten Datei zusammen und kann dabei
sogar LESS-Dateien parsen, und BoxResizer kann im Flug Bilder umrechnen
(Stichwort: Responsive Webdesign).

[00:34:36] BROWSERID – A BETTER WAY TO SIGN IN

Mozilla hat sich genau angesehen, was bei OpenID und Konsorten falsch lief und
läuft, und hat ein mit BrowserID ein neues offenes System vorgeschlagen, das
deren Nachteile nicht hat. Für Webentwickler ist es obendrein recht einfach
einzubinden.

[00:43:04] SPRITE3D.JS

Da die Hürde zur Verwendung von 3D in WebGL relativ hoch liegt ist es sehr
begrüßenswert, dass hier jemand eine Bibliothek anbietet, die 3D ausschließlich
mit bekannten HTML-Elementen und CSS3-3D-Transforms abfeiert. Für kleinere
3D-Spielereien, wie sie sicherlich die Mehrheit der Szenarien darstellen, ein
tolle Sache! Derzeit aber noch WebKit-only…

[00:48:40] WEB EDUCATION MOVING FORWARD – OPERA WSC GOES TO THE W3C!

Das sehr erfolgreiche, von Opera initiierte Nachschlagewerk „Web Standards
Curriculum“ wird nun beim W3C eingeklinkt und in eine Wiki-Form überführt. Das
macht es möglich, dass nunmehr jeder seinen Teil beitragen kann. Gesucht werden
allerlei freiwillige Helfer, die Themen vorschlagen und Artikel schreiben,
gegenlesen oder übersetzen. Wer sich angesprochen fühlt, aber lieber in Deutsch
liest und schreibt, der kann sich natürlich auch beim SelfHTML Wiki engagieren.
Und wir schweifen ab :)

[01:02:35] WORDCAMP 2011 IN KÖLN

Frank und Schepp werden beide bei dem WordCamp 2011, am 24.09.2011 in Köln am
Start sein. Frank ist Mitorganisator und erzählt ein wenig zu den Hintergründen
des WordCamps. Es gibt nur 250 Plätze, insofern, wer dabei sein will: Schnell
anmelden! Ach ja: Und wir schweifen ab :)


[01:18:31] KEINE SCHAUNOTIZEN

OCANVAS

Wieder eine dieser zahlreichen Canvas-Bibliotheken. Eines allerdings macht sie
anders als der Rest: Sie arbeitet ähnlich SVG mit Einzelobjekten anstatt mit
Pixeln, die im ganzen transfomiert und animiert, und die mit den typischen
Events belegt werden können.

PDFKIT – A PDF GENERATION LIBRARY FOR NODE.JS

Nach und nach erscheinen für Node.js all die nützlichen Bibliotheken, die den
Griff zu anderen Sprachen so attraktiv gestalten. Nun kommt PDFKit zur
serverseitigen Erzeugung von PDFs hinzu.

WALDO

Waldo durchsucht alle Objekte im DOM nach Kriterien wie Inhaltstyp oder
Eigenschaftenname. Ideal, um fremden Code zu erkunden.

Revision 32: Zwei hoch fünf

<p>Besser spät als nie: die Neue Revision ist da! Es gab viel zu besprechen, dafür aber keine Keine Schaunotizen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>00:00:24.000 <a href="https://www.google.com/takeout/">Google Takeout</a></dt>
<dd>Google ermöglicht das Exportieren von Daten, die man in den diversen Google-Produkten hinterlassen hat (Buzz-Posts, Fotos, Profilinfos) in einem brauchbaren Format. Warum können das nicht andere Dienste (Facebook) auch anbieten?</dd>
<dt>00:08:35.000 <a href="http://www.conceivablytech.com/8261/products/gpu-apps-for-your-browser-first-webcl-demos-arrive">WebCL</a></dt>
<dd>Mit WebCL lässt sich die Rechenpower von GPUs für Webapplikationen nutzen, für den Fall dass man mal richtig viel rechnen muss. Erwähnenswert ist in diesem Zusammenhang die <a href="http://www.youtube.com/watch?v=WWjJE-6Ln24&#038;feature=youtube_gdata">Fabric Engine</a>, die sich eines ganz ähnlichen Problems annimmt.</dd>
<dt>00:22:22.000 <a href="http://css-tricks.com/13224-pseudo-spriting/">Pseudo Spriting</a></dt>
<dd>CSS-Trick: Pseudo-Spriting mit Pseudo-Elementen.</dd>
<dt>00:30:00.000 <a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Canvas</a></dt>
<dd><a href="http://enable-cors.org/">Cross-Origin Resource Sharing</a> für Canvas und WebGL kommt.</dd>
<dt>00:35:10.000 <a href="http://engineering.socialcast.com/2011/06/javascript-memory-management/">JavaScript Memory Management</a> und <a href="http://blog.mozilla.com/nnethercote/2011/07/06/memshrink-progress-week-3/">Verbesserungen am Speichermanagement des FF</a></dt>
<dd>Eigentlich müsste JavaScript mit einer automatisierten Speicherverwaltung das Thema Speicherverbrauch uninteressant für Webworker machen. Dass es nicht ganz so einfach ist, ist bekannt und deshalb <a href="http://hacks.mozilla.org/2011/07/aurora7/">rüsten</a> zukünftige Versionen des Firefox in Sachen Speichermanagement-Techniklen auf. Bis dahin kann man selbst auch etwas für den Speicherverbrauch tun, in Zukunft vielleicht sogar mit <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/WeakMap">Weak Maps in JS</a>.</dd>
<dt>00:56:00.000 <a href="http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx">HTML5 Parsing in IE10 ohne Conditional Comments</a></dt>
<dd>Der IE10 erhält einen standardkonformen HTML5-Parser. Juhu! Keiner Haken daran: Von Conditional Comments steht nichts in den Specs&nbsp;&hellip;</dd>
</dl>


Besser spät als nie: die Neue Revision ist da! Es gab viel zu besprechen, dafür
aber keine Keine Schaunotizen.


SCHAUNOTIZEN

00:00:24.000 GOOGLE TAKEOUT

Google ermöglicht das Exportieren von Daten,…

Besser spät als nie: die Neue Revision ist da! Es gab viel zu besprechen, dafür
aber keine Keine Schaunotizen.


SCHAUNOTIZEN

00:00:24.000 GOOGLE TAKEOUT

Google ermöglicht das Exportieren von Daten, die man in den diversen
Google-Produkten hinterlassen hat (Buzz-Posts, Fotos, Profilinfos) in einem
brauchbaren Format. Warum können das nicht andere Dienste (Facebook) auch
anbieten?

00:08:35.000 WEBCL

Mit WebCL lässt sich die Rechenpower von GPUs für Webapplikationen nutzen, für
den Fall dass man mal richtig viel rechnen muss. Erwähnenswert ist in diesem
Zusammenhang die Fabric Engine, die sich eines ganz ähnlichen Problems annimmt.

00:22:22.000 PSEUDO SPRITING

CSS-Trick: Pseudo-Spriting mit Pseudo-Elementen.

00:30:00.000 USING CROSS-DOMAIN IMAGES IN WEBGL AND CANVAS

Cross-Origin Resource Sharing für Canvas und WebGL kommt.

00:35:10.000 JAVASCRIPT MEMORY MANAGEMENT UND VERBESSERUNGEN AM
SPEICHERMANAGEMENT DES FF

Eigentlich müsste JavaScript mit einer automatisierten Speicherverwaltung das
Thema Speicherverbrauch uninteressant für Webworker machen. Dass es nicht ganz
so einfach ist, ist bekannt und deshalb rüsten zukünftige Versionen des Firefox
in Sachen Speichermanagement-Techniklen auf. Bis dahin kann man selbst auch
etwas für den Speicherverbrauch tun, in Zukunft vielleicht sogar mit Weak Maps
in JS.

00:56:00.000 HTML5 PARSING IN IE10 OHNE CONDITIONAL COMMENTS

Der IE10 erhält einen standardkonformen HTML5-Parser. Juhu! Keiner Haken daran:
Von Conditional Comments steht nichts in den Specs …

Revision 31: Takeout, OpenCL und Memory Management

<p>Diesmal sind wir wieder etwas später dran mit unserer Revision, denn wir mussten zwei mal aufnehmen. Der Grund: Wir hatten die verrückte Idee, anstatt per Skype mal per Google+ Hangout aufzunehmen; blöd war nur, dass der Hangout nach rund einer Stunde abstürzte, und die Aufnahme gleich dazu. Um nicht den gleichen Sermon erneut rezitieren zu müssen, haben wir uns für die zweite Aufnahme den <a href="http://grochtdreis.de/">Jens Grochtdreis</a> dazu geholt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] <a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/29/ie10-platform-preview-is-out-with-more-html5-and-css3-goodness.aspx">IE10 Public Preview 2 ist da!</a></dt>
<dd>Wir reden über Drag &#038; Drop, die File-API, HTML5 Forms, Web Workers, <a href="http://msdn.microsoft.com/en-us/ie/hh272905#_HTML5Sandbox">Sandboxed Iframes</a>, <a href="http://www.peterkroener.de/ecmascript-5-die-nachste-version-von-javascript-teil-2-der-strict-mode/">ES5 Strict Mode</a>, <a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame</a>, <a href="http://msdn.microsoft.com/en-us/ie/hh272903#_DOMMediaQuery">Media Query Listeners</a>, <a href="http://msdn.microsoft.com/en-us/ie/hh272905#_HTML5Async">async-Attribut</a> <a href="http://www.drweb.de/magazin/css-spaltenlayouts-das-flexible-box-layout-modul/">CSS3 Flexbox</a>, CSS3 Positioned Floats, <a href="http://www.golem.de/0709/54710.html">CSS3 Grids</a> und <a href="http://www.drweb.de/magazin/css-3-spaltenlayouts-textumbruch-multi-column-layout-modul/">CSS3 Multicolumn Layout</a>. Außerdem wagen wir uns an einer Einschätzung, ob der IE10 das Zünglein an der Waage ist, das unsere Art Webseiten zu layouten auf den Kopf stellt.</dd>
<dt>[00:38:30] <a href="http://plus.google.com/">Google+</a></dt>
<dd>Wir tun unsere Begeisterung über Googles neues soziales Netzwerk kund. Außerdem vergleichen wir es mit Twitter und Facebook, sagen was gut funktioniert und was noch verbesserungsfähig wäre.</dd>
<dt>[01:01:18] <a href="http://css1k.com/">CSS1K</a></dt>
<dd>Letzte Woche ist ein neuer Wettbewerb online gegangen, bei dem die Aufgabenstellung ist, ein vorgegebenes HTML möglichst kreativ mit nur 1024 Bytes (also Zeichen) CSS zu gestalten. Verboten sind alle externen Ressourcen, also Fonts und Bilder, wie auch DataURIs. Bisher sind nicht viele große Design-Würfe dabei, aber das Projekt ist ja noch jung&#8230;</dd>
<dt>[01:09:15] <a href="http://html5pattern.com/">HTML5Pattern</a></dt>
<dd>Diese Seite sammelt alle möglichen Regulären Ausdrücke, die man jemals im pattern-Attribut eines HTML5 Eingabefelds zur Feldprüfung gebrauchen könnte: Kreditkartennummern, Passwortvorgaben, Postleitzahlen, etc. Praktisch!</dd>
<dt>[01:12:28] <a href="http://www.drweb.de/magazin/drweb-startet-wieder-durch-im-interview-mit-sven-lennartz-dem-gruender-von-drweb-de/">Die Auferstehung des untoten Dr.Web</a></dt>
<dd>Das im letzten Jahr eingestellte Dr.Web-Magazin wurde offenbar an eine Online-Marketing-Firma verkauft, die die Seite nun wiederbeleben will. Betrachtet man diverse Rahmenparameter, so sind wir bzgl. eines möglichen Erfolgs sehr skeptisch.</dd>
</dl>
<h3>[01:20:44] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/jbdemonte/gmap3/tree/master/demo">gmap3</a></dt>
<dd>jQuery-Wrapper für das Google Maps v3 API</dd>
<dt><a href="http://blog.joelambert.co.uk/2011/06/30/morf-js-custom-easing-functions-for-css3-transition/">morf.js</a></dt>
<dd>Mehr easing Funktionen für CSS3 Transitions!</dd>
<dt><a href="http://nodeup.com/">Node Up</a></dt>
<dd>Der erste Podcast zu Node.js</dd>
<dt><a href="http://iewebgl.com/index.html">IEWebGL</a></dt>
<dd>Ein Java-basiertes WebGL-Polyfill für die IEs</dd>
<dt><a href="http://people.mozilla.com/~dmandelin/KnowYourEngines_Velocity2011.pdf">Know Your Engines [PDF]</a></dt>
<dd>Vortrag von David Mandelin, dem neuen Chefarchitekten der Mozilla-JavaScript-Engine, von der Velocity 2011 über interessante Eigenheiten der verschiedenen JavaScript-Engines.</dd>
<dt><a href="http://defunkt.io/dotjs/">dotjs</a></dt>
<dd>Im Browser per Plugin verankerte JavaScripte, die jeweils per Regel bei bestimmten Seiten ausgeführt werden.</dd>
</dl>
<p>Eine MP4-Fassung gibt es diesmal nicht, weil Markus im Urlaub ist.</p>


Diesmal sind wir wieder etwas später dran mit unserer Revision, denn wir mussten
zwei mal aufnehmen. Der Grund: Wir hatten die verrückte Idee, anstatt per Skype
mal per Google+ Hangout aufzunehmen; bl…

Diesmal sind wir wieder etwas später dran mit unserer Revision, denn wir mussten
zwei mal aufnehmen. Der Grund: Wir hatten die verrückte Idee, anstatt per Skype
mal per Google+ Hangout aufzunehmen; blöd war nur, dass der Hangout nach rund
einer Stunde abstürzte, und die Aufnahme gleich dazu. Um nicht den gleichen
Sermon erneut rezitieren zu müssen, haben wir uns für die zweite Aufnahme den
Jens Grochtdreis dazu geholt.


SCHAUNOTIZEN

[00:00:00] IE10 PUBLIC PREVIEW 2 IST DA!

Wir reden über Drag & Drop, die File-API, HTML5 Forms, Web Workers, Sandboxed
Iframes, ES5 Strict Mode, requestAnimationFrame, Media Query Listeners,
async-Attribut CSS3 Flexbox, CSS3 Positioned Floats, CSS3 Grids und CSS3
Multicolumn Layout. Außerdem wagen wir uns an einer Einschätzung, ob der IE10
das Zünglein an der Waage ist, das unsere Art Webseiten zu layouten auf den Kopf
stellt.

[00:38:30] GOOGLE+

Wir tun unsere Begeisterung über Googles neues soziales Netzwerk kund. Außerdem
vergleichen wir es mit Twitter und Facebook, sagen was gut funktioniert und was
noch verbesserungsfähig wäre.

[01:01:18] CSS1K

Letzte Woche ist ein neuer Wettbewerb online gegangen, bei dem die
Aufgabenstellung ist, ein vorgegebenes HTML möglichst kreativ mit nur 1024 Bytes
(also Zeichen) CSS zu gestalten. Verboten sind alle externen Ressourcen, also
Fonts und Bilder, wie auch DataURIs. Bisher sind nicht viele große Design-Würfe
dabei, aber das Projekt ist ja noch jung…

[01:09:15] HTML5PATTERN

Diese Seite sammelt alle möglichen Regulären Ausdrücke, die man jemals im
pattern-Attribut eines HTML5 Eingabefelds zur Feldprüfung gebrauchen könnte:
Kreditkartennummern, Passwortvorgaben, Postleitzahlen, etc. Praktisch!

[01:12:28] DIE AUFERSTEHUNG DES UNTOTEN DR.WEB

Das im letzten Jahr eingestellte Dr.Web-Magazin wurde offenbar an eine
Online-Marketing-Firma verkauft, die die Seite nun wiederbeleben will.
Betrachtet man diverse Rahmenparameter, so sind wir bzgl. eines möglichen
Erfolgs sehr skeptisch.


[01:20:44] KEINE SCHAUNOTIZEN

GMAP3

jQuery-Wrapper für das Google Maps v3 API

MORF.JS

Mehr easing Funktionen für CSS3 Transitions!

NODE UP

Der erste Podcast zu Node.js

IEWEBGL

Ein Java-basiertes WebGL-Polyfill für die IEs

KNOW YOUR ENGINES [PDF]

Vortrag von David Mandelin, dem neuen Chefarchitekten der
Mozilla-JavaScript-Engine, von der Velocity 2011 über interessante Eigenheiten
der verschiedenen JavaScript-Engines.

DOTJS

Im Browser per Plugin verankerte JavaScripte, die jeweils per Regel bei
bestimmten Seiten ausgeführt werden.

Eine MP4-Fassung gibt es diesmal nicht, weil Markus im Urlaub ist.

Revision 30: IE10, Google+ und Dr.Web

<p>Nachdem wir letzte Woche mit zwei Stunden Sendungsdauer unseren Schnitt etwas gehoben haben, gleichen wir das in dieser Woche mit einer guten halben Stunde sofort wieder aus.</p>
<h3>Schaunotizen</h3>
<ul>
<li>[0:00:16.000] iOS 5 Beta 2 mit -webkit-overflow-scrolling: touch</li>
<li>[0:02:04.000] <a href="http://documentcloud.github.com/visualsearch/">VisualSearch.js</a></li>
<li>[0:07:51.000] <a href="http://www.cdnjs.com/#/search/">CDNjs.com</a></li>
<li>[0:14:00.000] <a href="http://mashable.com/2011/06/23/twitter-promoted-tweets-timeline-2/">Twitter promoted Tweets</a></li>
</ul>
<h3>Keine Schaunotizen</h3>
<ul>
<li><a href="http://functionsource.com/post/css-animation-keyframe-events">CSS Animation Keyframe Events</a></li>
<li><a href="http://www.spritecow.com/">Spritecow</a></li>
<li><a href="https://github.com/MichaelvanLaar/Webfont-Load-Enhancer">Webfont Load Enhancer</a></li>
</ul>
<h3>Hören</h3>
	<audio id="wp_mep_1"      controls="controls" preload="none"  >
		<source src="http://workingdraft.de/wp-content/uploads/2011/06/wd-29.m4a" type="audio/mp4" />
		<source src="http://workingdraft.de/wp-content/uploads/2011/06/wd-29.mp3" type="audio/mp3" />
		
		
		
		<source src="http://workingdraft.de/wp-content/uploads/2011/06/wd-29.ogg" type="audio/ogg" />
		
	</audio>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#wp_mep_1').mediaelementplayer({
		m:1
		
		,features: ['playpause','current','progress','duration','volume','tracks','fullscreen']
		,audioWidth:400,audioHeight:30
	});
});
</script>



Nachdem wir letzte Woche mit zwei Stunden Sendungsdauer unseren Schnitt etwas
gehoben haben, gleichen wir das in dieser Woche mit einer guten halben Stunde
sofort wieder aus.


SCHAUNOTIZEN

 * [0:00:…

Nachdem wir letzte Woche mit zwei Stunden Sendungsdauer unseren Schnitt etwas
gehoben haben, gleichen wir das in dieser Woche mit einer guten halben Stunde
sofort wieder aus.


SCHAUNOTIZEN

 * [0:00:16.000] iOS 5 Beta 2 mit -webkit-overflow-scrolling: touch
 * [0:02:04.000] VisualSearch.js
 * [0:07:51.000] CDNjs.com
 * [0:14:00.000] Twitter promoted Tweets


KEINE SCHAUNOTIZEN

 * CSS Animation Keyframe Events
 * Spritecow
 * Webfont Load Enhancer


HÖREN

Revision 29: VisualSearch.js und Twitter-Spam

<p>Nach zweiwöchiger Abstinenz melden wir uns mit einer rekordverdächtigen Folge zurück: Vier Mann füllen knapp zwei Stunden Hörmaterial. Das liegt unter anderem daran, dass wir uns am Ende auch einer Betrachtung des Verhältnisses der Deutschen zum Internet widmen. Ihr wisst schon: Netzabdeckung, Cyberabwehrzentrum, freie WLANs, Kinderpornos und so. Zu Gast war diesmal <a href="http://twitter.com/#!/derCemDerin">Cem Derin</a>. Mehr von ihm hört in seinem <a href="http://shitstorm.cemderin.net/">Podcast</a> oder seht Ihr auf <a href="http://shitstorm.cemderin.net/termine/">Offenen Bühnen Events</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:55] <a href="http://jsmad.org/">jsmad</a></dt>
<dd>Peter freut sich über das Erscheinen von jsmad, weil es seine Vermutung bestätigt, dass die Webworkerschaft das Problem fehlender Audio- und Video-Unterstützung durch HTML5-basierte Ports beheben kann. Auch wenn das vielleicht nicht unbedingt so performant ist wie eine native Unterstützung seitens des Browsers.</dd>
<dt>[00:06:35] <a href="http://www.phpied.com/lazy-html-evaluation/">Lazy HTML Evaluation</a></dt>
<dd>Ein Performance-Kniff, auf <a href="http://calendar.perfplanet.com/2010/html-lazy-load/">den letztes Jahr Sergey Chikuyonok gekommen ist</a> verpackt das HTML einer Seite so, dass es vom Browser zunächst nicht vollständig ausgewertet und damit gezeichnet werden muss. Wenn der Browser auf die Weise nur den oberen, als erstes sichtbaren Teil der Seite zeichnen muss, dann ist sie schneller da (vor allem bei mobilen Browsern). Bewerkstelligen tut man das, indem man den Rest des HTML abschnittsweise in Kommentare verpackt und die Kommentare nach dem Laden erst Stück für Stück freigibt. Sowas ähnliches gibt es auch für <a href="http://blog.sproutcore.com/cut-your-javascript-load-time-90-with-deferred-evaluation/">JavaScript</a>.</dd>
<dt>[00:15:11] <a href="http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5">iOS 5- und Lion-Scrollgeschichten</a></dt>
<dd>Neben <code>postion: fixed</code> und <a href="http://www.kombinat-typefounders.com/store/catalog/article/woff_support">WOFF-Support</a> und einigen weiteren Dingen, bringen *NDA hüstel* Mac OS X Lion und iOS 5 neue Formen des Scrollens. iOS 5 nun endlich auch bei HTML-Boxcontainern mit <code>overflow: scroll</code>. Markus, Titelverteidiger &#8222;Detailverliebtester Webentwickler von Murr&#8220;, befragte Cem (der natürlich *NDA hüstel* kein iOS 5 oder Lion besitzt) zu der genauen Umsetzungsform derselben aus.</dd>
<dt>[00:23:23] <a href="http://www.youtube.com/watch?v=_Jn93FDx9oI">Google Instant Pages</a></dt>
<dd>Nach SPDY führt Google ein neues Feature ein, dass in der Kombination Google-Service + Chrome-Browser funktioniert: Das Google Instant Pages Feature bei der Google Suche. Diese stößt über ein spezielles HTML-Tag ein vollständiges Laden und Rendern des wahrscheinlich vom User angeklickten Suchergebnisses an, so dass die Seite dann im Chrome sofort da ist. Bewerkstelligt wird das über eine <code>&lt;link rel="prerender" href="xxx.yy" /&gt;</code>-Anweisung in der vorgelagerten Seite. Anders als bei der altbekannten Variante <code>prefetch</code> wird aber nicht nur eine einzelne Ressource, sondern es werden alle daran geknüpften geladen und die Seite im Verborgenen auch schon gerendert. Wir diskutieren, was das für Vor- und Nachteile hat.</dd>
<dt>[00:44:09] <a href="https://github.com/filamentgroup/Responsive-Images">Responsive Images</a></dt>
<dd>Durch eine <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/">Artikel von Keith Clark</a> sind wir auf das Thema Responsive Images gekommen und diskutieren die verschiedenen Wege, wie man mit den heutigen Techniken Größen-angepasste Ressourcen an die diversen Kleingeräte ausliefern kann.</dd>
<dt>[00:59:52] <a href="http://dev.w3.org/html5/webstorage/#the-storage-event">Markus regt sich über Web-Storage-Events auf!</a></dt>
<dd>&#8230; denn sie feuern immer anders als man denkt. Da kann ihm auch unser HTML5-Beauftragter Peter nicht ganz aus der Patsche helfen.</dd>
<dt>[01:09:15] <a href="http://grochtdreis.de/weblog/2011/06/01/deutschland-ist-internet-entwicklungsland/">Deutschland ist Internet-Entwicklungsland</a></dt>
<dd>Wir nehmen Jens&#8216; Blogbeitrag zum Anlass, einen Kollektivrant bzgl. der mehr schlechten als rechten Internetversorgungssituation hier in Deutschland auf den Weg zu bringen. Es krankt am Netzausbau, an hohen Kosten, an der praxisfremden Politikern sowie an kontraproduktiven Gerichtsurteilen. Das neue, hihi, <a href="http://neusprech.org/cyber-abwehrzentrum/">Cyberabwehrzentrum</a>, <a href="http://www.danisch.de/blog/2011/06/16/warum-das-neue-cyber-abwehrzentrum-der-bundesregierung-so-nicht-funktioniert/">mit seinem Minibudget und 10 Mitarbeitern</a>, nehmen wir uns dabei natürlich auch vor. Nicht zuletzt wünschen wir uns mehr freie öffentliche WLANs und mehr von so Diensten wie <a href="http://www.fon.com/de">FON</a>, <a href="http://www.freifunk.net/">Freifunk</a> oder <a href="http://www.sofanet.de/">Sofanet</a>. Aber die <a href="http://www.heise.de/artikel-archiv/ct/2011/10/170_kiosk">rechtliche Situation ist eben kompliziert</a>.</dd>
</dl>
<h3>[01:51:12] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://subtlepatterns.com/">SubtlePatterns.com</a></dt>
<dd>Sammlung, angenehm hochwertiger Hintergrundmuster.</dd>
<dt><a href="http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/">A fresh look at JavaScript mixins</a></dt>
<dd>Artikel darüber, wie man JavaScript-Code-Teile optimal an verschiedenen anderen Stellen aufgreifen kann.</dd>
<dt><a href="http://trimage.org/">Trimage</a></dt>
<dd>Toller Bildoptimierer mit GUI, den es für alle Betriebssysteme gibt.</dd>
<dt><a href="http://msdn.microsoft.com/en-us/scriptjunkie/hh227261.aspx">How, When, And Why Script Loaders Are Appropriate</a></dt>
<dd>Ein Artikel darüber, wann der Einsatz von Scriptloadern angebracht ist, und wann nicht.</dd>
<dt><a href="http://www.sprymedia.co.uk/article/Visual+Event">Visual Event</a></dt>
<dd>Bookmarklet, das alle Elemente einer Seite, die mit Events belegt sind, mit entsprechenden Symbolen überlagert. Zum Analysieren: Super!</dd>
</dl>
<p><em>Audio mit Kapitelmarken (iPod-kompatibel): <a href="http://workingdraft.de/wp-content/uploads/2011/06/wd-28.m4a">Download wd-28.m4a</a></em></p>


Nach zweiwöchiger Abstinenz melden wir uns mit einer rekordverdächtigen Folge
zurück: Vier Mann füllen knapp zwei Stunden Hörmaterial. Das liegt unter anderem
daran, dass wir uns am Ende auch einer Be…

Nach zweiwöchiger Abstinenz melden wir uns mit einer rekordverdächtigen Folge
zurück: Vier Mann füllen knapp zwei Stunden Hörmaterial. Das liegt unter anderem
daran, dass wir uns am Ende auch einer Betrachtung des Verhältnisses der
Deutschen zum Internet widmen. Ihr wisst schon: Netzabdeckung,
Cyberabwehrzentrum, freie WLANs, Kinderpornos und so. Zu Gast war diesmal Cem
Derin. Mehr von ihm hört in seinem Podcast oder seht Ihr auf Offenen Bühnen
Events.


SCHAUNOTIZEN

[00:00:55] JSMAD

Peter freut sich über das Erscheinen von jsmad, weil es seine Vermutung
bestätigt, dass die Webworkerschaft das Problem fehlender Audio- und
Video-Unterstützung durch HTML5-basierte Ports beheben kann. Auch wenn das
vielleicht nicht unbedingt so performant ist wie eine native Unterstützung
seitens des Browsers.

[00:06:35] LAZY HTML EVALUATION

Ein Performance-Kniff, auf den letztes Jahr Sergey Chikuyonok gekommen ist
verpackt das HTML einer Seite so, dass es vom Browser zunächst nicht vollständig
ausgewertet und damit gezeichnet werden muss. Wenn der Browser auf die Weise nur
den oberen, als erstes sichtbaren Teil der Seite zeichnen muss, dann ist sie
schneller da (vor allem bei mobilen Browsern). Bewerkstelligen tut man das,
indem man den Rest des HTML abschnittsweise in Kommentare verpackt und die
Kommentare nach dem Laden erst Stück für Stück freigibt. Sowas ähnliches gibt es
auch für JavaScript.

[00:15:11] IOS 5- UND LION-SCROLLGESCHICHTEN

Neben postion: fixed und WOFF-Support und einigen weiteren Dingen, bringen *NDA
hüstel* Mac OS X Lion und iOS 5 neue Formen des Scrollens. iOS 5 nun endlich
auch bei HTML-Boxcontainern mit overflow: scroll. Markus, Titelverteidiger
„Detailverliebtester Webentwickler von Murr“, befragte Cem (der natürlich *NDA
hüstel* kein iOS 5 oder Lion besitzt) zu der genauen Umsetzungsform derselben
aus.

[00:23:23] GOOGLE INSTANT PAGES

Nach SPDY führt Google ein neues Feature ein, dass in der Kombination
Google-Service + Chrome-Browser funktioniert: Das Google Instant Pages Feature
bei der Google Suche. Diese stößt über ein spezielles HTML-Tag ein vollständiges
Laden und Rendern des wahrscheinlich vom User angeklickten Suchergebnisses an,
so dass die Seite dann im Chrome sofort da ist. Bewerkstelligt wird das über
eine <link rel="prerender" href="xxx.yy" />-Anweisung in der vorgelagerten
Seite. Anders als bei der altbekannten Variante prefetch wird aber nicht nur
eine einzelne Ressource, sondern es werden alle daran geknüpften geladen und die
Seite im Verborgenen auch schon gerendert. Wir diskutieren, was das für Vor- und
Nachteile hat.

[00:44:09] RESPONSIVE IMAGES

Durch eine Artikel von Keith Clark sind wir auf das Thema Responsive Images
gekommen und diskutieren die verschiedenen Wege, wie man mit den heutigen
Techniken Größen-angepasste Ressourcen an die diversen Kleingeräte ausliefern
kann.

[00:59:52] MARKUS REGT SICH ÜBER WEB-STORAGE-EVENTS AUF!

… denn sie feuern immer anders als man denkt. Da kann ihm auch unser
HTML5-Beauftragter Peter nicht ganz aus der Patsche helfen.

[01:09:15] DEUTSCHLAND IST INTERNET-ENTWICKLUNGSLAND

Wir nehmen Jens‘ Blogbeitrag zum Anlass, einen Kollektivrant bzgl. der mehr
schlechten als rechten Internetversorgungssituation hier in Deutschland auf den
Weg zu bringen. Es krankt am Netzausbau, an hohen Kosten, an der praxisfremden
Politikern sowie an kontraproduktiven Gerichtsurteilen. Das neue, hihi,
Cyberabwehrzentrum, mit seinem Minibudget und 10 Mitarbeitern, nehmen wir uns
dabei natürlich auch vor. Nicht zuletzt wünschen wir uns mehr freie öffentliche
WLANs und mehr von so Diensten wie FON, Freifunk oder Sofanet. Aber die
rechtliche Situation ist eben kompliziert.


[01:51:12] KEINE SCHAUNOTIZEN

SUBTLEPATTERNS.COM

Sammlung, angenehm hochwertiger Hintergrundmuster.

A FRESH LOOK AT JAVASCRIPT MIXINS

Artikel darüber, wie man JavaScript-Code-Teile optimal an verschiedenen anderen
Stellen aufgreifen kann.

TRIMAGE

Toller Bildoptimierer mit GUI, den es für alle Betriebssysteme gibt.

HOW, WHEN, AND WHY SCRIPT LOADERS ARE APPROPRIATE

Ein Artikel darüber, wann der Einsatz von Scriptloadern angebracht ist, und wann
nicht.

VISUAL EVENT

Bookmarklet, das alle Elemente einer Seite, die mit Events belegt sind, mit
entsprechenden Symbolen überlagert. Zum Analysieren: Super!

Audio mit Kapitelmarken (iPod-kompatibel): Download wd-28.m4a

Revision 28: Niemand hat Lion oder iOS 5

<p>Tolle Folge. Nuffsaid.</p>
<h3>Schaunotizen</h3>
<ul>
<li><a href="http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/">[00:00:19.000] @viewport in Opera</a>
<li><a href="http://www.w3.org/TR/2011/WD-resource-timing-20110524/">[00:11:44.000] W3C Resource Timing</a>
<li><a href="http://www.sencha.com/products/io/">[00:15:56.000] sencha.io</a>
<li><a href="https://developer.mozilla.org/en/CSS/pointer-events">[00:24:55.000] CSS pointer-events</a>
<li>[00:30:19.000] Markus rantet über die Unmöglichkeit der Tastatursteuerung</a>
<li><a href="https://hacks.mozilla.org/2011/05/aurora-6-is-here/">[00:41:27.000] Firefox Aurora 6</a>
</ul>
<h3>Keine Schaunotizen</h3>
<ul>
<li><a href="http://debug.phonegap.com/">[01:11:03.000] Gehosteter Winere-Server</a>
<li><a href="http://www.sagres.pt/sagrespretachocolate/#/homepage">[01:11:52.000] Website aus Schokolade und Bier und Awesomesauce</a>
<li><a href="http://inliner.leftlogic.com/">[01:12:39.000] Inline the crap out of your site</a>
<li><a href="http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html">[01:13:47.000] SVG Background Gradient Maker</a>
</ul>
<p>Audio mit Kapitelmarken (iPod-kompatibel): <a href="http://workingdraft.de/wp-content/uploads/2011/06/wd-27.m4a">Download wd-27.m4a</a></strong></p>


Tolle Folge. Nuffsaid.


SCHAUNOTIZEN

 * [00:00:19.000] @viewport in Opera
 * [00:11:44.000] W3C Resource Timing
 * [00:15:56.000] sencha.io
 * [00:24:55.000] CSS pointer-events
 * [00:30:19.000] Mar…

Tolle Folge. Nuffsaid.


SCHAUNOTIZEN

 * [00:00:19.000] @viewport in Opera
 * [00:11:44.000] W3C Resource Timing
 * [00:15:56.000] sencha.io
 * [00:24:55.000] CSS pointer-events
 * [00:30:19.000] Markus rantet über die Unmöglichkeit der Tastatursteuerung
 * [00:41:27.000] Firefox Aurora 6


KEINE SCHAUNOTIZEN

 * [01:11:03.000] Gehosteter Winere-Server
 * [01:11:52.000] Website aus Schokolade und Bier und Awesomesauce
 * [01:12:39.000] Inline the crap out of your site
 * [01:13:47.000] SVG Background Gradient Maker

Audio mit Kapitelmarken (iPod-kompatibel): Download wd-27.m4a

Revision 27: Revision 27: @viewport, Tastatursteuerung und Aurora 6

<p>Diesmal war &#8222;Schepp allein zu Haus&#8220; angesagt, und da hab ich mir knallhart den <a href="http://grochtdreis.de/weblog/">Jens Grochtdreis</a>, den Gründer der <a href="http://www.webkrauts.de">Webkrauts</a> aus Mainz mit ins Boot geholt. Als bekennende IE-Masochisten stürzten wir uns beide auf diesbezüglich eingefärbte Themen (die Woche gab es allerdings auch zufällig her). Kommentare wieder gerne auf <a href="http://audioboo.fm/">Audioboo</a> mit dem Tag #workingdraft hinterlegen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:23] <a href="http://techcrunch.com/2011/05/10/google-chrome-frame-ie-admin/">Google Finally Delivers On Promise Of Admin-Free Chrome Frame Installs For IE</a></dt>
<dd>Irgendwie haben es die Google Ingenieure nun doch hinbekommen, dass man Google Chrome Frame ohne Adminrechte an seinen IE anflanschen kann. Allerdings verraten sie nicht wie. Das macht Jens stutzig und überhaupt löst es das IE-Problem ja immer noch nicht an seiner Wurzel. Aber besser als nix.</dd>
<dt>[00:10:38] <a href="http://peter.sh/2011/05/compact-navigation-print-preview-and-the-css3-grid-layout-module/">Compact Navigation, Print Preview and the CSS3 Grid Layout Module</a></dt>
<dd>Neues Google Chrome Canary Update, erstmalig mit schicker Druckvorschau (die intern ein PDF erzeugt!) und einer ersten Fassung der zuletzt besprochenenen <a href="http://workingdraft.de/25/">Visibility API</a>. Außerdem mit CSS3 Grid Layouts, <a href="http://www.youtube.com/watch?v=N8SS-rUEZPg">einem stark aufgemotzten Web Inspector</a> und der polarisierenden Idee, <a href="http://www.golem.de/1105/83621.html">die Adressleiste auch noch weg zu rationalisieren</a>. Hmm&#8230;</dd>
<dt>[00:22:39] <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx">Stylesheet Limits in Internet Explorer</a></dt>
<dd>Eric Law von Microsoft hat mal ein paar interessante und teils schon bekannte Grenzen des IEs in Sachen Stylesheet-Parsing aufgelistet. Zunächst erscheinen einem die Limits relativ weit weg, andererseits gab es ja auch mal Leute, die behauptet haben, mehr als 64KB Speicher werde nie ein Mensch brauchen. Daher: Holzauge, sei wachsam!</dd>
<dt>[00:30:28] <a href="http://www.interoperabilitybridges.com/css3-floats/">CSS Floats and Positioning Level 3</a></dt>
<dd>Überraschenderweise haben sich Microsoft und Adobe zusammengetan und eine sehr schöne Erweiterung der Float Techniken für CSS 3 vorgeschlagen, und zwar die Positioned Floats. Dabei wir auf ein Element ein <code>float: positioned;</code> und irgendeine <code>position</code>-Eigenschaft gesetzt, woraufhin anschleißend alles andere um das Element herumfließt. Egal wie und wo es hinpoistioniert wurde. Nett! Außerdem lasst sie die Element-Form per deklarativer Form oder über die Alphamaske eines Bildes beeinflussen.</dd>
<dt>[00:42:17] <a href="http://mathiasbynens.be/notes/safe-css-hacks">In defense of CSS hacks — introducing “safe CSS hacks”</a></dt>
<dd>Mathias Bynens hat mal eine sehr schöne Auflistung verschiedener sinnvoller/etablierter CSS-Weichen für die IEs zusammengestellt. Dabei geht es um verschiedene Verfahren auf Conditional Comments Basis, sowie um klassische Parserhacks und was da zu bedenken ist. Mit Vor- und Nachteilen. Bei den HTML5 Boilerplate machern hat der Artikel zu <a href="https://github.com/paulirish/html5-boilerplate/issues/378">hektischer Betriebsamkeit</a> <a href="https://github.com/paulirish/html5-boilerplate/commit/e5e057">geführt</a>, weil nämlich die dort praktizierte Variante ein paar der aufgelisteten <a href="http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/">Schönheitsfehler</a> hatte. Jens und ich waren uns aber einig, dass die das bestimmt bald wieder zurückstellen werden. Außerdem hat Jens darüber auch <a href="http://grochtdreis.de/weblog/2011/05/20/die-richtige-hack-strategie/">gebloggt</a>.</dd>
<dt>[01:03:53] <a href="http://www.red-root.com/sandbox/holmes/">Holmes &#8211; The CSS Markup Detective</a></dt>
<dd>Jens muss dieses Tool leider als vollkommen uninnovative Produktkopie entlarven, denn der Macher des Tools hat seine Idee komplett von anderen zusammengeklaut: Und zwar in erster Linie von <a href="http://meyerweb.com/eric/tools/css/diagnostics/">Eric Meyer</a>. Die bereitgestellte Funktionalität erhält man darüberhinaus auch schon lange über die Web Developer Toolbar des Firefox.</dd>
<dt>[01:11:44] <a href="http://tumultco.com/hype/features/">Hype</a></dt>
<dd>Hype ist ein natives OS X Tool von zwei Ex-Apple-Mitarbeitern, mit dem sich CSS3-Webanimationen erstellen lassen. Soweit, so unneu. Allerdings ist Hype anscheinend das erste Tool, das versucht, allen Browsern mit ihren Möglichkeiten gerecht zu werden und von CSS3-Transitions notfalls hin zu klassichen DHTML-Animationen degradiert. Schade ist, dass es nur via Mac App Store zu haben ist und dass es keine Testversion gibt.</dd>
<dt>[01:21:19] <a href="http://www.weightwatchers.de/">Der Rauswerfer-Rant: weightwatchers.de: Spaß mit Chrome</a></dt>
<dd>Jens ist über ein neuzeitliches Kuriosum gestolpert, nämlich eine Seite, die sich noch dem Chrome verweigert und einem stattdessen die Nutzung von IE ab 5.x oder Firefox ab 1.x empfiehlt. Öffnet man die Seite in Chrome, bekommt man überdies hilfreiche Infos wie man <strong>Java</strong> im Firefox aktiviert: &#8222;Extras und dann &#8222;Web-Features&#8220;. Hier wählen Sie &#8222;Java Script aktivieren&#8220;.&#8220; Facepalm!</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt>[01:31:39] <a href="http://benvanik.github.com/WebGL-Inspector/">WebGL Inspector</a></dt>
<dd>Eine Art Firebug für WebGL Aktivitäten</dd>
<dt>[01:31:39] <a href="https://github.com/jed/140bytes/wiki/Byte-saving-techniques">Byte-saving Techniques</a></dt>
<dd>Verrückte Tricks, mit denen sich Zeichen in JavaScript sparen lässt.</dd>
<dt>[01:31:39] <a href="https://github.com/bebraw/jswiki/wiki">jswiki</a></dt>
<dd>Ein erster Versuch einer Katalogisierung und Kategorisierung der mittlerweile zahllos existierenden JavaScript-Bibliotheken</dd>
<dt>[01:31:39] <a href="http://robertnyman.com/css3/">CSS3 &#8211; Information and samples</a></dt>
<dd>CSS3-zu-Browser-Kompatibilitätstabelle</dd>
<dt>[01:31:39] <a href="http://robertnyman.com/html5/">HTML5 &#8211; Information and samples for HTML5 and related APIs</a></dt>
<dd>HTML5-zu-Browser-Kompatibilitätstabelle</dd>
<dt>[01:31:39] <a href="http://jsonselect.org/#overview">json:select()</a></dt>
<dd>Eine CSS-artige Selektorsprache, um auf Datensätze in einem JSON-Objekt zuzugreifen.</dd>
</dl>
<p><strong>Wer den Player sucht, findet ihn auf der Startseite. Wer uns sagen kann, warum WordPress den hier nicht anzeigt, kann uns darauf hinweisen. Downloadlinks: <a href="http://workingdraft.de/wp-content/uploads/2011/05/wd-26.mp3">MP3 ohne Kapitelmarken</a> und <a href="http://workingdraft.de/wp-content/uploads/2011/05/wd-26.m4a">MP4 mit Kapitelmarken (iPod-kompatibel)</a></strong></p>


Diesmal war „Schepp allein zu Haus“ angesagt, und da hab ich mir knallhart den
Jens Grochtdreis, den Gründer der Webkrauts aus Mainz mit ins Boot geholt. Als
bekennende IE-Masochisten stürzten wir uns…

Diesmal war „Schepp allein zu Haus“ angesagt, und da hab ich mir knallhart den
Jens Grochtdreis, den Gründer der Webkrauts aus Mainz mit ins Boot geholt. Als
bekennende IE-Masochisten stürzten wir uns beide auf diesbezüglich eingefärbte
Themen (die Woche gab es allerdings auch zufällig her). Kommentare wieder gerne
auf Audioboo mit dem Tag #workingdraft hinterlegen.


SCHAUNOTIZEN

[00:01:23] GOOGLE FINALLY DELIVERS ON PROMISE OF ADMIN-FREE CHROME FRAME
INSTALLS FOR IE

Irgendwie haben es die Google Ingenieure nun doch hinbekommen, dass man Google
Chrome Frame ohne Adminrechte an seinen IE anflanschen kann. Allerdings verraten
sie nicht wie. Das macht Jens stutzig und überhaupt löst es das IE-Problem ja
immer noch nicht an seiner Wurzel. Aber besser als nix.

[00:10:38] COMPACT NAVIGATION, PRINT PREVIEW AND THE CSS3 GRID LAYOUT MODULE

Neues Google Chrome Canary Update, erstmalig mit schicker Druckvorschau (die
intern ein PDF erzeugt!) und einer ersten Fassung der zuletzt besprochenenen
Visibility API. Außerdem mit CSS3 Grid Layouts, einem stark aufgemotzten Web
Inspector und der polarisierenden Idee, die Adressleiste auch noch weg zu
rationalisieren. Hmm…

[00:22:39] STYLESHEET LIMITS IN INTERNET EXPLORER

Eric Law von Microsoft hat mal ein paar interessante und teils schon bekannte
Grenzen des IEs in Sachen Stylesheet-Parsing aufgelistet. Zunächst erscheinen
einem die Limits relativ weit weg, andererseits gab es ja auch mal Leute, die
behauptet haben, mehr als 64KB Speicher werde nie ein Mensch brauchen. Daher:
Holzauge, sei wachsam!

[00:30:28] CSS FLOATS AND POSITIONING LEVEL 3

Überraschenderweise haben sich Microsoft und Adobe zusammengetan und eine sehr
schöne Erweiterung der Float Techniken für CSS 3 vorgeschlagen, und zwar die
Positioned Floats. Dabei wir auf ein Element ein float: positioned; und
irgendeine position-Eigenschaft gesetzt, woraufhin anschleißend alles andere um
das Element herumfließt. Egal wie und wo es hinpoistioniert wurde. Nett!
Außerdem lasst sie die Element-Form per deklarativer Form oder über die
Alphamaske eines Bildes beeinflussen.

[00:42:17] IN DEFENSE OF CSS HACKS — INTRODUCING “SAFE CSS HACKS”

Mathias Bynens hat mal eine sehr schöne Auflistung verschiedener
sinnvoller/etablierter CSS-Weichen für die IEs zusammengestellt. Dabei geht es
um verschiedene Verfahren auf Conditional Comments Basis, sowie um klassische
Parserhacks und was da zu bedenken ist. Mit Vor- und Nachteilen. Bei den HTML5
Boilerplate machern hat der Artikel zu hektischer Betriebsamkeit geführt, weil
nämlich die dort praktizierte Variante ein paar der aufgelisteten
Schönheitsfehler hatte. Jens und ich waren uns aber einig, dass die das bestimmt
bald wieder zurückstellen werden. Außerdem hat Jens darüber auch gebloggt.

[01:03:53] HOLMES – THE CSS MARKUP DETECTIVE

Jens muss dieses Tool leider als vollkommen uninnovative Produktkopie entlarven,
denn der Macher des Tools hat seine Idee komplett von anderen zusammengeklaut:
Und zwar in erster Linie von Eric Meyer. Die bereitgestellte Funktionalität
erhält man darüberhinaus auch schon lange über die Web Developer Toolbar des
Firefox.

[01:11:44] HYPE

Hype ist ein natives OS X Tool von zwei Ex-Apple-Mitarbeitern, mit dem sich
CSS3-Webanimationen erstellen lassen. Soweit, so unneu. Allerdings ist Hype
anscheinend das erste Tool, das versucht, allen Browsern mit ihren Möglichkeiten
gerecht zu werden und von CSS3-Transitions notfalls hin zu klassichen
DHTML-Animationen degradiert. Schade ist, dass es nur via Mac App Store zu haben
ist und dass es keine Testversion gibt.

[01:21:19] DER RAUSWERFER-RANT: WEIGHTWATCHERS.DE: SPASS MIT CHROME

Jens ist über ein neuzeitliches Kuriosum gestolpert, nämlich eine Seite, die
sich noch dem Chrome verweigert und einem stattdessen die Nutzung von IE ab 5.x
oder Firefox ab 1.x empfiehlt. Öffnet man die Seite in Chrome, bekommt man
überdies hilfreiche Infos wie man Java im Firefox aktiviert: „Extras und dann
„Web-Features“. Hier wählen Sie „Java Script aktivieren“.“ Facepalm!


KEINE SCHAUNOTIZEN

[01:31:39] WEBGL INSPECTOR

Eine Art Firebug für WebGL Aktivitäten

[01:31:39] BYTE-SAVING TECHNIQUES

Verrückte Tricks, mit denen sich Zeichen in JavaScript sparen lässt.

[01:31:39] JSWIKI

Ein erster Versuch einer Katalogisierung und Kategorisierung der mittlerweile
zahllos existierenden JavaScript-Bibliotheken

[01:31:39] CSS3 – INFORMATION AND SAMPLES

CSS3-zu-Browser-Kompatibilitätstabelle

[01:31:39] HTML5 – INFORMATION AND SAMPLES FOR HTML5 AND RELATED APIS

HTML5-zu-Browser-Kompatibilitätstabelle

[01:31:39] JSON:SELECT()

Eine CSS-artige Selektorsprache, um auf Datensätze in einem JSON-Objekt
zuzugreifen.

Wer den Player sucht, findet ihn auf der Startseite. Wer uns sagen kann, warum
WordPress den hier nicht anzeigt, kann uns darauf hinweisen. Downloadlinks: MP3
ohne Kapitelmarken und MP4 mit Kapitelmarken (iPod-kompatibel)

Revision 26: Viel Internet Explorer

<p>Die neuste Revision geht mit sensationell wenigen Themen ins Rennen. Woran es lag? Wir haben uns ein Opera-Themen-Verbot auferlegt, bis wir Patrick H. Lauke mal in der Sendung haben zum drüber Quatschen. Desweiteren konnte die <a href="http://www.google.com/events/io/2011/index-live.html">Google I/O</a> nicht mit ganz so viel Web-Bezogenem aufwarten. Aber wie Ihr hört, kriegen wir auch das gebügelt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:42] <a href="http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/">jQuery 1.6.1 Released</a></dt>
<dd>Die jQuery-Macher sahen sich aufgrund der in der letzten Revision erwähnten Änderungen und ihrer Auswirkungen gezwungen, ein Rolle-Rückwärts-Update nachzuschieben. Version 1.6.1 stellt nun zumindest auf der <code>attr()</code>-Methode die verlorengegangene Kompatibilität wieder her.</dd>
<dt>[00:02:53] <a href="https://code.google.com/apis/pagespeedonline/v1/getting_started.html">Page Speed Online API</a></dt>
<dd>Google stellt seit neustem einen Webservice bereit, über welchen man dieselben Testergebnisse und Ratschläge zur Ladegeschwindigkeit im JSON-Format erhält, die auch die <a href="http://code.google.com/speed/page-speed/">Browser-Plugins</a> sowie <a href="http://pagespeed.googlelabs.com/">Page Speed Online</a> zurückgeben. Das WordPress-Plugin <a href="http://wordpress.org/extend/plugins/w3-total-cache/">W3 Total Cache</a> nutzt diesen Dienst, um dem Benutzer Optimierungsvorschläge zu machen. Wofür man den Dienst aber in der Praxis genau gebrauchen kann, darauf wollten wir einfach nicht kommen. Hat wer eine Idee? (gerne via <a href="http://audioboo.fm/">Audioboo</a> mit Hash #workingdraft)</dd>
<dt>[00:08:37] <a href="http://peter.sh/2011/05/inspectable-shadow-dom-the-file-browser-and-new-default-avatars/">Inspectable Shadow DOM, the file browser and new default avatars</a></dt>
<dd>Der aktuelle <a href="http://tools.google.com/dlpage/chromesxs">Canary-Build von Chrome</a> zeigt seit neustem alle zu einem Element gehörigen <a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/">Shadow-DOM</a>-Elemente. Damit lässt sich also herausfinden, wie man per CSS an in HTML-Elementen steckende Subelemente herankommt, wie etwa dem <code>placeholder</code>-Text in einem HTML5-Eingabefeld, oder den Slider eines <code>range</code>-Inputs. Dennoch eine Insellösung.</dd>
<dt>[00:20:06] <a href="http://www.mail-archive.com/whatwg@lists.whatwg.org/msg24397.html">Proposal for a tab visibility API</a></dt>
<dd>Das Chrome Team bringt den Vorschlag zu einer &#8222;Visibility API&#8220; bei der WHATWG ein. Über die API soll sich anfragen lassen, ob ein Fenster gerade fokussiert ist oder nicht, und wenn nicht, wie genau nicht. Außerdem soll es noch einen dazugehörigen Eventhandler geben. Markus fällt dabei ein, dass man heute schon nicht-aktive Fenster <a href="http://css-tricks.com/window-inactive-styling/">gestalten kann</a>. Und wir drei sinnieren darüber, ob sowas wie diese API brauchbar wäre. Was meint Ihr? (gerne via <a href="http://audioboo.fm/">Audioboo</a> mit Hash #workingdraft)</dd>
<dt>[00:34:54] <a href="http://www.google.com/chromebook/#">Google Chromebooks</a></dt>
<dd>Google stellte auf der diesjährigen <a href="http://www.google.com/events/io/2011/index-live.html">Google I/O</a> die finale Inkarnation seiner Chrome-OS-Hardware namens &#8222;Chromebooks&#8220; vor. Im Prinzip handelt es sich dabei um 11/12-Zoll-Netbooks mit einer kleinen SSD darin. Dazu gibt es Varianten mit UMTS und hierzulande einem Jahr E-Plus gratis obendrauf. Gag des Betriebssystems ist, dass alles in der Cloud gespeichert wird (nein, nicht in <a href="http://www.youtube.com/watch?v=mjtqoQE_ezA&#038;feature=related">Microsofts Cloud</a>), und man seine Gurke jederzeit aus dem Fenster werfen kann, ohne seine Daten zu verlieren. Obwohl Google <a href="http://www.golem.de/1105/83420.html">manche Dienste offline-fähig gemacht hat</a>, hängt man dennoch stark am Tropf des Internets. Und damit ist es ja bei E-Plus nicht immer gut bestellt. Wir sind gespannt, was draus wird.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt>[00:56:03] <a href="http://www.ro.me">ROME &#8211; 3 Dreams of Black</a></dt>
<dd>Beeindruckende Demo von der Google I/O, die in einem interaktiven Musikvideo <a href="http://www.mirada.com/rome.php">traumhafte</a> <a href="http://www.oddballanimation.com/archives/1576">Video-</a>, <a href="http://www.amazon.de/Rome-Daniele-Danger-Mouse-Luppi/dp/B004E0Z4XK/ref=sr_1_1?ie=UTF8&#038;qid=1305701772&#038;sr=8-1">Audio-</a> und <a href="http://googlecode.blogspot.com/2011/05/dreams-in-3d-webgl-experience-for.html">3D-Elemente</a> vermischt. Benötigt die <a href="http://tools.google.com/dlpage/chromesxs">Canary-Version</a> des Google Chrome Browsers.</dd>
<dt>[00:56:33] <a href="http://daftpunk.themaninblue.com/">Cameron Adams &#8211; Anatomy of a Mashup</a></dt>
<dd>Camaron Adams hat einen Song namens &#8222;Definitive Daft Punk&#8220; als Mashup/Remix verschiedener Daft Punk Lieder erstellt, und dazu gleich auch noch eine Echtzeit-Visualisierung hinzugebaut. Sehr beeindruckend! Und bitte unbedingt die Boxen aufdrehen!</dd>
</dl>


Die neuste Revision geht mit sensationell wenigen Themen ins Rennen. Woran es
lag? Wir haben uns ein Opera-Themen-Verbot auferlegt, bis wir Patrick H. Lauke
mal in der Sendung haben zum drüber Quatsch…

Die neuste Revision geht mit sensationell wenigen Themen ins Rennen. Woran es
lag? Wir haben uns ein Opera-Themen-Verbot auferlegt, bis wir Patrick H. Lauke
mal in der Sendung haben zum drüber Quatschen. Desweiteren konnte die Google I/O
nicht mit ganz so viel Web-Bezogenem aufwarten. Aber wie Ihr hört, kriegen wir
auch das gebügelt.


SCHAUNOTIZEN

[00:00:42] JQUERY 1.6.1 RELEASED

Die jQuery-Macher sahen sich aufgrund der in der letzten Revision erwähnten
Änderungen und ihrer Auswirkungen gezwungen, ein Rolle-Rückwärts-Update
nachzuschieben. Version 1.6.1 stellt nun zumindest auf der attr()-Methode die
verlorengegangene Kompatibilität wieder her.

[00:02:53] PAGE SPEED ONLINE API

Google stellt seit neustem einen Webservice bereit, über welchen man dieselben
Testergebnisse und Ratschläge zur Ladegeschwindigkeit im JSON-Format erhält, die
auch die Browser-Plugins sowie Page Speed Online zurückgeben. Das
WordPress-Plugin W3 Total Cache nutzt diesen Dienst, um dem Benutzer
Optimierungsvorschläge zu machen. Wofür man den Dienst aber in der Praxis genau
gebrauchen kann, darauf wollten wir einfach nicht kommen. Hat wer eine Idee?
(gerne via Audioboo mit Hash #workingdraft)

[00:08:37] INSPECTABLE SHADOW DOM, THE FILE BROWSER AND NEW DEFAULT AVATARS

Der aktuelle Canary-Build von Chrome zeigt seit neustem alle zu einem Element
gehörigen Shadow-DOM-Elemente. Damit lässt sich also herausfinden, wie man per
CSS an in HTML-Elementen steckende Subelemente herankommt, wie etwa dem
placeholder-Text in einem HTML5-Eingabefeld, oder den Slider eines range-Inputs.
Dennoch eine Insellösung.

[00:20:06] PROPOSAL FOR A TAB VISIBILITY API

Das Chrome Team bringt den Vorschlag zu einer „Visibility API“ bei der WHATWG
ein. Über die API soll sich anfragen lassen, ob ein Fenster gerade fokussiert
ist oder nicht, und wenn nicht, wie genau nicht. Außerdem soll es noch einen
dazugehörigen Eventhandler geben. Markus fällt dabei ein, dass man heute schon
nicht-aktive Fenster gestalten kann. Und wir drei sinnieren darüber, ob sowas
wie diese API brauchbar wäre. Was meint Ihr? (gerne via Audioboo mit Hash
#workingdraft)

[00:34:54] GOOGLE CHROMEBOOKS

Google stellte auf der diesjährigen Google I/O die finale Inkarnation seiner
Chrome-OS-Hardware namens „Chromebooks“ vor. Im Prinzip handelt es sich dabei um
11/12-Zoll-Netbooks mit einer kleinen SSD darin. Dazu gibt es Varianten mit UMTS
und hierzulande einem Jahr E-Plus gratis obendrauf. Gag des Betriebssystems ist,
dass alles in der Cloud gespeichert wird (nein, nicht in Microsofts Cloud), und
man seine Gurke jederzeit aus dem Fenster werfen kann, ohne seine Daten zu
verlieren. Obwohl Google manche Dienste offline-fähig gemacht hat, hängt man
dennoch stark am Tropf des Internets. Und damit ist es ja bei E-Plus nicht immer
gut bestellt. Wir sind gespannt, was draus wird.


KEINE SCHAUNOTIZEN

[00:56:03] ROME – 3 DREAMS OF BLACK

Beeindruckende Demo von der Google I/O, die in einem interaktiven Musikvideo
traumhafte Video-, Audio- und 3D-Elemente vermischt. Benötigt die Canary-Version
des Google Chrome Browsers.

[00:56:33] CAMERON ADAMS – ANATOMY OF A MASHUP

Camaron Adams hat einen Song namens „Definitive Daft Punk“ als Mashup/Remix
verschiedener Daft Punk Lieder erstellt, und dazu gleich auch noch eine
Echtzeit-Visualisierung hinzugebaut. Sehr beeindruckend! Und bitte unbedingt die
Boxen aufdrehen!

Revision 25: Visibility API und Chromebooks

<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28] <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=253317">Silbentrennung landet im Firefox</a></dt>
<dd>Wir reden darüber, warum es höchste Zeit und vor allem unabdingbar ist, dass unsere Browser Silbentrennung lernen, auch wenn es Krücken wie den <a href="http://code.google.com/p/hyphenator/">Hyphenator</a> gibt. Im Firefox (Nightly) nun anwendbar per <code>-moz-hyphens:auto</code>-Anweisung auf dem silbenzutrennenden Text.</dd>
<dt>[00:07:06] <a href="http://api.jquery.com/category/version/1.6/">Neuerungen in jQuery 1.6</a></dt>
<dd>Die neue jQuery-Version (übrigens eine der letzten mit John Resig im Team), beherrscht einige schöne Neuerungen wie die Nutzung von <code><a href="http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/">requestAnimationFrame</a></code> und die Bereitstellung der <a href="http://api.jquery.com/jQuery.holdReady/"><code>holdReady</code>-Methode</a>. Es wurde jedoch auch die Funktionalität der bisherigen <code>attr</code>-Methode verändert und Aufgaben an die neue <code>prop</code>-Methode abgegeben. Das kann beim einem simplen Auswechseln der Basis-Bibliothek zu einigen Problemen führen.</dd>
<dt>[00:11:32] <a href="http://blog.bolinfest.com/2011/04/jquerycom-uses-only-34-of-jquery.html">jquery.com uses only 34% of jQuery</a></dt>
<dd>Michael Bolin, ein Google Closure Tools Spezialist, hat mit Hilfe eines selbsterstellten Firefox-Addons namens <a href="https://addons.mozilla.org/en-US/firefox/addon/jsbloat/">jsBloat</a> herausgefunden, dass in den meisten Fällen bestenfalls ein Drittel des in jQuery enthaltenen Codes zur Ausführung kommt. Die restlichen zwei Drittel könnten ohne Auswirkungen entfernt werden. Ungenutze Code-Teile kann man mit dem <a href="http://code.google.com/closure/compiler/docs/api-tutorial3.html">Advanced mode des Google Closure Compilers</a> Herausoptimieren lassen.</dd>
<dt>[00:19:06] <a href="http://inimino.org/~inimino/blog/javascript_semicolons">JavaScript Semicolon Insertion &#8211; Everything you need to know</a></dt>
<dd>Dieser Artikel zeigt, dass man in JavaScript (respektive ECMAScript) eigentlich fast überall die Semikola weglassen könnte, so man denn bestimmte Dinge beachtet. Wir reden darüber, ob wir das sinnvoll finden.</dd>
<dt>[00:26:20] <a href="https://code.google.com/p/traceur-compiler/">traceur-compiler &#8211; Google&#8217;s vehicle for Javascript Language Design Experimentation</a></dt>
<dd>Traceur ist ein JavaScript-Transpiler, der es heute schon erlaubt, mit dem JavaScript von morgen, nämlich JS.next, herumzuspielen. Der Transpiler wandelt den JS.next Code in heute verfügbares JS um. Sinn und Zweck der Sache ist dass Entwickler frühzeitig Input und Feedback aus der Praxis zum gerade entstehenden JS.next-Standard zurückliefern können.</dd>
<dt>[00:37:16] <a href="http://rewardjs.com/">RewardJS</a></dt>
<dd>Bei RewardJS handelt es sich ausnahmsweise mal nicht um eine JavaScript-Bibliothek, sondern um ein Belohnungssystem für JavaScript-Entwickler, die Bugs in gebräuchlichen Bibliotheken reparieren. Dazu wird jeden Monat eine neue Kampagne lanciert, die sich ausschließlich um eine bugbehaftete Bibliothek dreht. Täglich, wöchentlich und monatlich werden dann Sachpreise für fleissige Crowdsourcer ausgelobt.</dd>
<dt>[00:42:59] <a href="http://analytics.blogspot.com/2011/05/measure-page-load-time-with-site-speed.html">Measure Page Load Time with Site Speed Analytics Report</a></dt>
<dd>Google erweitert sein Analytics Tracking um die Fähigkeit, Ladezeiten mitzutracken. Das neue Feature ist jedoch nicht von Haus aus aktiv, sondern muss explizit per <code>_gaq.push(['_trackPageLoadTime']);</code> angeschmissen werden. Von da an misst es bei stichprobenartig ausgewählten Besuchern die Seitenladezeit mit Hilfe der <a href="http://blog.yottaa.com/2011/03/w3c-navigation-timing-api-better-page-load-time-measurements-in-chrome-and-ie">W3C Navigation Timing API</a> in IE9 und Chrome, respektive der Google Toolbar in den anderen Browsern. Die Daten lassen sich anschließend in Zusammenhang setzen mit den bekannten Filtermöglichkeiten wie &#8222;Welche Unterseite, Browser, Geolocation, etc.&#8220; Wem Google Analytics nicht liegt, der kann zu diesem Zweck auch auf <a href="https://github.com/yahoo/boomerang">Yahoo! Boomerang</a> zurückgreifen.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt>[00:49:33] <a href="http://microjs.com/">Microjs</a></dt>
<dd>Ein Verzeichnis von JavaScript Microframeworks für jeden Einsatzzweck.</dd>
<dt>[00:50:10] <a href="http://piffle.abdoc.net/">CSS Piffle</a></dt>
<dd>Ein schön gemachtes CSS3-Autorenwerkzeug.</dd>
<dt>[00:50:45] <a href="http://htmlemailboilerplate.com/">HTML Email Boilerplate</a></dt>
<dd>Eine hervorragende HTML/CSS-Code-Basis für den vollkommen verminten Bereich des Cross-Client-kompatiblen HTML-Newsletter-Baus.</dd>
<dt>[00:51:35] <a href="http://humanstxt.org/">humans.txt</a></dt>
<dd>Analog zur <code>robots.txt</code> soll eine <code>humans.txt</code> als gute Gepflogenheit beim Webseitenbau etabliert werden. Der Zweck dieser Datei ist derselbe wie die Abspänne bei Filmen: Die Mitarbeit jedes Beteiligten nebst Nennung seines Arbeitbereichs ausweisen. Selbst Google nutzt mittlerweile eine <a href="http://www.google.com/humans.txt">humans.txt</a></dd>
<dt>[00:52:33] <a href="http://www.blog.tocki.de/2011-05-05/70-beispiele-fur-mobile-websites/">70+ Beispiele für mobile Websites</a></dt>
<dd><a href="http://www.twitter.com/tocki">Tilman Ockert</a> hat eine sehr inspirierende Sammlung für mobile Endgeräte optimierter Benutzeroberflächen zusammengestellt. Es handelt sich dabei sowohl um Apps als auch Websites. Wir sind geflasht!</dd>
</dl>


SCHAUNOTIZEN

[00:00:28] SILBENTRENNUNG LANDET IM FIREFOX

Wir reden darüber, warum es höchste Zeit und vor allem unabdingbar ist, dass
unsere Browser Silbentrennung lernen, auch wenn es Krücken wie d…

SCHAUNOTIZEN

[00:00:28] SILBENTRENNUNG LANDET IM FIREFOX

Wir reden darüber, warum es höchste Zeit und vor allem unabdingbar ist, dass
unsere Browser Silbentrennung lernen, auch wenn es Krücken wie den Hyphenator
gibt. Im Firefox (Nightly) nun anwendbar per -moz-hyphens:auto-Anweisung auf dem
silbenzutrennenden Text.

[00:07:06] NEUERUNGEN IN JQUERY 1.6

Die neue jQuery-Version (übrigens eine der letzten mit John Resig im Team),
beherrscht einige schöne Neuerungen wie die Nutzung von requestAnimationFrame
und die Bereitstellung der holdReady-Methode. Es wurde jedoch auch die
Funktionalität der bisherigen attr-Methode verändert und Aufgaben an die neue
prop-Methode abgegeben. Das kann beim einem simplen Auswechseln der
Basis-Bibliothek zu einigen Problemen führen.

[00:11:32] JQUERY.COM USES ONLY 34% OF JQUERY

Michael Bolin, ein Google Closure Tools Spezialist, hat mit Hilfe eines
selbsterstellten Firefox-Addons namens jsBloat herausgefunden, dass in den
meisten Fällen bestenfalls ein Drittel des in jQuery enthaltenen Codes zur
Ausführung kommt. Die restlichen zwei Drittel könnten ohne Auswirkungen entfernt
werden. Ungenutze Code-Teile kann man mit dem Advanced mode des Google Closure
Compilers Herausoptimieren lassen.

[00:19:06] JAVASCRIPT SEMICOLON INSERTION – EVERYTHING YOU NEED TO KNOW

Dieser Artikel zeigt, dass man in JavaScript (respektive ECMAScript) eigentlich
fast überall die Semikola weglassen könnte, so man denn bestimmte Dinge
beachtet. Wir reden darüber, ob wir das sinnvoll finden.

[00:26:20] TRACEUR-COMPILER – GOOGLE’S VEHICLE FOR JAVASCRIPT LANGUAGE DESIGN
EXPERIMENTATION

Traceur ist ein JavaScript-Transpiler, der es heute schon erlaubt, mit dem
JavaScript von morgen, nämlich JS.next, herumzuspielen. Der Transpiler wandelt
den JS.next Code in heute verfügbares JS um. Sinn und Zweck der Sache ist dass
Entwickler frühzeitig Input und Feedback aus der Praxis zum gerade entstehenden
JS.next-Standard zurückliefern können.

[00:37:16] REWARDJS

Bei RewardJS handelt es sich ausnahmsweise mal nicht um eine
JavaScript-Bibliothek, sondern um ein Belohnungssystem für
JavaScript-Entwickler, die Bugs in gebräuchlichen Bibliotheken reparieren. Dazu
wird jeden Monat eine neue Kampagne lanciert, die sich ausschließlich um eine
bugbehaftete Bibliothek dreht. Täglich, wöchentlich und monatlich werden dann
Sachpreise für fleissige Crowdsourcer ausgelobt.

[00:42:59] MEASURE PAGE LOAD TIME WITH SITE SPEED ANALYTICS REPORT

Google erweitert sein Analytics Tracking um die Fähigkeit, Ladezeiten
mitzutracken. Das neue Feature ist jedoch nicht von Haus aus aktiv, sondern muss
explizit per _gaq.push(['_trackPageLoadTime']); angeschmissen werden. Von da an
misst es bei stichprobenartig ausgewählten Besuchern die Seitenladezeit mit
Hilfe der W3C Navigation Timing API in IE9 und Chrome, respektive der Google
Toolbar in den anderen Browsern. Die Daten lassen sich anschließend in
Zusammenhang setzen mit den bekannten Filtermöglichkeiten wie „Welche
Unterseite, Browser, Geolocation, etc.“ Wem Google Analytics nicht liegt, der
kann zu diesem Zweck auch auf Yahoo! Boomerang zurückgreifen.


KEINE SCHAUNOTIZEN

[00:49:33] MICROJS

Ein Verzeichnis von JavaScript Microframeworks für jeden Einsatzzweck.

[00:50:10] CSS PIFFLE

Ein schön gemachtes CSS3-Autorenwerkzeug.

[00:50:45] HTML EMAIL BOILERPLATE

Eine hervorragende HTML/CSS-Code-Basis für den vollkommen verminten Bereich des
Cross-Client-kompatiblen HTML-Newsletter-Baus.

[00:51:35] HUMANS.TXT

Analog zur robots.txt soll eine humans.txt als gute Gepflogenheit beim
Webseitenbau etabliert werden. Der Zweck dieser Datei ist derselbe wie die
Abspänne bei Filmen: Die Mitarbeit jedes Beteiligten nebst Nennung seines
Arbeitbereichs ausweisen. Selbst Google nutzt mittlerweile eine humans.txt

[00:52:33] 70+ BEISPIELE FÜR MOBILE WEBSITES

Tilman Ockert hat eine sehr inspirierende Sammlung für mobile Endgeräte
optimierter Benutzeroberflächen zusammengestellt. Es handelt sich dabei sowohl
um Apps als auch Websites. Wir sind geflasht!

Revision 24: Silbentrennung, Semikola und Reward.js

<p>Nach einer kurzen Osterpause geht es mit der Illuminatenfolge weiter. Der Schepp ist leider nicht dabei, aber dafür kann er uns nächste Woche dann umso mehr erzählen.</p>
<p>Noch einmal die Kapitelmarken-Diskussion: In der letzten Woche meldeten sich dann doch einige, denen nach Chaptermarks dürstete. Allerdings ist das schon ein recht großer Aufwand und wahrscheinlich beansprucht das immer noch ca. eine Stunde mehr an Nachbearbeitung. Ist es euch das wert? Oder lieber die Sendung früher bekommen und dafür auf Chapters verzichten?</p>
<p>Und zum Format der Audiodatei: Besitzt ihr alle AAC-fähige Endgeräte und kann ich auf MP3 verzichten, oder ist das gammlige Encoding immer noch Pflicht?</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/donnerjack13589/node-spdy">Node.js + SPDY</a></dt>
<dd>In der letzten Sendung noch gerätselt, ob schon jemand Googles SPDY-Protokoll mit node.js verheiratet hat, jetzt ist es passiert.</dd>
<dt><a href="http://www.w3.org/TR/2011/WD-calendar-api-20110419/">Calendar API</a></dt>
<dd>Zukunftskram: Mit dem hier spezifizierten Interface soll man als Webdeveloper einmal auf des Users Adressbuch zugreifen können.</dd>
<dt><a href="http://www.w3.org/TR/2011/WD-battery-status-20110426/">Battery Status API</a></dt>
<dd>Zukunftskram: Hiermit soll es irgendwann einmal möglich sein, den Batteriestatus des Geräts auszulesen.</dd>
<dt><a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html#FilterProperty">CSS/SVG-Filters</a></dt>
<dd>Zukunftskram: Photoshop noch seltener anschmeißen müssen, mit eingebauten Filterfunktionen.</dd>
<dt><a href="http://functionsource.com/post/eve-when-typing-events-is-too-much">Eve</a></dt>
<dd>Microframework für Events. Mit einer Art Grammatik. Hell yeah!</dd>
<dt><a href="http://coffeekup.org/">CoffeeKup</a></dt>
<dd>CoffeeKup is markup as CoffeeScript.</dd>
<dt><a href="http://www.paciellogroup.com/blog/2011/04/html5-accessibility-chops-the-alt-decision/">HTML5 Accessibility Chops: the alt decision</a></dt>
<dd>26-seitige Abhandlung über die Problematik mit dem umdefinierten alt-Attribut.</dd>
<dt><a href="http://www.w3.org/TR/css3-transitions/#the-transition-property-property-">CSS3-Transitions …</a></dt>
<dd>… sind doof, so wie sie derzeit überall implementiert sind. Das Keyword „all“ ist eine Lüge.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://txt2re.com/">txt2re.com</a></dt>
<dd>RegEx-Generator</dd>
<dt><a href="http://www.dallaway.com/sloppy/">Sloppy</a></dt>
<dd>Sloppy simuliert diverse Internetbandbreiten auf OSX/WIN/Linux in jedem Browser. /via <a href="http://twitter.com/polarity">polarity</a></dd>


Nach einer kurzen Osterpause geht es mit der Illuminatenfolge weiter. Der Schepp
ist leider nicht dabei, aber dafür kann er uns nächste Woche dann umso mehr
erzählen.

Noch einmal die Kapitelmarken-Di…

Nach einer kurzen Osterpause geht es mit der Illuminatenfolge weiter. Der Schepp
ist leider nicht dabei, aber dafür kann er uns nächste Woche dann umso mehr
erzählen.

Noch einmal die Kapitelmarken-Diskussion: In der letzten Woche meldeten sich
dann doch einige, denen nach Chaptermarks dürstete. Allerdings ist das schon ein
recht großer Aufwand und wahrscheinlich beansprucht das immer noch ca. eine
Stunde mehr an Nachbearbeitung. Ist es euch das wert? Oder lieber die Sendung
früher bekommen und dafür auf Chapters verzichten?

Und zum Format der Audiodatei: Besitzt ihr alle AAC-fähige Endgeräte und kann
ich auf MP3 verzichten, oder ist das gammlige Encoding immer noch Pflicht?


SCHAUNOTIZEN

NODE.JS + SPDY

In der letzten Sendung noch gerätselt, ob schon jemand Googles SPDY-Protokoll
mit node.js verheiratet hat, jetzt ist es passiert.

CALENDAR API

Zukunftskram: Mit dem hier spezifizierten Interface soll man als Webdeveloper
einmal auf des Users Adressbuch zugreifen können.

BATTERY STATUS API

Zukunftskram: Hiermit soll es irgendwann einmal möglich sein, den Batteriestatus
des Geräts auszulesen.

CSS/SVG-FILTERS

Zukunftskram: Photoshop noch seltener anschmeißen müssen, mit eingebauten
Filterfunktionen.

EVE

Microframework für Events. Mit einer Art Grammatik. Hell yeah!

COFFEEKUP

CoffeeKup is markup as CoffeeScript.

HTML5 ACCESSIBILITY CHOPS: THE ALT DECISION

26-seitige Abhandlung über die Problematik mit dem umdefinierten alt-Attribut.

CSS3-TRANSITIONS …

… sind doof, so wie sie derzeit überall implementiert sind. Das Keyword „all“
ist eine Lüge.


KEINE SCHAUNOTIZEN

TXT2RE.COM

RegEx-Generator

SLOPPY

Sloppy simuliert diverse Internetbandbreiten auf OSX/WIN/Linux in jedem Browser.
/via polarity

Revision 23: Node-SPDY, Zukunftskram und CoffeeKup

<p>Diese Folge ist sowas von <a href="http://audioboo.fm/boos/335136-geile-scheie-alter">geile Scheiße, Alter&trade;</a>. Unabhängig davon rufen wir nochmals alle Hörer dazu auf, den <a href="https://twitter.com/codepo8">Chris Heilmann</a> zu überreden, dass er uns bald mit seiner Präsenz bei einer Firefox-Sondersendung beglückt.</p>
<p>Wer uns übrigens einen Audio-Kommentar (Fragen, Lob, Tadel) zusenden möchte, der kann und sollte das gerne tun. Entweder via Mail an <a href="mailto:mail@markus-schlegel.com">mail@markus-schlegel.com</a> oder als <a href="http://audioboo.fm/">Audioboo</a> mit dem Tag &#8222;workingdraft&#8220;. Vielen Dank schon mal.</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://blogs.msdn.com/b/ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx">Der Internet Explorer erscheint als Preview in Version 10</a></dt>
<dd>Neue Features sind hauptsächlich im CSS3-Bereich zu finden. Vor allem <a href="http://www.drweb.de/magazin/series/css-3-spaltenlayouts/">die neuen Layout-Techniken</a>, <a href="http://www.peterkroener.de/ecmascript5-die-nachste-version-von-javascript-teil-1-ein-uberblick/">ES5</a>, Transitions und 3D-Transforms (!) sind erfreuliche Neuerungen. Viel wichtiger ist allerdings die Frage, ob Microsoft mit dem IE nun auch auf kurze Releasezyklen (vielleicht) oder gar Auto-Updates (unwahrscheinlich) setzt. Auch gut: Microsoft lernt langsam, <a href="http://www.computerworld.com/s/article/9215791/Windows_Vista_No_IE10_for_you">alte Zöpfe abzuschneiden</a>.</dd>
<dt><a href="http://mir.aculo.us/2011/04/11/i-for-one-welcome-our-new-micro-framework-overlords/">I for one welcome our micro-framework overlords</a></dt>
<dd>Thomas Fuchs plädiert für die Nutzung kleinerer Mini-Frameworks und spricht sich gegen jQuery, MooTools, YUI und die anderen Schlachtschiffe aus. Wir fragen uns, ob das für Ottonormalwebworker überhaupt sinnvoll ist.</dd>
<dt><a href="http://livejs.com/">Live.js</a></dt>
<dd>Einfach das kleine Skript einbinden und fertig. Dann hat man eine Auto-Refresh-Funktion zum bequemeren Entwickeln, ohne nach jedem Speichern das Fenster wechseln und manuell den Auffrisch-Button betätigen zu müssen.</dd>
<dt><a href="http://gmailblog.blogspot.com/2011/04/5-years-of-google-calendar-and-new.html">Google Calendar bekommt ein neues Favicon</a></dt>
<dd>Wir nehmen das zum Anlass, darüber zu philosophieren, wozu man Favicons noch missbrauchen könnte.</dd>
<dt><a href="http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html">CSS-Gradient-Klick-Editor von Microsoft</a></dt>
<dd>Wir meinen, dass man das auch ohne Probleme kompatibel zu den alten IEs hätte basteln können, trotz <a href="http://maddesigns.de/ie9-mit-css3-border-radius-und-linear-gradient-problemen-813.html">Problemchen im IE9 mit Filtern und runden Ecken</a>.</dd>
<dt><a href="http://janne.aukia.com/easie/">jQuery.easie.js</a></dt>
<dd>jQuery-Plugin, das in älteren Browsern das &#8222;transition-timing-function&#8220; simuliert. Erst durch dieses Plugin ist Markus aufgefallen, dass es ja schon längst eine Lösung für sein kompliziertes 3D-Rotationsproblem gibt.</dd>
<dt><a href="http://chris.zarate.org/projects/bookmarkleter/">Bookmarklet-Creator</a></dt>
<dd>Mit diesem Tool kann man JavaScript in Bookmarklet-kompatiblen Code umwandeln. Wir diskutieren über Sinn und Unsinn von Bookmarklets im Allgemeinen.</dd>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://bueltge.de/test/media-query-tester.php">Media-Query-Tester</a></dt>
<dd>Praktisches Tool, um Media-Queries auf verschiedenen Viewports zu testen.</dd>
<dt><a href="https://github.com/jamesgpearce/confess">confess.js</a></dt>
<dd>A small script library that uses PhantomJS to headlessly analyze web pages. One useful application of this is to enumerate a web app&#8217;s resources for the purposes of creating a cache manifest file to make your apps run offline. So useful that, right now, that&#8217;s the only behavior.</dd>
<dt><a href="http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling">CSS Stress Testing and Performance Profiling</a></dt>
<dd>Mit Brute-Force-Methode herausfinden, welche CSS-Eigenschaft für eventuelle Slugginess auf einer Seite verantwortlich ist.</dd>
</dl>


Diese Folge ist sowas von geile Scheiße, Alter™. Unabhängig davon rufen wir
nochmals alle Hörer dazu auf, den Chris Heilmann zu überreden, dass er uns bald
mit seiner Präsenz bei einer Firefox-Sonders…

Diese Folge ist sowas von geile Scheiße, Alter™. Unabhängig davon rufen wir
nochmals alle Hörer dazu auf, den Chris Heilmann zu überreden, dass er uns bald
mit seiner Präsenz bei einer Firefox-Sondersendung beglückt.

Wer uns übrigens einen Audio-Kommentar (Fragen, Lob, Tadel) zusenden möchte, der
kann und sollte das gerne tun. Entweder via Mail an mail@markus-schlegel.com
oder als Audioboo mit dem Tag „workingdraft“. Vielen Dank schon mal.


SCHAUNOTIZEN

DER INTERNET EXPLORER ERSCHEINT ALS PREVIEW IN VERSION 10

Neue Features sind hauptsächlich im CSS3-Bereich zu finden. Vor allem die neuen
Layout-Techniken, ES5, Transitions und 3D-Transforms (!) sind erfreuliche
Neuerungen. Viel wichtiger ist allerdings die Frage, ob Microsoft mit dem IE nun
auch auf kurze Releasezyklen (vielleicht) oder gar Auto-Updates
(unwahrscheinlich) setzt. Auch gut: Microsoft lernt langsam, alte Zöpfe
abzuschneiden.

I FOR ONE WELCOME OUR MICRO-FRAMEWORK OVERLORDS

Thomas Fuchs plädiert für die Nutzung kleinerer Mini-Frameworks und spricht sich
gegen jQuery, MooTools, YUI und die anderen Schlachtschiffe aus. Wir fragen uns,
ob das für Ottonormalwebworker überhaupt sinnvoll ist.

LIVE.JS

Einfach das kleine Skript einbinden und fertig. Dann hat man eine
Auto-Refresh-Funktion zum bequemeren Entwickeln, ohne nach jedem Speichern das
Fenster wechseln und manuell den Auffrisch-Button betätigen zu müssen.

GOOGLE CALENDAR BEKOMMT EIN NEUES FAVICON

Wir nehmen das zum Anlass, darüber zu philosophieren, wozu man Favicons noch
missbrauchen könnte.

CSS-GRADIENT-KLICK-EDITOR VON MICROSOFT

Wir meinen, dass man das auch ohne Probleme kompatibel zu den alten IEs hätte
basteln können, trotz Problemchen im IE9 mit Filtern und runden Ecken.

JQUERY.EASIE.JS

jQuery-Plugin, das in älteren Browsern das „transition-timing-function“
simuliert. Erst durch dieses Plugin ist Markus aufgefallen, dass es ja schon
längst eine Lösung für sein kompliziertes 3D-Rotationsproblem gibt.

BOOKMARKLET-CREATOR

Mit diesem Tool kann man JavaScript in Bookmarklet-kompatiblen Code umwandeln.
Wir diskutieren über Sinn und Unsinn von Bookmarklets im Allgemeinen.


KEINE SCHAUNOTIZEN

MEDIA-QUERY-TESTER

Praktisches Tool, um Media-Queries auf verschiedenen Viewports zu testen.

CONFESS.JS

A small script library that uses PhantomJS to headlessly analyze web pages. One
useful application of this is to enumerate a web app’s resources for the
purposes of creating a cache manifest file to make your apps run offline. So
useful that, right now, that’s the only behavior.

CSS STRESS TESTING AND PERFORMANCE PROFILING

Mit Brute-Force-Methode herausfinden, welche CSS-Eigenschaft für eventuelle
Slugginess auf einer Seite verantwortlich ist.

Revision 22: IE10, Live.js und Favicons

<p>Heute zu Gast bei uns: <a href="http://www.highresolution.info/">Dirk Jesse</a> aus Berlin, Autor des HTML+CSS-Frameworks <a href="http://www.yaml.de/">YAML</a>. Und zu viert haben wir unsere bisher beste und längste Sendung hingequatscht.</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://groups.google.com/group/spdy-dev/browse_thread/thread/4c2396ecbc36b1c4?pli=1">SPDY on Google servers?</a></dt>
<dd>Wer Chrome verwendet, nutzt Googles geplanten HTTP-Nachfolger <a href="http://www.golem.de/0911/71179.html">SPDY</a> (gesprochen &#8222;Speedy&#8220;) schon jetzt ohne es zu wissen. Google nutzt das neue Protokoll in Chrome im Zusammenspiel mit all ihren Services!</dd>
<dt><a href="http://praegnanz.de/weblog/mobile-website-oder-web-app">Mobile Website oder Web-App?</a></dt>
<dd>Wir philosophieren über die Frage, wann sich eine HTML5-Seite wohl besser als native App getarnt und wann sie lieber ehrlich und mit eigener CI auftreten sollte (wie etwa <a href="http://basecamphq.com/">Basecamp</a>). Es geht bei unserem Gespräch um Best-Pratices, um Geschmäcker, um Fanboytum und nicht zuletzt um die Wurst.</dd>
<dt><a href="http://www.richardrodger.com/2011/04/05/the-javascript-disruption/">The JavaScript Disruption</a></dt>
<dd>Herr Rodger meint: JavaScript ist nicht nur dem Spielzeugstatus von früher entwachsen, nein, es wird zur dominierenden Sprache der aktuellen Dekade avancieren. Grundsätzlich gehen wir d&#8217;accord, wollen uns aber nicht ganz so weit aus dem Fenster lehnen wie er. Und Peter möchte Euch gerne sein Buch <a href="http://codersatwork.com/">Coders at Work</a> empfehlen.</dd>
<dt><a href="http://afarkas.github.com/webshim/demos/index.html">Webshims Lib</a></dt>
<dd>Die HTML5-Polyfill-Sammlung von Alexander Farkas ist insofern besonders, als dass sie HTML5-Lücken nicht irgendwie schließt, sondern so, dass auch alle damit verbundenen JavaScript-APIs in Originalform emuliert werden. Das erlaubt es, heute schon mit den vorgesehenen Befehlen zu arbeiten, so dass Polyfills jederzeit zugunsten echten HTML5s herausfallen können.</dd>
<dt><a href="http://markus-schlegel.com/weblog/suche-in-chrome-per-typesearch-anmelden">Suche in Chrome per <code>type=search</code> anmelden</a></dt>
<dd>Wer für seine seitenspezifische Suche ein input-Element mit dem Typen &#8222;search&#8220; verwendet, der bringt den Chrome Browser automatisch dazu, sich diese &#8222;Suchmaschine&#8220; dauerhaft zu merken.</dd>
<dt><a href="http://stuffandnonsense.co.uk/blog/about/its_a_mad_mad_mad_mad_manimation/">It’s a mad, mad, mad, mad manimation</a></dt>
<dd>Andy Clarke, Jünger des <a href="http://hardboiledwebdesign.com/">hardboiled</a> Webdesigns, demonstriert an einem Animationsprojekt, welches Vorgehen er sich unter dem Begriff &#8222;abgebrüht&#8220; vorstellt. Wir reden darüber, ob das Vorgehen genial ist, ob es eher ein &#8222;Progressive Enhancement&#8220; oder eine &#8222;Graceful Degradation&#8220; darstellt, oder ob Andy Clarke vielleicht doch nur eine faule Socke ist und die guten alten &#8222;Optimiert für&#8220;-Zeiten wieder da sind. Was denkt Ihr? Lauft in dem für Kommentare gekennzeichneten Bereich zu dem Thema gerne Amok.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.position-absolute.com/articles/handling-javascript-errors-on-production-websites/">Handling javascript errors on production websites</a></dt>
<dd>Kleine Library, mit der man sich jegliche JavaScript-Fehler, denen die User begegnen, an den Server schicken lassen kann.</dd>
<dt><a href="http://www.patternify.com/">Patternify</a></dt>
<dd>Ein CSS Hintergrundmuster Generator.</dd>
<dt><a href="http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/">The Cicada Principle and Why It Matters to Web Designers</a></dt>
<dd>Tutorial, das zeigt, wie man mit mehreren Hintergrundbildlayern und einer speziellen, an Primzahlen orientierten Anordnung nahezu unendlich weit laufende und dennoch sich nicht sichtbar wiederholende Hintergründe baut.</dd>
<dt><a href="http://lostandtaken.com/gallery">Lost and Taken Textur Galerie</a></dt>
<dd>Eine Sammlung wunderschöner Oberflächentexturen zur freien Nutzung sowohl im privaten wie auch im kommerziellen Kontext.</dd>
<dt><a href="http://fuelphp.com/">Fuel</a></dt>
<dd>Fuel is a simple, flexible, community driven PHP 5.3 web framework based on the best ideas of other frameworks with a fresh start.</dd>
</dl>


Heute zu Gast bei uns: Dirk Jesse aus Berlin, Autor des HTML+CSS-Frameworks
YAML. Und zu viert haben wir unsere bisher beste und längste Sendung
hingequatscht.


SCHAUNOTIZEN

SPDY ON GOOGLE SERVERS?
…

Heute zu Gast bei uns: Dirk Jesse aus Berlin, Autor des HTML+CSS-Frameworks
YAML. Und zu viert haben wir unsere bisher beste und längste Sendung
hingequatscht.


SCHAUNOTIZEN

SPDY ON GOOGLE SERVERS?

Wer Chrome verwendet, nutzt Googles geplanten HTTP-Nachfolger SPDY (gesprochen
„Speedy“) schon jetzt ohne es zu wissen. Google nutzt das neue Protokoll in
Chrome im Zusammenspiel mit all ihren Services!

MOBILE WEBSITE ODER WEB-APP?

Wir philosophieren über die Frage, wann sich eine HTML5-Seite wohl besser als
native App getarnt und wann sie lieber ehrlich und mit eigener CI auftreten
sollte (wie etwa Basecamp). Es geht bei unserem Gespräch um Best-Pratices, um
Geschmäcker, um Fanboytum und nicht zuletzt um die Wurst.

THE JAVASCRIPT DISRUPTION

Herr Rodger meint: JavaScript ist nicht nur dem Spielzeugstatus von früher
entwachsen, nein, es wird zur dominierenden Sprache der aktuellen Dekade
avancieren. Grundsätzlich gehen wir d’accord, wollen uns aber nicht ganz so weit
aus dem Fenster lehnen wie er. Und Peter möchte Euch gerne sein Buch Coders at
Work empfehlen.

WEBSHIMS LIB

Die HTML5-Polyfill-Sammlung von Alexander Farkas ist insofern besonders, als
dass sie HTML5-Lücken nicht irgendwie schließt, sondern so, dass auch alle damit
verbundenen JavaScript-APIs in Originalform emuliert werden. Das erlaubt es,
heute schon mit den vorgesehenen Befehlen zu arbeiten, so dass Polyfills
jederzeit zugunsten echten HTML5s herausfallen können.

SUCHE IN CHROME PER TYPE=SEARCH ANMELDEN

Wer für seine seitenspezifische Suche ein input-Element mit dem Typen „search“
verwendet, der bringt den Chrome Browser automatisch dazu, sich diese
„Suchmaschine“ dauerhaft zu merken.

IT’S A MAD, MAD, MAD, MAD MANIMATION

Andy Clarke, Jünger des hardboiled Webdesigns, demonstriert an einem
Animationsprojekt, welches Vorgehen er sich unter dem Begriff „abgebrüht“
vorstellt. Wir reden darüber, ob das Vorgehen genial ist, ob es eher ein
„Progressive Enhancement“ oder eine „Graceful Degradation“ darstellt, oder ob
Andy Clarke vielleicht doch nur eine faule Socke ist und die guten alten
„Optimiert für“-Zeiten wieder da sind. Was denkt Ihr? Lauft in dem für
Kommentare gekennzeichneten Bereich zu dem Thema gerne Amok.


KEINE SCHAUNOTIZEN

HANDLING JAVASCRIPT ERRORS ON PRODUCTION WEBSITES

Kleine Library, mit der man sich jegliche JavaScript-Fehler, denen die User
begegnen, an den Server schicken lassen kann.

PATTERNIFY

Ein CSS Hintergrundmuster Generator.

THE CICADA PRINCIPLE AND WHY IT MATTERS TO WEB DESIGNERS

Tutorial, das zeigt, wie man mit mehreren Hintergrundbildlayern und einer
speziellen, an Primzahlen orientierten Anordnung nahezu unendlich weit laufende
und dennoch sich nicht sichtbar wiederholende Hintergründe baut.

LOST AND TAKEN TEXTUR GALERIE

Eine Sammlung wunderschöner Oberflächentexturen zur freien Nutzung sowohl im
privaten wie auch im kommerziellen Kontext.

FUEL

Fuel is a simple, flexible, community driven PHP 5.3 web framework based on the
best ideas of other frameworks with a fresh start.

Revision 21: SPDY, Mobile UI, Webshims, und alles hardboiled!

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 32: Zwei hoch fünf

Working Draft

Revision 31: Takeout, OpenCL und Memory Management

Working Draft

Revision 30: IE10, Google+ und Dr.Web

Working Draft

Revision 29: VisualSearch.js und Twitter-Spam

Working Draft

Revision 28: Niemand hat Lion oder iOS 5

Working Draft

Revision 27: Revision 27: @viewport, Tastatursteuerung und Aurora 6

Working Draft

Revision 26: Viel Internet Explorer

Working Draft

Revision 25: Visibility API und Chromebooks

Working Draft

Revision 24: Silbentrennung, Semikola und Reward.js

Working Draft

Revision 23: Node-SPDY, Zukunftskram und CoffeeKup

Working Draft

Revision 22: IE10, Live.js und Favicons

Working Draft

Revision 21: SPDY, Mobile UI, Webshims, und alles hardboiled!

Working Draft