<p>Hans, Kahlil und Peter nudelten diese Woche nicht nur die üblichen Themen durch, sondern hatten obendrein keinen Geringeren als <a href="http://www.highresolution.info/">Dirk Jesse</a> zu Gast, der sein Projekt <strong>Thinkin&#8216; Tags</strong> vorstellt.</p>
<h3>[00:00:21] News</h3>
<dl>
<dt><a href="http://blog.jqueryui.com/2012/10/jquery-ui-1-9-0/">jQuery UI 1.9 ist da</a></dt>
<dd>Joah.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:49] <a href="http://www.mozilla.org/en-US/firefox/16.0/releasenotes/">Firefox 16</a></dt>
<dd>Neue Woche, neue Browser-Version. Wir übergehen <a href="http://arstechnica.com/security/2012/10/mozilla-pulls-day-old-firefox-16-from-download-site-over-security-risk/">den epischen Security-Fail</a> sowie <a href="http://www.peterkroener.de/aenderungen-in-der-neuen-css3-farbverlauf-syntax-ohne-vendor-prefix/">Vendor-Prefixes</a> und philosophieren stattdessen über Devtools. Firebug ist ja nun out und die vielen kleinen Einzeltools wie <a href="https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-faster/">die neue Command Line</a> sind in. Wir sind noch nicht ganz zufrieden damit.</dd>
<dt>[00:18:39] <a href="http://www.thinkintags.com">Thinkin&#8216; Tags</a></dt>
<dd>Hans grillt Dirk Jesse zu seinem neuen Rapid Prototyping Tool. Thinkin&#8216; Tags ist aus <a href="http://www.yaml.de/">Yaml</a> sowie dem dazugehörigen <a href="http://builder.yaml.de/">Builder</a> erwachsen und soll tumb-repetitives Getippe durch ein fancy UI zumindest reduzieren. Wie lange Dirk daran geschraubt hat und was das ganze anders als Frontpage macht, breiten wir in epischem Umfang aus.</dd>
<dt>[00:55:22] <a href="http://feross.org/html5-fullscreen-api-attack/">Using the HTML5 Fullscreen API for Phishing Attacks</a></dt>
<dd>Die <a href="http://www.w3.org/TR/fullscreen/">Fullscreen-API</a> lässt sich für Phishing mißbrauchen&nbsp;&ndash; Peter will‘s ja schon immer gewusst haben. Andererseits kann Dirk aus eigener Webappbau-Erfahrung bestätigen, wie dringend das Web eine Fullscreen-Funktionalität braucht. Was tun? Dass wir zu keinem abschließenden Ergebnis kommen, lag jedenfalls nicht daran, dass wir es nicht versucht hätten, es auszudiskutieren!</dd>
</dl>
<h3>[01:15:07] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://killdream.github.com/blog/2011/10/understanding-javascript-oop/">Understanding Javascript OOP</a></dt>
<dd>neuheiten === null, aber dafür absolut komplett und als Referenz oder Lernstoff zu empfehlen.</dd>
<dt><a href="http://demo.agektmr.com/flexbox/">Exploring FlexBox</a></dt>
<dd>Interaktive Flexbox-Demoseite, die beim Verstehen des Standards sehr helfen kann.</dd>
<dt><a href="https://github.com/wilmoore/frontend-packagers">Browser Package Manager Comparison</a></dt>
<dd>Bower versus Component versus Jam versus Volo.</dd>
<dt><a href="http://coding.smashingmagazine.com/2012/10/09/designing-javascript-apis-usability/">Designing JavaScript APIs For Usability</a></dt>
<dd>Rodney über benutzbare APIs.</dd>
<dt><a href="http://events.jquery.org/2013/eu/">jQuery Europe 2013</a></dt>
<dd>Die Webseite ist extrem hengstig und die Location in Schlagdistanz.</dd>
</dl>


Hans, Kahlil und Peter nudelten diese Woche nicht nur die üblichen Themen durch,
sondern hatten obendrein keinen Geringeren als Dirk Jesse zu Gast, der sein
Projekt Thinkin‘ Tags vorstellt.


[00:00:2…

Working Draft

Hans, Kahlil und Peter nudelten diese Woche nicht nur die üblichen Themen durch,
sondern hatten obendrein keinen Geringeren als Dirk Jesse zu Gast, der sein
Projekt Thinkin‘ Tags vorstellt.


[00:00:21] NEWS

JQUERY UI 1.9 IST DA

Joah.


SCHAUNOTIZEN

[00:00:49] FIREFOX 16

Neue Woche, neue Browser-Version. Wir übergehen den epischen Security-Fail sowie
Vendor-Prefixes und philosophieren stattdessen über Devtools. Firebug ist ja nun
out und die vielen kleinen Einzeltools wie die neue Command Line sind in. Wir
sind noch nicht ganz zufrieden damit.

[00:18:39] THINKIN‘ TAGS

Hans grillt Dirk Jesse zu seinem neuen Rapid Prototyping Tool. Thinkin‘ Tags ist
aus Yaml sowie dem dazugehörigen Builder erwachsen und soll tumb-repetitives
Getippe durch ein fancy UI zumindest reduzieren. Wie lange Dirk daran geschraubt
hat und was das ganze anders als Frontpage macht, breiten wir in epischem Umfang
aus.

[00:55:22] USING THE HTML5 FULLSCREEN API FOR PHISHING ATTACKS

Die Fullscreen-API lässt sich für Phishing mißbrauchen – Peter will‘s ja schon
immer gewusst haben. Andererseits kann Dirk aus eigener Webappbau-Erfahrung
bestätigen, wie dringend das Web eine Fullscreen-Funktionalität braucht. Was
tun? Dass wir zu keinem abschließenden Ergebnis kommen, lag jedenfalls nicht
daran, dass wir es nicht versucht hätten, es auszudiskutieren!


[01:15:07] KEINE SCHAUNOTIZEN

UNDERSTANDING JAVASCRIPT OOP

neuheiten === null, aber dafür absolut komplett und als Referenz oder Lernstoff
zu empfehlen.

EXPLORING FLEXBOX

Interaktive Flexbox-Demoseite, die beim Verstehen des Standards sehr helfen
kann.

BROWSER PACKAGE MANAGER COMPARISON

Bower versus Component versus Jam versus Volo.

DESIGNING JAVASCRIPT APIS FOR USABILITY

Rodney über benutzbare APIs.

JQUERY EUROPE 2013

Die Webseite ist extrem hengstig und die Location in Schlagdistanz.

Revision 92: Firefox, Fullscreen API und Thinkin‘ Tags

<p>Schepp, Hans und Rodney fanden sich trotz ihrer leicht verschleppten Konferenzia ein, um das Eine oder Andere der letzten Woche(n) Revue passieren zu lassen.</p>
<h3>[00:00:21] News</h3>
<dl>
<dt><a title="Webplatform.org" href="http://webplatform.org/">Webplatform.org</a></dt>
<dd>Das W3C, Apple, Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla und Opera starten ein neues gemeinsames Wissensportal für Webentwicklung. <a title="MozHacks" href="https://hacks.mozilla.org/2012/10/welcoming-the-new-kid-web-platform-docs/">MozHacks</a> weiss mehr dazu.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:20] Konferenzen</dt>
<dd>Wir reflektieren (etwas ausufernd) welche Konferenzen wir die letzten Wochen besucht und was wir dort erlebt haben. <a href="http://smashingconf.com/">SmashingConf in Freiburg</a>, <a href="http://2012.fromthefront.it/">From The Front in Bologna</a>, <a href="http://html.adobe.com/events/">Create The Web in London</a> und die <a href="http://fronteers.nl/congres/2012">Fronteers 2012</a> haben ihre jeweils eigenen Eindrücke hinterlassen. Wer sich beim deutschen Web-Developer Klassentreffen™ sein eigenes Bild machen möchte, schaue bitte bei <a href="http://2012.beyondtellerrand.com/">Beyond Tellerrand</a> vorbei. Es lohnt sich!</dd>
<dt>[00:44:33] <a href="http://blog.netvlies.nl/design-interactie/retina-revolution/">JPEG Compression and Retina</a></dt>
<dd>Wie man Bilder auf Retina Displays scharf bekommt ohne gleich 4MB große Bilder über die Leitung zu jagen ist ein allgegenwärtiges Thema dieser Tage. Das &lt;picture&gt; Element ist noch nicht da, weshalb wir noch etwas in der Trickkiste kramen müssen. <a href="http://www.fngtps.com/2012/reasonable-ways-to-use-high-resolution-images-on-retina-displays/">A reasonable way to show high resolution images on retina displays</a> und <a href="https://gist.github.com/3124198">Acceptible Retina Images</a> haben ähnliche Ideen, nämlich einfach bei höherer Auflösung die Kompressionsstufe (drastisch) erhöhen.</dd>
</dl>
<h3>[00:55:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://warpspire.com/experiments/history-api/">History API &#8211; Endless Scroll Experiment</a></dt>
<dd>Wer kennt sie nicht &#8211; die endlos scrollbaren Webseiten. Mit diesem Experiment zeigt Zach Holman wie sich auch dynamisch nachgeladene und erweiterte Listen für den Browser navigierbar machen.</dd>
<dt><a href="http://modestmaps.com/">ModestMaps</a></dt>
<dd>Eine einfache API ohne UI-Schnickschnack &#8211; ein gutes Fundament für gepflegten Spaß mit interaktiven Karten.</dd>
<dt><a href="http://blog.innovatejs.com/?p=24">XLSX.js</a></dt>
<dd>Wer schon immer mal Excel-Dateien aus seiner Webseite heraus generieren wollte, kann jetzt auf serverseitige Tools verzichten.</dd>
<dt><a href="http://www.netmagazine.com/features/developer-s-guide-html5-apis">Guide to HTML5 APIs</a></dt>
<dd>Im NetMagazine gibt uns Rich Clark eine kleine (unvollständige) Übersicht über die HTML5 APIs. Obwohl der Artikel schon im Januar veröffentlicht wurde, dient er doch als grandioser Einstieg in den wirren Dschungel unsere schönen neuen Internets.</dd>
<dt><a href="http://www.elijahmanor.com/2012/10/dont-initialize-all-things-in.html">Don&#8217;t initialize all the things on DomReady</a></dt>
<dd><abbr title="Website Performance Optimization">WPO</abbr> ist in aller Munde &#8211; doch hört das nicht bei CSS minifizieren und HTTP Headern auf. Elijah Manor erklärt anhand eines Beispiels wie lazy initialization funktionieren kann, um die Ladezeiten eurer Seiten noch weiter zu drücken.</dd>
<dt><a href="http://nthmaster.com/">Master of the :nth-child</a></dt>
<dd>Wer den CSS Selector <code>:nth-child()</code> auf Anhieb verstanden hat, verdient unseren größten Respekt. Für Normalsterbliche wie den Rodney bietet dieser Einseiter eine schöne visuelle Übersicht über den doch recht mächtigen Kindselektor.</dd>
<dt><a href="http://slexaxton.github.com/Jed/">Jed Internationalization Toolkit</a></dt>
<dd>Internationalisierung ist ja an sich schon nicht die trivialste Aufgabe. In Javascript erst recht nicht. Alex Sexton (der übrigens nur eine einzige Sprache spricht) verspricht mit Jed ein bisschen Licht ins Dunkel der <abbr title="Internationalization">I18N</abbr> zu bringen.</dd>
<dt><a href="http://code.lancepollard.com/complete-list-of-html-meta-tags/">Complete List of HTML Meta Tags</a></dt>
<dd>Wer hat das gute alte <code>&lt;meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)"&gt;</code> nicht vermisst? Dieses Schmuckstück und viele weitere skurrile und vergessene Meta Tags kann die Liste vorweisen, auch wenn man leider vergessen hat zu den jeweiligen Dokumentationen zu verlinken…</dd>
<dt><a href="http://thoughtbot.com/bourbon/">Bourbon Sass Mixins</a></dt>
<dd>Keine Konkurrenz zu <a href="http://compass-style.org/">Compass</a> stellt die Mixins Sammlung namens Bourbon dar &#8211; eine ganze Menge nützlicher kleiner Erweiterungen bringt das Paket jedoch trotzdem auf den Tisch. Bourbon und Compass können freilich auch gemeinsam benutzt werden.</dd>
</dl>


