<p>Frostig war es draußen, und Vollmond womöglich auch, als sich Schepp mit <a href="http://www.mademyday.de/">Marc Hinse</a>, aka <a href="http://twitter.com/#!/MadeMyDay">@MadeMyDay</a>, und <a href="http://drublic.de">Hans Reinl</a>, aka <a href="https://twitter.com/#!/drublic">@drublic</a> und Frontendentwickler aus Freiburg, ans virtuelle Kaminfeuer setzte und mit ihnen zusammen die Woche revuepassieren ließ.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:50] <a href="http://badassjs.com/post/12035631618/broadway-an-h-264-decoder-in-javascript-running-at">Broadway: An H.264 Decoder in JavaScript Running at 30fps</a></dt>
<dd>Endlich hat jemand mit <a href="https://github.com/kripken/emscripten">Emscripten</a> einen H.264-Polyfill gebaut, und zwar auf Basis des quelloffenen Android C++ H.264-Decoders. Läuft derzeit nur in Firefox mit aktivierter Type Inference, aber es ist ein Schritt in die richtige Richtung! Auf GitHub liegt das <a href="https://github.com/mbebenita/Broadway">Projekt</a>, <a href="http://yfrog.com/nmng0z">ein Video davon in Aktion</a> gibt es auch.</dd>
<dt>[00:08:40] <a href="http://blog.whatwg.org/weekly-time-data">WHATWG Weekly: Now it’s &lt;time&gt; for &lt;data&gt;</a></dt>
<dd>Dem Hixie ging das <code>&lt;time&gt;</code>-Element seit July volles Pfund auf die Eier. Also hat er es aus der WHATWG HTML5 Spec gekickt und als Ersatz das generische <code>&lt;data&gt;</code> vorgeschlagen. Nun laufen alle Amok und betreiben <a href="https://twitter.com/search/realtime/#occupyhtml5">#occupyhtml5</a>. Eric Eggert hat die Fakten mal <a href="http://willyou.typewith.me/p/9Zl7I2dOKs">zusammengesammelt</a>. Und Jeremy Keith hat das Ganze in Worte <a href="http://adactio.com/journal/4982/">gekleidet</a>.</dd>
<dt>[00:24:10] <a href="http://blog.jquery.com/2011/10/24/announcing-the-jquery-standards-team/">Announcing the jQuery Standards Team</a></dt>
<dd>Weil Spec-Editoren und Browserhersteller kaum weiter entfernt von der Webworker-Praxis sein könnten, Webworker aber bislang in den Gremien weder eine Lobby, noch brauchbaren Zugang zu den Entwicklungsprozessen hatten, haben sich die jQuery-Macher gedacht: &#8222;Das muss sich ändern!&#8220; Mit &#8222;jQuery&#8220; als Vehikel sollen von diesem Standards Team Vorschläge aus der Community gesammelt, destilliert und in die Gremien eingebracht werden. Jeder darf mitmachen!</a></dd>
<dt>[00:34:55] <a href="http://mathiasbynens.be/notes/css-hidden-elements">Displaying hidden elements like <code>&lt;head&gt;</code> using CSS</a></dt>
<dd>In dieser Woche stolperten wir über dieses nicht ganz brandneue Thema, dass man ja auch Elemente aus dem HTML-Kopfbereich sichtbar und sich zunutze machen kann. Möglicherweise brotlose Kunst, aber geil!</dd>
<dt>[00:49:44] <a href="http://www.unmatchedstyle.com/cssoff/">Umatchedstyle CSSOff</a></dt>
<dd>CSSOff ist ein mit großem Trommelwirbel angekündigter CSS-Wettbewerb. Da wir uns alle Drei dafür angemeldet haben, tauschen wir uns darüber natürlich aus.</dd>
</dl>
<h3>[01:12:05] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://toolbox.no.de/">The Node Toolbox</a></dt>
<dd>AaaLLE Node.js-Erweiterungen, die es überhaupt gibt. In einem sortierten Katalog. Na gut, vielleicht nicht alle. Aber fast.</dd>
<dt><a href="http://vimeo.com/musicstore">Vimeo Musicstore</a></dt>
<dd>Vimeo vertreibt seit dieser Woche kostenlos nutzbare, wie auch gegen einen kleinen Obulus nutzbare Musiktracks zum Hinterlegen von Video oder (CSS-)Animationen.</dd>
<dt><a href="http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/">Useful Coding Tools and JavaScript Libraries For Web Developers</a></dt>
<dd>Wieder mal ein umfassender Rundumschlag durch die Welt der neuen Webservices und Tools für Webentwickler.</dd>
<dt><a href="http://lea.verou.me/2011/10/animatable-a-css-transitions-gallery/">Animatable: A CSS transitions gallery</a></dt>
<dd>CSS-Guru-esse Lea Verou hat sich das Thema CSS Transitions vorgenommen und <a href="http://leaverou.github.com/animatable/">ein Showcase</a> animierbarer Elementeigenschaften aufgesetzt.</dd>
</dl>


Frostig war es draußen, und Vollmond womöglich auch, als sich Schepp mit Marc
Hinse, aka @MadeMyDay, und Hans Reinl, aka @drublic und Frontendentwickler aus
Freiburg, ans virtuelle Kaminfeuer setzte u…

Working Draft

Frostig war es draußen, und Vollmond womöglich auch, als sich Schepp mit Marc
Hinse, aka @MadeMyDay, und Hans Reinl, aka @drublic und Frontendentwickler aus
Freiburg, ans virtuelle Kaminfeuer setzte und mit ihnen zusammen die Woche
revuepassieren ließ.


SCHAUNOTIZEN

[00:00:50] BROADWAY: AN H.264 DECODER IN JAVASCRIPT RUNNING AT 30FPS

Endlich hat jemand mit Emscripten einen H.264-Polyfill gebaut, und zwar auf
Basis des quelloffenen Android C++ H.264-Decoders. Läuft derzeit nur in Firefox
mit aktivierter Type Inference, aber es ist ein Schritt in die richtige
Richtung! Auf GitHub liegt das Projekt, ein Video davon in Aktion gibt es auch.

[00:08:40] WHATWG WEEKLY: NOW IT’S <TIME> FOR <DATA>

Dem Hixie ging das <time>-Element seit July volles Pfund auf die Eier. Also hat
er es aus der WHATWG HTML5 Spec gekickt und als Ersatz das generische <data>
vorgeschlagen. Nun laufen alle Amok und betreiben #occupyhtml5. Eric Eggert hat
die Fakten mal zusammengesammelt. Und Jeremy Keith hat das Ganze in Worte
gekleidet.

[00:24:10] ANNOUNCING THE JQUERY STANDARDS TEAM

Weil Spec-Editoren und Browserhersteller kaum weiter entfernt von der
Webworker-Praxis sein könnten, Webworker aber bislang in den Gremien weder eine
Lobby, noch brauchbaren Zugang zu den Entwicklungsprozessen hatten, haben sich
die jQuery-Macher gedacht: „Das muss sich ändern!“ Mit „jQuery“ als Vehikel
sollen von diesem Standards Team Vorschläge aus der Community gesammelt,
destilliert und in die Gremien eingebracht werden. Jeder darf mitmachen!

[00:34:55] DISPLAYING HIDDEN ELEMENTS LIKE <HEAD> USING CSS

In dieser Woche stolperten wir über dieses nicht ganz brandneue Thema, dass man
ja auch Elemente aus dem HTML-Kopfbereich sichtbar und sich zunutze machen kann.
Möglicherweise brotlose Kunst, aber geil!

[00:49:44] UMATCHEDSTYLE CSSOFF

CSSOff ist ein mit großem Trommelwirbel angekündigter CSS-Wettbewerb. Da wir uns
alle Drei dafür angemeldet haben, tauschen wir uns darüber natürlich aus.


[01:12:05] KEINE SCHAUNOTIZEN

THE NODE TOOLBOX

AaaLLE Node.js-Erweiterungen, die es überhaupt gibt. In einem sortierten
Katalog. Na gut, vielleicht nicht alle. Aber fast.

VIMEO MUSICSTORE

Vimeo vertreibt seit dieser Woche kostenlos nutzbare, wie auch gegen einen
kleinen Obulus nutzbare Musiktracks zum Hinterlegen von Video oder
(CSS-)Animationen.

USEFUL CODING TOOLS AND JAVASCRIPT LIBRARIES FOR WEB DEVELOPERS

Wieder mal ein umfassender Rundumschlag durch die Welt der neuen Webservices und
Tools für Webentwickler.

ANIMATABLE: A CSS TRANSITIONS GALLERY

CSS-Guru-esse Lea Verou hat sich das Thema CSS Transitions vorgenommen und ein
Showcase animierbarer Elementeigenschaften aufgesetzt.

Revision 45: H.264 in JS, jQuery Standards Team & OccupyHTML5!

<p>Was wir lange wollten, haben wir diesmal geschafft: Den <a href="http://maddesigns.de/">Sven Wolfermann</a>, auch bekannt als <a href="http://twitter.com/#!/maddesigns">@maddesigns</a> aus der Nähe von Berlin endlich mal in unsere Sendung einzuladen. Leider ist uns in dem Zusammenhang die Tonqualität wieder mal etwas entglitten. Sorry dafür.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] <a href="https://tools.ietf.org/html/draft-nottingham-http-new-status-02">Additional HTTP Status Codes</a></dt>
<dd>Die Internet Engineering Task Force hat sich überlegt, dass die Welt neue HTTP-Statuscodes braucht. Welche das sind und wofür die gut sind (oder auch nicht), darüber sinnieren wir.</dd>
<dt>[00:00:00] <a href="http://tagneto.blogspot.com/2011/10/requirejs-10-released.html">RequireJS 1.0 released</a></dt>
<dd>Wir schauen uns den JavaScript-Loader namens RequireJS anlässlich seines finalen Releases an und besprechen, welche Probleme es lösen soll und <a href="http://thinkvitamin.com/code/javascript/organize-your-code-with-requirejs/">wie man es einsetzt</a>.</dd>
<dt>[00:00:00] <a href="http://labs.opera.com/news/2011/10/19/">More fun using the Web, with getUserMedia and native pages!</a></dt>
<dd>Eine Labs-Version des Opera Browsers wartet mit Webcam- und Mikrozugriff, vor allem aber mit einer Teilimplementation des <a href="http://dev.w3.org/csswg/css3-gcpm/">CSS Generated Content for Paged Media Modules</a> auf. Dazu noch folgender Link: <a href="http://people.opera.com/howcome/2011/reader/index.html">http://people.opera.com/howcome/2011/reader/index.html</a></dd>
<dt>[00:00:00] <a href="http://pimpmyjs.com/">PimpMyJS</a></dt>
<dd>Ein Frontend für den JavaScript/Node.js-basierten JavaScript-Minifizierer und -Verschönerer <a href="https://github.com/mishoo/UglifyJS">UglifyJS</a>, der übrigens auch in den Chrome Dev Tools steckt. Webservice hier: <a href="http://marijnhaverbeke.nl/uglifyjs">http://marijnhaverbeke.nl/uglifyjs</a></dd>
<dt>[00:00:00] <a href="http://wiki.typo3.org/TYPO3_4.6">TYPO3 4.6 Release Notes</a></dt>
<dd>TYPO3 4.6 ist erschienen und Sven erzählt uns, was es Neues kann!</dd>
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://img.dreamdealer.nl/dd/css_term_poster.pdf">CSS Term Poster (PDF)</a></dt>
<dd>Ein Cheatsheet mit den korrekten Bezeichnungen der CSS-Syntax-Elemente.</dd>
<dt><a href="http://daneden.me/animate/">Animate.css</a></dt>
<dd>Eine Sammlung fertiger CSS Animationen als Drop-in-Lösung</dd>
<dt><a href="http://blogs.adobe.com/labs/archives/2011/10/adobe-fireworks-css3-mobile-pack-released-to-labs.html">CSS3 Mobile Pack for Adobe® Fireworks® CS5</a></dt>
<dd>Ein Exporter von Fireworks zu CSS3.</dd>
</dl>


