<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:…

Working Draft

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!

<p>Irgendwie hat sich die Veröffentlichung der zwanzigsten Folge etwas hingezogen. Jetzt ist sie aber da und ist bereit, sich mit brachialer Gewalt in eure Trommelfelle zu fressen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D">border-image-Generator</a></dt>
<dd>Hilfsmittel zum Slicen von Bildern zum Zwecke des <a href="http://www.peterkroener.de/schoenes-neues-css-border-image/">border-image-Anwendens</a></dd>
<dt><a href="http://httparchive.org/">HTTP-Archive</a></dt>
<dd>Statistiken über die im Web genutzten Techniken, Download-Massen und Ladezeiten</dd>
<dt><a href="http://blog.dynatrace.com/2011/03/29/dynatrace-ajax-edition-3-0-released-free-next-generation-browser-diagnostics-part-i/">dynaTrace Ajax Edition 3.0</a></dt>
<dd>Next Generation Browser Diagnostics</dd>
<dt><a href="http://jsconsole.com/">JSConsole.com</a></dt>
<dd>JavaScript-Konsole vorwiegend zum Remote-Debuggen mobiler Websites. <a href="http://www.youtube.com/watch?v=BEo8oJYey-M">Erklärbär-Video</a></dd>
<dt><a href="http://amplifyjs.com/">AmplifyJS</a></dt>
<dd>jQuery-Plugin, welches localStorage, sessionStorage und serverseitige Speicherung über Ajax unter einen Hut bringt und ordentlich wegabstrahiert.</dd>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://googlecode.blogspot.com/2011/03/introducing-page-speed-online-with.html">Google Pagespeed Online</a></dt>
<dd>Pagespeed mit Webinterface</dd>
<dt><a href="http://myjs.fr/">myJS</a></dt>
<dd>Extrem minimales und auf Performance getrimmtes JavaScript-Framework</dd>
<dt><a href="http://twigkit.github.com/tempo/">Tempo</a></dt>
<dd>Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML.</dd>
<dt><a href="http://html5boilerplate.com/mobile/">HTML5-Boilerplate Mobile</a></dt>
<dd>Mobile Version des Starterkits</dd>
</dl>


Irgendwie hat sich die Veröffentlichung der zwanzigsten Folge etwas hingezogen.
Jetzt ist sie aber da und ist bereit, sich mit brachialer Gewalt in eure
Trommelfelle zu fressen.


SCHAUNOTIZEN

BORDER…

Irgendwie hat sich die Veröffentlichung der zwanzigsten Folge etwas hingezogen.
Jetzt ist sie aber da und ist bereit, sich mit brachialer Gewalt in eure
Trommelfelle zu fressen.


SCHAUNOTIZEN

BORDER-IMAGE-GENERATOR

Hilfsmittel zum Slicen von Bildern zum Zwecke des border-image-Anwendens

HTTP-ARCHIVE

Statistiken über die im Web genutzten Techniken, Download-Massen und Ladezeiten

DYNATRACE AJAX EDITION 3.0

Next Generation Browser Diagnostics

JSCONSOLE.COM

JavaScript-Konsole vorwiegend zum Remote-Debuggen mobiler Websites.
Erklärbär-Video

AMPLIFYJS

jQuery-Plugin, welches localStorage, sessionStorage und serverseitige
Speicherung über Ajax unter einen Hut bringt und ordentlich wegabstrahiert.


KEINE SCHAUNOTIZEN

GOOGLE PAGESPEED ONLINE

Pagespeed mit Webinterface

MYJS

Extrem minimales und auf Performance getrimmtes JavaScript-Framework

TEMPO

Tempo is a tiny JSON rendering engine that enables you to craft data templates
in pure HTML.

HTML5-BOILERPLATE MOBILE

Mobile Version des Starterkits

Revision 20: HTTPArchive, dynaTrace und AmplifyJS

