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

Working Draft

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

<p>Nach ganzen vier(!) Wochen des krankheitsbedingten Ausfallens haben wir uns endlich den Peter wieder in die Sendung zurückgeholt. Das war auch dringend erforderlich, denn bedingt durch unsere letztwöchige Sondersendung haben sich bei uns furchtbar viele interessante Themen angesammelt, die in Augenschein genommen werden mussten. Die Themenflut hatte zudem zur Folge, dass wir besonders rigoros sieben mussten. Da wir dieses Material nicht ganz unter den Tisch fallen lassen wollten sind im Gegenzug unsere <em>KEINE Schaunotizen</em> sehr umfangreich geworden. Also unbedingt mal durchscrollen!</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a></dt>
<dd>Der Befehl <code>requestAnimationFrame</code> steckt in neueren WebKits wie auch im Firefox 4 und soll in Zukunft als Animationsgerüst/-prinzip die bisherigen Krücken <code>setTimeout</code> und <code>setInterval</code> ablösen. Warum jetzt genau &#8222;Krücken&#8220;? Weil beide eher unkoordiniert und hysterisch Browser-Repaints erzeugen. <code>requestAnimationFrame</code> hingegen arbeitet umgekehrt und gibt sozusagen &#8222;Bescheid&#8220; wenn der Browser wieder Luft und Lust hat, etwas zu animieren. Nur dann werden Animationsanweisungen abgegeben und die dadurch entstehende ToDo-Liste wird an einem koordinierten Zeitpunkt umgesetzt. Zudem hilft die Methode Strom sparen. Soweit wir das verstanden haben, <a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">war Mozilla hier Vordenker</a>. Wir kommen bei dem Thema kurz auf das <a href="http://playground.benbarnett.net/jquery-animate-enhanced/">jquery.animate-enhanced plugin</a> zu sprechen, obwohl es nicht direkt etwas damit zu tun hat. Haben aber gesagt, wir verlinken es dennoch.</dd>
<dt><a href="http://optimizely.appspot.com/">Optimizely: A/B Testing you&#8217;ll actually use</a></dt>
<dd>Ein tolles und kinderleicht zu bedienendes Onlinewerkzeug, mit dem man im Browser Abwandlungen seiner zu testenden Seite erstellen kann. Halt ohne große und schmerzhafte serverseitige Eingriffe. Statt dessen erhält man einen JavaScript-Code, den man in seine Seite einbinden muss, und von da an erhalten Seitenbesucher reihum die verschiedenen Varianten vorgesetzt, und man selbst kann im Optimizely-Panel die Akzeptanzraten in Echtzeit begutachten.</dd>
<dt><a href="http://camanjs.com">CamanJS &#8211; JS Image Manipulation</a></dt>
<dd>Ein supersimpel aufgebautes Framework zur Farbmanipulation von Bildern. Zu diesem Zweck gibt es diverse Filter, die man so im Prinzip auch aus gängigen Bildverarbeitungen kennt: Brightness, Contrast, Saturation oder auch Farbkanalmanipulationen oder Bezier-Farbkurvenanpassung. Darüberhinaus gibt es noch Zusammenstellungen von Filtern und bestimmten Einstellungen, die sogenannten <a href="http://camanjs.com/examples/presets">Presets</a>, mit denen man auf einen Schlag einen anständigen Vintage oder Sin City Effekt erhält. Wärend wir über CamanJS reden, stellen wir uns Fragen zur <a href="http://blip.tv/file/4282255/">Canvas-Performance</a> bei bewegtem Quellmaterial</dd>
<dt><a href="http://labs.kompozer.net/timesheets/">HTML Timing</a></dt>
<dd>Bei diesem Projekt geht es darum, das altehrwürdige SMIL-Format auch im Nicht-SVG-Bereich wieder auferstehen zu lassen, um damit verschiedene Elemente einer Seite miteinander zeitlich zu synchronisieren und Ihnen einen geordneten Zeitablauf vorzugeben. Das alles steuert man deklarativ über XML-genamespacedte oder HTML5-data-Attribute, oder wahlweise über ein externes Timesheet. Damit lassen sich sehr einfach zeitgesteuerte Textslides und Bildrotationen erstellen, oder Videos untertiteln. Peter meint sich zu erinnern, dass das <a href="http://mashi.tv">Mashi Toolkit</a> und <a hreF="http://leunen.d.free.fr/fakesmile/">FakeSmile</a> ähnliches bewerkstelligen.</dd>
<dt><a href="http://www.golem.de/1103/81890.html">WebGL 1.0 ist fertig</a></dt>
<dd>Der von der Khronos-Group beigesteuerte Standard <a href="http://www.khronos.org/webgl/">WebGL</a> wurde finalisiert. WebGL nutzt die HTML5-Canvas, um darin nicht in 2D sondern in 3D herumzupinseln. WebGL ist dabei nichts anderes als OpenGL ES 2.0 mit angeflanschtem JavaScript-Befehlssatz. Wir denken, dass wir uns mit <a href="http://learningwebgl.com/blog/?page_id=1217">dessen Befehlssätzen</a> wohl eher selten herumschlagen müssen, sondern, wie im klassischen 3D-Bereich auch, wir immer mehr Autorenwerkzeuge für 3D im Web zur Hand bekommen. Zum Bespiel <a href="http://www.ambiera.com/copperlicht/index.html">CopperLicht</a> oder <a href="http://senchalabs.github.com/philogl/">PhiloGL</a>. WebGL gibt es im aktuellen Chrome, im kommenden Firefox 4, in einem <a href="http://my.opera.com/core/blog/2011/02/28/webgl-and-hardware-acceleration-2">Snapshot von Opera 11.50</a>, sowie angeblich bald auch im Safari.</dd>
<dt><a href="https://github.com/corbanbrook/webgl-2d">WebGL-2D</a></dt>
<dd>Dieses noch im Anfangsstadium befindliche Projekt stellt einen Wrapper von klassischem 2D-Canvas nach WebGL dar, sprich: es nimmt dieselben Befehle wie Canvas entgegen, setzt sie aber hintenrum in WebGL um. Der Sinn des Ganzen? Performance! WebGL-Zeichenoperationen sind zu 100% grafikkartenbeschleunigt und vor allem wenn es um Sprites und Texturen geht deutlich performanter. Eindrucksvoll demonstriert das ein Versuch von Jeff Muizelaar: <a href="http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html">Drawing Sprites: Canvas 2D vs. WebGL</a>.</dd>
<dt><a href="http://mozillalabs.com/blog/2011/03/first-developer-release-of-web-apps-project/">Mozilla OpenWebApps</a></dt>
<dd>Als letztes Thema nehmen wir uns Mozillas OpenWebApps-Spezifikation/API zur Brust. Sinn des Ganzen soll sein, Webapp-Entwicklern einen Werkzeugsatz an die Hand zu geben, mit dem sie ihre Webanwendungen mit einem Installer versehen und in einem selbstgebauten App-Store feilbieten können.</dd>
</dl>
<h3>KEINE Schaunotizen</h3>
<dl>
<dt><a href="http://dbaron.org/log/20110225-blur-radius">Blur-Radius explained</a></dt>
<dd>Wie die Browser Unschärfen wie die von <code>box-shadow</code> oder <code>text-shadow</code> berechnen.</dd>
<dt><a href="http://mbostock.github.com/d3/">D3</a></dt>
<dd>Wie jQuery, nur nicht für das HTML-Dokument, sondern für Rohdaten. Damit lassen sich diese in eine wunderschöne Form pressen und darstellen.</dd>
<dt><a href="http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good">Why Hover Menus Do Users More Harm Than Good</a></dt>
<dd>Warum Hovermenüs i.d.R. nur abnerven. Und darüber, was ein Hovertunnel ist.</dd>
<dt><a href="http://whereswalden.com/2011/02/26/the-proper-way-to-call-parseint-tldr-parseintstr-radix">Why do lints warn about using parseInt without a radix?</a></dt>
<dd>Was alles passieren kann, wenn man den zweiten Parameter, die Basiszahl bei <code>parseInt</code> weglässt. Dazu passend:</dd>
<dt><a href="http://bonsaiden.github.com/JavaScript-Garden/#intro">JavaScript Garden</a></dt>
<dd>
<blockquote><p>JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.</p></blockquote>
</dd>
<dt><a href="https://github.com/jzaefferer/undo">Undo.js</a></dt>
<dd>Ein Framework zum Ablegen und Zurückspulen von Arbeitssschritten.</dd>
</dl>


Nach ganzen vier(!) Wochen des krankheitsbedingten Ausfallens haben wir uns
endlich den Peter wieder in die Sendung zurückgeholt. Das war auch dringend
erforderlich, denn bedingt durch unsere letztwöc…

Nach ganzen vier(!) Wochen des krankheitsbedingten Ausfallens haben wir uns
endlich den Peter wieder in die Sendung zurückgeholt. Das war auch dringend
erforderlich, denn bedingt durch unsere letztwöchige Sondersendung haben sich
bei uns furchtbar viele interessante Themen angesammelt, die in Augenschein
genommen werden mussten. Die Themenflut hatte zudem zur Folge, dass wir
besonders rigoros sieben mussten. Da wir dieses Material nicht ganz unter den
Tisch fallen lassen wollten sind im Gegenzug unsere KEINE Schaunotizen sehr
umfangreich geworden. Also unbedingt mal durchscrollen!


SCHAUNOTIZEN

REQUESTANIMATIONFRAME FOR SMART ANIMATING

Der Befehl requestAnimationFrame steckt in neueren WebKits wie auch im Firefox 4
und soll in Zukunft als Animationsgerüst/-prinzip die bisherigen Krücken
setTimeout und setInterval ablösen. Warum jetzt genau „Krücken“? Weil beide eher
unkoordiniert und hysterisch Browser-Repaints erzeugen. requestAnimationFrame
hingegen arbeitet umgekehrt und gibt sozusagen „Bescheid“ wenn der Browser
wieder Luft und Lust hat, etwas zu animieren. Nur dann werden
Animationsanweisungen abgegeben und die dadurch entstehende ToDo-Liste wird an
einem koordinierten Zeitpunkt umgesetzt. Zudem hilft die Methode Strom sparen.
Soweit wir das verstanden haben, war Mozilla hier Vordenker. Wir kommen bei dem
Thema kurz auf das jquery.animate-enhanced plugin zu sprechen, obwohl es nicht
direkt etwas damit zu tun hat. Haben aber gesagt, wir verlinken es dennoch.