Was wir lange wollten, haben wir diesmal geschafft: Den Sven Wolfermann, auch
bekannt als @maddesigns aus der Nähe von Berlin endlich mal in unsere Sendung
einzuladen. Leider ist uns in dem Zusammenha…

Was wir lange wollten, haben wir diesmal geschafft: Den Sven Wolfermann, auch
bekannt als @maddesigns aus der Nähe von Berlin endlich mal in unsere Sendung
einzuladen. Leider ist uns in dem Zusammenhang die Tonqualität wieder mal etwas
entglitten. Sorry dafür.


SCHAUNOTIZEN

[00:00:00] ADDITIONAL HTTP STATUS CODES

Die Internet Engineering Task Force hat sich überlegt, dass die Welt neue
HTTP-Statuscodes braucht. Welche das sind und wofür die gut sind (oder auch
nicht), darüber sinnieren wir.

[00:00:00] REQUIREJS 1.0 RELEASED

Wir schauen uns den JavaScript-Loader namens RequireJS anlässlich seines finalen
Releases an und besprechen, welche Probleme es lösen soll und wie man es
einsetzt.

[00:00:00] MORE FUN USING THE WEB, WITH GETUSERMEDIA AND NATIVE PAGES!

Eine Labs-Version des Opera Browsers wartet mit Webcam- und Mikrozugriff, vor
allem aber mit einer Teilimplementation des CSS Generated Content for Paged
Media Modules auf. Dazu noch folgender Link:
http://people.opera.com/howcome/2011/reader/index.html

[00:00:00] PIMPMYJS

Ein Frontend für den JavaScript/Node.js-basierten JavaScript-Minifizierer und
-Verschönerer UglifyJS, der übrigens auch in den Chrome Dev Tools steckt.
Webservice hier: http://marijnhaverbeke.nl/uglifyjs

[00:00:00] TYPO3 4.6 RELEASE NOTES

TYPO3 4.6 ist erschienen und Sven erzählt uns, was es Neues kann!


[00:00:00] KEINE SCHAUNOTIZEN

CSS TERM POSTER (PDF)

Ein Cheatsheet mit den korrekten Bezeichnungen der CSS-Syntax-Elemente.

ANIMATE.CSS

Eine Sammlung fertiger CSS Animationen als Drop-in-Lösung

CSS3 MOBILE PACK FOR ADOBE® FIREWORKS® CS5

Ein Exporter von Fireworks zu CSS3.

Revision 44: HTTP-Statuscodes, TYPO3 und ’n Echo, echo, cho, o….

<p>Diesmal nur zu zweit, da Markus derzeit den Status &#8222;homeless&#8220; und damit &#8222;wireless&#8220; innehat.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:17] <a href="http://fronteers.nl/congres/2011">Fronteers 2011</a></dt>
<dd>Schepp war bei der diesjährigen Fronteers Konferenz in Amsterdam und erzählt, wie er es fand. Videos der Talks trudeln nach und nach auf <a href="http://vimeo.com/channels/fronteers11">Vimeo</a> ein.</dd>
<dt><a href="http://www.web-devcon.de/">Web DevCon 2011</a></dt>
<dd>Peter hingegen war als Speaker auf der Web DevCon in Hamburg eingeladen, und fand sie nerdiger vor als gedacht. Seine Entdekung dort: Der <a href=" http://aloha-editor.org/">Aloha Editor</a>.</dd>
<dt>[00:24:36] <a href="http://dev.w3.org/csswg/css3-images/#image-notation">Image Fallbacks and Annotations: the ‘image()’ notation</a></dt>
<dd>Auf der Fronteers präsentierte Tab Atkins Jr. Ideen der W3C CSS Working Group, und davon waren besonders interessant: <a href="http://dev.w3.org/csswg/css3-images/#image-notation">Image Fallbacks and Annotations: the ‘image()’ notation</a>, <a href="http://dev.w3.org/csswg/css3-images/#element-reference">Using Elements as Images: the ‘element()’ function</a>, <a href="http://dev.w3.org/csswg/css3-images/#image-resolution">Overriding Image Resolutions: the ‘image-resolution’ property</a> und die <a href="http://www.w3.org/TR/2011/WD-media-frags-20110317/">Media Fragments</a>.</dd>
<dt>[00:39:02] <a href="http://dev.w3.org/csswg/css3-images/#linear-gradients">Die Syntax der linearen Verläufe hat sich geändert!</a></dt>
<dd>Anstatt wie bisher mit einem Richtungswort zu definieren, wo ein Verlauf startet, gibt es bald womöglich die Syntax &#8222;to&#8220; + Richtungswort, die dann festlegt, wo er hinläuft. Wir fragen uns, was das für Konsequenzen auf bisherigen Code haben könnte.</dd>
<dt>[00:50:35] <a href="http://www.dartlang.org/">Dart: Structured Web Programming</a></dt>
<dd>Google hat nun endlich Dart vorgestellt. Und nicht nur Peter ist unterwältigt. Wofür könnte man Dart genau brauchen?</dd>
<dt>[01:07:03] <a href="http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/">16 Pixels for Body Copy. Anything Less is a Costly Mistake</a></dt>
<dd>Wir nehmen diesen Artikel zum Anlass, uns hinsichtlich Schriftgrößen auf Webseiten auszutauschen. Der Artikel meint: Minimum 16 Pixel! Gerne mehr.</dd>
</dl>
<h3>[01:14:10] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://javascriptshow.com/">The JavaScript Show</a></dt>
<dd>Sehr netter, wöchentlich erscheinender Podcast, in dem Peter Cooper und Jason Seifer neueste Funde in Sachen JavaScript präsentieren.</dd>
<dt><a href="http://webexpedition18.com/articles/useful-css-snippets/">Incredibly Useful CSS Snippets</a></dt>
<dd>Nur die besten CSS-Code-Snippets liegen auf dieser Seite bereit, um von Euch per Copy &#038; Paste geräubert zu werden. Das ist 1A Ware!</dd>
<dt><a href="http://jaffathecake.posterous.com/html-component-model-the-shadow-dom">HTML Component Model &#038; the Shadow DOM</a></dt>
<dd>Ein Umfassender Artikel Jake Archibalds rund um die Web Components und das Shadow DOM, mit denen sich in Zukunft neue, fehlende HTML-Elemente definieren und erzeugen lassen.</dd>
</dl>


Diesmal nur zu zweit, da Markus derzeit den Status „homeless“ und damit
„wireless“ innehat.


SCHAUNOTIZEN

[00:00:17] FRONTEERS 2011

Schepp war bei der diesjährigen Fronteers Konferenz in Amsterdam …

Diesmal nur zu zweit, da Markus derzeit den Status „homeless“ und damit
„wireless“ innehat.


SCHAUNOTIZEN

[00:00:17] FRONTEERS 2011

Schepp war bei der diesjährigen Fronteers Konferenz in Amsterdam und erzählt,
wie er es fand. Videos der Talks trudeln nach und nach auf Vimeo ein.

WEB DEVCON 2011

Peter hingegen war als Speaker auf der Web DevCon in Hamburg eingeladen, und
fand sie nerdiger vor als gedacht. Seine Entdekung dort: Der Aloha Editor.

[00:24:36] IMAGE FALLBACKS AND ANNOTATIONS: THE ‘IMAGE()’ NOTATION

Auf der Fronteers präsentierte Tab Atkins Jr. Ideen der W3C CSS Working Group,
und davon waren besonders interessant: Image Fallbacks and Annotations: the
‘image()’ notation, Using Elements as Images: the ‘element()’ function,
Overriding Image Resolutions: the ‘image-resolution’ property und die Media
Fragments.

[00:39:02] DIE SYNTAX DER LINEAREN VERLÄUFE HAT SICH GEÄNDERT!

Anstatt wie bisher mit einem Richtungswort zu definieren, wo ein Verlauf
startet, gibt es bald womöglich die Syntax „to“ + Richtungswort, die dann
festlegt, wo er hinläuft. Wir fragen uns, was das für Konsequenzen auf
bisherigen Code haben könnte.

[00:50:35] DART: STRUCTURED WEB PROGRAMMING

Google hat nun endlich Dart vorgestellt. Und nicht nur Peter ist unterwältigt.
Wofür könnte man Dart genau brauchen?

[01:07:03] 16 PIXELS FOR BODY COPY. ANYTHING LESS IS A COSTLY MISTAKE

Wir nehmen diesen Artikel zum Anlass, uns hinsichtlich Schriftgrößen auf
Webseiten auszutauschen. Der Artikel meint: Minimum 16 Pixel! Gerne mehr.


[01:14:10] KEINE SCHAUNOTIZEN

THE JAVASCRIPT SHOW

Sehr netter, wöchentlich erscheinender Podcast, in dem Peter Cooper und Jason
Seifer neueste Funde in Sachen JavaScript präsentieren.

INCREDIBLY USEFUL CSS SNIPPETS

Nur die besten CSS-Code-Snippets liegen auf dieser Seite bereit, um von Euch per
Copy & Paste geräubert zu werden. Das ist 1A Ware!

HTML COMPONENT MODEL & THE SHADOW DOM

Ein Umfassender Artikel Jake Archibalds rund um die Web Components und das
Shadow DOM, mit denen sich in Zukunft neue, fehlende HTML-Elemente definieren
und erzeugen lassen.

Revision 43: Tripreports, CSS Image Values und Dart

