Working Draft

Heute hat sich Schepp mit Hans Christian Reinl, alias @drublic hingesetzt, und zusammen haben wir recht viel schöne Kleinigkeiten für Euch ausgegraben. Schaunotizen [00:01:40] Developer Tools in Firefox Aurora 10 Etwas, das Rodney und Peter in der letzten Woche versäumt haben, holen wir diesmal nach: Wir werfen einen Blick auf die neuen in Firefox zukünftig integrierten Entwicklertools. Unserer Meinung nach ein guter Start, der aber weiter ausgebaut werden muss, da Firebug in eine nicht mehr ganz so rosige Zukunft blickt und dringend Ersatz braucht. [00:12:40] DOM Improvements Nachdem zunächst überhaupt erst einmal ein Gremium aus dem Boden gestampft wurde, das beim W3C für die Standardisierung und Fortentwicklung des DOM-Zugriffs zuständig ist, gibt es nun einen ersten Vorstoß, neuen DOM-Methoden zu spezifizieren. Während des Gesprächs schweifen wir zum Thema interne Arbeitsweise der jQuery-Selectorengine Sizzle ab. [00:23:21] Evolving ECMAScript Auch Microsoft bringt ein paar Vorschläge für neue Methoden, allerdings für JavaScript. Sehr sinnvoll. [00:33:13] Verlustlose Kompression und Transparenz für Google WebP Spätestens jetzt wird WebP zum Alleskönner, da es in seiner neusten Version bei Bedarf verlustfrei komprimieren kann, Animationen lernt, und obendrein auch mit Transparenz auftrumpft. Dabei sprechen wir u.a. kurz über das gescheiterte Bildformat APNG und wieder mal über mögliche Lösungswege für responsive Bilder. [00:46:12] Viele neue APIs Es erscheinen immer mehr Working Drafts für APIs für den Hardwarezugriff. So etwa ganz frisch von Nokia ein Vorschlag zu einer Vibration API. Chrome und Firefox warten demnächst mit der Gamepad API auf. Und Opera, Chrome und Firefox verfügen bald alle über Zurgriff auf die Webcam oder das Mikrofon. Federführend ist in diesem Bereich die Device APIs Working Group, und auch Mozilla ist da stark hinterher, bis Ende des Jahres alle APIs fertig zu haben. Wegen Boot to Gecko. [00:55:42] Cross Fading, CSS Flexible Box, Grid Layout, Filters and Meta Referrer WebKit setzt wieder ein paar nette Dinge um, nämlich das neue Flexbox-Model, CSS Shader, Bild-Überblendungen in CSS oder ein meta-Element des Types „referrer“, das die Privatsphäre schützt. [01:06:06] Responsive Advertising Mark Boulton spricht den Punkt an, dass zwar unsere Seiten immer „responsiver“ werden, nicht aber die Werbung und deren Vermakrtungskonzept. Also schlägt er mal was vor. [01:15:03] Keine Schaunotizen CSS3 Adventskalender Wie letztes Jahr bringen Sven Wolfermann und Heiko Stiegert auch dieses Jahr wieder einen Adventskalender vollgepackt mit CSS3-Tricks, bei dem allerlei Gastautoren mit von der Partie sind und es sehr hochkarätige Preise zu gewinnen gibt. Orchestra.io PHP Deployment System, das mit Github arbeitet. SmashingMagazine Meetup #3 with Paul Irish and Stuttgart GTUG Am 21.12. findet in Stuttgart das dritte Smashing Magazine Meetup statt, mit Paul Irish und Chris Heilmann. Meldet Euch an!