OPTIMIZELY: A/B TESTING YOU’LL ACTUALLY USE

Ein tolles und kinderleicht zu bedienendes Onlinewerkzeug, mit dem man im
Browser Abwandlungen seiner zu testenden Seite erstellen kann. Halt ohne große
und schmerzhafte serverseitige Eingriffe. Statt dessen erhält man einen
JavaScript-Code, den man in seine Seite einbinden muss, und von da an erhalten
Seitenbesucher reihum die verschiedenen Varianten vorgesetzt, und man selbst
kann im Optimizely-Panel die Akzeptanzraten in Echtzeit begutachten.

CAMANJS – JS IMAGE MANIPULATION

Ein supersimpel aufgebautes Framework zur Farbmanipulation von Bildern. Zu
diesem Zweck gibt es diverse Filter, die man so im Prinzip auch aus gängigen
Bildverarbeitungen kennt: Brightness, Contrast, Saturation oder auch
Farbkanalmanipulationen oder Bezier-Farbkurvenanpassung. Darüberhinaus gibt es
noch Zusammenstellungen von Filtern und bestimmten Einstellungen, die
sogenannten Presets, mit denen man auf einen Schlag einen anständigen Vintage
oder Sin City Effekt erhält. Wärend wir über CamanJS reden, stellen wir uns
Fragen zur Canvas-Performance bei bewegtem Quellmaterial

HTML TIMING

Bei diesem Projekt geht es darum, das altehrwürdige SMIL-Format auch im
Nicht-SVG-Bereich wieder auferstehen zu lassen, um damit verschiedene Elemente
einer Seite miteinander zeitlich zu synchronisieren und Ihnen einen geordneten
Zeitablauf vorzugeben. Das alles steuert man deklarativ über XML-genamespacedte
oder HTML5-data-Attribute, oder wahlweise über ein externes Timesheet. Damit
lassen sich sehr einfach zeitgesteuerte Textslides und Bildrotationen erstellen,
oder Videos untertiteln. Peter meint sich zu erinnern, dass das Mashi Toolkit
und FakeSmile ähnliches bewerkstelligen.

WEBGL 1.0 IST FERTIG

Der von der Khronos-Group beigesteuerte Standard WebGL wurde finalisiert. WebGL
nutzt die HTML5-Canvas, um darin nicht in 2D sondern in 3D herumzupinseln. WebGL
ist dabei nichts anderes als OpenGL ES 2.0 mit angeflanschtem
JavaScript-Befehlssatz. Wir denken, dass wir uns mit dessen Befehlssätzen wohl
eher selten herumschlagen müssen, sondern, wie im klassischen 3D-Bereich auch,
wir immer mehr Autorenwerkzeuge für 3D im Web zur Hand bekommen. Zum Bespiel
CopperLicht oder PhiloGL. WebGL gibt es im aktuellen Chrome, im kommenden
Firefox 4, in einem Snapshot von Opera 11.50, sowie angeblich bald auch im
Safari.

WEBGL-2D

Dieses noch im Anfangsstadium befindliche Projekt stellt einen Wrapper von
klassischem 2D-Canvas nach WebGL dar, sprich: es nimmt dieselben Befehle wie
Canvas entgegen, setzt sie aber hintenrum in WebGL um. Der Sinn des Ganzen?
Performance! WebGL-Zeichenoperationen sind zu 100% grafikkartenbeschleunigt und
vor allem wenn es um Sprites und Texturen geht deutlich performanter.
Eindrucksvoll demonstriert das ein Versuch von Jeff Muizelaar: Drawing Sprites:
Canvas 2D vs. WebGL.

MOZILLA OPENWEBAPPS

Als letztes Thema nehmen wir uns Mozillas OpenWebApps-Spezifikation/API zur
Brust. Sinn des Ganzen soll sein, Webapp-Entwicklern einen Werkzeugsatz an die
Hand zu geben, mit dem sie ihre Webanwendungen mit einem Installer versehen und
in einem selbstgebauten App-Store feilbieten können.


KEINE SCHAUNOTIZEN

BLUR-RADIUS EXPLAINED

Wie die Browser Unschärfen wie die von box-shadow oder text-shadow berechnen.

D3

Wie jQuery, nur nicht für das HTML-Dokument, sondern für Rohdaten. Damit lassen
sich diese in eine wunderschöne Form pressen und darstellen.

WHY HOVER MENUS DO USERS MORE HARM THAN GOOD

Warum Hovermenüs i.d.R. nur abnerven. Und darüber, was ein Hovertunnel ist.

WHY DO LINTS WARN ABOUT USING PARSEINT WITHOUT A RADIX?

Was alles passieren kann, wenn man den zweiten Parameter, die Basiszahl bei
parseInt weglässt. Dazu passend:

JAVASCRIPT GARDEN

> JavaScript Garden is a growing collection of documentation about the most
> quirky parts of the JavaScript programming language. It gives advice to avoid
> common mistakes, subtle bugs, as well as performance issues and bad practices
> that non-expert JavaScript programmers may encounter on their endeavours into
> the depths of the language.

UNDO.JS

Ein Framework zum Ablegen und Zurückspulen von Arbeitssschritten.

Revision 17: A/B-Test, Animationen, Canvas und WebGL

<p>Diese Revision sind wir mal vom gewohnten Kurs abgewichen und haben keine Wochenrückschau, sondern eine Schwerpunkt-Folge für Euch erstellt. Möglich gemacht hat das <a href="http://twitter.com/dm_ms">Daniel Melanchthon</a>, <a href="http://blogs.technet.com/b/dmelanchthon/">Developer Platform Evangelist bei Microsoft</a> und Fachmann unter anderem für den IE9. Vielen Dank an Daniel, der sich trotz Rückreise-Jetlag kurzfristig abends Zeit für uns genommen hat!</p>
<p>Zielrichtung unseres Gesprächs waren die Fragen: Wie denkt Microsoft in Sachen Browser so? Warum ist der IE9 so geworden wie er ist? Wie ist der weitere Entwicklungsweg geplant? Was wünscht man sich von der Webentwicklergemeinde?</p>
<h3>Schaunotizen</h3>
<dl>
<dt>Was zeichnet IE9 aus?</dt>
<dd>Wir sprechen über Geschwindigkeit durch Hardwarebeschleunigung (via Direct2D) und die neue JavaScript-Engine &#8222;Chakra&#8220;, über das verbesserte Schriftenrendering (via DirectWrite), <a href="http://msdn.microsoft.com/library/gg131029.aspx">Pinned Site</a> und <a href="http://blogs.technet.com/b/sieben/archive/2010/12/07/integration-von-internet-explorer-9-in-windows-7.aspx">Site-Mode</a> (wir erinnern uns dabei an die <a href="http://www.microsoft.com/nz/windows/internet-explorer/features/web-slices.aspx">Webslices</a> des IE8), SmartScreen-Filter/Application Reputation, die (vom W3C aufgegriffene) <a href="http://www.golem.de/1102/81690.html">Tracking Protection</a>, die viel Platz lassende Tabanordnung, die Non-Blocking UI, sowie Ähnlichkeiten in dem <a href="http://areweprettyyet.com/5/desktopApps/">GUI-Konzept von Firefox 5</a>.</dd>
<dt>Warum werden manche neue Features unterstützt, warum manche nicht?</dt>
<dd>Wir erfahren, dass es unter anderem am offiziellen Reifegrad eines Standards/Moduls liegt, ob entschieden wurde, es zu implementieren oder auch nicht. So hat Geolocation etwa den Status &#8222;Candidate Recommendation&#8220;, die meisten der von <a href="https://people.mozilla.com/~prouget/ie9/">vielen monierten</a> fehlenden Features jedoch noch &#8222;Working Draft&#8220; Status (nur &#8222;CSS3 Border Image&#8220; neuerdings nicht mehr). Oder es handelt sich erst gar nicht um einen W3C-Standard, wie bei WebGL. Desweiteren unterliegt Microsoft als Unternehmen weiteren Einflüssen aus dem Corporate-Bereich, welche gerne nach finalen und soliden Standards rufen. Daniel schafft dabei auch nochmal Klarheit hinsichtlich des Entwicklungsablaufs neuer W3C-Spezifikationen und wann die Browserhersteller <a href="http://www.w3.org/People/Bos/DesignGuide/implementability">Hilfestellung durch Implementation geben können</a>. Zu guter letzt ist es auch eine Frage interner Ressourcen und des Shippingtermins.</dd>
<dt>Was denkt Microsoft hinsichtlich der Videocodec-Problematik?</dt>
<dd>Wir reden darüber dass die Situation <a href="http://annevankesteren.nl/2010/09/h264-still-not-free">unbefriedigend</a> ist, dass Microsoft sich aber nicht in der Position sieht, hier mit einer Lösung für die Webentwickler nach vorne zu preschen. Was vor allem daran liegt, dass man keine Lust auf das rechtliche Minenfeld und die gerne gegen Microsoft geführten Klagen hat. Wir erfahren, dass der Patentpool der MPEG LA auch einer möglichen Selbstverteidigung gegen Patenttrolle dient. Und dass Google mit WebM bei weitem nicht auf einem solchen Patent-Bollwerk sitzt.</dd>
<dt>Wird es kürzere Releasezyklen geben? Was kann man tun, um die alten IEs schneller zu verdrängen?</dt>
<dd>Der Abstand zwischen Releases soll wenn möglich weiter schrumpfen. Die Situation in Sachen alter IEs hat sich mittlerweile stark verbessert und anscheinend sind Unternehmen insgesamt updatefreundlicher, wenn sie einmal den Schmerzhaften Schritt weg vom IE6 geschafft haben. Microsoft <a href="http://ie6countdown.com/">drückt die Unternehmen</a> zu diesem Schritt wie es nur kann. Webentwickler sollen auch aus Microsofts Sicht nicht mehr viel Zeit auf die alten IEs verschwenden. &#8222;Graceful Degradation&#8220;/&#8220;Progressive Enhancement&#8220; lautet hier die empfohlene Devise. Da fällt uns <a href="http://pirateslovedaisies.com/">Pirates love Daisies</a> als Beispiel ein.</dd>
<dt>Warum wird das Entwickeln für die vielen IE-Versionen nicht erleichtert?</dt>
<dd>Wir reden darüber, warum Microsoft wohl die Sandboxed-Browser von Spoon.net <a href="http://myitforum.com/cs2/blogs/rtrent/archive/2010/11/16/microsoft-asks-spoon-net-to-take-internet-explorer-off-the-cloud.aspx">verhindert</a>. Wir kritisieren die kostenlos erhältlichen <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&#038;displaylang=en">Test-Images</a>, weil sie ohne <a href="http://downloadsquad.switched.com/2007/02/26/run-windows-vista-for-120-days-without-activation-key/">ReArm</a> recht bald das Meckern anfangen. Außerdem laufen sie nicht auf was anderem als Virtual PC. <a href="http://expression.microsoft.com/en-us/dd565874.aspx">SuperPreview</a> wiederum ist leider nicht interaktiv.</dd>
<dt>Mehr Wissenvermittlung in deutschen Landen?</dt>
<dd>Microsoft plant mehr Wissensvermittlung, Unterstützung und Vorträge im deutschen Raum. Wie das im Detail aussieht, ist noch nicht spruchreif.</dd>
<dt>Engagement im W3C</dt>
<dd>Wir erfahren, dass Microsoft dem W3C nicht nur neue Testsuiten spendiert, sondern dem W3C aus den eigenen Reihen 70 Mitarbeiter abgestellt hat. Zudem reicht man auch auch neue Standardisierungvorschläge ein, wie etwa die Tracking Protection oder die <a href="http://blogs.msdn.com/b/ie/archive/2010/06/28/measuring-web-page-performance.aspx">Web Timing Specification</a>.</dd>
</dl>
<p><b>Nachtrag vom 03.03.2010:</b> Daniel Melanchthon zum selben Thema bei der <a href="http://t3n.de/news/cebit-microsoft-evangelist-daniel-melanchton-299668/">t3n im Videointerview</a> (mit ein paar mehr Infos zu der JavaScript-Engine als bei uns).</p>