<p>Diese Woche haben wir uns kompetente Unterstützung von <a href="http://twitter.com/dantz">Andreas Dantz</a> aus Bremen gesichert.</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://www.barcampruhr3.de/networks/wiki/index.berichte">Barcamp Ruhr 4</a></dt>
<dd>Andreas und Schepp hatten beide das Vergnügen, am Wochenende dem vierten <a href="http://twitter.com/#search?q=bcruhr4">Barcamp Ruhr</a> in Essen beizuwohnen. Beide geben einen kurzen Überblick, was ein <a href="http://de.wikipedia.org/wiki/BarCamp">Barcamp</a> ausmacht, was für Vorträge geboten wurden und was das <a href="http://www.unperfekthaus.de/">Unperfekthaus in Essen</a> so besonders macht.</dd>
<dt><a href="http://www.getfirefox.de/">Firefox 4 ist da!</a></dt>
<dd>Firefox 4, oder kurz: der fx4, ist endlich released und verbreitet sich sich <a href="http://glow.mozilla.org/">rasend schnell</a>. Und wir finden ihn alle richtig gut. Über die Technik würden wir gerne nochmal in einer Schwerpunktsendung mit <a href="http://wait-till-i.com/">Chris Heilmann</a> sprechen. Der <a href="https://twitter.com/#!/codepo8/statuses/17223632753266688">hatte auch schon zugesagt</a>, kann sich <a href="https://twitter.com/#!/codepo8/statuses/43431604902834178">aber gerade nicht mehr erinnern</a>. Daher, liebe Hörer: Schiebt ihn bitte mal mit an, sonst lässt er uns noch als Stalker einbuchten :)</dd>
<dt><a href="http://webkompetenz.wikidot.com/docs:html-handbuch">HTML5-Handbuch</a></dt>
<dd>Stefan Münz hat im Prinzip eine Art inoffiziellen Nachfolger seiner SelfHTML-Bücher herausgebracht, und zwar sein <a href="http://www.amazon.de/dp/3645600795/">HTML5 Handbuch</a>. Gleichzeitig gibt es das gesamte Buch aber auch <a href="http://webkompetenz.wikidot.com/docs:html-handbuch">online</a>. Im Kontrast zu Peters Buch lässt Stefan Münz den JavaScript-Part bewusst aus und konzentriert sich auf Markup und CSS. Außerdem mit inklusive sind HTML 1 &#8211; 4.01 und CSS 1.0 &#8211; 2.1.</dd>
<dt><a href="http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview">Native webcam support and orientation events</a></dt>
<dd>Eine Vorabversion des Opera bringt die neuste Fassung der Device-API mit, mit Hilfe derer man Webcams, Mikrofone und ähnliches aus dem Browser heraus anzapfen kann. Außerdem kennt das window-Objekt ein neues Orientation-Event, das auslöst, sobald das Gerät um mehr als 90 Grad gedreht wird.</dd>
<dt><a href="http://manifest-validator.com/">Cache Manifest Validator</a></dt>
<dd>Sehr praktisches Online Werkzeug, mit dem man ein HTML5-Appcache Cache-Manifest von oben bis unten durchchecken lassen kann. Vorbei ist also das Stochern im Nebel, wenn der Appcache mal wieder nicht macht, was er soll. Gibt es auch per Textmate-Bundle und zum Forken auf Github.</dd>
<dt><a href="http://msdn.microsoft.com/en-us/library/gg622939(v=vs.85).aspx">IE9 MIME-Handling Change: text/css</a></dt>
<dd>Der IE9 zieht die Daumenschrauben in Sachen Kleinkariertheit an und akzeptiert keine Stylesheets mehr, die nicht mit dem MIME-Typ &#8222;text/css&#8220; ausgeliefert werden. Dass das kein <a href="https://twitter.com/#!/ie9bugs">Bug</a> des IE9 ist, sondern ein Sicherheitsfeature, und wie man den IE9 als Serverbetreiber zum Schutz seiner Besucherschaft auch bei JavaScript in einen solchen Modus bringen kann, erläutert alles ein <a href="http://blogs.msdn.com/b/ie/archive/2010/10/26/mime-handling-changes-in-internet-explorer.aspx">Blogpost im IE-Blog</a>.</dd>
<dt><a href="http://www.illuminations-for-developers.com/">Illuminations for Developers</a></dt>
<dd>&hellip; ist eine kostenpflichtige Erweiterung eines der Firebug-Programmierer für, ähm naja, Firebug. Sie filtert einem aus der Seite in einem separaten Firebug-Tab alle Widget-Elemente der großen JavaScript-UI-Frameworks ExtJS, Dojo Toolkit, SproutCore, qooxdoo, YUI3, Closure Library, und jQueryUI heraus. Dort <a href="http://www.illuminations-for-developers.com/about/">listet es deren Bestandteile, Werte und Methoden übersichtlich auf</a>. Von großem Wert für alle, die viel Webapps mit so Frameworks bauen und die sie effektiver debuggen wollen.</dd>
<dt><a href="http://www.csspivot.com/">CSS Pivot</a></dt>
<dd>Mit diesem Online-Werkzeug kann man einer bestehenden Seite eigene Styles hinzufügen und das Ergebnis als Link weitergeben. Gut zum Brainstormen oder um Kunden Facelifting-Vorschläge zu unterbreiten oder um Ideen innerhalb des Teams auszutauschen.</dd>
<dt><a href="http://matthewlein.com/ceaser/">Ceaser CSS Easing Animation Tool</a></dt>
<dd>Ein weiteres Online-Werkzeug, mit dem man völlig frei Animationskurven mit Hilfe einer Bezierkurve und zwei Anfassern zurechtziehen kann, und das einem zum Schluss den dazu passenden fertigen CSS-Transition-Code ausspuckt.</dd>
<dt><a href="http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx">Targeting mobile-optimized CSS at Windows Phone 7</a></dt>
<dd>Die mobilen Fassungen der IEs auf Windows Phone 7 haben eigene maßgeschneiderte Conditional Comments erhalten, mit denen sich die altbekannten Browserweichen auch auf mobilen Seiten realisieren lassen.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/Phrogz/context-blender">context-blender</a></dt>
<dd>Kleines Tool, mit dem man Bilder in einer Canvas ähnlich wie in Photoshop die Ebenen ineinanderblenden kann.</dd>
<dt><a href="http://www.craig-russell.co.uk/dont-trust-ie9s-document-modes/">Don’t Trust IE9′s Document Modes</a></dt>
<dd>Auch wenn es eigentlich nichts Neues ist: Die Emulationen älterer IE-Renderer im IE9 per Document Mode sind nicht originalgetreu, eignen sich also nicht zum Testen.</dd>
<dt><a href="http://dev.w3.org/csswg/css3-regions/Overview.src.html">CSS Regions Module</a></dt>
<dd>Adobe hat endlich einen Working Draft veröffentlicht, der beschreibt, wie die verschiedenen, <a href="http://www.youtube.com/watch?v=zRa4QTsb08s">letzten Oktober in einem Video gezeigten</a> Text(um)fluss-Möglichkeiten in CSS umgesetzt werden könnten. Nicht gerade einfach.</dd>
</dl>


