Tag: tutorials

JavaScript: Mixins mit ECMAScript 5 verwenden

Mit dem Einsatz von Mixins in JavaScript lassen sich Eigenschaften und Methoden eines Objekts auf ein Anderes übertragen. Dies wird in der Regel durch eine klassische "extend"- oder "augment"-Funktion erreicht, welche die Attribute eines Quell-Objekts per "hasOwnProperty()" überprüft und anschließend auf das Ziel-Objekt kopiert.
Wer bei einer WebApp ECMAScript 5 und die damit verbundenen Getter und Setter verwenden kann, könnte auf ein Problem stoßen, das in diesem Artikel beschrieben wird.

So muss darauf geachtet werden, dass die Funktion, die Mixins erlaubt, auch die lokalen Getter und Setter berücksichtigt. Das Problem liegt daher im Scoping, da innerhalb des Ziel-Objekts eines Mixins ein eigenes Scope mit lokalen Variablen vorliegt. Eine Mixin-Funktion für ECMAScript 5 kann also so aussehen:

• function mixin(receiver, supplier) {
• Object.keys(supplier).forEach(function(value, property) {
• Object.defineProperty(receiver, property, Object.getOwnPropertyDescriptor(supplier, property));
• });
• }

Eine Variante, die ein Fallback für ECMAScript 3 enthält, findet sich ebenfalls in dem Artikel.

BookBlock: HTML-Inhalte umblättern mit CSS3/jQuery

Der digitale "Umblättern"-Effekt, wie man ihn von diversen eBooks und Flash-Anwendungen kennt, ist dank CSS3 schon seit einiger Zeit mit HTML und CSS möglich. Das jQuery-Plugin Viewbook oder die CSS3-Demo von Román Cortés zeigen Variationen des Effekts.
Bei Codrops findet sich aktuell auch ein Artikel, wie sich der Effekt in ein eigenes jQuery-Plugin packen lässt. Das Plugin BookBlock wird in dem Artikel umschrieben und eine Demo findet sich auf dieser Seite.

BookBlock macht ebenfalls Gebrauch von CSS3 und "transform()" bzw. "translate()". Per Klick wird ein beliebiges Inhaltselement also über die Rotation der Y-Achse transformiert, wodurch optisch der Effekt des Umblätterns entsteht. Unter Google Chrome oder Safari ist aktuell eine bessere Darstellung als in anderen Browsern möglich, da Antialiasing in der WebKit-Engine integriert ist.

The Nature of Code: eBook über Physik und Processing

Die Programmierung von grafischen Anwendungen und interaktiven Animationen erfordert ein gewisses Verständnis für die Grundlagen der Mathematik bzw. Physik. Diese lassen sich in diversen Tutorials aneignen und ausprobieren, wobei die Umsetzung natürlich nicht unbedingt einfacher wird. Wer sich für diese Thematik im Zusammenhang mit der Entwicklungsumgebung Processing interessiert, kann sich das online verfügbare eBook "The Nature of Code" ansehen.

In dem umfangreichen Werk von Daniel Shiffman werden Themen wie Vektoren, Kräfte, Schwingungen, Partikelsysteme, Physik-Bibliotheken, Fraktale oder neurale Netzwerke behandelt und anhand von ausführlichen Texten, Zeichnungen und Code-Beispielen unterstützt. Der Autor beginnt auf einer einfachen Ebene und beleuchtet die unterschiedlichen Bereiche sehr gewissenhaft, so dass die Materie gut verständlich ist. Das eBook ist auch für Entwickler interessant, die nicht mit Processing arbeiten möchten, da sich das Wissen auch auf andere Sprachen anwenden lässt, wenn ein paar Anpassungen vorgenommen werden.

JSPro: Neuer SitePoint-Blog für JavaScript-Entwickler

Das auf Webentwicklung spezialisierte Portal SitePoint hat vor einigen Wochen einen weiteren Ableger die Welt gerufen, der sich mit der Entwicklung von JavaScript beschäftigt und aktuelle Themen rund um die Skriptsprache beleuchtet. Das Portal JSPro weist inzwischen einige Blog-Einträge auf, die von Spieleentwicklung über CoffeeScript bis zu Node.js reichen.

Neben Beiträgen über weitere Themen wie Modernizr, Authentifizierung, Cookies oder JSLint finden sich auch Artikel über nützliche Erweiterungen von JavaScript wie beispielsweise dieser Beitrag. Momentan lässt die Häufigkeit der Blog-Einträge nicht zu wünschen übrig. Man darf gespannt sein, ob JSPro sein Tempo beibehält und sich zukünftig zu einer weiteren interessanten Quelle für JavaScript-Entwickler mausert.

WebPlatform.org: Neue Ressource für Webentwickler

Eine umfangreiche Seite, die alle denkbaren Bereiche des Webs im Sinne der Frontend-Entwicklung abdeckt und dabei von einer Community betrieben wird, stellt eine gute Anlaufstelle für angehende und bestehende Webdesigner und -entwickler dar. Die Seite WebPlatform.org repräsentiert genau solch ein Projekt und wird von namhaften Firmen wie Adobe, Apple, Microsoft, Mozilla, Opera und dem W3C unterstützt. Zusammengefasst handelt es sich also um eine Plattform, auf der die wichtigsten Informationen rund um aktuelle Webstandards in einfacher Form zu finden sind.

Neben den eigentlichen Dokumentationen zu Themen wie HTML, CSS, SVG, JavaScript oder Barrierefreiheit finden sich auch etliche Tutorials auf der Seite. Die Anleitungen sind unterschiedlich komplex und für angehende Frontend-Entwickler wurde eine separate Anleitung angelegt, die bei den Grundprinzipien des Webs beginnt.
Schließlich findet sich auf der Seite auch ein Forum, das ähnlich wie Stack Overflow aufgebaut ist und Diskussionen in minimalistischer Form darstellt.

Webentwicklung: Kleines Quiz über Scopes in JavaScript

JavaScript zeichnet sich durch so manche Eigenheiten aus: Neben dem Modell der prototypischen Vererbung müssen auch erst die Geltungsbereiche (Scopes) von globalen und lokalen Variablen verstanden werden. So hat das Schlüsselwort var eine besondere Bedeutung, da mit dessen Verwendung Variablen als global oder lokal deklariert werden können. Gerade für Einsteiger dürfte diese Tatsache sehr wichtig sein, wenn es darum geht, bestimmte Variablen auf eine Funktion zu beschränken.

In diesem Zusammenhang wurde ein kleines Quiz veröffentlicht, bei dem JavaScript-Entwickler ihr Wissen über Scoping testen können. Auf insgesamt 7 Fragen sind verschiedene Szenarien verteilt, in denen unterschiedliche Scopes zur Geltung kommen. Unterhalb der Fragestellung findet sich nach dem Beantworten eine Erklärung zum jeweiligen Szenario, wodurch sich das Quiz sehr gut für Einsteiger eignet.

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.

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.