<p>Hans und Peter sprechen mit Stammgast <a title="Rodney bei Twitter" href="https://twitter.com/#!/rodneyrehm">Rodney Rehm</a> über die Neuerungen der vergangenen Woche.<br />
Auch diese Woche hatten wir wieder einen Live-Stream am Start. Danke für alle, die zugehört und im Chat mit diskutiert haben.</p>
<p>Wer dieses mal noch nicht dabei war, aber nächstes mal gerne auch mitdiskutieren möchte, folgt uns am besten <a href="http://twitter.com/#!/workingdraft/">auf Twitter</a> und macht sich mit <a href="http://de.wikipedia.org/wiki/Internet_Relay_Chat">IRC</a> vertraut. Unseren Chat findet ihr auf <a href="http://webchat.freenode.net/?channels=workingdraft">Freenote im Channel #workingdraft</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:17] <a href="http://www.impressivewebs.com/css-the-bad-parts/">CSS: The Bad Parts</a></dt>
<dd>Louis Lazaris beschreibt in seinem Blog, dass CSS, ähnlich wie JavaScript, nicht nur gute Seite hat. Darunter zählen seiner Meinung nach u. a. das Standart Box Modell, Floats und Vendor Prefixes. Zum Glück gibt es für einige Sachen recht einfache Abhilfe: Beim Box Modell ist das zum Beispiel die generelle Benutzung vom Border-Box Modell, wie <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">Paul Irish</a> es beschreibt. Dabei kann <a href="https://github.com/Schepp/box-sizing-polyfill">Schepps Polyfill</a> für alte Browser ziemlich hilfreich sein.</dd>
<dt>[00:13:14] <a href="http://praegnanz.de/weblog/webdesign-retina-display-fonts">iPad – Retina Display FTW oder WTF?</a></dt>
<dd>Das neue iPad (aka. <a href="http://www.quirksmode.org/blog/archives/2012/03/the_ipad_3_and.html">iPad 3)</a> ist da. Angesichts der großen Auflösung des iPad-Displays gibt es für uns als Entwickler ein paar Probleme: Wie liefern wir Content (zum Beispiel <a href="http://www.w3.org/community/respimg/">Bilder</a>), der auch <a href="http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/">bei dieser Auflösung</a> noch gut aussieht über viel zu <a href="http://www.w3.org/TR/netinfo-api/">langsame Internet-Verbindungen</a>? Oder jammern wir hier auf einem sehr hohen Niveau?</dd>
<dt>[00:28:50] <a href="http://www.ravelrumba.com/blog/responsive-ads-real-world-ad-server-implementation/">Responsive Werbung</a></dt>
<dd>Rob Flaherty präsentiert eine Möglichkeit, wie man Werbung mittels JavaScript auf Mobile Endgeräte anpassen kann. Rodney berichtet von seinen Erfahrungen mit Werbe-Agenturen und sieht das Problem nicht bei der Implementierung sondern viel mehr bei der Erstellung der Werbung. Mark Boulton schrieb vor einiger Zeit zu diesem Thema einen <a href="http://www.markboulton.co.uk/journal/comments/responsive-advertising">sehr interessanten Artikel</a>.</dd>
<dt>[00:50:43] <a href="https://developer.mozilla.org/en/Firefox_11_for_developers">Firefox 11</a></dt>
<dd>Firefox 11 ist gerade frisch raus gekommen. Was gibt es neues für uns Entwickler? Zu erwähnen ist da auf jeden Fall die <a href="https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view">3D View</a> in den <a href="https://developer.mozilla.org/en/Tools/Page_Inspector">Developer-Tools</a>. Außerdem sprechen wir über die Device APIs wie z. B. der <a href="https://developer.mozilla.org/en/DOM/window.navigator.mozBattery">Zugriff auf die Batterie</a>.</dd>
<dt>[01:01:28] Open Source Data</dt>
<dd>Zum Abschluss sprechen wir über offene Datenquellen, die für uns internet-affine Menschen sehr nützlich sein können. Mit dem Projekt <a href="http://data.brighterplanet.com/">Brighter Planet</a> passiert hier etwas. Um leichter an Daten aus Deutschland zu kommen, hat sich <a href="https://fragdenstaat.de/">Frag den Staat</a> zur Aufgabe gemacht, diese Anfragen zu Sammeln und an den Staar zu stellen.</dd>
</dl>
<h3>[01:15:25] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://plus.google.com/113127438179392830442/posts/W5ZRu1gWQBi">Paul Irish über nen heißesten Scheiß im Chrome auf der SXSW</a></dt>
<dd>Interesante Neuerungen, wie z. B. CSS Regions und Filters oder einige Device APIs</dd>
<dt><a href="https://github.com/JoelBesada/scrollpath">ScrollPath</a></dt>
<dd>Ein jQuery Plugin zum einfachen definieren von eigenen Scroll-Pfaden</dd>
<dt>JavaScript Extremoptimierungssport</dt>
<dd>Einige Artikel zum Thema Performance: <a href="http://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript">[1]</a>, <a href="http://floitsch.blogspot.de/2012/03/optimizing-for-v8-introduction.html">[2]</a>, <a href="http://floitsch.blogspot.de/2012/03/optimizing-for-v8-inlining.html">[3]</a>. Außerdem: <a href="https://docs.google.com/present/view?id=0Ac0YlG9vMA2LZHE1MnpycF8yMGZ6ZnZxa2hy&amp;pli=1">JS Mythen aufgedeckt</a>!</dd>
</dl>


Hans und Peter sprechen mit Stammgast Rodney Rehm über die Neuerungen der
vergangenen Woche.
Auch diese Woche hatten wir wieder einen Live-Stream am Start. Danke für alle,
die zugehört und im Chat mit…

Working Draft

Hans und Peter sprechen mit Stammgast Rodney Rehm über die Neuerungen der
vergangenen Woche.
Auch diese Woche hatten wir wieder einen Live-Stream am Start. Danke für alle,
die zugehört und im Chat mit diskutiert haben.

Wer dieses mal noch nicht dabei war, aber nächstes mal gerne auch mitdiskutieren
möchte, folgt uns am besten auf Twitter und macht sich mit IRC vertraut. Unseren
Chat findet ihr auf Freenote im Channel #workingdraft.


SCHAUNOTIZEN

[00:00:17] CSS: THE BAD PARTS

Louis Lazaris beschreibt in seinem Blog, dass CSS, ähnlich wie JavaScript, nicht
nur gute Seite hat. Darunter zählen seiner Meinung nach u. a. das Standart Box
Modell, Floats und Vendor Prefixes. Zum Glück gibt es für einige Sachen recht
einfache Abhilfe: Beim Box Modell ist das zum Beispiel die generelle Benutzung
vom Border-Box Modell, wie Paul Irish es beschreibt. Dabei kann Schepps Polyfill
für alte Browser ziemlich hilfreich sein.

[00:13:14] IPAD – RETINA DISPLAY FTW ODER WTF?

Das neue iPad (aka. iPad 3) ist da. Angesichts der großen Auflösung des
iPad-Displays gibt es für uns als Entwickler ein paar Probleme: Wie liefern wir
Content (zum Beispiel Bilder), der auch bei dieser Auflösung noch gut aussieht
über viel zu langsame Internet-Verbindungen? Oder jammern wir hier auf einem
sehr hohen Niveau?

[00:28:50] RESPONSIVE WERBUNG

Rob Flaherty präsentiert eine Möglichkeit, wie man Werbung mittels JavaScript
auf Mobile Endgeräte anpassen kann. Rodney berichtet von seinen Erfahrungen mit
Werbe-Agenturen und sieht das Problem nicht bei der Implementierung sondern viel
mehr bei der Erstellung der Werbung. Mark Boulton schrieb vor einiger Zeit zu
diesem Thema einen sehr interessanten Artikel.

[00:50:43] FIREFOX 11

Firefox 11 ist gerade frisch raus gekommen. Was gibt es neues für uns
Entwickler? Zu erwähnen ist da auf jeden Fall die 3D View in den
Developer-Tools. Außerdem sprechen wir über die Device APIs wie z. B. der
Zugriff auf die Batterie.

[01:01:28] OPEN SOURCE DATA

Zum Abschluss sprechen wir über offene Datenquellen, die für uns internet-affine
Menschen sehr nützlich sein können. Mit dem Projekt Brighter Planet passiert
hier etwas. Um leichter an Daten aus Deutschland zu kommen, hat sich Frag den
Staat zur Aufgabe gemacht, diese Anfragen zu Sammeln und an den Staar zu
stellen.


[01:15:25] KEINE SCHAUNOTIZEN

PAUL IRISH ÜBER NEN HEISSESTEN SCHEISS IM CHROME AUF DER SXSW

Interesante Neuerungen, wie z. B. CSS Regions und Filters oder einige Device
APIs

SCROLLPATH

Ein jQuery Plugin zum einfachen definieren von eigenen Scroll-Pfaden

JAVASCRIPT EXTREMOPTIMIERUNGSSPORT

Einige Artikel zum Thema Performance: [1], [2], [3]. Außerdem: JS Mythen
aufgedeckt!

Revision 63: Responsiver Content, Firefox 11 und Offene Datenquellen

<p>Diesmal erhielten Schepp und Peter Unterstützung von Pascal Szewczyk (<a href="http://www.peppmedien.de/">peppmedien.de</a>, <a href="https://twitter.com/#!/derPepo">@derPepo</a>) und kämpften sich live durch die Themen der Woche.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:56] <a href="http://labs.adobe.com/technologies/shadow/">Adobe Shadow</a></dt>
<dd>Luxuriöses Remote Debugging auf Basis von <a href="http://phonegap.github.com/weinre/">Weinre</a>. Das gefällt besonders den Windows- und Mac-Usern unter uns. Eine Ghetto-Version des Tools (ohne GUI) gibt es unter <a href="http://debug.phonegap.com/">debug.phonegap.com</a>&nbsp;&ndash; noch!</dd>
<dt>[00:12:16] <a href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/fb14de8b9ad84e15#">Hardware-accelerated audio/video decoding in Gecko?</a></dt>
<dd>Wird der mobile Firefox demnächst den H.264-Codec des Android-Systems nutzen um Videos abzuspielen? Sollte er? Wenn ja, was passiert dann mit dem Desktop? Kann man überhaupt mehr tun, als wild zu spekulieren? Und ist das Thema nicht langsam durch?</dd>
<dt>[00:20:38] <a href="http://www.quirksmode.org/blog/archives/2012/03/web_developer_r.html">Web developer relations management in the mobile world</a></dt>
<dd>PPK jammert, dass er nicht von allen Herstellern kostenlose Mobilgeräte zum Testen bekommt. Wir bekämen zwar auch gern kostenloses Spielzeug nachgeworfen, können uns aber nicht drauf einigen, ob dieser Ansatz wirklich so ohne weiteres skaliert. PPKs Primärziel, Mozillas B2G, ist jedenfalls <a href="http://robertnyman.com/2012/03/08/thoughts-on-ppks-take-on-web-developer-relations-management-in-the-mobile-world/">entschuldigt</a>.</dd>
<dt>[00:35:33] Mit der Gesamtsituation unzufrieden</dt>
<dd>Schepp und Pascal können sich des Eindrucks nicht erwehren, dass Deutschland Internettechnologie-Entwicklungsland sei. Sie berichten von leeren Workshops und stumpfen Veranstaltungen. Peter ist skeptisch. Was sagt ihr?</dd>
<dt>[00:51:10] Wir senden live!</dt>
<dd>Die Aufzeichnung von Working Draft wird ab jetzt (hoffentlich) jeden Montag gegen 20:00 Uhr live geschehen. Wo der Stream dann jeweils im einzelnen zu finden sein wird, ist noch nicht ganz klar (eventuell weiterhin <a href="http://www.livestream.com/workingdraft">bei Livestream.com</a>), aber der Chat in <a href="http://webchat.freenode.net/?channels=workingdraft">#workingdraft auf Freenode</a> ist bereits jetzt eine Institution.</dd>
</dl>
<h3>[00:53:44] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.youtube.com/playlist?list=PL2CB1F80266E986EA">SASS Video Tutorials</a></dt>
<dd>Wer einen Einstieg in das Thema SASS braucht, findet ihn hier.</dd>
<dt><a href="http://www.udacity.com ">udacity.com</a></dt>
<dd>Großkalibrige Informatik-Universitätskurse zum Anschauen im Internet!</dd>
<dt><a href="http://toki-woki.net/p/least/">Least</a></dt>
<dd>CSS-nach-LESS/SASS/Stylus-Converter.</dd>
<dt><a href="http://nodeca.github.com/fontomas/">Fantomas Icon Font Generator</a></dt>
<dd>Erzeugt Icon-Fonts auf Knopfdruck.</dd>
<dt><a href="http://tcorral.github.com/Cutter.js/">Cutter.js</a></dt>
<dd>JS-Lib, die Text schneidet, ohne die enthaltenen HTML-Tags in Mitleidenschaft zu ziehen.</dd>
</dl>


