Working Draft » Podcast Feed

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.

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!

Schaunotizen [00:00:28] Silbentrennung landet im Firefox Wir reden darüber, warum es höchste Zeit und vor allem unabdingbar ist, dass unsere Browser Silbentrennung lernen, auch wenn es Krücken wie den Hyphenator gibt. Im Firefox (Nightly) nun anwendbar per -moz-hyphens:auto-Anweisung auf dem silbenzutrennenden Text. [00:07:06] Neuerungen in jQuery 1.6 Die neue jQuery-Version (übrigens eine der letzten mit John Resig im Team), beherrscht einige schöne Neuerungen wie die Nutzung von requestAnimationFrame und die Bereitstellung der holdReady-Methode. Es wurde jedoch auch die Funktionalität der bisherigen attr-Methode verändert und Aufgaben an die neue prop-Methode abgegeben. Das kann beim einem simplen Auswechseln der Basis-Bibliothek zu einigen Problemen führen. [00:11:32] jquery.com uses only 34% of jQuery Michael Bolin, ein Google Closure Tools Spezialist, hat mit Hilfe eines selbsterstellten Firefox-Addons namens jsBloat herausgefunden, dass in den meisten Fällen bestenfalls ein Drittel des in jQuery enthaltenen Codes zur Ausführung kommt. Die restlichen zwei Drittel könnten ohne Auswirkungen entfernt werden. Ungenutze Code-Teile kann man mit dem Advanced mode des Google Closure Compilers Herausoptimieren lassen. [00:19:06] JavaScript Semicolon Insertion – Everything you need to know Dieser Artikel zeigt, dass man in JavaScript (respektive ECMAScript) eigentlich fast überall die Semikola weglassen könnte, so man denn bestimmte Dinge beachtet. Wir reden darüber, ob wir das sinnvoll finden. [00:26:20] traceur-compiler – Google’s vehicle for Javascript Language Design Experimentation Traceur ist ein JavaScript-Transpiler, der es heute schon erlaubt, mit dem JavaScript von morgen, nämlich JS.next, herumzuspielen. Der Transpiler wandelt den JS.next Code in heute verfügbares JS um. Sinn und Zweck der Sache ist dass Entwickler frühzeitig Input und Feedback aus der Praxis zum gerade entstehenden JS.next-Standard zurückliefern können. [00:37:16] RewardJS Bei RewardJS handelt es sich ausnahmsweise mal nicht um eine JavaScript-Bibliothek, sondern um ein Belohnungssystem für JavaScript-Entwickler, die Bugs in gebräuchlichen Bibliotheken reparieren. Dazu wird jeden Monat eine neue Kampagne lanciert, die sich ausschließlich um eine bugbehaftete Bibliothek dreht. Täglich, wöchentlich und monatlich werden dann Sachpreise für fleissige Crowdsourcer ausgelobt. [00:42:59] Measure Page Load Time with Site Speed Analytics Report Google erweitert sein Analytics Tracking um die Fähigkeit, Ladezeiten mitzutracken. Das neue Feature ist jedoch nicht von Haus aus aktiv, sondern muss explizit per _gaq.push(['_trackPageLoadTime']); angeschmissen werden. Von da an misst es bei stichprobenartig ausgewählten Besuchern die Seitenladezeit mit Hilfe der W3C Navigation Timing API in IE9 und Chrome, respektive der Google Toolbar in den anderen Browsern. Die Daten lassen sich anschließend in Zusammenhang setzen mit den bekannten Filtermöglichkeiten wie “Welche Unterseite, Browser, Geolocation, etc.” Wem Google Analytics nicht liegt, der kann zu diesem Zweck auch auf Yahoo! Boomerang zurückgreifen. Keine Schaunotizen [00:49:33] Microjs Ein Verzeichnis von JavaScript Microframeworks für jeden Einsatzzweck. [00:50:10] CSS Piffle Ein schön gemachtes CSS3-Autorenwerkzeug. [00:50:45] HTML Email Boilerplate Eine hervorragende HTML/CSS-Code-Basis für den vollkommen verminten Bereich des Cross-Client-kompatiblen HTML-Newsletter-Baus. [00:51:35] humans.txt Analog zur robots.txt soll eine humans.txt als gute Gepflogenheit beim Webseitenbau etabliert werden. Der Zweck dieser Datei ist derselbe wie die Abspänne bei Filmen: Die Mitarbeit jedes Beteiligten nebst Nennung seines Arbeitbereichs ausweisen. Selbst Google nutzt mittlerweile eine humans.txt [00:52:33] 70+ Beispiele für mobile Websites Tilman Ockert hat eine sehr inspirierende Sammlung für mobile Endgeräte optimierter Benutzeroberflächen zusammengestellt. Es handelt sich dabei sowo[...]

