<p>Eine Kombination aus Sommerloch, EM, WWDC und Schepps Urlaub sorgt erneut für Magerkost bei den Themen. Kann man nichts machen! Dafür führen wir mit den News einen neuen Sendungsbestandteil ein, bei dem es in Zukunft (?) immer ein paar kurze Update-Durchsagen geben soll.</p>
<h3>[00:00:11] News</h3>
<dl>
<dt><a href="http://www.w3.org/blog/CSS/2012/06/06/resolutions-40/">Transitions, Transforms and Animations may be released unprefixed</a></dt>
<dd>Die CSS Working Group erklärt Transitions, Transforms und Animationen für praktisch fertig und der IE 10 <a href="http://msdn.microsoft.com/en-US/library/ie/hh673560.aspx">verzichtet</a> auch bereits auf Vendor-Prefixes hierfür.</dd>
<dt><a href="https://www.secmaniac.com/blog/2012/06/11/massive-mysql-authentication-bypass-exploit/">MySQL Root Exploit</a></dt>
<dd>In manche MySQL-Versionen kann man sich mit beliebigen Passwörtern einloggen.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:19] JSON vs. MessagePack vs. JSON5</dt>
<dd>Mit <a href="http://msgpack.org/">MessagePack</a>, einer binären Abwandlung des JSON-Formats, <a href="http://indiegamr.com/cut-your-data-exchange-traffic-by-up-to-50-with-one-line-of-code-msgpack-vs-json/">meint jemand</a> seinen Traffic halbieren zu können. Uns kommt das wie Blödsinn vor und wir sehen auch nicht so wirklich viel Potenzial für MessagePack in der Webentwicklung. Auch der Autor von MessagePack <a href="https://gist.github.com/2908191">geht d‘accord</a>. Besser finden wir da schon <a href="https://github.com/aseemk/json5">JSON5</a>, eine ECMAScript5-konforme Erweiterung von JSON, die etwas weniger strikt ist&nbsp;&ndash; eine gute Idee für Konfigurationsdateien.</dd>
</dl>
<h3>[00:11:02] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://weblog.bocoup.com/third-party-javascript-development-future/">Third-Party JavaScript Development: The Future!</a></dt>
<dd>Bocoup spekuliert über die Mittel der Zukunft für Third-Party-JS.</dd>
<dt><a href="http://hpneo.github.com/gmaps/examples.html">gmaps.js</a></dt>
<dd>Wrapper für die Google Maps-API, der alles sehr sehr sehr viel bequemer macht.</dd>
<dt><a href="http://ryanseddon.github.com/bunyip/">Bunyip</a></dt>
<dd>Automatisches, paralleles Client-Side-Unittesting in beliebigen Browsern.</dd>
<dt><a href="http://www.2ality.com/2012/06/for-of-ff13.html">Trying out ECMAScript.next’s for&#8230;of loop in Firefox 13</a></dt>
<dd>Axel Rauschmayer über Iteratoren im kommenden ECMAScript-Standard.</dd>
</dl>


Eine Kombination aus Sommerloch, EM, WWDC und Schepps Urlaub sorgt erneut für
Magerkost bei den Themen. Kann man nichts machen! Dafür führen wir mit den News
einen neuen Sendungsbestandteil ein, bei d…

Working Draft

Eine Kombination aus Sommerloch, EM, WWDC und Schepps Urlaub sorgt erneut für
Magerkost bei den Themen. Kann man nichts machen! Dafür führen wir mit den News
einen neuen Sendungsbestandteil ein, bei dem es in Zukunft (?) immer ein paar
kurze Update-Durchsagen geben soll.


[00:00:11] NEWS

TRANSITIONS, TRANSFORMS AND ANIMATIONS MAY BE RELEASED UNPREFIXED

Die CSS Working Group erklärt Transitions, Transforms und Animationen für
praktisch fertig und der IE 10 verzichtet auch bereits auf Vendor-Prefixes
hierfür.

MYSQL ROOT EXPLOIT

In manche MySQL-Versionen kann man sich mit beliebigen Passwörtern einloggen.


SCHAUNOTIZEN

[00:01:19] JSON VS. MESSAGEPACK VS. JSON5

Mit MessagePack, einer binären Abwandlung des JSON-Formats, meint jemand seinen
Traffic halbieren zu können. Uns kommt das wie Blödsinn vor und wir sehen auch
nicht so wirklich viel Potenzial für MessagePack in der Webentwicklung. Auch der
Autor von MessagePack geht d‘accord. Besser finden wir da schon JSON5, eine
ECMAScript5-konforme Erweiterung von JSON, die etwas weniger strikt ist – eine
gute Idee für Konfigurationsdateien.


[00:11:02] KEINE SCHAUNOTIZEN

THIRD-PARTY JAVASCRIPT DEVELOPMENT: THE FUTURE!

Bocoup spekuliert über die Mittel der Zukunft für Third-Party-JS.

GMAPS.JS

Wrapper für die Google Maps-API, der alles sehr sehr sehr viel bequemer macht.

BUNYIP

Automatisches, paralleles Client-Side-Unittesting in beliebigen Browsern.

TRYING OUT ECMASCRIPT.NEXT’S FOR…OF LOOP IN FIREFOX 13

Axel Rauschmayer über Iteratoren im kommenden ECMAScript-Standard.

Revision 75: News, Links und die diesmal wirklich kürzeste Revision aller Zeiten

<p>Schepp war im Urlaub, Kahlil verhindert und die Themenliste war leer. Also besprachen Hans und Peter diesmal eben nur ein einziges Thema.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:02] <a href="http://informationarchitects.net/blog/sweep-the-sleaze/">Sweep the Sleaze</a></dt>
<dd>Oliver Reichenstein meint, dass der Nutzen von Social-Media-Buttons (Facebook, Twitter usw.) zweifelhaft, der bei ihrem Einsatz entstehende Schaden für Image und Seitenperformance hingegen ziemlich sicher sei. Peter mag nicht ganz zustimmen und meint: wenn man es richtig macht, stören die Dinger zumindest nicht.</dd>
</dl>
<h3>[00:18:03] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/fawek/codepainter">Code Painter</a></dt>
<dd><q lang="en">Code Painter is a JavaScript beautifier that instead of asking you to manually specify the desired formatting style, can infer it from a code sample provided by you.</q></dd>
<dt><a href="http://www.youtube.com/view_play_list?p=PL75AC4484E6866741">Videos von Fluent 2012</a></dt>
<dd>Kurzweilige Vorträge von Nerds mit Kaliber.</dd>
<dt><a href="http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html">Sorting &#8211; We&#8217;re Doing It Wrong</a></dt>
<dd>Rodney Rehm steigt aber mal so richtig tief in das Thema „sortieren in JavaScript ein“.</dd>
</dl>


Schepp war im Urlaub, Kahlil verhindert und die Themenliste war leer. Also
besprachen Hans und Peter diesmal eben nur ein einziges Thema.


SCHAUNOTIZEN

[00:01:02] SWEEP THE SLEAZE

Oliver Reichenste…

Schepp war im Urlaub, Kahlil verhindert und die Themenliste war leer. Also
besprachen Hans und Peter diesmal eben nur ein einziges Thema.


SCHAUNOTIZEN

[00:01:02] SWEEP THE SLEAZE

Oliver Reichenstein meint, dass der Nutzen von Social-Media-Buttons (Facebook,
Twitter usw.) zweifelhaft, der bei ihrem Einsatz entstehende Schaden für Image
und Seitenperformance hingegen ziemlich sicher sei. Peter mag nicht ganz
zustimmen und meint: wenn man es richtig macht, stören die Dinger zumindest
nicht.


[00:18:03] KEINE SCHAUNOTIZEN

CODE PAINTER

Code Painter is a JavaScript beautifier that instead of asking you to manually
specify the desired formatting style, can infer it from a code sample provided
by you.

VIDEOS VON FLUENT 2012

Kurzweilige Vorträge von Nerds mit Kaliber.

SORTING – WE’RE DOING IT WRONG

Rodney Rehm steigt aber mal so richtig tief in das Thema „sortieren in
JavaScript ein“.

Revision 74: Social-Media-Buttons, Links und die kürzeste Revision aller Zeiten