Diesmal erhielten Schepp und Peter Unterstützung von Pascal Szewczyk
(peppmedien.de, @derPepo) und kämpften sich live durch die Themen der Woche.


SCHAUNOTIZEN

[00:00:56] ADOBE SHADOW

Luxuriöses Re…

Diesmal erhielten Schepp und Peter Unterstützung von Pascal Szewczyk
(peppmedien.de, @derPepo) und kämpften sich live durch die Themen der Woche.


SCHAUNOTIZEN

[00:00:56] ADOBE SHADOW

Luxuriöses Remote Debugging auf Basis von Weinre. Das gefällt besonders den
Windows- und Mac-Usern unter uns. Eine Ghetto-Version des Tools (ohne GUI) gibt
es unter debug.phonegap.com – noch!

[00:12:16] HARDWARE-ACCELERATED AUDIO/VIDEO DECODING IN GECKO?

Wird der mobile Firefox demnächst den H.264-Codec des Android-Systems nutzen um
Videos abzuspielen? Sollte er? Wenn ja, was passiert dann mit dem Desktop? Kann
man überhaupt mehr tun, als wild zu spekulieren? Und ist das Thema nicht langsam
durch?

[00:20:38] WEB DEVELOPER RELATIONS MANAGEMENT IN THE MOBILE WORLD

PPK jammert, dass er nicht von allen Herstellern kostenlose Mobilgeräte zum
Testen bekommt. Wir bekämen zwar auch gern kostenloses Spielzeug nachgeworfen,
können uns aber nicht drauf einigen, ob dieser Ansatz wirklich so ohne weiteres
skaliert. PPKs Primärziel, Mozillas B2G, ist jedenfalls entschuldigt.

[00:35:33] MIT DER GESAMTSITUATION UNZUFRIEDEN

Schepp und Pascal können sich des Eindrucks nicht erwehren, dass Deutschland
Internettechnologie-Entwicklungsland sei. Sie berichten von leeren Workshops und
stumpfen Veranstaltungen. Peter ist skeptisch. Was sagt ihr?

[00:51:10] WIR SENDEN LIVE!

Die Aufzeichnung von Working Draft wird ab jetzt (hoffentlich) jeden Montag
gegen 20:00 Uhr live geschehen. Wo der Stream dann jeweils im einzelnen zu
finden sein wird, ist noch nicht ganz klar (eventuell weiterhin bei
Livestream.com), aber der Chat in #workingdraft auf Freenode ist bereits jetzt
eine Institution.


[00:53:44] KEINE SCHAUNOTIZEN

SASS VIDEO TUTORIALS

Wer einen Einstieg in das Thema SASS braucht, findet ihn hier.

UDACITY.COM

Großkalibrige Informatik-Universitätskurse zum Anschauen im Internet!

LEAST

CSS-nach-LESS/SASS/Stylus-Converter.

FANTOMAS ICON FONT GENERATOR

Erzeugt Icon-Fonts auf Knopfdruck.

CUTTER.JS

JS-Lib, die Text schneidet, ohne die enthaltenen HTML-Tags in Mitleidenschaft zu
ziehen.

Revision 62: Adobe Shadow, Mobile und Gerante – Live!

<p>Hans, Schepp und Peter granteln über neue CSS-Techniken, bashen ein wenig PHP und lobpreisen die neuesten Entwicklungen aus dem Hause Mozilla.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:12] <a href="http://api.html5please.com/">HTML5 Please API</a></dt>
<dd>Zielgerichtete Browser-Update-Forderungen, powered by <a href="http://caniuse.com/">caniuse.com</a>. Und das beste? Der Hans hat mitentwickelt!</dd>
<dt>[00:12:16] <a href="http://hacks.mozilla.org/2012/02/mozillas-boot-to-gecko-the-web-is-the-platform/">Boot to Gecko</a></dt>
<dd>Mozilla baut ein Smartphone-OS auf Basis von Webtechnologien. Finden wir gut. Und wir denken auch, dass Google das aushält.</dd>
<dt>[00:23:22] <a href="http://www.golem.de/news/scriptsprache-php-5-4-0-veroeffentlicht-1203-90202.html">PHP 5.4.0 ist da</a></dt>
<dd><a href="http://docs.php.net/manual/en/migration54.new-features.php">Viele neue Features</a> werden geboten. Interessant ist auch, dass das Release mit <a href="http://gcov.php.net/viewer.php?version=PHP_5_4">interessanten Build-Statistik aufwartet</a>. Auch erwähnenswert: <a href="http://www.reddit.com/r/lolphp/">das Subreddit &#8222;Lolphp&#8220;</a>.</dd>
<dt>[00:31:32] Neue Image Replacement Techniken</dt>
<dd>Sowohl der heilige Zeldman als auch Nicolas Gallagher kredenzen uns <a href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/">neue</a> <a href="http://nicolasgallagher.com/another-css-image-replacement-technique/">Techniken</a>. Wir sind so mittelbegeistert, denn die Vorteile (gleichwohl vorhanden) halten sich doch sehr in Grenzen.</dd>
<dt>[00:45:44] <a href="https://github.com/kripken/sql.js">SQL.js</a></dt>
<dd>SQLite im Brower. Schepp ist begeistert, Peter findet, dass man einfach auf <a href="http://www.w3.org/TR/IndexedDB/">IndexedDB</a> warten sollte. <a href="http://www.w3.org/TR/webdatabase/">Web SQL</a> ist hingegen dem Untergang verdammt und war es eigentlich auch immer.</dd>
<dt>[00:58:00] Verlosung der Karten für den MMT 29</dt>
<dd>Wie versprochen verteilen wir drei Karten für den <a href="http://mmt29.multimediatreff.de">Multimediatreff 29</a>. Die Glücklichen:</p>
<ul>
<li>Thomas Flad</li>
<li>Torben Leuschner</li>
<li>Ingo van Peeren</li>
</ul>
<p>Freikarten kommen per Mail. Bei Rückfragen, Mail an comments AT workingdraft PUNKT de.
</dd>
</dl>
<h3>[00:59:07] Keine Schaunotizen</h3>
<dl>
<dt>Anselm&#8217;s Weekly Weblinks</dt>
<dd>Abonniert <a href="http://anselm-hannemann.com/blog/">Anselms Blog</a>, da gibt es wöchentlich schöne Links.</dd>
<dt><a href="http://www.android-x86.org/">Android x86</a></dt>
<dd>Ein Android-Build für PCs. Optimal zur Ergänzung des Arsenals von virtuellen Maschinen für Browsertests.</dd>
<dt><a href="http://addyosmani.github.com/basket.js/">basket.js</a></dt>
<dd><q>A simple (proof-of-concept) script loader that caches scripts with localStorage</q></dd>
<dt><a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a></dt>
<dd>Alle gevendorprefixten CSS-Eigenschaften aller Zeiten.</dd>
<dt><a href="http://mapbox.com/">MapBox</a></dt>
<dd>Ein Konkurrent für Google Maps, der sehr fancy daher kommt und bezahlbar ist.</dd>
</dl>


Hans, Schepp und Peter granteln über neue CSS-Techniken, bashen ein wenig PHP
und lobpreisen die neuesten Entwicklungen aus dem Hause Mozilla.


SCHAUNOTIZEN

[00:00:12] HTML5 PLEASE API

Zielgerichte…

Hans, Schepp und Peter granteln über neue CSS-Techniken, bashen ein wenig PHP
und lobpreisen die neuesten Entwicklungen aus dem Hause Mozilla.


SCHAUNOTIZEN

[00:00:12] HTML5 PLEASE API

Zielgerichtete Browser-Update-Forderungen, powered by caniuse.com. Und das
beste? Der Hans hat mitentwickelt!

[00:12:16] BOOT TO GECKO

Mozilla baut ein Smartphone-OS auf Basis von Webtechnologien. Finden wir gut.
Und wir denken auch, dass Google das aushält.

[00:23:22] PHP 5.4.0 IST DA

Viele neue Features werden geboten. Interessant ist auch, dass das Release mit
interessanten Build-Statistik aufwartet. Auch erwähnenswert: das Subreddit
„Lolphp“.

[00:31:32] NEUE IMAGE REPLACEMENT TECHNIKEN

Sowohl der heilige Zeldman als auch Nicolas Gallagher kredenzen uns neue
Techniken. Wir sind so mittelbegeistert, denn die Vorteile (gleichwohl
vorhanden) halten sich doch sehr in Grenzen.

[00:45:44] SQL.JS

SQLite im Brower. Schepp ist begeistert, Peter findet, dass man einfach auf
IndexedDB warten sollte. Web SQL ist hingegen dem Untergang verdammt und war es
eigentlich auch immer.

[00:58:00] VERLOSUNG DER KARTEN FÜR DEN MMT 29

Wie versprochen verteilen wir drei Karten für den Multimediatreff 29. Die
Glücklichen:



 * Thomas Flad
 * Torben Leuschner
 * Ingo van Peeren

Freikarten kommen per Mail. Bei Rückfragen, Mail an comments AT workingdraft
PUNKT de.


[00:59:07] KEINE SCHAUNOTIZEN

ANSELM’S WEEKLY WEBLINKS

Abonniert Anselms Blog, da gibt es wöchentlich schöne Links.

ANDROID X86

Ein Android-Build für PCs. Optimal zur Ergänzung des Arsenals von virtuellen
Maschinen für Browsertests.

BASKET.JS

A simple (proof-of-concept) script loader that caches scripts with localStorage

VENDOR-PREFIXED CSS PROPERTY OVERVIEW

Alle gevendorprefixten CSS-Eigenschaften aller Zeiten.

MAPBOX

Ein Konkurrent für Google Maps, der sehr fancy daher kommt und bezahlbar ist.

Revision 61: HTML5 Please API, Boot to Gecko, Image Replacements