Minutiös auf die Revision 48 abgestimmt, ließ der liebe Marc Thiele diesen Montag (sowie Sonntag und Dienstag) die beyond tellerrand 2011 vom Stapel. Und was sollen wir sagen? Sie war verdammt nochmal exzellent! Das Lineup war der Hammer und übertraf alle Erwartungen. Stop Motion Opening Sequence der beyond tellerrand 2011 Und weil so viele unserer Hörer und Gäste diese Mutter aller Konferenzen besuchen wollten, entstand die Idee, die hiesige Revision dann auch direkt dort aufzunehmen. Yeah, Baby! Gäste waren Anselm Hannemann, Frederic Hemberger, Marc Hinse, Hans Christian Reinl, Sven Wolfermann, Rodney Rehm und Maik Wagner. Aber auch David Maciejewski von der Technikwürze war auch vor Ort, so dass man sagen kann: Dies war die erste mit der Technikwürze zusammen koproduzierte Working Draft Revision! Ein großes Dankeschön geht außerdem an Dank Rodney Rehm, dem wir zwei saugeile Funkmikrofone verdankten! Working Draft 48 auf YouTube Schaunotizen beyond tellerrand 2011 Wir beginnen damit, den Workshoptag am Sonntag und den ersten Tag der Konferenz, den Montag, zu rekapitulieren. Nach circa 10 Minuten stößt die Speakerin Naomi Atkinson zu uns, mit der wir über Ihren tollen Vortrag „Going Beyond“ sprechen, und über die Tatsache, dass wir Deutschen aufgrund unserer Sprachbarriere zu sehr im eigenen Saft schmoren. Im Anschluss führen wir die anfangs begonnene Konferenz-Rekapitulation zu Ende. Keine Schaunotizen beyond tellerrand Videos Hier erscheinen in den kommenden Tagen die Videoaufzeichnungen aller Talks.

Während Schepp sich von der Release-Party seines Forks erholte und Markus am Ereignishorizont eines schwarzen Internet-Lochs festhing, trümmerten Peter und Rodney Rehm zu zweit die fällige Revision ein. Schaunotizen [00:00:34] Working Draft bei Google Plus Seid dabei und kreist uns ein! [00:01:10] Firefox 8 Firefox 8 bietet neben verbesserter Performance und einer Reihe von Bugfixes ein Update für Web Sockets, eine erste Implementierung von FileReaderSync, sowie die Möglichkeit HTML5-Kontextmenus zu definieren. Letzteres ist aber so dermaßen defekt, dass man lieber zu Rodneys jQuery-Polyfill greift. Außerdem will man die eh nicht verwenden, weil die nur verwirren. Anlässlich der Performance-Frage schweifen wir in Richtung Externe-Scripts-sind-die-Pest-Rants ab (Werbung ist am schlimmsten) und kommen zum Schluss: die 2-Klick-Methode von Heise sollte man jenseits aller Facebook-Paranoia allein schon aus Performance-Gründen verwenden. [00:25:10] Firefox Aurora 10 Firefox Aurora 10 ist raus und hat 3D-Transforms, Load- und Error-Events auf Stylesheets, die Battery API, die Fullscreen API und vieles mehr an Bord. [00:29:06] jQuery soll wieder schlanker werden jQuery findet sich zu dick und will abnehmen. Ist das wirklich nötig? Warum nicht gleich Microframeworks verwenden, z.B. mit Ender? Letztlich wohl eine Frage der persönlichen Präferenz. Außerdem: Sollte man Code lieber undokumentiert oder gar nicht veröffentlichen? [00:51:00] Keine Schaunotizen Shapecatcher Shapecatcher ist ein Unicode-Zeichen-Finder nach dem Malen-nach-Zahlen-Prinzip. Mag.js sucht Autoren Das JavaScript-Magazin Mag.js sucht Autoren. Ruhm und Ehre sind eimerweise in Aussicht.

