• Postgres.app | the easiest way to run PostgreSQL on the Mac
• datalist experiment – The HTML5 element
• andtan/node-pad – DualShock3-Controller-Library for Node.js
• rice - openDatabase-wrapper in JavaScript
• iScroll 4
• Coding for the Mobile Web

Verwandte Beiträge:

• Bookmarks for April 23rd These are my links for April 23rd: HTML KickStart -...
• „Backbone Fundamentals“ – Ein fundierter Einstieg in das Thema Backbone.js Wer hier gelegentlich mitliest, wird eventuell mitbekommen haben, dass ich...

• HTML KickStart - Ultra–Lean HTML Building Blocks for Rapid Website Production - KickStart your Website Production - 99Lime.com
• mod_rewrite Cheat Sheet
• crypto-js - JavaScript implementations of standard and secure cryptographic algorithms - Google Project Hosting

Verwandte Beiträge:

• Bookmarks for April 24th These are my links for April 24th: Postgres.app | the...

Dieser Vorschlag kann nur von Politikern kommen, die in tagelangen Gremiumssitzungen mal wieder komplett den Bezug zur Realität verloren haben. Und grundsätzlich regt mich diese Anekdote auch zum Schmunzeln an. Allerdings gibt es zwei Punkte, die mir doch übel aufstoßen:

[…] und ein System der regulierten Selbstregulierung auch für diese Mediengattung einzuführen.

“Regulierte Selbstregulierung” – das dürfte wohl die paternalistische Herangehensweise an die Thematik sein. Allerdings sehr wohlwollend – natürlich kriegen “die Blogger” so etwas wie Selbstregulierung nicht hin. Trotzdem dürfen sie sich ein bißchen ausprobieren. Weil sie das mögen. Vater Staat korrigiert hinterher nochmal kräftig nach eigenem Gutdünken. …das ist der blanke Hohn.

In Zukunft sollten die Blogger dann eigenverantwortlich die Reputation der Kennzeichnung “B” hochhalten, indem sich die Szene selbst reguliert, z. B. durch das Instrument des “Crowd-Sourcing”.

Was hier in meinen Augen implizit zum Ausdruck kommt, ist, dass Inhalte ab 18 minderwertiger Qualität sind. So etwas unverblümt zu behaupten ist hochgradig ignorant und unverschämt. Und wie die Regulierung der Selbstregulierung durch die sog. “Szene” ausfallen dürfte, kann sich jeder vorstellen. Ich vermute allerdings, dass die Verantwortlichen für derlei Details kein Auge hatten im Freudentaumel über das gelungene Buzzwording (siehe “Crowd-Sourcing”).

Alles in allem frage ich mich mal wieder, warum die Herrschaften Politiker nicht mal fünf Minuten Pause machen und an die frische Luft gehen können, anstatt sich während endloser Sitzungen in hirnlose Abstrusitäten zu verrennen?!

Gefunden bei netzpolitik.org

Wenn aus dem “One-Pager” ein “Multi-One-Pager” wird, kann sich ein gewisser Overhead bezüglich der geladenen Skripte einstellen. Angenommen man baut eine Web-App, die aus vielen Einzelseiten besteht, und jede Einzelseite stellt für sich einen “One-Pager” dar, welcher nicht zwingend beim Besuch eines Nutzers aufgerufen wird. Dann werden – benutzt man Require.js zum Laden der Skripte – beim initialen Aufruf der Web-App alle Skripte geladen, auch wenn sie letztlich gar nicht benötigt werden.

In diesem Fall wäre es praktischer, mehrere Require.js-Instanzen anzulegen und durch einen zentralen Router gesteuert bei Bedarf aufzurufen. Dieses Szenario habe ich einmal mithilfe von Backbone.js nachgestellt. Die “Web-App” besteht aus diversen Einzelseiten, welche bestimmte jQuery-UI-Widgets beinhalten. Außerdem gibt es eine Startseite mit einem kurzen Erklärungstext. Ziel ist es, den Startseiteninhalt und die jQuery-UI-Widgets nur bei Bedarf zu laden.