Schepp, Hans und Rodney fanden sich trotz ihrer leicht verschleppten Konferenzia
ein, um das Eine oder Andere der letzten Woche(n) Revue passieren zu lassen.


[00:00:21] NEWS

WEBPLATFORM.ORG

Das W3…

Schepp, Hans und Rodney fanden sich trotz ihrer leicht verschleppten Konferenzia
ein, um das Eine oder Andere der letzten Woche(n) Revue passieren zu lassen.


[00:00:21] NEWS

WEBPLATFORM.ORG

Das W3C, Apple, Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla und Opera
starten ein neues gemeinsames Wissensportal für Webentwicklung. MozHacks weiss
mehr dazu.


SCHAUNOTIZEN

[00:01:20] KONFERENZEN

Wir reflektieren (etwas ausufernd) welche Konferenzen wir die letzten Wochen
besucht und was wir dort erlebt haben. SmashingConf in Freiburg, From The Front
in Bologna, Create The Web in London und die Fronteers 2012 haben ihre jeweils
eigenen Eindrücke hinterlassen. Wer sich beim deutschen Web-Developer
Klassentreffen™ sein eigenes Bild machen möchte, schaue bitte bei Beyond
Tellerrand vorbei. Es lohnt sich!

[00:44:33] JPEG COMPRESSION AND RETINA

Wie man Bilder auf Retina Displays scharf bekommt ohne gleich 4MB große Bilder
über die Leitung zu jagen ist ein allgegenwärtiges Thema dieser Tage. Das
<picture> Element ist noch nicht da, weshalb wir noch etwas in der Trickkiste
kramen müssen. A reasonable way to show high resolution images on retina
displays und Acceptible Retina Images haben ähnliche Ideen, nämlich einfach bei
höherer Auflösung die Kompressionsstufe (drastisch) erhöhen.


[00:55:00] KEINE SCHAUNOTIZEN

HISTORY API – ENDLESS SCROLL EXPERIMENT

Wer kennt sie nicht – die endlos scrollbaren Webseiten. Mit diesem Experiment
zeigt Zach Holman wie sich auch dynamisch nachgeladene und erweiterte Listen für
den Browser navigierbar machen.

MODESTMAPS

Eine einfache API ohne UI-Schnickschnack – ein gutes Fundament für gepflegten
Spaß mit interaktiven Karten.

XLSX.JS

Wer schon immer mal Excel-Dateien aus seiner Webseite heraus generieren wollte,
kann jetzt auf serverseitige Tools verzichten.

GUIDE TO HTML5 APIS

Im NetMagazine gibt uns Rich Clark eine kleine (unvollständige) Übersicht über
die HTML5 APIs. Obwohl der Artikel schon im Januar veröffentlicht wurde, dient
er doch als grandioser Einstieg in den wirren Dschungel unsere schönen neuen
Internets.

DON’T INITIALIZE ALL THE THINGS ON DOMREADY

WPO ist in aller Munde – doch hört das nicht bei CSS minifizieren und HTTP
Headern auf. Elijah Manor erklärt anhand eines Beispiels wie lazy initialization
funktionieren kann, um die Ladezeiten eurer Seiten noch weiter zu drücken.

MASTER OF THE :NTH-CHILD

Wer den CSS Selector :nth-child() auf Anhieb verstanden hat, verdient unseren
größten Respekt. Für Normalsterbliche wie den Rodney bietet dieser Einseiter
eine schöne visuelle Übersicht über den doch recht mächtigen Kindselektor.

JED INTERNATIONALIZATION TOOLKIT

Internationalisierung ist ja an sich schon nicht die trivialste Aufgabe. In
Javascript erst recht nicht. Alex Sexton (der übrigens nur eine einzige Sprache
spricht) verspricht mit Jed ein bisschen Licht ins Dunkel der I18N zu bringen.

COMPLETE LIST OF HTML META TAGS

Wer hat das gute alte <meta http-equiv="Page-Enter"
content="RevealTrans(Duration=2.0,Transition=2)"> nicht vermisst? Dieses
Schmuckstück und viele weitere skurrile und vergessene Meta Tags kann die Liste
vorweisen, auch wenn man leider vergessen hat zu den jeweiligen Dokumentationen
zu verlinken…

BOURBON SASS MIXINS

Keine Konkurrenz zu Compass stellt die Mixins Sammlung namens Bourbon dar – eine
ganze Menge nützlicher kleiner Erweiterungen bringt das Paket jedoch trotzdem
auf den Tisch. Bourbon und Compass können freilich auch gemeinsam benutzt
werden.

Revision 91: Konferenzen und HiDPI Bilder

<p>Während alle anderen auf tollen Konferenzen rumturnen, trümmerten <a href="http://twitter.com/asciidisco">Sebastian</a>, <a href="http://twitter.com/anselmhannemann">Anselm</a>, <a href="http://twitter.com/fhemberger">Frederic</a> und Peter eine weitere Revision eures Lieblingspodcasts ein. Extradicker Dank geht an Schepp, der die total mißratene Tonspur noch einigermaßen gerettet hat.</p>
<h3>[00:01:08] News</h3>
<dl>
<dt><a href="http://www.w3.org/TR/2012/REC-media-frags-20120925/">Media Fragments URI</a></dt>
<dd>Habemnus Specs!</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:51] <a href="http://www.davidroessli.com/logs/2010/04/safari_ignores_viewport_mobi_domains/">Safari for iPhone ignores viewport settings on .mobi domains</a></dt>
<dd>Unfasslich aber <a href="https://bugs.webkit.org/show_bug.cgi?id=97556">wahr</a>: je nach TLD (!) macht der mobile Safari mal dieses, mal jenes. Das war allerdings nicht der größte Smartphone-Hersteller-Fail dieser Woche&nbsp;&hellip;</dd>
<dt>[00:13:34] <a href="http://winfuture.de/news,72182.html">Schwere Sicherheitslücke bei Samsung</a></dt>
<dd>Mithilfe eines Iframes (ihr seht, es hat etwas mit Webentwicklung zu tun!) kann man Samsung-Telefone bricken. Nachdem man vor lachen wieder Luft bekommt, sollte man eine Fix-App <a href="https://play.google.com/store/apps/details?id=net.gicode.android.autoresetblocker">wie diese</a> installieren um sich abzusichern. Mit einem Hersteller-Update ist nicht zu rechnen, denn das würde bedeuten, dass Smartphones vollwertige Computer sind und das wollen <em>SIE</em> eigentlich gar nicht. Die Aluhüte Frederic und Peter verweisen auf den <a href="https://www.youtube.com/watch?v=HUEvRyemKSg&#038;feature=player_embedded">war on general computation</a>.</dd>
<dt>[00:28:06] <a href="http://identity.mozilla.com/post/32395255498/announcing-the-first-beta-release-of-persona">Persona &#8211; BrowserID goes beta</a></dt>
<dd>BrowserID (nicht zu verwechseln mit dem ranzigen Theming-System) bietet einen <a href="http://www.golem.de/news/mozilla-persona-ein-login-fuers-ganze-web-1209-94804.html">Login für das ganze Web</a>&nbsp;&hellip; so wie OpenID nur in benutzbar. Und Persona, <a href="https://developer.mozilla.org/en-US/docs/Persona/Glossary">Mozillas Implementierung davon</a>, ist nun in der Beta-Phase. Besonders schön ist, dass eine Migration vom Jetzt-Zustand in die BrowserID-Welt möglich scheint, da das System ein überzeigendes Design hat. Finden wie gut!</dd>
<dt>[00:37:24] <a href="http://www.typescriptlang.org/">TypeScript</a></dt>
<dd>TypeScript erschien erst wenige Stunden vor der Aufnahme der Sendung, aber ein bisschen oberflächlichen Spaß wollten wir und nicht nehmen lassen. Angeblich ist TS die Secret Sauce für <a href="http://blogs.msdn.com/b/somasegar/archive/2012/10/01/typescript-javascript-development-at-application-scale.aspx">JavaScript Development at Application Scale</a>, aber wir ziehen eher kritische Vergleiche zu <a href="http://coffeescript.org/">CoffeeScript</a> und <a href="http://roy.brianmckenna.org/">Roy</a>.</dd>
</dl>
<h3>[00:59:12] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://subtlepatterns.com/">Subtle Patterns</a></dt>
<dd>Texturen-Library mit cooler Vorschau-Funktion.</dd>
<dt><a href="http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/">iOS 6 html hardware acceleration changes and how to fix them</a></dt>
<dd>Auch in iOS 6 ist wieder alles anders als zuvor.</dd>
<dt><a href="http://www.highresolution.info/weblog/entry/thinkin_tags_geht_live/">Thinkin’ Tags geht Live</a></dt>
<dd>Dirk Jesses Rapid Prototyping Tool ist da!</dd>
<dt><a href="http://jetstrap.com/">Jetstrap &#8211; The Bootstrap Interface Builder</a></dt>
<dd>Bootstrap-Designs zusammenklicken.</dd>
<dt><a href="https://github.com/tonistiigi/styler">Styler</a></dt>
<dd>Live CSS/Stylus editor.</dd>
<dt><a href="https://www.youtube.com/user/lxjs2012?feature=watch">Videos von LXJS</a></dt>
<dd>Wärmstens empfohlen von Sebastian.</dd>
<dt><a href="https://github.com/codylindley/frontend-tools">Cody Lindley frontend-tools list</a></dt>
<dd>Eine weitere (lange) Liste mit Frontend-Tools.</dd>
<dt><a href="http://domenlightenment.com/">Dom Enlightment</a></dt>
<dd>Ein kostenloses, sehr ambitioniertes Buch über das DOM.</dd>
</dl>


Während alle anderen auf tollen Konferenzen rumturnen, trümmerten Sebastian,
Anselm, Frederic und Peter eine weitere Revision eures Lieblingspodcasts ein.
Extradicker Dank geht an Schepp, der die tota…

Während alle anderen auf tollen Konferenzen rumturnen, trümmerten Sebastian,
Anselm, Frederic und Peter eine weitere Revision eures Lieblingspodcasts ein.
Extradicker Dank geht an Schepp, der die total mißratene Tonspur noch
einigermaßen gerettet hat.


[00:01:08] NEWS

MEDIA FRAGMENTS URI

Habemnus Specs!


SCHAUNOTIZEN

[00:01:51] SAFARI FOR IPHONE IGNORES VIEWPORT SETTINGS ON .MOBI DOMAINS

Unfasslich aber wahr: je nach TLD (!) macht der mobile Safari mal dieses, mal
jenes. Das war allerdings nicht der größte Smartphone-Hersteller-Fail dieser
Woche …

[00:13:34] SCHWERE SICHERHEITSLÜCKE BEI SAMSUNG

Mithilfe eines Iframes (ihr seht, es hat etwas mit Webentwicklung zu tun!) kann
man Samsung-Telefone bricken. Nachdem man vor lachen wieder Luft bekommt, sollte
man eine Fix-App wie diese installieren um sich abzusichern. Mit einem
Hersteller-Update ist nicht zu rechnen, denn das würde bedeuten, dass
Smartphones vollwertige Computer sind und das wollen SIE eigentlich gar nicht.
Die Aluhüte Frederic und Peter verweisen auf den war on general computation.

[00:28:06] PERSONA – BROWSERID GOES BETA

BrowserID (nicht zu verwechseln mit dem ranzigen Theming-System) bietet einen
Login für das ganze Web … so wie OpenID nur in benutzbar. Und Persona, Mozillas
Implementierung davon, ist nun in der Beta-Phase. Besonders schön ist, dass eine
Migration vom Jetzt-Zustand in die BrowserID-Welt möglich scheint, da das System
ein überzeigendes Design hat. Finden wie gut!