Nach gefühlten Ewigkeiten waren mal wieder alle festen Hosts beieinander. Und noch jemand war da, nämlich Haymo Meran, CTO und Mitbegründer des Wiener Unternehmens Gentics und vor allem geistiger Vater des HTML5 Aloha Richtext Editors. Schaunotizen [00:02:14] jQuery 1.7 released Eine neue jQuery-Version wurde auf die Welt losgelassen, die die neue Methoden on und off für das Eventmanagment einführt, delegierte/gebubbelte Events schneller macht und nicht zuletzt ein HTML5 innerShiv Polyfill von Haus aus integriert. [00:14:33] Sisyphus.js – Gmail-like client-side drafts and bit more Ein sehr praktisches jQuery-Plugin, das Formulareingaben vor dem expliziten Absenden vor Verlust schützt. Peter findet es in dem Zusammenhang jedoch schade, dass so viele Tools auf jQuery bauen, obwohl es eigentlich gar nicht nötig wäre. [00:26:13] CSS Media Queries Einige kleinere Geschichten, nämlich einsetzende Ernüchterung einerseits und ein schöner Trick andererseits, welche diese Woche zu CSS Media Queries über den Äther gingen, sind für uns der Anlass, über Responsive Web Design im Allgemeinen zu reden. [00:42:13] Sencha Offline Web Apps Workshop Position Paper James Pearce von Sencha nutzte die diesjährige W3C Technical Plenary / Advisory Committee Meetings Week, kurz TPAC, um den W3C Theoretikern mal klar zu machen, was für ein Stück dampfender Bockmist der HTML5 App Cache aktuell ist. [00:55:33] Aloha Editor – HTML5 WYSIWYG Editor Haymo erzählt uns ein wenig was zum Aloha Editor, einem WYSIWYG/Richtext Editor der ein anderes Implementierungskonzept verfolgt als etwa TinyMCE oder der CKEditor. Dieses fußt nämlich auf HTML5 und so könnte man Aloha eigentlich auch als contenteditable-Polyfill einstufen. [01:19:52] Keine Schaunotizen Node v0.6.0 Node.js ist in der Version 0.6 erschienen und zum ersten Mal nativ für Windows erhältlich. Hurray! h5ai – a beautified Apache index Mit h5ai kann man das Browsen durch Apache Verzeichnis Indizes optisch um einige Lichtjahre in die Zukunft katapultieren. Schaut selbst.

Frostig war es draußen, und Vollmond womöglich auch, als sich Schepp mit Marc Hinse, aka @MadeMyDay, und Hans Reinl, aka @drublic und Frontendentwickler aus Freiburg, ans virtuelle Kaminfeuer setzte und mit ihnen zusammen die Woche revuepassieren ließ. Schaunotizen [00:00:50] Broadway: An H.264 Decoder in JavaScript Running at 30fps Endlich hat jemand mit Emscripten einen H.264-Polyfill gebaut, und zwar auf Basis des quelloffenen Android C++ H.264-Decoders. Läuft derzeit nur in Firefox mit aktivierter Type Inference, aber es ist ein Schritt in die richtige Richtung! Auf GitHub liegt das Projekt, ein Video davon in Aktion gibt es auch. [00:08:40] WHATWG Weekly: Now it’s <time> for <data> Dem Hixie ging das <time>-Element seit July volles Pfund auf die Eier. Also hat er es aus der WHATWG HTML5 Spec gekickt und als Ersatz das generische <data> vorgeschlagen. Nun laufen alle Amok und betreiben #occupyhtml5. Eric Eggert hat die Fakten mal zusammengesammelt. Und Jeremy Keith hat das Ganze in Worte gekleidet. [00:24:10] Announcing the jQuery Standards Team Weil Spec-Editoren und Browserhersteller kaum weiter entfernt von der Webworker-Praxis sein könnten, Webworker aber bislang in den Gremien weder eine Lobby, noch brauchbaren Zugang zu den Entwicklungsprozessen hatten, haben sich die jQuery-Macher gedacht: „Das muss sich ändern!“ Mit „jQuery“ als Vehikel sollen von diesem Standards Team Vorschläge aus der Community gesammelt, destilliert und in die Gremien eingebracht werden. Jeder darf mitmachen! [00:34:55] Displaying hidden elements like <head> using CSS In dieser Woche stolperten wir über dieses nicht ganz brandneue Thema, dass man ja auch Elemente aus dem HTML-Kopfbereich sichtbar und sich zunutze machen kann. Möglicherweise brotlose Kunst, aber geil! [00:49:44] Umatchedstyle CSSOff CSSOff ist ein mit großem Trommelwirbel angekündigter CSS-Wettbewerb. Da wir uns alle Drei dafür angemeldet haben, tauschen wir uns darüber natürlich aus. [01:12:05] Keine Schaunotizen The Node Toolbox AaaLLE Node.js-Erweiterungen, die es überhaupt gibt. In einem sortierten Katalog. Na gut, vielleicht nicht alle. Aber fast. Vimeo Musicstore Vimeo vertreibt seit dieser Woche kostenlos nutzbare, wie auch gegen einen kleinen Obulus nutzbare Musiktracks zum Hinterlegen von Video oder (CSS-)Animationen. Useful Coding Tools and JavaScript Libraries For Web Developers Wieder mal ein umfassender Rundumschlag durch die Welt der neuen Webservices und Tools für Webentwickler. Animatable: A CSS transitions gallery CSS-Guru-esse Lea Verou hat sich das Thema CSS Transitions vorgenommen und ein Showcase animierbarer Elementeigenschaften aufgesetzt.