Dafür wird beim Aufruf der Seite lediglich eine fundamentale Require.js-Instanz aufgerufen, die die global benötigten Skripte – jQuery, Underscore, Backbone, den jQuery-UI-Core und einen Observer – laden und einen Backbone-Router initialisieren, der die Autoloader-Funktionalität zur Verfügung stellt.

JavaScript

require(['jQuery', 'Underscore', 'Backbone', 'Observer'], function ($, _, Backbone, Observer) {

	var Router = Backbone.Router.extend({

		routes : {
			':site/*sub' : 'autoLoad'
		},

		initialize : function () {
			location.hash = location.hash || 'index/';

			Backbone.history.start();
		},

		autoLoad : function (site, sub) {
			var path = 'sites/' + site + '/app';

			require([path], function (App) {
				App.init({
					subPages : sub
				});
			});
		}
	}),

	router = new Router();

});

Der Router prüft als erstes, ob ein Location-Hash gesetzt ist. Ist dies nicht der Fall, wird der Hash “/index/” gesetzt, was die Initialisierung der Startseite einleitet. Weiterhin wartet der Router auf Änderungen des Location-Hash und führt im Bedarfsfall die “autoLoad”-Funktion aus, welche das gewünschte Modul/die gewünschte Seite lädt. Das “*sub” im “routes”-String des Routers stellt sicher, dass auch beim initialen Aufruf von Unter-Unterseiten die Autoload-Funktion tut, was sie soll.

Das vom Autoloader geladene Skript übergibt eine “init”-Funktion – dabei kann es sich, je nachdem ob die Seite lediglich statischen Inhalt hat oder tiefergreifende Funktionalität besitzt, entweder um eine Backbone-View- oder eine Backbone-Router-Instanz handeln.

JavaScript

var init = function () {
		return new View();
	};

return {
	init : init
};

JavaScript

var init = function (args) {
		return new Router(args);
	};

return {
	init : init
};

Das Datepicker-Modul habe ich als Beispiel für eine zusätzliche Router-Instanz gewählt. Inhaltlich zugegebenermaßen etwas mau, wird doch deutlich, dass auf diese Weise die Funktionalität der Web-App auch auf Unterebenen gewährleistet werden kann, ohne dass dies beim initialen Aufruf der Seite angemeldet bzw. geladen werden muss.

Beobachtet man den Inhalt des HTML-Head beim Durchklicken der Seite im Firebug bzw. Web Inspector, kann man sehr schön verfolgen, wie die jeweils benötigten Module und Widgets sukzessive nachgeladen werden.

Ich hoffe, mein Versuch, den Sachverhalt hier darzustellen, ist einigermaßen verständlich. Über Anregungen, Anmerkungen und Fragen freue ich mich immer. Sollte diesbezüglich Bedarf bestehen, kann ich nur dazu ermutigen, regen Gebrauch von der Kommentar-Funktion zu machen.

Außerdem sei darauf hingewiesen, dass der Code zur schnellen Inspektion auch auf GitHub zur Verfügung steht.

Verwandte Beiträge:

• Backbone.js-Tutorial: Die Merkliste ...
• „Clipboard“ – Digitales Notizbrett mit Node.js und Backbone.js Um etwas Zerstreuung vom Uni-Lernstress zu bekommen, habe ich einen...
• Animierte Image-Caption mit jQuery unter WordPress Demo | Download Google liebt es ja, wenn unter oder...

Um etwas Zerstreuung vom Uni-Lernstress zu bekommen, habe ich einen Ausflug in die bunte Node.js-Welt unternommen. Als Mittel zum Zweck diente mir dabei das digitale Notizbrett “Clipboard”. Serverseitig kommt das Application-Framework Express zum Einsatz. Gespeichert werden die Daten in einer MongoDB-Datenbank mithilfe von Mongoose.

Client-seitig kommt die bewährte Kombo aus Underscore, Backbone und jQuery zum Einsatz. Für Ordnung sorgt überdies Require.js, wobei ich auf folgenden Ansatz zurückgegriffen habe: Modular JavaScript & Backbone.js. Außerdem hat jQueryUI einen “Gast-Auftritt” und sorgt für die Draggability der Notizen.

