Tag: tricks

URLi.st: Online-Verwaltung für Link-Listen aktualisiert

Vor rund 2 Jahren berichtete ich über den Online-Dienst URLi.st, mit dem sich Link-Sammlungen erstellen und mit Anderen teilen lassen. Inzwischen wurde das Projekt modernisiert und befindet sich in einer geschlossenen Beta-Phase. Die Idee von Link-Listen ist durchaus sinnvoll, da in vielen Fällen mehrere Links zu einer Thematik gehören und so gruppiert werden können. Zum einfachen Hinzufügen einer Seite steht ein URLi.st-Bookmarklet bereit, mit dem sich die eigene Liste einfach per Klick erweitern lässt.

Bei der aktuellen Version des Web-Dienstes können Listen sowohl öffentlich als auch privat zugänglich gemacht werden: Zudem können bestimmte Benutzer Zugriff auf eine Liste erhalten und diese bearbeiten. Links innerhalb einer Liste lassen sich mit Farben versehen und können von anderen Benutzern bewertet oder kommentiert werden. Link-Listen von URLi.st werden als Kurz-URL in Form von "http://urli.st/iD5" erzeugt und auch die Links innerhalb einer Liste stehen dann als Kurz-URL bereit. In der Tour sind alle Neuerungen aufgelistet. Momentan befindet sich das Projekt wie gesagt in einer Beta-Phase und Registrierungen sind derzeit nur per Einladung möglich. Das dürfte sich in absehbarer Zeit ändern.

Code School: Die Anatomie von Backbone.js

Wer sich in eine Programmiersprache einarbeiten will oder die Materie zu einer komplexen Thematik vertiefen möchte, findet auch im Netz gute Anlaufstellen. Seiten wie Codecademy oder Code School bieten hier gute Quellen, die auch interaktiv genutzt werden können. So kann das Erlernte direkt auf der Seite ausprobiert und angewendet werden. Kürzlich erschien bei Code School auch eine Anleitung für Backbone.js, die Entwicklern das JavaScript-MVC-Framework näherbringen soll.

Die Anleitung, die aus Videos und interaktiven Bereichen besteht, gliedert sich in 7 Teile, in denen die Grundzüge von MVC, Templating, Events, Collections und Routing beleuchtet werden. Der komplette Kurs kostet 55 USD — hinter den Anleitungen von Code School steckt immerhin ein hoher Aufwand und die Qualität kann sich sehen lassen. Wer sich erst einmal selbst überzeugen will, kann das erste Level des Backbone-Tutorials auch ohne Anmeldung ausprobieren. Das Prinzip der "Levels" bei Code School zeigt den persönlichen Fortschritt der Anwender und hilft, das eigene Wissen in einem Bereich besser einzuschätzen.

Remote-Tilt: Bewegungssensor im Browser simulieren

Wer sich im Browser mit der Entwicklung von Anwendungen beschäftigt, die auf den Beschleunigungsmesser (Accelerometer) des Smart-Phones zugreifen, wird womöglich Schwierigkeiten haben, die Anwendung zu testen: Bei der Verwendung eines echten Geräts fehlen wichtige Entwicklerwerkzeuge des Browsers und ein Debugging geht eher schleppend voran. Eine logische Brücke zwischen Smart-Phone und Browser, welche die Bewegungsdaten überträgt (also als Proxy agiert), könnte mit JavaScript realisiert werden.
Kein Geringerer als Remy Sharp hat genau dieses Bindeglied entwickelt und es unter dem Namen Remote-Tilt veröffentlicht.

Bei Remote-Tilt handelt es sich also um eine JavaScript-Datei, die nur auf der Seite eingebunden werden muss, die getestet werden soll. Anschließend kann über ein Popup-Fenster ein Simulator gestartet werden, der sich dreidimensional rotieren lässt. Alternativ kann auch ein echtes Endgerät verwendet werden, das eine URL mit einem bestimmten Key aufrufen muss und dadurch die Daten des Beschleunigungsmessers und Gyro-Sensors an den Browser übermittelt. Auf der Seite von Remote-Tilt finden sich verschiedene Anwendungsbeispiele, die demonstrieren, wie das Skript in Aktion aussehen kann.

CSS3D Clouds: Studie über animierte Wolken mit CSS

Die Erzeugung von volumetrischen Wolken zählt hauptsächlich zum Bereich der Spieleentwicklung. Dort gibt es verschiedene Möglichkeiten, um realistisch wirkende Wolken darzustellen. Im Webbrowser hat Mr.doob bereits ein Beispiel auf WebGL-Basis entwickelt, das schon in ROME eingesetzt wurde. Ganz ohne WebGL und nur durch den Einsatz von CSS3D-Transformationen kommt dieses Experiment von Jaume Sánchez aus.

Im Endeffekt ähnelt das Beispiel der WebGL-Umsetzung von Mr.doob: Es werden einfach zweidimensionale Flächen (Sprites) mit Texturen belegt und durch Verzerrungen im Raum angeordnet. Durch die geschickte Kombination von verschiedenen Texturen entstehen derartige Wolken-Bilder. Das CSS-Beispiel erlaubt zudem, Explosionen und Rauch hinzuzufügen. Der Effekt ist sehr anschaulich und demonstriert, was sich mit relativ wenig Aufwand darstellen lässt.

Test-Driven Development: Tests mit jQuery und QUnit

Ich hatte vor einiger Zeit einen Artikel über testgetriebene Entwicklung mit jQuery gefunden, der Einsteigern ein einfaches Beispiel an die Hand geben soll. Wer sich mit der Thematik "Test-Driven Development" in JavaScript auseinandersetzt, könnte den Beitrag von Attachments.me interessant finden. Dort beschreiben die Entwickler des Webdienstes ein einfaches Szenario, in dem sie mit jQuery und dem Test-Framework QUnit zwei einfache Tests entwickeln.