<p>Heute quatschen mal nur der <a href="http://www.highresolution.info">Dirk Jesse</a>, seines Zeichens <a href="http://www.yaml.de/">YAML-Framework</a>-Autor und CSS-Tüftler, und der Schepp über die Themen der Woche. Inklusive Epic Aufnahmefail.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:18] <a href="http://labs.adobe.com/technologies/edge/">Adobe Edge Preview 4</a></dt>
<dd>Schepp erzählt von seinen Erkenntnissen zur aktuellen Preview 4 von Adobe Edge.</dd>
<dt>[00:10:49] <a href="http://www.webkit.org/blog/">Aktuelle Neuerungen in WebKit</a></dt>
<dd>CSS <code>calc</code> materialisiert sich in WebKit. Außerdem implementiert er als erster Browser Scoped Styles</dd>
<dt>[00:20:57] <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">Web Components (+ Polyfill)</a></dt>
<dd>Die Web Components nehmen an Fahrt auf! Passend dazu hat <a href="http://glazkov.com/">Dimitri Glazkov</a> <a href="https://github.com/dglazkov/Web-Components-Polyfill">einen Polyfill gebaut</a>, der das Verhalten der Web Components nachbildet.</dd>
<dt>[00:33:30] <a href="http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/">Saving images and files in localStorage</a></dt>
<dd>Mozilla hat einen weiteren Artikel rund um die Verwendung von localStorage als Datei-Cache online gestellt. Wir ergänzen ihn mit unserem Erfahrungsschatz.</dd>
<dt>[00:41:56] Quellen von und Strategien zur Informationsbeschaffung</dt>
<dd>Passend zum &#8222;Brennpunkt Spezial&#8220; der letzten Revision stellen wir die Frage, wie man sich all die Informationen zu aktuellen Entwicklungen beschafft, wie wir sie zum Beispiel wöchentlich für den Podcast recherchieren.</dd>
<dt>[01:07:36] <a href="http://mmt29.multimediatreff.de">Verlosung von 3 Karten für den MMT 29</a></dt>
<dd>Beide sind wir beim Multimediatreff 29 am 23./24.03.2012 in Köln, nochmals zum Thema &#8222;Webtechnologien&#8220;. Und für den Konferenztag am Samstag wollen wir gerne 3 Karten unters Volk bringen! Teilnehmen bei der Verlosung tut jeder, der in den Kommentaren eine tiefgründige und aktuelle Quelle für Webentwickler Infos nennt.</dd>
</dl>
<h3>[01:08:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://chengyinliu.com/whatfont.html">Whatfont Tool</a></dt>
<dd>Chrome Erweiterung, mit der sich auf einer Seite verwendete Schriftarten herauslesen lassen.</dd>
<dt><a href="http://filamentgroup.com/lab/overthrow">Overthrow: An overflow polyfill for responsive design</a></dt>
<dd>Overthrow ist ein Mobilgeräte-Polyfill für <code>overflow: auto; -webkit-overflow-scrolling: touch;</code></dd>
<dt><a href="http://pxldot.com/post/18281312362/android-measuring-stick">Android Measuring Stick</a></dt>
<dd>Dieser Artikel versucht mit Methodik, Licht ins Dunkel der Marktpenetrierung verschiedener Android-Versionen zu bringen. Mit Erfolg.</dd>
<dt><a href="https://github.com/moviepilot/chaplin">Chaplin</a></dt>
<dd>Chaplin zeigt exemplarisch eine mögliche Nutzungsweise von backbone.js für komplexe Webapps.</dd>
<dt><a href="http://www.html5gamedevs.com/">HTML5 Game Dev News</a></dt>
<dd>Ein Portal voller interessanter aggregierter Artikel rund ums Thema HTML5 Spieleentwicklung.</dd>
</dl>


Heute quatschen mal nur der Dirk Jesse, seines Zeichens YAML-Framework-Autor und
CSS-Tüftler, und der Schepp über die Themen der Woche. Inklusive Epic
Aufnahmefail.


SCHAUNOTIZEN

[00:00:18] ADOBE ED…

Heute quatschen mal nur der Dirk Jesse, seines Zeichens YAML-Framework-Autor und
CSS-Tüftler, und der Schepp über die Themen der Woche. Inklusive Epic
Aufnahmefail.


SCHAUNOTIZEN

[00:00:18] ADOBE EDGE PREVIEW 4

Schepp erzählt von seinen Erkenntnissen zur aktuellen Preview 4 von Adobe Edge.

[00:10:49] AKTUELLE NEUERUNGEN IN WEBKIT

CSS calc materialisiert sich in WebKit. Außerdem implementiert er als erster
Browser Scoped Styles

[00:20:57] WEB COMPONENTS (+ POLYFILL)

Die Web Components nehmen an Fahrt auf! Passend dazu hat Dimitri Glazkov einen
Polyfill gebaut, der das Verhalten der Web Components nachbildet.

[00:33:30] SAVING IMAGES AND FILES IN LOCALSTORAGE

Mozilla hat einen weiteren Artikel rund um die Verwendung von localStorage als
Datei-Cache online gestellt. Wir ergänzen ihn mit unserem Erfahrungsschatz.

[00:41:56] QUELLEN VON UND STRATEGIEN ZUR INFORMATIONSBESCHAFFUNG

Passend zum „Brennpunkt Spezial“ der letzten Revision stellen wir die Frage, wie
man sich all die Informationen zu aktuellen Entwicklungen beschafft, wie wir sie
zum Beispiel wöchentlich für den Podcast recherchieren.

[01:07:36] VERLOSUNG VON 3 KARTEN FÜR DEN MMT 29

Beide sind wir beim Multimediatreff 29 am 23./24.03.2012 in Köln, nochmals zum
Thema „Webtechnologien“. Und für den Konferenztag am Samstag wollen wir gerne 3
Karten unters Volk bringen! Teilnehmen bei der Verlosung tut jeder, der in den
Kommentaren eine tiefgründige und aktuelle Quelle für Webentwickler Infos nennt.


[01:08:40] KEINE SCHAUNOTIZEN

WHATFONT TOOL

Chrome Erweiterung, mit der sich auf einer Seite verwendete Schriftarten
herauslesen lassen.

OVERTHROW: AN OVERFLOW POLYFILL FOR RESPONSIVE DESIGN

Overthrow ist ein Mobilgeräte-Polyfill für overflow: auto;
-webkit-overflow-scrolling: touch;

ANDROID MEASURING STICK

Dieser Artikel versucht mit Methodik, Licht ins Dunkel der Marktpenetrierung
verschiedener Android-Versionen zu bringen. Mit Erfolg.

CHAPLIN

Chaplin zeigt exemplarisch eine mögliche Nutzungsweise von backbone.js für
komplexe Webapps.

HTML5 GAME DEV NEWS

Ein Portal voller interessanter aggregierter Artikel rund ums Thema HTML5
Spieleentwicklung.

Revision 60: Adobe Edge, Web Components & Informationsquellen

<p>Aus akutem Mangel an aktuellen Themen haben Hans, Kahlil und Peter spontan eine Sondersendung eingeschoben. Da letzterer demnächst HTML5 an Entwickler vermitteln soll, die bisher keine Erfahrung mit Web-Frontendentwicklung haben, stellte sich die Frage, wie Webentwickler überhaupt mit der Realität im WWW klarkommen. Anders als „normale“ Programmierer kennt der Web-Nerd keine festen Zielplattformen, die einzelnen Technologien mutieren ohne engere Abstimmung miteinander vor sich hin, es gibt keine irgendwie gearteten „offiziellen“ Tools, keine zentrale Dokumentation und so weiter. Auf der Suche nach des Pudels Kern haben wir dann einfach die Aufnahme mitlaufen lassen und erklären das Ergebnis unserer Diskussion zur Revision 59.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:40] <a href="https://developer.mozilla.org/">Mozilla Developer Network</a></dt>
<dd>MDN ist das, was einer umfassenden Dokumentation von Webtechnologie noch am nächsten kommt.</dd>
<dt>[00:04:30] <a href="https://developer.mozilla.org/Writing_Forward_Compatible_Websites">Writing forward-compatible websites</a></dt>
<dd>Brendan Eich erklärt, wie man Webseiten baut, die auch in 10 Jahren noch funktionieren.</dd>
<dt>[01:02:30] &amp; [01:06:55] <a href="http://incident57.com/codekit/">Code Kit</a> und <a href="http://livereload.com/">Live Reload</a></dt>
<dd>Zwei Tools, die beim Umgang mit Präprozessoren nicht verzichtbar sind (behauptet jedenfalls die Mac-Fraktion)</dd>
<dt>[01:04:25] <a href="http://www.git-tower.com/">Git Tower</a></dt>
<dd>Ohne Git Tower würde Hans Git als Zumutung empfinden.</dd>
<dt><a href="http://www.sublimetext.com/">Sublime Text 2</a></dt>
<dd>Der aktuell trendigste Texteditor für Webentwickler.</dd>
<dt><strong>Gesammelte Erkenntnisse und Thesen</strong></dt>
<dd>
<ul>
<li>Um über Webtechnologie informiert zu sein, muss man sich in den Informationsfluss (Twitter, Blogs usw.) einklinken und drinbleiben.</li>
<li>Kleine, spezialisierte Tools helfen dabei, viele verschiedene (und sich ständig ändernde) Probleme zu jonglieren.</li>
<li>Eine offene Community mit geringen Einstiegshürden trägt viele Informationen nach außen und produziert das Wissen, das anderswo offizielle Dokumentationen bereitstellen.</li>
<li>Man muss jederzeit flexibel sein, Neues lernen und Altes vergessen.</li>
<li>Das latente Design-Fanboytum der Webentwickler rührt daher, dass sie so oft Tools wechseln. Wir haben keine Zeit für schlechte Software!</li>
</ul>
</dd>
</dl>
<p>Haben wir Recht? Haben wir etwas vergessen? Haben wir Blödsinn erzählt? Sagt es uns in den Kommentaren!</p>


Aus akutem Mangel an aktuellen Themen haben Hans, Kahlil und Peter spontan eine
Sondersendung eingeschoben. Da letzterer demnächst HTML5 an Entwickler
vermitteln soll, die bisher keine Erfahrung mit W…

Aus akutem Mangel an aktuellen Themen haben Hans, Kahlil und Peter spontan eine
Sondersendung eingeschoben. Da letzterer demnächst HTML5 an Entwickler
vermitteln soll, die bisher keine Erfahrung mit Web-Frontendentwicklung haben,
stellte sich die Frage, wie Webentwickler überhaupt mit der Realität im WWW
klarkommen. Anders als „normale“ Programmierer kennt der Web-Nerd keine festen
Zielplattformen, die einzelnen Technologien mutieren ohne engere Abstimmung
miteinander vor sich hin, es gibt keine irgendwie gearteten „offiziellen“ Tools,
keine zentrale Dokumentation und so weiter. Auf der Suche nach des Pudels Kern
haben wir dann einfach die Aufnahme mitlaufen lassen und erklären das Ergebnis
unserer Diskussion zur Revision 59.


SCHAUNOTIZEN

[00:02:40] MOZILLA DEVELOPER NETWORK

MDN ist das, was einer umfassenden Dokumentation von Webtechnologie noch am
nächsten kommt.

[00:04:30] WRITING FORWARD-COMPATIBLE WEBSITES

Brendan Eich erklärt, wie man Webseiten baut, die auch in 10 Jahren noch
funktionieren.

[01:02:30] & [01:06:55] CODE KIT UND LIVE RELOAD

Zwei Tools, die beim Umgang mit Präprozessoren nicht verzichtbar sind (behauptet
jedenfalls die Mac-Fraktion)

[01:04:25] GIT TOWER

Ohne Git Tower würde Hans Git als Zumutung empfinden.

SUBLIME TEXT 2

Der aktuell trendigste Texteditor für Webentwickler.