Das Hosting übernimmt dankenswerterweise Nodester, die Daten werden bei MongoHQ abgelegt. Defenitiv zwei sehr praktische Services.

(Clipboard-Code bei GitHub)

Verwandte Beiträge:

• „Backbone Fundamentals“ – Ein fundierter Einstieg in das Thema Backbone.js Wer hier gelegentlich mitliest, wird eventuell mitbekommen haben, dass ich...
• Backbone.js-Tutorial: Die Merkliste ...
• Studie “Backboned”: AJAX-powered WordPress-Theme mit Backbone.js Demo | Download Um mir gelegentlich etwas Zerstreuung vom Lernen...

Wer hier gelegentlich mitliest, wird eventuell mitbekommen haben, dass ich mich gerne mit dem JavaScript-MVC-Framework Backbone.js beschäftige. Von daher war meine Freude recht groß, als ich gewahr wurde, dass Addy Osmani höchstselbst sich dran gemacht hat, eine unter CC-Lizenz stehende Wissenssammlung zum Thema unter dem Namen “Backbone Fundamentals” zu scheiben.

Diese behandelt die Basis-Themen und gibt einen kurzen Einblick in das Thema Backbone.js. Des weiteren wird die Entwicklung einer “RESTful Application” mithilfe von Node.js, Express, Mongoose und MongoDB beschrieben. Es folgt eine Einführung in das Thema “Modular JavaScript” im Kontext von Backbone.js, abgerundet durch konkrete Anwendungsszenarien. Anschließend wird das nicht uninteressante Thema Backbone.js in Kombination mit jQuery Mobile behandelt. Und zum Schluss steht Unit Testing mit dem Test-Framework Jasmine auf der Agenda.

Alle Themen werden anhand der Backbone-Todo-Application erläutert, so dass der praktische Einsatz der vorgestellten Techniken direkt ersichtlich wird. Meinem Empfinden nach entsteht mit “Backbone Fundamentals” eine sehr wertvolle, breit gefächerte Ressource, was das Thema Backbone.js anbelangt. Vielen Dank deshalb an Addy Osmani und allen weiteren, die mitgeholfen haben.

Zum Schluss möchte ich jedoch auch anmerken, dass es sich bei “Backbone Fundamentals” nicht gänzlich um Einstiegslektüre handelt. Grundsätzlich sollte man ein Verständnis von JavaScript, DOM-Libraries im allgemeinen und Application Development in Ansätzen mitbringen, um sich der Lektüre der Basics zu widmen. Bei den weiterführenden Themen ist ein Grundverständnis der verwandten Frameworks und Techniken, die im Kontext von Backbone.js beleuchtet werden, sicherlich auch hilfreich.

Obwohl meiner Meinung nach auch nichts dagegen spricht, bspw. das Kapitel “Modular JavaScript” zum Anlass zu nehmen, sich endlich einmal mit der Materie auseinander zu setzen. Allerdings wird man in diesem Fall wohl nicht umhin kommen, begleitende Lektüre zu konsultieren.

Verwandte Beiträge:

• „Clipboard“ – Digitales Notizbrett mit Node.js und Backbone.js Um etwas Zerstreuung vom Uni-Lernstress zu bekommen, habe ich einen...
• Studie “Backboned”: AJAX-powered WordPress-Theme mit Backbone.js Demo | Download Um mir gelegentlich etwas Zerstreuung vom Lernen...
• Backbone.js-Tutorial: Die Merkliste ...

Der Deutsche Rollstuhl-Sportverband hat neuerdings eine Android-App, welche ich in meiner Rolle als Frontend-Developer bei w3design. entwickeln durfte. Die App wird zeitnah außerdem auch für das iPhone erscheinen.

