Bananas Development Blog - JS / AJAX

getElementById und jQuery

nospam@example.com (Banana) — Wed, 09 Jan 2013 09:03:28 +0100

Warum muss jQuery da eine eigene Suppe kochen ?

Normales JS:

if(document.getElementById('theID')) {
// do stuff
}
else {
// do stuff if not there
}

Das Gleich mit jQuery:

if($('#theID').length == "0") {
// do stuff
}
else {
// do stuff if not there
}

Darauf muss man erst mal kommen !
Warum kann da jQuery nicht einfach false zurück geben, wenn NICHTS gefunden wurde ?

Neues ist nicht immer gut

nospam@example.com (Banana) — Wed, 18 Jul 2012 08:57:54 +0200

Das hippe Dinge nicht immer das Wahre sind, hat sich ja mit dem Hashbang gezeigt.

Leider haben die das nicht so ganz kapiert...

Twitter crashes itself with commas

Today Twitter died in Opera while I was using it. One tweet sent, one distracting link read - and all of a sudden the UI was incomplete, missing the "Tweet" box on the left and various features like "retweet" were no longer working.

Und kommt mir blos nicht mit dem Opera bullshit... Macht es erst mal selber. Dann sehen wir weiter.

Hier ist wahrscheinlich der Grund dazu. Der Autor selber sagt, dass es eigentlich nur spielerei ist.

Motion tracking mit JS

nospam@example.com (Banana) — Tue, 20 Mar 2012 08:06:24 +0100

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

nospam@example.com (Banana) — Fri, 09 Dec 2011 13:16:21 +0100

• 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

nospam@example.com (Banana) — Wed, 09 Nov 2011 13:01:47 +0100

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

nospam@example.com (Banana) — Wed, 26 Oct 2011 13:22:38 +0200

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

nospam@example.com (Banana) — Tue, 13 Sep 2011 09:34:31 +0200

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.

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

nospam@example.com (Banana) — Fri, 29 Jul 2011 10:03:16 +0200

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

nospam@example.com (Banana) — Mon, 07 Mar 2011 13:34:37 +0100

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

nospam@example.com (Banana) — Thu, 10 Feb 2011 15:33:10 +0100

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

nospam@example.com (Banana) — Wed, 09 Feb 2011 09:04:14 +0100

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

nospam@example.com (Banana) — Wed, 19 Jan 2011 19:53:00 +0100

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

nospam@example.com (Banana) — Tue, 07 Dec 2010 09:11:18 +0100

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

nospam@example.com (Banana) — Tue, 02 Nov 2010 08:18:07 +0100

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

nospam@example.com (Banana) — Tue, 28 Sep 2010 12:15:12 +0200

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