<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:44.000] <a href="http://paulirish.com/2011/browser-market-pollution-iex-is-the-new-ie6/">You may soon be developing for 76 browsers.</a></dt>
<dd>Paul Irish sagt eine Zukunft voraus, in der wir für 72 Internet Explorer entwickeln werden. Das liegt dann angeblich an der 10-Jahre-Support-Regelung von Microsoft.</dd>
<dt>[00:19:39.000] <a href="http://joehewitt.com/2011/09/22/web-technologies-need-an-owner">Web technologies need an owner</a></dt>
<dd>Joe Hewitt (Firebug-Entwickler und einst bei Facebook) meint, dass das Web doomed ist und wir einen Diktator brauchen.</dd>
<dt>[00:39:50.000] <a href="http://smacss.com/book/">SMACSS &#8211; A Scalable and Modular Architecture for CSS</a></dt>
<dd>Regeln für ordentliches CSS.</dd>
<dt>[00:54:42.000] <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html">CSS shaders</a></dt>
<dd>Selbstprogrammierte Shader-Effekte auf normale HTML-Elemente anwenden.</dd>
<dt>[01:04:50.000] Ein Award</dt>
<dd>Und wir sagen nicht, worum es geht.</dd>
<dt>[01:09:05.000] <a href="http://www.multimediatreff.de/naechstestreffen.php">Multimediatreff in Köln</a></dt>
<dd>Hinfahren!</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<ul>
<li><a href="https://stripe.com/">Stripe.com</a></li>
<li><a href="http://peerbind.com/">Peerbind</a></li>
<li><a href="https://github.com/sickill/git-dude">git-dude</a></li>
<li><a href="http://www.cdnplanet.com/">cdnplanet.com</a></li>
<li><a href="http://www.netmagazine.com/tutorials/create-interactive-street-view-jquery">Streetview mit jQuery</a></li>
</ul>


SCHAUNOTIZEN

[00:00:44.000] YOU MAY SOON BE DEVELOPING FOR 76 BROWSERS.

Paul Irish sagt eine Zukunft voraus, in der wir für 72 Internet Explorer
entwickeln werden. Das liegt dann angeblich an der 10…

SCHAUNOTIZEN

[00:00:44.000] YOU MAY SOON BE DEVELOPING FOR 76 BROWSERS.

Paul Irish sagt eine Zukunft voraus, in der wir für 72 Internet Explorer
entwickeln werden. Das liegt dann angeblich an der 10-Jahre-Support-Regelung von
Microsoft.

[00:19:39.000] WEB TECHNOLOGIES NEED AN OWNER

Joe Hewitt (Firebug-Entwickler und einst bei Facebook) meint, dass das Web
doomed ist und wir einen Diktator brauchen.

[00:39:50.000] SMACSS – A SCALABLE AND MODULAR ARCHITECTURE FOR CSS

Regeln für ordentliches CSS.

[00:54:42.000] CSS SHADERS

Selbstprogrammierte Shader-Effekte auf normale HTML-Elemente anwenden.

[01:04:50.000] EIN AWARD

Und wir sagen nicht, worum es geht.

[01:09:05.000] MULTIMEDIATREFF IN KÖLN

Hinfahren!


KEINE SCHAUNOTIZEN

 * Stripe.com
 * Peerbind
 * git-dude
 * cdnplanet.com
 * Streetview mit jQuery

Revision 42: Zweiundvierzig!

<p>Und noch einmal bekamen wir Verstärkung von <a href="https://plus.google.com/100716543757626923860/posts">Rodney Rehm</a>. Wir waren ganz schöne Quatschlieseln, aber es ist auch ganz schön was bei herumgekommen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:26] <a href="http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html">setImmediate API</a></dt>
<dd>Mit dem IE10 erblickt die setImmediate API das Licht der Welt und soll dabei helfen, rechenintensives JavaScript zu segmentieren. Für alle anderen Browser gibt es einen sehr cleveren <a href="https://github.com/NobleJS/setImmediate/blob/master/setImmediate.js">Polyfill</a>.</dd>
<dt>[00:11:03] <a href="http://www.netmagazine.com/features/exclusive-preview-hottest-css-specs">Exclusive preview of the hottest CSS specs</a></dt>
<dd>Divya Manian gibt in dem Artikel Ausblick auf 13 zukünftige CSS-Specs. Von denen habe nwir uns die heißesten Kandidaten herausgepickt, nämlich Compositing und CSS Filters, und haben sie diskutiert. Außerdem streifen wir thematisch das Flexbox-Polyfill <a href="http://flexiejs.com/playground/">Flexie.js</a>.</dd>
<dt>[00:25:15] <a href="http://dev.w3.org/csswg/css-variables/">CSS Variables</a></dt>
<dd>Nicht mit in der Liste standen die CSS Variablen, zu denen es seit neustem einen Editor&#8217;s Draft gibt und die noch dieses Jahr in Chrome landen sollen.</dd>
<dt>[00:36:55] <a href="http://www.protofunc.com/2011/09/25/die-wahren-probleme-von-html5-polyfills-html5-shim-und-das-ende-des-3-schichten-modells-teil-1/">Die wahren Probleme von HTML5 Polyfills: HTML5 shim und das Ende des 3 Schichten-Modells (Teil 1)</a></dt>
<dd>Alexander Farkas, und vor allem Peter finden: Die neuen semantischen HTML5-Elemente sind überflüssiger bzw. gefährlicher Ranz. Als Randnotiz ließ Peter <a href="http://html5accessibility.com/">http://html5accessibility.com/</a> fallen.</dd>
<dt>[00:52:30] <a href="http://www.datenschutz-hamburg.de/news/detail/article/beanstandungsfreier-betrieb-von-google-analytics-ab-sofort-moeglich.html?tx_ttnews%5BbackPid%5D=170&amp;cHash=09e1cbe956f62edb1e9f0386b4ca78f5">Datenschutztheater</a></dt>
<dd>Peter echauffiert sich über Politik. Ganz allgemein. Und für rund 2:25 min&#8230; :)</dd>
<dt>[00:55:55] <a href="http://www.datenschutz-hamburg.de/news/detail/article/beanstandungsfreier-betrieb-von-google-analytics-ab-sofort-moeglich.html?tx_ttnews%5BbackPid%5D=170&amp;cHash=09e1cbe956f62edb1e9f0386b4ca78f5">Beanstandungsfreier Betrieb von Google Analytics ab sofort möglich</a></dt>
<dd>Alles nur ein Vorgeplänkel für unsere Gedanken rund um die Wiederlegalisierung von Google Analytics&#8230;</dd>
<dt>[01:12:15] <a href="Urheberrecht: Kauder will Internet-Entzug">Kauder will Internet-Entzug</a></dt>
<dd>&#8230;und unser Kopfgeschüttele zu Siegfried Kauders Idee, den Lausbuben das Internet wegzunehmen. Und schwups, ist das WLAN-Kabel weg, so!</dd>
</dl>
<h3>[01:14:21.000] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://cubic-bezier.com/#.17,.67,.83,.67">Cubic Bezier</a></dt>
<dd>Ein Werkzeug, um benutzerdefinierte CSS3 Animationskurven zu erstellen und live zu testen</dd>
<dt><a href="http://designfestival.com/a-farewell-to-css3-gradients/">A Farewell to CSS3 Gradients</a></dt>
<dd>Plädoyer für mehr SVG-Grafiken anstelle von CSS3 Gradients</dd>
<dt><a href="http://code.google.com/p/cwebgl/">cwebgl &#8211; WebGL stack in javascript</a></dt>
<dd>Ein WebGL-Polyfill, der rein auf Canvas und JavaScript aufsetzt, aber auch mit Java und Flash kann.</dd>
<dt><a href="http://htmlmuncher.com/">HTML Muncher</a></dt>
<dd>Python Werkzeug, das in einer Gruppe von zusammenhängenden HTML-, CSS- und JavaScript-Dateien, Klassen- und ID-Namen, sowie Verweise dazu platzsparend verkürzt.</dd>
<dt><a href="http://pngmini.com/">ImageAlpha</a></dt>
<dd>Ein Mac-Tool, um 24-Bit-Farbe-8-Bit-Transparenz-PNGs nach 8-Bit-Farbe-8-Bit-Transparenz-PNGs zu wandeln.</dd>
<dt><a href="https://github.com/protonet/jquery.inview">jquery.inview</a></dt>
<dd>Ein jQuery-Plugin, das das Event &#8222;inview&#8220; nachrüstet, das immer dann feuert, wenn ein damit belegtes Element in den Viewport scrollt.</dd>
<dt><a href="http://tinkerbin.com/">Tinkerbin</a></dt>
<dd>Tinkerbin ist vergleichbar mit <a href="http://jsfiddle.net/">jsfiddle</a>, kann neben HTML, CSS, JS aber auch CoffeeScript, Sass (+ Compass), Less, HAML and weitere Metasprachen.</dd>
</dl>


Und noch einmal bekamen wir Verstärkung von Rodney Rehm. Wir waren ganz schöne
Quatschlieseln, aber es ist auch ganz schön was bei herumgekommen.


SCHAUNOTIZEN

[00:00:26] SETIMMEDIATE API

Mit dem I…

Und noch einmal bekamen wir Verstärkung von Rodney Rehm. Wir waren ganz schöne
Quatschlieseln, aber es ist auch ganz schön was bei herumgekommen.


SCHAUNOTIZEN

[00:00:26] SETIMMEDIATE API

Mit dem IE10 erblickt die setImmediate API das Licht der Welt und soll dabei
helfen, rechenintensives JavaScript zu segmentieren. Für alle anderen Browser
gibt es einen sehr cleveren Polyfill.

[00:11:03] EXCLUSIVE PREVIEW OF THE HOTTEST CSS SPECS

Divya Manian gibt in dem Artikel Ausblick auf 13 zukünftige CSS-Specs. Von denen
habe nwir uns die heißesten Kandidaten herausgepickt, nämlich Compositing und
CSS Filters, und haben sie diskutiert. Außerdem streifen wir thematisch das
Flexbox-Polyfill Flexie.js.

[00:25:15] CSS VARIABLES

Nicht mit in der Liste standen die CSS Variablen, zu denen es seit neustem einen
Editor’s Draft gibt und die noch dieses Jahr in Chrome landen sollen.

[00:36:55] DIE WAHREN PROBLEME VON HTML5 POLYFILLS: HTML5 SHIM UND DAS ENDE DES
3 SCHICHTEN-MODELLS (TEIL 1)

Alexander Farkas, und vor allem Peter finden: Die neuen semantischen
HTML5-Elemente sind überflüssiger bzw. gefährlicher Ranz. Als Randnotiz ließ
Peter http://html5accessibility.com/ fallen.

[00:52:30] DATENSCHUTZTHEATER

Peter echauffiert sich über Politik. Ganz allgemein. Und für rund 2:25 min… :)

