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).
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
