Bananas Development Blog: share your thoughts

Motion tracking mit JS

Das nenne ich mal ne Leistung. Zwar wieder zu Lasten des Clients aber an sich eine schöne Sache:

Javascript motion tracking

Hier ist das Demo Video dazu. Da kann man live mit spielen also kein fertiges.

Backups sind wichtig

What Is Happening To The jQuery Plugins Site?

Die haben einfach mal die Plugin Site gelöscht. Einfach so. Aber das Beste kommt noch. Das letzte Backup ist EIN Jahr alt ! Was für Vollpfosten sind denn da am Werk ?

In the process of deleting on the spam, all the plugins were deleted and we didn’t have a recent backup


Wenn man wirklich was bereinigen will, dann macht man doch erst recht ein Backup ?
jQuery war ja noch nie mein Fall und dies bestätigt sich mit so einem stümperhaften Anfängerfehler...

Asynchrones laden von Typekit

Wenn man 3.Anbieter verwendet kann es immer mal wieder vorkommen, dass diese ausfallen. Im Standart lädt sich Typekit im head Bereich der HTML Datei und blockiert den weiteren Aufbau der Seite.

Dies kann man mit verschiedenen Möglichkeiten umgehen:
Typekit, slow hosted scripts and the Flash of Unset Text
Loading Typekit fonts asynchronously

Meine liebste Lösung ist das laden mit dem async Attribut.

Uploads mit Javascript und HTML5

Bei einem Upload einer Datei sollte er Benutzer feedback bekommen ob alles so ist wie es sein soll.
Damit der Benutzer nicht so lange warten muss bis die Datei am Server angekommen ist, kann man nun in modernen Browsern diesen Check in den Browser/Client auslagern.
( Dies ersetzt NICHT die Überprüfung auf dem Server ! )

Wie das funktioniert wird in dem folgenden Artikel beschrieben:
Reading local files in JavaScript

Addthis à la Heise

Facebook macht ja leider was es will ( Aber da die Benutzer ohne viel nachzudenken mit laufen.... ). Nun hat das deutsche Recht leider ein Problem mit der Art und Weise wie Facebook mit den Daten umgeht.

Daher hat sich der Heise Verlag für die eigene Webseite was überlegt.

Nun kann man sich die Idee kopieren und bei sich einbauen. Was aber wenn man leider schon andere Social-Share-Dienste verwendet ?

Bei der Verwendung von Addthis habe ich nun eine Lösung gefunden die das Verhalten nachbaut.

Hier ist der HTML Teil der beim ersten Aufruf der Seite geladen wird.
Klicken und aktivieren für mehr Datenschutz Klicken und aktivieren für mehr Datenschutz


Wie man sieht gibt es zwei "Blöcke". Der Erste ist der normale Addthis Teil, der die gängigen Icons anzeigt.
Der zweite Block beinhaltet erster mal nur zwei Icons die man anklicken kann. Diese Aktion wir via Javascript hinzugefügt.

Dazu kommt noch ein wenig jQuery:

$(window).load(function() {
	$("#socialMediaExtended").click(function() {
		var url = "/getSocialBarExtended";
			
		$.ajax({
			url: url,
			cache: false,
			success: function(html) {
				$('#socialFrame').html(html);
				addthisInit();
			}
		});
	});
	
	addthisInit();
});

function addthisInit() {
	var addthisScript = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
	if(window.addthis) {
		window.addthis = null;
	}
	$.getScript(addthisScript, function() { addthis.init(); });
}


Wenn die Seite geladen wurde, wird mit der Funktion "addthisInit" das JavaScript von Addthis geladen. Wichtig dabei ist der Parameter "#domread=1" am Ende der URL. Damit wird der erste Block mit den Addthis Aktionen hinterlegt und kann verwendet werden.

Wenn man nun in dem zweiten Block auf ein Icon klick wird der AJAX Aufruf ausgeführt. Das was dabei zurückkommt wird in das Element mit der ID "socialFrame" rein geschrieben. Wobei der bestehende Inhalt überschrieben wird.



Nach dem der Inhalt geladen worden ist, wir die Funktion "addthisInit" erneut aufgerufen und Addthis neu geladen und somit werden die neuen Buttons eingebunden und funktionieren.

Auf diese Weise werden die IFrames der Anbieter (Facebook, Google etc.) nur auf Wunsch geladen.

Bei Fragen einfach fragen ;-)

Mif.tree mit Mootools 1.3.2

Das aktuelle Release von Mif.Tree funktioniert nicht mit Mootools 1.3.2 nocompat. Nun habe ich mal damit angefangen die Beispiele mit der aktuellen Version von Mootools zum fliegen zu bringen.

Hier der Code.

Wer mitmachen will kann sich hier beteiligen.

Hash Bang Analyse

Wir hatten ja das Thema schon mal.

Nu hat sich Jeni Tennison die Mühe gemacht und das mal näher analysiert. Sehr genau wie ich finde und auch sehr ausführlich.

Hash URIs
The semantics of hash URIs have changed over time. Look back at RFC 1738: Uniform Resource Locators (URL) from December 1994 and fragments are hardly mentioned; when they are, they are termed “fragment/anchor identifiers”, reflecting their original use which was to jump to an anchor within an HTML page (indicated by an <a> element with a name attribute; those were the days).