Bei der testgetriebenen Entwicklung wird Produktionscode anhand von zuvor durchgeführten Tests geschrieben: Das bedeutet, dass die Tests am Anfang stehen und zu Beginn fehlschlagen. Durch das Schreiben des entsprechenden Produktionscodes werden die Tests erfolgreich validiert und weitere Tests können durchgeführt werden. Nachdem ein Modul (Unit) durch ausreichende Testdurchläufe validiert wurde, kann es in das Gesamtsystem integriert werden.
In dem Artikel von Attachments.me werden die Grundzüge des Paradigmas beleuchtet und einfache Ajax-Tests durchgeführt. Die Code-Snippets finden sich auch bei GitHub. Ein nützliches Tool zum Erstellen von Stubs und Mocks stellt übrigens Sinon.JS, das auch mit QUnit eingesetzt werden kann.

Adobe Edge: Preview 5 mit verbesserten Tools

Das HTML5/CSS3-Animationswerkzeug "Edge" von Adobe geht in eine neue Runde: Vor ein paar Tagen hat Adobe die fünfte Preview-Version des Tools veröffentlicht und wieder einige Verbesserungen implementiert. So wurde das "Pin"-Werkzeug (zuvor "Markierung") aufgewertet, mit dem sich bestimmte Bereiche einer Edge-Animation abspielen lassen (Ghost/Region Pinning). Zudem wurde ein Easing-Werkzeug eingeführt, mit dem sich die verschiedenen Modi zum Beschleunigen und Abbremsen von Animationen per Schaltfläche einstellen lassen.

Weiterhin wurde an der Zeit-Darstellung gearbeitet und Keyframes lassen sich nun per Kontextmenü einfügen. Flächen können nun auch durch ein neues Werkzeug transformiert (Verschiebung, Drehung, Neigung) werden und das "clip"-Attribut kann ebenfalls animiert werden: So lassen sich beispielsweise Masken erzeugen. Schließlich wurden verschiedene Events hinzugefügt und die "Publish to Web"-Einstellung bietet Optionen für das Veröffentlichen von Edge-Animationen (CDN-Unterstützung, Minification, etc.). Übrigens wurde auch eine "Down-Level-Stage" eingeführt, auf der eine Fallback-Grafik für ältere Browser eingefügt werden kann. Alle Neuerungen finden sich auf dieser Seite.

Reveal.js: HTML/CSS-Präsentationstool mit 3D-Effekten

Präsentation im Web sind schon lange keine Seltenheit mehr und gewinnen immer stärker an Bedeutung. Ein Framework wie beispielsweise Deck.js hilft dabei, HTML-Präsentation zu erstellen. Wer auch Flash als Technologie einsetzen kann, dürfte mit Prezi gut bedient sein, da sich mit diesem Tool interaktive Präsentationen nach dem Baukasten-Prinzip erzeugen lassen. Inzwischen gibt es auch eine HTML/CSS3-Version von Prezi, die sich Impress.js nennt und ähnliche Effekte durch Webstandards bietet.
Hakim El Hattab hat nun mit seinem Präsentationstool Reveal.js eine weitere Lösung geschaffen, mit der sich ebenfalls Web-Präsentationen entwickeln lassen, die von 3D-Effekten Gebrauch machen.

Der Entwickler setzt bei seinem Framework auf CSS3-3D-Transforms, wobei als Fallback auf gewöhnliche 2D-Transforms zurückgegriffen wird. Eine Reveal-Präsentation benötigt folgende HTML-Struktur:

• <div id="reveal">
• <div class="slides">
• <section>
• Slide-Inhalt
• </section>
• </div>
• </div>

Ein section-Bereich repräsentiert also einen Slide, wobei auch mehrere Sections verschachtelt werden können. Reveal bietet zudem verschiedene Optionen und so können die Slides auch in der Browser-History gespeichert werden. Weitere Details sowie eine Dokumentation finden sich bei GitHub.

Throbber.js: Ajax-Preloader mit HTML5 und JavaScript

Bekannt wurden die animierten Grafiken wahrscheinlich durch Flash, spätestens seit der Verbreitung von Ajax sind sie Bestandteil dynamischer Webanwendungen: Preloader-Grafiken, die auch als "Spinner" oder "Throbber" bezeichnet werden, signalisieren dem Benutzer, dass Inhalt geladen wird. In der HTML-Welt wurden diese Animationen in der Regel durch animierte GIF-Grafiken umgesetzt. Seit HTML5 und CSS3 sieht das Ganze etwas anders aus: Mit Spin.js lassen sich die Animationen auch ohne Grafiken einsetzen und mit CSS Load wird lediglich ein CSS3-fähiger Webbrowser benötigt.
Die Lücke schließt nun das Skript Throbber.js, denn damit lassen sich Preloader-Grafiken auch durch das HTML5-Canvas-Element einbinden.

Der Stil der Throbber.js-Animationen ähnelt typischen Preloadern und auch der Lade-Animation von Mac OS X. Ein Beispiel für die Erzeugung eines Canvas-Throbbers:

• var throb = new Throbber({
• color: "yellow",
• padding: 30,
• size: 40,
• fade: 200,
• clockwise: false
• }).appendTo( document.getElementById("t3")).start();
•  
• document.getElementById("b3").onclick = function() {
• throb.toggle();
• };

So können verschiedene Attribute wie Farbe, Größe, Geschwindigkeit, Drehrichtung, FPS, Stil oder auch ein Callback festgelegt werden. Zudem bietet Throbber.js den Bonus, dass für Browser, die kein HTML5 unterstützen, ein GIF-Fallback erzeugt und angezeigt wird.