Was wir lange wollten, haben wir diesmal geschafft: Den Sven Wolfermann, auch bekannt als @maddesigns aus der Nähe von Berlin endlich mal in unsere Sendung einzuladen. Leider ist uns in dem Zusammenhang die Tonqualität wieder mal etwas entglitten. Sorry dafür. Schaunotizen [00:00:00] Additional HTTP Status Codes Die Internet Engineering Task Force hat sich überlegt, dass die Welt neue HTTP-Statuscodes braucht. Welche das sind und wofür die gut sind (oder auch nicht), darüber sinnieren wir. [00:00:00] RequireJS 1.0 released Wir schauen uns den JavaScript-Loader namens RequireJS anlässlich seines finalen Releases an und besprechen, welche Probleme es lösen soll und wie man es einsetzt. [00:00:00] More fun using the Web, with getUserMedia and native pages! Eine Labs-Version des Opera Browsers wartet mit Webcam- und Mikrozugriff, vor allem aber mit einer Teilimplementation des CSS Generated Content for Paged Media Modules auf. Dazu noch folgender Link: http://people.opera.com/howcome/2011/reader/index.html [00:00:00] PimpMyJS Ein Frontend für den JavaScript/Node.js-basierten JavaScript-Minifizierer und -Verschönerer UglifyJS, der übrigens auch in den Chrome Dev Tools steckt. Webservice hier: http://marijnhaverbeke.nl/uglifyjs [00:00:00] TYPO3 4.6 Release Notes TYPO3 4.6 ist erschienen und Sven erzählt uns, was es Neues kann! [00:00:00] Keine Schaunotizen CSS Term Poster (PDF) Ein Cheatsheet mit den korrekten Bezeichnungen der CSS-Syntax-Elemente. Animate.css Eine Sammlung fertiger CSS Animationen als Drop-in-Lösung CSS3 Mobile Pack for Adobe® Fireworks® CS5 Ein Exporter von Fireworks zu CSS3.

Diesmal nur zu zweit, da Markus derzeit den Status „homeless“ und damit „wireless“ innehat. Schaunotizen [00:00:17] Fronteers 2011 Schepp war bei der diesjährigen Fronteers Konferenz in Amsterdam und erzählt, wie er es fand. Videos der Talks trudeln nach und nach auf Vimeo ein. Web DevCon 2011 Peter hingegen war als Speaker auf der Web DevCon in Hamburg eingeladen, und fand sie nerdiger vor als gedacht. Seine Entdekung dort: Der Aloha Editor. [00:24:36] Image Fallbacks and Annotations: the ‘image()’ notation Auf der Fronteers präsentierte Tab Atkins Jr. Ideen der W3C CSS Working Group, und davon waren besonders interessant: Image Fallbacks and Annotations: the ‘image()’ notation, Using Elements as Images: the ‘element()’ function, Overriding Image Resolutions: the ‘image-resolution’ property und die Media Fragments. [00:39:02] Die Syntax der linearen Verläufe hat sich geändert! Anstatt wie bisher mit einem Richtungswort zu definieren, wo ein Verlauf startet, gibt es bald womöglich die Syntax „to“ + Richtungswort, die dann festlegt, wo er hinläuft. Wir fragen uns, was das für Konsequenzen auf bisherigen Code haben könnte. [00:50:35] Dart: Structured Web Programming Google hat nun endlich Dart vorgestellt. Und nicht nur Peter ist unterwältigt. Wofür könnte man Dart genau brauchen? [01:07:03] 16 Pixels for Body Copy. Anything Less is a Costly Mistake Wir nehmen diesen Artikel zum Anlass, uns hinsichtlich Schriftgrößen auf Webseiten auszutauschen. Der Artikel meint: Minimum 16 Pixel! Gerne mehr. [01:14:10] Keine Schaunotizen The JavaScript Show Sehr netter, wöchentlich erscheinender Podcast, in dem Peter Cooper und Jason Seifer neueste Funde in Sachen JavaScript präsentieren. Incredibly Useful CSS Snippets Nur die besten CSS-Code-Snippets liegen auf dieser Seite bereit, um von Euch per Copy & Paste geräubert zu werden. Das ist 1A Ware! HTML Component Model & the Shadow DOM Ein Umfassender Artikel Jake Archibalds rund um die Web Components und das Shadow DOM, mit denen sich in Zukunft neue, fehlende HTML-Elemente definieren und erzeugen lassen.