Warum muss man alles komplizierter machen ? Hashbang story

Hier mal eine Erklärung was es mit diesem Hashbang hape auf sich hat und warum es totaler Bullshit ist.

Broken Links
I’ve been getting madder and madder about the increasing use of dorky web links; for example, twitter.com/timbray has become twitter.com/#!/timbray. Others have too; see Breaking the Web with hash-bangs and Going Postel. It dawns on me that a word of explanation might be in order for those who normally don’t worry about all the bits and pieces lurking inside a Web address.


Warum versucht man so viel wie möglich in den Browser auszulagern, wenn der Server eigentlich dazu da ist ?
Warum eine Abfrage verdoppeln wenn man die Kriterien schon beim ersten Aufruf hat ?

Manchmal wünsche ich mir schon mal die Zeit wieder zurück in der JavaScript verpönt war....

Warum Dokumentationen so wichtig sind

Jeder kennt das. Code schreiben ist viel toller als Dokumentation.

Leider produziert eine Fehlerhafte oder nicht mehr aktuelle Dokumentation Kosten. Denn wenn man Stunden nach dem "Fehler" sucht nur im an Ende feststellen zu müssen, dass die Dokumentation falsch war und sich mittlerweile die Konfigurationsvariable geändert hat !

Da geht richtig Geld flöten !!

TinyMCE external_template_list_url
Diese Konfigurationseinstellung ist leider falsch.

Hier ist die richtige Stelle dazu:
TinyMCE Plugins Template

Das "Problem" hat mich viel Zeit gekostet..... Ich kann ja verstehen, dass Doku schreiben keinen Spass macht, aber so was sollte nicht vorkommen.


HTML Canvas Spickzettel mit Bonus

Solche Cheat Sheets kennt man ja nun für viele Sprachen.

Dieses bzw. diese Website hat noch ein Bonus. Ich gebe euch einen Tip:
Man kann es spielen und es befindet sich im Fuß der Website ;-)

HTML5 Canvas Cheat Sheet
My memory isn't very good and I often find myself looking up simple things in various specs but sometimes they're just too damn long-winded when you're simply looking for argument x of function y


Schöne neue Browserwelt ;-)

Preload von JS ohne es auszuführen

Preload CSS/JavaScript without execution
Preloading components in advance is good for performance. There are several ways to do it. But even the cleanest solution (open up an iframe and go crazy there) comes at a price - the price of the iframe and the price of parsing and executing the preloaded CSS and JavaScript. There's also a relatively high risk of potential JavaScript errors if the script you preload assumes it's loaded in a page different than the one that preloads.


Mal sehen was man damit alles machen kann...

Arbeiten mit MooTools

Ich bevorzuge MooTools als mein JavaScript Framework.

Nun hat sich David Walsh mal wieder hingesetzt und eine schöne Übersicht geschrieben was und wie es anwendet und wie man seinen JS Code besser macht.

Make your MooTools Code Shorter, Faster, and Stronger
MooTools is one of the most flexible, modular, and well written JavaScript frameworks available. So many people use it but many of them don’t optimize their code. This post will provide you with fifteen simple tips for making your MooTools code shorter, faster, and stronger.


Viel Erfolg !

Jump and Run komplet mit HTML 5 erstellt

HTML 5 definiert viel und die Browser fangen an Stück für Stück es zu unterstützen.

Hier mal ein schönes Beispiel was man damit machen kann.


Biolab Disaster
Biolab Disaster was completely build for HTML5 – that is, JavaScript and the new Canvas and Audio elements. It doesn't need any Plugins, just a good browser. The game was initially conceived as a demo for my Impact Game Engine, but it became much more in the process. I made a short making-of video that shows how the game and the engine were built:


Link zum Spiel

Mootools, und zwar viel davon

Wer gerene mit Mootools arbeitet, so wie ich, der wir in den 2 Beiträgen sicherlich was tolles finden:

10 MooTools Image and Content Sliders
With CSS3 stealing all of the design headlines recently, and with jQuery as popular as it is, it is very easy to forget about any other image and content slider/gallery options you may have. And as such, in this post, we take a look at the best of what MooTools can offer. As you will see, the results are pretty impressive.


50 of the Best Ever MooTools Plugins and Tutorials
I hope no one has forgotten about MooTools as jQuery seems to be taking over the world. Yes, jQuery is by far and away the more popular Javascript Framework, but is it better than MooTools? They both offer the same functionality and they can both be dropped into any website with relative ease. I suppose it just comes down to preference.
Below you will find a selection of 50 of the Best Ever MooTools Plugins and Tutorials.


Dashboard mit MooTools

Ein Dashboard hat bestimmt schon jeder mal gesehen. Eines bei dem man die Elemente bewegen/verschieben kann bestimmt auch.

Wie man das macht und was man dazu braucht wird hier in dem folgenden Tutorial erklärt. Und sogar auf Deutsch ;-)

In diesem Tutorial beschreibe ich, wie Ihr ein Drag & Drop Dashboard mit automatischem Speichern in Cookies mit Javascript und Mootools realisiert.

Dazu benötigt Ihr Grundkenntnisse von Javascript und Mootools sowie ein wenig CSS & HTML Kenntnisse.

Einfaches Javascript Dashboard mit MooTools (Mirror)

via: webmasterpro.de