[00:55:55] BEANSTANDUNGSFREIER BETRIEB VON GOOGLE ANALYTICS AB SOFORT MÖGLICH

Alles nur ein Vorgeplänkel für unsere Gedanken rund um die Wiederlegalisierung
von Google Analytics…

[01:12:15] KAUDER WILL INTERNET-ENTZUG

…und unser Kopfgeschüttele zu Siegfried Kauders Idee, den Lausbuben das Internet
wegzunehmen. Und schwups, ist das WLAN-Kabel weg, so!


[01:14:21.000] KEINE SCHAUNOTIZEN

CUBIC BEZIER

Ein Werkzeug, um benutzerdefinierte CSS3 Animationskurven zu erstellen und live
zu testen

A FAREWELL TO CSS3 GRADIENTS

Plädoyer für mehr SVG-Grafiken anstelle von CSS3 Gradients

CWEBGL – WEBGL STACK IN JAVASCRIPT

Ein WebGL-Polyfill, der rein auf Canvas und JavaScript aufsetzt, aber auch mit
Java und Flash kann.

HTML MUNCHER

Python Werkzeug, das in einer Gruppe von zusammenhängenden HTML-, CSS- und
JavaScript-Dateien, Klassen- und ID-Namen, sowie Verweise dazu platzsparend
verkürzt.

IMAGEALPHA

Ein Mac-Tool, um 24-Bit-Farbe-8-Bit-Transparenz-PNGs nach
8-Bit-Farbe-8-Bit-Transparenz-PNGs zu wandeln.

JQUERY.INVIEW

Ein jQuery-Plugin, das das Event „inview“ nachrüstet, das immer dann feuert,
wenn ein damit belegtes Element in den Viewport scrollt.

TINKERBIN

Tinkerbin ist vergleichbar mit jsfiddle, kann neben HTML, CSS, JS aber auch
CoffeeScript, Sass (+ Compass), Less, HAML and weitere Metasprachen.

Revision 41: setImmediate API, CSS Compositing und überflüssiges HTML5

<p>Diese Revision war der gruseligste Aufnahmetrip seit Podcast-Gedenken: Erst streikten bei unserem ersten Gast <a href="http://rodneyrehm.de/en/">Rodney Rehm</a> aka <a href="http://twitter.com/#!/rodneyrehm/">@rodneyrehm</a> reihum alle Aufnahmegeräte, dann zerhackte uns das verf$%%/§%?!te Skype nach 45 Minuten Aufnahme auf einmal so den Ton, dass wir vom anderen rein gar nichts mehr verstanden und die Aufnahme abbrechen mussten. Die brachten wir am Folgetag mit weniger massiven Problemen zu Ende. Dass von den daraus resultierenden Störgeräuschen und Pausen nix mehr zu hören ist, haben wir der geduldigen Puzzlearbeit unseres zweiten Gastes, <a href="http://frederic-hemberger.de/">Frederic Hemberger</a> aka <a href="http://twitter.com/#!/fhemberger">@fhemberger</a> zu verdanken. Großes Danke dafür!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:44] <a href="http://www.xanthir.com/blog/b4Dm0">Flexbox is Dead, Long Live Flexbox!</a></dt>
<dd>Die Spec zur CSS3 Flexbox wurde frisch über den Haufen geworfen.</dd>
<dt>[00:18:25] <a href="http://www.w3.org/TR/css3-conditional/">W3C Conditional Rules</a></dt>
<dd>Die W3C CSS Conditional Rules sind sowas wie <a href="http://www.modernizr.com/">Modernizr</a> nur in nativ. Außerdem kann man Dank <code>@document</code> pfadabhängig stylen.</dd>
<dt>[00:24:25] <a href="https://plus.google.com/115535723976198353696/posts/ERN6zYozENV">WebSocket binary message support</a></dt>
<dd>Websockets unterstützen neuerdings auch die Übertragung von Binärdaten. Damit lässt sich allerhand anstellen.</dd>
<dt>[00:30:00] <a href="http://www.syntensity.com/static/openjpeg.html">JPEG 2000 on the Web</a></dt>
<dd>Und wieder hat jemand <a href="http://emscripten.org/">Emscripten</a> angeschmissen und was cooles transpiliert: Einen JPEG 2000 Dekoder in JavaScript. Und auch über <a href="http://html5-mediasource-api.googlecode.com/svn/trunk/draft-spec/mediasource-draft-spec.html">MediaSource Extensions</a> sprachen wir.</dd>
<dt>[00:41:27] <a href="http://coding.smashingmagazine.com/2011/09/07/help-the-community-report-browser-bugs/">Help The Community: Report Browser Bugs</a></dt>
<dd>Ein Plädoyer dafür, dass man Browserbugs unbedingt sauber untersuchen und sie den Herstellern melden soll.</dd>
<dt>[00:48:12] <a href="http://paulrouget.com/e/mobilewebapps/">Mobile Web: Taiwan, Opera and WebOS</a></dt>
<dd>Paul Rouget gibt einen Einblick in die Welt Asiens, was die Nutzung des Internets angeht.</dd>
<dt>[00:59:33] <a href="http://octopress.org/">Octopress &#8211; A blogging framework for hackers</a></dt>
<dd>Frederic hat sich Octopress in der letzten Zeit genauer angesehen und berichtet uns über seine Erfahrungen damit.</dd>
<dt>[01:04:07] <a href="http://www.smarty.net/">Smarty &#8211; PHP Template Engine</a></dt>
<dd>Erst letztens erfuhren wir, dass Rodney in das Smarty-Projekt involviert ist und heftig an der Version 3.1 mitgebaut hat. Da waren wir ganz neugierig, was es dort Neues gibt!
</dl>
<h3>[01:33:42] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://readysetraphael.com/">Ready Set Raphael</a></dt>
<dd>Ein SVG nach Raphael.JS Converter</dd>
<dt><a href="http://blog.nodeknockout.com/post/9895206272/node-knockout-winners">Die Node.js Knockout Gewinner</a></dt>
<dd>Die Sieger des Wettbewerbs haben mit Node ein paar sehr krasse Sachen zusammengedübelt. Unbedingt anschauen.</dd>
<dt><a href="https://github.com/rflynn/imgmin">imgmin</a></dt>
<dd>Ein sehr effektiver JPEG-Kleinschrumpfer für die Kommandozeile.</dd>
<dt><a href="http://www.ustream.tv/user/Frontendconf_Zurich/videos">Frontend Conf Zürich Videos</a></dt>
<dd>Videos der gerade zu Ende gegangenen Frontend Conf Zürich 2011. Tolles Zeug dabei! Besonders empfehlenswert: <a href="http://www.ustream.tv/recorded/17155906">CSS3 Secrets: 10 things you might not know about CSS3</a> von Lea Verou.</dd>
</dl>


Diese Revision war der gruseligste Aufnahmetrip seit Podcast-Gedenken: Erst
streikten bei unserem ersten Gast Rodney Rehm aka @rodneyrehm reihum alle
Aufnahmegeräte, dann zerhackte uns das verf$%%/§%?…

Diese Revision war der gruseligste Aufnahmetrip seit Podcast-Gedenken: Erst
streikten bei unserem ersten Gast Rodney Rehm aka @rodneyrehm reihum alle
Aufnahmegeräte, dann zerhackte uns das verf$%%/§%?!te Skype nach 45 Minuten
Aufnahme auf einmal so den Ton, dass wir vom anderen rein gar nichts mehr
verstanden und die Aufnahme abbrechen mussten. Die brachten wir am Folgetag mit
weniger massiven Problemen zu Ende. Dass von den daraus resultierenden
Störgeräuschen und Pausen nix mehr zu hören ist, haben wir der geduldigen
Puzzlearbeit unseres zweiten Gastes, Frederic Hemberger aka @fhemberger zu
verdanken. Großes Danke dafür!


SCHAUNOTIZEN

[00:03:44] FLEXBOX IS DEAD, LONG LIVE FLEXBOX!

Die Spec zur CSS3 Flexbox wurde frisch über den Haufen geworfen.

[00:18:25] W3C CONDITIONAL RULES

Die W3C CSS Conditional Rules sind sowas wie Modernizr nur in nativ. Außerdem
kann man Dank @document pfadabhängig stylen.

[00:24:25] WEBSOCKET BINARY MESSAGE SUPPORT

Websockets unterstützen neuerdings auch die Übertragung von Binärdaten. Damit
lässt sich allerhand anstellen.

[00:30:00] JPEG 2000 ON THE WEB

Und wieder hat jemand Emscripten angeschmissen und was cooles transpiliert:
Einen JPEG 2000 Dekoder in JavaScript. Und auch über MediaSource Extensions
sprachen wir.

[00:41:27] HELP THE COMMUNITY: REPORT BROWSER BUGS

Ein Plädoyer dafür, dass man Browserbugs unbedingt sauber untersuchen und sie
den Herstellern melden soll.

[00:48:12] MOBILE WEB: TAIWAN, OPERA AND WEBOS

Paul Rouget gibt einen Einblick in die Welt Asiens, was die Nutzung des
Internets angeht.

[00:59:33] OCTOPRESS – A BLOGGING FRAMEWORK FOR HACKERS

Frederic hat sich Octopress in der letzten Zeit genauer angesehen und berichtet
uns über seine Erfahrungen damit.

[01:04:07] SMARTY – PHP TEMPLATE ENGINE

Erst letztens erfuhren wir, dass Rodney in das Smarty-Projekt involviert ist und
heftig an der Version 3.1 mitgebaut hat. Da waren wir ganz neugierig, was es
dort Neues gibt!


[01:33:42] KEINE SCHAUNOTIZEN

READY SET RAPHAEL

Ein SVG nach Raphael.JS Converter

DIE NODE.JS KNOCKOUT GEWINNER

Die Sieger des Wettbewerbs haben mit Node ein paar sehr krasse Sachen
zusammengedübelt. Unbedingt anschauen.

IMGMIN

Ein sehr effektiver JPEG-Kleinschrumpfer für die Kommandozeile.

FRONTEND CONF ZÜRICH VIDEOS

Videos der gerade zu Ende gegangenen Frontend Conf Zürich 2011. Tolles Zeug
dabei! Besonders empfehlenswert: CSS3 Secrets: 10 things you might not know
about CSS3 von Lea Verou.

Revision 40: Zerskyped

