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

Working Draft

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

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


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

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

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


SCHAUNOTIZEN

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

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

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

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

[00:28:50] RESPONSIVE WERBUNG

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

[00:50:43] FIREFOX 11

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

[01:01:28] OPEN SOURCE DATA

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


[01:15:25] KEINE SCHAUNOTIZEN

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

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

SCROLLPATH

Ein jQuery Plugin zum einfachen definieren von eigenen Scroll-Pfaden

JAVASCRIPT EXTREMOPTIMIERUNGSSPORT

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

Revision 63: Responsiver Content, Firefox 11 und Offene Datenquellen

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


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


SCHAUNOTIZEN

[00:00:56] ADOBE SHADOW

Luxuriöses Re…

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


SCHAUNOTIZEN

[00:00:56] ADOBE SHADOW

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

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

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

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

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

[00:35:33] MIT DER GESAMTSITUATION UNZUFRIEDEN

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

[00:51:10] WIR SENDEN LIVE!

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


[00:53:44] KEINE SCHAUNOTIZEN

SASS VIDEO TUTORIALS

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

UDACITY.COM

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

LEAST

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

FANTOMAS ICON FONT GENERATOR

Erzeugt Icon-Fonts auf Knopfdruck.

CUTTER.JS

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

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

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


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


SCHAUNOTIZEN

[00:00:12] HTML5 PLEASE API

Zielgerichte…

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


SCHAUNOTIZEN

[00:00:12] HTML5 PLEASE API

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

[00:12:16] BOOT TO GECKO

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

[00:23:22] PHP 5.4.0 IST DA

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

[00:31:32] NEUE IMAGE REPLACEMENT TECHNIKEN

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

[00:45:44] SQL.JS

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

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

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



 * Thomas Flad
 * Torben Leuschner
 * Ingo van Peeren

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


[00:59:07] KEINE SCHAUNOTIZEN

ANSELM’S WEEKLY WEBLINKS

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

ANDROID X86

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

BASKET.JS

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

VENDOR-PREFIXED CSS PROPERTY OVERVIEW

Alle gevendorprefixten CSS-Eigenschaften aller Zeiten.

MAPBOX

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

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

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


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


SCHAUNOTIZEN

[00:00:18] ADOBE ED…

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


SCHAUNOTIZEN

[00:00:18] ADOBE EDGE PREVIEW 4

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

[00:10:49] AKTUELLE NEUERUNGEN IN WEBKIT

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

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

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

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

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

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

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

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

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


[01:08:40] KEINE SCHAUNOTIZEN

WHATFONT TOOL

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

OVERTHROW: AN OVERFLOW POLYFILL FOR RESPONSIVE DESIGN

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

ANDROID MEASURING STICK

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

CHAPLIN

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

HTML5 GAME DEV NEWS

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

Revision 60: Adobe Edge, Web Components & Informationsquellen

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


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

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


SCHAUNOTIZEN

[00:02:40] MOZILLA DEVELOPER NETWORK

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

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

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

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

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

[01:04:25] GIT TOWER

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

SUBLIME TEXT 2

Der aktuell trendigste Texteditor für Webentwickler.

GESAMMELTE ERKENNTNISSE UND THESEN

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

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

Revision 59: Wie ticken Webentwickler?

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


SCHAUNOTIZEN

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

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

SCHAUNOTIZEN

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

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



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

[00:28:30] MUSINGS ON PREPROCESSING

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



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

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

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

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

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

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

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

[01:14:22] REMOTE TILT

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

[01:20:17] MULTIMEDIATREFF 29

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


[01:24:12] KEINE SCHAUNOTIZEN

SHAREJS

Etherpad (und mehr) in JS/Node.

CSS3 TEST

Was kann dein Browser?

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

Es soll ja Leute geben, die das machen.

ADDY OSMANIS TALK ÜBER SKALIERBARES JAVASCRIPT

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

JAVASCRIPT JABBER

Neuer JS-Podcast

MUSIC FOR PROGRAMMING

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

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

Ganz viele Podcasts für Programmierer.

BETTER JS WITH COFFEESCRIPT

Warum CoffeeScript das Haus rockt.

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

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

Revision 63: Responsiver Content, Firefox 11 und Offene Datenquellen

Working Draft

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

Working Draft

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

Working Draft

Revision 60: Adobe Edge, Web Components & Informationsquellen

Working Draft

Revision 59: Wie ticken Webentwickler?

Working Draft

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

Working Draft