[00:37:24] TYPESCRIPT

TypeScript erschien erst wenige Stunden vor der Aufnahme der Sendung, aber ein
bisschen oberflächlichen Spaß wollten wir und nicht nehmen lassen. Angeblich ist
TS die Secret Sauce für JavaScript Development at Application Scale, aber wir
ziehen eher kritische Vergleiche zu CoffeeScript und Roy.


[00:59:12] KEINE SCHAUNOTIZEN

SUBTLE PATTERNS

Texturen-Library mit cooler Vorschau-Funktion.

IOS 6 HTML HARDWARE ACCELERATION CHANGES AND HOW TO FIX THEM

Auch in iOS 6 ist wieder alles anders als zuvor.

THINKIN’ TAGS GEHT LIVE

Dirk Jesses Rapid Prototyping Tool ist da!

JETSTRAP – THE BOOTSTRAP INTERFACE BUILDER

Bootstrap-Designs zusammenklicken.

STYLER

Live CSS/Stylus editor.

VIDEOS VON LXJS

Wärmstens empfohlen von Sebastian.

CODY LINDLEY FRONTEND-TOOLS LIST

Eine weitere (lange) Liste mit Frontend-Tools.

DOM ENLIGHTMENT

Ein kostenloses, sehr ambitioniertes Buch über das DOM.

Revision 90: .mobi-Gate, Persona und TypeScript

<p>Während sich Schepp mit seinen Ladies in fernen Ländern die Sonne auf den Pelz brennen ließ, luden Hans, Kahlil und Rod jemanden names Peter ein, um das Team für diese Revision zu komplettieren.</p>
<h3>[00:00:22] News</h3>
<dl>
<dt><a href="http://www.w3.org/TR/css4-images/">CSS Image Values and Replaced Content Module Level 4</a></dt>
<dd>Neuerdings ein Working Draft.</dd>
<dt><a href="http://googleappsupdates.blogspot.ca/2012/09/supporting-modern-browsers-internet.html">Google Apps stellt IE8-Support ein</a></dt>
<dd>Munition für die Argumentskanone, die man vor jedem Projekt auf Kunden und/oder Chefs richtet.</dd>
<dt><a href="http://html.adobe.com/">Adobe Edge Tools &amp; Services</a></dt>
<dd>Shadow heißt jetzt Inspect, sonst ändert sich nichts. Bis auf den Preis. Adobe stellt seine neue Produktplatte rund ums Web vor. <a href="https://twitter.com/Malarkey/status/250287523585220609">Zitat</a> Andy Clarke: &#8222;truly terrible.&#8220;</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:35] <a href="http://generatedcontent.org/post/31441135779/mobileweb-row">See your site like the rest of the world does. On the Nokia X2-01 </a></dt>
<dd>David Storey (Motorola) eröffnet uns, dass nicht überall auf der Welt die Leute mit Smartphones herumlaufen. Wir sind gleichermaßen erschüttert wie uninteressiert. Erstens wird das deutschsprachige Internet in den eher abgelegenen Regionen der Welt vermutlich noch weniger rezipiert als hierzulande, was schon mal was heißen will. Und dank Responsive Design fluppt das Layout schließlich selbst auf Briefmarken-Bildschirmen. Wenn man sich obendrein noch an die Grundregeln der nicht-failigen Webentwicklung hält (progressive enhancement usw.) bleibt die Seite auch bei verranztem JS bedienbar. Die Herausforderung sieht zumindest Rodney eher bei originellen Bedienkonzepten (z.B. <a href="http://www.alistapart.com/articles/testing-websites-in-game-console-browsers/">bei Spielkonsolen</a>). Wir haben im übrigen nichts gegen Pakistan!</dd>
<dt>[00:18:12] Ember versus Backbone versus gar nix</dt>
<dd>An uns scrollten vergangene Woche viel zu <a href="http://emberjs.com/">Ember.js</a> vorbei; neben <a href="http://www.infoq.com/presentations/Ember-js">einem langen Talk</a> unter anderem auch <a href="http://trek.github.com/">ein Artikel über die Konzepte hinter dem Framework</a>. Die Konzepte hinter Ember seien so komplex, dass sie eben … naja, komplex seien. Peter, der die letzten Wochen damit verbrachte, webfremden Padawanen Einfachheit zu predigen und diese auch dabei beobachtet hat, wie sie recht komplexe Apps aus einfachen Teilen zusammengebaut haben, fragt sich nun, ob &#8222;die große Lösung&#8220; überhaupt sein muss. Kahlil findet das zumindest nicht völlig unvorstellbar, Rodney zweifelt auch. Sicher wissen wir es aber alle nicht.</dd>
<dt>[00:46:19] <a href="http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers">New Web Stuff in iOS6</a></dt>
<dd><s>Der heilige Steve</s> Des heiligen Steves Stellvertreter auf Erden kredenzten ihren Jüngern kürzlich ein neues iOS. Gaudium magnum! Auch für ungläubige Webentwickler, denn es ist viel neues in Safari dabei: eine mutmaßlich unvollständige Implementierung der <a href="http://www.w3.org/TR/webaudio/">Web Audio API</a>, eine ganz sicher unvollständige (oder sagen wir eingeschränkt nutzbare) Fassung der <a href="http://www.w3.org/TR/FileAPI/">File API</a>, Smart App Banners, eine proprietäre Fullscreen-Funktion und auch ganz ironiefrei ein paar gute Dinge, wie z.B. eingebautes Remote Debugging. Weniger erfreulich sind die ebenfalls <a href="http://www.devthought.com/2012/09/22/understanding-the-ios6-ajax-bugs/">neuen Ajax-Bugs</a>.</dd>
</dl>
<h3>[01:04:22] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.webdesignerdepot.com/2012/09/a-roundup-of-great-icon-fonts/">Icon Font Roundup</a></dt>
<dd>Denn man kann nie genug haben.</dd>
<dt><a href="http://bradfrost.github.com/this-is-responsive/patterns.html">Responsive Patterns</a></dt>
<dd>Umfangreiche Sammlung.</dd>
<dt><a href="http://drublic.de/blog/yeoman/">Yeoman – Level-up Your Daily Workflow</a></dt>
<dd>Hans über Yeoman.</dd>
<dt><a href="http://klick-ass.com/awesomeness/avoid-the-tamagotchis-a-list-of-open-device-labs/">Avoid the tamagotchis</a></dt>
<dd>Andre Jay Meissner sammelt Open Device Labs …</dd>
<dt><a href="http://klick-ass.com/de/events/why-you-should-join-the-berlin-desknots-today/">Warum du noch heute ein Berlin Desknot werden solltest</a></dt>
<dd>… und schiebt in Berlin ein Meetup an.</dd>
<dt><a href="http://simurai.com/post/31460815120/flick-scroll">Flick Scrolling</a></dt>
<dd>UI-Konzept plus experimentelle Implementierung von Simurai</dd>
<dt><a href="http://www.stevesouders.com/blog/2012/09/10/clearing-browser-data/">Clearing Browser Cache</a></dt>
<dd>Wenn ihr denkt, so etwas wie Browsercache putzen sei eine einfache Angelegenheit, habt ihr noch nicht den Herrn Souders gelesen.</dd>
<dt><a href="http://blogs.adobe.com/webplatform/2012/09/21/css-custom-filters-now-available-under-flag-in-chrome-canary/">CSS Custom Filters Now Available Under Flag in Chrome Canary</a></dt>
<dd>CSS-Filter rücken auf die Realität vor.</dd>
<dt><a href="http://www.youtube.com/watch?v=kiPe7DPmEgE">Oh really, why is that? Web performance for the curious</a></dt>
<dd>Empfehlenswerter dreißigminütiger Talk über Webbrowser-Internals und Performance.</dd>
<dt><a href="http://5by5.tv/webahead">The Web Ahead</a></dt>
<dd>Guter Podcast (sagt Kahlil)</dd>
</dl>


Während sich Schepp mit seinen Ladies in fernen Ländern die Sonne auf den Pelz
brennen ließ, luden Hans, Kahlil und Rod jemanden names Peter ein, um das Team
für diese Revision zu komplettieren.