<p>Fast hätte es diesmal mit der Revision nicht geklappt, weil Markus weg war, Peter Koffer packen musste und Schepp es verpeilt hatte, sich früh genug nach Gästen umzuschauen. Aber Peter hat sich dann doch noch ein Herz gefasst.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:18] <a href="https://github.com/sebarmeli/JAIL">JAIL</a></dt>
<dd>Endlich mal ein funktionierender Bilder-Lazyloader, der über ein Fallback verfügt, wenn JavaScript deaktiviert ist.</dd>
<dt>[00:12:08] <a href="http://intenseminimalism.com/2011/designers-shouldnt-code-the-digital-duo/">The “designers should code” bullshit and a not so new idea</a></dt>
<dd>Muss ein Webdesigner coden können? Oder reicht es nur gut Bescheid zu wissen?</dd>
<dt>[00:22:55] <a href="http://sugarjs.com/">Sugar</a></dt>
<dd>Sugar erweitert die nativen JavaScript-Objekte um immer wieder gebrauchte, sehr praktische Methoden. Inspiriert wird es dabei von ES5 und anderen Programmiersprachen.</dd>
<dt>[00:30:53] <a href="http://socket.io/">Socket.IO</a></dt>
<dd>Socket.IO ist eine Abstraktionsschicht für Node-Server und Client, der sich vollautomatisch um eine bestmögliche Echtzeitkommunikation der beiden miteinander kümmert.</dd>
</dl>
<h3>[00:41:25] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/madrobby/keymaster">Keymaster</a></dt>
<dd>Eine kleine JavaScript-Bibliothek, die das Verknüpfen von Keyboard-Shortcuts zum Kinderspiel macht.</dd>
<dt><a href="http://www.jpegmini.com/main/home">JPEGmini</a></dt>
<dd>Ein Online-JPEG-Eindampf-Service.</dd>
<dt><a href="http://www.browserstack.com/">Browserstack</a></dt>
<dd>Ein Java-Applet-basierter Service zum Testen von Seiten in bereitgestellten, ferngesteuerten Browsern, inkl. installierter Developer Addons.</dd>
<dt><a href="https://github.com/xdissent/ievms">Automated installation of the Microsoft IE App Compat virtual machines</a></dt>
<dd>Installationsscript, das die offiziellen VirtualPC-IE-Test-Images in Virtualbox hineinpackt. Echtes IE-Testing auf Mac und Linux!</dd>
<dt><a href="http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html">2 Klicks für mehr Datenschutz</a></dt>
<dd>Der Heise Verlag hat einen Soziale-Netzwerk-Weiterempfehlen-Knopf mit Opt-in gebaut, der die neusten Datenschutzanforderungen erfüllt. Er ist nun für jedermann <a href="http://www.heise.de/newsticker/meldung/Code-fuer-2-Klick-Empfehlungsbutton-von-Heise-ist-erhaeltlich-1337833.html">frei erhältlich</a>.</dd>
</dl>


Fast hätte es diesmal mit der Revision nicht geklappt, weil Markus weg war,
Peter Koffer packen musste und Schepp es verpeilt hatte, sich früh genug nach
Gästen umzuschauen. Aber Peter hat sich dann d…

Fast hätte es diesmal mit der Revision nicht geklappt, weil Markus weg war,
Peter Koffer packen musste und Schepp es verpeilt hatte, sich früh genug nach
Gästen umzuschauen. Aber Peter hat sich dann doch noch ein Herz gefasst.


SCHAUNOTIZEN

[00:00:18] JAIL

Endlich mal ein funktionierender Bilder-Lazyloader, der über ein Fallback
verfügt, wenn JavaScript deaktiviert ist.

[00:12:08] THE “DESIGNERS SHOULD CODE” BULLSHIT AND A NOT SO NEW IDEA

Muss ein Webdesigner coden können? Oder reicht es nur gut Bescheid zu wissen?

[00:22:55] SUGAR

Sugar erweitert die nativen JavaScript-Objekte um immer wieder gebrauchte, sehr
praktische Methoden. Inspiriert wird es dabei von ES5 und anderen
Programmiersprachen.

[00:30:53] SOCKET.IO

Socket.IO ist eine Abstraktionsschicht für Node-Server und Client, der sich
vollautomatisch um eine bestmögliche Echtzeitkommunikation der beiden
miteinander kümmert.


[00:41:25] KEINE SCHAUNOTIZEN

KEYMASTER

Eine kleine JavaScript-Bibliothek, die das Verknüpfen von Keyboard-Shortcuts zum
Kinderspiel macht.

JPEGMINI

Ein Online-JPEG-Eindampf-Service.

BROWSERSTACK

Ein Java-Applet-basierter Service zum Testen von Seiten in bereitgestellten,
ferngesteuerten Browsern, inkl. installierter Developer Addons.

AUTOMATED INSTALLATION OF THE MICROSOFT IE APP COMPAT VIRTUAL MACHINES

Installationsscript, das die offiziellen VirtualPC-IE-Test-Images in Virtualbox
hineinpackt. Echtes IE-Testing auf Mac und Linux!

2 KLICKS FÜR MEHR DATENSCHUTZ

Der Heise Verlag hat einen Soziale-Netzwerk-Weiterempfehlen-Knopf mit Opt-in
gebaut, der die neusten Datenschutzanforderungen erfüllt. Er ist nun für
jedermann frei erhältlich.

Revision 39: Zucker, Bullenkot und GEFÄNGNIS