GESAMMELTE ERKENNTNISSE UND THESEN

 * Um über Webtechnologie informiert zu sein, muss man sich in den
   Informationsfluss (Twitter, Blogs usw.) einklinken und drinbleiben.
 * Kleine, spezialisierte Tools helfen dabei, viele verschiedene (und sich
   ständig ändernde) Probleme zu jonglieren.
 * Eine offene Community mit geringen Einstiegshürden trägt viele Informationen
   nach außen und produziert das Wissen, das anderswo offizielle Dokumentationen
   bereitstellen.
 * Man muss jederzeit flexibel sein, Neues lernen und Altes vergessen.
 * Das latente Design-Fanboytum der Webentwickler rührt daher, dass sie so oft
   Tools wechseln. Wir haben keine Zeit für schlechte Software!

Haben wir Recht? Haben wir etwas vergessen? Haben wir Blödsinn erzählt? Sagt es
uns in den Kommentaren!

Revision 59: Wie ticken Webentwickler?

<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:22] <a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0313.html">Vendor-Prefix-Gate</a></dt>
<dd>Mozilla, Microsoft und Opera wollen CSS-Features mit Webkits Vendor-Prefix implementieren? Was hat die denn geritten und vor allem: wer ist Schuld an der Misere? Wir sondern unsere Meinungen ab und sprechen außerdem über:</p>
<ul>
<li><a href="http://www.quirksmode.org/blog/archives/2012/02/the_vendor_pref.html">PPKs Meinung zu dem Thema</a>
<li><a href="http://felipe.wordpress.com/2012/02/02/a-proposal-to-drop-browser-vendor-prefixes/">Alternativen zum vendor-Prefix-Modell</a>
<li><a href="http://codepo8.github.com/prefix-the-web/">Chris Heilmanns Lösugsansatz</a>
</ul>
</dd>
<dt>[00:28:30] <a href="http://css-tricks.com/musings-on-preprocessing/">Musings on Preprocessing</a></dt>
<dd>Letzte Woche war die Woche, in der mehrere beleibte Männer das Licht der CSS-Präprozessoren gesehen haben. Wir nehmen die Erleuchtung von Chris Coyier zum Anlass, selbst das Thema einmal breit zu treten und unsere beliebtesten Präprozessoren nebst zugehörigen Tools zu lobpreisen. Zur Sprache kommen:</p>
<ul>
<li><a href="http://sass-lang.com/">Sass</a> und <a href="http://compass-style.org/">Compass</a> (Präprozessor plus Framework)
<li><a href="http://lesscss.org/">Less</a> (Präprozessor)
<li><a href="http://learnboost.github.com/stylus/">Stylus</a> (Präprozessor)
<li><a href="http://incident57.com/codekit/">CodeKit</a>, ein GUI für Präprozessoren aller Art
<li><a href="https://gist.github.com/1312469">Peters Stylus-Server</a> der Marke Eigenbau
</ul>
</dd>
<dt>[00:51:42] Neue CSS3-Drafts und neue Möglichkeiten</dt>
<dd>Wir besprechen <a href="http://dev.w3.org/csswg/css-variables/">den aktuellen Vorschlag für CSS-Variablen</a>, <a href="http://dev.w3.org/csswg/css3-hierarchies/">native verschachtelte Selektoren</a>, <a href="http://dev.w3.org/csswg/css3-positioning/">neue Positionierungs-Möglichkeiten</a> und obskure Winkelmaße aus dem Bergbau. Außerdem empfiehlt Paul Irish, <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">nur noch mit dem Border-Box-Modell zu arbeiten</a>&nbsp;&ndash; ein Vorschlag, dem wir uns rundheraus anschließen (Erklärungen <a href="http://maddesigns.de/box-sizing-1597.html">hier</a> und <a href="http://www.peterkroener.de/schoenes-neues-css-box-sizing/">hier</a>, Polyfill <a href="https://github.com/Schepp/box-sizing-polyfill">hier</a>).</dd>
<dt>[01:05:05] <a href="http://www.searchmetrics.com/de/service/ranking-faktoren/de/">SEO Ranking Faktoren für Deutschland 2012</a></dt>
<dd>Zeigt den Artikel euren Chefs, damit die Suchmaschinen-Kaputtoptimierer ihre fettigen Griffel von unserem HTML lassen und sich darauf konzentrieren, bei Twitter rumzuspammen. Denn, man glaubt es kaum, letzteres ist sehr viel erfolgversprechender!</dd>
<dt>[01:09:47] <a href="http://www.golem.de/news/mozilla-push-nachrichten-fuers-web-1202-89555.html">Mozilla arbeitet an Push-Nachrichten</a></dt>
<dd>Mittels Push-Nachricht können euch Webseiten Meldungen schicken, selbst wenn ihr sie gerade nicht offen habt. So ist jedenfalls die Theorie. Wir sagen: her damit!</dd>
<dt>[01:14:22] <a href="http://remote-tilt.com/">Remote Tilt</a></dt>
<dd>Ein sehr cooler Service, der die Events <a href="http://dev.w3.org/geo/api/spec-source-orientation.html#deviceorientation">Device Orientation</a>&#8211; und <a href="http://dev.w3.org/geo/api/spec-source-orientation.html#devicemotion">Device Motion</a>-APIs simuliert. So kann man Mobil-Apps, die die die Lagesensoren der Handys und Tablets verwenden, beqeum am Desktop-Rechner entwickeln.</dd>
<dt>[01:20:17] <a href="http://multimediatreff.de/">Multimediatreff 29</a></dt>
<dd>Wir schieben ein wenig dreiste Propaganda für den 29. Multimediatreff, einer Konferenz rund um Webfoo für kleines Geld. Besonders möchten wir auf die dieses Jahr neu eingeführten <a href="http://multimediatreff.de/Workshops">Workshops</a> verweisen, in denen man sich von absoluten Fach-Nerds mit frischem Wissen ausstatten lassen kann.</dd>
</dl>
<h3>[01:24:12] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://sharejs.org/">ShareJS</a></dt>
<dd>Etherpad (und mehr) in JS/Node.</dd>
<dt><a href="http://lea.verou.me/2012/02/exactly-how-much-css3-does-your-browser-support/">CSS3 Test</a></dt>
<dd>Was kann dein Browser?</dd>
<dt><a href="http://www.zachleat.com/web/placeholder/">Warum man das Placeholder-Attribut nicht als Ersatz für Labels nehmen sollte</a></dt>
<dd>Es soll ja Leute geben, die das machen.</dd>
<dt><a href="http://addyosmani.com/scalable-javascript-videos/">Addy Osmanis Talk über skalierbares JavaScript</a></dt>
<dd>Auch für Nicht-Vollnerds verständlich und wertvoll.</dd>
<dt><a href="http://javascriptjabber.com/">JavaScript Jabber</a></dt>
<dd>Neuer JS-Podcast</dd>
<dt><a href="http://musicforprogramming.net/">Music for programming</a></dt>
<dd>Speziell für Programmierer zusammengestellte Mixes. Und wenn Kahlil sagt, dass das guter Stoff ist, dann ist das auch guter Stoff.</dd>
<dt><a href="http://designpepper.com/podcasts-for-hackers">http://designpepper.com/podcasts-for-hackers</a></dt>
<dd>Ganz viele Podcasts für Programmierer.</dd>
<dt><a href="https://vimeo.com/35258313">Better JS with CoffeeScript</a></dt>
<dd>Warum CoffeeScript das Haus rockt.</dd>
</dl>


SCHAUNOTIZEN

[00:00:22] VENDOR-PREFIX-GATE

Mozilla, Microsoft und Opera wollen CSS-Features mit Webkits Vendor-Prefix
implementieren? Was hat die denn geritten und vor allem: wer ist Schuld an der
M…

SCHAUNOTIZEN

[00:00:22] VENDOR-PREFIX-GATE

Mozilla, Microsoft und Opera wollen CSS-Features mit Webkits Vendor-Prefix
implementieren? Was hat die denn geritten und vor allem: wer ist Schuld an der
Misere? Wir sondern unsere Meinungen ab und sprechen außerdem über:



 * PPKs Meinung zu dem Thema
 * Alternativen zum vendor-Prefix-Modell
 * Chris Heilmanns Lösugsansatz

[00:28:30] MUSINGS ON PREPROCESSING

Letzte Woche war die Woche, in der mehrere beleibte Männer das Licht der
CSS-Präprozessoren gesehen haben. Wir nehmen die Erleuchtung von Chris Coyier
zum Anlass, selbst das Thema einmal breit zu treten und unsere beliebtesten
Präprozessoren nebst zugehörigen Tools zu lobpreisen. Zur Sprache kommen:



 * Sass und Compass (Präprozessor plus Framework)
 * Less (Präprozessor)
 * Stylus (Präprozessor)
 * CodeKit, ein GUI für Präprozessoren aller Art
 * Peters Stylus-Server der Marke Eigenbau

[00:51:42] NEUE CSS3-DRAFTS UND NEUE MÖGLICHKEITEN

Wir besprechen den aktuellen Vorschlag für CSS-Variablen, native verschachtelte
Selektoren, neue Positionierungs-Möglichkeiten und obskure Winkelmaße aus dem
Bergbau. Außerdem empfiehlt Paul Irish, nur noch mit dem Border-Box-Modell zu
arbeiten – ein Vorschlag, dem wir uns rundheraus anschließen (Erklärungen hier
und hier, Polyfill hier).

[01:05:05] SEO RANKING FAKTOREN FÜR DEUTSCHLAND 2012

Zeigt den Artikel euren Chefs, damit die Suchmaschinen-Kaputtoptimierer ihre
fettigen Griffel von unserem HTML lassen und sich darauf konzentrieren, bei
Twitter rumzuspammen. Denn, man glaubt es kaum, letzteres ist sehr viel
erfolgversprechender!

[01:09:47] MOZILLA ARBEITET AN PUSH-NACHRICHTEN

Mittels Push-Nachricht können euch Webseiten Meldungen schicken, selbst wenn ihr
sie gerade nicht offen habt. So ist jedenfalls die Theorie. Wir sagen: her
damit!

[01:14:22] REMOTE TILT

Ein sehr cooler Service, der die Events Device Orientation– und Device
Motion-APIs simuliert. So kann man Mobil-Apps, die die die Lagesensoren der
Handys und Tablets verwenden, beqeum am Desktop-Rechner entwickeln.

[01:20:17] MULTIMEDIATREFF 29

Wir schieben ein wenig dreiste Propaganda für den 29. Multimediatreff, einer
Konferenz rund um Webfoo für kleines Geld. Besonders möchten wir auf die dieses
Jahr neu eingeführten Workshops verweisen, in denen man sich von absoluten
Fach-Nerds mit frischem Wissen ausstatten lassen kann.


[01:24:12] KEINE SCHAUNOTIZEN

SHAREJS

Etherpad (und mehr) in JS/Node.

CSS3 TEST

Was kann dein Browser?

WARUM MAN DAS PLACEHOLDER-ATTRIBUT NICHT ALS ERSATZ FÜR LABELS NEHMEN SOLLTE

Es soll ja Leute geben, die das machen.

ADDY OSMANIS TALK ÜBER SKALIERBARES JAVASCRIPT

Auch für Nicht-Vollnerds verständlich und wertvoll.

JAVASCRIPT JABBER

Neuer JS-Podcast

MUSIC FOR PROGRAMMING

Speziell für Programmierer zusammengestellte Mixes. Und wenn Kahlil sagt, dass
das guter Stoff ist, dann ist das auch guter Stoff.

HTTP://DESIGNPEPPER.COM/PODCASTS-FOR-HACKERS