Diese Woche haben wir uns kompetente Unterstützung von Andreas Dantz aus Bremen
gesichert.


SCHAUNOTIZEN

BARCAMP RUHR 4

Andreas und Schepp hatten beide das Vergnügen, am Wochenende dem vierten Barc…

Diese Woche haben wir uns kompetente Unterstützung von Andreas Dantz aus Bremen
gesichert.


SCHAUNOTIZEN

BARCAMP RUHR 4

Andreas und Schepp hatten beide das Vergnügen, am Wochenende dem vierten Barcamp
Ruhr in Essen beizuwohnen. Beide geben einen kurzen Überblick, was ein Barcamp
ausmacht, was für Vorträge geboten wurden und was das Unperfekthaus in Essen so
besonders macht.

FIREFOX 4 IST DA!

Firefox 4, oder kurz: der fx4, ist endlich released und verbreitet sich sich
rasend schnell. Und wir finden ihn alle richtig gut. Über die Technik würden wir
gerne nochmal in einer Schwerpunktsendung mit Chris Heilmann sprechen. Der hatte
auch schon zugesagt, kann sich aber gerade nicht mehr erinnern. Daher, liebe
Hörer: Schiebt ihn bitte mal mit an, sonst lässt er uns noch als Stalker
einbuchten :)