Was daran jedoch besonders interessant ist – abgesehen vom Erscheinen der App selbst –, ist die Tatsache, dass ich sowohl von Java, als auch von Objective-C nicht den blassesten Schimmer habe. Vielmehr habe ich mich beim Entwickeln der App auf meine HTML-, CSS- und JavaScript-Kenntnisse verlassen. Möglich ist das durch PhoneGap, ein Framework, das Web-Apps in native Apps umwandelt und dabei ein paar sinnvolle Hardware-APIs zur Verfügung stellt.

Für die App selbst, habe ich auf Backbone.js gesetzt, da es mir gute Möglichkeiten bot, einerseits die Fülle an unterschiedlichen Daten zu verarbeiten, und andererseits ein sehr umfangreichen “One-Pager” zu bauen, welcher aus einer index.html besteht und alle Unterseiten client-seitig rendert.

Ich kann Phonegap jedenfalls nur empfehlen und möchte noch auf LungoJS hinweisen, welches bei kleineren Apps sicher gut mit Phonegap Hand in Hand geht.

Verwandte Beiträge:

• Bilder mit jQuery einblenden, wenn sie fertig geladen sind Das hier ist zwar eher im Bereich "Spielerei" anzusiedeln, aber...

1. Es bestehen Abhängigkeiteen zwischen den zu ladenden Daten, so dass sicher gestellt sein muss, dass die Daten vom Typ A fertig geladen sind, bevor das Laden der Daten vom Typ B startet bzw. starten kann.
2. Der Fortschritt des Ladevorgangs soll visualisiert werden, heißt, ist ein Ladevorgang abgeschlossen und es beginnt der nächste, soll ein Ladebalken vorwärts schreiten.

Es wird ersichtlich, dass es nicht damit getan ist, die AJAX-Calls hintereinander aufzurufen. Vielmehr braucht es eine ordnende Instanz, die dafür sorgt, dass die Aufrufe sauber von einander getrennt ablaufen und zwischendurch Callback-Funktionen aufgerufen werden können. Um das zu erreichen, greife ich auf das Pub-Sub-Pattern von Addy Osmani zurück und kombiniere es mit einer InitialDataloader-Funktion. Die AJAX-Funktionalitäten hole ich mir von jQuery.

Im folgenden das Pub-Sub-Pattern:

JavaScript

var mediator = (function () {

	function subscribe(channel, fn) {

		if ( !mediator.channels[channel] ) {
			mediator.channels[channel] = [];
		}

		mediator.channels[channel].push({
			context : this,
			callback : fn
		});

		return this;

	}

	function publish(channel, context) {

		var i = 0,
			len,
			args,
			subscription;

		if ( !mediator.channels[channel] ) {
			return false;
		}

		args = Array.prototype.slice.call(arguments, 2);
		len = mediator.channels[channel].length;

		for ( ; i<len; i += 1 ) {
			subscription = mediator.channels[channel][i];
			subscription.callback.apply((context || subscription.context), args);
		}

		return this;

	}

	return {
		channels : {},
		publish : publish,
		subscribe : subscribe,
		installTo : function (obj) {
			obj.subscribe = subscribe;
			obj.publish = publish;
		}
	}

})();

Auf das Pub-Sub-Pattern möchte ich gar nicht weiter eingehen. Lediglich der Hinweis, dass ich die Publish-Funktion um die Möglichkeit ergänzt habe, einen eigenen Kontext zu übergeben.

Kommen wir als nächstes zur InitialDataloader-Funktion:

JavaScript

var InitialDataloader = function (args) {
	this.args = args;
	this.result = [];

	this.init();
};

InitialDataloader.prototype.init = function () {

	var i = 0,
		len = this.args.length;

	if ( !len ) {
		return;
	}

	for ( ; i<len; i+=1 ) {
		mediator.subscribe(this.args[i], this.load);
	}

	mediator.publish(this.args[0], this, {path : this.args[0], next : 1});

};

InitialDataloader.prototype.load = function (obj) {

	var that = this,
		deferred = $.ajax({url : obj.path});

	deferred.success(function (resp) {
		that.result.push('Data' + obj.next + ' loaded');
	});

	deferred.then( function (resp) {
		if ( obj.next === that.args.length ) {
			console.log(that.result);
		} else {
			mediator.publish(that.args[obj.next], that, {path : that.args[obj.next], next : obj.next+1});
		}
	});

};

