Custom Event in JQuery

In einem Projekt wird asyncron eine JSON Abfrage gemacht und die Daten verarbeitet, das Ganze ist ausgelagert in eine separate JavaScript Datei.  Jetzt möchte ich gerne die Anzahl der zurück gegebenen Elemente auf der Seite ausgeben, dafür nutz ich der Einfachheit halber ein jQuery Schnipsel und füge die Zahl hinter einem bestimmten Element ein. Um diesen Individuellen Schnipsel jetzt allerdings nicht die Ablauf Logik der JSON Abfrage unterzubringen habe ich einen individuellen Trigger integriert und reagieren in einer anderen JavaScript Datei darauf und kann somit beiden „sauber“ von einander trennen.

$.getJSON(this.url, function (data) {
  // ... data verarbeiten

  // wenn fertig diesen CustomTrigger aufrufen
  // für bessere Zuordnung einen individuellen Namenspace nutzen
  // und dann noch die Anzahl derDaten übergeben
  $(document).trigger('AppNameSpace/ItemsCountReady', data.length );
});

In der anderen  JavaScript Datei frage ich dieses Event ähnlich einem Click-Event ab und verarbeite die übergebenen Daten.

(function(){
	$(document).on('AppNameSpace/ItemsCountReady', function(e, results){
		$('h1').after($('<p />').text( results + ' items'));
	});
})();

Quelle:
http://tutsplus.com/lesson/custom-events-and-the-observer-pattern/

Git auf df

Ich habe gerade im Zusammenhang mit df ein git gebraucht und hier einmal die Schritte step by step.

Update: 06.05.2012  htaccess Rules für .gitignore hinzugefügt

Es wird zurest lokal ein Repository angelegt was dann online verfügbar gemacht wird


git + df

auf dem lokalen Rechner ein neues Projekt anlegen

// git repository erstellen
git init

// wenn git noch nicht eingerichtet wurde
// wird beim Commit genutzt
git config --global user.name "Mein Name"
git config --global user.email meine@email.de

//kontrollieren mit
git config --list

.gitignore erstellen:
Wie man Temp Verzeichnisse behandelt
In Webprojekten hat man oft Temp Verzeichnisse. Die Inhalte dieser möchte man natürlich nicht in seinem Repository haben, aber die Verzeichnisse sollen trotzdem angelegt werden wenn man einen neuen Clone anlegt. Dies kann man mit den folgenden Zeilen in der .gitignore bewerkstelligen.

