Working Draft

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 die verschiedenen, letzten Oktober in einem Video gezeigten Text(um)fluss-Möglichkeiten in CSS umgesetzt werden könnten. Nicht gerade einfach.

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 <div>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: es nimmt dieselben Befehle wie Canvas entgegen, setzt sie aber hintenrum in WebGL um. Der Sinn des Ganzen? Performance! WebGL-Zeichenoperationen sind zu 100% grafikkartenbeschleunigt und vor allem wenn es um Sprites und Texturen geht deutlich performanter. Eindrucksvoll demonstriert das ein Versuch von Jeff Muizelaar: Drawing Sprites: Canvas 2D vs. WebGL. Mozilla OpenWebApps Als letztes Thema nehmen wir uns Mozillas OpenWebApps-Spezifikation/API zur Brust. Sinn des Ganzen soll sein, Webapp-Entwicklern einen Werkzeugsatz an die Hand zu geben, mit dem sie ihre Webanwendungen mit einem Installer versehen und in einem selbstgebauten App-Store feilbieten können. KEINE Schaunotizen Blur-Radius explained Wie die Browser Unschärfen wie die von box-shadow oder text-shadow berechnen. D3 Wie jQuery, nur nicht für das HTML-Dokument, sondern für Rohdaten. Damit lassen sich diese in eine wunderschöne Form pressen und darstellen. Why Hover Menus Do Users More Harm Than Good Warum Hovermenüs i.d.R. nur abnerven. Und darüber, was ein Hovertunnel ist. Why do lints warn about using parseInt without a radix? Was alles passieren kann, wenn man den zweiten Parameter, die Basiszahl bei parseInt weglässt. Dazu passend: JavaScript Garden JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language. Undo.js Ein Framework zum Ablegen und Zurückspulen von Arbeitssschritten.

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 aus den eigenen Reihen 70 Mitarbeiter abgestellt hat. Zudem reicht man auch auch neue Standardisierungvorschläge ein, wie etwa die Tracking Protection oder die Web Timing Specification. Nachtrag vom 03.03.2010: Daniel Melanchthon zum selben Thema bei der t3n im Videointerview (mit ein paar mehr Infos zu der JavaScript-Engine als bei uns).

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 <ul>– und <hr>-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 <html>-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.