<p>Zu Gast war diese Woche <a href="http://anselm-hannemann.com/">Anselm Hannemann</a>, den wir mit seinem Fachwissen gerne <a href="http://workingdraft.de/36/">wieder eingeladen</a> haben. Außerdem waren der Schepp und Hans mit von der Partie.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] <a href="http://dvcs.w3.org/hg/quota/raw-file/tip/Overview.html">Quota Management API</a></dt>
<dd>Wenn man mit client-seitigem Speicher experimentiert (localStorage, IndexedDB, File API) ist es schwierig abzuschätzen, wann der Speicher eines Geräts erschöpft ist. Dafür gibt es die neue Quota Management API, die genau dieses Problem lösen soll.</dd>
<dt>[00:00:00] <a href="http://adobe.github.com/web-platform/demos/compositing/">CSS Compositing &#038; Blending</a></dt>
<dd>Adobe veröffentlicht die neusten Spielereien, die sie sich ausgedacht haben. Dazu gehören das Composing und das Blending, die aus Photoshop, Illustrator und anderer Adobe Software bekannt sind. Für <a href="http://dev.w3.org/SVG/modules/compositing/publish/">SVG gibt es diese Effekte bereits</a>, nun also auch für CSS. Wir finden diese Entwicklungen super; nach Flash erkennt Adobe worauf es im Web ankommt!</dd>
<dt>[00:00:00] <a href="http://louisremi.com/2011/12/06/cors-an-insufficient-solution-for-same-origin-restrictions/">CORS: Louis Rémi reicht&#8217;s nicht</a></dt>
<dd>Möchte man asynchron Abfragen zwischen verschiedenen Domains absetzten, ist man aktuell ziemlich beschränkt. Dieses Problem soll durch <a href="http://www.w3.org/TR/cors/">CORS</a> gelöst werden. Louis Rémi ist allerdings der Meinung, dass das nicht reicht, da Dienste wie Twitter oder Facebook ihre Schnittstellen noch nicht CORS-ready zur Verfügung stellen. Der Artikel erschien bereits Ende letzen Jahres.</dd>
<dt>[00:00:00] <a href="http://www.peterkroener.de/die-responsive-images-story/">Die Responsive Images Story</a></dt>
<dd><a href="https://twitter.com/#!/anselmhannemann">Anselm</a> berichtet über die aktuelle Lage der Responsive Images. Von seinem <a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-August/032977.html">ersten Vorschlag auf der Mailinglist</a>, über die Entstehung der <a href="http://www.w3.org/community/respimg/">W3C Community Group</a>, bis hin zu den <a href="http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/">jüngsten Kontroversen</a> gibt Anselm eine gute Übersicht. Wir sprechen außerdem drüber, was unsere Vorstellungen von Responsive Images sind und wie die W3C und die WHATWG ihre Arbeit machen.</dd>
<dt>[00:00:00] <a href="http://getkirby.com/blog/smashingconf">Über die Smashing Conference</a></dt>
<dd>Die <a href="http://smashingconf.com/">Smashing Conference</a> wird zum ersten mal in Freiburg abgehalten. Bastian Allgeier hat die Website für die Konferenz mit seinem file-basierten <a href="http://getkirby.com/">CMS Kirby</a> gebaut und beschreibt wie. Wir sind große Fans von Kirby und unterstützen auch die Smashing Conference gerne. Wer mehr Infos zu Freiburg möchte, schreibt <a href="mailto:info@drublic.de">Hans</a> gerne eine Mail.</dd>
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.youtube.com/watch?v=xirIHMtpc4c&#038;feature=youtu.be">Adobe Brackets: An Introduction</a></dt>
<dd>Eine Einführung in Adobes Open Source Code Editor, der für Front-end Entwickler gemacht wird. Das Projekt ist <a href="https://github.com/adobe/brackets">auf GitHub</a> und in HTML, CSS und JavaScript programmiert.</dd>
<dt><a href="http://magazin.numboo.de/03/deckblatt/">NUMBOO Magazin</a></dt>
<dd>Das NUMBOO Magazin ist ein deutsches Magazin für Webdesign und Webentwicklung mit einigen interessanten Themen.</dd>
<dt><a href="http://www.andismith.com/blog/2012/05/css3-flexbox-carousel/">CSS Flexbox Carousel</a></dt>
<dd>Andi Smith zeigt, wie man ein Carousel mit Flexbox bauen kann.</dd>
<dt><a href="http://javascriptsql.sourceforge.net/ARCH/en/index.html">JavaScriptSQL</a></dt>
<dd>Eine Datenbank-Engine komplett in JavaScript geschrieben.</dd>
<dt><a href="http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/">Über fixe Positionierung und scrollen in iOS</a></dt>
<dd>Remy Sharp geht auf die Probleme mit fix positionierten Elementen im zusammenwirken mit dem Scrollen auf iOS-Geräten ein und beschriebt die besten Lösungswege.</dd>
</dl>


Zu Gast war diese Woche Anselm Hannemann, den wir mit seinem Fachwissen gerne
wieder eingeladen haben. Außerdem waren der Schepp und Hans mit von der Partie.


SCHAUNOTIZEN

[00:00:00] QUOTA MANAGEMEN…

Zu Gast war diese Woche Anselm Hannemann, den wir mit seinem Fachwissen gerne
wieder eingeladen haben. Außerdem waren der Schepp und Hans mit von der Partie.


SCHAUNOTIZEN

[00:00:00] QUOTA MANAGEMENT API

Wenn man mit client-seitigem Speicher experimentiert (localStorage, IndexedDB,
File API) ist es schwierig abzuschätzen, wann der Speicher eines Geräts
erschöpft ist. Dafür gibt es die neue Quota Management API, die genau dieses
Problem lösen soll.

[00:00:00] CSS COMPOSITING & BLENDING

Adobe veröffentlicht die neusten Spielereien, die sie sich ausgedacht haben.
Dazu gehören das Composing und das Blending, die aus Photoshop, Illustrator und
anderer Adobe Software bekannt sind. Für SVG gibt es diese Effekte bereits, nun
also auch für CSS. Wir finden diese Entwicklungen super; nach Flash erkennt
Adobe worauf es im Web ankommt!

[00:00:00] CORS: LOUIS RÉMI REICHT’S NICHT

Möchte man asynchron Abfragen zwischen verschiedenen Domains absetzten, ist man
aktuell ziemlich beschränkt. Dieses Problem soll durch CORS gelöst werden. Louis
Rémi ist allerdings der Meinung, dass das nicht reicht, da Dienste wie Twitter
oder Facebook ihre Schnittstellen noch nicht CORS-ready zur Verfügung stellen.
Der Artikel erschien bereits Ende letzen Jahres.

[00:00:00] DIE RESPONSIVE IMAGES STORY

Anselm berichtet über die aktuelle Lage der Responsive Images. Von seinem ersten
Vorschlag auf der Mailinglist, über die Entstehung der W3C Community Group, bis
hin zu den jüngsten Kontroversen gibt Anselm eine gute Übersicht. Wir sprechen
außerdem drüber, was unsere Vorstellungen von Responsive Images sind und wie die
W3C und die WHATWG ihre Arbeit machen.

[00:00:00] ÜBER DIE SMASHING CONFERENCE

Die Smashing Conference wird zum ersten mal in Freiburg abgehalten. Bastian
Allgeier hat die Website für die Konferenz mit seinem file-basierten CMS Kirby
gebaut und beschreibt wie. Wir sind große Fans von Kirby und unterstützen auch
die Smashing Conference gerne. Wer mehr Infos zu Freiburg möchte, schreibt Hans
gerne eine Mail.


[00:00:00] KEINE SCHAUNOTIZEN

ADOBE BRACKETS: AN INTRODUCTION

Eine Einführung in Adobes Open Source Code Editor, der für Front-end Entwickler
gemacht wird. Das Projekt ist auf GitHub und in HTML, CSS und JavaScript
programmiert.

NUMBOO MAGAZIN

Das NUMBOO Magazin ist ein deutsches Magazin für Webdesign und Webentwicklung
mit einigen interessanten Themen.

CSS FLEXBOX CAROUSEL

Andi Smith zeigt, wie man ein Carousel mit Flexbox bauen kann.

JAVASCRIPTSQL

Eine Datenbank-Engine komplett in JavaScript geschrieben.

ÜBER FIXE POSITIONIERUNG UND SCROLLEN IN IOS

Remy Sharp geht auf die Probleme mit fix positionierten Elementen im
zusammenwirken mit dem Scrollen auf iOS-Geräten ein und beschriebt die besten
Lösungswege.

Revision 73: Von CSS Blenden, Cross-Domain-Requests und responsiven Bildern

<p>Die Stammbesatzung trat an und brauchte zum Sortieren der Themen länger als für die Aufnahme. Trotzdem ist noch einiges an Material übrig geblieben.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:22] <a href="http://css-tricks.com/sass-vs-less/">SASS versus LESS</a></dt>
<dd>Chris Coyier vergleicht SASS mit LESS und kürt ersteres zum Gewinner. Für rechten Widerspruch reicht es bei uns nicht, da wir SASS in Kombination mit <a href="http://compass-style.org/">Compass</a> und <a href="https://incident57.com/codekit/">CodeKit</a> auch nicht so ganz schlecht finden. Die etwas nerdigere Fraktion findet aber auch die Kombination <a href="http://learnboost.github.com/stylus/">Stylus</a> + <a href="https://github.com/visionmedia/nib">Nib</a> + <a href="https://github.com/cowboy/grunt">Grunt</a> ganz gut. Naja, jeder wie er will :)</dd>
<dt>[00:22:00] <a href="http://dev.w3.org/csswg/css4-mediaqueries/">Media Queries Level 4</a></dt>
<dd>CSS4 ist im Anmarsch und die neuen Media Queries führen neben einem Script-Detektor auch ein Feature ein, mit dem man herausfinden kann, ob ein Gerät so etwas wie ein „Mousover“ (d.h. die Hover-Pseudoklasse) überhaupt leisten kann. Ob ein Gerät einen Tochscreen hat, kann man zwar schon mit <a href="https://developer.mozilla.org/en/CSS/Media_queries#-moz-touch-enabled">proprietären Mitteln</a> herausfinden, aber <a href="http://blog.gsmarena.com/sony-xperia-sola-official-video-ad-demonstrates-the-hover-touch/">ein Touchscreen muss Mouseover-Funktionalität ja nicht zwingend ausschließen</a>.</dd>
<dt>[00:27:57] <a href="http://swapped.tumblr.com/post/23133779276/google-bot-now-crawls-arbitrary-javascript-sites">Google Bot now crawls arbitrary Javascript sites</a></dt>
<dd>Wir sind uns überhaupt nicht einig, ob das nicht schon alter Käse ist und ob man aus dieser Entdeckung irgend etwas für die tägliche Arbeit ableiten sollte. Was meint ihr?</dd>
<dt>[00:41:20] <a href="https://plus.google.com/115133653231679625609/posts/Dk5UhZ6zfF3">Google Chrome Canary: webkitdirectory attribute walkthrough</a></dt>
<dd>Addy Osmani erklärt, wie man aus der <a href="http://www.w3.org/TR/FileAPI/">HTML5 File API</a>, einem neuen HTML-Attribut und etwas Trickserei etwas backen kann, dass Drag &amp; Drop von ganzen Verzeichnissen in Webapps ermöglicht.</dd>
</dl>
<h3>[00:47:55] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://angryamoeba.co.uk/spahql-announce/">SpahQL</a></dt>
<dd>Query-Sprache für komplexe JavaScript-Objekte.</dd>
<dt><a href="http://net.tutsplus.com/tutorials/javascript-ajax/meet-crockford%E2%80%99s-jscheck/">JSCheck-Tutorial</a></dt>
<dd>Einführung in <a href="http://www.jscheck.org/">ein neues Test-Framework</a> von Douglas Crockford, das mit Zufalls-Inputs arbeitet.</dd>
<dt><a href="http://www.zurb.com/article/982/a-new-take-on-responsive-tables">Responsive Tables</a></dt>
<dd>Ein Ansatz für Responsive Tabellen.</dd>
<dt><a href="http://tomdale.net/2012/05/ember-routing/">Our Approach to Routing in Ember.js</a></dt>
<dd>Man kann es so oder so machen. <a href="http://emberjs.com/">Ember.js</a> macht es so.</dd>
<dt><a href="http://xing.github.com/wysihtml5/">wysihtml5 &#8211; A better approach to rich text editing</a></dt>
<dd>Qualität aus dem Hause Xing.</dd>
<dt><a href="http://www.smashingmagazine.com/2012/05/21/how-to-choose-the-right-face-for-a-beautiful-body/">How To Choose The Right Face For A Beautiful Body</a></dt>
<dd>Typoraphie-Tutorial.</dd>
<dt><a href="https://github.com/blog/1127-github-for-windows">GitHub for Windows</a></dt>
<dd>Nach dem Github-Client für Mac gibt es nun auch einen für Windows.</dd>
</dl>