HTML5-HANDBUCH

Stefan Münz hat im Prinzip eine Art inoffiziellen Nachfolger seiner
SelfHTML-Bücher herausgebracht, und zwar sein HTML5 Handbuch. Gleichzeitig gibt
es das gesamte Buch aber auch online. Im Kontrast zu Peters Buch lässt Stefan
Münz den JavaScript-Part bewusst aus und konzentriert sich auf Markup und CSS.
Außerdem mit inklusive sind HTML 1 – 4.01 und CSS 1.0 – 2.1.

NATIVE WEBCAM SUPPORT AND ORIENTATION EVENTS

Eine Vorabversion des Opera bringt die neuste Fassung der Device-API mit, mit
Hilfe derer man Webcams, Mikrofone und ähnliches aus dem Browser heraus anzapfen
kann. Außerdem kennt das window-Objekt ein neues Orientation-Event, das auslöst,
sobald das Gerät um mehr als 90 Grad gedreht wird.

CACHE MANIFEST VALIDATOR

Sehr praktisches Online Werkzeug, mit dem man ein HTML5-Appcache Cache-Manifest
von oben bis unten durchchecken lassen kann. Vorbei ist also das Stochern im
Nebel, wenn der Appcache mal wieder nicht macht, was er soll. Gibt es auch per
Textmate-Bundle und zum Forken auf Github.

IE9 MIME-HANDLING CHANGE: TEXT/CSS

Der IE9 zieht die Daumenschrauben in Sachen Kleinkariertheit an und akzeptiert
keine Stylesheets mehr, die nicht mit dem MIME-Typ „text/css“ ausgeliefert
werden. Dass das kein Bug des IE9 ist, sondern ein Sicherheitsfeature, und wie
man den IE9 als Serverbetreiber zum Schutz seiner Besucherschaft auch bei
JavaScript in einen solchen Modus bringen kann, erläutert alles ein Blogpost im
IE-Blog.

ILLUMINATIONS FOR DEVELOPERS

… ist eine kostenpflichtige Erweiterung eines der Firebug-Programmierer für, ähm
naja, Firebug. Sie filtert einem aus der Seite in einem separaten Firebug-Tab
alle Widget-Elemente der großen JavaScript-UI-Frameworks ExtJS, Dojo Toolkit,
SproutCore, qooxdoo, YUI3, Closure Library, und jQueryUI heraus. Dort listet es
deren Bestandteile, Werte und Methoden übersichtlich auf. Von großem Wert für
alle, die viel Webapps mit so Frameworks bauen und die sie effektiver debuggen
wollen.

CSS PIVOT

Mit diesem Online-Werkzeug kann man einer bestehenden Seite eigene Styles
hinzufügen und das Ergebnis als Link weitergeben. Gut zum Brainstormen oder um
Kunden Facelifting-Vorschläge zu unterbreiten oder um Ideen innerhalb des Teams
auszutauschen.

CEASER CSS EASING ANIMATION TOOL

Ein weiteres Online-Werkzeug, mit dem man völlig frei Animationskurven mit Hilfe
einer Bezierkurve und zwei Anfassern zurechtziehen kann, und das einem zum
Schluss den dazu passenden fertigen CSS-Transition-Code ausspuckt.

TARGETING MOBILE-OPTIMIZED CSS AT WINDOWS PHONE 7