[00…

Während sich Schepp mit seinen Ladies in fernen Ländern die Sonne auf den Pelz
brennen ließ, luden Hans, Kahlil und Rod jemanden names Peter ein, um das Team
für diese Revision zu komplettieren.


[00:00:22] NEWS

CSS IMAGE VALUES AND REPLACED CONTENT MODULE LEVEL 4

Neuerdings ein Working Draft.

GOOGLE APPS STELLT IE8-SUPPORT EIN

Munition für die Argumentskanone, die man vor jedem Projekt auf Kunden und/oder
Chefs richtet.

ADOBE EDGE TOOLS & SERVICES

Shadow heißt jetzt Inspect, sonst ändert sich nichts. Bis auf den Preis. Adobe
stellt seine neue Produktplatte rund ums Web vor. Zitat Andy Clarke: „truly
terrible.“


SCHAUNOTIZEN

[00:01:35] SEE YOUR SITE LIKE THE REST OF THE WORLD DOES. ON THE NOKIA X2-01

David Storey (Motorola) eröffnet uns, dass nicht überall auf der Welt die Leute
mit Smartphones herumlaufen. Wir sind gleichermaßen erschüttert wie
uninteressiert. Erstens wird das deutschsprachige Internet in den eher
abgelegenen Regionen der Welt vermutlich noch weniger rezipiert als hierzulande,
was schon mal was heißen will. Und dank Responsive Design fluppt das Layout
schließlich selbst auf Briefmarken-Bildschirmen. Wenn man sich obendrein noch an
die Grundregeln der nicht-failigen Webentwicklung hält (progressive enhancement
usw.) bleibt die Seite auch bei verranztem JS bedienbar. Die Herausforderung
sieht zumindest Rodney eher bei originellen Bedienkonzepten (z.B. bei
Spielkonsolen). Wir haben im übrigen nichts gegen Pakistan!

[00:18:12] EMBER VERSUS BACKBONE VERSUS GAR NIX

An uns scrollten vergangene Woche viel zu Ember.js vorbei; neben einem langen
Talk unter anderem auch ein Artikel über die Konzepte hinter dem Framework. Die
Konzepte hinter Ember seien so komplex, dass sie eben … naja, komplex seien.
Peter, der die letzten Wochen damit verbrachte, webfremden Padawanen Einfachheit
zu predigen und diese auch dabei beobachtet hat, wie sie recht komplexe Apps aus
einfachen Teilen zusammengebaut haben, fragt sich nun, ob „die große Lösung“
überhaupt sein muss. Kahlil findet das zumindest nicht völlig unvorstellbar,
Rodney zweifelt auch. Sicher wissen wir es aber alle nicht.

[00:46:19] NEW WEB STUFF IN IOS6

Der heilige Steve Des heiligen Steves Stellvertreter auf Erden kredenzten ihren
Jüngern kürzlich ein neues iOS. Gaudium magnum! Auch für ungläubige
Webentwickler, denn es ist viel neues in Safari dabei: eine mutmaßlich
unvollständige Implementierung der Web Audio API, eine ganz sicher
unvollständige (oder sagen wir eingeschränkt nutzbare) Fassung der File API,
Smart App Banners, eine proprietäre Fullscreen-Funktion und auch ganz ironiefrei
ein paar gute Dinge, wie z.B. eingebautes Remote Debugging. Weniger erfreulich
sind die ebenfalls neuen Ajax-Bugs.


[01:04:22] KEINE SCHAUNOTIZEN

ICON FONT ROUNDUP

Denn man kann nie genug haben.

RESPONSIVE PATTERNS

Umfangreiche Sammlung.

YEOMAN – LEVEL-UP YOUR DAILY WORKFLOW

Hans über Yeoman.

AVOID THE TAMAGOTCHIS

Andre Jay Meissner sammelt Open Device Labs …

WARUM DU NOCH HEUTE EIN BERLIN DESKNOT WERDEN SOLLTEST

… und schiebt in Berlin ein Meetup an.

FLICK SCROLLING

UI-Konzept plus experimentelle Implementierung von Simurai

CLEARING BROWSER CACHE

Wenn ihr denkt, so etwas wie Browsercache putzen sei eine einfache
Angelegenheit, habt ihr noch nicht den Herrn Souders gelesen.

CSS CUSTOM FILTERS NOW AVAILABLE UNDER FLAG IN CHROME CANARY

CSS-Filter rücken auf die Realität vor.

OH REALLY, WHY IS THAT? WEB PERFORMANCE FOR THE CURIOUS

Empfehlenswerter dreißigminütiger Talk über Webbrowser-Internals und
Performance.

THE WEB AHEAD

Guter Podcast (sagt Kahlil)

Revision 89: Mobile, Frameworks, iOS 6

<p>Vier von Fünf &#8211; nur Peter ist noch auf Weltreise. Wir schreiben die Revision 88, deren zahlentechnische Signifikanz wir, zu Peters Bedauern, vollkommen unter den Tisch fallen lassen. Stattdessen konzentrieren wir uns auf den heißen Scheiss der letzten Woche.</p>
<h3>[00:00:14] News</h3>
<dl>
<dt><a href="http://www.webmonkey.com/2012/09/adobes-css-shaders-now-an-official-web-standard/">Adobe CSS Shaders &#8211; ab sofort ein Standard</a></dt>
<dd>Die CSS3 Shader, vorgestellt von Adobe, sind zum W3C Editor&#8217;s Draft erhoben worden.</dd>
<dt><a href="http://yeoman.io/">Yeoman!</a></dt>
<dd>Tool zur Automatisierung vieler Aufgaben der FrontEnd-Entwicklung</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] <a href="http://firefoxnightly.tumblr.com/post/30799860532/opus-codec-in-audio-and-video-now-support">Der Opus Codec landet in Firefox</a></dt>
<dd>Schepp erklärt was Opus und warum wir das brauchen.</dd>
<dt>[00:12:25] <a href="http://blog.romanliutikov.com/coding/discover-the-dark-side-with-shadow-dom/">Understanding the Shadow DOM</a></dt>
<dd>Ein Artikel, der Shadow DOM anhand des &lt;video&gt; Elements. Das gibt uns mal wieder Anlass über diese hervorragende Änderung zu diskutieren.</dd>
<dt>[00:18:15] <a href="http://www.netmagazine.com/features/hot-web-standards-julyaugust-2012">Hot Web Standards July/August 2012</a></dt>
<dd>Lea Verous Artikel im NetMag ist eine prima Zusammenfassung einiger Themen, denen wir in den letzten Wochen zu wenig Aufmerksamkeit geschenkt haben.<br />
Wir picken uns die <em>Zückerli</em> aus dem Artikel und erfreuen uns der tollen Dinge.</dd>
<dt>[00:29:20] <a href="http://twitter.github.com/bower/">Bower</a></dt>
<dd>Twitter hat mal wieder ein neues Tool in Internet geworfen. Bower (gesprochen »Bauer«) ist ein Dependency Management System, das unter anderem auch in Yeoman integriert ist.</dd>
<dd><img loading="lazy" class="alignnone size-medium wp-image-1490" title="Package Management" src="http://workingdraft.de/wp-content/uploads/2012/09/package-manager-300x193.jpg" alt="Package Management" width="300" height="193" srcset="https://workingdraft.de/wp-content/uploads/2012/09/package-manager-300x193.jpg 300w, https://workingdraft.de/wp-content/uploads/2012/09/package-manager.jpg 400w" sizes="(max-width: 300px) 100vw, 300px" /></dd>
</dl>
<h3>[00:38:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.youtube.com/user/BrainCampCGN?feature=watch">BrainCamp Cologne &#8211; Videos</a></dt>
<dd>Am BrainCamp in Köln gabs ein paar interessante Vorträge.</dd>
<dt><a href="http://filamentgroup.com/lab/unicon/">Unicon &#8211; Grunt Plugin für SVG/PNG</a></dt>
<dd>Unicon ist ein Plugin für <a href="http://gruntjs.com/">Grunt</a>. Es baut Image Sprites aus SVG Bildern und kümmert sich um die Konvertierung nach PNG für maximale Kompatibilität.</dd>
<dt><a href="http://dev.opera.com/articles/view/opera-mini-and-javascript/">Opera Mini and Javascript</a></dt>
<dd>Opera erklärt wie ihr Mini Browser mit Javascript umgeht.</dd>
<dt><a href="http://jspdf.com/">jsPDF</a></dt>
<dd>Eine Bibliothek zur Erstellung von PDFs. Im Gegensatz zu <a href="http://pdfkit.org/">PDFKit</a> läuft jsPDF nicht nur unter Node.js, sondern auch im Browser!</dd>
<dt><a href="http://terrifically.org/">Terrific</a></dt>
<dd>Erlaubt das Aufteilen von FrontEnds in Komponenten, welches die Struktur, Wartbarkeit und Wiederverwendbarkeit erhöhen soll.</dd>
<dt><a href="http://clarify.io/">Clarify.io</a></dt>
<dd>Ein schniekes Tool mit dem die Designer™ unter uns spielend einfach Styleguides zusammenklicken können und so die Kommunikation mit den Producern™ deutlich zu verbessern.</dd>
<dt><a href="http://www.kernjs.com/">Kern.js</a></dt>
<dd>Kern.js setzt auf <a href="http://www.letteringjs.com/">Lettering.js</a> auf und erlaubt die spielend einfache Anpassung der Position, Größe und Rotation einzelner Buchstaben.</dd>
<dt><a href="http://sourceforge.jp/projects/sie/">SIE</a></dt>
<dd>Eine SVG Rendering Engine in Javascript, erlaubt SVG auch in IE6-8 zu nutzen.</dd>
<dt><a href="https://github.com/sergeche/emmet-sublime">Emmet &#8211; formerly known as Zen Coding</a></dt>
<dd>Emmet ist das neue Zen.</dd>
</dl>


Vier von Fünf – nur Peter ist noch auf Weltreise. Wir schreiben die Revision 88,
deren zahlentechnische Signifikanz wir, zu Peters Bedauern, vollkommen unter den
Tisch fallen lassen. Stattdessen konze…

Vier von Fünf – nur Peter ist noch auf Weltreise. Wir schreiben die Revision 88,
deren zahlentechnische Signifikanz wir, zu Peters Bedauern, vollkommen unter den
Tisch fallen lassen. Stattdessen konzentrieren wir uns auf den heißen Scheiss
der letzten Woche.


[00:00:14] NEWS

ADOBE CSS SHADERS – AB SOFORT EIN STANDARD

Die CSS3 Shader, vorgestellt von Adobe, sind zum W3C Editor’s Draft erhoben
worden.

YEOMAN!

Tool zur Automatisierung vieler Aufgaben der FrontEnd-Entwicklung


SCHAUNOTIZEN

[00:01:50] DER OPUS CODEC LANDET IN FIREFOX

Schepp erklärt was Opus und warum wir das brauchen.

[00:12:25] UNDERSTANDING THE SHADOW DOM

Ein Artikel, der Shadow DOM anhand des <video> Elements. Das gibt uns mal wieder
Anlass über diese hervorragende Änderung zu diskutieren.

[00:18:15] HOT WEB STANDARDS JULY/AUGUST 2012

Lea Verous Artikel im NetMag ist eine prima Zusammenfassung einiger Themen,
denen wir in den letzten Wochen zu wenig Aufmerksamkeit geschenkt haben.
Wir picken uns die Zückerli aus dem Artikel und erfreuen uns der tollen Dinge.

[00:29:20] BOWER

Twitter hat mal wieder ein neues Tool in Internet geworfen. Bower (gesprochen
»Bauer«) ist ein Dependency Management System, das unter anderem auch in Yeoman
integriert ist.




[00:38:00] KEINE SCHAUNOTIZEN

BRAINCAMP COLOGNE – VIDEOS

Am BrainCamp in Köln gabs ein paar interessante Vorträge.

UNICON – GRUNT PLUGIN FÜR SVG/PNG

Unicon ist ein Plugin für Grunt. Es baut Image Sprites aus SVG Bildern und
kümmert sich um die Konvertierung nach PNG für maximale Kompatibilität.

OPERA MINI AND JAVASCRIPT

Opera erklärt wie ihr Mini Browser mit Javascript umgeht.

JSPDF

Eine Bibliothek zur Erstellung von PDFs. Im Gegensatz zu PDFKit läuft jsPDF
nicht nur unter Node.js, sondern auch im Browser!

TERRIFIC

Erlaubt das Aufteilen von FrontEnds in Komponenten, welches die Struktur,
Wartbarkeit und Wiederverwendbarkeit erhöhen soll.

CLARIFY.IO

Ein schniekes Tool mit dem die Designer™ unter uns spielend einfach Styleguides
zusammenklicken können und so die Kommunikation mit den Producern™ deutlich zu
verbessern.

KERN.JS

Kern.js setzt auf Lettering.js auf und erlaubt die spielend einfache Anpassung
der Position, Größe und Rotation einzelner Buchstaben.

SIE

Eine SVG Rendering Engine in Javascript, erlaubt SVG auch in IE6-8 zu nutzen.

EMMET – FORMERLY KNOWN AS ZEN CODING

Emmet ist das neue Zen.

Revision 88: Opus Codec, hot CSS Specs und Bower

<p>Diesmal haben sich Hans, Rodney und Kahlil zum schnacken getroffen.</p>
<h3>[00:00:29] Responsive Images &#8211; Editor&#8217;s Draft</h3>
<dl>
<dt><a href="http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html#picture-element">Responsive Images &#8211; Editor&#8217;s Draft</a></dt>
<dd>Responsive Bilder haben jetzt auch einen Working Draft.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:14] <a href="http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit">Stick your landings! position: sticky lands in WebKit &#8211; HTML5Rocks Updates</a></dt>
<dd>`position: sticky` ist im Webkit gelandet gelandet und wir beschreiben was das macht und ob das gut ist.</dd>
<dt>[00:12:20] <a href="https://github.com/visionmedia/rework">visionmedia/rework</a></dt>
<dd>Es gibt einen neuen CSS Präprozessor und wir eruieren wie es sich von den anderen unterscheidet und ob es Sinn macht.</dd>
<dt>[00:22:49] <a href="https://github.com/rstacruz/css-condense">rstacruz/css-condense</a></dt>
<dd>Ein Tool, das Dein CSS kondensiert. Es hat ungefährliche und gefährliche Methoden. Es wird über den Sinn des ganzen sinniert.</dd>
</dl>
<h3>[00:31:20] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/qfox/Heatfiler">Heatfilter</a></dt>
<dd>JS profiler slash code coverage reporting tool</dd>
<dt><a href="http://paulbakaus.com/2012/08/30/painting-the-dom-to-canvas-with-domvas/">Domvas. Print DOM Elements in Canvas</a></dt>
<dt><a href="http://confreaks.com/events/jqcon2012">jQuery Conf 2012 Videos</a></dt>
<dd>Tolle Talks von der jQuery Conf.</dd>
<dt><a href="http://f2em.com/">A Front-End Manifesto</a></dt>
<dt><a href="http://railsgirls.com/cologne">Railsgirls: Cologne 28-29th September 2012</a></dt>
<dt><a href="http://nodecopter.com/">NodeCopter</a></dt>
<dd>A full day of programming flying robots with<br />
node.js in Berlin (the day before JSConf.eu)!</dd>
</dl>


Diesmal haben sich Hans, Rodney und Kahlil zum schnacken getroffen.


[00:00:29] RESPONSIVE IMAGES – EDITOR’S DRAFT

RESPONSIVE IMAGES – EDITOR’S DRAFT

Responsive Bilder haben jetzt auch einen Workin…

Diesmal haben sich Hans, Rodney und Kahlil zum schnacken getroffen.


[00:00:29] RESPONSIVE IMAGES – EDITOR’S DRAFT

