Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

April 07, 2011 Revision 20: HTTPArchive, dynaTrace und AmplifyJS
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
53 min
March 29, 2011 Revision 19: Barcamp, HTML5 Buch, Device-API und Manifest-Validator
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr
March 29, 2011 Revision 19: Barcamp, HTML5 Buch, Device-API und Manifest-Validator
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[...]
1 hr
March 22, 2011 Revision 18: Scoped Styles, Web Inspector Remote, Bildmanipulation in PHP
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 8 min
March 22, 2011 Revision 18: Scoped Styles, Web Inspector Remote, Bildmanipulation in PHP
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.
1 hr 8 min
March 08, 2011 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 6 min
March 08, 2011 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: [...]
1 hr 6 min
March 01, 2011 Revision 16: Interview mit Microsoft
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).
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
2 hr 2 min
March 01, 2011 Revision 16: Interview mit Microsoft
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[...]
2 hr 2 min
February 22, 2011 Revision 15: IE9 unmodern? Teure Featuredetection? Pareto-Prinzip?
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 2 min