Working Draft

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

Als Gast war diesmal wieder Frederic Hemberger am Start, der uns immer gerne mit seinem Fachwissen zur Seite steht. Wir möchten auch noch einmal auf unseren Live-Stream und den IRC-Chat auf Freenode im Channel #workingdraft hinweisen. Wir sind immer montags ab 20 Uhr live, wenn nicht anders angekündigt. Die neusten Infos gibt’s immer auf Twitter und bei Google+. Schaunotizen [00:00:18] JavaScript Styleguides Addy Osmani befasst sich mit Programmierrichtlinien in JavaScript. Er führt dabei idiomatic.js, den jQuery Core Style Guide und viele weitere Best Practices an, die wir diskutieren. Hans hat über seine persönlichen Richtlinien in HTML und CSS einen Post geschrieben. Außerdem sprechen wir über Ben “Cowboy” Almans Blogpost zum Thema var-Deklarationen. [00:19:00] Barrierefreiheit und die Beschwerdekultur im Internet Domingos de Oliveira findet es schade, dass Accessibility-Experten sich aufregen, wenn Webseiten nicht perfekt zugänglich sind; sie sollten lieber mal die Dinge loben, die überhaupt gemacht werden. Marco Zehe gibt mit seinem MMT Talk einen guten Einblick, was es für Sehbehinderte Menschen bedeutet, Barrierefreiheit zu genießen. [00:35:20] A Step for Open Sharing: AddThis Integrates Web Intents Zum Thema Web Intents: Was ist das eigentlich? Und nutzt das jemand? AddThis integriert Web Intents mit Fallback und schreibt darüber. Sieht vielversprechend aus! [00:44:28] Keine Schaunotizen Videos vom MMT29 So langsam gehen die Videos vom MMT 29 in Köln online. Hier findet ihr zum beispiel Peters. The Web Platform: Browser Technologies Schöne Übersicht über die einzelen Specs, Caniuse/MDN-Links, etc. Die neue Git-Homepage GitHub hat eine neue Präsentationswebseite mit Dokumentation für Git erstellt. Node WebKit Agent Die WebKit Developer-Tools für Node. Backbone.js CRUD Application Eine Single-Page CRUD Application mit Backbone.js und Twitter Bootstrap. Bessere Performance mit element.classList Mr. Paul Irish zeigt, wie man die Performance von bspw. Animationen mit element.classList drastisch verbessern kann. Cross-Browser Fullscreen API Sindre Sorhus hat einen Wrapper für die Fullscreen API gebaut, der auf allen browsern funktioniert, die die Fullscreen API supporten. G+-Zirkelteiler mit nur JS-Menschen Für alle, die noch nicht genug Leute eingekreist haben.

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.

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.

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.

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

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.

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.

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 heißesten Scheiß 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!

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.