Ganz viele Podcasts für Programmierer.

BETTER JS WITH COFFEESCRIPT

Warum CoffeeScript das Haus rockt.

Revision 58: -webkit-CSS3, -webkit-SEO und -webkit-MMT

<p>Da eine leere Themenliste mit vollen Todo-Listen der gesamten Teams korrelierte, ließen Schepp, Hans, Kahlil und Peter eine Woche ausfallen, nur dann umso nerdiger zuzuschlagen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:16] <a href="http://blogs.msdn.com/b/ie/archive/2012/01/20/ie10-compat-inspector.aspx">IE10 Compat Inspector</a></dt>
<dd>Falls ihr Sorge hat, dass eure IE9-optimierte Webseite nicht im IE10 funktionieren könnte, hilft euch dieses Migrations-Tool. Jup, das ist genau so nötig wie ihr euch jetzt gerade denkt.</dd>
<dt>[00:05:50] <a href="http://blogs.msdn.com/b/ie/archive/2012/01/25/debugging-indexeddb-applications.aspx">IDBExplorer</a></dt>
<dd>Ein paar Microsoft-Programmierer haben das UI-Design-Team deportiert und dann heimlich ein Interface für <a href="http://www.w3.org/TR/IndexedDB/">Indexed Database</a> gebaut. Das sieht zwar selbst nach den Maßstäben eines DB-Interfaces grauslig aus, aber wir unterstellen mal, dass es funktioniert und honorieren den guten Willen. Wer IndexedDB tatsächlich benutzen möchte, dem sei der <a href="https://github.com/jensarps/IDBWrapper">IDBWrapper</a> zwecks Browservereinheitlichung empfohlen.</dd>
<dt>[00:10:55] <a href="http://pik6.peterkroener.de/">Pik6</a></dt>
<dd>Ein weiteres HTML5-Präsentationsframework. Gähn! Allerdings hat dieses Exemplar zwei Vorteile: es stammt aus der Feder von Peter und als ob das noch nicht überzeugend genug wäre, bietet es obendrein noch einen Presenter Mode!</dd>
<dt>[00:17:07] <a href="http://www.w3.org/TR/css3-images/">Wieder eine neue Gradient-Syntax! WTF?</a></dt>
<dd>Nachdem ich sich alle Browser auf eine einheitliche Syntax für CSS3-Farbverläufe geeinigt haben kommt nun das W3C daher und spezifiziert nochmal Neuerungen. Die finden wir zwar im Prinzip gut, aber ganz ehrlich&#8230; muss das sein?</dd>
<dt>[00:29:20] <a href="http://jekyllbootstrap.com/">Jekyll Bootstrap</a></dt>
<dd>Wem WordPress nicht nerdig genug ist, der bloggt mit <a href="http://jekyllrb.com/">Jekyll</a>, das aus einfachem Text mundgerechtes HTML produziert. Jekyll Bootstrap ist ein Framework, das den Weg zum nerdigen Blog etwas ebnet, Motto: <q>Zero to Hosted Jekyll Blog in 3 Minutes</q>. Wer sein CMS zwar auch gerne klein, aber nicht so nerdig haben mag, dem empfehlen wir <a href="http://getkirby.com">Kirby</a>.</dd>
<dt>[00:42:53] <a href="https://github.com/geddesign/wrap.js">Wrap.js</a></dt>
<dd>Ein Wrapper, der herkömmlichen JS-Code im Autopiloten-Modus in AMD-Module verwandelt. Nützlich für Dependency Management.</dd>
</dl>
<h3>[00:46:45] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.useragentman.com/blog/2011/10/29/clipping-jpeg-images-into-non-rectangular-polygons-using-polyclip-js/">PolyClip</a></dt>
<dd>Alphakanäle für JPGs? Kein Problem mit polyclip.js und etwas HTML5-Magie.</dd>
<dt><a href="http://twitter.github.com/hogan.js/">Hogan.js</a></dt>
<dd>Eine JavaScript-Templatingengine aus dem Hause Twitter, die durch ihre Geschwindigkeit überzeugt.</dd>
</dl>


Da eine leere Themenliste mit vollen Todo-Listen der gesamten Teams korrelierte,
ließen Schepp, Hans, Kahlil und Peter eine Woche ausfallen, nur dann umso
nerdiger zuzuschlagen.


SCHAUNOTIZEN

[00:00…

Da eine leere Themenliste mit vollen Todo-Listen der gesamten Teams korrelierte,
ließen Schepp, Hans, Kahlil und Peter eine Woche ausfallen, nur dann umso
nerdiger zuzuschlagen.


SCHAUNOTIZEN

[00:00:16] IE10 COMPAT INSPECTOR

Falls ihr Sorge hat, dass eure IE9-optimierte Webseite nicht im IE10
funktionieren könnte, hilft euch dieses Migrations-Tool. Jup, das ist genau so
nötig wie ihr euch jetzt gerade denkt.

[00:05:50] IDBEXPLORER

Ein paar Microsoft-Programmierer haben das UI-Design-Team deportiert und dann
heimlich ein Interface für Indexed Database gebaut. Das sieht zwar selbst nach
den Maßstäben eines DB-Interfaces grauslig aus, aber wir unterstellen mal, dass
es funktioniert und honorieren den guten Willen. Wer IndexedDB tatsächlich
benutzen möchte, dem sei der IDBWrapper zwecks Browservereinheitlichung
empfohlen.

[00:10:55] PIK6

Ein weiteres HTML5-Präsentationsframework. Gähn! Allerdings hat dieses Exemplar
zwei Vorteile: es stammt aus der Feder von Peter und als ob das noch nicht
überzeugend genug wäre, bietet es obendrein noch einen Presenter Mode!

[00:17:07] WIEDER EINE NEUE GRADIENT-SYNTAX! WTF?

Nachdem ich sich alle Browser auf eine einheitliche Syntax für CSS3-Farbverläufe
geeinigt haben kommt nun das W3C daher und spezifiziert nochmal Neuerungen. Die
finden wir zwar im Prinzip gut, aber ganz ehrlich… muss das sein?

[00:29:20] JEKYLL BOOTSTRAP

Wem WordPress nicht nerdig genug ist, der bloggt mit Jekyll, das aus einfachem
Text mundgerechtes HTML produziert. Jekyll Bootstrap ist ein Framework, das den
Weg zum nerdigen Blog etwas ebnet, Motto: Zero to Hosted Jekyll Blog in 3
Minutes. Wer sein CMS zwar auch gerne klein, aber nicht so nerdig haben mag, dem
empfehlen wir Kirby.

[00:42:53] WRAP.JS

Ein Wrapper, der herkömmlichen JS-Code im Autopiloten-Modus in AMD-Module
verwandelt. Nützlich für Dependency Management.


[00:46:45] KEINE SCHAUNOTIZEN

POLYCLIP

Alphakanäle für JPGs? Kein Problem mit polyclip.js und etwas HTML5-Magie.

HOGAN.JS

Eine JavaScript-Templatingengine aus dem Hause Twitter, die durch ihre
Geschwindigkeit überzeugt.

Revision 57: IDBExplorer, Gradient Syntax & Wrap.js

<p><a href="http://twitter.com/#!/sir_pepe">Peter</a> und <a href="http://twitter.com/#!/derSchepp">Schepp</a> luden sich den <a href="http://twitter.com/#!/MadeMyDay">Marc</a> ein, und zu dritt sprachen man über&#8230;</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:15] <a href="http://somadesign.ca/demos/better-google-fonts/">Google Web Fonts Families</a></dt>
<dd>Eine praktische Gesamtübersicht aller Schnitte aller Google Webfonts</dd>
<dt>[00:10:00] <a href="http://badassjs.com/post/16355968400/font-js-a-powerful-font-toolkit-for-javascript">Font.js: A Powerful Font Toolkit for JavaScript</a></dt>
<dd>Font.js rüstet eingebettete Schriften mit Load-Events nach.</dd>
<dt>[00:22:00] <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#nav-index0">CSS Basic User Interface Module Level 3 (CSS3 UI)</a></dt>
<dd>Wir entdeckten etwas Praktisches in diesem Working Draft, das Opera schon <a href="http://dev.opera.com/articles/view/opera-9-5-the-next-generation-of-web-s/#css3">seit Version 9.5</a> implementiert, und das speziell <a href="http://dev.opera.com/articles/view/tweaking-spatial-navigation-for-tv-browsing/">auf Fernsehern hilfreich ist</a>: die Keyboard Control Eigenschaften.</dd>
<dt>[00:29:27] <a href="http://www.golem.de/1201/89166.html">WebRTC</a></dt>
<dd>WebRTC ist ein größeres API-Baustein-Paket, mit dem sich alle Aufgaben von Echtzeitkommunikation (Telefonie und Videotelefonie) im Browser abwickeln lassen. Erfunden hat&#8217;s Google, aber mit an Board sind auch Opera und <a href="http://mozillalabs.com/rainbow/2011/08/04/whats-next-rainbow-and-webrtc/">Mozilla</a>. Außerdem sprachen wir den auf WebRTC und Flash basierenden <a href="https://plus.google.com/115133653231679625609/posts/hAmrzBxEPWU">getUserMedia-Polyfill von Addy Osmani</a> an.</dd>
<dt>[00:39:05] <a href="http://www.wunderkit.com">Wunderkit</a></dt>
<dd>Wunderkit will ein Projektmanagment- und Organisationswerkzeug sein. Im Vorfeld wurde eine hohe Erwartungshaltung erzeugt, so dass mit der nun startenden Beta ein regelrechter Hype darum entbrannt ist. Wir klären, ob das gerechtfertigt ist oder nicht.</dd>
<dt>[00:53:48] <a href="http://trello.com">Trello</a></dt>
<dd>Von Wunderkit kamen wir zu Trello. Trello ist eine Art digitales Karteikartensystem und wir nutzen es seit kurzem, um unsere Sendungsthemen zu sammeln, zu sieben und zu sortieren.</dd>
</dl>
<h3>[00:57:30] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://gridpak.com/about/">Gridpak</a></dt>
<dd>Ein responsive Grid Generator.</dd>
<dt><a href="http://www.yaml.de/">YAML 4 ist da!</a></dt>
<dd>Ein neues Major Release von YAML ist raus. YAML ist ein Layoutframework, das ausnahmsweise mal nicht gridbasiert ist, das aber trotzdem alles kann, und das auch noch in allen Browsern bis hinunter zum IE7er. Was ist in Version 4 neu? Responsiveness und CSS-Klassen-Namespacing. Parallel zu uns hat sich die <a href="http://technikwuerze.de">Technikwürze</a> mit dem Macher <a href="www.highresolution.info">Dirk Jesse</a> und weiteren Gästen <a href="http://technikwuerze.de/podcast/technikwuerze-184-yaml-total/">über YAML 4 unterhalten</a>.</dd>
<dt><a href="http://getkirby.com/">Kirby</a></dt>
<dd>Ein datenbankfreies und damit rein dateisystembasiertes Content Management System. Für wenn was mal schnell und unkompliziert gehen soll (und das tut es!). Mehr Infos gibt es auch wieder drüben in der Technikwürze, und zwar in der <a href="http://technikwuerze.de/podcast/technikwuerze-183-kirby-total/">Folge &#8222;Kirby total&#8220;</a>.</dd>
<dt><a href="http://html5-demos.appspot.com/static/html5-therealbleedingedge/template/index.html#1">The Edge of HTML5</a></dt>
<dd>Alles, was gerade im HTML5-Kosmos geil und heiss ist in einer Präsentation versammelt. Schön, dass wir das meiste schon in der Sendung hatten! :)</dd>
<dt><a href="https://github.com/WebReflection/es6-collections">ES6 Harmony Collections Fast Polyfill</a></dt>
<dd>Eine JavaScript-Bibliothek von <a href="http://webreflection.blogspot.com/">Andrea Giammarchi</a> aus Berlin, die die neuen Funktionen von ECMAScript 6 Harmony in jedem Browser emuliert.</dd>
<dt><a href="https://github.com/ericam/compass-animation">Animation Compass Plugin</a></dt>
<dd>Dieses Plugin rüstet in COMPASS die bislang fehlenden CSS3 Animationen nach.</dd>
<dt><a href="http://html5please.us/">HTML5 Please</a></dt>
<dd>Verzeichnis aller HTML5 und CSS3 Bestandteile, mit Filter- und Suchfunktionen und Hinweisen zum aktuellen Stand der Benutzbarkeit.</dd>
</dl>