Die Stammbesatzung trat an und brauchte zum Sortieren der Themen länger als für
die Aufnahme. Trotzdem ist noch einiges an Material übrig geblieben.


SCHAUNOTIZEN

[00:00:22] SASS VERSUS LESS

Chris …

Die Stammbesatzung trat an und brauchte zum Sortieren der Themen länger als für
die Aufnahme. Trotzdem ist noch einiges an Material übrig geblieben.


SCHAUNOTIZEN

[00:00:22] SASS VERSUS LESS

Chris Coyier vergleicht SASS mit LESS und kürt ersteres zum Gewinner. Für
rechten Widerspruch reicht es bei uns nicht, da wir SASS in Kombination mit
Compass und CodeKit auch nicht so ganz schlecht finden. Die etwas nerdigere
Fraktion findet aber auch die Kombination Stylus + Nib + Grunt ganz gut. Naja,
jeder wie er will :)

[00:22:00] MEDIA QUERIES LEVEL 4

CSS4 ist im Anmarsch und die neuen Media Queries führen neben einem
Script-Detektor auch ein Feature ein, mit dem man herausfinden kann, ob ein
Gerät so etwas wie ein „Mousover“ (d.h. die Hover-Pseudoklasse) überhaupt
leisten kann. Ob ein Gerät einen Tochscreen hat, kann man zwar schon mit
proprietären Mitteln herausfinden, aber ein Touchscreen muss
Mouseover-Funktionalität ja nicht zwingend ausschließen.

[00:27:57] GOOGLE BOT NOW CRAWLS ARBITRARY JAVASCRIPT SITES

Wir sind uns überhaupt nicht einig, ob das nicht schon alter Käse ist und ob man
aus dieser Entdeckung irgend etwas für die tägliche Arbeit ableiten sollte. Was
meint ihr?

[00:41:20] GOOGLE CHROME CANARY: WEBKITDIRECTORY ATTRIBUTE WALKTHROUGH

Addy Osmani erklärt, wie man aus der HTML5 File API, einem neuen HTML-Attribut
und etwas Trickserei etwas backen kann, dass Drag & Drop von ganzen
Verzeichnissen in Webapps ermöglicht.


[00:47:55] KEINE SCHAUNOTIZEN

SPAHQL

Query-Sprache für komplexe JavaScript-Objekte.

JSCHECK-TUTORIAL

Einführung in ein neues Test-Framework von Douglas Crockford, das mit
Zufalls-Inputs arbeitet.

RESPONSIVE TABLES

Ein Ansatz für Responsive Tabellen.

OUR APPROACH TO ROUTING IN EMBER.JS

Man kann es so oder so machen. Ember.js macht es so.

WYSIHTML5 – A BETTER APPROACH TO RICH TEXT EDITING

Qualität aus dem Hause Xing.

HOW TO CHOOSE THE RIGHT FACE FOR A BEAUTIFUL BODY

Typoraphie-Tutorial.

GITHUB FOR WINDOWS

Nach dem Github-Client für Mac gibt es nun auch einen für Windows.

Revision 72: SASS vs. LESS & Googlebot vs. JavaScript

<p>Zur aktuellen Sendung fanden sich der Schepp, Kahlil und Hans ein, um wie gewohnt die wichtigsten Neuerungen und Entdeckungen der Woche zu besprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] <a href="http://blogs.msdn.com/b/ie/archive/2012/05/10/diagnosing-javascript-errors-faster-with-error-stack.aspx">JavaScript-Fehler schneller Analysieren mit Error.stack</a></dt>
<dd>Das Internet Explorer Team vom Microsoft erläutert, wie man mit dem neuen <code>Error</code>-Objekt in JavaScript leichter debuggen kann. Viel besser als zum Beispiel mit <code>console.log()</code> kann man mit <code>Error.stack</code> eine komplette Stack-Trace des Fehlers bekommen, den man abgefangen hat. Ziemlich gut!</dd>
<dt>[00:08:23] <a href="http://www.iamntz.com/3157/frontend-developer/css-keyframe-based-events/">CSS keyframe based JavaScript events</a></dt>
<dd>Da JavaScript-Events für CSS Keyframe-Animationen irgendwie noch nicht so ausgereift sind, hat sich Ionuţ Staicu darüber Gedanken gemacht, wie man dem Zeit aktuellen Fortschritt einer Animation mit einem Event beschreiben kann. Mithilfe von <code>requestAnimationFrame</code> findet er eine Lösung. Wir grübeln allerdings noch über den exakten Einsatzbereich.</dd>
<dt>[00:15:54] <a href="http://smus.com/physical-units/">Let&#8217;s Get Physical (Units)</a></dt>
<dd>Die aktuellen CSS-Einheiten wie <code>em</code>, <code>px</code> und <code>%</code> findet Boris Smus nicht ausreichend, um Styles für die verschiedenen Geräte der Gegenwart (Smartphones, Desktops, TVs…) zu schreiben. Deshalb plädiert er dafür eine tatsächliche physikalische Einheit einzuführen, die auch richtig funktioniert. Nicht so wie das im Moment mit <code>mm</code>, <code>in</code> und so weiter ist.</dd>
<dt>[00:31:09] <a href="#">Hitch &#8211; Stärke Aussagekraft durch besseres CSS ist die Devise</a></dt>
<dd>Hitch ist eine JavaScript Library, die als “Postprocessor” agiert und das angegebene CSS um Pseudoklassen wie <code>:has</code> erweitert. Damit bekommen Stylesheets ungeahnte Funktionen, die man vielleicht gar nicht braucht.</dd>
<dt>[00:42:46] <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">DOM MutationObserver – Auf DOM-Änderungen reagieren ohne die Performance zu killen</a></dt>
<dd>Als Weiterentwicklung der Mutation Events sind die MutationObserver nun auch im Firefox gelandet. Wir sprechen darüber, wozu diese nützlich sein können und wie man sie aktuell einsetzen kann.</dd>
</dl>
<h3>[00:55:15] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://paulirish.com/2012/talk-tooling-the-webapp-development-stack/">Tooling &#038; The Webapp Development Stack</a></dt>
<dd>Auf der jQueryConf präsentierte Paul Irish, welche Tools wir als Web-devs zur Zeit zur Verfügung haben. Gute Zusammenstellung.</dd>
<dt><a href="http://www.alistapart.com/articles/application-cache-is-a-douchebag/">Application Cache is a Douchebag</a></dt>
<dd>Wie man mit dem Applikation fertig werden kann oder eben auch nicht, beschreibt Jake Archibald in seinem ALA-Artikel.</dd>
<dt><a href="http://html5doctor.com/html5-audio-the-state-of-play/">HTML5 Audio — The State of Play</a></dt>
<dd>Von der HTML5 Audio API hat man schon länger nichts mehr gehört. Hier der aktuelle Stand.</dd>
<dt><a href="http://radar.oreilly.com/2012/05/velocity-performance-makeover.html">Giving the Velocity website a performance makeover</a></dt>
<dd>Case Study zum Thema Performance Optimierung anhand der Website der Velocity-Konferenz.</dd>
<dt><a href="http://www.thetoolbox.cc/">The Toolbox</a></dt>
<dd>Eine Sammlung an hilfreichen Apps und Tools aus dem Bereich der Webentwicklung, die man so gerne wieder vergisst.</dd>
<dt><a href="http://jqvmap.com/">jQuery Vector Maps</a></dt>
<dd>SVG-basierte Karten als jQuery Plugin.</dd>
<dt><a href="http://cssarrowplease.com/">cssarrowplease</a></dt>
<dd>Kleine Pfeile mit CSS Pseudo-Elementen kreieren und den Code dazu kopieren!</dd>
<dt><a href="http://anthonyterrien.com/knob/">jQuery Knob</a></dt>
<dd>Interessantes jQuery Plugin, das Rädchen erzeugt, die aussehen, wie ein Volume-Wheel und dazu noch super für Touch-Devices geeignet sind.</dd>
<dt><a href="https://github.com/bshack/jQuery.ish">jQuery.ish</a></dt>
<dd>jQuery.ish ist eine Micro-JS-Library, die ein paar wenige jQuery-Funktionen beinhaltet. Genau richtig in manchen Fällen.</dd>
<dt><a href="http://www.youtube.com/watch?feature=player_embedded&#038;v=-G3RoBHMu-o">How To Survive A Robot Uprising</a></dt>
<dd>Wichtiger “Lehrfilm”, wie man einen Angriff von Robotern auf die Menschheit überlebt. Aufgrund der aktuellen Lage, bitte dringend ansehen!</dd>
</dl>


Zur aktuellen Sendung fanden sich der Schepp, Kahlil und Hans ein, um wie
gewohnt die wichtigsten Neuerungen und Entdeckungen der Woche zu besprechen.


SCHAUNOTIZEN

[00:00:30] JAVASCRIPT-FEHLER SCHN…

Zur aktuellen Sendung fanden sich der Schepp, Kahlil und Hans ein, um wie
gewohnt die wichtigsten Neuerungen und Entdeckungen der Woche zu besprechen.


SCHAUNOTIZEN

[00:00:30] JAVASCRIPT-FEHLER SCHNELLER ANALYSIEREN MIT ERROR.STACK

Das Internet Explorer Team vom Microsoft erläutert, wie man mit dem neuen
Error-Objekt in JavaScript leichter debuggen kann. Viel besser als zum Beispiel
mit console.log() kann man mit Error.stack eine komplette Stack-Trace des
Fehlers bekommen, den man abgefangen hat. Ziemlich gut!

[00:08:23] CSS KEYFRAME BASED JAVASCRIPT EVENTS

Da JavaScript-Events für CSS Keyframe-Animationen irgendwie noch nicht so
ausgereift sind, hat sich Ionuţ Staicu darüber Gedanken gemacht, wie man dem
Zeit aktuellen Fortschritt einer Animation mit einem Event beschreiben kann.
Mithilfe von requestAnimationFrame findet er eine Lösung. Wir grübeln allerdings
noch über den exakten Einsatzbereich.