RESPONSIVE IMAGES – EDITOR’S DRAFT

Responsive Bilder haben jetzt auch einen Working Draft.


SCHAUNOTIZEN

[00:01:14] STICK YOUR LANDINGS! POSITION: STICKY LANDS IN WEBKIT – HTML5ROCKS
UPDATES

`position: sticky` ist im Webkit gelandet gelandet und wir beschreiben was das
macht und ob das gut ist.

[00:12:20] VISIONMEDIA/REWORK

Es gibt einen neuen CSS Präprozessor und wir eruieren wie es sich von den
anderen unterscheidet und ob es Sinn macht.

[00:22:49] RSTACRUZ/CSS-CONDENSE

Ein Tool, das Dein CSS kondensiert. Es hat ungefährliche und gefährliche
Methoden. Es wird über den Sinn des ganzen sinniert.


[00:31:20] KEINE SCHAUNOTIZEN

HEATFILTER

JS profiler slash code coverage reporting tool

DOMVAS. PRINT DOM ELEMENTS IN CANVAS

JQUERY CONF 2012 VIDEOS

Tolle Talks von der jQuery Conf.

A FRONT-END MANIFESTO

RAILSGIRLS: COLOGNE 28-29TH SEPTEMBER 2012

NODECOPTER

A full day of programming flying robots with
node.js in Berlin (the day before JSConf.eu)!

Revision 87: Position Sticky

<p>Wir haben das Sommerloch gefunden! Hans und Rodney wurden von <a title="Sebastian Golasch" href="https://twitter.com/asciidisco">Sebastian Golasch</a> unterstützt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:44] <a href="http://www.xanthir.com/blog/b4K_0">CAS: Cascading Attribute Sheets</a></dt>
<dd>Tab Atkins stellt seine Idee vor, mit der er das Setzen von HTML-Attributen vereinfachen möchte. Syntaktisch entspricht der Vorschlag CSS, funktional möchte er jedoch etwas abspecken. Wir stellen fest, dass die Idee mit 10 Zeilen Javascript auch selbst gebaut werden kann und somit vom &#8222;nice to have&#8220; zu &#8222;don&#8217;t need this&#8220; wird.</dd>
<dt>[00:15:21] <a href="http://weblog.bocoup.com/javascript-object-observe/">JavaScript Object.observe </a></dt>
<dd>Rick Waldron (Bocoup) erklärt was es mit dem neuen Object.observe auf sich hat. Sebastian erläutert wie unglaublich hilfreich dieses kleine Feature für Library-Entwickler sein würde.</dd>
</dl>
<h3>[00:26:17] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.pixelplant.com/">Pixelplant</a></dt>
<dd>Konvertiert Flash zu HTML/CSS/Javascript &#8211; Augenscheinlich kompatibel bis zu Flash 10 und ActionScript 3.</dd>
<dt><a href="http://sindresorhus.com/grunt-plugins/">Grunt Plugins</a></dt>
<dd>Sindre Sorhus pflegt eine Liste von Plugins für Grunt.</dd>
<dt><a href="http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/">Date Range Picker</a></dt>
<dd>Ein auf <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> basierender Datumsbereich-Wähler.</dd>
<dt><a href="http://www.nczonline.net/blog/2012/08/22/the-innovations-of-internet-explorer/">The Innovations of Internet Explorer</a></dt>
<dd>Nicholas Zakas listet die etlichen Errungenschaften des Hauses Microsoft, die uns den Weg für das heutige Web geebnet haben.</dd>
<dt><a href="http://msdn.microsoft.com/en-us/library/ff520759">Vom Internet Explorer unterstützte, aber unspezifizierte Attribute</a></dt>
<dd>Der Internet Explorer unterstützt eine ganze Menge (lustiger) Attribute, die nicht zum offiziellen Standard gehören.</dd>
<dt><a href="http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/">Towards a Retina Web</a></dt>
<dd>Das Smashing Magazine erklärt die Hintergründe von Retina Displays und was im Umgang mit diesen Auflösungen zu beachten gibt, mit schönen Illustrationen.</dd>
<dt><a href="http://edenspiekermann.com/en/blog/responsive-javascript-helpers">Responsive Javascript Helpers</a></dt>
<dd>Die Javscript Funktionen relocate() und minwidth() helfen beim Umbauen des DOM für Responsive Layouts.</dd>
<dt><a href="http://dailyjs.com/2012/08/27/equality/">JS 101: Equality</a></dt>
<dd>DailyJS erklärt die Hintergründe und Unterschiede von <code>a == b</code> und <code>a === b</code>.</dd>
</dl>


Wir haben das Sommerloch gefunden! Hans und Rodney wurden von Sebastian Golasch
unterstützt.


SCHAUNOTIZEN

[00:00:44] CAS: CASCADING ATTRIBUTE SHEETS

Tab Atkins stellt seine Idee vor, mit der er da…

Wir haben das Sommerloch gefunden! Hans und Rodney wurden von Sebastian Golasch
unterstützt.


SCHAUNOTIZEN

[00:00:44] CAS: CASCADING ATTRIBUTE SHEETS

Tab Atkins stellt seine Idee vor, mit der er das Setzen von HTML-Attributen
vereinfachen möchte. Syntaktisch entspricht der Vorschlag CSS, funktional möchte
er jedoch etwas abspecken. Wir stellen fest, dass die Idee mit 10 Zeilen
Javascript auch selbst gebaut werden kann und somit vom „nice to have“ zu „don’t
need this“ wird.

[00:15:21] JAVASCRIPT OBJECT.OBSERVE

Rick Waldron (Bocoup) erklärt was es mit dem neuen Object.observe auf sich hat.
Sebastian erläutert wie unglaublich hilfreich dieses kleine Feature für
Library-Entwickler sein würde.


[00:26:17] KEINE SCHAUNOTIZEN

PIXELPLANT

Konvertiert Flash zu HTML/CSS/Javascript – Augenscheinlich kompatibel bis zu
Flash 10 und ActionScript 3.

GRUNT PLUGINS

Sindre Sorhus pflegt eine Liste von Plugins für Grunt.

DATE RANGE PICKER

Ein auf Bootstrap basierender Datumsbereich-Wähler.

THE INNOVATIONS OF INTERNET EXPLORER

Nicholas Zakas listet die etlichen Errungenschaften des Hauses Microsoft, die
uns den Weg für das heutige Web geebnet haben.

VOM INTERNET EXPLORER UNTERSTÜTZTE, ABER UNSPEZIFIZIERTE ATTRIBUTE

Der Internet Explorer unterstützt eine ganze Menge (lustiger) Attribute, die
nicht zum offiziellen Standard gehören.

TOWARDS A RETINA WEB

Das Smashing Magazine erklärt die Hintergründe von Retina Displays und was im
Umgang mit diesen Auflösungen zu beachten gibt, mit schönen Illustrationen.

RESPONSIVE JAVASCRIPT HELPERS

Die Javscript Funktionen relocate() und minwidth() helfen beim Umbauen des DOM
für Responsive Layouts.

JS 101: EQUALITY

DailyJS erklärt die Hintergründe und Unterschiede von a == b und a === b.

Revision 86: CAS und Object.observe

<p>Dieses mal wurde die Crew durch den Konferenz-Großmeister <a href="http://twitter.com/marcthiele">Marc Thiele</a> verstärkt.</p>
<h3>[00:00:19] News</h3>
<dl>
<dt><a href="http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/">Safari 6 and Chrome 21 add image-set to support retina images</a></dt>
<dd>Damit dürfte klar sein, wie wir in Zukunft responsive images machen werden.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="http://2012.beyondtellerrand.com/">beyond tellerrand 2012</a> und <a href="http://smashingconf.com/">Smashing Conference 2012</a></dt>
<dd>Wir sind uns einig: besteste Konferenzen ever! Veranstalter <a href="http://www.marcthiele.com/">Marc Thiele</a> erzählt von den Hintergründen seiner Konferenzen und <a href="http://2012.beyondtellerrand.com/workshops">den</a> <a href="http://smashingconf.com/workshops">Workshops</a> und lässt sich für vergangene Werke angemessen huldigen. Spontan beschließen wir, zwei Karten für die BT2012 zu verlosen (siehe unten).</dd>
<dt>[00:28:02] <a href="http://www.xanthir.com/blog/b4KT0">Let&#8217;s Talk about CSS Variables</a></dt>
<dd> Tab Atkins rechtfertigt die neue, wahrscheinliche Syntax für CSS-Variablen. Wir sind von der Präfix-Sparsamkeit nicht überzeugt; sowas wie <a href="http://de.wikipedia.org/wiki/Perl_(Programmiersprache)#Syntax">Perl kommt ja auch mit mehr als einem Sonderzeichen klar.</a> Ein Update für Hans&#8216; allumfassenden Artikel über CSS-Variablen <a href_="http://drublic.de/blog/about-css-variables/">gibt es auch schon.</a></dd>
<dt>[00:38:23] <a href="http://www.peterkroener.de/aenderungen-in-der-neuen-css3-farbverlauf-syntax-ohne-vendor-prefix/">Farbverläufe erklärbärt</a></dt>
<dd>Peter erklärt die neue Syntax für <a href="http://www.w3.org/TR/css3-images/">CSS3-Gradients</a>. Die Änderungen an sich finden wir toll, aber war es die nochmalige Änderung wert? Schließlich gibt es ja traditionell <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=765645">Probleme bei solchen Umstellungen</a>. Und wer würde schon auf <a href="http://www.constellation7.org/">solche Webdesign-Meisterwerke</a> verzichten wollen, nur für eine schönere CSS-Syntax? Wir jedenfalls nicht!</dd>
<dt>[00:51:00] <a href="http://www.marco.org/2012/08/16/twitter-api-changes">Interpreting some of Twitter’s API changes</a></dt>
<dd>Twitter gibt sich <a href="https://dev.twitter.com/blog/changes-coming-to-twitter-api">neue API-Terms</a> und das Internet zürnt. Wir auch, aber wir wissen nicht so ganz, wo das jetzt alles enden soll. <a href="http://blog.rodneyrehm.de/archives/17-Hey-twitter,-heres-an-idea.html">Rod meint</a>, Twitter könnte uns einfach bezahlen lassen. Aber ob Nicht-Nerds da mitmachen? Die sind ja bisher nicht mal auf kostenlose Alternativen wie <a href="http://identi.ca/">Identi.ca</a> oder <a href="http://new.heello.com/">anderes obskures Zeug</a> augesprungen. So wissen wir auch nicht, ob aus <a href="http://app.net/">App.net</a> etwas werden könnte. <a href="http://www.youtube.com/watch?v=RMfLDv4KygY">Scheiß Gesamtsituation!</a></dd>
</dl>
<h3>[01:12:45] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/requirejs/xrayquire">requirejs/xrayquire</a></dt>
<dd>Mit diesem RequireJS-Inspector den Modulen unter die Motorhaube sehen.</dd>
<dt><a href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">Using ARIA in HTML5</a></dt>
<dd>Wer auch nur am Rande an Barrierefreiheit interessiert ist, sollte sich dieses Dokument auf die Großhirnrinde tätowieren lassen. Ernsthaft!</dd>
<dt><a href="http://fantasai.inkedblade.net/weblog/2012/css-layout-evolution/">CSS Layout Evolution</a></dt>
<dd>Erklärt CSS3-Layout und beleuchtet auch die Hintergründe. Endlich erfahren, warum CSS-Layout (ohne CSS3) so schwer ist!</dd>
<dt><a href="http://fabi.me/php-projects/dropphp-dropbox-api-client/">DropPHP</a></dt>
<dd>Ein einfacher Dropbox-Client in PHP.</dd>
<dt><a href="https://addons.mozilla.org/de/firefox/addon/jit-inspector/">Firefox JIT Inspector</a></dt>
<dd>Firefox-Extension für den geneigten JavaScript-Optimierer.</dd>
<dt><a href="https://www.youtube.com/watch?v=Z_q6iw3h48s">A day in the life of V8</a> (<a href="http://s3.mrale.ph/jsconf2012.pdf">Slides</a>)</dt>
<dd>Passend zum JIT-Inspector dieser Talk, der erklärt, wie man den von V8 generierten Maschinencode inspiziert. Futter für die Extremsportler unter den JavaScript-Optimierern.</dd>
<dt><a href="http://addyosmani.com/blog/custom-sublime-text-build-systems-for-popular-tools-and-languages/">Custom Sublime Text Build Systems For Popular Tools And Languages</a></dt>
<dd>Wie man sich in ST2 Buildsysteme baut.</dd>
</dl>
<h3>[01:17:00] Verlosung</h3>
<dl>
<dt>Zwei Karten für die Beyond Tellerrand 2012 zu gewinnen!</dt>
<dd>
Es gibt zwei Möglichkeiten für euch, je eine Karte für die <a href="http://2012.beyondtellerrand.com/">Beyond Tellerrand 2012</a> (besteste Konferenz ever) zu gewinnen:</p>
<ul>
<li>Beantwortet die Frage „in welcher Revision haben wir über Peerbind gesprochen?“ auf möglichst originelle Weise. Egal ob Audio, Video, Text oder Bild, die Jury entscheidet in der nächsten Revision über den Sieger
<li>Bastelt Super Mario aus HTML und CSS! Welcher der beste ist, entscheidet die Jury entscheidet in der nächsten Revision
<ul>
</dd>
</dl>
<p>Schickt uns Eure Einreichungen via <a href="https://twitter.com/workingdraft">Twitter</a> oder als E-Mail an <a href='mai&#108;to&#58;comm&#101;&#110;t%73&#64;work&#105;&#110;&#103;draf%74&#46;d%&#54;&#53;'>co&#109;ment&#115;&#64;workingdraf&#116;&#46;de</a>.</p>


