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.

X-Tag: JavaScript-Polylib für Web Components

Im Dezember letzten Jahres hatte ich über das Web UI berichtet, einer User Interface-Bibliothek für Google Dart, die von Web Components Gebrauch macht. Bei den Web Components handelt es sich um eine sehr interessante Methode, um dynamische HTML-Bausteine zu erzeugen und wiederzuverwenden. So lassen sich also eigene Komponenten erstellen, die mit HTML, CSS und JavaScript ausgestattet werden können.
Die Web Components befinden sich noch im Standardisierungsprozess des W3C und stehen aktuell nur in Google Chrome zur Verfügung. Dennoch gibt es seit einiger Zeit schon diverse Polyfills, wie beispielsweise X-Tag von Mozilla.

Bei X-Tag handelt es sich um eine kleine JavaScript-Bibliothek, die das Verhalten eines Web Components simuliert: So können eigene HTML-Tags definiert werden, die komplette Widgets enthalten können, wie etwa ein Accordion, ein Kontaktformular oder gar eine Kartenansicht. Das Panel-Beispiel zeigt etwa das asynchrone Laden einer HTML-Datei in einen Container. Der X-Tag-Code dazu sieht aus wie folgt:

• <x-panel src="some-page.html"></x-panel>

Es gibt noch weitere Polyfills für Web Components, wie beispielsweise Model Driven Views, die ebenfalls vielversprechend aussehen.

Timbre.js: Klangsynthese mit HTML5 im Browser

Das virtuelle Erzeugen von Tönen durch Synthese ist im Web nicht mehr nur durch Flash (z.B. Audiotool) möglich. Auch HTML5 ermöglicht dank der Web Audio API das Generieren von Wellenformen mittels Oszillatoren. Durch die Frequenzen mehrerer Oszillatoren ist also die Frequenzmodulationssynthese möglich, wodurch sich variierende Töne und Melodien erzeugen lassen. Mit der JavaScript-Bibliothek Timbre.js stehen für den Bereich der Audio-Programmierung komfortable Werkzeuge bereit.

Timbre.js bildet also die Brücke zur Web Audio API und bietet eine einfache Schreibweise an:

• T("sin", {freq:880, mul:0.5}).play();

Das Framework bietet neben dem Erzeugen von Tönen auch etliche Filter (Chorus, Delay, FFT, Equalizer, Phaser, usw.) an. Weiterhin können Audio-Dateien verarbeitet und sogar in Einzelteile (Beat Slicing) zerlegt werden, um sie dann in einer neuen Reihenfolge zusammenzusetzen. Das Beatbox-Beispiel zeigt dieses Szenario.
Auf der Seite der Vorgängerversion v12 finden sich weitere Beispiele.

Superhero.js: Ressourcen für JavaScript-Entwickler

Mittlerweile gibt es ein breites Angebot an digitalen Büchern, Anleitungen und Präsentationen rund um JavaScript. Eine sorgfältig zusammengestellte und aktualisierte Liste mit den wichtigsten Ressourcen dürfte hier für viele Entwickler nützlich sein. Bei der Website Superhero.js handelt es sich um eine solche Sammlung, welche Links zu diversen Hilfestellungen beinhaltet, die sich im Netz finden lassen.

Die Sammlung gliedert sich in 9 Hauptbereiche, die verschiedene Aspekte von JavaScript behandeln: Angefangen bei der Syntax, APIs und Frameworks über Entwurfsmuster und Tools bis hin zu Performance-Tipps und erweiterten Techniken. In der Liste finden sich die unterschiedlichsten Quellen, beispielsweise auch das bewährte eBook "Eloquent JavaScript". Die Sammlung dürfte nicht nur für JavaScript-Einsteiger interessante Links enthalten.

Cytoscape.js: Interaktive Graphen mit JavaScript

Dieses Framework ist zwar schon etwas älter, aber es wurde stetig aktualisiert und bietet auch jetzt noch moderne Funktionalitäten: Mit Cytoscape.js lassen sich Graphen aller Art visualisieren und mit Interaktionen versehen. Das JavaScript-Framework ist ein Ableger des Cytoscape Web-Projekts, das auf Flash basiert. Auch hiermit lassen sich vernetzte Strukturen darstellen und in Echtzeit manipulieren.

Die JavaScript-Version basiert auf einem ereignisgesteuerten Modell mit einer Core-API, die Erweiterungen enthält. Diese wiederum modifizieren die Elemente eines Graphen und senden Änderungen an den Core weiter. Dadurch können auch eigene Plugins und sogar jQuery-Plugins angebunden werden. Auf der Demo-Website findet sich der dazugehörige Beispiel-Code. Der komplette Quelltext steht bei GitHub bereit, wobei noch nicht alle Features der Flash-Version umgesetzt wurden (wie etwa Layouts).