Hier gibt es Artikel und Gedanken rund um Webdesign, Grafikdesign, Webentwicklung, Photoshop, Flash, TYPO3, CSS, jQuery, JavaScript, Inspirationen, Windows,
Content-Management-Systeme, 3D-Visualisierung
und vieles mehr.

Scrubby: JavaScript-Werte in Echtzeit verändern

Wer sich für Animationen, Spiele und interaktive Grafikanwendungen in HTML/JavaScript interessiert, wird Seiten wie CreativeJS oder die GLSL Sandbox bereits kennen. Für das Erstellen und Bearbeiten von Canvas-Animationen direkt im Browser hatte ich vor einem Jahr den Canvas Animation Playground entwickelt, der das Schreiben von Animationen beschleunigen soll.
Ein interessantes Skript in diesem Zusammenhang stellt Scrubby dar: Damit können die Zahlenwerte von JavaScript-Codes per Schieberegler verändert werden, wodurch sich eine HTML5-Canvas-Anwendung in Echtzeit manipulieren lässt.

Für das direkte Bearbeiten von Animationen im Browser eignet sich Scrubby also hervorragend, da gerade für die Berechnungen von Positionen, Farben und Effekten etliche Anpassungen erforderlich sein können. Ein Skript-Block muss nur mit dem Typ "text/scrubby" gekennzeichnet werden, damit sich Werte interaktive verändern lassen.
Scrubby setzt dafür die ECMAScript-Tools Esprima und Escodegen ein. Bei GitHub findet sich der Quellcode zu Scrubby und eine Roadmap. So sind bereits weitere interessante Features geplant, wie etwa das Verändern von Strings oder das Einblenden eines Farbwählers.

Webentwicklung: Frontend-Paketmanager im Vergleich

Sie heißen Bower, Component oder Volo: Frontend-Paketmanager, die sich dank der Popularität von Node.js immer mehr durchsetzen und Webentwicklern diverse Aufgaben abnehmen. So müssen JavaScript-Bibliotheken und andere Komponenten eines Web-Projekts nicht mehr manuell installiert oder aktualisiert werden, sondern können einfach über eine Konfigurationsdatei definiert werden. Hierbei können Abhängigkeiten festgelegt werden, die dann mit einem Script-Loader wie RequireJS geladen werden können.
Der Entwickler Wil Moore hat sich die Mühe gemacht und bei GitHub eine "Front-End Package Manager Comparison" zusammengestellt, in der die verschiedenen Tools beleuchtet werden.

Das GitHub-Dokument listet unter Anderem die Konfigurationsdateien der Paketmanager auf und gibt Einblick in die Funktionalitäten. Dazu zählen beispielsweise Scaffolding, Bootstrapping, Build Automation oder Script-Loading. Zudem gibt es eine Liste der unterstützten Schreibweisen für Module (AMD, CommonJS, globales Skript). Die Vergleichsmatrix dürfte einen guten Überblick über die bisher existierenden Frontend-Paketmanager geben und Entwicklern damit die Auswahl erleichtern.
Wer nach einer Komplettlösung sucht, mit der sich per Knopfdruck Webprojekte erzeugen und testen lassen, sollte hingegen einen Blick auf Yeoman werfen.

JavaScript: Ein Blick auf moderne Web-Frameworks

Steve Sanderson, der Entwickler von Knockout, dürfte mit seinen Worten die Zukunft von JavaScript-Anwendungen sehr gut beschreiben: Während eine größere Web-Applikation bisher mit Server-Rendering, Ajax-Schnittstellen und etwas jQuery-Code auskam, werden zukünftige Anwendungen geeignete Datenmodelle und ein solides Client-Side-Rendering erfordern. Aus diesem Grund wurden MVW-Frameworks (Model-View-Whatever) wie Knockout, Backbone oder AngularJS ins Leben gerufen. Mit dem TodoMVC-Projekt soll Entwicklern die Wahl des richtigen Frameworks erleichtert werden.
Die Leute von "SoftFinity" haben ein paar interessante Artikel zu dieser Thematik veröffentlicht, in denen sie die genannten Bibliotheken beleuchten.

Die Artikelreihe "The Battle of Modern Javascript Frameworks" zeigt Kernfunktionen, Vor- und Nachteile sowie Community-Support (Stack Overflow, GitHub) der beliebtesten Frameworks auf. Abschließend gibt es ein Fazit. Hier die Artikelreihe im Überblick:

• The Battle of Modern Javascript Frameworks – Part II: Knockout.js
• The Battle of Modern Javascript Frameworks – Part III: Backbone.js
• The Battle of Modern Javascript Frameworks – Part IV: Angular.js
• The Battle of Modern Javascript Frameworks – Part V: Ember.js
• The Battle of Modern Javascript Frameworks – Conclusion

Insgesamt schneidet Knockout dank seiner guten Dokumentation und dem interaktiven Tutorial-System sehr gut ab, wenn es um kleine bis mittlere Projekte geht. Für größere Projekte eignet sich Backbone, wobei es hier keine data-bindings gibt und strenge Konventionen eingehalten werden müssen. Wer Knockout und Backbone vereint haben möchte, greift entweder zu Knockback oder wirft einen Blick auf AngularJS, das ebenfalls viele Funktionen vereint und auf komplexere Projekte ausgelegt ist. Alles Weitere findet sich in der kurzen und dennoch sehr gelungenen Artikelreihe.

Lazy.js: Utilities für JavaScript mit Deferred Execution

Für die Arbeit mit unterschiedlichen Datenstrukturen in JavaScript können Hilfsbibliotheken wie Underscore.js oder Lo-Dash sehr nützlich sein. Gerade wenn es sich um die Verarbeitung von größeren JSON-Datensätzen handelt, dürften die Funktionen der genannten Bibliotheken interessant sein, mit denen sich Arrays, Objekte und Collections schneller verarbeiten lassen.
In diesem Zusammenhang wurde auch das Skript Lazy.js entwickelt, das ähnlich wie Underscore.js arbeitet, aber Sequenzen erzeugt und damit eine verzögerte Ausführung (Deferred Execution) ermöglicht.

Der Vorteil von Lazy.js liegt also darin, dass Iterationen erst beim Aufruf der each-Methode ausgeführt werden und keine Zwischen-Arrays erzeugt werden. Ein Beispiel, bei dem die ersten 10 geraden Quadratzahlen eines Arrays mit 1000 Ganzzahlen ausgegeben werden:

• function square(x) { return x * x; }
• function isEven(x) { return x % 2 === 0; }
•  
• var arr = Lazy.range(1000).toArray();
• var result = Lazy(arr).map(square).filter(isEven).take(100);

Auf der Seite finden sich noch weitere Beispiele, bei denen unter Anderem eindeutige Zufallszahlen erzeugt werden oder die Maus-Koordinaten direkt als Sequenz verarbeitet werden.
Der Quellcode zu Lazy.js findet sich wieder bei GitHub.