Schaunotizen [00:00:44.000] You may soon be developing for 76 browsers. Paul Irish sagt eine Zukunft voraus, in der wir für 72 Internet Explorer entwickeln werden. Das liegt dann angeblich an der 10-Jahre-Support-Regelung von Microsoft. [00:19:39.000] Web technologies need an owner Joe Hewitt (Firebug-Entwickler und einst bei Facebook) meint, dass das Web doomed ist und wir einen Diktator brauchen. [00:39:50.000] SMACSS – A Scalable and Modular Architecture for CSS Regeln für ordentliches CSS. [00:54:42.000] CSS shaders Selbstprogrammierte Shader-Effekte auf normale HTML-Elemente anwenden. [01:04:50.000] Ein Award Und wir sagen nicht, worum es geht. [01:09:05.000] Multimediatreff in Köln Hinfahren! Keine Schaunotizen Stripe.com Peerbind git-dude cdnplanet.com Streetview mit jQuery

Und noch einmal bekamen wir Verstärkung von Rodney Rehm. Wir waren ganz schöne Quatschlieseln, aber es ist auch ganz schön was bei herumgekommen. Schaunotizen [00:00:26] setImmediate API Mit dem IE10 erblickt die setImmediate API das Licht der Welt und soll dabei helfen, rechenintensives JavaScript zu segmentieren. Für alle anderen Browser gibt es einen sehr cleveren Polyfill. [00:11:03] Exclusive preview of the hottest CSS specs Divya Manian gibt in dem Artikel Ausblick auf 13 zukünftige CSS-Specs. Von denen habe nwir uns die heißesten Kandidaten herausgepickt, nämlich Compositing und CSS Filters, und haben sie diskutiert. Außerdem streifen wir thematisch das Flexbox-Polyfill Flexie.js. [00:25:15] CSS Variables Nicht mit in der Liste standen die CSS Variablen, zu denen es seit neustem einen Editor’s Draft gibt und die noch dieses Jahr in Chrome landen sollen. [00:36:55] Die wahren Probleme von HTML5 Polyfills: HTML5 shim und das Ende des 3 Schichten-Modells (Teil 1) Alexander Farkas, und vor allem Peter finden: Die neuen semantischen HTML5-Elemente sind überflüssiger bzw. gefährlicher Ranz. Als Randnotiz ließ Peter http://html5accessibility.com/ fallen. [00:52:30] Datenschutztheater Peter echauffiert sich über Politik. Ganz allgemein. Und für rund 2:25 min… :) [00:55:55] Beanstandungsfreier Betrieb von Google Analytics ab sofort möglich Alles nur ein Vorgeplänkel für unsere Gedanken rund um die Wiederlegalisierung von Google Analytics… [01:12:15] Kauder will Internet-Entzug …und unser Kopfgeschüttele zu Siegfried Kauders Idee, den Lausbuben das Internet wegzunehmen. Und schwups, ist das WLAN-Kabel weg, so! [01:14:21.000] Keine Schaunotizen Cubic Bezier Ein Werkzeug, um benutzerdefinierte CSS3 Animationskurven zu erstellen und live zu testen A Farewell to CSS3 Gradients Plädoyer für mehr SVG-Grafiken anstelle von CSS3 Gradients cwebgl – WebGL stack in javascript Ein WebGL-Polyfill, der rein auf Canvas und JavaScript aufsetzt, aber auch mit Java und Flash kann. HTML Muncher Python Werkzeug, das in einer Gruppe von zusammenhängenden HTML-, CSS- und JavaScript-Dateien, Klassen- und ID-Namen, sowie Verweise dazu platzsparend verkürzt. ImageAlpha Ein Mac-Tool, um 24-Bit-Farbe-8-Bit-Transparenz-PNGs nach 8-Bit-Farbe-8-Bit-Transparenz-PNGs zu wandeln. jquery.inview Ein jQuery-Plugin, das das Event „inview“ nachrüstet, das immer dann feuert, wenn ein damit belegtes Element in den Viewport scrollt. Tinkerbin Tinkerbin ist vergleichbar mit jsfiddle, kann neben HTML, CSS, JS aber auch CoffeeScript, Sass (+ Compass), Less, HAML and weitere Metasprachen.