[00:15:54] LET’S GET PHYSICAL (UNITS)

Die aktuellen CSS-Einheiten wie em, px und % findet Boris Smus nicht
ausreichend, um Styles für die verschiedenen Geräte der Gegenwart (Smartphones,
Desktops, TVs…) zu schreiben. Deshalb plädiert er dafür eine tatsächliche
physikalische Einheit einzuführen, die auch richtig funktioniert. Nicht so wie
das im Moment mit mm, in und so weiter ist.

[00:31:09] HITCH – STÄRKE AUSSAGEKRAFT DURCH BESSERES CSS IST DIE DEVISE

Hitch ist eine JavaScript Library, die als “Postprocessor” agiert und das
angegebene CSS um Pseudoklassen wie :has erweitert. Damit bekommen Stylesheets
ungeahnte Funktionen, die man vielleicht gar nicht braucht.

[00:42:46] DOM MUTATIONOBSERVER – AUF DOM-ÄNDERUNGEN REAGIEREN OHNE DIE
PERFORMANCE ZU KILLEN

Als Weiterentwicklung der Mutation Events sind die MutationObserver nun auch im
Firefox gelandet. Wir sprechen darüber, wozu diese nützlich sein können und wie
man sie aktuell einsetzen kann.


[00:55:15] KEINE SCHAUNOTIZEN

TOOLING & THE WEBAPP DEVELOPMENT STACK

Auf der jQueryConf präsentierte Paul Irish, welche Tools wir als Web-devs zur
Zeit zur Verfügung haben. Gute Zusammenstellung.

APPLICATION CACHE IS A DOUCHEBAG

Wie man mit dem Applikation fertig werden kann oder eben auch nicht, beschreibt
Jake Archibald in seinem ALA-Artikel.

HTML5 AUDIO — THE STATE OF PLAY

Von der HTML5 Audio API hat man schon länger nichts mehr gehört. Hier der
aktuelle Stand.

GIVING THE VELOCITY WEBSITE A PERFORMANCE MAKEOVER

Case Study zum Thema Performance Optimierung anhand der Website der
Velocity-Konferenz.

THE TOOLBOX

Eine Sammlung an hilfreichen Apps und Tools aus dem Bereich der Webentwicklung,
die man so gerne wieder vergisst.

JQUERY VECTOR MAPS

SVG-basierte Karten als jQuery Plugin.

CSSARROWPLEASE

Kleine Pfeile mit CSS Pseudo-Elementen kreieren und den Code dazu kopieren!

JQUERY KNOB

Interessantes jQuery Plugin, das Rädchen erzeugt, die aussehen, wie ein
Volume-Wheel und dazu noch super für Touch-Devices geeignet sind.

JQUERY.ISH

jQuery.ish ist eine Micro-JS-Library, die ein paar wenige jQuery-Funktionen
beinhaltet. Genau richtig in manchen Fällen.

HOW TO SURVIVE A ROBOT UPRISING

Wichtiger “Lehrfilm”, wie man einen Angriff von Robotern auf die Menschheit
überlebt. Aufgrund der aktuellen Lage, bitte dringend ansehen!

Revision 71: Error.stack, Physical Units & DOM Mutation Observers

<p>Als Gast war diesmal wieder <a href="http://frederic-hemberger.de/">Frederic Hemberger</a> am Start, der uns immer gerne mit seinem Fachwissen zur Seite steht.</p>
<p>Wir möchten auch noch einmal auf unseren <a href="http://www.livestream.com/workingdraft">Live-Stream</a> und den <a href="http://webchat.freenode.net/?channels=workingdraft">IRC-Chat auf Freenode im Channel #workingdraft</a> hinweisen. Wir sind immer montags ab 20 Uhr live, wenn nicht anders angekündigt. Die neusten Infos gibt&#8217;s immer auf <a href="https://twitter.com/#!/workingdraft">Twitter</a> und bei <a href="https://plus.google.com/100063817839650840647/posts">Google+</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:18] <a href="http://addyosmani.com/blog/javascript-style-guides-and-beautifiers/">JavaScript Styleguides</a></dt>
<dd>Addy Osmani befasst sich mit Programmierrichtlinien in JavaScript. Er führt dabei <a href="https://github.com/rwldrn/idiomatic.js/">idiomatic.js</a>, den <a href="http://docs.jquery.com/JQuery_Core_Style_Guidelines">jQuery Core Style Guide</a> und viele weitere Best Practices an, die wir diskutieren. Hans hat über seine persönlichen Richtlinien in HTML und CSS <a href="http://drublic.de/blog/my-coding-style-and-guidelines/">einen Post geschrieben</a>.<br />
Außerdem sprechen wir über Ben “Cowboy” Almans <a href="http://benalman.com/news/2012/05/multiple-var-statements-javascript/">Blogpost</a> zum Thema <code>var</code>-Deklarationen.
</dd>
<dt>[00:19:00] <a href="http://www.oliveira-online.net/wordpress/index.php/2012/05/01/barrierefreiheit-und-die-beschwerdekultur-im-internet/">Barrierefreiheit und die Beschwerdekultur im Internet</a></dt>
<dd>Domingos de Oliveira findet es schade, dass Accessibility-Experten sich aufregen, wenn Webseiten nicht perfekt zugänglich sind; sie sollten lieber mal die Dinge loben, die überhaupt gemacht werden. Marco Zehe gibt <a href="https://www.youtube.com/watch?v=QBcV00ZLYDA">mit seinem MMT Talk</a> einen guten Einblick, was es für Sehbehinderte Menschen bedeutet, Barrierefreiheit zu genießen.</dd>
<dt>[00:35:20] <a href="http://www.addthis.com/blog/2012/05/01/a-step-for-open-sharing-addthis-integrates-web-intents/">A Step for Open Sharing: AddThis Integrates Web Intents </a></dt>
<dd>Zum Thema Web Intents: Was ist <a href="http://webintents.org/">das eigentlich</a>? Und nutzt das jemand?<br />
AddThis integriert Web Intents mit Fallback und schreibt darüber. Sieht vielversprechend aus!</dd>
</dl>
<h3>[00:44:28] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.youtube.com/watch?v=jZeiZIAjlAk">Videos vom MMT29</a></dt>
<dd>So langsam gehen die Videos vom MMT 29 in Köln online. Hier findet ihr zum beispiel Peters.</dd>
<dt><a href="http://platform.html5.org/">The Web Platform: Browser Technologies</a></dt>
<dd>Schöne Übersicht über die einzelen Specs, Caniuse/MDN-Links, etc.</dd>
<dt><a href="https://github.com/blog/1125-new-git-homepage">Die neue Git-Homepage</a></dt>
<dd>GitHub hat eine neue Präsentationswebseite mit Dokumentation für Git erstellt.</dd>
<dt><a href="https://github.com/c4milo/node-webkit-agent">Node WebKit Agent</a></dt>
<dd>Die WebKit Developer-Tools für Node.</dd>
<dt><a href="http://coenraets.org/blog/2012/05/single-page-crud-application-with-backbone-js-and-twitter-bootstrap/">Backbone.js CRUD Application</a></dt>
<dd>Eine Single-Page <a href="http://de.wikipedia.org/wiki/CRUD">CRUD</a> Application mit Backbone.js und Twitter Bootstrap.</dd>
<dt><a href="https://plus.google.com/113127438179392830442/posts/APArpwWqew3">Bessere Performance mit element.classList</a></dt>
<dd>Mr. Paul Irish zeigt, wie man die Performance von bspw. Animationen mit <code>element.classList</code> drastisch verbessern kann.</dd>
<dt><a href="https://github.com/sindresorhus/screenfull.js">Cross-Browser Fullscreen API</a></dt>
<dd>Sindre Sorhus hat einen Wrapper für die Fullscreen API gebaut, der auf allen browsern funktioniert, die die Fullscreen API supporten.</dd>
<dt><a href="https://plus.google.com/114636678211810483111/posts/5gCXuXiWuLD">G+-Zirkelteiler mit nur JS-Menschen</a></dt>
<dd>Für alle, die noch nicht genug Leute eingekreist haben.</dd>
</dl>


Als Gast war diesmal wieder Frederic Hemberger am Start, der uns immer gerne mit
seinem Fachwissen zur Seite steht.

Wir möchten auch noch einmal auf unseren Live-Stream und den IRC-Chat auf
Freenode …

Als Gast war diesmal wieder Frederic Hemberger am Start, der uns immer gerne mit
seinem Fachwissen zur Seite steht.

Wir möchten auch noch einmal auf unseren Live-Stream und den IRC-Chat auf
Freenode im Channel #workingdraft hinweisen. Wir sind immer montags ab 20 Uhr
live, wenn nicht anders angekündigt. Die neusten Infos gibt’s immer auf Twitter
und bei Google+.


SCHAUNOTIZEN

[00:00:18] JAVASCRIPT STYLEGUIDES

Addy Osmani befasst sich mit Programmierrichtlinien in JavaScript. Er führt
dabei idiomatic.js, den jQuery Core Style Guide und viele weitere Best Practices
an, die wir diskutieren. Hans hat über seine persönlichen Richtlinien in HTML
und CSS einen Post geschrieben.
Außerdem sprechen wir über Ben “Cowboy” Almans Blogpost zum Thema
var-Deklarationen.

[00:19:00] BARRIEREFREIHEIT UND DIE BESCHWERDEKULTUR IM INTERNET

Domingos de Oliveira findet es schade, dass Accessibility-Experten sich
aufregen, wenn Webseiten nicht perfekt zugänglich sind; sie sollten lieber mal
die Dinge loben, die überhaupt gemacht werden. Marco Zehe gibt mit seinem MMT
Talk einen guten Einblick, was es für Sehbehinderte Menschen bedeutet,
Barrierefreiheit zu genießen.

[00:35:20] A STEP FOR OPEN SHARING: ADDTHIS INTEGRATES WEB INTENTS

Zum Thema Web Intents: Was ist das eigentlich? Und nutzt das jemand?
AddThis integriert Web Intents mit Fallback und schreibt darüber. Sieht
vielversprechend aus!


[00:44:28] KEINE SCHAUNOTIZEN

VIDEOS VOM MMT29

So langsam gehen die Videos vom MMT 29 in Köln online. Hier findet ihr zum
beispiel Peters.

THE WEB PLATFORM: BROWSER TECHNOLOGIES

Schöne Übersicht über die einzelen Specs, Caniuse/MDN-Links, etc.