Heute zu Gast bei uns: Dirk Jesse aus Berlin, Autor des HTML+CSS-Frameworks YAML. Und zu viert haben wir unsere bisher beste und längste Sendung hingequatscht. Schaunotizen SPDY on Google servers? Wer Chrome verwendet, nutzt Googles geplanten HTTP-Nachfolger SPDY (gesprochen “Speedy”) schon jetzt ohne es zu wissen. Google nutzt das neue Protokoll in Chrome im Zusammenspiel mit all ihren Services! Mobile Website oder Web-App? Wir philosophieren über die Frage, wann sich eine HTML5-Seite wohl besser als native App getarnt und wann sie lieber ehrlich und mit eigener CI auftreten sollte (wie etwa Basecamp). Es geht bei unserem Gespräch um Best-Pratices, um Geschmäcker, um Fanboytum und nicht zuletzt um die Wurst. The JavaScript Disruption Herr Rodger meint: JavaScript ist nicht nur dem Spielzeugstatus von früher entwachsen, nein, es wird zur dominierenden Sprache der aktuellen Dekade avancieren. Grundsätzlich gehen wir d’accord, wollen uns aber nicht ganz so weit aus dem Fenster lehnen wie er. Und Peter möchte Euch gerne sein Buch Coders at Work empfehlen. Webshims Lib Die HTML5-Polyfill-Sammlung von Alexander Farkas ist insofern besonders, als dass sie HTML5-Lücken nicht irgendwie schließt, sondern so, dass auch alle damit verbundenen JavaScript-APIs in Originalform emuliert werden. Das erlaubt es, heute schon mit den vorgesehenen Befehlen zu arbeiten, so dass Polyfills jederzeit zugunsten echten HTML5s herausfallen können. Suche in Chrome per type=search anmelden Wer für seine seitenspezifische Suche ein input-Element mit dem Typen “search” verwendet, der bringt den Chrome Browser automatisch dazu, sich diese “Suchmaschine” dauerhaft zu merken. It’s a mad, mad, mad, mad manimation Andy Clarke, Jünger des hardboiled Webdesigns, demonstriert an einem Animationsprojekt, welches Vorgehen er sich unter dem Begriff “abgebrüht” vorstellt. Wir reden darüber, ob das Vorgehen genial ist, ob es eher ein “Progressive Enhancement” oder eine “Graceful Degradation” darstellt, oder ob Andy Clarke vielleicht doch nur eine faule Socke ist und die guten alten “Optimiert für”-Zeiten wieder da sind. Was denkt Ihr? Lauft in dem für Kommentare gekennzeichneten Bereich zu dem Thema gerne Amok. Keine Schaunotizen Handling javascript errors on production websites Kleine Library, mit der man sich jegliche JavaScript-Fehler, denen die User begegnen, an den Server schicken lassen kann. Patternify Ein CSS Hintergrundmuster Generator. The Cicada Principle and Why It Matters to Web Designers Tutorial, das zeigt, wie man mit mehreren Hintergrundbildlayern und einer speziellen, an Primzahlen orientierten Anordnung nahezu unendlich weit laufende und dennoch sich nicht sichtbar wiederholende Hintergründe baut. Lost and Taken Textur Galerie Eine Sammlung wunderschöner Oberflächentexturen zur freien Nutzung sowohl im privaten wie auch im kommerziellen Kontext. Fuel Fuel is a simple, flexible, community driven PHP 5.3 web framework based on the best ideas of other frameworks with a fresh start.

Irgendwie hat sich die Veröffentlichung der zwanzigsten Folge etwas hingezogen. Jetzt ist sie aber da und ist bereit, sich mit brachialer Gewalt in eure Trommelfelle zu fressen. Schaunotizen border-image-Generator Hilfsmittel zum Slicen von Bildern zum Zwecke des border-image-Anwendens HTTP-Archive Statistiken über die im Web genutzten Techniken, Download-Massen und Ladezeiten dynaTrace Ajax Edition 3.0 Next Generation Browser Diagnostics JSConsole.com JavaScript-Konsole vorwiegend zum Remote-Debuggen mobiler Websites. Erklärbär-Video AmplifyJS jQuery-Plugin, welches localStorage, sessionStorage und serverseitige Speicherung über Ajax unter einen Hut bringt und ordentlich wegabstrahiert. Keine Schaunotizen Google Pagespeed Online Pagespeed mit Webinterface myJS Extrem minimales und auf Performance getrimmtes JavaScript-Framework Tempo Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. HTML5-Boilerplate Mobile Mobile Version des Starterkits