Peter und Schepp luden sich den Marc ein, und zu dritt sprachen man über…


SCHAUNOTIZEN

[00:00:15] GOOGLE WEB FONTS FAMILIES

Eine praktische Gesamtübersicht aller Schnitte aller Google Webfonts

[0…

Peter und Schepp luden sich den Marc ein, und zu dritt sprachen man über…


SCHAUNOTIZEN

[00:00:15] GOOGLE WEB FONTS FAMILIES

Eine praktische Gesamtübersicht aller Schnitte aller Google Webfonts

[00:10:00] FONT.JS: A POWERFUL FONT TOOLKIT FOR JAVASCRIPT

Font.js rüstet eingebettete Schriften mit Load-Events nach.

[00:22:00] CSS BASIC USER INTERFACE MODULE LEVEL 3 (CSS3 UI)

Wir entdeckten etwas Praktisches in diesem Working Draft, das Opera schon seit
Version 9.5 implementiert, und das speziell auf Fernsehern hilfreich ist: die
Keyboard Control Eigenschaften.

[00:29:27] WEBRTC

WebRTC ist ein größeres API-Baustein-Paket, mit dem sich alle Aufgaben von
Echtzeitkommunikation (Telefonie und Videotelefonie) im Browser abwickeln
lassen. Erfunden hat’s Google, aber mit an Board sind auch Opera und Mozilla.
Außerdem sprachen wir den auf WebRTC und Flash basierenden getUserMedia-Polyfill
von Addy Osmani an.

[00:39:05] WUNDERKIT

Wunderkit will ein Projektmanagment- und Organisationswerkzeug sein. Im Vorfeld
wurde eine hohe Erwartungshaltung erzeugt, so dass mit der nun startenden Beta
ein regelrechter Hype darum entbrannt ist. Wir klären, ob das gerechtfertigt ist
oder nicht.

[00:53:48] TRELLO

Von Wunderkit kamen wir zu Trello. Trello ist eine Art digitales
Karteikartensystem und wir nutzen es seit kurzem, um unsere Sendungsthemen zu
sammeln, zu sieben und zu sortieren.


[00:57:30] KEINE SCHAUNOTIZEN

GRIDPAK

Ein responsive Grid Generator.

YAML 4 IST DA!

Ein neues Major Release von YAML ist raus. YAML ist ein Layoutframework, das
ausnahmsweise mal nicht gridbasiert ist, das aber trotzdem alles kann, und das
auch noch in allen Browsern bis hinunter zum IE7er. Was ist in Version 4 neu?
Responsiveness und CSS-Klassen-Namespacing. Parallel zu uns hat sich die
Technikwürze mit dem Macher Dirk Jesse und weiteren Gästen über YAML 4
unterhalten.

KIRBY

Ein datenbankfreies und damit rein dateisystembasiertes Content Management
System. Für wenn was mal schnell und unkompliziert gehen soll (und das tut es!).
Mehr Infos gibt es auch wieder drüben in der Technikwürze, und zwar in der Folge
„Kirby total“.

THE EDGE OF HTML5

Alles, was gerade im HTML5-Kosmos geil und heiss ist in einer Präsentation
versammelt. Schön, dass wir das meiste schon in der Sendung hatten! :)

ES6 HARMONY COLLECTIONS FAST POLYFILL

Eine JavaScript-Bibliothek von Andrea Giammarchi aus Berlin, die die neuen
Funktionen von ECMAScript 6 Harmony in jedem Browser emuliert.

ANIMATION COMPASS PLUGIN

Dieses Plugin rüstet in COMPASS die bislang fehlenden CSS3 Animationen nach.

HTML5 PLEASE

Verzeichnis aller HTML5 und CSS3 Bestandteile, mit Filter- und Suchfunktionen
und Hinweisen zum aktuellen Stand der Benutzbarkeit.

Revision 56: Font.js, CSS3 UI & Wunderkit

<p>Diese Woche widmen sich <a href="http://twitter.com/#!/kahlillechelt">Kahlil</a> und <a href="http://twitter.com/#!/derSchepp">Schepp</a> einer Menge kleinerer Webfundstücke und Tools. Als da wären:</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:40] <a href="http://shichuan.github.com/javascript-patterns/">JavaScript Pattern Collection</a></dt>
<dd>Inspiriert und zusammengesammelt von vielen Quellen findet man hier Best-Practice-Code zur Lösung verschiedenster Aufgabenstellungen.</dd>
<dt>[00:03:50] <a href="http://www.kendoui.com/blogs/teamblog/posts/12-01-06/what_you_may_not_know_about_jquery.aspx?utm_source=javascriptweekly&#038;utm_medium=email">What You May Not Know About jQuery</a></dt>
<dd>Im Blog des jQuery Frameworks Kendo UI werden selten beachtete, aber nicht minder praktische jQuery Methoden beleuchtet.</dd>
<dt>[00:11:40] <a href="http://www.sublimetext.com/2">Sublime Text 2</a></dt>
<dd>Der leichtgewichtige und featurestarke Editor Sublime Text geht bald in die zweite Runde. Aktuell wird an der Beta gewerkelt und es gibt ihn für alle Desktop-Plattformen.</dd>
<dt>[00:15:41] <a href="http://cssdeck.com/">CSSDeck</a></dt>
<dd>CSSDeck klaut zwar das Design von <a href="http://dribbble.com/">Dribbble</a>, will aber kein Showcase für Design- sondern für CSS-Fähigkeiten sein. Zum direkt online Loscoden bietet es eine Art <a href="http://jsfiddle.net/">JSFiddle</a>/<a href="http://dabblet.com/">Dabblet</a> Interface, zu finden unter &#8222;<a href="http://cssdeck.com/t">Play</a>&#8222;.</dd>
<dt>[00:20:41] <a href="http://www.smashingmagazine.com/">Smashing Magazine Redesign</a></dt>
<dd>Das Smashing Magazine hat letzte Woche auf ein massivst responsives Layout umgestellt. Wir bequatschen, wo die Operation geglückt und wo eher missglückt ist.</dd>
<dt>[00:35:37] <a href="http://acko.net/blog/making-love-to-webkit/">Making Love to WebKit</a></dt>
<dd>Der Designer Steven Wittens hat seine Seite relaunched und sie komplett in 3D gebaut. Die Perspektive ist gekoppelt an die Scrollposition und verschiebt sich nach 2D, sobald man die Seite ein wenig herunterscrollt.</dd>
<dt>[00:41:58] <a href="http://livereload.com/">Live Reload</a></dt>
<dd>Live Reload ist ein Tool für Mac, das nur in einer instabilen Alpha für Windows vorliegt, und welches SASS/LESS/Stylus Dateien automatisch kompiliert und die resultierenden Styles live im gerade offenen Browser austauscht. Fast ähnlich läuft es mit JavaScript.</dd>
<dt>[00:46:08] <a href="http://peter.sh/2012/01/font-css-properties-selector-source-location-and-calc-tests/">Neues in WebKit</a></dt>
<dd>
<ul>
<li>Es wird daran gearbeitet, dass WebKit bald mit <a href="http://www.w3.org/TR/css3-values/#calc">CSS calc(), min() and max()</a> umgehen kann.</li>
<li>Auch in WebKit halten die ersten <a href="http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html">OpenType Features</a> Einzug, nämlich Kerning und Ligaturen.</li>
<li>In Chromes JavaScript Engine V8 lassen sich erste <a href="http://erik.eae.net/archives/2011/12/29/00.00.29/">ES.Next / JavaScript Harmony Features aktivieren und ausprobieren</a></li>
</ul>
</dd>
</dl>
<h3>[00:55:38] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">The Top 10 Javascript MVC Frameworks Reviewed</a></dt>
<dd>Gegenüberstellung verschiedener JavaScript MVC Frameworks.</dd>
<dt><a href="http://thinkpixellab.com/pxloader/">PxLoader</a></dt>
<dd>JavaScript Bibliothek zum Vorladen von Ressourcen.</dd>
<dt><a href="http://www.jqmobi.com/">jQ.Mobi</a></dt>
<dd>Ein neues mobile Web Framework à la jQuery Mobile und Sencha Touch.</dd>
</dl>


Diese Woche widmen sich Kahlil und Schepp einer Menge kleinerer Webfundstücke
und Tools. Als da wären:


SCHAUNOTIZEN

[00:00:40] JAVASCRIPT PATTERN COLLECTION

Inspiriert und zusammengesammelt von vi…

Diese Woche widmen sich Kahlil und Schepp einer Menge kleinerer Webfundstücke
und Tools. Als da wären:


SCHAUNOTIZEN

[00:00:40] JAVASCRIPT PATTERN COLLECTION

Inspiriert und zusammengesammelt von vielen Quellen findet man hier
Best-Practice-Code zur Lösung verschiedenster Aufgabenstellungen.

[00:03:50] WHAT YOU MAY NOT KNOW ABOUT JQUERY

Im Blog des jQuery Frameworks Kendo UI werden selten beachtete, aber nicht
minder praktische jQuery Methoden beleuchtet.

[00:11:40] SUBLIME TEXT 2

Der leichtgewichtige und featurestarke Editor Sublime Text geht bald in die
zweite Runde. Aktuell wird an der Beta gewerkelt und es gibt ihn für alle
Desktop-Plattformen.

[00:15:41] CSSDECK

CSSDeck klaut zwar das Design von Dribbble, will aber kein Showcase für Design-
sondern für CSS-Fähigkeiten sein. Zum direkt online Loscoden bietet es eine Art
JSFiddle/Dabblet Interface, zu finden unter „Play„.

[00:20:41] SMASHING MAGAZINE REDESIGN

Das Smashing Magazine hat letzte Woche auf ein massivst responsives Layout
umgestellt. Wir bequatschen, wo die Operation geglückt und wo eher missglückt
ist.

[00:35:37] MAKING LOVE TO WEBKIT

Der Designer Steven Wittens hat seine Seite relaunched und sie komplett in 3D
gebaut. Die Perspektive ist gekoppelt an die Scrollposition und verschiebt sich
nach 2D, sobald man die Seite ein wenig herunterscrollt.

[00:41:58] LIVE RELOAD

Live Reload ist ein Tool für Mac, das nur in einer instabilen Alpha für Windows
vorliegt, und welches SASS/LESS/Stylus Dateien automatisch kompiliert und die
resultierenden Styles live im gerade offenen Browser austauscht. Fast ähnlich
läuft es mit JavaScript.

[00:46:08] NEUES IN WEBKIT

 * Es wird daran gearbeitet, dass WebKit bald mit CSS calc(), min() and max()
   umgehen kann.
 * Auch in WebKit halten die ersten OpenType Features Einzug, nämlich Kerning
   und Ligaturen.
 * In Chromes JavaScript Engine V8 lassen sich erste ES.Next / JavaScript
   Harmony Features aktivieren und ausprobieren