# tmp verzeichnisse
app/tmp/smarty/compile/*
app/tmp/cache/*
!.gitignore

Das /* am Ende bewirkt das nur Dateien in den Verzeichnissen ignoriert werden und nicht das Verzeichnis an sich. Da Git aber keine leeren Verzeichnisse tracken kann, legt man eine leere .gitignore in die Verzeichnisse und die letzte Zeile !.gitignore ist eine Ausnahme für diese Dateien. Die .gitignore in den Temp Verzeichnissen werden also zum Repo hinzugefügt und damit wird bei einem neuen Clone das Verzeichnis angelegt. Tipp: Wenn man Funktionen hat die Temp Verzeichnisse leeren, sollte man hier eine Ausnahme für .gitignore Dateien hinzufügen. 🙂

Quelle:http://www.phpecho.de/git/git-repository-erstellen-und-mit-den-git-server-verbinden-1300.html

// alle Dateien lokal hinzufügen
git add .

// und einchecken
git commit -m "Erster import"

// repository online schieben
// zuerst in den übergeordneten Ordner wechseln

cd ..

// ein "bare clone" erstellen (nur in ein solches soll man pushen)
git clone --bare meinAngelegtesProjekt/.git meinAngelegtesProjekt.git

//den erstellen Ordner nun auf den Server schieben
// zum Beispiel per scp (console) oder winscp(gui)

//
git remote add origin ssh://sshuser@myserver.com/kunden/xxxxxx_123456/repos/meinAngelegtesProjekt.git

//---------------
# löschen eines eingetragenen remote repos, git remote rm
$ git remote rm origin

# anzeigen welche remote repos eingetragen sind
$ git remote
//---------------

// push un pull nun per
git pull origin master
git push origin master

// bzw :
//---------------
Damit man den Namen und den Branch nicht bei jedem push/pull angeben muss, kann man seine Standards in die git config eintragen. Dann reicht ein einfaches "git push" bzw. "git pull".
view source
print?
$ git config branch.master.remote origin
$ git config branch.master.merge refs/heads/master
$ git pull
$ git push
//---------------

// erreichbar auf einem anderen Rechner

git clone ssh://sshuser@myserver.com/kunden/xxxxxx_123456/repos/meinAngelegtesProjekt.git meinOrdner

Als Grundlage habe ich folgende Seiten genutzt (wirklich sehr lesenswert):
http://www.phpecho.de/git/git-repository-erstellen-und-mit-den-git-server-verbinden-1300.html

und

http://www.railshosting.de/hilfe/git

Update: 06.05.2012
Wenn die Seiten über das Web Erreichbar sind sollten die .git Ordner und dit .gitignore Files nicht erreichbar sein. Dazu folgendes in die htaccess einfügen

 <Files ~ "^\.git">
Order allow,deny
Deny from all
Satisfy all
</Files>

Quelle auch hier:
http://www.phpecho.de/git/deployment-einfach-gemacht-mit-git-hooks-1326.html

Mit cURL Short-Urls auflösen

Ich nutze gern mein Smartphone um RSS-Feeds zu abbonieren und hier und da mal ein paar Artikel zu lesen. Einige davon finde ich so gut, das ich Sie später unbedingt noch zu Ende lesen will oder daraus  etwas ausprobieren möchte. Da man mit dem Smathphone schnell und einfach Mails versenden kann, dachte ich mir das wäre ein Ansatz. Also wenn eine E-Mail bei einer bestimmten Adresse ankommt, wird sie auf einer Internetseite angezeigt, hier wollte ich allerdings keine Short-Urls mehr und da kam cURL ins Spiel.


public function getLocationHeaderFromUrl($url){

	$newUrl = '';
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER, TRUE);
	curl_setopt($ch, CURLOPT_NOBODY, TRUE); // remove body
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
	$head = curl_exec($ch);
	curl_close($ch);

	$header_lines = explode("\r\n", $head);

	foreach ($header_lines as $key => $header_line) {
		list($header, $value) = explode(':',$header_line,2);
		if($header == 'Location'){
			$newUrl = trim($value);
		break;
		}
	}

	return $newUrl;
}

Bilder invertieren mit Canvas

Für ein kleines Fun Projekt wollte ich auf einer Internetseite die Bilder von Personen  invertieren und habe dafür ein wenig mit dem Canvas Element rumgebastelt.

Bei einem Click auf einen Link wird eine zufällige Person aus dieser Liste ausgewählt, die Pixel des Bildes werden invertiert und dann wieder als dataUri zurückgegeben.

Raus gekommen ist dabei folgendes:

var person = all.eq(Math.floor(Math.random() * 5));
// bei der Erstellung des Canvas Elementes mit
// jQuery wurde die Größe nicht korrekt übernommen,
// daher auf dem "klassichem" Wege
var $canvas = document.createElement("canvas");
$canvas.width = 210;
$canvas.height = 98;
var ctx = $canvas.getContext('2d');
var img = person.get(0);
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, $canvas.width, $canvas.height);
var imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height);
var pixels = imageData.data;
var numPixels = imageData.width * imageData.height;
for (var i = 0; i < numPixels; i++) {
	pixels[i * 4] = 255 - pixels[i * 4];
	pixels[i * 4 + 1] = 255 - pixels[i * 4 + 1];
	pixels[i * 4 + 2] = 255 - pixels[i * 4 + 2];
};
ctx.putImageData(imageData, 0, 0);
// Daten wieder zurückschreiben
person.attr('src', $canvas.toDataURL('image/jpeg'));

Als Grundlage habe ich mich auf diese fantastischen Tutorials gestütz:
http://css.dzone.com/articles/html5-image-effects-sepia
http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-pixel-manipulation/

Eintrag eins

Der goldene erste Eintrag, auf das es viele weitere werden… habe ich das so richtig gemacht ? So sind doch schon Milliarden von neuen Blogs an den Start gegangen auch wenn davon nur noch 50 übrig sind. ich hoffe ich überlebe mit meinem vorhaben länger 🙂