Diese Revision war der gruseligste Aufnahmetrip seit Podcast-Gedenken: Erst streikten bei unserem ersten Gast Rodney Rehm aka @rodneyrehm reihum alle Aufnahmegeräte, dann zerhackte uns das verf$%%/§%?!te Skype nach 45 Minuten Aufnahme auf einmal so den Ton, dass wir vom anderen rein gar nichts mehr verstanden und die Aufnahme abbrechen mussten. Die brachten wir am Folgetag mit weniger massiven Problemen zu Ende. Dass von den daraus resultierenden Störgeräuschen und Pausen nix mehr zu hören ist, haben wir der geduldigen Puzzlearbeit unseres zweiten Gastes, Frederic Hemberger aka @fhemberger zu verdanken. Großes Danke dafür! Schaunotizen [00:03:44] Flexbox is Dead, Long Live Flexbox! Die Spec zur CSS3 Flexbox wurde frisch über den Haufen geworfen. [00:18:25] W3C Conditional Rules Die W3C CSS Conditional Rules sind sowas wie Modernizr nur in nativ. Außerdem kann man Dank @document pfadabhängig stylen. [00:24:25] WebSocket binary message support Websockets unterstützen neuerdings auch die Übertragung von Binärdaten. Damit lässt sich allerhand anstellen. [00:30:00] JPEG 2000 on the Web Und wieder hat jemand Emscripten angeschmissen und was cooles transpiliert: Einen JPEG 2000 Dekoder in JavaScript. Und auch über MediaSource Extensions sprachen wir. [00:41:27] Help The Community: Report Browser Bugs Ein Plädoyer dafür, dass man Browserbugs unbedingt sauber untersuchen und sie den Herstellern melden soll. [00:48:12] Mobile Web: Taiwan, Opera and WebOS Paul Rouget gibt einen Einblick in die Welt Asiens, was die Nutzung des Internets angeht. [00:59:33] Octopress – A blogging framework for hackers Frederic hat sich Octopress in der letzten Zeit genauer angesehen und berichtet uns über seine Erfahrungen damit. [01:04:07] Smarty – PHP Template Engine Erst letztens erfuhren wir, dass Rodney in das Smarty-Projekt involviert ist und heftig an der Version 3.1 mitgebaut hat. Da waren wir ganz neugierig, was es dort Neues gibt! [01:33:42] Keine Schaunotizen Ready Set Raphael Ein SVG nach Raphael.JS Converter Die Node.js Knockout Gewinner Die Sieger des Wettbewerbs haben mit Node ein paar sehr krasse Sachen zusammengedübelt. Unbedingt anschauen. imgmin Ein sehr effektiver JPEG-Kleinschrumpfer für die Kommandozeile. Frontend Conf Zürich Videos Videos der gerade zu Ende gegangenen Frontend Conf Zürich 2011. Tolles Zeug dabei! Besonders empfehlenswert: CSS3 Secrets: 10 things you might not know about CSS3 von Lea Verou.