Diese Revision sind wir mal vom gewohnten Kurs abgewichen und haben keine
Wochenrückschau, sondern eine Schwerpunkt-Folge für Euch erstellt. Möglich
gemacht hat das Daniel Melanchthon, Developer Platf…

Diese Revision sind wir mal vom gewohnten Kurs abgewichen und haben keine
Wochenrückschau, sondern eine Schwerpunkt-Folge für Euch erstellt. Möglich
gemacht hat das Daniel Melanchthon, Developer Platform Evangelist bei Microsoft
und Fachmann unter anderem für den IE9. Vielen Dank an Daniel, der sich trotz
Rückreise-Jetlag kurzfristig abends Zeit für uns genommen hat!

Zielrichtung unseres Gesprächs waren die Fragen: Wie denkt Microsoft in Sachen
Browser so? Warum ist der IE9 so geworden wie er ist? Wie ist der weitere
Entwicklungsweg geplant? Was wünscht man sich von der Webentwicklergemeinde?


SCHAUNOTIZEN

WAS ZEICHNET IE9 AUS?

Wir sprechen über Geschwindigkeit durch Hardwarebeschleunigung (via Direct2D)
und die neue JavaScript-Engine „Chakra“, über das verbesserte Schriftenrendering
(via DirectWrite), Pinned Site und Site-Mode (wir erinnern uns dabei an die
Webslices des IE8), SmartScreen-Filter/Application Reputation, die (vom W3C
aufgegriffene) Tracking Protection, die viel Platz lassende Tabanordnung, die
Non-Blocking UI, sowie Ähnlichkeiten in dem GUI-Konzept von Firefox 5.

WARUM WERDEN MANCHE NEUE FEATURES UNTERSTÜTZT, WARUM MANCHE NICHT?

Wir erfahren, dass es unter anderem am offiziellen Reifegrad eines
Standards/Moduls liegt, ob entschieden wurde, es zu implementieren oder auch
nicht. So hat Geolocation etwa den Status „Candidate Recommendation“, die
meisten der von vielen monierten fehlenden Features jedoch noch „Working Draft“
Status (nur „CSS3 Border Image“ neuerdings nicht mehr). Oder es handelt sich
erst gar nicht um einen W3C-Standard, wie bei WebGL. Desweiteren unterliegt
Microsoft als Unternehmen weiteren Einflüssen aus dem Corporate-Bereich, welche
gerne nach finalen und soliden Standards rufen. Daniel schafft dabei auch
nochmal Klarheit hinsichtlich des Entwicklungsablaufs neuer W3C-Spezifikationen
und wann die Browserhersteller Hilfestellung durch Implementation geben können.
Zu guter letzt ist es auch eine Frage interner Ressourcen und des
Shippingtermins.

WAS DENKT MICROSOFT HINSICHTLICH DER VIDEOCODEC-PROBLEMATIK?

Wir reden darüber dass die Situation unbefriedigend ist, dass Microsoft sich
aber nicht in der Position sieht, hier mit einer Lösung für die Webentwickler
nach vorne zu preschen. Was vor allem daran liegt, dass man keine Lust auf das
rechtliche Minenfeld und die gerne gegen Microsoft geführten Klagen hat. Wir
erfahren, dass der Patentpool der MPEG LA auch einer möglichen
Selbstverteidigung gegen Patenttrolle dient. Und dass Google mit WebM bei weitem
nicht auf einem solchen Patent-Bollwerk sitzt.

WIRD ES KÜRZERE RELEASEZYKLEN GEBEN? WAS KANN MAN TUN, UM DIE ALTEN IES
SCHNELLER ZU VERDRÄNGEN?

Der Abstand zwischen Releases soll wenn möglich weiter schrumpfen. Die Situation
in Sachen alter IEs hat sich mittlerweile stark verbessert und anscheinend sind
Unternehmen insgesamt updatefreundlicher, wenn sie einmal den Schmerzhaften
Schritt weg vom IE6 geschafft haben. Microsoft drückt die Unternehmen zu diesem
Schritt wie es nur kann. Webentwickler sollen auch aus Microsofts Sicht nicht
mehr viel Zeit auf die alten IEs verschwenden. „Graceful
Degradation“/“Progressive Enhancement“ lautet hier die empfohlene Devise. Da
fällt uns Pirates love Daisies als Beispiel ein.

WARUM WIRD DAS ENTWICKELN FÜR DIE VIELEN IE-VERSIONEN NICHT ERLEICHTERT?

Wir reden darüber, warum Microsoft wohl die Sandboxed-Browser von Spoon.net
verhindert. Wir kritisieren die kostenlos erhältlichen Test-Images, weil sie
ohne ReArm recht bald das Meckern anfangen. Außerdem laufen sie nicht auf was
anderem als Virtual PC. SuperPreview wiederum ist leider nicht interaktiv.

MEHR WISSENVERMITTLUNG IN DEUTSCHEN LANDEN?

Microsoft plant mehr Wissensvermittlung, Unterstützung und Vorträge im deutschen
Raum. Wie das im Detail aussieht, ist noch nicht spruchreif.

ENGAGEMENT IM W3C

Wir erfahren, dass Microsoft dem W3C nicht nur neue Testsuiten spendiert,
sondern dem W3C aus den eigenen Reihen 70 Mitarbeiter abgestellt hat. Zudem
reicht man auch auch neue Standardisierungvorschläge ein, wie etwa die Tracking
Protection oder die Web Timing Specification.

Nachtrag vom 03.03.2010: Daniel Melanchthon zum selben Thema bei der t3n im
Videointerview (mit ein paar mehr Infos zu der JavaScript-Engine als bei uns).

Revision 16: Interview mit Microsoft

