JavaScript & CSS Performance Teil II

Vor ca. 2 Monaten gab es auf diesem Blog schon einmal einen Artikel über JavaScript & CSS Performance und die dort vorgestellte Methode habe ich inzwischen noch etwas verfeinert, um noch mehr Performance herauszukitzeln. Wer den Artikel noch nicht gelesen hat, dem empfehle ich das nachzuholen, denn wir bauen auf dem Ergebnis weiter auf.
In Moment funktioniert es ja so, dass unser PHP-Skript die einzelnen JavaScript bzw. CSS-Dateien sammelt und zusammen ausgibt. Noch besser wäre es aber natürlich, wenn das Skript die Dateien nicht bei jedem Aufruf neu sammeln muss und dazu gibt es natürlich nur eine Lösung: Caching.
» Weiterlesen

E-Mail-Verschlüsselung mit JavaScript und CSS

Wer seine E-Mail Adresse über eine Webseite veröffentlichen will, sollte sich entweder auf viel Spam vorbereiten oder eine gute Verschlüsselungstechnik verwenden. Da wir Spambots keine Chance geben wollen, müssen wir uns daher mit der zweiten Variante beschäftigen. Ich habe mal zwei nette Möglichkeiten herausgesucht.

E-Mail-Verschlüsselung mit CSS

Finde diese Technik ziemlich cool, hat aber den Nachteil, dass die Adresse nicht als Link ausgegeben werden kann. Und so geht’s:

<span style="unicode-bidi:bidi-override; direction: rtl;">moc.liamg@noipmahcterces</span>

Inprinzip ist es ganz einfach: Die Adresse wird rückwärts aufgeschrieben und per CSS wieder richtig rumgedreht. Das Ergebnis: moc.liamg@noipmahcterces. Leider wird die Adresse bei Copy&Paste rückwärts kopiert…

E-Mail-Verschlüsselung mit JavaScript

Die Benutzerfreundlichere Methode ist die E-Mail-Adresse mit JavaScript zu verschlüsseln. Es gibt unzählige Code-Snippets, die diese Aufgabe alle unterschiedlich lösen, daher gibt es hier nur ein kleines Beispiel (von mir):

<sccript type="text/javascript">
function mencode(i,n,h,d){var a=n;a+='&#64;';a+=h;a+='&#46;';a+=d;var o=document.getElementById(i);o.innerHTML=a;var l=document.createAttribute('href');l.nodeValue='mailto:'+o.innerHTML;o.setAttributeNode(l);}
</script>
<a id="meine-adresse">Irgendein Platzhalter</a>
<sccript type="text/javascript">mencode('meine-adresse', 'secretchampion', 'gmail', 'com');</script>

Hier wird der Link allerdings anklickbar und kann auch wieder ganz normal kopiert werden.

Firebug für Google Chrome und Internet Explorer 8

Wie ich heute herausgefunden habe, besitzt der Google Chrome Browser (Version 3.x) ebenfalls einen Firebug. Der lässt sich entweder öffnen, indem man Rechtsklick auf ein HTML-Element die Option „Element Untersuchen“ wählt oder mit dem Shortcut Strg + Umschalt + J.

Und auch der Internet Explorer 8 ist mit einem Firebug ausgerüstet. Über Extras -> Entwicklertools oder F12 lässt sich das Tool öffnen.