in der Konstruktor-Funktion werden die Argumente entgegen genommen und der Prozess via der init-Funktion gestartet. Das args-Argument stellt dabei einen Array dar, der die Pfade zu den Daten enthält.

In der init-Funktion wiederum wird für jeden Pfad des args-Array eine Funktion im Pub-Sub-Pattern angemeldet. Anschließend wird das erste Element des Pub-Sub-Patterns “veröffentlicht”, sprich die load-Funktion mit dem ersten Pfad aufgerufen und der Zähler zum nächsten Element des Pfad-Arrays mit übergeben.

Innerhalb der load-Funktion wird ein AJAX-Call auf den übergebenen Pfad gemacht und an ein deferred-Objekt übergeben. Dies wird anschließend genutzt, um eine Callback-Funktion zu starten, wenn der Ladevorgang abgeschlossen ist, und anschließend entweder das nächste Element des Pfad-Array im Pub-Sub-System zu “veröffentlichen” oder – wenn alle AJAX-Calls gemacht sind – eine finale Funktion aufzurufen (console.log(that.result);).

Anschließend noch der Aufruf der Funktion:

JavaScript

var initialDataLoad = new InitialDataloader([
	'http://apple.com/',
	'https://twitter.com/',
	'http://www.spiegel.de/',
	'http://www.flickr.com/'
]);

Die Adressen sind willkürlich gewählt.

Wenn man den Code in ein Skript packt und im Browser laufen lässt, sieht man in der Konsole nacheinander die AJAX-Calls und abschließend die Ausgabe des this.result-Array, der die einzelnen, zu ladenden Elemente mitgezählt hat.

Das war es auch schon. Sollte es Fragen oder Anregungen, nutzt bitte die Kommentar-Funktion. Ich freue mich immer über Feedback!

Verwandte Beiträge:

• Animierte Image-Caption mit jQuery unter WordPress Demo | Download Google liebt es ja, wenn unter oder...
• Backbone.js-Tutorial: Die Merkliste ...

AK Madagaskar Filmtrailer auf Vimeo

Vor etwas mehr als einem Jahr sind einige Pfadfinderinnen und Pfadfinder vom AK Madagaskar des VCP Land Niedersachsen nach Madagaskar gereist um das Land kennen zu lernen und den Fortschritt des dort betreuten Projekts zu begutachten.

Des weiteren wurde der Plan gefasst, im Zuge der Reise einen Dokumentarfilm sowie eine Fotoausstellung zum Thema “Kindheit und Jugend in Madagaskar” zu erstellen. Beides – Film und Ausstellung – nähern sich nun langsam der Fertigstellung. Obiger Trailer gibt schon einmal einen Vorgeschmack auf das, was kommen wird.

Google stellt seinen neuen Service “Music” mit einer ziemlich beeindruckenden Tour vor. Diese ist multimedial, gefällig im Design und insgesamt sehr kurzweilig. Die einzelnen Bereiche der Tour werden durch Tonspuren repräsentiert, die quirlig über den Bildschirm flitzen und sich sukzessive zu einem Song ergänzen.

Ist man mit der Tour fertig, ist auch der Song vollständig und kann kostenlos heruntergeladen werden. Das ist ein ziemlich guter Call-to-Action und katapultiert den Besucher direkt in das Google-Music-System. Die erste Hemmschwelle, den Service auszuprobieren, könnte also schnell abgebaut sein. Allerdings funktioniert das nicht, wenn man nach dem Klicken des Download-Buttons folgende Seite angezeigt bekommt:

Nun muss man Google zugute halten, dass der Service noch brandneu ist und es daher nicht verwundern sollte, wenn er nur nach und nach über die US-amerikanischen Landesgrenzen hinaus erweitert wird. Aber ein bißchen ernüchternd war das nach der Präsentation zuvor schon…

(via @73inches)