[00:55:38] KEINE SCHAUNOTIZEN

THE TOP 10 JAVASCRIPT MVC FRAMEWORKS REVIEWED

Gegenüberstellung verschiedener JavaScript MVC Frameworks.

PXLOADER

JavaScript Bibliothek zum Vorladen von Ressourcen.

JQ.MOBI

Ein neues mobile Web Framework à la jQuery Mobile und Sencha Touch.

Revision 55: Webfundstücke und Devtools

<p>Frohes Neues wünschen wir Euch allen! <a href="http://twitter.com/#!/sirpepe">Peter</a> und <a href="http://twitter.com/#!/derSchepp">Schepp</a> reden über:</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:19] <a href="http://www.mozilla.org/de/firefox/">Firefox</a></dt>
<dd>Die nächsten Feuerfüchse warten mit einer ganzen Reihe wünschenswerter Neuerungen auf:</p>
<ul>
<li><a href="https://twitter.com/#!/brianbondy/statuses/154935867650224128">Der Firefox Nightly arbeitet nun wie Chrome mit Silent Updates</li>
<li><a href="http://blog.mozilla.com/addons/2012/01/05/default-compatibility-is-coming-and-your-help-is-needed/">Ab Firefox 10 sind Add-ons, umgekehrt zu früher, per se kompatibel</li>
<li><a href="http://blog.pearce.org.nz/2011/12/changes-to-dom-full-screen-api-in.html">Firefox 11 verbessert das Verhalten der Fullscreen API</a></li>
<li><a href="http://www.golem.de/1201/88956.html">Firefox 10 wird es für &#8222;Schlipse&#8220; (Corporate) in einer besonderen Extended Support Release (ESR) Version geben</a></li>
</ul>
</dd>
<dt>[00:23:48] <a href="http://www.w3.org/html/wg/next/markup/">Proposed HTML elements and attributes</a></dt>
<dd>Für HTML.Next sind eine Reihe neuer HTML-Bausteine angedacht, deren Umfang und Sinn wir erforschen.</dd>
<dt>[00:35:25] <a href="http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html">The New Web Typography</a></dt>
<dd>Firefox 8 und Internet Explorer 10 sind die ersten Browser, die für uns die ganzen Zusatzfeatures von OpenType Schriften wie Small Caps, Ligaturen, Numerale, Kerning, Fractions oder Alternative Zeichen freilegen. Da läuft dem Typo-Affiniado das Wasser im Munde zusammen!</dd>
<dt>[00:40:33] <a href="http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/">Profiling CSS for fun and profit. Optimization notes.</a></dt>
<dd>Juriy Zaytsev alias Kangax hat sich mal die neuen CSS Style Profiler von <a href="http://my.opera.com/dragonfly/blog/style-profiler-preview">Opera</a> und <a href="http://peter.sh/2012/01/css-selector-profiler-source-mapping-and-software-rendering/">WebKit</a> geschnappt und eine bestehende Single Page Webapp auf Selector- und CSS3 Performance hin abgeklappert. Uns kommt während des Gesprächs der <a href="http://css1k.com/#moonlight">CSS1K-Wettbewerb als CSS3-Belastungstest</a> sowie eine <a href="http://go.eatworms.com/mseeley-2011-09-27-html5devconf.pdf">Präsentation des UI Engineers von Netflix (PDF)</a> in den Sinn.</dd>
<dt>[00:55:20] <a href="http://www.nczonline.net/blog/2012/01/04/proposal-scripting-detection-using-css-media-queries/">Proposal: Scripting detection using CSS media queries</a></dt>
<dd>Nicholas Zakas schlägt als neue Media Query Abfrage <a href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0046.html">das Ab- oder Vorhandensein von JavaScript vor</a>, um in Zukunft auf den Workaround des .js/.no-js-Klassenverteilens verzichten zu können. Außerdem fanden wie das Script <a href="http://rezitech.github.com/syze/">SYZE.js</a> als Ersatz für Media Queries ganz nett.</dd>
</dl>
<h3>[01:11:57] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/">A Fix for the iOS Orientationchange Zoom Bug</a></dt>
<dd>Scott Jehl von der Filament Group hat einen neuen Fix für das Rotieren von Seiten auf iOS-Devices gebaut. Und zwar als er <a href="https://twitter.com/#!/scottjehl/status/155112110173597697">gerade in Kambodscha den Mekong auf einem Boot raufschipperte</a>. Der Fix ist quasi der Nachfolger desjenigen im <a href="http://html5boilerplate.com/mobile">Mobile Boilerplate</a>.</dd>
<dt><a href="http://bartaz.github.com/impress.js/">Impress.js</a></dt>
<dd>Impress.js ist eine Präsentationsframework, das wie <a href="http://prezi.com/">Prezi</a> funktioniert, dabei allerdings nicht auf Flash sondern auf CSS3 baut. Sehr schick!</dd>
<dt><a href="https://twitter.com/#!/kangax/status/153955271725690882">Fabric now has (almost complete) SVG export</a></dt>
<dd>Der oben erwähnte Kangax ist auch der Macher von <a href="https://github.com/kangax/fabric.js/">Fabric.js</a>, einer Canvas-Manipulationsbibliothek für JavaScript (und Node.js). Nachdem diese letztens in Version 0.5 gelernt hat, SVG nach Canvas zu importieren, beherrscht sie nun auch den Export nach SVG.</dd>
<dt><a href="http://shoptalkshow.com/">ShopTalk &#8211; A live web design and development podcast by Chris Coyier and Dave Rupert.</a></dt>
<dd>Dieser Podcast könnte interessant werden. In der ersten Folge zu Gast ist Jonathan Snook, der am 15. März auch einen <a href="http://smacss.com/workshops/">Workshop in Essen zum Thema SMACSS</a> geben wird.</dd>
<dt><a href="ftp://ftp.ccc.de/congress/2011/">FTP Server des Chaos Computer Club mit allen 28C3-Vorträgen zum Download.</a></dt>
<dd>Bei den Videos geht um Hacking im Allgemeinen, hier und da aber speziell auch ums Web Hacking.</dd>
</dl>


Frohes Neues wünschen wir Euch allen! Peter und Schepp reden über:


SCHAUNOTIZEN

[00:00:19] FIREFOX

Die nächsten Feuerfüchse warten mit einer ganzen Reihe wünschenswerter
Neuerungen auf:



 * Der …

Frohes Neues wünschen wir Euch allen! Peter und Schepp reden über:


SCHAUNOTIZEN

[00:00:19] FIREFOX

Die nächsten Feuerfüchse warten mit einer ganzen Reihe wünschenswerter
Neuerungen auf:



 * Der Firefox Nightly arbeitet nun wie Chrome mit Silent Updates
 * Ab Firefox 10 sind Add-ons, umgekehrt zu früher, per se kompatibel
 * Firefox 11 verbessert das Verhalten der Fullscreen API
 * Firefox 10 wird es für „Schlipse“ (Corporate) in einer besonderen Extended
   Support Release (ESR) Version geben

[00:23:48] PROPOSED HTML ELEMENTS AND ATTRIBUTES

Für HTML.Next sind eine Reihe neuer HTML-Bausteine angedacht, deren Umfang und
Sinn wir erforschen.

[00:35:25] THE NEW WEB TYPOGRAPHY

Firefox 8 und Internet Explorer 10 sind die ersten Browser, die für uns die
ganzen Zusatzfeatures von OpenType Schriften wie Small Caps, Ligaturen,
Numerale, Kerning, Fractions oder Alternative Zeichen freilegen. Da läuft dem
Typo-Affiniado das Wasser im Munde zusammen!

[00:40:33] PROFILING CSS FOR FUN AND PROFIT. OPTIMIZATION NOTES.

Juriy Zaytsev alias Kangax hat sich mal die neuen CSS Style Profiler von Opera
und WebKit geschnappt und eine bestehende Single Page Webapp auf Selector- und
CSS3 Performance hin abgeklappert. Uns kommt während des Gesprächs der
CSS1K-Wettbewerb als CSS3-Belastungstest sowie eine Präsentation des UI
Engineers von Netflix (PDF) in den Sinn.

[00:55:20] PROPOSAL: SCRIPTING DETECTION USING CSS MEDIA QUERIES

Nicholas Zakas schlägt als neue Media Query Abfrage das Ab- oder Vorhandensein
von JavaScript vor, um in Zukunft auf den Workaround des
.js/.no-js-Klassenverteilens verzichten zu können. Außerdem fanden wie das
Script SYZE.js als Ersatz für Media Queries ganz nett.


[01:11:57] KEINE SCHAUNOTIZEN

A FIX FOR THE IOS ORIENTATIONCHANGE ZOOM BUG

Scott Jehl von der Filament Group hat einen neuen Fix für das Rotieren von
Seiten auf iOS-Devices gebaut. Und zwar als er gerade in Kambodscha den Mekong
auf einem Boot raufschipperte. Der Fix ist quasi der Nachfolger desjenigen im
Mobile Boilerplate.

IMPRESS.JS

Impress.js ist eine Präsentationsframework, das wie Prezi funktioniert, dabei
allerdings nicht auf Flash sondern auf CSS3 baut. Sehr schick!

FABRIC NOW HAS (ALMOST COMPLETE) SVG EXPORT

Der oben erwähnte Kangax ist auch der Macher von Fabric.js, einer
Canvas-Manipulationsbibliothek für JavaScript (und Node.js). Nachdem diese
letztens in Version 0.5 gelernt hat, SVG nach Canvas zu importieren, beherrscht
sie nun auch den Export nach SVG.

SHOPTALK – A LIVE WEB DESIGN AND DEVELOPMENT PODCAST BY CHRIS COYIER AND DAVE
RUPERT.

Dieser Podcast könnte interessant werden. In der ersten Folge zu Gast ist
Jonathan Snook, der am 15. März auch einen Workshop in Essen zum Thema SMACSS
geben wird.

FTP SERVER DES CHAOS COMPUTER CLUB MIT ALLEN 28C3-VORTRÄGEN ZUM DOWNLOAD.

Bei den Videos geht um Hacking im Allgemeinen, hier und da aber speziell auch
ums Web Hacking.

Revision 54: Ein Sack voll Firefox, lahmes CSS und Media Queries

<p>Am 21.12.2011 fand das <a href="http://www.meetup.com/The-SmashingMagazine-Meetup/events/42026332/">dritte Smashing Magazine Meetup</a> statt, diesmal in Zusammenarbeit mit der <a href="http://stuttgart.gtugs.org/">Stuttgarter Google Technology Usergroup</a> in&#8230; ähm ja Stuttgart. Zu Besuch waren <a href="http://twitter.com/#!/paul_irish">Paul Irish</a> von Google, dessen Bruder in Stuttgart lebt und den er besuchte, sowie <a href="http://twitter.com/#!/codepo8">Chris Heilmann</a> von Mozilla, der auf Heimatbesuch war. Beide hielten je einen Vortrag: <a href="http://vimeo.com/34332821">History of HTML5 and The New Vocabulary of Web Dev</a> und <a href="http://vimeo.com/34333188">&#8222;Style and Distance &#8211; you don&#8217;t need to burn the museum to create a new world&#8220;</a>.</p>
<p>Wer auch da war, das waren Kahlil, Hans und Rodney. Dank <a href="http://twitter.com/#!/lilaineurope">Lisa</a> und <a href="http://twitter.com/#!/smashingmag">Vitaly</a> vom <a href="http://www.smashingmagazine.com">Smashing Mag</a> durften wir eine schöne Paneldiskussion auf die Beine stellen. Mit Hans an der Kamera interviewten Kahlil und Rodney Paul, Vitaly und Chris zu Themen wie Alphatier-Gekabbel, Sprachbarrieren, Wissensvermittlung, mobilen Geräten oder nativen UI-Elementen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:13:02] <a href="http://www.youtube.com/watch?v=va9xlJCbDZI">Smashing Magazine Meetup &#8211; Die Paneldiskussion</a></dt>
<dd style="margin: 0; padding: 0;"><iframe src="http://www.youtube.com/embed/U35O2Zd63AE?rel=0" frameborder="0" width="640" height="360"></iframe></dd>
</dl>