Die mobilen Fassungen der IEs auf Windows Phone 7 haben eigene maßgeschneiderte
Conditional Comments erhalten, mit denen sich die altbekannten Browserweichen
auch auf mobilen Seiten realisieren lassen.


KEINE SCHAUNOTIZEN

CONTEXT-BLENDER

Kleines Tool, mit dem man Bilder in einer Canvas ähnlich wie in Photoshop die
Ebenen ineinanderblenden kann.

DON’T TRUST IE9′S DOCUMENT MODES

Auch wenn es eigentlich nichts Neues ist: Die Emulationen älterer IE-Renderer im
IE9 per Document Mode sind nicht originalgetreu, eignen sich also nicht zum
Testen.

CSS REGIONS MODULE

Adobe hat endlich einen Working Draft veröffentlicht, der beschreibt, wie die
verschiedenen, letzten Oktober in einem Video gezeigten
Text(um)fluss-Möglichkeiten in CSS umgesetzt werden könnten. Nicht gerade
einfach.

Revision 19: Barcamp, HTML5 Buch, Device-API und Manifest-Validator

<p>Nachdem wir die Sendung letzte Woche aufgrund weniger Themen und AKW-dominierter Nachrichtenlage haben ausfallen lassen, so haben wir uns diesmal den Cem Derin, alias <a href="http://twitter.com/unset">@unset</a>, als Co-Moderator an Bord geholt. Der eine oder andere kennt Cem vielleicht von seinen wöchentlichen Berichten zur Schräglage der Nation in Form des <a hreF="http://shitstorm.cemderin.net/">Shitstorm Podcasts</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://labs.adobe.com/technologies/wallaby/">Wallaby &#8211; Convert Adobe Flash FLA files into HTML and reach more devices</a></dt>
<dd>Wie der Titel schon impliziert, hat Adobe in seine Labs ein neues Werkzeug gestellt, mit sich FLA-Kompositionen in HTML5 und Co umwandeln lassen. Das läuft aber offenbar noch nicht ganz so rund, so dass es durchaus richtig ist, es in den Adobe Labs zu belassen. Dennoch begrüßen wir den Ansatz. Und wir erinnern uns an Tools wie <a href="https://github.com/tobeytailor/gordon">Gordon</a> (<a href="http://paulirish.com/work/gordon/demos/">Demos</a>) und <a href="http://smokescreen.us/">Smokescreen</a>.</dd>
<dt><a href="http://www.impressivewebs.com/scoped-styles-html5/">Scoped Styles in HTML5</a></dt>
<dd>Bei den Scoped Styles geht es darum, eine Möglichkeit zu haben, Subsektionen im HTML-Dokument mit einem anderen Stylesheet zu stylen als den großen Rest. Nützlich in Webmail-Clients zur Darstellung von E-Mails, für fremdeingebettete Inhalte und für WYSIWYG-Editoren. Derzeit nirgends nativ implementiert, bei Mozilla und Webkit aber am fernen Horizont zu sehen, und jetzt schon in Form eines <a href="http://thingsinjars.com/post/360/scoped-style/">jQuery-Plugins</a> nutzbar.</dd>
<dt><a href="https://gist.github.com/08602e7d2ee448be834c">A function for detecting if the browser is in a given media mode</a></dt>
<dd>Kleine nützliche Funktion von Nicholas Zakas, mit der in JavaScript man prüfen kann, welche CSS3 Media Queries gerade zutreffen. Also etwa so: <code>if(isMedia("screen and (orientation:portrait)"){machwas();}</code></dd>
<dt><a href="http://pmuellr.github.com/weinre/">weinre &#8211; Web Inspector Remote</a></dt>
<dd>
<blockquote><p>It&#8217;s a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it&#8217;s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.</p></blockquote>
<p>Das sagt im Prinzip schon alles. Man startet lokal einen Java-Server, bindet ein JavaScript in die auf dem Mobilgerät zu debuggende Seite ein und startet dann auf seinem Desktop den Ferndebugger, der alles kann, was der klassische Webkit Web Inspektor kann &#8211; nur dass das Anschauungsobjekt eben im Mobilgerät liegt.</dd>
<dt><a href="http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx">Internet Explorer 9 Network Performance Improvements</a></dt>
<dd>Das Blogpost von Microsoft finden wir deswegen interessant, weil wir dort ein paar schöne Statistiken zum Verhältnis Wartezeit und Ausführungszeit beim Laden von Seiten an die Hand bekommen. Und es bekräftigt, dass die Optimierungskette sehr lang ist, bis man an den Punkt kommt, an dem man seine CSS-Selektoren oder JavaScripte bis ins letzte optimieren muss.</dd>
<dt><a href="http://www.theregister.co.uk/2011/03/15/apple_ios_throttles_web_apps_on_home_screen/">Apple handcuffs &#8218;open&#8216; web apps on iPhone home screen</a></dt>
<dd>Wir reden darüber, <a href="http://daringfireball.net/2011/03/nitro_ios_43">warum</a> Apple seine JavaScript Engine <i>Nitro</i> nur im Safari aktiviert und <a href="http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro">nicht</a> in den Home Screen Webapps und in den Safari-nutzenden nativen Apps.</dd>
<dt><a href="http://wideimage.sourceforge.net/">WideImage</a> und <a href="http://www.slideshare.net/avalanche123/introduction-toimagine">Imagine</a></dt>
<dd>Wir stellen zwei sehr praktische Bildmanipulationsframeworks für PHP vor, die vom Resizen über Beschneiden, Rotieren, Spiegeln, Entfärben bis hin zum Maskieren alles bieten, was das von der GDLib gepeinigte Herz begehrt.</dd>
<dt><a href="http://www.golem.de/1103/82061.html">Twitters veränderte API-Richtlinien</a></dt>
<dd>Wir reden darüber, was die Beweggründe für Twitters pünktlich zum 5. Geburtstag ausgegebenen strammen neuen API-Richtlinien sein können. Und wir überlegen, ob wir das gut oder schlecht finden.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.phpied.com/when-is-a-stylesheet-really-loaded/">When is a stylesheet really loaded?</a></dt>
<dd>Wie man herausfinden kann, wann ein Stylesheet fertiggeladen wurde.</dd>
<dt><a href="http://cubiq.org/iscroll-4">iScroll 4</a></dt>
<dd>Kleines JavaScript, mit dem man <code>&lt;div&gt;</code>s mit <code>overflow: scroll</code> in mobilen Webkits mit einem Finger scrollbar machen kann.</dd>
<dt><a href="http://nowjs.com">NowJS</a></dt>
<dd>Framework, mit dessen Hilfe Datensätze gleichzeitig von einem Node.js-Server und clientseitig von JavaScript bearbeitbar werden.</dd>
</dl>


Nachdem wir die Sendung letzte Woche aufgrund weniger Themen und AKW-dominierter
Nachrichtenlage haben ausfallen lassen, so haben wir uns diesmal den Cem Derin,
alias @unset, als Co-Moderator an Bord …

Nachdem wir die Sendung letzte Woche aufgrund weniger Themen und AKW-dominierter
Nachrichtenlage haben ausfallen lassen, so haben wir uns diesmal den Cem Derin,
alias @unset, als Co-Moderator an Bord geholt. Der eine oder andere kennt Cem
vielleicht von seinen wöchentlichen Berichten zur Schräglage der Nation in Form
des Shitstorm Podcasts.


SCHAUNOTIZEN

WALLABY – CONVERT ADOBE FLASH FLA FILES INTO HTML AND REACH MORE DEVICES

Wie der Titel schon impliziert, hat Adobe in seine Labs ein neues Werkzeug
gestellt, mit sich FLA-Kompositionen in HTML5 und Co umwandeln lassen. Das läuft
aber offenbar noch nicht ganz so rund, so dass es durchaus richtig ist, es in
den Adobe Labs zu belassen. Dennoch begrüßen wir den Ansatz. Und wir erinnern
uns an Tools wie Gordon (Demos) und Smokescreen.

SCOPED STYLES IN HTML5

Bei den Scoped Styles geht es darum, eine Möglichkeit zu haben, Subsektionen im
HTML-Dokument mit einem anderen Stylesheet zu stylen als den großen Rest.
Nützlich in Webmail-Clients zur Darstellung von E-Mails, für fremdeingebettete
Inhalte und für WYSIWYG-Editoren. Derzeit nirgends nativ implementiert, bei
Mozilla und Webkit aber am fernen Horizont zu sehen, und jetzt schon in Form
eines jQuery-Plugins nutzbar.

A FUNCTION FOR DETECTING IF THE BROWSER IS IN A GIVEN MEDIA MODE

Kleine nützliche Funktion von Nicholas Zakas, mit der in JavaScript man prüfen
kann, welche CSS3 Media Queries gerade zutreffen. Also etwa so:
if(isMedia("screen and (orientation:portrait)"){machwas();}

WEINRE – WEB INSPECTOR REMOTE

> It’s a debugger for web pages, like FireBug (for FireFox) and Web Inspector
> (for WebKit-based browsers), except it’s designed to work remotely, and in
> particular, to allow you debug web pages on a mobile device such as a phone.

Das sagt im Prinzip schon alles. Man startet lokal einen Java-Server, bindet ein
JavaScript in die auf dem Mobilgerät zu debuggende Seite ein und startet dann
auf seinem Desktop den Ferndebugger, der alles kann, was der klassische Webkit
Web Inspektor kann – nur dass das Anschauungsobjekt eben im Mobilgerät liegt.

INTERNET EXPLORER 9 NETWORK PERFORMANCE IMPROVEMENTS

Das Blogpost von Microsoft finden wir deswegen interessant, weil wir dort ein
paar schöne Statistiken zum Verhältnis Wartezeit und Ausführungszeit beim Laden
von Seiten an die Hand bekommen. Und es bekräftigt, dass die Optimierungskette
sehr lang ist, bis man an den Punkt kommt, an dem man seine CSS-Selektoren oder
JavaScripte bis ins letzte optimieren muss.

APPLE HANDCUFFS ‚OPEN‘ WEB APPS ON IPHONE HOME SCREEN

Wir reden darüber, warum Apple seine JavaScript Engine Nitro nur im Safari
aktiviert und nicht in den Home Screen Webapps und in den Safari-nutzenden
nativen Apps.

WIDEIMAGE UND IMAGINE

Wir stellen zwei sehr praktische Bildmanipulationsframeworks für PHP vor, die
vom Resizen über Beschneiden, Rotieren, Spiegeln, Entfärben bis hin zum
Maskieren alles bieten, was das von der GDLib gepeinigte Herz begehrt.

TWITTERS VERÄNDERTE API-RICHTLINIEN

Wir reden darüber, was die Beweggründe für Twitters pünktlich zum 5. Geburtstag
ausgegebenen strammen neuen API-Richtlinien sein können. Und wir überlegen, ob
wir das gut oder schlecht finden.


KEINE SCHAUNOTIZEN

WHEN IS A STYLESHEET REALLY LOADED?

Wie man herausfinden kann, wann ein Stylesheet fertiggeladen wurde.

ISCROLL 4

Kleines JavaScript, mit dem man <div>s mit overflow: scroll in mobilen Webkits
mit einem Finger scrollbar machen kann.

NOWJS

Framework, mit dessen Hilfe Datensätze gleichzeitig von einem Node.js-Server und
clientseitig von JavaScript bearbeitbar werden.

Revision 18: Scoped Styles, Web Inspector Remote, Bildmanipulation in PHP

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 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

Revision 20: HTTPArchive, dynaTrace und AmplifyJS

Working Draft

Revision 19: Barcamp, HTML5 Buch, Device-API und Manifest-Validator

Working Draft

Revision 18: Scoped Styles, Web Inspector Remote, Bildmanipulation in PHP

Working Draft