DIE NEUE GIT-HOMEPAGE

GitHub hat eine neue Präsentationswebseite mit Dokumentation für Git erstellt.

NODE WEBKIT AGENT

Die WebKit Developer-Tools für Node.

BACKBONE.JS CRUD APPLICATION

Eine Single-Page CRUD Application mit Backbone.js und Twitter Bootstrap.

BESSERE PERFORMANCE MIT ELEMENT.CLASSLIST

Mr. Paul Irish zeigt, wie man die Performance von bspw. Animationen mit
element.classList drastisch verbessern kann.

CROSS-BROWSER FULLSCREEN API

Sindre Sorhus hat einen Wrapper für die Fullscreen API gebaut, der auf allen
browsern funktioniert, die die Fullscreen API supporten.

G+-ZIRKELTEILER MIT NUR JS-MENSCHEN

Für alle, die noch nicht genug Leute eingekreist haben.

Revision 70: JS Styleguides, Barrierefreiheit & Web Intents

<p>Drei Themen, drei Buchstaben&nbsp;&ndash; CSS! Nur die Crew war wieder zu viert am Start.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:31] <a href="http://dev.opera.com/articles/view/opera-mobile-emulator-experimental-webkit-prefix-support/">Opera implementiert -webkit-Präfixes</a></dt>
<dd>Zunächst passiert das nur im Mobile-Emulator, aber die Geist geht nicht mehr zurück in die Flasche&nbsp;&ndash; bald werden diverse Webkit-Präfixes auch in Opera funktionieren. Grund ist, dass viele Mobile-Webseiten nur auf Webkit optimiert werden, obwohl Opera in diesem Sektor <a href="http://www.opera.com/smw/2012/03/">einiges an Marktanteil hat</a>. Das Webentwickler-Universum reagiert auf diese Meldung mit <a href="http://stuffandnonsense.co.uk/blog/about/there_i_said_it">Shitstorms</a> und <a href="http://farukat.es/journal/2012/04/650-opera-confirms-webkit-prefix-usage">Mimimi</a>, doch wir sehen das eher entspannt.</dd>
<dt>[00:31:22] <a href="http://adactio.com/journal/5429/">Conditional CSS</a></dt>
<dd>Jeremy Keith erfindet einen überaus komplizierten Nachbau für <a href="https://developer.mozilla.org/en/DOM/window.matchMedia">window.matchMedia</a> und auf CSS-Tricks gibt es auch <a href="http://css-tricks.com/examples/ConditionalCSS/">eine entsprechende Demo</a>. Wozu das Ganze wenn es doch <a href="https://github.com/paulirish/matchMedia.js/">schon Polyfills gibt</a>? Ein Vorteil ist, dass man mit Conditional CSS keine Media Queries mehr in Script und Style duplizieren muss, sondern alles aus CSS heraus steuern kann.</dd>
<dt>[00:43:18] <a href="http://www.jordanm.co.uk/contentchoreography">Content Choreography in Responsive Web Design</a></dt>
<dd>Demo eines Responsive Designs, das auf normalen Bildschirmgrößen Floats und für kleine Maße <a href="http://www.w3.org/TR/css3-flexbox/">Flexbox</a> verwendet. Peter ist nicht sonderlich überzeugt davon, einfach vorauszusetzen, dass alle Geräte mit kleinen Bildschirm Flexbox (was nicht die stabilste Spezifikation ist) beherrschen und beschwört trollend die Geister von Vendor-Prefix-Gate 2.0. Schepp hingegen gefällt es.</dd>
</dl>
<h3>[00:53:03] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api">idb.filesystem.js</a></dt>
<dd>Filesystem-API-Polyfill via Indexed DB.</dd>
<dt><a href="http://gent.ilcore.com/2012/04/optimizing-with-timeline-panel.html">Optimizing with the timeline panel</a></dt>
<dd>Wie man die Timeline in Web Inspector für Performanceforschung nutzt.</dd>
<dt><a href="http://lea.verou.me/2012/04/background-attachment-local/">CSS background-attachment: local</a></dt>
<dd>Eins von diesen eher unbekannten CSS-Features erklärt und demonstriert.</dd>
</dl>


Drei Themen, drei Buchstaben – CSS! Nur die Crew war wieder zu viert am Start.


SCHAUNOTIZEN

[00:00:31] OPERA IMPLEMENTIERT -WEBKIT-PRÄFIXES

Zunächst passiert das nur im Mobile-Emulator, aber die G…

Drei Themen, drei Buchstaben – CSS! Nur die Crew war wieder zu viert am Start.


SCHAUNOTIZEN

[00:00:31] OPERA IMPLEMENTIERT -WEBKIT-PRÄFIXES

Zunächst passiert das nur im Mobile-Emulator, aber die Geist geht nicht mehr
zurück in die Flasche – bald werden diverse Webkit-Präfixes auch in Opera
funktionieren. Grund ist, dass viele Mobile-Webseiten nur auf Webkit optimiert
werden, obwohl Opera in diesem Sektor einiges an Marktanteil hat. Das
Webentwickler-Universum reagiert auf diese Meldung mit Shitstorms und Mimimi,
doch wir sehen das eher entspannt.

[00:31:22] CONDITIONAL CSS

Jeremy Keith erfindet einen überaus komplizierten Nachbau für window.matchMedia
und auf CSS-Tricks gibt es auch eine entsprechende Demo. Wozu das Ganze wenn es
doch schon Polyfills gibt? Ein Vorteil ist, dass man mit Conditional CSS keine
Media Queries mehr in Script und Style duplizieren muss, sondern alles aus CSS
heraus steuern kann.

[00:43:18] CONTENT CHOREOGRAPHY IN RESPONSIVE WEB DESIGN

Demo eines Responsive Designs, das auf normalen Bildschirmgrößen Floats und für
kleine Maße Flexbox verwendet. Peter ist nicht sonderlich überzeugt davon,
einfach vorauszusetzen, dass alle Geräte mit kleinen Bildschirm Flexbox (was
nicht die stabilste Spezifikation ist) beherrschen und beschwört trollend die
Geister von Vendor-Prefix-Gate 2.0. Schepp hingegen gefällt es.


[00:53:03] KEINE SCHAUNOTIZEN

IDB.FILESYSTEM.JS

Filesystem-API-Polyfill via Indexed DB.

OPTIMIZING WITH THE TIMELINE PANEL

Wie man die Timeline in Web Inspector für Performanceforschung nutzt.

CSS BACKGROUND-ATTACHMENT: LOCAL

Eins von diesen eher unbekannten CSS-Features erklärt und demonstriert.

Revision 69: CSS Battle Royale – Opera <3 -webkit, Conditional CSS &
Content-Choreographie

<p>Mit <a href="http://frederic-hemberger.de/">Frederic Hemberger</a> als hochkarätigem Ersatz für den ausgeflogenen Peter stürzten wir uns auf aktuelle und liegen gebliebene Themen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:20] <a href="https://github.com/h5bp/html5-boilerplate/commit/1d320b59a390041f25cf87d790f6472a25a512ef">Kein Hot Pink mehr in der Boilerplate</a></dt>
<dd><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> hatte lange Zeit Pink als Hintergrundfarbe für markierten Text eingesetzt, im Vertrauen darauf, dass Webentwickler clever genug sein würden, das bei Bedarf zu ändern. Drollige Vorstellung.</dd>
<dt>[00:08:14] <a href="http://weblog.bocoup.com/introducing-grunt/">Grunt</a></dt>
<dd><q>Grunt is a task-based command line build tool for JavaScript projects.</q> Frederic übersetzt das für uns.</dd>
<dt>[00:18:17] <a href="http://dev.w3.org/html5/spec/commands.html#the-dialog-element">&lt;dialog&gt;</a></dt>
<dd>Neue Elemente für HTML5? Immer wieder gerne!</dd>
<dt>[00:28:44] Mobile Testing</dt>
<dd>Wie testet man mobile? <a href="http://www.slideshare.net/guypod/performance-implications-of-mobile-design">So</a> <a href="http://www.blaze.io/technical/open-sourcing-mobitest/">geht</a> <a href="http://www.webpagetest.org/">das</a>! Bleibt noch das leidige Problem mit dem Download unnötiger Ressourcen, doch auch da gibt es ja <a href="http://24ways.org/2011/conditional-loading-for-responsive-designs">Ansätze</a>.</dd>
<dt>[00:43:05] <a href="http://blog.rodneyrehm.de/archives/13-jQuery-The-Little-Things.html">jQuery &#8211; The Little Things</a></dt>
<dd>Rodney Rehm in Hochform erklärt und demonstriert den Unterschied zwischen &#8222;It works&#8220; und gutem Code.</dd>
</dl>
<h3>[00:49:34] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://gehaxelt.in/blog/ueberspace-einsteigervideo/">Uberspace-Videotutorial</a></dt>
<dd>Wie der beste Hoster der Welt funktioniert, erklärt in bewegten Bildern.</dd>
<dt><a href="http://javascriptenlightenment.com/">JavaScript Enlightment: Free PDF eBook</a></dt>
<dd>Verflucht sei die elende Kostenloskultur im Internet.</dd>
<dt><a href="http://misoproject.com/dataset/">Miso Dataset</a></dt>
<dd>Clientseitige Datentransformation vom Fach.</dd>
<dt><a href="http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/">BEM</a></dt>
<dd>Umdenken für das Frontend.</dd>
<dt><a href="http://jtaby.com/2012/04/23/modern-web-development-part-1.html">Modern Web Development, Part 1 – The Webkit Inspector</a></dt>
<dd>Auftakt einer Serie über die optimale Webdev-Toolchain.</dd>
<dt><a href="http://dojofoundation.org/packages/dgrid/">dGrid</a></dt>
<dd>Grid-Komponente für Dojo.</dd>
</dl>


Mit Frederic Hemberger als hochkarätigem Ersatz für den ausgeflogenen Peter
stürzten wir uns auf aktuelle und liegen gebliebene Themen.


SCHAUNOTIZEN

[00:00:20] KEIN HOT PINK MEHR IN DER BOILERPLATE…

Mit Frederic Hemberger als hochkarätigem Ersatz für den ausgeflogenen Peter
stürzten wir uns auf aktuelle und liegen gebliebene Themen.


SCHAUNOTIZEN

[00:00:20] KEIN HOT PINK MEHR IN DER BOILERPLATE