<p>Peter hängt nach wie vor <a href="https://plus.google.com/100967148217893238418/posts/VnC2iYHzeMu">im Rheinland</a> fest und Markus ist vom Erdboden verschluckt. Sturmfrei für Schepp! Auf einen geselligen Webworker-Abend hat er sich <a href="http://twitter.com/djesse">Dirk Jesse</a>, Autor des <a href="http://www.yaml.de/">YAML-Frameworks</a>, und <a href="http://twitter.com/yellowled">Matthias Mees</a>, <a href="http://netzgestaltung.net/">Webdesigner</a> aus der Nähe von Lübeck und Mitmoderator des Serendipity-Podcasts <a href="http://www.s9ycamp.info/">S9y InfoCamp</a>, eingeladen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:00] <a href="http://hacks.mozilla.org/2011/08/introducing-webapi/">Introducing WebAPI</a></dt>
<dd>Mozilla hat sich vorgenommen, innerhalb von 3 &#8211; 6 Monaten eine universelle Schnittstelle zu entwickeln, mit der die Browser auf Handyfunktionen und -Daten zugreifen können. Dabei schweifen wir aber ab, unter anderem auf dieses <a href="http://blog.typekit.com/2011/07/26/new-from-typekit-improved-font-rendering-on-windows/">Schriften-Thema</a>.</dd>
<dt>[00:15:08] <a href="http://wiki.whatwg.org/wiki/Component_Model">Component Model</a></dt>
<dd>Die WHATWG wiederum möchte mit dem Component Model den Wildwuchs in Sachen <a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/">Shadow DOM</a> beseitigen und standardisierte Schnittstellen zum Befüllen desselben schaffen.</dd>
<dt>[00:22:24] <a href="http://www.wait-till-i.com/2011/08/15/getting-rusty-we-need-new-best-practices-for-a-different-development-world/">Getting rusty – we need new best practices for a different development world</a></dt>
<dd><a href="http://twitter.com/codepo8">Chris Heilmann</a> schrieb neulich darüber, dass unsere Webentwicklungsparadigmen durcheinandergeraten seien und wir einige Sinnfragen neu stellen müssen.  Außerdem müssen viele neue Best Practices entwickelt und verbreitet werden. Im Verlauf des Gesprächs streifen wir Nicolas Gallaghers <a href="http://nicolasgallagher.com/pure-css-gui-icons/">Pure CSS GUI Icons</a> und Christoph Zillgens&#8216; Artikel <a hreF="http://christophzillgens.com/de/articles/input-und-button-gleich-hoch">Gleich hohe Input-Felder und Buttons</a>.</dd>
<dt>[00:50:20] <a href="http://twitter.github.com/bootstrap/">Bootstrap, from Twitter</a></dt>
<dd>Twitter hat eine Art Boilerplate- oder Kickstart-Paket für das Erstellen von Webapps veröffentlicht. Im Prinzip ist es ein durchdachter Remix bekannter Tools, wie <a href="http://960.gs/">960.gs</a>, JQuery und <a href="http://lesscss.org/">LESS</a>.</dd>
<dt>[01:03:55] <a href="http://semantic.gs/">The Semantic Grid System</a></dt>
<dd>Wir bleiben in der Welt von Grids und LESS und schauen uns das Semantic Grid System an, das sich mit einem neuen Ansatz hervortut. Dirk hält die proklamierten Ziele für illusorisch und Matthias hindert es auch nicht daran, sich von Grids im Allgemeinen <a href="http://yellowled.de/archiv/17/Wieso-ich-keine-Grid-Frameworks-mehr-benutze.html">zu verabschieden</a>. Weil wieder LESS.js im Spiel ist, und das serverseitig schwer zu implementieren ist (nur via Node.js), kommen wir auf <a href="http://leafo.net/lessphp/">lessphp</a> und den LESS-Compilier-Dienst <a href="http://boxcss.com/">BoxCSS</a> zu sprechen. Und auf den CSS-Preprozessor <a href="http://turbine.peterkroener.de/docs-10.php">Turbine</a> (1.0, nicht 1.1 nehmen!).</dd>
</dl>
<h3>[01:26:34] 15-EUR-Gutscheine für Workshops von <a href="http://developers-peak.de/">Developer&#8217;s Peak</a></h3>
<p>Beim <a href="http://www.facebook.com/media/set/?set=a.115540841881024.13956.104130786355363">Hack Evening in Köln</a> konnte Schepp einige Gutscheine für kommende (englischsprachige!) Veranstaltungen der Truppe abgreifen. Die sollen nun unters Volk gebracht werden. Bei Interesse, hier kommentieren, oder via Social Media Kanäle dem Schepp Bescheid geben. First come, first served. Folgende Gutscheine hätten wir (alle bis auf einen in Köln):</p>
<p><img loading="lazy" src="http://workingdraft.de/wp-content/uploads/2011/08/Gutscheine-Developers-Peak-246x300.jpg" alt="" title="Gutscheine Developers Peak" width="246" height="300" class="alignnone size-medium wp-image-753" srcset="https://workingdraft.de/wp-content/uploads/2011/08/Gutscheine-Developers-Peak-246x300.jpg 246w, https://workingdraft.de/wp-content/uploads/2011/08/Gutscheine-Developers-Peak.jpg 660w" sizes="(max-width: 246px) 100vw, 246px" /></p>
<ul>
<li>1 x Browsergames Entwicklung mit HTML5 und JavaScript am 23.09.2011 in Frankfurt (einzulösen bis 04.09.2011!)</li>
<li>3 x Mastering JavaScript Part 1/3: Understanding JS am 12.10.2011 in Köln (einzulösen bis 21.09.2011)</li>
<li>5 x Mastering JavaScript Part 3/3: Hardcore JS am 11.11.2011 in Köln (nix für Karnevalsjecken, einzulösen bis 21.09.2011)</li>
</ul>
<h3>[01:28:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.netmagazine.com/tutorials/get-started-webgl-draw-square">Get started with WebGL: draw a square</a></dt>
<dd>Kompaktes, aber sehr verständliches Einstiegstutorial in die komplizierte (Shader-)Welt von WebGL.</dd>
<dt><a href="http://linowski.ca/experiments/onProximityFade/demo.html">onProximityFade</a></dt>
<dd>Nette Ein- und Ausblendspielerei bei Mausannäherung. Kann man vielleicht für ein Hilfesystem auf seiner Seite nutzen.</dd>
<dt><a href="http://blip.tv/jsconf">JSConf Videos</a></dt>
<dd>Die JSConf 2011 Videos sind online und lohnen sich zu schauen!</dd>
<dt><a href="http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1">The Latest in HTML5</a></dt>
<dd>Eine Google-Präsentation, die überquillt von eher weniger beachteten, aber fantastischen HTML5-Features.</dd>
<dt><a href="http://www.pagodabox.com/">Pagoda Box</a></dt>
<dd>Ein PHP Cloudhosting, das über eine direkte Anbindung an GitHub verfügt.</dd>
<dt><a href="http://js.recurly.com/">Recurly.js</a></dt>
<dd>Ein fix und fertiges Bezahlungsformular-Framework zum Einbetten in die eigene Seite, das den unappetitlichen serverseitigen Teil des Ablaufs auf die Recurly.js-Server abwälzt.</dd>
<dt><a href="http://transformjs.strobeapp.com/">TransformJS</a></dt>
<dd>jQuery-Plugin, das den Einsatz von CSS 2D- und 3D-Transforms via css- und animate-Methode extremst vereinfacht.</dd>
<dt><a href="http://perfectionkills.com/fabric-js-0-5-is-out/">Fabric.js</a></dt>
<dd>Eine weitere HTML5-Canvas-Abstraktionsbibliothek, die aber durch ihren SVG-Parser hervorsticht.</dd>
<dt><a href="http://flex.madebymufffin.com/">FLEXSLIDER</a></dt>
<dd>jQuery-Slider, der mit Touch-/Swipe-Support für mobile Geräte daherkommt.</dd>
<dt><a href="http://www.joelambert.co.uk/flux/">flux slider</a></dt>
<dd>jQuery-Slider, der mit bislang ungesehenen hardwarebeschleunigten 3D-Übergängen glänzt. Riesennachteil: Es gibt keine Graceful Degradation für nicht 3D-fähige Browser.</dd>
</dl>


Peter hängt nach wie vor im Rheinland fest und Markus ist vom Erdboden
verschluckt. Sturmfrei für Schepp! Auf einen geselligen Webworker-Abend hat er
sich Dirk Jesse, Autor des YAML-Frameworks, und Ma…

Peter hängt nach wie vor im Rheinland fest und Markus ist vom Erdboden
verschluckt. Sturmfrei für Schepp! Auf einen geselligen Webworker-Abend hat er
sich Dirk Jesse, Autor des YAML-Frameworks, und Matthias Mees, Webdesigner aus
der Nähe von Lübeck und Mitmoderator des Serendipity-Podcasts S9y InfoCamp,
eingeladen.


SCHAUNOTIZEN

[00:02:00] INTRODUCING WEBAPI

Mozilla hat sich vorgenommen, innerhalb von 3 – 6 Monaten eine universelle
Schnittstelle zu entwickeln, mit der die Browser auf Handyfunktionen und -Daten
zugreifen können. Dabei schweifen wir aber ab, unter anderem auf dieses
Schriften-Thema.

[00:15:08] COMPONENT MODEL

Die WHATWG wiederum möchte mit dem Component Model den Wildwuchs in Sachen
Shadow DOM beseitigen und standardisierte Schnittstellen zum Befüllen desselben
schaffen.

[00:22:24] GETTING RUSTY – WE NEED NEW BEST PRACTICES FOR A DIFFERENT
DEVELOPMENT WORLD

Chris Heilmann schrieb neulich darüber, dass unsere Webentwicklungsparadigmen
durcheinandergeraten seien und wir einige Sinnfragen neu stellen müssen.
Außerdem müssen viele neue Best Practices entwickelt und verbreitet werden. Im
Verlauf des Gesprächs streifen wir Nicolas Gallaghers Pure CSS GUI Icons und
Christoph Zillgens‘ Artikel Gleich hohe Input-Felder und Buttons.

[00:50:20] BOOTSTRAP, FROM TWITTER

Twitter hat eine Art Boilerplate- oder Kickstart-Paket für das Erstellen von
Webapps veröffentlicht. Im Prinzip ist es ein durchdachter Remix bekannter
Tools, wie 960.gs, JQuery und LESS.

[01:03:55] THE SEMANTIC GRID SYSTEM

Wir bleiben in der Welt von Grids und LESS und schauen uns das Semantic Grid
System an, das sich mit einem neuen Ansatz hervortut. Dirk hält die
proklamierten Ziele für illusorisch und Matthias hindert es auch nicht daran,
sich von Grids im Allgemeinen zu verabschieden. Weil wieder LESS.js im Spiel
ist, und das serverseitig schwer zu implementieren ist (nur via Node.js), kommen
wir auf lessphp und den LESS-Compilier-Dienst BoxCSS zu sprechen. Und auf den
CSS-Preprozessor Turbine (1.0, nicht 1.1 nehmen!).


[01:26:34] 15-EUR-GUTSCHEINE FÜR WORKSHOPS VON DEVELOPER’S PEAK

Beim Hack Evening in Köln konnte Schepp einige Gutscheine für kommende
(englischsprachige!) Veranstaltungen der Truppe abgreifen. Die sollen nun unters
Volk gebracht werden. Bei Interesse, hier kommentieren, oder via Social Media
Kanäle dem Schepp Bescheid geben. First come, first served. Folgende Gutscheine
hätten wir (alle bis auf einen in Köln):



 * 1 x Browsergames Entwicklung mit HTML5 und JavaScript am 23.09.2011 in
   Frankfurt (einzulösen bis 04.09.2011!)
 * 3 x Mastering JavaScript Part 1/3: Understanding JS am 12.10.2011 in Köln
   (einzulösen bis 21.09.2011)
 * 5 x Mastering JavaScript Part 3/3: Hardcore JS am 11.11.2011 in Köln (nix für
   Karnevalsjecken, einzulösen bis 21.09.2011)


[01:28:00] KEINE SCHAUNOTIZEN

GET STARTED WITH WEBGL: DRAW A SQUARE

Kompaktes, aber sehr verständliches Einstiegstutorial in die komplizierte
(Shader-)Welt von WebGL.

ONPROXIMITYFADE

Nette Ein- und Ausblendspielerei bei Mausannäherung. Kann man vielleicht für ein
Hilfesystem auf seiner Seite nutzen.

JSCONF VIDEOS

Die JSConf 2011 Videos sind online und lohnen sich zu schauen!

THE LATEST IN HTML5

Eine Google-Präsentation, die überquillt von eher weniger beachteten, aber
fantastischen HTML5-Features.

PAGODA BOX

Ein PHP Cloudhosting, das über eine direkte Anbindung an GitHub verfügt.

RECURLY.JS

Ein fix und fertiges Bezahlungsformular-Framework zum Einbetten in die eigene
Seite, das den unappetitlichen serverseitigen Teil des Ablaufs auf die
Recurly.js-Server abwälzt.

TRANSFORMJS

jQuery-Plugin, das den Einsatz von CSS 2D- und 3D-Transforms via css- und
animate-Methode extremst vereinfacht.

FABRIC.JS

Eine weitere HTML5-Canvas-Abstraktionsbibliothek, die aber durch ihren
SVG-Parser hervorsticht.

FLEXSLIDER

jQuery-Slider, der mit Touch-/Swipe-Support für mobile Geräte daherkommt.

FLUX SLIDER

jQuery-Slider, der mit bislang ungesehenen hardwarebeschleunigten 3D-Übergängen
glänzt. Riesennachteil: Es gibt keine Graceful Degradation für nicht 3D-fähige
Browser.

Revision 38: Gridsysteme und Best Practices

<p>Peter war wieder auf Achse und so haben wir uns diesmal <a href="http://twitter.com/mademyday">Marc Hinse</a> und <a href="http://twitter.com/kahlillechelt">Khalil Lechelt</a> als Fachleute dazugeholt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:06] <a href="http://syntensity.com/static/espeak.html">speak.js &#8211; Text-To-Speech on the Web</a></dt>
<dd>Wieder einmal wurde dank <a href="emscripten.org">Emscripten</a> etwas nach JavaScript portiert. Und diesmal ist es was sehr Praktisches: ein Text-zu-Audio-Synthesizer. Damit lassen sich endlich Vorlese-Dienste quelloffen umsetzen, wie sie bislang nur das kommerzielle <a href="http://www.readspeaker.com/de">ReadSpeaker</a> zum Beispiel in <a href="http://www.heise.de/newsticker/meldung/Steve-Jobs-tritt-zurueck-1330614.html">heise Newsticker Meldungen</a> möglich gemacht hat (oben links: &#8222;vorlesen&#8220;).</dd>
<dt>[00:10:53] <a href="https://github.com/sole/tween.js">tween.js</a></dt>
<dd><a href="http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/">tween.js</a> ist ein generisches Werkzeug zur Erzeugung von zeitgesteuerten Übergangskurven. Diese Werte lassen sich dann zur Animation beliebiger Dinge nutzen.</dd>
<dt>[00:17:56] <a href="https://plus.google.com/115133653231679625609/posts/CJMyExJTbug">Cross-browser contextmenu support with a polyfill</a></dt>
<dd>Firefox 8 unterstützt erstmalig HTML5 Contextmenüs. <a href="http://twitter.com/addyosmani">Addy Osmani</a> zeigt, wie das geht und verweist auf ein Polyfill von <a href="http://twitter.com/rodneyrehm">Rodney Rehm</a>.</dd>
<dt>[00:34:02] <a href="http://www.golem.de/1108/85854.html">Native Client &#8211; Googles Vision vom nativen Web</a></dt>
<dd>Google stellte schon 2008 seine Idee des nativen Clients vor. Mit Chrome 14 ist die Plattform nun einigermaßen vorzeigbar und erste Chrome Apps <a href="http://www.naclbox.com/">nutzen das schon</a>. Was ist davon zu halten?</dd>
<dt>[00:55:26] <a href="http://nrabinowitz.github.com/pjscrape/">pjscrape</a></dt>
<dd>Ein Contentscraper, der auch dann funktioniert, wenn der Inhalt der Zielseite per JavaScript erzeugt wird. Möglich macht das der darunterliegende Headless-WebKit namens <a hreF="http://phantomjs.org/">PhantomJS</a></dd>
<dt>[01:02:08] <a href="http://documentcloud.github.com/backbone/">backbone.js und andere MVC/MVVM-JavaScript-Frameworks</a></dt>
<dd>Kahlil erzählt uns ein wenig was über backbone.js und <a href="http://documentcloud.github.com/underscore/">underscore.js</a>. Wir reden aber auch über <a href="http://knockoutjs.com/">Knockout.js</a> und über die Designphilosophie all dieser recht frischen MVC bzw. MVVM Frameworks. Dazu lesenswert: Der Artikel <a href="http://molily.de/weblog/javascript-standards">Standardkonforme und zukunftsfähige JavaScript-Bibliotheken</a> von Mathias Schäfer.</dd>
</dl>
<h3>[01:31:41] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work: Behind the Scenes of Modern Web Browsers</a></dt>
<dd>Dieses Dokument beschreibt den gesamten Ablauf, den Browser beim Darstellen einer Seite .durchlaufen müssen.</dd>
<dt><a href="https://plus.google.com/100166083286297802191/posts/hFZ6UWExvfA">Verbesserungen am Netzwerkstack von Firefox 6</a></dt>
<dd>Interessanter Beitrag des zuständigen Firefox-Architekten, was in Version 6 alles an cleveren Verbesserungen in den Netzwerkstack geflossen ist.</dd>
<dt><a href="http://browserling.com/">Browserling</a></dt>
<dd>Mit Browserling kann man Seiten in den wichtigsten älteren Browsern testen. Das coole dabei ist, dass das Ergebnis in Echtzeit in ein HTML5 Canvas Element gezeichnet wird.</dd>
<dt><a href="http://fgnass.github.com/spin.js/">Spin.js</a></dt>
<dd>Ein reiner Markup-Loading-Spinner.</dd>
<dt><a href="http://blog.mozilla.com/devtools/2011/08/15/introducing-scratchpad/">Firefox Scratchpad</a></dt>
<dd>Firefox kommt nun mit einer Art integriertem <a href="http://jsfiddle.net/">jsfiddle</a> zum Code-Testen daher. Praktisch!</dd>
<dt><a href="http://rastajs.errorjs.com/">Rasta.js</a></dt>
<dd>Ein simpler kleiner Cross-Domain-Key-Value-Store.</dd>
<dt><a href="http://stiern.com/articles/usability/usability-in-icons/">Usability in Icons</a></dt>
<dd>Dieser Artikel beschäftigt sich mit der Tatsache, dass die wenigsten Icon-Symboliken von den Benutzern verstanden werden.</dd>
</dl>


Peter war wieder auf Achse und so haben wir uns diesmal Marc Hinse und Khalil
Lechelt als Fachleute dazugeholt.


SCHAUNOTIZEN

[00:02:06] SPEAK.JS – TEXT-TO-SPEECH ON THE WEB

Wieder einmal wurde dan…

Peter war wieder auf Achse und so haben wir uns diesmal Marc Hinse und Khalil
Lechelt als Fachleute dazugeholt.


SCHAUNOTIZEN

[00:02:06] SPEAK.JS – TEXT-TO-SPEECH ON THE WEB

Wieder einmal wurde dank Emscripten etwas nach JavaScript portiert. Und diesmal
ist es was sehr Praktisches: ein Text-zu-Audio-Synthesizer. Damit lassen sich
endlich Vorlese-Dienste quelloffen umsetzen, wie sie bislang nur das
kommerzielle ReadSpeaker zum Beispiel in heise Newsticker Meldungen möglich
gemacht hat (oben links: „vorlesen“).

[00:10:53] TWEEN.JS

tween.js ist ein generisches Werkzeug zur Erzeugung von zeitgesteuerten
Übergangskurven. Diese Werte lassen sich dann zur Animation beliebiger Dinge
nutzen.

[00:17:56] CROSS-BROWSER CONTEXTMENU SUPPORT WITH A POLYFILL

Firefox 8 unterstützt erstmalig HTML5 Contextmenüs. Addy Osmani zeigt, wie das
geht und verweist auf ein Polyfill von Rodney Rehm.

[00:34:02] NATIVE CLIENT – GOOGLES VISION VOM NATIVEN WEB

Google stellte schon 2008 seine Idee des nativen Clients vor. Mit Chrome 14 ist
die Plattform nun einigermaßen vorzeigbar und erste Chrome Apps nutzen das
schon. Was ist davon zu halten?

[00:55:26] PJSCRAPE

Ein Contentscraper, der auch dann funktioniert, wenn der Inhalt der Zielseite
per JavaScript erzeugt wird. Möglich macht das der darunterliegende
Headless-WebKit namens PhantomJS

[01:02:08] BACKBONE.JS UND ANDERE MVC/MVVM-JAVASCRIPT-FRAMEWORKS

Kahlil erzählt uns ein wenig was über backbone.js und underscore.js. Wir reden
aber auch über Knockout.js und über die Designphilosophie all dieser recht
frischen MVC bzw. MVVM Frameworks. Dazu lesenswert: Der Artikel Standardkonforme
und zukunftsfähige JavaScript-Bibliotheken von Mathias Schäfer.


[01:31:41] KEINE SCHAUNOTIZEN

HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS

Dieses Dokument beschreibt den gesamten Ablauf, den Browser beim Darstellen
einer Seite .durchlaufen müssen.

VERBESSERUNGEN AM NETZWERKSTACK VON FIREFOX 6

Interessanter Beitrag des zuständigen Firefox-Architekten, was in Version 6
alles an cleveren Verbesserungen in den Netzwerkstack geflossen ist.

BROWSERLING

Mit Browserling kann man Seiten in den wichtigsten älteren Browsern testen. Das
coole dabei ist, dass das Ergebnis in Echtzeit in ein HTML5 Canvas Element
gezeichnet wird.

SPIN.JS

Ein reiner Markup-Loading-Spinner.

FIREFOX SCRATCHPAD

Firefox kommt nun mit einer Art integriertem jsfiddle zum Code-Testen daher.
Praktisch!

RASTA.JS

Ein simpler kleiner Cross-Domain-Key-Value-Store.

USABILITY IN ICONS

Dieser Artikel beschäftigt sich mit der Tatsache, dass die wenigsten
Icon-Symboliken von den Benutzern verstanden werden.

Revision 37: speak.js, Native Client und JS-MVC-Frameworks

<p>Wir hatten einen Gast, und zwar den <a href="http://www.twitter.com/anselmhannemann">Anselm</a>, <a href="http://anselm.novolo.de/">Webworker</a> aus München und frischgebackener Autor eines <a href="http://www.video2brain.com/de/products-833.htm">Videotrainings</a>. Außerdem mit von der Partie: ein zehnsekündiges Delay auf Markus&#8216; Leitung.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00.02.29:000] <a href="http://blogg.antrop.se/interaktionsdesign/redesigning-the-browser-window/">Redesigning the Browser Window</a></dt>
<dd>Browser-UI wird immer komprimierter, aber die grundlegenden Paradigmen ändern sich kaum. Hier macht jemand den Vorschlag, die Tab-Leiste als Sidebar zu implementieren und dadurch die Vertikale zu entlasten. Immerhin sind auch die meisten Websites vertikal angelegt.</dd>
<dt>[00.17.02:000] <a href="http://html5boilerplate.com/#v2">HTML5 Boilerplate 2.0</a></dt>
<dd>Der Paule meint, es müsse jetzt 2.0 heißen. Ansich ändert sich nicht viel. Normalize.css statt Reset.css, besseres Buildscript und Scripts werden mit defer geladen. <a href="https://github.com/smooth-graphics/modx-boilerplate">Gibt&#8217;s nu auch für MODX</a></dd>
<dt>[00.32.06:000] <a href="https://github.com/paulirish/html5-boilerplate/issues/28#issuecomment-1773156">Script-Loader vs. keine Script-Loader</a></dt>
<dd>Paule fragt nach, ob man Script-Loader braucht oder nicht. Auch wir sind uns einig, dass Script-Loader in den meisten Fällen eine Schicht zu viel Technik sind. Schepp&#8217;s HTTP-Test übrigens <a href="http://www.der-schepp.de/http-connects/">hier</a>.</dd>
<dt>[00.44.21:000] <a href="http://muse.adobe.com/">Adobe Muse</a></dt>
<dd>tl;dl: It sucks!</dd>
</dl>
<h3>[01.03.07:000] Keine Schaunotizen</h3>
<ul>
<li><a href="http://gent.ilcore.com/2011/08/finding-memory-leaks.html">Finding memory leaks</a></li>
<li><a href="http://www.freetype.org/ttfautohint/">TTF Auto Hint</a></li>
<li><a href="http://www.diagram.ly/">diagram.ly</a></li>
<li><a href="http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/">Understanding Hardware Acceleration on Mobile Browsers</a></li>
<li><a href="http://mattkersley.com/responsive/">Responsive layout tester</a></li>
</ul>


Wir hatten einen Gast, und zwar den Anselm, Webworker aus München und
frischgebackener Autor eines Videotrainings. Außerdem mit von der Partie: ein
zehnsekündiges Delay auf Markus‘ Leitung.


SCHAUNOT…

Wir hatten einen Gast, und zwar den Anselm, Webworker aus München und
frischgebackener Autor eines Videotrainings. Außerdem mit von der Partie: ein
zehnsekündiges Delay auf Markus‘ Leitung.


SCHAUNOTIZEN

[00.02.29:000] REDESIGNING THE BROWSER WINDOW

Browser-UI wird immer komprimierter, aber die grundlegenden Paradigmen ändern
sich kaum. Hier macht jemand den Vorschlag, die Tab-Leiste als Sidebar zu
implementieren und dadurch die Vertikale zu entlasten. Immerhin sind auch die
meisten Websites vertikal angelegt.

[00.17.02:000] HTML5 BOILERPLATE 2.0

Der Paule meint, es müsse jetzt 2.0 heißen. Ansich ändert sich nicht viel.
Normalize.css statt Reset.css, besseres Buildscript und Scripts werden mit defer
geladen. Gibt’s nu auch für MODX

[00.32.06:000] SCRIPT-LOADER VS. KEINE SCRIPT-LOADER

Paule fragt nach, ob man Script-Loader braucht oder nicht. Auch wir sind uns
einig, dass Script-Loader in den meisten Fällen eine Schicht zu viel Technik
sind. Schepp’s HTTP-Test übrigens hier.

[00.44.21:000] ADOBE MUSE

tl;dl: It sucks!


[01.03.07:000] KEINE SCHAUNOTIZEN

 * Finding memory leaks
 * TTF Auto Hint
 * diagram.ly
 * Understanding Hardware Acceleration on Mobile Browsers
 * Responsive layout tester

Revision 36: Ohne Jan, aber mit Delay

<p>Was gibt es Besseres, als bei dem aktuellen Wetter den virtuellen Kamin anzufachen und sich auf einen Plausch um ihn herum zu setzen?</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:14] <a href="http://people.mozilla.com/~shorlander/ux-presentation/ux-presentation.html">Mozilla UX Presentation</a></dt>
<dd>Die Mozilla Jungs sitzen mal wieder an neuen Ideen zur weiteren Verschlankung ihres Browser Interfaces. Dabei bedient man sich bei Chrome wie IE9 gleichermaßen und auch der OS X Fullscreen Modus will eingebaut werden.</dd>
<dt>[00:14:10] <a href="http://www.slideshare.net/brianleroux/phonegap-2x">What to expect from Phonegap 2.0</a></dt>
<dd>Die Präsentation zur (denkbaren) Zukunft von Phonegap nehmen wir zum Anlass, über die Fähigkeiten der gerade releasedten 1.0er Version zu reden: Was für Vorteile bietet die Entwicklung nativer Apps mit Web-Sprachen.</dd>
<dt>[00:26:30] <a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">Downloading resources in HTML5: a[download]</a></dt>
<dd>Mit HTML5 wird das Link-Element um ein Attribut namens <code>download</code> erweitert. Mit diesem lässt sich der Dateiname definieren, mit dem der Browser eine Datei bei Downloaden (vor-)benennt. Warum das nicht nur Kleinkram, sondern etwas sehr sinnvolles ist, das finden wir im Gespräch heraus.</dd>
<dt>[00:33:34] <a href="http://blog.chromium.org/2011/08/connecting-web-apps-with-web-intents.html">Connecting Web Apps with Web Intents</a></dt>
<dd>Google und Mozilla sitzen beide an einer neuen Web-zu-Browser-Schnittstelle, mit der sich Web- <em>und</em> Offile-Apps als &#8222;Verarbeiter&#8220; bestimmter Dateitypen am Browser anmelden können. Andere Webanwendungen wiederum können solche Dateien dann zu externen Bearbeitung an diese Anwendungen auslagern und die Ergebnisse weiterverarbeiten.</dd>
</dl>
<h3>[00:44:17] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4">Viewport and Media Queries &#8211; The Complete Idiot&#8217;s Guide</a></dt>
<dd>Alles, was man derzeit zu <code>&lt;meta name="viewport"&gt;</code> bzw. @viewport und CSS3 Media Queries wissen muss.</dd>
<dt><a href="http://www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/">Let the Web move you — CSS3 Animations and Transitions</a></dt>
<dd>Alles Rüstzeug zu den verschiedenen Möglichkeiten, per CSS3 zu animieren.</dd>
<dt><a href="http://www.jeasyui.com/">jQuery EasyUI</a></dt>
<dd>Ein Plugin für jQuery, das all die Widgets und Interface-Elemente mitbringt, die man sonst eher von ExtJS oder Dojo kennt.</dd>
<dt><a href="http://responsive-images.com/">Responsive Images in HTML &#8211; Automatically deliver small images to small devices.</a></dt>
<dd>Ein völlig CMS-agnostisches Apache/PHP-gestütztes System, mit dem man mobile Geräte mit kleineren Grafiken beliefern kann.</dd>
<dt><a href="https://github.com/kriszyp/put-selector">put-selector/put module/package</a></dt>
<dd>JavaScript-Werkzeug mit Zen-ähnlicher Syntax zur unkomplizierten Erzeugung von DOM-Knoten.</dd>
<dt><a href="http://nathansjslessons.appspot.com/">Nathan&#8217;s Lessons</a></dt>
<dd>Ein sich permanent erweiterndes JavaScript Wissensquiz</dd>
<dt><a href="http://net.tutsplus.com/tutorials/javascript-ajax/testing-your-javascript-with-jasmine/">Testing Your JavaScript with Jasmine</a></dt>
<dd>Ein schönes Tutorial, das einen in die Verwendung von Jasmine als Testwerkzeug für JavaScript-Code einführt.</dd>
</dl>