Dieses mal wurde die Crew durch den Konferenz-Großmeister Marc Thiele verstärkt.


[00:00:19] NEWS

SAFARI 6 AND CHROME 21 ADD IMAGE-SET TO SUPPORT RETINA IMAGES

Damit dürfte klar sein, wie wir in Zu…

Dieses mal wurde die Crew durch den Konferenz-Großmeister Marc Thiele verstärkt.


[00:00:19] NEWS

SAFARI 6 AND CHROME 21 ADD IMAGE-SET TO SUPPORT RETINA IMAGES

Damit dürfte klar sein, wie wir in Zukunft responsive images machen werden.


SCHAUNOTIZEN

[00:01:00] BEYOND TELLERRAND 2012 UND SMASHING CONFERENCE 2012

Wir sind uns einig: besteste Konferenzen ever! Veranstalter Marc Thiele erzählt
von den Hintergründen seiner Konferenzen und den Workshops und lässt sich für
vergangene Werke angemessen huldigen. Spontan beschließen wir, zwei Karten für
die BT2012 zu verlosen (siehe unten).

[00:28:02] LET’S TALK ABOUT CSS VARIABLES

Tab Atkins rechtfertigt die neue, wahrscheinliche Syntax für CSS-Variablen. Wir
sind von der Präfix-Sparsamkeit nicht überzeugt; sowas wie Perl kommt ja auch
mit mehr als einem Sonderzeichen klar. Ein Update für Hans‘ allumfassenden
Artikel über CSS-Variablen gibt es auch schon.

[00:38:23] FARBVERLÄUFE ERKLÄRBÄRT

Peter erklärt die neue Syntax für CSS3-Gradients. Die Änderungen an sich finden
wir toll, aber war es die nochmalige Änderung wert? Schließlich gibt es ja
traditionell Probleme bei solchen Umstellungen. Und wer würde schon auf solche
Webdesign-Meisterwerke verzichten wollen, nur für eine schönere CSS-Syntax? Wir
jedenfalls nicht!

[00:51:00] INTERPRETING SOME OF TWITTER’S API CHANGES

Twitter gibt sich neue API-Terms und das Internet zürnt. Wir auch, aber wir
wissen nicht so ganz, wo das jetzt alles enden soll. Rod meint, Twitter könnte
uns einfach bezahlen lassen. Aber ob Nicht-Nerds da mitmachen? Die sind ja
bisher nicht mal auf kostenlose Alternativen wie Identi.ca oder anderes obskures
Zeug augesprungen. So wissen wir auch nicht, ob aus App.net etwas werden könnte.
Scheiß Gesamtsituation!


[01:12:45] KEINE SCHAUNOTIZEN

REQUIREJS/XRAYQUIRE

Mit diesem RequireJS-Inspector den Modulen unter die Motorhaube sehen.

USING ARIA IN HTML5

Wer auch nur am Rande an Barrierefreiheit interessiert ist, sollte sich dieses
Dokument auf die Großhirnrinde tätowieren lassen. Ernsthaft!

CSS LAYOUT EVOLUTION

Erklärt CSS3-Layout und beleuchtet auch die Hintergründe. Endlich erfahren,
warum CSS-Layout (ohne CSS3) so schwer ist!

DROPPHP

Ein einfacher Dropbox-Client in PHP.

FIREFOX JIT INSPECTOR

Firefox-Extension für den geneigten JavaScript-Optimierer.

A DAY IN THE LIFE OF V8 (SLIDES)

Passend zum JIT-Inspector dieser Talk, der erklärt, wie man den von V8
generierten Maschinencode inspiziert. Futter für die Extremsportler unter den
JavaScript-Optimierern.

CUSTOM SUBLIME TEXT BUILD SYSTEMS FOR POPULAR TOOLS AND LANGUAGES

Wie man sich in ST2 Buildsysteme baut.


[01:17:00] VERLOSUNG

ZWEI KARTEN FÜR DIE BEYOND TELLERRAND 2012 ZU GEWINNEN!

Es gibt zwei Möglichkeiten für euch, je eine Karte für die Beyond Tellerrand
2012 (besteste Konferenz ever) zu gewinnen:



 * Beantwortet die Frage „in welcher Revision haben wir über Peerbind
   gesprochen?“ auf möglichst originelle Weise. Egal ob Audio, Video, Text oder
   Bild, die Jury entscheidet in der nächsten Revision über den Sieger
 * Bastelt Super Mario aus HTML und CSS! Welcher der beste ist, entscheidet die
   Jury entscheidet in der nächsten Revision

Schickt uns Eure Einreichungen via Twitter oder als E-Mail an
comments@workingdraft.de.

Revision 85: Konferenzen, CSS und Twitter

<p>Die Crew von Working Draft fiel wie die Fliegen Deadlines und Kopfschmerzen zum Opfer. Zum Glück konnte Sebastian Golasch alias <a href="https://twitter.com/asciidisco">@asciidisco</a> die am Ende nur noch aus Rodney und Peter bestehende Rumpftruppe verstärken.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:17] <a href="http://blog.jquery.com/2012/08/09/jquery-1-8-released/">jQuery 1.8 Released</a></dt>
<dd>jQuery 1.8 kommt mit besserer Performance und <a href="http://mathiasbynens.be/demo/jquery-size">eingedämmten Code-Wachstum</a> daher. Die großen Änderungen sind eher interner Natur. Der Code ausgemistet und so modularisiert, dass man sich jetzt <a href="https://github.com/jquery/jquery/#how-to-build-your-own-jquery">eigene, kleinere Builds erstellen kann</a>. Neue Versionen von <a href="http://dojotoolkit.org/blog/dojo-1-8-0-tagged-official-release-august-15">Dojo</a> und <a href="http://www.prototypejs.org/2012/8/8/prototype-1-7-1">Prototype</a> (die Älteren unter euch werden sich erinnern) gibt es auch. Allerdings fiel uns niemand ein, der diese Frameworks noch (freiwillig) benutzt. <a href="http://w3techs.com/blog/entry/jquery_now_runs_on_every_second_website">Das Web scheint sich für jQuery entschieden zu haben.</a></dd>
<dt>[00:15:54] <a href="https://steveko.wordpress.com/2012/02/24/10-things-i-hate-about-git/">10 things I hate about Git</a></dt>
<dd>Steve Bennett kritisiert <a href="http://git-scm.com/">Git</a>. Im Vergleich zu Subversion sei die Benutzung zu unintuitiv, die Commands und Dokumentation seien ranzig und ein Mangel an Abstraktion sorgt für läste Mehrarbeit. Wir können dem nicht direkt widersprechen, wissen aber, wie man Git benutzbarer macht: ein Branching Model namens <a href="http://nvie.com/posts/a-successful-git-branching-model/">Gitflow</a>, quasi Git mit Leitplanken. Das Ganze gibt es auch als <a href="https://github.com/nvie/gitflow/">Git-Extension</a> und wird von Sebastian allerwärmstens empfohlen.</dd>
<dt>[00:28:09] <a href="http://www.smashingmagazine.com/2012/08/09/productivity-staying-up-to-date/">The Art of staying up to date</a></dt>
<dd>Wir vergleichen, wie wir den Dschungel an Informationen rund um Webentwicklung für uns persönlich verwalten. Die Informationsgewinnung läuft bei uns allen mehr oder minder gleich (Twitter, RSS, Working Draft), aber die Verwaltung unterscheidet dann doch. Rodney lagert den Webdev-Teil seines Gehirn an diverse Apps aus und findet so jederzeit alle Infos wieder. Peter verweigert sich solcher Tools komplett und vertraut ganz auf Google, Lazyweb und seinen Kopf. Motto: was ich damit nicht wiederfinde, war eh nicht wichtig. Sebastian arbeitet klassisch mit Browser-Bookmarks. <strong>Was macht ihr, liebe Leser?</strong></dd>
</dl>
<h3>[00:56:16] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://fontello.com/">Fontello</a></dt>
<dd>Schustert Custom Builds aus diversen Icon-Fonts zusammen.</dd>
<dt><a href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/">Remote Debugging für Firefox auf Android</a></dt>
<dd>Nicht ganz unkompliziert, aber wenigstens gibt es diese Anleitung.</dd>
<dt><a href="http://browserver.org/">browserver</a></dt>
<dd>Verwandelt euren Browser in einem Webserver.</dd>
<dt><a href="http://www.2ality.com/2012/08/underscore-extend.html">A closer look at _.extend and copying properties</a></dt>
<dd>Der Doktor™ diesmal zu den Untiefen von property assignment im Kontext von Prototypenketten.</dd>
<dt><a href="http://www.justgage.com/">Just Gauge</a></dt>
<dd>Rendert euch mittels Raphaël &#8217;ne <a href="http://de.wikipedia.org/wiki/Gauge_(Technik)">Gauge</a> in die Seite.</dd>
<dt><a href="http://www.smashingmagazine.com/internship/">PSA &#8211; SmashingMag Interns</a></dt>
<dd>Das SmashingMag sucht (bezahlte) Praktikanten in Freiburg.</dd>
<dt><a href="http://medialize.github.com/URI.js/">Neue Version von URI.js</a></dt>
<dd>Rodneys Library implementiert jetzt URI Templates (<a href="http://tools.ietf.org/html/rfc6570">RFC 6570</a>)</dd>
<dt><a href="http://norbertlindenberg.com/2012/08/javascript-internationalization/">Internationalizing JavaScript Applications</a></dt>
<dd>Slides und Material zum Thema.</dd>
<dt><a href="http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#320_10_august_2012">Placeholder in SASS</a></dt>
<dd>Kleiner, nützlicher Hinweis.</dd>
<dt><a href="http://www.hsivaram.com/impressionist/alpha3/">Impressionist</a></dt>
<dd>GUI für <a href="http://bartaz.github.com/impress.js/#/bored">Impress.js</a>.</dd>
</dl>


Die Crew von Working Draft fiel wie die Fliegen Deadlines und Kopfschmerzen zum
Opfer. Zum Glück konnte Sebastian Golasch alias @asciidisco die am Ende nur noch
aus Rodney und Peter bestehende Rumpftr…