HTML5 Boilerplate hatte lange Zeit Pink als Hintergrundfarbe für markierten Text
eingesetzt, im Vertrauen darauf, dass Webentwickler clever genug sein würden,
das bei Bedarf zu ändern. Drollige Vorstellung.

[00:08:14] GRUNT

Grunt is a task-based command line build tool for JavaScript projects. Frederic
übersetzt das für uns.

[00:18:17] <DIALOG>

Neue Elemente für HTML5? Immer wieder gerne!

[00:28:44] MOBILE TESTING

Wie testet man mobile? So geht das! Bleibt noch das leidige Problem mit dem
Download unnötiger Ressourcen, doch auch da gibt es ja Ansätze.

[00:43:05] JQUERY – THE LITTLE THINGS

Rodney Rehm in Hochform erklärt und demonstriert den Unterschied zwischen „It
works“ und gutem Code.


[00:49:34] KEINE SCHAUNOTIZEN

UBERSPACE-VIDEOTUTORIAL

Wie der beste Hoster der Welt funktioniert, erklärt in bewegten Bildern.

JAVASCRIPT ENLIGHTMENT: FREE PDF EBOOK

Verflucht sei die elende Kostenloskultur im Internet.

MISO DATASET

Clientseitige Datentransformation vom Fach.

BEM

Umdenken für das Frontend.

MODERN WEB DEVELOPMENT, PART 1 – THE WEBKIT INSPECTOR

Auftakt einer Serie über die optimale Webdev-Toolchain.

DGRID

Grid-Komponente für Dojo.

Revision 68: Ein <dialog> aus scharfem Pink und Grunzern

<p>Mit allen Mann an Deck stürzten wir uns auf die Themen der Woche. Jedenfalls auf die, die nichts mit Semikolons zu tun hatten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:20] <a href="http://meteor.com/">Meteor</a></dt>
<dd>Ein recht beeindruckend anmutendes Echtzeit-Web-Framework. Wir finden, dass es höchste Eisenbahn wurde, dass mal jemand so etwas baut. Dumm nur, dass man den Security-Aspekt <a href="http://www.hopelesscom.de/2012/4/11/meteor_is_just_a_toy.html">komplett vergessen hat</a> und auch, dass Meteor unter GPL steht, finden wir (<a href="http://blog.lassus.se/2012/04/meteor-meets-nogpl.html">und andere</a>) mehr so mittelgut. Ähnliche Projekte mit teils ähnlichen, teils anderen Problemen sind <a href="http://derbyjs.com/">Derby</a>, <a href="http://firebase.com/">Firebase</a> und <a href="http://spacemagic.io/">Spacemagic</a>.</dd>
<dt>[00:15:21] <a href="http://timkadlec.com/2012/04/media-query-asset-downloading-results/">Media Query &#038; Asset Downloading Results</a></dt>
<dd>Lädt ein Browser Bilder herunter, die er, weil sie in nicht zutreffenden Media Queries stehen, gar nicht laden müsste? Die Antwort ist ein klares Jain. Bilder stattdessen einfach inlinen? Was passiert mit Fonts (denen man ja auch via <a href="http://www.w3.org/TR/css3-fonts/#unicode-range-desc">unicode-range</a> oder <a href="https://github.com/Pomax/Font.js">Font.js</a> zu Leibe rücken könnte)? Und warum standardisiert das nicht endlich mal jemand? Fragen über Fragen.</dd>
<dt>[00:31:30] <a href="http://experiments.hertzen.com/css-regions/index.html">Spielereien mit CSS Regions</a></dt>
<dd>Kreative Zweckentfremdungen von <a href="http://www.w3.org/TR/css3-regions/">CSS Regions</a>. Schade nur, dass die Aussichten in Richtung Standardisierung und Stabilisierung eher mau sind.</dd>
<dt>[00:45:44] <a href="http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/">Light Table</a></dt>
<dd>Ein innovatives IDE-Konzept, das sich u.A. aus <a href="http://vimeo.com/36579366">diesem Talk</a> ableitet. Alle finden es toll und wir überwiegend auch. Die <a href="http://www.chris-granger.com/2012/04/15/light-tables-numbers/">nächsten geplanten Schritte</a> sehen <a href="http://www.kickstarter.com/projects/306316578/light-table">einen Kickstarter</a> sowie das zeitnahe Opensourcing vor. Man darf gespannt sein.</dd>
<dt>[00:55:12] <a href="http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/">Move Over 1024×768: The Most Popular Screen Resolution On The Web Is Now 1366×768</a></dt>
<dd><a href="https://twitter.com/#!/html5douche/status/190520034852995073">Öh, naja.</a> Darüber, ob man sich überhaupt noch Gedanken um Auflösungen machen sollte, kann man aber in der Tat debattieren, was wir uns auch nicht nehmen lassen.</dd>
</dl>
<h3>[01:11:47] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://wufoo.com/html5/">The Current State of HTML5 Forms</a></dt>
<dd>Detaillierter Überblick über HTML5-Formularfeatures mit regelmäßigen Updates.</dd>
<dt><a href="http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/">Understanding MVVM</a></dt>
<dd>Addy Osmani erklärt wortreich MVVM.</dd>
<dt><a href="http://mobile-patterns.com/">Mobile Patterns</a></dt>
<dd>Galerie für mobile UIs.</dd>
</dl>


Mit allen Mann an Deck stürzten wir uns auf die Themen der Woche. Jedenfalls auf
die, die nichts mit Semikolons zu tun hatten.


SCHAUNOTIZEN

[00:00:20] METEOR

Ein recht beeindruckend anmutendes Ech…

Mit allen Mann an Deck stürzten wir uns auf die Themen der Woche. Jedenfalls auf
die, die nichts mit Semikolons zu tun hatten.


SCHAUNOTIZEN

[00:00:20] METEOR

Ein recht beeindruckend anmutendes Echtzeit-Web-Framework. Wir finden, dass es
höchste Eisenbahn wurde, dass mal jemand so etwas baut. Dumm nur, dass man den
Security-Aspekt komplett vergessen hat und auch, dass Meteor unter GPL steht,
finden wir (und andere) mehr so mittelgut. Ähnliche Projekte mit teils
ähnlichen, teils anderen Problemen sind Derby, Firebase und Spacemagic.

[00:15:21] MEDIA QUERY & ASSET DOWNLOADING RESULTS

Lädt ein Browser Bilder herunter, die er, weil sie in nicht zutreffenden Media
Queries stehen, gar nicht laden müsste? Die Antwort ist ein klares Jain. Bilder
stattdessen einfach inlinen? Was passiert mit Fonts (denen man ja auch via
unicode-range oder Font.js zu Leibe rücken könnte)? Und warum standardisiert das
nicht endlich mal jemand? Fragen über Fragen.

[00:31:30] SPIELEREIEN MIT CSS REGIONS

Kreative Zweckentfremdungen von CSS Regions. Schade nur, dass die Aussichten in
Richtung Standardisierung und Stabilisierung eher mau sind.

[00:45:44] LIGHT TABLE

Ein innovatives IDE-Konzept, das sich u.A. aus diesem Talk ableitet. Alle finden
es toll und wir überwiegend auch. Die nächsten geplanten Schritte sehen einen
Kickstarter sowie das zeitnahe Opensourcing vor. Man darf gespannt sein.

[00:55:12] MOVE OVER 1024×768: THE MOST POPULAR SCREEN RESOLUTION ON THE WEB IS
NOW 1366×768

Öh, naja. Darüber, ob man sich überhaupt noch Gedanken um Auflösungen machen
sollte, kann man aber in der Tat debattieren, was wir uns auch nicht nehmen
lassen.


[01:11:47] KEINE SCHAUNOTIZEN

THE CURRENT STATE OF HTML5 FORMS

Detaillierter Überblick über HTML5-Formularfeatures mit regelmäßigen Updates.

UNDERSTANDING MVVM

Addy Osmani erklärt wortreich MVVM.

MOBILE PATTERNS

Galerie für mobile UIs.

Revision 67: Meteor, Media Queries, Light Table

<p>Was könnte besser zum just gewesenen Osterfest passen als die Revision 666 eines nerdigen Webdev-Podcasts? Kahlil, Hans und Peter sahen das genau so.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:25] <a href="http://www.w3.org/TR/css-variables/">CSS-Vars Reloaded</a></dt>
<dd>Variablen in CSS sind jetzt ein offizieller Working Draft und die Syntax hat sich auch gebessert. Wir spekulieren, warum sie nicht noch simpler ist (z.B. <code>$foo</code> statt <code>var-foo</code>) und kommen zu keinem Ergebnis. Am Dollarzeichen kann es nicht liegen, das gibt es ja auch in <a href="http://www.w3.org/TR/selectors/">Selectors Level 3</a> und <a href="http://www.w3.org/TR/selectors4/">Level 4</a></dd>
<dt>[00:10:17] <a href="http://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern">The select menu navigation pattern</a></dt>
<dd>Select-Elemente taugen nicht als Navigationsmittel sagt der Andy Clarke. Wir gehen prinzipiell d&#8217;accord, aber große Navis responsive zu machen, ohne den ganzen Bildschirm zuzukleistern, ist auch nicht leicht&nbsp;&hellip;</dd>
<dt>[00:31:00] <a href="http://projects.latimes.com/prop8/donation/8930/">Brendan Eich ist homophob</a></dt>
<dd>Der JavaScript-Erfinder hat eine vierstellige im Kampf gegen die Homo-Ehe gestiftet. Wir wissen zwar nicht, ob das ein Thema für die Sendung ist, empören uns aber trotzdem. Aber was nun? Am besten <a href="http://www.davidflanagan.com/2012/04/javascript-its.html">verabschiedet man sich einfach von der Idee, JS sei eine Community</a> und gewöhnt sich daran, dass es nur eine weitere Progammiersprache ist, die eben auch von Neandertalern und Spinnern benutzt und entwickelt wird.</dd>
<dt>[00:40:24] Werbeblock</dt>
<dd>Peter hat in <a href="http://www.opensourceschool.de/kurstermine/muenchen/schulung/html5-05-2012/">seiner nächsten HTML5-Schulung</a> noch Platz für ein paar Padawane. Schepp wiederum zettelt mit ein paar Mitstreitern einen Webworkerstammtisch in Düsseldorf an, der sich erstmalig am 12.04.2012 im <a href="http://www.garagebilk.de/">Coworking Space Garage Bilk</a> zusammenfand. Das nächste mal am 24.05.2012 um 19h und danach an jedem 3ten Donnerstag im Monat. Kahlil schlussendich verbloggt ab jetzt regelmäßig <a href="http://dieillstenlinksvonneulich.de/">die illsten Links von neulich</a>.</dd>
</dl>
<h3>[00:47:47] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://updates.html5rocks.com/2012/04/Round-up-of-Web-Browser-Internals-Resources">Round-up of web browser internals resources</a></dt>
<dd>Wer wissen will, wie Browser unter der Haube funktionieren, ist hier genau richtig.</dd>
<dt><a href="https://github.com/d0ugal/locache">locache</a></dt>
<dd>Framework für Local Storage</dd>
<dt>CoffeeScript in der Browser-Konsole</a></dt>
<dd>Gibt es für <a href="http://snook.ca/archives/browsers/coffeeconsole">Chrome</a> und <a href="https://addons.mozilla.org/en-US/firefox/addon/acebug/">Firefox</a></dd>
<dt><a href="http://www.youtube.com/watch?v=WuiHuZq_cg4">AngularJS Tutorial</a> + <a href="http://backbone.codeschool.com/levels/1">Anatomy of Backbone</a></dt>
<dd>Kompakte Video-Tutorials</dd>
<dt><a href="http://emberjs.tumblr.com/">Emblr</a></dt>
<dd>Tumblr zur Sammlung von Links zu <a href="http://emberjs.com/">Ember.js</a></dd>
</dl>