Diese Woche haben wir uns kompetente Unterstützung von Andreas Dantz aus Bremen gesichert. Schaunotizen Barcamp Ruhr 4 Andreas und Schepp hatten beide das Vergnügen, am Wochenende dem vierten Barcamp Ruhr in Essen beizuwohnen. Beide geben einen kurzen Überblick, was ein Barcamp ausmacht, was für Vorträge geboten wurden und was das Unperfekthaus in Essen so besonders macht. Firefox 4 ist da! Firefox 4, oder kurz: der fx4, ist endlich released und verbreitet sich sich rasend schnell. Und wir finden ihn alle richtig gut. Über die Technik würden wir gerne nochmal in einer Schwerpunktsendung mit Chris Heilmann sprechen. Der hatte auch schon zugesagt, kann sich aber gerade nicht mehr erinnern. Daher, liebe Hörer: Schiebt ihn bitte mal mit an, sonst lässt er uns noch als Stalker einbuchten :) HTML5-Handbuch Stefan Münz hat im Prinzip eine Art inoffiziellen Nachfolger seiner SelfHTML-Bücher herausgebracht, und zwar sein HTML5 Handbuch. Gleichzeitig gibt es das gesamte Buch aber auch online. Im Kontrast zu Peters Buch lässt Stefan Münz den JavaScript-Part bewusst aus und konzentriert sich auf Markup und CSS. Außerdem mit inklusive sind HTML 1 – 4.01 und CSS 1.0 – 2.1. Native webcam support and orientation events Eine Vorabversion des Opera bringt die neuste Fassung der Device-API mit, mit Hilfe derer man Webcams, Mikrofone und ähnliches aus dem Browser heraus anzapfen kann. Außerdem kennt das window-Objekt ein neues Orientation-Event, das auslöst, sobald das Gerät um mehr als 90 Grad gedreht wird. Cache Manifest Validator Sehr praktisches Online Werkzeug, mit dem man ein HTML5-Appcache Cache-Manifest von oben bis unten durchchecken lassen kann. Vorbei ist also das Stochern im Nebel, wenn der Appcache mal wieder nicht macht, was er soll. Gibt es auch per Textmate-Bundle und zum Forken auf Github. IE9 MIME-Handling Change: text/css Der IE9 zieht die Daumenschrauben in Sachen Kleinkariertheit an und akzeptiert keine Stylesheets mehr, die nicht mit dem MIME-Typ “text/css” ausgeliefert werden. Dass das kein Bug des IE9 ist, sondern ein Sicherheitsfeature, und wie man den IE9 als Serverbetreiber zum Schutz seiner Besucherschaft auch bei JavaScript in einen solchen Modus bringen kann, erläutert alles ein Blogpost im IE-Blog. Illuminations for Developers … ist eine kostenpflichtige Erweiterung eines der Firebug-Programmierer für, ähm naja, Firebug. Sie filtert einem aus der Seite in einem separaten Firebug-Tab alle Widget-Elemente der großen JavaScript-UI-Frameworks ExtJS, Dojo Toolkit, SproutCore, qooxdoo, YUI3, Closure Library, und jQueryUI heraus. Dort listet es deren Bestandteile, Werte und Methoden übersichtlich auf. Von großem Wert für alle, die viel Webapps mit so Frameworks bauen und die sie effektiver debuggen wollen. CSS Pivot Mit diesem Online-Werkzeug kann man einer bestehenden Seite eigene Styles hinzufügen und das Ergebnis als Link weitergeben. Gut zum Brainstormen oder um Kunden Facelifting-Vorschläge zu unterbreiten oder um Ideen innerhalb des Teams auszutauschen. Ceaser CSS Easing Animation Tool Ein weiteres Online-Werkzeug, mit dem man völlig frei Animationskurven mit Hilfe einer Bezierkurve und zwei Anfassern zurechtziehen kann, und das einem zum Schluss den dazu passenden fertigen CSS-Transition-Code ausspuckt. Targeting mobile-optimized CSS at Windows Phone 7 Die mobilen Fassungen der IEs auf Windows Phone 7 haben eigene maßgeschneiderte Conditional Comments erhalten, mit denen sich die altbekannten Browserweichen auch auf mobilen Seiten realisieren lassen. Keine Schaunotizen context-blender Kleines Tool, mit dem man Bilder in einer Canvas ähnlich wie in Photoshop die Ebenen ineinanderblenden kann. Don’t Trust IE9′s Document Modes Auch wenn es eigentlich nichts Neues ist: Die Emulationen älterer IE-Renderer im IE9 per Document Mode sind nicht originalgetreu, eignen sich also nicht zum Testen. CSS Regions Module Adobe hat endlich einen Working Draft veröffentlicht, der beschreibt, wie d[...]