Am 21.12.2011 fand das dritte Smashing Magazine Meetup statt, diesmal in
Zusammenarbeit mit der Stuttgarter Google Technology Usergroup in… ähm ja
Stuttgart. Zu Besuch waren Paul Irish von Google, des…

Am 21.12.2011 fand das dritte Smashing Magazine Meetup statt, diesmal in
Zusammenarbeit mit der Stuttgarter Google Technology Usergroup in… ähm ja
Stuttgart. Zu Besuch waren Paul Irish von Google, dessen Bruder in Stuttgart
lebt und den er besuchte, sowie Chris Heilmann von Mozilla, der auf Heimatbesuch
war. Beide hielten je einen Vortrag: History of HTML5 and The New Vocabulary of
Web Dev und „Style and Distance – you don’t need to burn the museum to create a
new world“.

Wer auch da war, das waren Kahlil, Hans und Rodney. Dank Lisa und Vitaly vom
Smashing Mag durften wir eine schöne Paneldiskussion auf die Beine stellen. Mit
Hans an der Kamera interviewten Kahlil und Rodney Paul, Vitaly und Chris zu
Themen wie Alphatier-Gekabbel, Sprachbarrieren, Wissensvermittlung, mobilen
Geräten oder nativen UI-Elementen.


SCHAUNOTIZEN

[00:13:02] SMASHING MAGAZINE MEETUP – DIE PANELDISKUSSION

Revision 53: At the Smashing Magazine meetup!

<p>Nach seiner Endjahres-Ochsentour, endlich mal wieder eine Revision mit <a href="http://twitter.com/#!/sirpepe">Peter</a>. Außerdem dabei <a href="http://twitter.com/#!/kahlillechelt">Kahlil</a> und <a href="http://twitter.com/#!/derSchepp">Schepp</a>. Hierüber reden wir:</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:11] <a href="http://dabblet.com/">Dabblet</a></dt>
<dd>Ein JSFiddle für CSS, mit GitHub-Gist-Anbindung, von Lea Verou</dd>
<dt>[00:10:55] <a href="http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/">Auto-saving CSS And JavaScript Changes Locally From The Chrome Developer Tools</a></dt>
<dd>Eine Chrome-Erweiterung und eine lokale Node.js-Instanz machen es zusammen möglich, JS- und CSS-Änderungen, die man in den Chrome DevTools vornimmt, sofort lokal und dauerhaft ins Projekt zu übernehmen.</dd>
<dt>[00:17:46] <a href="http://www.sencha.com/blog/galaxy-nexus-the-html5-developer-scorecard/">Android—Ice Cream Sandwich: The HTML5 Developer Scorecard</a></dt>
<dd>Die Sencha Labs haben den Fähigkeiten des neuen Android-Browsers auf den Zahn gefühlt. Er ist ganz gut, zieht aber nie und nimmer an iOS 5 vorbei. Wir gehen außerdem noch auf einen Bug in den älteren Android Browsern ein, die zwar behaupten, CSS Animationen zu können, <a href="http://daneden.me/2011/12/putting-up-with-androids-bullshit/">dabei allerdings schwer patzen</a>. Während unseres Gesprächs fällt der Hinweis auf <a href="http://socket.io/">Socket.IO</a></dd>
<dt>[00:28:16] <a href="http://www.golem.de/1112/88460.html">Internet Explorer &#8211; Microsoft führt automatische Updates ein</a></dt>
<dd>LOL. ROFL. Nicht in diesem Leben!</dd>
<dt>[00:28:35] <a href="http://www.heise.de/ix/meldung/Zwei-kostenfreie-Codecs-kandidieren-fuer-MPEG-Standard-1393341.html">Zwei kostenfreie Codecs kandidieren für MPEG-Standard</a></dt>
<dd>Nachdem vor knapp einem Jahr die MPEG-Arbeitsgruppe der ISO mit dem Auswahlverfahren für einen lizenzkostenfreien Codec für Webvideo begonnen hatte, sind jetzt zwei Produkte in die engere Wahl gekommen: IVC und WebVC.</dd>
<dt>[00:38:46] <a href="http://code.google.com/intl/de-DE/webtoolkit/speedtracer/">Speed Tracer</a></dt>
<dd>Eine Extension für den Chrome aus dem Deveoper Channel, die einem in einer Timeline-Kurve genau aufzeigt, wann der Browser wie lange womit beschäftigt ist. Und Tipps gibt.</dd>
<dt>[00:45:16] <a href="http://net.tutsplus.com/articles/interviews/should-you-learn-coffeescript/">Should You Learn CoffeeScript?</a></dt>
<dd>Eine Sammlung von Argumenten, warum man sich mit CoffeeScript beschäftigen könnte. U.a. weil ECMAScript 6 sich davon inspirieren ließ, <a href="http://blip.tv/jsconfeu/brendan-eich-loljs-5656862">wie JavaScript-Erfinder Brandon Eich auf der JSConf.eu erzählte</a>.</dd>
</dl>
<h3>[00:56:24] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.youtube.com/multimediatreff">Videos des MMT29 &#8211; HTML5, CSS3 &#038; Co vom 03.12.2011</a></dt>
<dd>Hier findet Ihr die Vorträge von Patrick Lauke, Peter (Kröner), Sven Wolfermann, Adobe, Mathias Schäfer, Sebastian Golasch, Marco Zehe, Alois Reitbauer und Microsoft zu den Themen: HTML5, CSS3, Flash, JavaScript, Node.js, WAI-ARIA, Web Performance Optimization und ASP.net MVC 4.</dd>
<dt><a href="http://backbonetutorials.com/organizing-backbone-using-modules/">Tutorial zum Verwenden von Backbone.js mit AMD</a></dt>
<dd>Quasi eine Followup-Link zur letzten Revision über AMD.</dd>
<dt><a href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML 5 Canvas Deep Dive</a></dt>
<dd>Tutorial zur HTML5 Canvas.</dd>
<dt><a href="http://dev.opera.com/articles/view/better-error-handling-with-window-onerror/">Better error handling with window.onerror</a></dt>
<dd>Was man alles mit dem neuen window.onerror-Event treiben kann.</dd>
</dl>


Nach seiner Endjahres-Ochsentour, endlich mal wieder eine Revision mit Peter.
Außerdem dabei Kahlil und Schepp. Hierüber reden wir:


SCHAUNOTIZEN

[00:00:11] DABBLET

Ein JSFiddle für CSS, mit GitHub…

Nach seiner Endjahres-Ochsentour, endlich mal wieder eine Revision mit Peter.
Außerdem dabei Kahlil und Schepp. Hierüber reden wir:


SCHAUNOTIZEN

[00:00:11] DABBLET

Ein JSFiddle für CSS, mit GitHub-Gist-Anbindung, von Lea Verou

[00:10:55] AUTO-SAVING CSS AND JAVASCRIPT CHANGES LOCALLY FROM THE CHROME
DEVELOPER TOOLS

Eine Chrome-Erweiterung und eine lokale Node.js-Instanz machen es zusammen
möglich, JS- und CSS-Änderungen, die man in den Chrome DevTools vornimmt, sofort
lokal und dauerhaft ins Projekt zu übernehmen.

[00:17:46] ANDROID—ICE CREAM SANDWICH: THE HTML5 DEVELOPER SCORECARD

Die Sencha Labs haben den Fähigkeiten des neuen Android-Browsers auf den Zahn
gefühlt. Er ist ganz gut, zieht aber nie und nimmer an iOS 5 vorbei. Wir gehen
außerdem noch auf einen Bug in den älteren Android Browsern ein, die zwar
behaupten, CSS Animationen zu können, dabei allerdings schwer patzen. Während
unseres Gesprächs fällt der Hinweis auf Socket.IO

[00:28:16] INTERNET EXPLORER – MICROSOFT FÜHRT AUTOMATISCHE UPDATES EIN

LOL. ROFL. Nicht in diesem Leben!

[00:28:35] ZWEI KOSTENFREIE CODECS KANDIDIEREN FÜR MPEG-STANDARD

Nachdem vor knapp einem Jahr die MPEG-Arbeitsgruppe der ISO mit dem
Auswahlverfahren für einen lizenzkostenfreien Codec für Webvideo begonnen hatte,
sind jetzt zwei Produkte in die engere Wahl gekommen: IVC und WebVC.

[00:38:46] SPEED TRACER

Eine Extension für den Chrome aus dem Deveoper Channel, die einem in einer
Timeline-Kurve genau aufzeigt, wann der Browser wie lange womit beschäftigt ist.
Und Tipps gibt.

[00:45:16] SHOULD YOU LEARN COFFEESCRIPT?

Eine Sammlung von Argumenten, warum man sich mit CoffeeScript beschäftigen
könnte. U.a. weil ECMAScript 6 sich davon inspirieren ließ, wie
JavaScript-Erfinder Brandon Eich auf der JSConf.eu erzählte.


[00:56:24] KEINE SCHAUNOTIZEN

VIDEOS DES MMT29 – HTML5, CSS3 & CO VOM 03.12.2011

Hier findet Ihr die Vorträge von Patrick Lauke, Peter (Kröner), Sven Wolfermann,
Adobe, Mathias Schäfer, Sebastian Golasch, Marco Zehe, Alois Reitbauer und
Microsoft zu den Themen: HTML5, CSS3, Flash, JavaScript, Node.js, WAI-ARIA, Web
Performance Optimization und ASP.net MVC 4.

TUTORIAL ZUM VERWENDEN VON BACKBONE.JS MIT AMD

Quasi eine Followup-Link zur letzten Revision über AMD.

HTML 5 CANVAS DEEP DIVE

Tutorial zur HTML5 Canvas.

BETTER ERROR HANDLING WITH WINDOW.ONERROR

Was man alles mit dem neuen window.onerror-Event treiben kann.

Revision 52: Android 4.0, Webvideo & CoffeeScript

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 63: Responsiver Content, Firefox 11 und Offene Datenquellen

Working Draft

Revision 62: Adobe Shadow, Mobile und Gerante – Live!

Working Draft

Revision 61: HTML5 Please API, Boot to Gecko, Image Replacements

Working Draft

Revision 60: Adobe Edge, Web Components & Informationsquellen

Working Draft

Revision 59: Wie ticken Webentwickler?

Working Draft

Revision 58: -webkit-CSS3, -webkit-SEO und -webkit-MMT

Working Draft

Revision 57: IDBExplorer, Gradient Syntax & Wrap.js

Working Draft

Revision 56: Font.js, CSS3 UI & Wunderkit

Working Draft

Revision 55: Webfundstücke und Devtools

Working Draft

Revision 54: Ein Sack voll Firefox, lahmes CSS und Media Queries

Working Draft

Revision 53: At the Smashing Magazine meetup!

Working Draft

Revision 52: Android 4.0, Webvideo & CoffeeScript

Working Draft