Was könnte besser zum just gewesenen Osterfest passen als die Revision 666 eines
nerdigen Webdev-Podcasts? Kahlil, Hans und Peter sahen das genau so.


SCHAUNOTIZEN

[00:00:25] CSS-VARS RELOADED

Vari…

Was könnte besser zum just gewesenen Osterfest passen als die Revision 666 eines
nerdigen Webdev-Podcasts? Kahlil, Hans und Peter sahen das genau so.


SCHAUNOTIZEN

[00:00:25] CSS-VARS RELOADED

Variablen in CSS sind jetzt ein offizieller Working Draft und die Syntax hat
sich auch gebessert. Wir spekulieren, warum sie nicht noch simpler ist (z.B.
$foo statt var-foo) und kommen zu keinem Ergebnis. Am Dollarzeichen kann es
nicht liegen, das gibt es ja auch in Selectors Level 3 und Level 4

[00:10:17] THE SELECT MENU NAVIGATION PATTERN

Select-Elemente taugen nicht als Navigationsmittel sagt der Andy Clarke. Wir
gehen prinzipiell d’accord, aber große Navis responsive zu machen, ohne den
ganzen Bildschirm zuzukleistern, ist auch nicht leicht …

[00:31:00] BRENDAN EICH IST HOMOPHOB

Der JavaScript-Erfinder hat eine vierstellige im Kampf gegen die Homo-Ehe
gestiftet. Wir wissen zwar nicht, ob das ein Thema für die Sendung ist, empören
uns aber trotzdem. Aber was nun? Am besten verabschiedet man sich einfach von
der Idee, JS sei eine Community und gewöhnt sich daran, dass es nur eine weitere
Progammiersprache ist, die eben auch von Neandertalern und Spinnern benutzt und
entwickelt wird.

[00:40:24] WERBEBLOCK

Peter hat in seiner nächsten HTML5-Schulung noch Platz für ein paar Padawane.
Schepp wiederum zettelt mit ein paar Mitstreitern einen Webworkerstammtisch in
Düsseldorf an, der sich erstmalig am 12.04.2012 im Coworking Space Garage Bilk
zusammenfand. Das nächste mal am 24.05.2012 um 19h und danach an jedem 3ten
Donnerstag im Monat. Kahlil schlussendich verbloggt ab jetzt regelmäßig die
illsten Links von neulich.


[00:47:47] KEINE SCHAUNOTIZEN

ROUND-UP OF WEB BROWSER INTERNALS RESOURCES

Wer wissen will, wie Browser unter der Haube funktionieren, ist hier genau
richtig.

LOCACHE

Framework für Local Storage

COFFEESCRIPT IN DER BROWSER-KONSOLE

Gibt es für Chrome und Firefox

ANGULARJS TUTORIAL + ANATOMY OF BACKBONE

Kompakte Video-Tutorials

EMBLR

Tumblr zur Sammlung von Links zu Ember.js

Revision 66: CSS-Variablen, Homo-Ehe und ein Werbeblock

<p>Mit allen Mann an Bord ging es um die aprilscherzbedingt nicht besonders zahlreichen Themen der Woche.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:31] <a href="http://dabblet.com/gist/2076449">Maintaining CSS Style States using Infinite Transition Delays</a></dt>
<dd>Kreativer Gebrauch von <a href="http://www.w3.org/TR/selectors/">CSS3-Selektoren</a> und <a href="http://dabblet.com/gist/2076449">-Transitions</a> für Funktionalität, für die man normalerweise den JavaScript-Hut aufsetzen würde. Das funktioniert zwar (<a href="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/">hier kurz erklärt</a>), aber ist es wirklich eine gute Idee?</dd>
<dt>[00:14:55] <a href="http://simurai.com/post/20251013889/svg-stacks">SVG Stacks</a></dt>
<dd>Wir besprechen die besseren CSS-Sprites, lobpreisen <a href="http://inkscape.org/">Inkscape</a> und granteln über den SVG-Support in Browsern. Der <a href="http://caniuse.com/#search=svg">ist zwar im Prinzip da</a>, doch wenn es an die Einzelfeatures geht, wird es schnell unangenehm. Noch! Außerdem sprachen wir über das Kapseln von Bitmapgrafiken in SVG, wie von <a href="http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/">Dirk Weber beschrieben</a> und über die Möglichekeit, eine <code>background-position</code> von unten rechts aus anzugeben (<a href="http://www.w3.org/TR/css3-background/#the-background-position">siehe Example 12</a>).</dd>
<dt>[00:27:05] <a href="http://blog.rodneyrehm.de/archives/11-jQuery-Hooks.html">jQuery Hooks</a></dt>
<dd>Rodney Rehm über ein undokumentiertes, aber möglicherweise sehr nützliches jQuery-Feature. Wir empfehlen neben dem Artikel selbst <a href="http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/">die</a> <a href="http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/">diversen</a> <a href="http://www.blog.highub.com/decoding-jquery/">Walkthroughs</a> durch den jQuery-Source.</dd>
<dt>[00:38:34] <a href="http://www.peterkroener.de/arikel/ecmascript-6/">Peters ES6-Serie</a></dt>
<dd>Eine Artikelserie über den neuen JavaScript-Standard ECMAScript&nbsp;6 ist am entstehen und soll ausgebaut werden, sobald mehr von den <a href="http://wiki.ecmascript.org/doku.php?id=harmony:proposals">neuen Features</a> implementiert werden.</dd>
</dl>
<h3>[00:51:21] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://timeline.verite.co/">Timeline</a></dt>
<dd>Zeitleisten mit jQuery gestalten.</dd>
<dt><a href="http://srobbin.com/jquery-plugins/intelligist/">Intelligist</a></dt>
<dd>jQuery-Plugin zum Einbetten von Github Gists.</dd>
</dl>


Mit allen Mann an Bord ging es um die aprilscherzbedingt nicht besonders
zahlreichen Themen der Woche.


SCHAUNOTIZEN

[00:00:31] MAINTAINING CSS STYLE STATES USING INFINITE TRANSITION DELAYS

Kreativ…

Mit allen Mann an Bord ging es um die aprilscherzbedingt nicht besonders
zahlreichen Themen der Woche.


SCHAUNOTIZEN

[00:00:31] MAINTAINING CSS STYLE STATES USING INFINITE TRANSITION DELAYS

Kreativer Gebrauch von CSS3-Selektoren und -Transitions für Funktionalität, für
die man normalerweise den JavaScript-Hut aufsetzen würde. Das funktioniert zwar
(hier kurz erklärt), aber ist es wirklich eine gute Idee?

[00:14:55] SVG STACKS

Wir besprechen die besseren CSS-Sprites, lobpreisen Inkscape und granteln über
den SVG-Support in Browsern. Der ist zwar im Prinzip da, doch wenn es an die
Einzelfeatures geht, wird es schnell unangenehm. Noch! Außerdem sprachen wir
über das Kapseln von Bitmapgrafiken in SVG, wie von Dirk Weber beschrieben und
über die Möglichekeit, eine background-position von unten rechts aus anzugeben
(siehe Example 12).

[00:27:05] JQUERY HOOKS

Rodney Rehm über ein undokumentiertes, aber möglicherweise sehr nützliches
jQuery-Feature. Wir empfehlen neben dem Artikel selbst die diversen Walkthroughs
durch den jQuery-Source.

[00:38:34] PETERS ES6-SERIE

Eine Artikelserie über den neuen JavaScript-Standard ECMAScript 6 ist am
entstehen und soll ausgebaut werden, sobald mehr von den neuen Features
implementiert werden.


[00:51:21] KEINE SCHAUNOTIZEN

TIMELINE

Zeitleisten mit jQuery gestalten.

INTELLIGIST

jQuery-Plugin zum Einbetten von Github Gists.

Revision 65: Infinite Transition Delays, jQuery Hooks, ECMAScript 6