Was gibt es Besseres, als bei dem aktuellen Wetter den virtuellen Kamin
anzufachen und sich auf einen Plausch um ihn herum zu setzen?


SCHAUNOTIZEN

[00:00:14] MOZILLA UX PRESENTATION

Die Mozilla Ju…

Was gibt es Besseres, als bei dem aktuellen Wetter den virtuellen Kamin
anzufachen und sich auf einen Plausch um ihn herum zu setzen?


SCHAUNOTIZEN

[00:00:14] MOZILLA UX PRESENTATION

Die Mozilla Jungs sitzen mal wieder an neuen Ideen zur weiteren Verschlankung
ihres Browser Interfaces. Dabei bedient man sich bei Chrome wie IE9
gleichermaßen und auch der OS X Fullscreen Modus will eingebaut werden.

[00:14:10] WHAT TO EXPECT FROM PHONEGAP 2.0

Die Präsentation zur (denkbaren) Zukunft von Phonegap nehmen wir zum Anlass,
über die Fähigkeiten der gerade releasedten 1.0er Version zu reden: Was für
Vorteile bietet die Entwicklung nativer Apps mit Web-Sprachen.

[00:26:30] DOWNLOADING RESOURCES IN HTML5: A[DOWNLOAD]

Mit HTML5 wird das Link-Element um ein Attribut namens download erweitert. Mit
diesem lässt sich der Dateiname definieren, mit dem der Browser eine Datei bei
Downloaden (vor-)benennt. Warum das nicht nur Kleinkram, sondern etwas sehr
sinnvolles ist, das finden wir im Gespräch heraus.