Nachdem wir die Sendung letzte Woche aufgrund weniger Themen und AKW-dominierter Nachrichtenlage haben ausfallen lassen, so haben wir uns diesmal den Cem Derin, alias @unset, als Co-Moderator an Bord geholt. Der eine oder andere kennt Cem vielleicht von seinen wöchentlichen Berichten zur Schräglage der Nation in Form des Shitstorm Podcasts. Schaunotizen Wallaby – Convert Adobe Flash FLA files into HTML and reach more devices Wie der Titel schon impliziert, hat Adobe in seine Labs ein neues Werkzeug gestellt, mit sich FLA-Kompositionen in HTML5 und Co umwandeln lassen. Das läuft aber offenbar noch nicht ganz so rund, so dass es durchaus richtig ist, es in den Adobe Labs zu belassen. Dennoch begrüßen wir den Ansatz. Und wir erinnern uns an Tools wie Gordon (Demos) und Smokescreen. Scoped Styles in HTML5 Bei den Scoped Styles geht es darum, eine Möglichkeit zu haben, Subsektionen im HTML-Dokument mit einem anderen Stylesheet zu stylen als den großen Rest. Nützlich in Webmail-Clients zur Darstellung von E-Mails, für fremdeingebettete Inhalte und für WYSIWYG-Editoren. Derzeit nirgends nativ implementiert, bei Mozilla und Webkit aber am fernen Horizont zu sehen, und jetzt schon in Form eines jQuery-Plugins nutzbar. A function for detecting if the browser is in a given media mode Kleine nützliche Funktion von Nicholas Zakas, mit der in JavaScript man prüfen kann, welche CSS3 Media Queries gerade zutreffen. Also etwa so: if(isMedia("screen and (orientation:portrait)"){machwas();} weinre – Web Inspector Remote It’s a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone. Das sagt im Prinzip schon alles. Man startet lokal einen Java-Server, bindet ein JavaScript in die auf dem Mobilgerät zu debuggende Seite ein und startet dann auf seinem Desktop den Ferndebugger, der alles kann, was der klassische Webkit Web Inspektor kann – nur dass das Anschauungsobjekt eben im Mobilgerät liegt. Internet Explorer 9 Network Performance Improvements Das Blogpost von Microsoft finden wir deswegen interessant, weil wir dort ein paar schöne Statistiken zum Verhältnis Wartezeit und Ausführungszeit beim Laden von Seiten an die Hand bekommen. Und es bekräftigt, dass die Optimierungskette sehr lang ist, bis man an den Punkt kommt, an dem man seine CSS-Selektoren oder JavaScripte bis ins letzte optimieren muss. Apple handcuffs ‘open’ web apps on iPhone home screen Wir reden darüber, warum Apple seine JavaScript Engine Nitro nur im Safari aktiviert und nicht in den Home Screen Webapps und in den Safari-nutzenden nativen Apps. WideImage und Imagine Wir stellen zwei sehr praktische Bildmanipulationsframeworks für PHP vor, die vom Resizen über Beschneiden, Rotieren, Spiegeln, Entfärben bis hin zum Maskieren alles bieten, was das von der GDLib gepeinigte Herz begehrt. Twitters veränderte API-Richtlinien Wir reden darüber, was die Beweggründe für Twitters pünktlich zum 5. Geburtstag ausgegebenen strammen neuen API-Richtlinien sein können. Und wir überlegen, ob wir das gut oder schlecht finden. Keine Schaunotizen When is a stylesheet really loaded? Wie man herausfinden kann, wann ein Stylesheet fertiggeladen wurde. iScroll 4 Kleines JavaScript, mit dem man s mit overflow: scroll in mobilen Webkits mit einem Finger scrollbar machen kann. NowJS Framework, mit dessen Hilfe Datensätze gleichzeitig von einem Node.js-Server und clientseitig von JavaScript bearbeitbar werden.

Nach ganzen vier(!) Wochen des krankheitsbedingten Ausfallens haben wir uns endlich den Peter wieder in die Sendung zurückgeholt. Das war auch dringend erforderlich, denn bedingt durch unsere letztwöchige Sondersendung haben sich bei uns furchtbar viele interessante Themen angesammelt, die in Augenschein genommen werden mussten. Die Themenflut hatte zudem zur Folge, dass wir besonders rigoros sieben mussten. Da wir dieses Material nicht ganz unter den Tisch fallen lassen wollten sind im Gegenzug unsere KEINE Schaunotizen sehr umfangreich geworden. Also unbedingt mal durchscrollen! Schaunotizen requestAnimationFrame for smart animating Der Befehl requestAnimationFrame steckt in neueren WebKits wie auch im Firefox 4 und soll in Zukunft als Animationsgerüst/-prinzip die bisherigen Krücken setTimeout und setInterval ablösen. Warum jetzt genau “Krücken”? Weil beide eher unkoordiniert und hysterisch Browser-Repaints erzeugen. requestAnimationFrame hingegen arbeitet umgekehrt und gibt sozusagen “Bescheid” wenn der Browser wieder Luft und Lust hat, etwas zu animieren. Nur dann werden Animationsanweisungen abgegeben und die dadurch entstehende ToDo-Liste wird an einem koordinierten Zeitpunkt umgesetzt. Zudem hilft die Methode Strom sparen. Soweit wir das verstanden haben, war Mozilla hier Vordenker. Wir kommen bei dem Thema kurz auf das jquery.animate-enhanced plugin zu sprechen, obwohl es nicht direkt etwas damit zu tun hat. Haben aber gesagt, wir verlinken es dennoch. Optimizely: A/B Testing you’ll actually use Ein tolles und kinderleicht zu bedienendes Onlinewerkzeug, mit dem man im Browser Abwandlungen seiner zu testenden Seite erstellen kann. Halt ohne große und schmerzhafte serverseitige Eingriffe. Statt dessen erhält man einen JavaScript-Code, den man in seine Seite einbinden muss, und von da an erhalten Seitenbesucher reihum die verschiedenen Varianten vorgesetzt, und man selbst kann im Optimizely-Panel die Akzeptanzraten in Echtzeit begutachten. CamanJS – JS Image Manipulation Ein supersimpel aufgebautes Framework zur Farbmanipulation von Bildern. Zu diesem Zweck gibt es diverse Filter, die man so im Prinzip auch aus gängigen Bildverarbeitungen kennt: Brightness, Contrast, Saturation oder auch Farbkanalmanipulationen oder Bezier-Farbkurvenanpassung. Darüberhinaus gibt es noch Zusammenstellungen von Filtern und bestimmten Einstellungen, die sogenannten Presets, mit denen man auf einen Schlag einen anständigen Vintage oder Sin City Effekt erhält. Wärend wir über CamanJS reden, stellen wir uns Fragen zur Canvas-Performance bei bewegtem Quellmaterial HTML Timing Bei diesem Projekt geht es darum, das altehrwürdige SMIL-Format auch im Nicht-SVG-Bereich wieder auferstehen zu lassen, um damit verschiedene Elemente einer Seite miteinander zeitlich zu synchronisieren und Ihnen einen geordneten Zeitablauf vorzugeben. Das alles steuert man deklarativ über XML-genamespacedte oder HTML5-data-Attribute, oder wahlweise über ein externes Timesheet. Damit lassen sich sehr einfach zeitgesteuerte Textslides und Bildrotationen erstellen, oder Videos untertiteln. Peter meint sich zu erinnern, dass das Mashi Toolkit und FakeSmile ähnliches bewerkstelligen. WebGL 1.0 ist fertig Der von der Khronos-Group beigesteuerte Standard WebGL wurde finalisiert. WebGL nutzt die HTML5-Canvas, um darin nicht in 2D sondern in 3D herumzupinseln. WebGL ist dabei nichts anderes als OpenGL ES 2.0 mit angeflanschtem JavaScript-Befehlssatz. Wir denken, dass wir uns mit dessen Befehlssätzen wohl eher selten herumschlagen müssen, sondern, wie im klassischen 3D-Bereich auch, wir immer mehr Autorenwerkzeuge für 3D im Web zur Hand bekommen. Zum Bespiel CopperLicht oder PhiloGL. WebGL gibt es im aktuellen Chrome, im kommenden Firefox 4, in einem Snapshot von Opera 11.50, sowie angeblich bald auch im Safari. WebGL-2D Dieses noch im Anfangsstadium befindliche Projekt stellt einen Wrapper von klassischem 2D-Canvas nach WebGL dar, sprich: [...]

Diese Revision sind wir mal vom gewohnten Kurs abgewichen und haben keine Wochenrückschau, sondern eine Schwerpunkt-Folge für Euch erstellt. Möglich gemacht hat das Daniel Melanchthon, Developer Platform Evangelist bei Microsoft und Fachmann unter anderem für den IE9. Vielen Dank an Daniel, der sich trotz Rückreise-Jetlag kurzfristig abends Zeit für uns genommen hat! Zielrichtung unseres Gesprächs waren die Fragen: Wie denkt Microsoft in Sachen Browser so? Warum ist der IE9 so geworden wie er ist? Wie ist der weitere Entwicklungsweg geplant? Was wünscht man sich von der Webentwicklergemeinde? Schaunotizen Was zeichnet IE9 aus? Wir sprechen über Geschwindigkeit durch Hardwarebeschleunigung (via Direct2D) und die neue JavaScript-Engine “Chakra”, über das verbesserte Schriftenrendering (via DirectWrite), Pinned Site und Site-Mode (wir erinnern uns dabei an die Webslices des IE8), SmartScreen-Filter/Application Reputation, die (vom W3C aufgegriffene) Tracking Protection, die viel Platz lassende Tabanordnung, die Non-Blocking UI, sowie Ähnlichkeiten in dem GUI-Konzept von Firefox 5. Warum werden manche neue Features unterstützt, warum manche nicht? Wir erfahren, dass es unter anderem am offiziellen Reifegrad eines Standards/Moduls liegt, ob entschieden wurde, es zu implementieren oder auch nicht. So hat Geolocation etwa den Status “Candidate Recommendation”, die meisten der von vielen monierten fehlenden Features jedoch noch “Working Draft” Status (nur “CSS3 Border Image” neuerdings nicht mehr). Oder es handelt sich erst gar nicht um einen W3C-Standard, wie bei WebGL. Desweiteren unterliegt Microsoft als Unternehmen weiteren Einflüssen aus dem Corporate-Bereich, welche gerne nach finalen und soliden Standards rufen. Daniel schafft dabei auch nochmal Klarheit hinsichtlich des Entwicklungsablaufs neuer W3C-Spezifikationen und wann die Browserhersteller Hilfestellung durch Implementation geben können. Zu guter letzt ist es auch eine Frage interner Ressourcen und des Shippingtermins. Was denkt Microsoft hinsichtlich der Videocodec-Problematik? Wir reden darüber dass die Situation unbefriedigend ist, dass Microsoft sich aber nicht in der Position sieht, hier mit einer Lösung für die Webentwickler nach vorne zu preschen. Was vor allem daran liegt, dass man keine Lust auf das rechtliche Minenfeld und die gerne gegen Microsoft geführten Klagen hat. Wir erfahren, dass der Patentpool der MPEG LA auch einer möglichen Selbstverteidigung gegen Patenttrolle dient. Und dass Google mit WebM bei weitem nicht auf einem solchen Patent-Bollwerk sitzt. Wird es kürzere Releasezyklen geben? Was kann man tun, um die alten IEs schneller zu verdrängen? Der Abstand zwischen Releases soll wenn möglich weiter schrumpfen. Die Situation in Sachen alter IEs hat sich mittlerweile stark verbessert und anscheinend sind Unternehmen insgesamt updatefreundlicher, wenn sie einmal den Schmerzhaften Schritt weg vom IE6 geschafft haben. Microsoft drückt die Unternehmen zu diesem Schritt wie es nur kann. Webentwickler sollen auch aus Microsofts Sicht nicht mehr viel Zeit auf die alten IEs verschwenden. “Graceful Degradation”/”Progressive Enhancement” lautet hier die empfohlene Devise. Da fällt uns Pirates love Daisies als Beispiel ein. Warum wird das Entwickeln für die vielen IE-Versionen nicht erleichtert? Wir reden darüber, warum Microsoft wohl die Sandboxed-Browser von Spoon.net verhindert. Wir kritisieren die kostenlos erhältlichen Test-Images, weil sie ohne ReArm recht bald das Meckern anfangen. Außerdem laufen sie nicht auf was anderem als Virtual PC. SuperPreview wiederum ist leider nicht interaktiv. Mehr Wissenvermittlung in deutschen Landen? Microsoft plant mehr Wissensvermittlung, Unterstützung und Vorträge im deutschen Raum. Wie das im Detail aussieht, ist noch nicht spruchreif. Engagement im W3C Wir erfahren, dass Microsoft dem W3C nicht nur neue Testsuiten spendiert, sondern dem W3C a[...]

Nachdem Peter immer noch hustengeplagt und Markus anderweitig absent war, freute sich Schepp über bewährte Verstärkung seitens Marc Hinses alias @mademyday (Notiz an uns selbst: Wir sollten Marc bald mal in der Liste unserer festen Moderatoren verankern…). Schaunotizen Is IE9 a modern browser? fragt Paul Rouget von Mozilla und antwortet sodann mit NO. Ihm reicht die unterstützte Menge HTML5-Technologien seitens des Redmonder Browsers nicht. Außerdem fuchst ihn, dass Microsoft mit Statistiken hausieren geht, die sie selbst gefälscht haben. Tim Sneath von Microsoft antwortet ihm: Ein moderner Browser ist schnell und integriert Standards erst wenn sie fertig sind. Performance Innumeracy & False Positives Alex Russel aus dem Chrome Frame Team stellt zur Debatte, ob der moderne und hochangesehene Ansatz des Featuretestings nicht vielleicht zu viel Leistung kostet, und ob man nicht in bestimmten Fällen doch auf das böse, böse, böse und verpönte (und böse) Useragent-Sniffing zusammen mit einer Feature-Whitelist/-Blacklist gehen kann. Damit löst er einen guttenbergesken Shitstorm aus. Dass er (und viele WPO-Granden) falsch liegen, zeigt John-David Dalton mit drei Screencasts aus der Praxis. Use efficient CSS selectors greift sehr humorvoll das Thema Renderleistungseinbruch durch falsches zusammensetzen von Selektoren auf. Den Augenschmerzen beim Betrachten zum Trotz stellten wir fest, dass die Unterschiede doch vergleichsweise gering zu sein scheinen. Wer jedoch gerne viel in jQuery und Konsorten selektiert, der sollte vielleicht nicht ganz so rumschlampen oder klügere Wege wählen. CSS drop-shadows without images Verschiedene Ausprägungen von CSS-Schatten hat Nicolas Gallagher auf seiner Seite versammelt. Das Besondere dabei: Anstatt mit zusätzlichen Hilfselementen im HTML zu arbeiten, feiert er alles über die CSS-generierten Pseudoelemente :before und :after, CSS Transforms und Box-Shadow ab. Überhaupt ist er ein ganz großer Fan von Pseudoelementen. Auf seiner Seite gibt es viel Interessantes zu entdecken. Schön war damals unter anderem auch sein Artikel Multiple Backgrounds and Borders with CSS 2.1 The 80/20 Rule Applied to Web Design Eine gar nicht so neue Regel aus der Betriebswirtschaft, das Pareto-Prinzip besagt, dass 80% der Ergebnisse in 20% der Gesamtzeit eines Projekts erreicht werden, und dass die verbleibenden 20% der Ergebnisse die meiste Arbeit machen. Diese Regel kann man eigentlich auch überall im Web Design wiederfinden. Die Autoren empfehlen daher: Die wichtigen 20% identifizieren und erstmal alle Bemühugen dort hineinstecken als sich zu verzetteln. HARDWRK SSD HDD Adapter Kit für MacBook Pro Tatsächlich, wir reden über Hardware! Muss auch mal sein. Wir hängen ja schließlich alle an ihrem Tropf. HARDWRK ist ein Überraschungscoup des T3N-Teams und zwar ist es ein Einbaukit (Material + Werkzeug), mit dem man den internen DVD-Brenner seines MacBooks gegen eine weitere Festplatte oder eine SSD austauschen kann. Der entmannte Brenner wandern dann in ein externes Gehäuse. Wir empfehlen zu einer SSD zu greifen. Davon kommen zur CeBIT ein paar sehr schnelle raus (die allerdings durch die SATA-300-Schnittstelle des MacBooks ausgebremst werden könnten). Keine Schaunotizen Surefire DOM Element insertion Die bulletproofste™ Methode, DOM-Elemente in sein Dokument zu schießen.

Die große Seuche grassierte wieder. Peter strich die Segel und Schepp griff schon nach der weißen Flagge. Eine Viertel Stunde vor offiziellem Aufnahmetermin holten wir uns dann als Verstärkung wieder Marc Hinse ins Boot. Vielen Dank nochmals dafür! Schaunotizen Breaking the Web with hash-bangs Google sieht das Hashbang als Flickzeug für den Übergang zu eleganteren Lösungen im ajaxifizierten Web. Twitter hat angeblich schon eine Version von #newtwitter, welche die History API nutzt. Wer nun allerdings das Hash-Bang nutzt, der muss auch wissen, was er tut. Und das wissen nicht alle. Wissen wir’s? Windows 7 die Nummer 1 in Deutschland Windows 7 überholt XP, welches eine schöne Abwärtskurve aufweist. Sind die Tage von IE6 und IE7 also gezählt? Sandboxed IE Browsers from Spoon Kurz da und dann schnell wieder weg. Wir bereden die verschiedenen Möglichkeiten, eine IE-Testumgebung zu bauen. PhantomJS Eine skriptbare Webkit-Engine, etwa um Website-Screenshots zu schießen, oder PDFs aus HTML zu erzeugen, oder um Daten per DOM-Selektoren aus Seiten in Textdateien zu extrahieren. Blaze.io: Test Your Website Performance On A Mobile Device Schickes Tool, um Websites in Sachen Ladezeiten auf ihre Mobiltauglichkeit zu checken. Mit Wasserfall und Videoaufzeichnung des Ladevorgangs. Open Sourcing My Genetic Data Genome bei Github. Ein entsprechendes soziales Netzwerk wird von mir, Markus, bald nachgereicht. Keine Schaunotizen EaselJS A javascript library for working with the HTML5 canvas element IE9 on Windows Phone 7 Der Neuner wird auch auf WP7 kommen und löst damit den altertümlichen IE7.5er ab.

Endlich haben wir es geschafft, eine Sprechprobe Marc Hinses auf digitales Vinyl zu pressen. Und die Soundqualität ist auch gar nicht mal komplett scheiße. Schaunotizen Marcs Screen Presenter Screendesigns angemessen dem Kunden präsentieren. Prism is now Chromeless Das Prism-Projekt wird abgeschaltet. Stattdessen soll mit Chromeless ein anderer Ansatz gefahren werden, der zum Beispiel mit Phone GAP vergleichbar ist. Clipboard API Editor’s Draft Schnittstelle für den Umgang mit der Zwischenablage. Zum Verstehen der Funktionsweise hilft es, sich die Drag&Drop-API zu Gemüte zu führen. Web Audio API in Chrome und Firefox 4 Rohdaten aus einem HTML5-Audio lesen und schreiben. Möglich wird damit alles, was man sich vorstellen kann. Es hat auch schon jemand ein paar Filter zusammengekloppt. Abusing HTTP Status Codes to Expose Private Information Einfach prüfen, ob für den Benutzer Inhalte verfügbar sind, die man nur mit Login erreichen sollte. DidYouWatchPorn.com schlägt in eine vergleichbare Kerbe. The New Bulletproof @Font-Face Syntax Eine neue Methode, um den Internetz Explodierer bei @font-face vor’m Explodieren zu bewahren. firecss.com Live-CSS-Firebugging across the universe. Keine Schaunotizen Chrome 11, a renewed XSS Filter and vertical text for multiple-column layouts Unspektakuläre Neuerungen. Farbwert in Opera und dem IE9: invert Wie der Name schon sagt, invertiert der Wert einfach die Farben des Hintergrunds. popcorn.js Framework für HTML5-Video. Beispielhafter Anwendungsfall: Zeitgesteuerte Annotations.

Ausgabe Nummer zwölf mit einem neuen Gast, nämlich Tobias Oberrauch aus Karlsruhe, und spitzen Soundqualität. Yeah! Schaunotizen Peters HTML5-Buch … geht in die zweite Runde. Mit 150 Seiten und 4 Kapiteln mehr als in der ersten Auflage. Neu dabei: Web Workers, File API, HTML5-Featuredetection nebst Polyfills, und Firefox 4 sowie Internet Explorer 9. Eric Meyers CSS Reset 2.0 Wir diskutieren über den Sinn von Resets und Starterpacks à la Boilerplate oder Gerrits Kickstart. CSS-Farbwert currentcolor Nicht vollkommen neu, weil - und -Elemente sowie die border-Eigenschaft es längst anwenden, aber neu entdeckt. Eine Farbeigenschaft, der man die Farbe “currentcolor” zuweist, übernimmt automatisch die Farbe der color-Eigenschaft. Etwa so: .element{color:red;background-color:currentcolor;}. CSS3-Einheit für Schriften: rem Die Einheit bezieht sich immer auf die Schriftgröße des Root-Elements (sprich des -Elements), anstatt auf die des direkten Mutterelements. Das macht das Erstellen von flexiblen Layouts deutlich leichter. Wird von allen modernen Browsern unterstützt. Wir nehmen die Entdeckung als Anlass, über den Sinn relativer Schriftgrade zu diskutieren. Firefox 4 will den Acid3-Test gar nicht bestehen Die fehlenden 3 Punkte sind SVG-Fonts und die sind sowieso blöd. Und nicht mehr Teil des SVG-Kerns, weil sie so blöd sind. Und wir reden über Fontrendering, und zwar viel zu viel. Um davon abzulenken, stiften wir Verwirrung und rühren Kerning, Hinting und Subpixel-Rendering gut durch. IE9 RC1 Geleakter Release Candidate des Internet Explorer 9. Möglicherweise mit Geolocation API. Auf jeden Fall aber mit deutlich mehr Gummipunkten bei html5test.com. Brendan Eich über seine Wunsch-Zukunft für JavaScript Nur für Fans, wie mein Physiklehrer immer sagte. Gibt’s auch als knappes Audio. Auch interessant: Harmony Proxies KEINE Schaunotizen Android 3.0 Platform Highlights Der enthaltene Android Browser wartet mit SVG, HTTP-Streaming, Multicore-Unterstützung und Hardware-Grafikrendering auf. Fein! Mehr dazu von unserer Seite, wenn Honeycomb final ist. Cocos2-javascript Ein weiterer Gamebaukasten auf HTML5 und JavaScript-Basis.

Bei unserer Tonqualität ist es wie beim Google Linkjuice: Zählt man alle Beteiligten zusammen, kommt immer die Zahl 1 heraus. Während Markus nun also THX-Ultra-zertifiziert ist, zerbröselten unserem Gast Nico Brünjes, Frontendentwickler bei ZEIT ONLINE, reihenweise die Headsets unter den Fingern weg :( Schaunotizen W3C HTML5 Logo! Das ansonsten eher langweilige W3C überrascht mit einer Art Promotion-Aktion: Auf einer sehr schicken, modernen Seite präsentiert es ein Logo, das vielleicht von Superhelden, vielleicht von einem 3D-Würfel inspiriert ist. Dazu gibt es einen HTML5-Gummipunkt-Generator und ein T-Shirt. Wir finden’s gut und Nico hat sich direkt das T-Shirt bestellt. HTML is the new HTML5 Die WHATWG denkt die korrekte Namensgebung der HTML-Version-nach-HTML-4.01, formerly known as HTML 5, formerly known as HTML5, konsequent zu Ende und stellt fest: Die HTML-Spezifikation ist permanent im Fluss und macht keinen Halt bei Versionnummern, also weg mit der 5! Ab jetzt heisst die Spezifikation selbst nur noch HTML. Und HTML5 möge neuerdings ein Schlagwort für diejenige Generation Webanwendungen sein, die allem Web-Zwo-Nulligen nachfolgt. JavaScript und CSS als Techniken inklusive. Using CSS Selectors as Fragment Identifiers Der altehrwürdige Eric Meyer und Simon St.Laurent von O’Reilly Media haben einen inoffiziellen Draft online gestellt, in dem sie eine neue Sprungmarker (Fragment) Syntax im CSS-Selektor-Stil vorschlagen. So soll man beispielsweise mit folgender URL direkt zu dem zweiten Absatz einer Seite springen können: http://example.com/lorem.html#css(p:nth-child(2)). Learning from Twitter Dass man selbst mit jQuery noch großen Bockmist bauen kann, haben letzte Woche die Twitter-Programmierer bewiesen. Dumm war, dass sie behauptet hatten, es läge an der neuen jQuery-Version dass Twitter neuerdings so langsam geworden war. Das hat John Resig dazu animiert, sich deren Code genauer anzuschauen, und er hat dabei Grauenhaftes zu Tage gefördert. Hinter dem mobilen Proxy Unser Gast Nico Brünjes schrieb letzte Woche über eine sehr unangenehme Entdeckung, die er und sein Team von ZEIT ONLINE machten: Die mobilen Zugangsprovider manipulieren das HTML, JavaScript und CSS nach gutdünken um, und vor allem stillschweigend. Das geht dummerweise ganz und gar nicht zerstörungsfrei vonstatten. Mozilla plant Do-not-track-HTTP-Header Mozilla und Microsoft planen, den Browser mit einer zusätzlichen Header auszustatten, dem X-Tracking-Choice: do-not-track. Dieser soll immer dann gesendet werden, wenn der Benutzer von Inhalteanbietern nicht getrackt werden will. Das Ganze setzt allerdings voraus, dass die Gegenseite diesen Header auswertet und respektiert. Beim Diskutieren darüber kommt uns die Robinson Liste in den Sinn. Google will es in Chrome hingegen via Browsererweiterung lösen. ARPAgeddon (IPv4 Countdown) Unser Vorrat an IPv4-Adressen geht nun wirklich zur Neige. Knapp über 30 Millionen Adressen sind noch frei, 4,3 Milliarden sind in Gebrauch. Laut ARPAgeddon hält der verbliebene Vorrat noch für etwa eine Woche. Es wird also höchste Zeit, breitflächig auf IPv6 mit seinen 665 Billiarden möglichen IP-Adressen umzusteigen – auch wenn es vielleicht weh tun wird. KEINE Schaunotizen UglifyJS Neuer JavaScript-Minifizierer und -Beautifier (Gegenteil von ersterem), der auf node.js läuft und dadurch doppelt bis fünf mal so schnell arbeitet wie der YUI Compressor oder Googles Closure. Kommt im Gegensatz zu letzterem auch mit eval() und (dem bösen) with{} klar, und verfügt über eine Google Closure kompatible HTTP-API. Steckt auch im kommenden WebKit Webinspector

Für die potenziell sprengsatzhaltige Diskussion um Googles Entscheidung, den H.264-Codec aus Chrome zu entfernen, holten wir uns Gerrit van Aaken mit ins Boot. Wir hoffen, dass die Audio-Qualität langsam in den Bereich des Erträglichen vordringt. NEU und BREAKING: Es gibt jetzt auch mal testweise Kapitelmarken. Bisher leider nur im MP4-Format. Wenn das Feature ankommt und ihr beispielsweise Ogg fordert, kann ich auch das geschehen lassen. Viel Spaß mit der Folge! Schaunotizen HTML Video Codec Support in Chrome Google versetzt dem lizenzbehafteten H.264-Codec einen Hieb und kündigt an, ihn aus Chrome(ium) zu entfernen. Im Rahmen des daran entflammten Shitstorms haben sowohl Gerrit als auch Peter und Markus ein paar Gedanken und Fakten zusammengetragen. Mit diesem Wissen unter dem Arm reden wir über die MPEG LA, Googles Strategie, WebMs Aussichten, die Marktanteile der Browser, Hardware-Support auf mobilen Geräten und erwähnen das GIF-Patent. JavaScript Full Screen API, Navigation Timing and repeating CSS Gradients Fullscreen API wird in Webkit unterstützt werden. Hurra und Yippieh. photoshopetiquette.com Grundregeln für den Umgang mit PSDs beim Screendesign. Insbesondere an die lieben Printler gerichtet. IndexedDB in Firefox 4 Die aktuelle und hoffentlich letzte Beta mit der Nummer 9 führt unter anderem IndexedDB ein. Die Final ist für Ende Februar geplant. Außerdem drin: Harmony Proxies und JavaScript Compartments jQuery 1.5 Beta 1 released Kleinere Verbesserungen, vornehmlich ein Rewrite der Ajax-Funktionalitäten. Dojo 1.6 Release Notes Mit neuem LESS-angetriebenem Theme, einem IndexDB-Storage, Umstellung von dojo-Attributen im Markup à la dojoType auf HTML5-data-Attribute, Performanceverbesserungen in IE6 und 7 (dank einer Analyse des Codes mit dynaTrace) und Dokumentation zur Verknüpfung von Dojo mit RequireJS. What the heck is Shadow DOM? Elemente, die nicht im DOM auftauchen, aber trotzdem irgendwo sein müssen, ja, wo sind die? Im Shadow DOM! Im IE ist es wie so oft ein alter Hut. CSSOM, Vars, Mixins, etc. (=HTML Slides, zu navigieren per Cursortasten) Die immer wieder gewünschten Ermächtigungsgesetze von CSS. Genaugenommen gewünscht seit 1994 (nur anders). Inspiriert von so Frameworks wie LESS oder Turbine. w3fools.com Die geben der dreckigen w3schools.com Saures. Konstruktiver ist das (man kann sagen SEO-)Projekt PromoteJS. CSS3 gradients in Webkit … … werden syntaxmäßig an den Firefox angeglichen. KEINE Schaunotizen …weil wir darüber nicht sprechen konnten oder wollten (ja, wir sortieren knallhart aus!): Mobile Perf Steve Souders hat 2011 zu seinem Jahr der mobilen Performanceoptimierungen ausgerufen. Zum Start hat er dieses Bookmarklet gebaut, mit Hilfe dessen man sich auch in mobilen Browsern ein paar Werkzeuge zum Auswerten einblenden lassen kann. Flash 10.2 beta … bringt das hochinteressante Stage Video.