<p>Zur Revision 64 haben wir uns <a href="https://twitter.com/#!/marcthiele">Marc Thiele</a> eingeladen, der zusammen mit dem Schepp, Kahlil und Hans über seine Konferenzen und <a href="http://www.spoiler-web.de/">seine Musik</a> spricht. Zunächst haben wir uns aber dem Tagesgeschäft gewidmet. Hier sind die Themen:</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:42] <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Introduction to JavaScript Source Maps</a></dt>
<dd>Source Maps helfen beim Debuggen von minimierten und konkatenierten JavaScripts. Sie zeigen uns Entwicklern den weg zu unserem ursprünglichen Fehler im entpackten Code. Seit einigen Tagen sind die Source Maps nun im Chrome Canary verfügbar. Support von Meta-Sprachen, wie CoffeeScript oder auch SASS ist in Planung und wird das Debuggen in Zukunft noch leichter machen.</dd>
<dt>[00:10:50] <a href="http://37signals.com/svn/posts/3137-using-event-capturing-to-improve-basecamp-page-load-times">Using event capturing to improve Basecamp page load times</a></dt>
<dd>Normalerweise hört man in JavaScript auf Events, in dem man das Bubbeling von Events nutzt. Die smarten Jungs von Basecamp haben festgestellt, dass man viel schneller auf Nutzereingaben reagieren kann, wenn man das Capturing nutzt, welches direkt vor dem Bubbeling passiert. Der Vorteil dabei ist, dass man während des Bubbelings schon auf das im Capturing festgelegte Verhalten reagieren kann.<br />
Die angesprochene Bibliothek von Steve Souders heisst <a href="https://github.com/cosmin/ControlJS">ControlJS</a>.</dd>
<dt>[00:18:14] <a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/">About HTML semantics and front-end architecture</a></dt>
<dd>Nicolas Gallagher beschreibt wie er Klassen im CSS vergibt und auf was er achtet, um die Übersichtlichkeit zu wahren. Dabei beschreibt er, dass Klassen nicht unbedingt semantisch sein müssen. Seine Ausführungen spiegeln die Gedanken aus <a href="http://oocss.org/">OOCSS</a> und <a href="http://smacss.com/">SMACSS</a> wieder. In diesem Zusammenhang</dd>
<dt>[00:32:43] <a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html">[css4-images] The image-set() function (for responsive images)</a></dt>
<dd>Monatelang <a href="http://www.w3.org/community/respimg/">diskutieren</a> schlaue Leute darüber, wie man mit Bildern auf verschiedenen Geräten und Bildschirmgrößen umgehen soll. Sogar ein neues HTML-Element hat man sich überlegt. Apple macht nun einigen eigenen Vorschlag, wie man dieses Problem lösen kann und <a href="http://www.webkit.org/blog/1869/last-week-in-webkit-the-move-of-wtf-and-responsive-css-images/">implementiert</a> es gleich mal in Webkit. Aber reicht das wirklich oder brauchen wir doch noch mehr Hilfsmittel, mit denen wir die Geschwindigkeit der Internetverbindung prüfen können?</dd>
<dt>[00:43:21] <a href="http://play12.beyondtellerrand.com/">beyond tellerrand – play</a></dt>
<dd>Mit <a href="https://twitter.com/#!/marcthiele">Marc</a> sprechen wir über die beyond tellerrand – play und die angekündigte <a href="http://smashingconf.com/">Smashing Conf</a>. Dabei erklärt er uns, wie es eigentlich dazu kam, dass er diese Konferenzen organisiert und wieso die beyond tellerrand so günstig ist. Für die beyond tellerrand – play sucht Marc noch ein paar Helfer. Schreibt ihm am besten einfach <a href="mailto:marc@beyondtellerrand.com">eine E-Mail</a> oder haut ihn <a href="https://twitter.com/#!/marcthiele">auf Twitter</a> an.</dd>
</dl>
<h3>[01:05:27] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://eightmedia.github.com/hammer.js/">Hammer.js &#8211; A javascript library for multi-touch gestures</a></dt>
<dd>Multi-Touch-Gesten-Erkennung leicht gemacht mit Hammer.js.</dd>
<dt><a href="http://glan.github.com/CSS-Patterns-Workbench/">CSS Gradient Editor</a></dt>
<dd>Gradients wie in der <a href="http://lea.verou.me/css3patterns/">Patterns Gallery</a> selbst bauen.</dd>
<dt><a href="http://www.reigndesign.com/blog/love-hotels-and-unicode/">Love Hotels and Unicode</a></dt>
<dd>Über die Weiterentwicklung des UTF-Zeichensatzes.</dd>
<dt><a href="http://jsvg.swissamigos.com/">jSVG &#8211; An attempt to bring simple SVG Asset Management into modern browsers</a></dt>
<dd>Ein Packer für SVG – weniger HTTP-Requests ist das Ziel</dd>
<dt><a href="http://blackberry.github.com/Alice/">AliceJS &#8211; A Lightweight Independent CSS Engine</a></dt>
<dd>Von Blackberry entwickelte JS-Library, die das Nutzen von Hardwarebeschleunigung vor allem für CSS3 erleichtern soll.</dd>
<dt><a href="http://www.backlift.com/index.html">backlift</a></dt>
<dd>Mit Backlift Backbone.js Anwendungen entwickeln, verwalten und hosten. Deployment mit nur drei Zeilen auf der Konsole.</dd>
<dt><a href="http://swagger.wordnik.com/">swagger</a></dt>
<dd>Swagger ist ein Dokumentationsframework für RESTful APIs.</dd>
<dt><a href="http://hacks.mozilla.org/2012/03/browserquest/">BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment</a></dt>
<dd>Ein realtime Browsergame auf HTML5-Basis.</dd>
</dl>


Zur Revision 64 haben wir uns Marc Thiele eingeladen, der zusammen mit dem
Schepp, Kahlil und Hans über seine Konferenzen und seine Musik spricht. Zunächst
haben wir uns aber dem Tagesgeschäft gewidme…

Zur Revision 64 haben wir uns Marc Thiele eingeladen, der zusammen mit dem
Schepp, Kahlil und Hans über seine Konferenzen und seine Musik spricht. Zunächst
haben wir uns aber dem Tagesgeschäft gewidmet. Hier sind die Themen:


SCHAUNOTIZEN

[00:02:42] INTRODUCTION TO JAVASCRIPT SOURCE MAPS

Source Maps helfen beim Debuggen von minimierten und konkatenierten JavaScripts.
Sie zeigen uns Entwicklern den weg zu unserem ursprünglichen Fehler im
entpackten Code. Seit einigen Tagen sind die Source Maps nun im Chrome Canary
verfügbar. Support von Meta-Sprachen, wie CoffeeScript oder auch SASS ist in
Planung und wird das Debuggen in Zukunft noch leichter machen.

[00:10:50] USING EVENT CAPTURING TO IMPROVE BASECAMP PAGE LOAD TIMES

Normalerweise hört man in JavaScript auf Events, in dem man das Bubbeling von
Events nutzt. Die smarten Jungs von Basecamp haben festgestellt, dass man viel
schneller auf Nutzereingaben reagieren kann, wenn man das Capturing nutzt,
welches direkt vor dem Bubbeling passiert. Der Vorteil dabei ist, dass man
während des Bubbelings schon auf das im Capturing festgelegte Verhalten
reagieren kann.
Die angesprochene Bibliothek von Steve Souders heisst ControlJS.

[00:18:14] ABOUT HTML SEMANTICS AND FRONT-END ARCHITECTURE

Nicolas Gallagher beschreibt wie er Klassen im CSS vergibt und auf was er
achtet, um die Übersichtlichkeit zu wahren. Dabei beschreibt er, dass Klassen
nicht unbedingt semantisch sein müssen. Seine Ausführungen spiegeln die Gedanken
aus OOCSS und SMACSS wieder. In diesem Zusammenhang

[00:32:43] [CSS4-IMAGES] THE IMAGE-SET() FUNCTION (FOR RESPONSIVE IMAGES)

Monatelang diskutieren schlaue Leute darüber, wie man mit Bildern auf
verschiedenen Geräten und Bildschirmgrößen umgehen soll. Sogar ein neues
HTML-Element hat man sich überlegt. Apple macht nun einigen eigenen Vorschlag,
wie man dieses Problem lösen kann und implementiert es gleich mal in Webkit.
Aber reicht das wirklich oder brauchen wir doch noch mehr Hilfsmittel, mit denen
wir die Geschwindigkeit der Internetverbindung prüfen können?

[00:43:21] BEYOND TELLERRAND – PLAY

Mit Marc sprechen wir über die beyond tellerrand – play und die angekündigte
Smashing Conf. Dabei erklärt er uns, wie es eigentlich dazu kam, dass er diese
Konferenzen organisiert und wieso die beyond tellerrand so günstig ist. Für die
beyond tellerrand – play sucht Marc noch ein paar Helfer. Schreibt ihm am besten
einfach eine E-Mail oder haut ihn auf Twitter an.


[01:05:27] KEINE SCHAUNOTIZEN

HAMMER.JS – A JAVASCRIPT LIBRARY FOR MULTI-TOUCH GESTURES

Multi-Touch-Gesten-Erkennung leicht gemacht mit Hammer.js.

CSS GRADIENT EDITOR

Gradients wie in der Patterns Gallery selbst bauen.

LOVE HOTELS AND UNICODE

Über die Weiterentwicklung des UTF-Zeichensatzes.

JSVG – AN ATTEMPT TO BRING SIMPLE SVG ASSET MANAGEMENT INTO MODERN BROWSERS

Ein Packer für SVG – weniger HTTP-Requests ist das Ziel

ALICEJS – A LIGHTWEIGHT INDEPENDENT CSS ENGINE

Von Blackberry entwickelte JS-Library, die das Nutzen von Hardwarebeschleunigung
vor allem für CSS3 erleichtern soll.

BACKLIFT

Mit Backlift Backbone.js Anwendungen entwickeln, verwalten und hosten.
Deployment mit nur drei Zeilen auf der Konsole.

SWAGGER

Swagger ist ein Dokumentationsframework für RESTful APIs.

BROWSERQUEST – A MASSIVELY MULTIPLAYER HTML5 (WEBSOCKET + CANVAS) GAME
EXPERIMENT

Ein realtime Browsergame auf HTML5-Basis.

Revision 64: Source Maps, Event Capturing & beyond tellerrand – play

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 75: News, Links und die diesmal wirklich kürzeste Revision aller Zeiten

Working Draft

Revision 74: Social-Media-Buttons, Links und die kürzeste Revision aller Zeiten

Working Draft

Revision 73: Von CSS Blenden, Cross-Domain-Requests und responsiven Bildern

Working Draft

Revision 72: SASS vs. LESS & Googlebot vs. JavaScript

Working Draft

Revision 71: Error.stack, Physical Units & DOM Mutation Observers

Working Draft

Revision 70: JS Styleguides, Barrierefreiheit & Web Intents

Working Draft

Revision 69: CSS Battle Royale – Opera <3 -webkit, Conditional CSS & Content-Choreographie

Working Draft

Revision 68: Ein <dialog> aus scharfem Pink und Grunzern

Working Draft

Revision 67: Meteor, Media Queries, Light Table

Working Draft

Revision 66: CSS-Variablen, Homo-Ehe und ein Werbeblock

Working Draft

Revision 65: Infinite Transition Delays, jQuery Hooks, ECMAScript 6

Working Draft

Revision 64: Source Maps, Event Capturing & beyond tellerrand – play

Working Draft