Die Crew von Working Draft fiel wie die Fliegen Deadlines und Kopfschmerzen zum
Opfer. Zum Glück konnte Sebastian Golasch alias @asciidisco die am Ende nur noch
aus Rodney und Peter bestehende Rumpftruppe verstärken.


SCHAUNOTIZEN

[00:01:17] JQUERY 1.8 RELEASED

jQuery 1.8 kommt mit besserer Performance und eingedämmten Code-Wachstum daher.
Die großen Änderungen sind eher interner Natur. Der Code ausgemistet und so
modularisiert, dass man sich jetzt eigene, kleinere Builds erstellen kann. Neue
Versionen von Dojo und Prototype (die Älteren unter euch werden sich erinnern)
gibt es auch. Allerdings fiel uns niemand ein, der diese Frameworks noch
(freiwillig) benutzt. Das Web scheint sich für jQuery entschieden zu haben.

[00:15:54] 10 THINGS I HATE ABOUT GIT

Steve Bennett kritisiert Git. Im Vergleich zu Subversion sei die Benutzung zu
unintuitiv, die Commands und Dokumentation seien ranzig und ein Mangel an
Abstraktion sorgt für läste Mehrarbeit. Wir können dem nicht direkt
widersprechen, wissen aber, wie man Git benutzbarer macht: ein Branching Model
namens Gitflow, quasi Git mit Leitplanken. Das Ganze gibt es auch als
Git-Extension und wird von Sebastian allerwärmstens empfohlen.

[00:28:09] THE ART OF STAYING UP TO DATE

Wir vergleichen, wie wir den Dschungel an Informationen rund um Webentwicklung
für uns persönlich verwalten. Die Informationsgewinnung läuft bei uns allen mehr
oder minder gleich (Twitter, RSS, Working Draft), aber die Verwaltung
unterscheidet dann doch. Rodney lagert den Webdev-Teil seines Gehirn an diverse
Apps aus und findet so jederzeit alle Infos wieder. Peter verweigert sich
solcher Tools komplett und vertraut ganz auf Google, Lazyweb und seinen Kopf.
Motto: was ich damit nicht wiederfinde, war eh nicht wichtig. Sebastian arbeitet
klassisch mit Browser-Bookmarks. Was macht ihr, liebe Leser?


[00:56:16] KEINE SCHAUNOTIZEN

FONTELLO

Schustert Custom Builds aus diversen Icon-Fonts zusammen.

REMOTE DEBUGGING FÜR FIREFOX AUF ANDROID

Nicht ganz unkompliziert, aber wenigstens gibt es diese Anleitung.

BROWSERVER

Verwandelt euren Browser in einem Webserver.

A CLOSER LOOK AT _.EXTEND AND COPYING PROPERTIES

Der Doktor™ diesmal zu den Untiefen von property assignment im Kontext von
Prototypenketten.

JUST GAUGE

Rendert euch mittels Raphaël ’ne Gauge in die Seite.

PSA – SMASHINGMAG INTERNS

Das SmashingMag sucht (bezahlte) Praktikanten in Freiburg.

NEUE VERSION VON URI.JS

Rodneys Library implementiert jetzt URI Templates (RFC 6570)

INTERNATIONALIZING JAVASCRIPT APPLICATIONS

Slides und Material zum Thema.

PLACEHOLDER IN SASS

Kleiner, nützlicher Hinweis.

IMPRESSIONIST

GUI für Impress.js.

Revision 84: jQuery, Git, Informationsverwaltung und jede Menge Links

<p>Mit dem seltenen Überraschungsgast Peter starten Rodney und Hans in eine neue Revision voller Spiel, Spaß und Abenteuer!</p>
<h3>[00:00:10] News</h3>
<dl>
<dt><a href="http://dev.mysql.com/doc/refman/5.6/en/news-5-6-6.html">MySQL 5.6.6 ist da</a></dt>
<dd>Mit memcached an Bord!</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:40] <a href="http://www.nczonline.net/blog/2012/07/24/thoughts-on-ecmascript-6-and-new-syntax/">Neue Syntax in ECMAScript 6</a></dt>
<dd>Die nächste Version von JavaScript wird allerlei neue Syntax einführen, wovon Nicholas C. Zakas ein großer Teil ganz und gar nicht gefällt. Rodney und Peter stimmen in diesem Chor voller Inbrunst ein. <a href="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax&#038;s=arrow">Fat Arrows</a> machen, wenn überhaupt, <a href="http://coffeescript.org/#fat_arrow">nur in CoffeeScript Sinn</a>, <a href="http://www.nczonline.net/blog/2012/08/01/a-critical-review-of-ecmascript-6-quasi-literals/">Quasi Literals</a> könnten auch einfache Library-Funktionen sein und überhaupt hätten wir nichts gegen etwas mehr Zurückhaltung bei der Einführung von neuer Syntax. Sinnvoller finden wir da schon die neuen Syntaxen für z.B. <a href="http://www.2ality.com/2012/07/esnext-classes.html">Klassen</a> und <a href="http://www.peterkroener.de/ecmascript-6-block-scope-und-konstanten/">Konstanten</a>, aber generell ist weniger mehr. Peter geht auch davon aus, dass die ES-Macher noch rechtzeitig zur Vernunft kommen.</dd>
<dt>[00:20:33] <a href="http://mcc.id.au/blog/2012/08/supports">Support for @supports in Firefox Nightly</a></dt>
<dd>Ist das Ende von JS-Polyfills nahe? Mit der <a href="http://dev.w3.org/csswg/css3-conditional/#at-supports">@supports-Regel</a> können CSS-Autoren den Browser fragen, ob sie eine CSS-Deklaration verstehen und dann entsprechend darauf reagieren. Die Idee finden wir summa summarum ganz großartig. Der Firefox legt nun mit seiner Implementierung vor, <a href="https://twitter.com/frivoal/statuses/231101124298547200">doch auch Opera arbeitet dran.</a> Ein weiteres mögliches Feature für die Zukunft, die <a href="http://www.xanthir.com/blog/b4Jp0">color()-Funktion</a>, steifen wir auch.</dd>
<dt>[00:31:27] <a href="http://gigaom.com/2012/08/06/microsoft-webrtc-w3c/">Microsoft commits to WebRTC – just not Google’s version</a></dt>
<dd>Der Artikel, der Anlass zu diesem Thema ist, enthält nicht viele Informationen, aber das was da ist reicht, um Peter fragen zu lassen: „können wir uns WebRTC an die Backe schmieren?“ Die pluginfreie VOIP-im-Browser-Technologie (s. <a href="http://www.webrtc.org/">webrtc.org</a> + <a href="http://gigaom.com/2012/08/06/microsoft-webrtc-w3c/">dieser umfassender Talk von Googles diesjähriger Entwicklerkonferenz</a>) will jetzt auch Microsoft unterstützen, macht aber das von &lt;video&gt; und &lt;audio&gt; bekannte <a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)#Video_format_support">Codec-Fass</a> auf. Statt sich auf einen Codec zu einigen sei es ja viel besser für den Endnutzer, wenn er die freie Wahl hätte. So wie ihr bei ihrem Stromanbieter! Wir sind nicht alle komplett von dieser Argumentationskette überzeugt.<br />
<br />
<img src="http://i.imgur.com/qaAAH.jpg" alt=""></dd>
</dl>
<h3>[00:45:19] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://prismjs.com/">Prism</a></dt>
<dd>Lea Verou hat den bei Dabblet.com verwendeten Syntaxhighlighter geopensourced.</dd>
<dt><a href="http://vimeo.com/mobilism/videos">Mobilism’s Videos</a></dt>
<dd>Reinziehen, lernen!</dd>
<dt><a href="http://gridster.net/">gridster.js</a></dt>
<dd>jQuery-Plugin für rekonfigurierbare Grid-Layouts.</dd>
<dt><a href="https://github.com/lipka/piecon">Piecon</a></dt>
<dd lang="en">A tiny javascript library for dynamically generating pie charts in your favicons.</dd>
<dt><a href="https://github.com/davidrapson/scss-toolkit">SCSS-Toolkit</a></dt>
<dd>Auf <a href="http://smacss.com/">SMACSS</a> basierendes Toolkit für SCSS.</dd>
</dl>


Mit dem seltenen Überraschungsgast Peter starten Rodney und Hans in eine neue
Revision voller Spiel, Spaß und Abenteuer!


[00:00:10] NEWS

MYSQL 5.6.6 IST DA

Mit memcached an Bord!


SCHAUNOTIZEN

[…

Mit dem seltenen Überraschungsgast Peter starten Rodney und Hans in eine neue
Revision voller Spiel, Spaß und Abenteuer!


[00:00:10] NEWS

MYSQL 5.6.6 IST DA

Mit memcached an Bord!


SCHAUNOTIZEN

[00:00:40] NEUE SYNTAX IN ECMASCRIPT 6

Die nächste Version von JavaScript wird allerlei neue Syntax einführen, wovon
Nicholas C. Zakas ein großer Teil ganz und gar nicht gefällt. Rodney und Peter
stimmen in diesem Chor voller Inbrunst ein. Fat Arrows machen, wenn überhaupt,
nur in CoffeeScript Sinn, Quasi Literals könnten auch einfache
Library-Funktionen sein und überhaupt hätten wir nichts gegen etwas mehr
Zurückhaltung bei der Einführung von neuer Syntax. Sinnvoller finden wir da
schon die neuen Syntaxen für z.B. Klassen und Konstanten, aber generell ist
weniger mehr. Peter geht auch davon aus, dass die ES-Macher noch rechtzeitig zur
Vernunft kommen.

[00:20:33] SUPPORT FOR @SUPPORTS IN FIREFOX NIGHTLY

Ist das Ende von JS-Polyfills nahe? Mit der @supports-Regel können CSS-Autoren
den Browser fragen, ob sie eine CSS-Deklaration verstehen und dann entsprechend
darauf reagieren. Die Idee finden wir summa summarum ganz großartig. Der Firefox
legt nun mit seiner Implementierung vor, doch auch Opera arbeitet dran. Ein
weiteres mögliches Feature für die Zukunft, die color()-Funktion, steifen wir
auch.

[00:31:27] MICROSOFT COMMITS TO WEBRTC – JUST NOT GOOGLE’S VERSION

Der Artikel, der Anlass zu diesem Thema ist, enthält nicht viele Informationen,
aber das was da ist reicht, um Peter fragen zu lassen: „können wir uns WebRTC an
die Backe schmieren?“ Die pluginfreie VOIP-im-Browser-Technologie (s. webrtc.org
+ dieser umfassender Talk von Googles diesjähriger Entwicklerkonferenz) will
jetzt auch Microsoft unterstützen, macht aber das von <video> und <audio>
bekannte Codec-Fass auf. Statt sich auf einen Codec zu einigen sei es ja viel
besser für den Endnutzer, wenn er die freie Wahl hätte. So wie ihr bei ihrem
Stromanbieter! Wir sind nicht alle komplett von dieser Argumentationskette
überzeugt.




[00:45:19] KEINE SCHAUNOTIZEN

PRISM

Lea Verou hat den bei Dabblet.com verwendeten Syntaxhighlighter geopensourced.

MOBILISM’S VIDEOS

Reinziehen, lernen!

GRIDSTER.JS

jQuery-Plugin für rekonfigurierbare Grid-Layouts.

PIECON

A tiny javascript library for dynamically generating pie charts in your
favicons.

SCSS-TOOLKIT

Auf SMACSS basierendes Toolkit für SCSS.

Revision 83: ECMAScript 6, @supports, WebRTC

<p>Diesmal trafen sich Schepp, Hans, Kahlil und Special Guest <a href="http://anselm-hannemann.com/">Anselm Hannemann</a> zum wöchentlichen Webdev-Geplänkel im virtuellen Working Draft Studio (Skype).</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:40] <a href="http://css-tricks.com/a-discussion-about-css-reusability/">Discussion about CSS reusability</a></dt>
<dd>Wir nehmen Chris Coyiers Artikel zum Anlass, um über unsere CSS-Wiederverwendungstaktiken zu reden.</dd>
<dt>[00:17:05] <a href="http://notes.xoxco.com/post/27999787765/is-it-time-for-password-less-login">XOXOCO &#8211; Is it time for the password-less login?</a></dt>
<dd>Der Autor beschwert sich über die Usability bei Logins und stellt einen neuen Ansatz vor. Wir sprechen darüber.</dd>
<dt>[00:24:25] <a href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#script-interfaces--experimental">Content Security Policy</a></dt>
<dd>Ein neuer Header für HTTP für mehr Sicherheit.</dd>
<dt>[00:30:40] <a href="http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html">Troy Hunt: Lessons in website security anti-patterns by Tesco</a></dt>
<dd>Eine australische Großhandelskette erlaubt sich auf ihrer eCommerce-Webseite jeden erdenklichen Security-Patzer. Wir nehmen das zum Anlass um über Security best practices zu reden.</dd>
<dt>[00:45:40] <a href="http://binaryjs.com/">BinaryJS &#8211; Realtime binary streaming for the web using websockets</a></dt>
<dd>Eine node library um Daten binär zu streamen. Schepp erklärt warum das toll ist.</dd>
<dt>[00:53:00] <a href="http://kahlil.co/2012/07/28/Separate-var-Statements/">Separate var statements</a></dt>
<dd>Kahlil schrob einen Artikel darüber warum er separate var Statements in JavaScript bevorzugt und jeder sagt mal was seine Lieblingsformatierung zur Variablendeklaration in JS ist.</dd>
</dl>
<h3>[01:05:50] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://dailyjs.com/2012/07/26/mvstar-3/">Backbone.js: Hackers Guide Part 2</a></dt>
<dd>Der zweite Teil einer Artikelreihe über die Innereien von Backbone.js</dd>
<dt><a href="http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/">Journey Through The JavaScript MVC Jungle</a></dt>
<dd>Ein hervorrangender Artikel von Addy, der bei der Suche nach dem richtigen MVC Framework in JavaScript sehr hilfreich sein kann.</dd>
<dt><a href="http://www.karlgroves.com/2012/07/26/selling-accessibility-negative-factors/">Selling Accessibility &#8211; Negative Factors</a></dt>
<dd>Karl Groves spricht über Schmackhaftmachung von Accessibility.</dd>
<dt><a href="http://robots.thoughtbot.com/post/28143948206/my-wife-is-getting-really-into-whiskey">My wife is really getting into whiskey</a></dt>
<dd>Ein interessantes Interview mit Ben Alman.</dd>
<dt><a href="http://www.robinsloan.com/summer-reading/and-programming/">Summer Reading&#8230;and Programming</a></dt>
<dd>Eine interaktive Buchrezension mit JavaScript Konsole</dd>
<dt><a href="http://insidrrr.com/">insidrrr &#8211; Offenes Kompetenznetzwerk für interaktive Medien</a></dt>
<dt><a href="http://colognejs.de/">Cologne.js</a></dt>
<dt><a href="http://braincamp-cologne.com/">BrainCamp Cologne</a></dt>
</dl>