[00:33:34] CONNECTING WEB APPS WITH WEB INTENTS

Google und Mozilla sitzen beide an einer neuen Web-zu-Browser-Schnittstelle, mit
der sich Web- und Offile-Apps als „Verarbeiter“ bestimmter Dateitypen am Browser
anmelden können. Andere Webanwendungen wiederum können solche Dateien dann zu
externen Bearbeitung an diese Anwendungen auslagern und die Ergebnisse
weiterverarbeiten.


[00:44:17] KEINE SCHAUNOTIZEN

VIEWPORT AND MEDIA QUERIES – THE COMPLETE IDIOT’S GUIDE

Alles, was man derzeit zu <meta name="viewport"> bzw. @viewport und CSS3 Media
Queries wissen muss.

LET THE WEB MOVE YOU — CSS3 ANIMATIONS AND TRANSITIONS

Alles Rüstzeug zu den verschiedenen Möglichkeiten, per CSS3 zu animieren.

JQUERY EASYUI

Ein Plugin für jQuery, das all die Widgets und Interface-Elemente mitbringt, die
man sonst eher von ExtJS oder Dojo kennt.

RESPONSIVE IMAGES IN HTML – AUTOMATICALLY DELIVER SMALL IMAGES TO SMALL DEVICES.

Ein völlig CMS-agnostisches Apache/PHP-gestütztes System, mit dem man mobile
Geräte mit kleineren Grafiken beliefern kann.

PUT-SELECTOR/PUT MODULE/PACKAGE

JavaScript-Werkzeug mit Zen-ähnlicher Syntax zur unkomplizierten Erzeugung von
DOM-Knoten.

NATHAN’S LESSONS

Ein sich permanent erweiterndes JavaScript Wissensquiz

TESTING YOUR JAVASCRIPT WITH JASMINE

Ein schönes Tutorial, das einen in die Verwendung von Jasmine als Testwerkzeug
für JavaScript-Code einführt.

Revision 35: PhoneGap und Web Intents

<p>Es stellte sich uns die Frage, ob es wohl als praktisch empfunden werden würde, veranstalteten wir einige Sondersendungen – entweder zusätzlich zu den wöchentlichen News-Folgen, wovon ihr uns aber erst überzeugen müsstet, oder stattdessen.</p>
<h3>Schaunotizen</h3>
<ul>
<li>[00:00:34.000] <a href="http://contrastrebellion.com/">contrastrebellion.com</a></li>
<li>[00:18:02.000] <a href="http://html2canvas.hertzen.com/">html2canvas</a></li>
<li>[00:26:13.000] <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-html-head-ordering-to-avoid-parser-restarts-redownloads-and-improve-performance.aspx">Get your HEAD in order!</a></li>
<li>00:41:40.000 <a href="http://functionsource.com/post/hascan-only-serve-the-ones-your-care-about">hascan: Only serve the ones you care about</a></li>
</ul>
<h3>Keine Schaunotizen</h3>
<ul>
<li><a href="https://docs.google.com/Doc?docid=0AZNlBave77hiZGNjanptbV84Z25yaHJmMjk&amp;pli=1#Allowed_Intermediary_Character_30801873723976314">SQL-Injection-Cheatsheet</a></li>
<li><a href="http://www.youtube.com/creators/playbook.html">YouTube Creator Playbook</a></li>
<li><a href="http://creativejs.com/">CreativeJS</a></li>
</ul>


Es stellte sich uns die Frage, ob es wohl als praktisch empfunden werden würde,
veranstalteten wir einige Sondersendungen – entweder zusätzlich zu den
wöchentlichen News-Folgen, wovon ihr uns aber ers…

Es stellte sich uns die Frage, ob es wohl als praktisch empfunden werden würde,
veranstalteten wir einige Sondersendungen – entweder zusätzlich zu den
wöchentlichen News-Folgen, wovon ihr uns aber erst überzeugen müsstet, oder
stattdessen.


SCHAUNOTIZEN

 * [00:00:34.000] contrastrebellion.com
 * [00:18:02.000] html2canvas
 * [00:26:13.000] Get your HEAD in order!
 * 00:41:40.000 hascan: Only serve the ones you care about


KEINE SCHAUNOTIZEN

 * SQL-Injection-Cheatsheet
 * YouTube Creator Playbook
 * CreativeJS

Revision 34: Kontraste und Kleinscheiß

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 45: H.264 in JS, jQuery Standards Team & OccupyHTML5!

Working Draft

Revision 44: HTTP-Statuscodes, TYPO3 und ’n Echo, echo, cho, o….

Working Draft

Revision 43: Tripreports, CSS Image Values und Dart

Working Draft

Revision 42: Zweiundvierzig!

Working Draft

Revision 41: setImmediate API, CSS Compositing und überflüssiges HTML5

Working Draft

Revision 40: Zerskyped

Working Draft

Revision 39: Zucker, Bullenkot und GEFÄNGNIS

Working Draft

Revision 38: Gridsysteme und Best Practices

Working Draft

Revision 37: speak.js, Native Client und JS-MVC-Frameworks

Working Draft

Revision 36: Ohne Jan, aber mit Delay

Working Draft

Revision 35: PhoneGap und Web Intents

Working Draft

Revision 34: Kontraste und Kleinscheiß

Working Draft