<p>Nachdem Peter immer noch hustengeplagt und Markus anderweitig absent war, freute sich Schepp über bewährte Verstärkung seitens <a href="http://www.mademyday.de/">Marc Hinses</a> alias <a href="http://twitter.com/mademyday">@mademyday</a> (Notiz an uns selbst: Wir sollten Marc bald mal in der Liste unserer festen Moderatoren verankern&#8230;).</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://people.mozilla.com/~prouget/ie9/">Is IE9 a modern browser?</a></dt>
<dd>fragt Paul Rouget von Mozilla und antwortet sodann mit NO. Ihm reicht die unterstützte Menge HTML5-Technologien seitens des Redmonder Browsers nicht. Außerdem fuchst ihn, dass Microsoft mit <a href="http://blogs.msdn.com/b/ie/archive/2011/02/10/acting-on-feedback-ie9-release-candidate-available-for-download.aspx">Statistiken hausieren geht</a>, die sie selbst gefälscht haben. Tim Sneath von Microsoft <a href="http://blogs.msdn.com/b/tims/archive/2011/02/15/a-modern-browser.aspx">antwortet ihm</a>: Ein moderner Browser ist schnell und integriert Standards erst wenn sie fertig sind.</dd>
<dt><a href="http://infrequently.org/2011/02/on-performance-innumeracy-false-positives/">Performance Innumeracy &#038; False Positives</a></dt>
<dd>Alex Russel aus dem Chrome Frame Team stellt zur Debatte, ob der moderne und hochangesehene Ansatz des Featuretestings nicht vielleicht zu viel Leistung kostet, und ob man nicht in bestimmten Fällen doch auf das böse, böse, böse und verpönte (und böse) Useragent-Sniffing zusammen mit einer Feature-Whitelist/-Blacklist gehen kann. Damit löst er einen guttenbergesken Shitstorm aus. Dass er (und viele WPO-Granden) falsch liegen, zeigt John-David Dalton <a href="http://allyoucanleet.com/2011/02/05/the-cost-of-feature-testing/">mit drei Screencasts aus der Praxis</a>.</dd>
<dt><a href="http://www.css-101.org/descendant-selector/go_fetch_yourself.php">Use efficient CSS selectors</a></dt>
<dd>greift sehr humorvoll das Thema Renderleistungseinbruch durch falsches zusammensetzen von Selektoren auf. Den Augenschmerzen beim Betrachten zum Trotz stellten wir fest, dass die Unterschiede doch vergleichsweise gering <a href="http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/">zu sein scheinen</a>. Wer jedoch gerne viel in jQuery und Konsorten selektiert, der sollte vielleicht nicht <a href="http://ontwik.com/javascript/jquery-performance-tips-and-tricks-with-addy-osmani/">ganz so rumschlampen oder klügere Wege wählen</a>.</dd>
<dt><a href="http://nicolasgallagher.com/css-drop-shadows-without-images/demo/">CSS drop-shadows without images</a></dt>
<dd>Verschiedene Ausprägungen von CSS-Schatten hat Nicolas Gallagher auf seiner Seite versammelt. Das Besondere dabei: Anstatt mit zusätzlichen Hilfselementen im HTML zu arbeiten, feiert er alles über die CSS-generierten Pseudoelemente <code>:before</code> und <code>:after</code>, CSS Transforms und Box-Shadow ab. Überhaupt ist er ein ganz großer Fan von Pseudoelementen. Auf seiner Seite gibt es viel Interessantes zu entdecken. Schön war damals unter anderem auch sein Artikel <a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/">Multiple Backgrounds and Borders with CSS 2.1</a></dd>
<dt><a href="http://www.webdesignerdepot.com/2011/02/the-8020-rule-applied-to-web-design/">The 80/20 Rule Applied to Web Design</a></dt>
<dd>Eine gar nicht so neue Regel aus der Betriebswirtschaft, das <a href="http://de.wikipedia.org/wiki/Paretoprinzip">Pareto-Prinzip</a> besagt, dass 80% der Ergebnisse in 20% der Gesamtzeit eines Projekts erreicht werden, und dass die verbleibenden 20% der Ergebnisse die meiste Arbeit machen. Diese Regel kann man eigentlich auch überall im Web Design wiederfinden. Die Autoren empfehlen daher: Die wichtigen 20% identifizieren und erstmal alle Bemühugen dort hineinstecken als sich zu verzetteln.</dd>
<dt><a href="http://hardwrk.com/macbook-ssd-hdd-adapter-kit.html">HARDWRK SSD HDD Adapter Kit für MacBook Pro</a></dt>
<dd>Tatsächlich, wir reden über Hardware! Muss auch mal sein. Wir hängen ja schließlich alle an ihrem Tropf. HARDWRK ist ein Überraschungscoup des T3N-Teams und zwar ist es ein Einbaukit (Material + Werkzeug), mit dem man den internen DVD-Brenner seines MacBooks gegen eine weitere Festplatte oder eine SSD austauschen kann. Der entmannte Brenner wandern dann in ein externes Gehäuse. Wir empfehlen zu einer SSD zu greifen. Davon kommen zur CeBIT ein <a href="http://www.anandtech.com/show/4159/ocz-vertex-3-pro-preview-the-first-sf2500-ssd/4">paar</a> <a href="http://www.golem.de/showhigh2.php?file=/1102/81523.html">sehr schnelle</a> raus (die allerdings durch die SATA-300-Schnittstelle des MacBooks ausgebremst werden könnten).</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://paulirish.com/2011/surefire-dom-element-insertion/">Surefire DOM Element insertion</a></dt>
<dd>Die bulletproofste™ Methode, DOM-Elemente in sein Dokument zu schießen.</dd>
</dl>


Nachdem Peter immer noch hustengeplagt und Markus anderweitig absent war, freute
sich Schepp über bewährte Verstärkung seitens Marc Hinses alias @mademyday
(Notiz an uns selbst: Wir sollten Marc bald …

Nachdem Peter immer noch hustengeplagt und Markus anderweitig absent war, freute
sich Schepp über bewährte Verstärkung seitens Marc Hinses alias @mademyday
(Notiz an uns selbst: Wir sollten Marc bald mal in der Liste unserer festen
Moderatoren verankern…).


SCHAUNOTIZEN

IS IE9 A MODERN BROWSER?

fragt Paul Rouget von Mozilla und antwortet sodann mit NO. Ihm reicht die
unterstützte Menge HTML5-Technologien seitens des Redmonder Browsers nicht.
Außerdem fuchst ihn, dass Microsoft mit Statistiken hausieren geht, die sie
selbst gefälscht haben. Tim Sneath von Microsoft antwortet ihm: Ein moderner
Browser ist schnell und integriert Standards erst wenn sie fertig sind.

PERFORMANCE INNUMERACY & FALSE POSITIVES

Alex Russel aus dem Chrome Frame Team stellt zur Debatte, ob der moderne und
hochangesehene Ansatz des Featuretestings nicht vielleicht zu viel Leistung
kostet, und ob man nicht in bestimmten Fällen doch auf das böse, böse, böse und
verpönte (und böse) Useragent-Sniffing zusammen mit einer
Feature-Whitelist/-Blacklist gehen kann. Damit löst er einen guttenbergesken
Shitstorm aus. Dass er (und viele WPO-Granden) falsch liegen, zeigt John-David
Dalton mit drei Screencasts aus der Praxis.

USE EFFICIENT CSS SELECTORS

greift sehr humorvoll das Thema Renderleistungseinbruch durch falsches
zusammensetzen von Selektoren auf. Den Augenschmerzen beim Betrachten zum Trotz
stellten wir fest, dass die Unterschiede doch vergleichsweise gering zu sein
scheinen. Wer jedoch gerne viel in jQuery und Konsorten selektiert, der sollte
vielleicht nicht ganz so rumschlampen oder klügere Wege wählen.

CSS DROP-SHADOWS WITHOUT IMAGES

Verschiedene Ausprägungen von CSS-Schatten hat Nicolas Gallagher auf seiner
Seite versammelt. Das Besondere dabei: Anstatt mit zusätzlichen Hilfselementen
im HTML zu arbeiten, feiert er alles über die CSS-generierten Pseudoelemente
:before und :after, CSS Transforms und Box-Shadow ab. Überhaupt ist er ein ganz
großer Fan von Pseudoelementen. Auf seiner Seite gibt es viel Interessantes zu
entdecken. Schön war damals unter anderem auch sein Artikel Multiple Backgrounds
and Borders with CSS 2.1

THE 80/20 RULE APPLIED TO WEB DESIGN

Eine gar nicht so neue Regel aus der Betriebswirtschaft, das Pareto-Prinzip
besagt, dass 80% der Ergebnisse in 20% der Gesamtzeit eines Projekts erreicht
werden, und dass die verbleibenden 20% der Ergebnisse die meiste Arbeit machen.
Diese Regel kann man eigentlich auch überall im Web Design wiederfinden. Die
Autoren empfehlen daher: Die wichtigen 20% identifizieren und erstmal alle
Bemühugen dort hineinstecken als sich zu verzetteln.

HARDWRK SSD HDD ADAPTER KIT FÜR MACBOOK PRO

Tatsächlich, wir reden über Hardware! Muss auch mal sein. Wir hängen ja
schließlich alle an ihrem Tropf. HARDWRK ist ein Überraschungscoup des T3N-Teams
und zwar ist es ein Einbaukit (Material + Werkzeug), mit dem man den internen
DVD-Brenner seines MacBooks gegen eine weitere Festplatte oder eine SSD
austauschen kann. Der entmannte Brenner wandern dann in ein externes Gehäuse.
Wir empfehlen zu einer SSD zu greifen. Davon kommen zur CeBIT ein paar sehr
schnelle raus (die allerdings durch die SATA-300-Schnittstelle des MacBooks
ausgebremst werden könnten).


KEINE SCHAUNOTIZEN

SUREFIRE DOM ELEMENT INSERTION

Die bulletproofste™ Methode, DOM-Elemente in sein Dokument zu schießen.

Revision 15: IE9 unmodern? Teure Featuredetection? Pareto-Prinzip?

<p>Die große Seuche grassierte wieder. Peter strich die Segel und Schepp griff schon nach der weißen Flagge. Eine Viertel Stunde vor offiziellem Aufnahmetermin holten wir uns dann als Verstärkung wieder <a href="http://twitter.com/mademyday">Marc Hinse</a> ins Boot. Vielen Dank nochmals dafür!</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs">Breaking the Web with hash-bangs</a></dt>
<dd><a href="http://code.google.com/web/ajaxcrawling/docs/getting-started.html">Google</a> sieht das Hashbang als Flickzeug für den Übergang zu <a href="http://html5demos.com/history">eleganteren Lösungen</a> im ajaxifizierten Web. Twitter hat <a href="http://www.adequatelygood.com/2011/2/Thoughts-on-the-Hashbang">angeblich</a> schon eine Version von #newtwitter, welche die History API nutzt. Wer nun allerdings das Hash-Bang nutzt, der muss auch wissen, was er tut. Und das wissen nicht alle. Wissen wir&#8217;s?</dd>
<dt><a href="http://blogs.technet.com/b/dmelanchthon/archive/2011/02/02/windows-7-die-nummer-1-in-deutschland.aspx">Windows 7 die Nummer 1 in Deutschland</a></dt>
<dd>Windows 7 überholt XP, welches eine schöne Abwärtskurve aufweist. Sind die Tage von IE6 und IE7 also gezählt?</dd>
<dt><a href="http://www.iecss.com/spoon/">Sandboxed IE Browsers from Spoon</a></dt>
<dd>Kurz da und dann schnell wieder weg. Wir bereden die <a href="http://blog.dotsmart.net/2009/06/24/using-windows-7s-xp-mode-to-run-ie-6-and-ie-7-side-by-side">verschiedenen</a> <a href="http://utilu.com/IECollection/">Möglichkeiten</a>, <a href="http://www.my-debugbar.com/wiki/IETester/HomePage">eine</a> <a href="https://www.microsoft.com/downloads/en/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&#038;displaylang=en">IE-Testumgebung</a> <a href="http://www.vmware.com/de/products/fusion/">zu</a> <a href="http://www.parallels.com/de/products/desktop/">bauen</a>.</dd>
<dt><a href="https://code.google.com/p/phantomjs/">PhantomJS</a></dt>
<dd>Eine skriptbare Webkit-Engine, etwa um Website-Screenshots zu schießen, oder PDFs aus HTML zu erzeugen, oder um Daten per DOM-Selektoren aus Seiten in Textdateien zu extrahieren.</dd>
<dt><a href="http://www.blaze.io/mobile/">Blaze.io: Test Your Website Performance On A Mobile Device</a></dt>
<dd>Schickes Tool, um Websites in Sachen Ladezeiten auf ihre Mobiltauglichkeit zu checken. Mit Wasserfall und Videoaufzeichnung des Ladevorgangs.</dd>
<dt><a href="http://manu.sporny.org/2011/public-domain-genome/">Open Sourcing My Genetic Data</a></dt>
<dd>Genome bei Github. Ein entsprechendes soziales Netzwerk wird von mir, Markus, bald nachgereicht.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://easeljs.com/">EaselJS</a></dt>
<dd>A javascript library for working with the HTML5 canvas element</dd>
<dt><a href="http://blogs.msdn.com/b/ie/archive/2011/02/14/ie9-on-windows-phone.aspx">IE9 on Windows Phone 7</a></dt>
<dd>Der Neuner wird auch auf WP7 kommen und löst damit den altertümlichen IE7.5er ab.</dd>
</dl>


Die große Seuche grassierte wieder. Peter strich die Segel und Schepp griff
schon nach der weißen Flagge. Eine Viertel Stunde vor offiziellem Aufnahmetermin
holten wir uns dann als Verstärkung wieder …

Die große Seuche grassierte wieder. Peter strich die Segel und Schepp griff
schon nach der weißen Flagge. Eine Viertel Stunde vor offiziellem Aufnahmetermin
holten wir uns dann als Verstärkung wieder Marc Hinse ins Boot. Vielen Dank
nochmals dafür!


SCHAUNOTIZEN

BREAKING THE WEB WITH HASH-BANGS

Google sieht das Hashbang als Flickzeug für den Übergang zu eleganteren Lösungen
im ajaxifizierten Web. Twitter hat angeblich schon eine Version von #newtwitter,
welche die History API nutzt. Wer nun allerdings das Hash-Bang nutzt, der muss
auch wissen, was er tut. Und das wissen nicht alle. Wissen wir’s?

WINDOWS 7 DIE NUMMER 1 IN DEUTSCHLAND

Windows 7 überholt XP, welches eine schöne Abwärtskurve aufweist. Sind die Tage
von IE6 und IE7 also gezählt?

SANDBOXED IE BROWSERS FROM SPOON

Kurz da und dann schnell wieder weg. Wir bereden die verschiedenen
Möglichkeiten, eine IE-Testumgebung zu bauen.

PHANTOMJS

Eine skriptbare Webkit-Engine, etwa um Website-Screenshots zu schießen, oder
PDFs aus HTML zu erzeugen, oder um Daten per DOM-Selektoren aus Seiten in
Textdateien zu extrahieren.

BLAZE.IO: TEST YOUR WEBSITE PERFORMANCE ON A MOBILE DEVICE

Schickes Tool, um Websites in Sachen Ladezeiten auf ihre Mobiltauglichkeit zu
checken. Mit Wasserfall und Videoaufzeichnung des Ladevorgangs.

OPEN SOURCING MY GENETIC DATA

Genome bei Github. Ein entsprechendes soziales Netzwerk wird von mir, Markus,
bald nachgereicht.


KEINE SCHAUNOTIZEN

EASELJS

A javascript library for working with the HTML5 canvas element

IE9 ON WINDOWS PHONE 7

Der Neuner wird auch auf WP7 kommen und löst damit den altertümlichen IE7.5er
ab.

Revision 14: Hashbangs, PhantomJS und Github-Gene

<p>Endlich haben wir es geschafft, eine Sprechprobe <a href="http://twitter.com/mademyday">Marc Hinses</a> auf digitales Vinyl zu pressen. Und die Soundqualität ist auch gar nicht mal komplett scheiße.</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://www.mademyday.de/screen-presenter-screendesgins-praesentieren.html">Marcs Screen Presenter</a></dt>
<dd>Screendesigns angemessen dem Kunden präsentieren.</dd>
<dt><a href="https://mozillalabs.com/blog/2011/02/prism-is-now-chromeless/">Prism is now Chromeless</a></dt>
<dd>Das Prism-Projekt wird abgeschaltet. Stattdessen soll mit Chromeless ein anderer Ansatz gefahren werden, der zum Beispiel mit <a href="http://www.phonegap.com/">Phone GAP</a> vergleichbar ist.</dd>
<dt><a href="http://dev.w3.org/2006/webapi/clipops/clipops.html">Clipboard API Editor’s Draft</a></dt>
<dd>Schnittstelle für den Umgang mit der Zwischenablage. Zum Verstehen der Funktionsweise hilft es, sich die <a href="http://dev.w3.org/html5/spec-author-view/dnd.html">Drag&#038;Drop-API</a> zu Gemüte zu führen.</dd>
<dt><a href="http://lists.w3.org/Archives/Public/public-xg-audio/2011Feb/0000.html">Web Audio API in Chrome und Firefox 4</a></dt>
<dd>Rohdaten aus einem HTML5-Audio lesen und schreiben. Möglich wird damit alles, was man sich vorstellen kann. Es hat auch schon jemand <a href="https://github.com/jussi-kalliokoski/audiolib.js">ein paar Filter</a> zusammengekloppt.</dd>
<dt><a href="https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information">Abusing HTTP Status Codes to Expose Private Information</a></dt>
<dd>Einfach prüfen, ob für den Benutzer Inhalte verfügbar sind, die man nur mit Login erreichen sollte. <a href="http://didyouwatchporn.com/">DidYouWatchPorn.com</a> schlägt in eine vergleichbare Kerbe.</dd>
<dt><a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">The New Bulletproof @Font-Face Syntax</a></dt>
<dd>Eine neue Methode, um den Internetz Explodierer bei @font-face vor’m Explodieren zu bewahren.</dd>
<dt><a href="http://firecss.com/">firecss.com</a></dt>
<dd>Live-CSS-Firebugging across the universe.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://peter.sh/2011/02/chrome-11-a-renewed-xss-filter-and-vertical-text-for-multiple-column-layouts/">Chrome 11, a renewed XSS Filter and vertical text for multiple-column layouts</a></dt>
<dd>Unspektakuläre Neuerungen.</dd>
<dt><a href="http://jsfiddle.net/leaverou/yxjgC/">Farbwert in Opera und dem IE9: invert</a></dt>
<dd>Wie der Name schon sagt, invertiert der Wert einfach die Farben des Hintergrunds.</dd>
<dt><a href="http://popcornjs.org/">popcorn.js</a></dt>
<dd>Framework für HTML5-Video. Beispielhafter Anwendungsfall: Zeitgesteuerte Annotations.</dd>
</dl>


Endlich haben wir es geschafft, eine Sprechprobe Marc Hinses auf digitales Vinyl
zu pressen. Und die Soundqualität ist auch gar nicht mal komplett scheiße.


SCHAUNOTIZEN

MARCS SCREEN PRESENTER

Scre…

Endlich haben wir es geschafft, eine Sprechprobe Marc Hinses auf digitales Vinyl
zu pressen. Und die Soundqualität ist auch gar nicht mal komplett scheiße.


SCHAUNOTIZEN

MARCS SCREEN PRESENTER

Screendesigns angemessen dem Kunden präsentieren.

PRISM IS NOW CHROMELESS

Das Prism-Projekt wird abgeschaltet. Stattdessen soll mit Chromeless ein anderer
Ansatz gefahren werden, der zum Beispiel mit Phone GAP vergleichbar ist.

CLIPBOARD API EDITOR’S DRAFT

Schnittstelle für den Umgang mit der Zwischenablage. Zum Verstehen der
Funktionsweise hilft es, sich die Drag&Drop-API zu Gemüte zu führen.

WEB AUDIO API IN CHROME UND FIREFOX 4

Rohdaten aus einem HTML5-Audio lesen und schreiben. Möglich wird damit alles,
was man sich vorstellen kann. Es hat auch schon jemand ein paar Filter
zusammengekloppt.

ABUSING HTTP STATUS CODES TO EXPOSE PRIVATE INFORMATION

Einfach prüfen, ob für den Benutzer Inhalte verfügbar sind, die man nur mit
Login erreichen sollte. DidYouWatchPorn.com schlägt in eine vergleichbare Kerbe.

THE NEW BULLETPROOF @FONT-FACE SYNTAX

Eine neue Methode, um den Internetz Explodierer bei @font-face vor’m Explodieren
zu bewahren.

FIRECSS.COM

Live-CSS-Firebugging across the universe.


KEINE SCHAUNOTIZEN

CHROME 11, A RENEWED XSS FILTER AND VERTICAL TEXT FOR MULTIPLE-COLUMN LAYOUTS

Unspektakuläre Neuerungen.

FARBWERT IN OPERA UND DEM IE9: INVERT

Wie der Name schon sagt, invertiert der Wert einfach die Farben des
Hintergrunds.

POPCORN.JS

Framework für HTML5-Video. Beispielhafter Anwendungsfall: Zeitgesteuerte
Annotations.

Revision 13: Screen Presenter, Chromeless und Clipboard API

<p>Ausgabe Nummer zwölf mit einem neuen Gast, nämlich <a href="https://www.xing.com/profile/Tobias_Oberrauch">Tobias Oberrauch</a> aus Karlsruhe, und spitzen Soundqualität. Yeah!</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="https://www.opensourcepress.de/index.php?26&#038;backPID=178&#038;tt_products=318">Peters HTML5-Buch</a></p>
<dd>… geht in die zweite Runde. Mit 150 Seiten und 4 Kapiteln mehr als in der ersten Auflage. Neu dabei: Web Workers, File API, HTML5-Featuredetection nebst Polyfills, und Firefox 4 sowie Internet Explorer 9.</p>
<dt><a href="http://meyerweb.com/eric/tools/css/reset/index.html">Eric Meyers CSS Reset 2.0</a></p>
<dd>Wir diskutieren über den Sinn von Resets und Starterpacks à la <a href="http://html5boilerplate.com/">Boilerplate</a> oder <a href="http://praegnanz.de/weblog/htmlcssjs-kickstart">Gerrits Kickstart</a>.</p>
<dt><a href="http://nimbupani.com/current-color-in-css.html">CSS-Farbwert <code>currentcolor</code></a></p>
<dd>Nicht vollkommen neu, weil <code>&lt;ul&gt;</code>&#8211; und <code>&lt;hr&gt;</code>-Elemente sowie die <code>border</code>-Eigenschaft es längst anwenden, aber <a href="http://www.impressivewebs.com/css-color-property/">neu entdeckt</a>. Eine Farbeigenschaft, der man die Farbe &#8222;currentcolor&#8220; zuweist, übernimmt automatisch die Farbe der color-Eigenschaft. Etwa so: <code>.element{color:red;background-color:currentcolor;}</code>.</p>
<dt><a href="http://www.w3.org/TR/css3-values/#relative0">CSS3-Einheit für Schriften: <code>rem</code></a></p>
<dd>Die Einheit bezieht sich immer auf die Schriftgröße des Root-Elements (sprich des <code>&lt;html&gt;</code>-Elements), anstatt auf die des direkten Mutterelements. Das macht das Erstellen von flexiblen Layouts deutlich leichter. Wird von allen modernen <a href="https://developer.mozilla.org/en/CSS/length#Browser_compatibility">Browsern unterstützt</a>. Wir nehmen die Entdeckung als Anlass, über den <a href="http://praegnanz.de/weblog/warum-ich-pixel-fuer-css-schriftgrade-verwende ">Sinn relativer Schriftgrade</a> zu diskutieren.</p>
<dt><a href="http://limi.net/articles/firefox-acid3">Firefox 4 will den Acid3-Test gar nicht bestehen</a></p>
<dd>Die fehlenden 3 Punkte sind SVG-Fonts und die sind sowieso blöd. Und nicht mehr Teil des SVG-Kerns, weil sie so blöd sind. Und wir reden über Fontrendering, und zwar viel zu viel. Um davon abzulenken, stiften wir Verwirrung und rühren <a href="http://en.wikipedia.org/wiki/Kerning">Kerning</a>, <a href="http://en.wikipedia.org/wiki/Font_hinting">Hinting</a> und Subpixel-Rendering gut durch.</p>
<dt><a href="http://babelfish.yahoo.com/translate_url?doit=done&#038;tt=url&#038;intl=1&#038;fr=bf-home&#038;trurl=http://winreview.ru/Brauzeri/928/Internet-Explorer-90080736010-WIN7-IE9-Partner110113-2300-&#038;lp=ru_en&#038;btnTrUrl=Translate">IE9 RC1</a></p>
<dd>Geleakter <a href="http://www.winsupersite.com/article/windows-7/Internet-Explorer-9-Release-Candidate-Preview.aspx">Release Candidate</a> des Internet Explorer 9. Möglicherweise mit Geolocation API. Auf jeden Fall aber mit deutlich mehr Gummipunkten bei <a href="http://www.html5test.com">html5test.com</a>.</p>
<dt><a href="http://brendaneich.com/2011/01/harmony-of-my-dreams/">Brendan Eich über seine Wunsch-Zukunft für JavaScript</a></p>
<dd>Nur für Fans, wie mein Physiklehrer immer sagte. Gibt’s auch als <a href="http://www.aminutewithbrendan.com/pages/20110131">knappes Audio</a>. Auch interessant: <a href="http://www.youtube.com/watch?v=A1R8KGKkDjU">Harmony</a> <a href="http://jsconf.eu/2010/speaker/be_proxy_objects.html">Proxies</a>
</dl>
<h3>KEINE Schaunotizen</h3>
<dl>
<dt><a href="http://developer.android.com/sdk/android-3.0-highlights.html">Android 3.0 Platform Highlights</a></p>
<dd>Der enthaltene Android Browser wartet mit SVG, HTTP-Streaming, Multicore-Unterstützung und Hardware-Grafikrendering auf. Fein! Mehr dazu von unserer Seite, wenn Honeycomb final ist.</p>
<dt><a href="http://cocos2d-javascript.org/about">Cocos2-javascript</a></p>
<dd>Ein weiterer Gamebaukasten auf HTML5 und JavaScript-Basis.</a>
</dl>


Ausgabe Nummer zwölf mit einem neuen Gast, nämlich Tobias Oberrauch aus
Karlsruhe, und spitzen Soundqualität. Yeah!


SCHAUNOTIZEN

PETERS HTML5-BUCH



… geht in die zweite Runde. Mit 150 Seiten und …

Ausgabe Nummer zwölf mit einem neuen Gast, nämlich Tobias Oberrauch aus
Karlsruhe, und spitzen Soundqualität. Yeah!


SCHAUNOTIZEN

PETERS HTML5-BUCH



… geht in die zweite Runde. Mit 150 Seiten und 4 Kapiteln mehr als in der ersten
Auflage. Neu dabei: Web Workers, File API, HTML5-Featuredetection nebst
Polyfills, und Firefox 4 sowie Internet Explorer 9.



ERIC MEYERS CSS RESET 2.0



Wir diskutieren über den Sinn von Resets und Starterpacks à la Boilerplate oder
Gerrits Kickstart.



CSS-FARBWERT CURRENTCOLOR



Nicht vollkommen neu, weil <ul>– und <hr>-Elemente sowie die border-Eigenschaft
es längst anwenden, aber neu entdeckt. Eine Farbeigenschaft, der man die Farbe
„currentcolor“ zuweist, übernimmt automatisch die Farbe der color-Eigenschaft.
Etwa so: .element{color:red;background-color:currentcolor;}.



CSS3-EINHEIT FÜR SCHRIFTEN: REM



Die Einheit bezieht sich immer auf die Schriftgröße des Root-Elements (sprich
des <html>-Elements), anstatt auf die des direkten Mutterelements. Das macht das
Erstellen von flexiblen Layouts deutlich leichter. Wird von allen modernen
Browsern unterstützt. Wir nehmen die Entdeckung als Anlass, über den Sinn
relativer Schriftgrade zu diskutieren.



FIREFOX 4 WILL DEN ACID3-TEST GAR NICHT BESTEHEN



Die fehlenden 3 Punkte sind SVG-Fonts und die sind sowieso blöd. Und nicht mehr
Teil des SVG-Kerns, weil sie so blöd sind. Und wir reden über Fontrendering, und
zwar viel zu viel. Um davon abzulenken, stiften wir Verwirrung und rühren
Kerning, Hinting und Subpixel-Rendering gut durch.



IE9 RC1



Geleakter Release Candidate des Internet Explorer 9. Möglicherweise mit
Geolocation API. Auf jeden Fall aber mit deutlich mehr Gummipunkten bei
html5test.com.



BRENDAN EICH ÜBER SEINE WUNSCH-ZUKUNFT FÜR JAVASCRIPT



Nur für Fans, wie mein Physiklehrer immer sagte. Gibt’s auch als knappes Audio.
Auch interessant: Harmony Proxies


KEINE SCHAUNOTIZEN

ANDROID 3.0 PLATFORM HIGHLIGHTS



Der enthaltene Android Browser wartet mit SVG, HTTP-Streaming,
Multicore-Unterstützung und Hardware-Grafikrendering auf. Fein! Mehr dazu von
unserer Seite, wenn Honeycomb final ist.



COCOS2-JAVASCRIPT



Ein weiterer Gamebaukasten auf HTML5 und JavaScript-Basis.

Revision 12: CSS-Reset, IE9 RC1 und Harmony

<p>Bei unserer Tonqualität ist es wie beim Google Linkjuice: Zählt man alle Beteiligten zusammen, kommt immer die Zahl 1 heraus. Während Markus nun also THX-Ultra-zertifiziert ist, zerbröselten unserem Gast <a href="http://twitter.com/nicobruenjes">Nico Brünjes</a>, <a href="http://codecandies.de">Frontendentwickler</a> bei <a href="http://www.zeit.de">ZEIT ONLINE</a>, reihenweise die Headsets unter den Fingern weg :( </p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://www.w3.org/html/logo/">W3C HTML5 Logo!</a></p>
</dt>
<dd>Das ansonsten eher langweilige W3C überrascht mit einer Art Promotion-Aktion: Auf einer sehr schicken, modernen Seite präsentiert es ein Logo, das vielleicht von Superhelden, vielleicht von einem 3D-Würfel inspiriert ist. Dazu gibt es einen HTML5-Gummipunkt-Generator und ein T-Shirt. Wir finden&#8217;s gut und Nico hat sich direkt das T-Shirt bestellt.</p>
</dd>
<dt><a href="http://blog.whatwg.org/html-is-the-new-html5">HTML is the new HTML5</a></p>
</dt>
<dd>Die WHATWG denkt die korrekte Namensgebung der <i>HTML-Version-nach-HTML-4.01</i>, formerly known as <i>HTML 5</i>, formerly known as <i>HTML5</i>, konsequent zu Ende und stellt fest: Die HTML-Spezifikation ist permanent im Fluss und macht keinen Halt bei Versionnummern, also weg mit der 5! Ab jetzt heisst die Spezifikation selbst nur noch <i>HTML</i>. Und <i>HTML5</i> möge neuerdings ein Schlagwort für diejenige Generation Webanwendungen sein, die allem <i>Web-Zwo-Nulligen</i> nachfolgt. JavaScript und CSS als Techniken inklusive. </p>
</dd>
<dt><a href="http://simonstl.com/articles/cssFragID.html">Using CSS Selectors as Fragment Identifiers</a></p>
</dt>
<dd>Der altehrwürdige Eric Meyer und Simon St.Laurent von O&#8217;Reilly Media haben einen inoffiziellen Draft online gestellt, in dem sie eine neue Sprungmarker (Fragment) Syntax im CSS-Selektor-Stil vorschlagen. So soll man beispielsweise mit folgender URL direkt zu dem zweiten Absatz einer Seite springen können: <code>http://example.com/lorem.html#css(p:nth-child(2))</code>.</p>
</dd>
<dt><a href="http://ejohn.org/blog/learning-from-twitter/">Learning from Twitter</a></p>
</dt>
<dd>Dass man selbst mit jQuery noch großen Bockmist bauen kann, haben letzte Woche die Twitter-Programmierer bewiesen. Dumm war, dass sie <a href="http://www.dustindiaz.com/about-that-slowness-on-twitter/">behauptet hatten</a>, es läge an der neuen jQuery-Version dass Twitter neuerdings so langsam geworden war. Das hat John Resig dazu animiert, sich deren Code genauer anzuschauen, und er hat dabei Grauenhaftes zu Tage gefördert.</p>
</dd>
<dt><a href="http://codecandies.de/2011/01/20/hinter-dem-mobilen-proxy/">Hinter dem mobilen Proxy</a></p>
</dt>
<dd>Unser Gast Nico Brünjes schrieb letzte Woche über eine sehr unangenehme Entdeckung, die er und sein Team von ZEIT ONLINE machten: Die mobilen Zugangsprovider manipulieren das HTML, JavaScript und CSS nach gutdünken um, und vor allem stillschweigend. Das geht dummerweise ganz und gar nicht zerstörungsfrei vonstatten.</p>
</dd>
<dt><a href="http://www.golem.de/1101/80917.html">Mozilla plant Do-not-track-HTTP-Header</a></p>
</dt>
<dd>Mozilla und Microsoft planen, den Browser mit einer zusätzlichen Header auszustatten, dem <code>X-Tracking-Choice: do-not-track</code>. Dieser soll immer dann gesendet werden, wenn der Benutzer von Inhalteanbietern nicht getrackt werden will. Das Ganze setzt allerdings voraus, dass die Gegenseite diesen Header auswertet und respektiert. Beim Diskutieren darüber kommt uns die <a href="https://www.robinsonliste.de/">Robinson Liste</a> in den Sinn. Google will es in Chrome hingegen via <a href="https://chrome.google.com/extensions/detail/hhnjdplhmcnkiecampfdgfjilccfpfoe">Browsererweiterung</a> lösen.</dd>
</dd>
<dt><a href="https://twitter.com/#!/IPv4Countdown">ARPAgeddon (IPv4 Countdown)</a></p>
</dt>
<dd>Unser Vorrat an IPv4-Adressen geht nun wirklich zur Neige. Knapp über 30 Millionen Adressen sind noch frei, 4,3 Milliarden sind in Gebrauch. Laut ARPAgeddon hält der verbliebene Vorrat noch für etwa eine Woche. Es wird also höchste Zeit, breitflächig auf IPv6 mit seinen <a href="http://de.wikipedia.org/wiki/IP-Adresse">665 Billiarden möglichen IP-Adressen</a> umzusteigen &#8211; auch wenn es vielleicht weh tun wird.</dd>
</dl>
<h3>KEINE Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/mishoo/UglifyJS/">UglifyJS</a></p>
</dt>
<dd>Neuer JavaScript-Minifizierer und -Beautifier (Gegenteil von ersterem), der auf node.js läuft und dadurch doppelt bis fünf mal so schnell arbeitet wie der YUI Compressor oder Googles Closure. Kommt im Gegensatz zu letzterem auch mit <code>eval()</code> und (dem bösen) <code>with{}</code> klar, und verfügt über eine Google Closure kompatible <a href="http://marijnhaverbeke.nl/uglifyjs">HTTP-API</a>. Steckt auch im kommenden <a href="http://trac.webkit.org/changeset/76132">WebKit Webinspector</a></dd>
</dl>


Bei unserer Tonqualität ist es wie beim Google Linkjuice: Zählt man alle
Beteiligten zusammen, kommt immer die Zahl 1 heraus. Während Markus nun also
THX-Ultra-zertifiziert ist, zerbröselten unserem G…

Bei unserer Tonqualität ist es wie beim Google Linkjuice: Zählt man alle
Beteiligten zusammen, kommt immer die Zahl 1 heraus. Während Markus nun also
THX-Ultra-zertifiziert ist, zerbröselten unserem Gast Nico Brünjes,
Frontendentwickler bei ZEIT ONLINE, reihenweise die Headsets unter den Fingern
weg :(


SCHAUNOTIZEN

W3C HTML5 LOGO!



Das ansonsten eher langweilige W3C überrascht mit einer Art Promotion-Aktion:
Auf einer sehr schicken, modernen Seite präsentiert es ein Logo, das vielleicht
von Superhelden, vielleicht von einem 3D-Würfel inspiriert ist. Dazu gibt es
einen HTML5-Gummipunkt-Generator und ein T-Shirt. Wir finden’s gut und Nico hat
sich direkt das T-Shirt bestellt.



HTML IS THE NEW HTML5



Die WHATWG denkt die korrekte Namensgebung der HTML-Version-nach-HTML-4.01,
formerly known as HTML 5, formerly known as HTML5, konsequent zu Ende und stellt
fest: Die HTML-Spezifikation ist permanent im Fluss und macht keinen Halt bei
Versionnummern, also weg mit der 5! Ab jetzt heisst die Spezifikation selbst nur
noch HTML. Und HTML5 möge neuerdings ein Schlagwort für diejenige Generation
Webanwendungen sein, die allem Web-Zwo-Nulligen nachfolgt. JavaScript und CSS
als Techniken inklusive.



USING CSS SELECTORS AS FRAGMENT IDENTIFIERS



Der altehrwürdige Eric Meyer und Simon St.Laurent von O’Reilly Media haben einen
inoffiziellen Draft online gestellt, in dem sie eine neue Sprungmarker
(Fragment) Syntax im CSS-Selektor-Stil vorschlagen. So soll man beispielsweise
mit folgender URL direkt zu dem zweiten Absatz einer Seite springen können:
http://example.com/lorem.html#css(p:nth-child(2)).



LEARNING FROM TWITTER



Dass man selbst mit jQuery noch großen Bockmist bauen kann, haben letzte Woche
die Twitter-Programmierer bewiesen. Dumm war, dass sie behauptet hatten, es läge
an der neuen jQuery-Version dass Twitter neuerdings so langsam geworden war. Das
hat John Resig dazu animiert, sich deren Code genauer anzuschauen, und er hat
dabei Grauenhaftes zu Tage gefördert.



HINTER DEM MOBILEN PROXY



Unser Gast Nico Brünjes schrieb letzte Woche über eine sehr unangenehme
Entdeckung, die er und sein Team von ZEIT ONLINE machten: Die mobilen
Zugangsprovider manipulieren das HTML, JavaScript und CSS nach gutdünken um, und
vor allem stillschweigend. Das geht dummerweise ganz und gar nicht
zerstörungsfrei vonstatten.



MOZILLA PLANT DO-NOT-TRACK-HTTP-HEADER



Mozilla und Microsoft planen, den Browser mit einer zusätzlichen Header
auszustatten, dem X-Tracking-Choice: do-not-track. Dieser soll immer dann
gesendet werden, wenn der Benutzer von Inhalteanbietern nicht getrackt werden
will. Das Ganze setzt allerdings voraus, dass die Gegenseite diesen Header
auswertet und respektiert. Beim Diskutieren darüber kommt uns die Robinson Liste
in den Sinn. Google will es in Chrome hingegen via Browsererweiterung lösen.

ARPAGEDDON (IPV4 COUNTDOWN)



Unser Vorrat an IPv4-Adressen geht nun wirklich zur Neige. Knapp über 30
Millionen Adressen sind noch frei, 4,3 Milliarden sind in Gebrauch. Laut
ARPAgeddon hält der verbliebene Vorrat noch für etwa eine Woche. Es wird also
höchste Zeit, breitflächig auf IPv6 mit seinen 665 Billiarden möglichen
IP-Adressen umzusteigen – auch wenn es vielleicht weh tun wird.


KEINE SCHAUNOTIZEN

UGLIFYJS



Neuer JavaScript-Minifizierer und -Beautifier (Gegenteil von ersterem), der auf
node.js läuft und dadurch doppelt bis fünf mal so schnell arbeitet wie der YUI
Compressor oder Googles Closure. Kommt im Gegensatz zu letzterem auch mit eval()
und (dem bösen) with{} klar, und verfügt über eine Google Closure kompatible
HTTP-API. Steckt auch im kommenden WebKit Webinspector

Revision 11: HTML5 +Logo -5, Markup-Manipulation und IP-Adressen-Endzeit

<p>Für die potenziell sprengsatzhaltige Diskussion um Googles Entscheidung, den H.264-Codec aus Chrome zu entfernen, holten wir uns <a href="http://praegnanz.de">Gerrit van Aaken</a> mit ins Boot. Wir hoffen, dass die Audio-Qualität langsam in den Bereich des Erträglichen vordringt.</p>
<p>NEU und BREAKING: Es gibt jetzt auch mal testweise Kapitelmarken. Bisher leider nur im MP4-Format. Wenn das Feature ankommt und ihr beispielsweise Ogg fordert, kann ich auch das geschehen lassen.</p>
<p>Viel Spaß mit der Folge!</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">HTML Video Codec Support in Chrome</a> </dt>
<dd> </dd>
<dd>Google versetzt dem <a href="http://www.photoscala.de/Artikel/Zum-Codec-AVCH264-und-zum-Stand-der-Dinge">lizenzbehafteten</a> H.264-Codec einen Hieb und kündigt an, ihn aus Chrome(ium) zu entfernen. Im Rahmen des daran entflammten Shitstorms haben sowohl <a href="http://praegnanz.de/weblog/die-sache-mit-chrome-und-h264">Gerrit</a> als auch <a href="http://www.peterkroener.de/linksammlung-webm-h-264-debatte/">Peter</a> und <a href="http://markus-schlegel.com/weblog/h264-rauswerfen-flash-behalten-ein-widerspruch">Markus</a> ein paar Gedanken und Fakten zusammengetragen. Mit diesem Wissen unter dem Arm reden wir über die <a href="http://www.mpegla.com/main/programs/AVC/Pages/Licensors.aspx">MPEG LA</a>, Googles Strategie, <a href="http://www.webmproject.org/about/supporters/">WebMs</a> Aussichten, die <a href="http://my.opera.com/haavard/blog/2011/01/17/adoption">Marktanteile der Browser</a>, <a href="http://blogs.arm.com/software-enablement/207-support-for-vp8-and-webm-on-arm/">Hardware-Support auf mobilen Geräten</a> und erwähnen <a href="http://de.wikipedia.org/wiki/Graphics_Interchange_Format#GIF_und_die_LZW-Patente">das GIF-Patent</a>.</dd>
<dt>
</dt>
<dt><a href="http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/"> JavaScript Full Screen API, Navigation Timing and repeating CSS Gradients</a> </dt>
<dd> </dd>
<dd><a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI">Fullscreen API</a> wird in Webkit unterstützt werden. Hurra und Yippieh. </dd>
<dt> </dt>
<dt><a href="http://photoshopetiquette.com/">photoshopetiquette.com</a> </dt>
<dd> </dd>
<dd>Grundregeln für den Umgang mit PSDs beim Screendesign. Insbesondere <a href="http://www.mademyday.de/web-ist-nicht-print.html">an die lieben Printler</a> gerichtet. </dd>
<dt> </dt>
<dt><a href="https://hacks.mozilla.org/2011/01/indexeddb-in-firefox-4/">IndexedDB in Firefox 4</a> </dt>
<dd> </dd>
<dd>Die aktuelle und hoffentlich letzte <a href="https://hacks.mozilla.org/2011/01/firefox-4-beta-9-a-huge-pile-of-awesome/">Beta mit der Nummer 9</a> führt unter anderem IndexedDB ein. Die Final ist<a href="https://groups.google.com/group/mozilla.dev.planning/browse_thread/thread/edeea49d5339d7e7/e45ccde911c5eb08?show_docid=e45ccde911c5eb08"> für Ende Februar geplant</a>. Außerdem drin: <a href="http://brendaneich.com/2010/11/proxy-inception/">Harmony Proxies</a> und <a href="https://andreasgal.wordpress.com/2010/10/13/compartments/">JavaScript Compartments</a> </dd>
<dt> </dt>
<dt><a href="http://blog.jquery.com/2011/01/14/jquery-1-5-beta-1-released/">jQuery 1.5 Beta 1 released</a> </dt>
<dd> </dd>
<dd>Kleinere Verbesserungen, vornehmlich ein Rewrite der Ajax-Funktionalitäten. </dd>
<dt> </dt>
<dt><a href="http://docs.dojocampus.org/releasenotes/1.6">Dojo 1.6 Release Notes</a> </dt>
<dd> </dd>
<dd>Mit neuem LESS-angetriebenem Theme, einem IndexDB-Storage, Umstellung von dojo-Attributen im Markup à la <em>dojoType</em> auf HTML5-data-Attribute, Performanceverbesserungen in IE6 und 7 (dank einer Analyse des Codes mit <a href="http://ajax.dynatrace.com/ajax/de/Default.aspx">dynaTrace</a>) und Dokumentation zur Verknüpfung von Dojo mit RequireJS. </dd>
<dt> </dt>
<dt><a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/">What the heck is Shadow DOM?</a> </dt>
<dd> </dd>
<dd>Elemente, die nicht im DOM auftauchen, aber trotzdem irgendwo sein müssen, ja, wo sind die? Im Shadow DOM! Im IE ist es wie so oft <a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/#comment-266">ein alter Hut</a>. </dd>
<dt> </dt>
<dt><a href="http://www.xanthir.com/talks/2011-01-12/slides.html">CSSOM, Vars, Mixins, etc. (=HTML Slides, zu navigieren per Cursortasten) </a> </dt>
<dd> </dd>
<dd>Die immer wieder gewünschten Ermächtigungsgesetze von CSS. Genaugenommen <a href="http://www.w3.org/People/howcome/p/cascade.html">gewünscht seit 1994</a> (nur anders). Inspiriert von so Frameworks wie <a href="http://lesscss.org/">LESS</a> oder <a href="http://turbine.peterkroener.de/docs.php">Turbine</a>. </dd>
<dt> </dt>
<dt><a href="http://w3fools.com/">w3fools.com</a> </dt>
<dd> </dd>
<dd>Die geben der dreckigen w3schools.com Saures. Konstruktiver ist das (man kann sagen SEO-)Projekt <a href="http://promotejs.com/">PromoteJS</a>. </dd>
<dt> </dt>
<dt><a href="http://webkit.org/blog/1424/css3-gradients/">CSS3 gradients in Webkit …</a> </dt>
<dd> </dd>
<dd>… werden syntaxmäßig an den <a href="https://developer.mozilla.org/en/CSS/-moz-linear-gradient">Firefox</a> angeglichen. </dd>
</dl>
<h3>KEINE Schaunotizen</h3>
<p>&#8230;weil wir darüber nicht sprechen konnten oder wollten (ja, wir sortieren knallhart aus!):</p>
<dl>
<dt><a href="http://www.stevesouders.com/mobileperf/">Mobile Perf</a> </dt>
<dd> </dd>
<dd>Steve Souders hat 2011 zu seinem Jahr der mobilen Performanceoptimierungen ausgerufen. Zum Start hat er dieses Bookmarklet gebaut, mit Hilfe dessen man sich auch in mobilen Browsern ein paar Werkzeuge zum Auswerten einblenden lassen kann. </dd>
</dl>
<dl>
<dt><a href="http://labs.adobe.com/technologies/flashplayer10/">Flash 10.2 beta</a> </dt>
<dd> </dd>
<dd>… bringt das hochinteressante <a href="http://www.adobe.com/devnet/flashplayer/articles/stage_video.html">Stage Video</a>. </dd>
</dl>


Für die potenziell sprengsatzhaltige Diskussion um Googles Entscheidung, den
H.264-Codec aus Chrome zu entfernen, holten wir uns Gerrit van Aaken mit ins
Boot. Wir hoffen, dass die Audio-Qualität lang…

Für die potenziell sprengsatzhaltige Diskussion um Googles Entscheidung, den
H.264-Codec aus Chrome zu entfernen, holten wir uns Gerrit van Aaken mit ins
Boot. Wir hoffen, dass die Audio-Qualität langsam in den Bereich des
Erträglichen vordringt.

NEU und BREAKING: Es gibt jetzt auch mal testweise Kapitelmarken. Bisher leider
nur im MP4-Format. Wenn das Feature ankommt und ihr beispielsweise Ogg fordert,
kann ich auch das geschehen lassen.

Viel Spaß mit der Folge!


SCHAUNOTIZEN

HTML VIDEO CODEC SUPPORT IN CHROME



Google versetzt dem lizenzbehafteten H.264-Codec einen Hieb und kündigt an, ihn
aus Chrome(ium) zu entfernen. Im Rahmen des daran entflammten Shitstorms haben
sowohl Gerrit als auch Peter und Markus ein paar Gedanken und Fakten
zusammengetragen. Mit diesem Wissen unter dem Arm reden wir über die MPEG LA,
Googles Strategie, WebMs Aussichten, die Marktanteile der Browser,
Hardware-Support auf mobilen Geräten und erwähnen das GIF-Patent.



JAVASCRIPT FULL SCREEN API, NAVIGATION TIMING AND REPEATING CSS GRADIENTS



Fullscreen API wird in Webkit unterstützt werden. Hurra und Yippieh.



PHOTOSHOPETIQUETTE.COM



Grundregeln für den Umgang mit PSDs beim Screendesign. Insbesondere an die
lieben Printler gerichtet.



INDEXEDDB IN FIREFOX 4



Die aktuelle und hoffentlich letzte Beta mit der Nummer 9 führt unter anderem
IndexedDB ein. Die Final ist für Ende Februar geplant. Außerdem drin: Harmony
Proxies und JavaScript Compartments



JQUERY 1.5 BETA 1 RELEASED



Kleinere Verbesserungen, vornehmlich ein Rewrite der Ajax-Funktionalitäten.



DOJO 1.6 RELEASE NOTES



Mit neuem LESS-angetriebenem Theme, einem IndexDB-Storage, Umstellung von
dojo-Attributen im Markup à la dojoType auf HTML5-data-Attribute,
Performanceverbesserungen in IE6 und 7 (dank einer Analyse des Codes mit
dynaTrace) und Dokumentation zur Verknüpfung von Dojo mit RequireJS.



WHAT THE HECK IS SHADOW DOM?



Elemente, die nicht im DOM auftauchen, aber trotzdem irgendwo sein müssen, ja,
wo sind die? Im Shadow DOM! Im IE ist es wie so oft ein alter Hut.



CSSOM, VARS, MIXINS, ETC. (=HTML SLIDES, ZU NAVIGIEREN PER CURSORTASTEN)



Die immer wieder gewünschten Ermächtigungsgesetze von CSS. Genaugenommen
gewünscht seit 1994 (nur anders). Inspiriert von so Frameworks wie LESS oder
Turbine.



W3FOOLS.COM



Die geben der dreckigen w3schools.com Saures. Konstruktiver ist das (man kann
sagen SEO-)Projekt PromoteJS.



CSS3 GRADIENTS IN WEBKIT …



… werden syntaxmäßig an den Firefox angeglichen.


KEINE SCHAUNOTIZEN

…weil wir darüber nicht sprechen konnten oder wollten (ja, wir sortieren
knallhart aus!):

MOBILE PERF



Steve Souders hat 2011 zu seinem Jahr der mobilen Performanceoptimierungen
ausgerufen. Zum Start hat er dieses Bookmarklet gebaut, mit Hilfe dessen man
sich auch in mobilen Browsern ein paar Werkzeuge zum Auswerten einblenden lassen
kann.

FLASH 10.2 BETA



… bringt das hochinteressante Stage Video.

Revision 10: H.264 vs. WebM, Shadow DOM und w3fools.com

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

Revision 17: A/B-Test, Animationen, Canvas und WebGL

Working Draft

Revision 16: Interview mit Microsoft

Working Draft

Revision 15: IE9 unmodern? Teure Featuredetection? Pareto-Prinzip?

Working Draft

Revision 14: Hashbangs, PhantomJS und Github-Gene

Working Draft

Revision 13: Screen Presenter, Chromeless und Clipboard API

Working Draft

Revision 12: CSS-Reset, IE9 RC1 und Harmony

Working Draft

Revision 11: HTML5 +Logo -5, Markup-Manipulation und IP-Adressen-Endzeit

Working Draft

Revision 10: H.264 vs. WebM, Shadow DOM und w3fools.com

Working Draft