Diesmal trafen sich Schepp, Hans, Kahlil und Special Guest Anselm Hannemann zum
wöchentlichen Webdev-Geplänkel im virtuellen Working Draft Studio (Skype).


SCHAUNOTIZEN

[00:00:40] DISCUSSION ABOUT C…

Diesmal trafen sich Schepp, Hans, Kahlil und Special Guest Anselm Hannemann zum
wöchentlichen Webdev-Geplänkel im virtuellen Working Draft Studio (Skype).


SCHAUNOTIZEN

[00:00:40] DISCUSSION ABOUT CSS REUSABILITY

Wir nehmen Chris Coyiers Artikel zum Anlass, um über unsere
CSS-Wiederverwendungstaktiken zu reden.

[00:17:05] XOXOCO – IS IT TIME FOR THE PASSWORD-LESS LOGIN?

Der Autor beschwert sich über die Usability bei Logins und stellt einen neuen
Ansatz vor. Wir sprechen darüber.

[00:24:25] CONTENT SECURITY POLICY

Ein neuer Header für HTTP für mehr Sicherheit.

[00:30:40] TROY HUNT: LESSONS IN WEBSITE SECURITY ANTI-PATTERNS BY TESCO

Eine australische Großhandelskette erlaubt sich auf ihrer eCommerce-Webseite
jeden erdenklichen Security-Patzer. Wir nehmen das zum Anlass um über Security
best practices zu reden.

[00:45:40] BINARYJS – REALTIME BINARY STREAMING FOR THE WEB USING WEBSOCKETS

Eine node library um Daten binär zu streamen. Schepp erklärt warum das toll ist.

[00:53:00] SEPARATE VAR STATEMENTS

Kahlil schrob einen Artikel darüber warum er separate var Statements in
JavaScript bevorzugt und jeder sagt mal was seine Lieblingsformatierung zur
Variablendeklaration in JS ist.


[01:05:50] KEINE SCHAUNOTIZEN

BACKBONE.JS: HACKERS GUIDE PART 2

Der zweite Teil einer Artikelreihe über die Innereien von Backbone.js

JOURNEY THROUGH THE JAVASCRIPT MVC JUNGLE

Ein hervorrangender Artikel von Addy, der bei der Suche nach dem richtigen MVC
Framework in JavaScript sehr hilfreich sein kann.

SELLING ACCESSIBILITY – NEGATIVE FACTORS

Karl Groves spricht über Schmackhaftmachung von Accessibility.

MY WIFE IS REALLY GETTING INTO WHISKEY

Ein interessantes Interview mit Ben Alman.

SUMMER READING…AND PROGRAMMING

Eine interaktive Buchrezension mit JavaScript Konsole

INSIDRRR – OFFENES KOMPETENZNETZWERK FÜR INTERAKTIVE MEDIEN

COLOGNE.JS

BRAINCAMP COLOGNE

Revision 82: Wiederverwertbarkeit von CSS & Web Security

<p>Dieses mal waren Schepp, Hans, Kahlil und Special Guest <a href="http://twitter.com/bkastl">Benedikt Kastl</a> am Start um den Webkram der letzten Woche zu besprechen. </p>
<h3>[00:00:25] News</h3>
<dl>
<dt><a href="http://www.campaignmonitor.com/blog/post/3769/a-designers-guide-to-outlook-2013">Outlook 2013</a></dt>
<dt><a href="http://www.golem.de/news/packaged-apps-offline-apps-fuer-den-desktop-mit-webtechnik-bauen-1207-93292.html">Offline Apps für den Desktop mit Webtechnik</a></dt>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:30] <a href="http://benvinegar.github.com/seamless-talk/">Seamless iFrames</a></dt>
<dd>Wir sprechen über Ben Vinegars Vortrag über Seamless iFrames und erklären was das ist.</dd>
<dt>[00:14:40] <a href="http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/">How we learned to leave default font-size alone and embrace the em</a></dt>
<dd>Die Filament Group erzählt wie sie am liebsten Font Sizes deklarieren und wir auch.</dd>
<dt>[00:28:40] <a href="https://hacks.mozilla.org/2012/07/html5-web-applications-and-libraries-survey-first-results/">HTML5 Web applications and libraries survey</a></dt>
<dd>Wie sehen Mobilentwickler Schwerpunkte bei Plattformen und Frameworks? Und was für Schlüsse kann man daraus ziehen?</dd>
</dl>
<h3>[00:39:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://oscargodson.github.com/EpicEditor/">EpicEditor &#8211; An embeddable JavaScript Markdown editor</a></dt>
<dt><a href="http://socialitejs.com/">Socialite.js</a></dt>
<dt><a href="http://lab.hakim.se/forkit-js/">Forkit.js</a></dt>
<dt><a href="http://generatedcontent.org/post/27398344690/ninja-montage">Montage and Ninja are here &#8211; destroy/dstorey</a></dt>
<dt><a href="http://dailyjs.com/2012/07/19/mvstar-2/">DailyJS: Backbone.js: Hacker&#8217;s Guide</a></dt>
<dt><a href="http://coding.smashingmagazine.com/2012/07/18/12-commandments-software-localization/">I18N</a></dt>
<dt><a href="http://www.guido-muehlwitz.de/2012/07/mysql-datenbanken-abgleichen/">MySQL Datenbanken abgleichen mit Toad > Datenbanken > MySQL, Synchronisation</a></dt>
<dd>Alternativ geht das auch mit <a href="http://www.dswsoft.com/sqlbalance.php">SQLBalance for MySQL</a></dd>
<dt><a href="http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/">Latency: The New Web Performance Bottleneck &#8211; igvita.com</a></dt>
<dt><a href="http://2012.inspireconf.com/">Inspire Conference | Leiden, The Netherlands | 9th &#8211; 12th December 2012</a></dt>
</dl>
<p>Die Soundeffekte dieser Folge stammen von Mike Koenig, via <a href="http://soundbible.com">soundbible.com</a>.</p>


Dieses mal waren Schepp, Hans, Kahlil und Special Guest Benedikt Kastl am Start
um den Webkram der letzten Woche zu besprechen.


[00:00:25] NEWS

OUTLOOK 2013

OFFLINE APPS FÜR DEN DESKTOP MIT WEBTEC…

Dieses mal waren Schepp, Hans, Kahlil und Special Guest Benedikt Kastl am Start
um den Webkram der letzten Woche zu besprechen.


[00:00:25] NEWS

OUTLOOK 2013

OFFLINE APPS FÜR DEN DESKTOP MIT WEBTECHNIK


SCHAUNOTIZEN

[00:01:30] SEAMLESS IFRAMES

Wir sprechen über Ben Vinegars Vortrag über Seamless iFrames und erklären was
das ist.

[00:14:40] HOW WE LEARNED TO LEAVE DEFAULT FONT-SIZE ALONE AND EMBRACE THE EM

Die Filament Group erzählt wie sie am liebsten Font Sizes deklarieren und wir
auch.

[00:28:40] HTML5 WEB APPLICATIONS AND LIBRARIES SURVEY

Wie sehen Mobilentwickler Schwerpunkte bei Plattformen und Frameworks? Und was
für Schlüsse kann man daraus ziehen?


[00:39:40] KEINE SCHAUNOTIZEN

EPICEDITOR – AN EMBEDDABLE JAVASCRIPT MARKDOWN EDITOR

SOCIALITE.JS

FORKIT.JS

MONTAGE AND NINJA ARE HERE – DESTROY/DSTOREY

DAILYJS: BACKBONE.JS: HACKER’S GUIDE

I18N

MYSQL DATENBANKEN ABGLEICHEN MIT TOAD > DATENBANKEN > MYSQL, SYNCHRONISATION

Alternativ geht das auch mit SQLBalance for MySQL

LATENCY: THE NEW WEB PERFORMANCE BOTTLENECK – IGVITA.COM

INSPIRE CONFERENCE | LEIDEN, THE NETHERLANDS | 9TH – 12TH DECEMBER 2012

Die Soundeffekte dieser Folge stammen von Mike Koenig, via soundbible.com.

Revision 81: Seamless Iframes, relative Fontgrößen und ein Berg Links

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 92: Firefox, Fullscreen API und Thinkin‘ Tags

Working Draft

Revision 91: Konferenzen und HiDPI Bilder

Working Draft

Revision 90: .mobi-Gate, Persona und TypeScript

Working Draft

Revision 89: Mobile, Frameworks, iOS 6

Working Draft

Revision 88: Opus Codec, hot CSS Specs und Bower

Working Draft

Revision 87: Position Sticky

Working Draft

Revision 86: CAS und Object.observe

Working Draft

Revision 85: Konferenzen, CSS und Twitter

Working Draft

Revision 84: jQuery, Git, Informationsverwaltung und jede Menge Links

Working Draft

Revision 83: ECMAScript 6, @supports, WebRTC

Working Draft

Revision 82: Wiederverwertbarkeit von CSS & Web Security

Working Draft

Revision 81: Seamless Iframes, relative Fontgrößen und ein Berg Links

Working Draft