Revision 17: A/B-Test, Animationen, Canvas und WebGL

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.