Latest Publications

Cloud-Zoom in der Fancybox

Hallöchen,

Heute möchte ich seit langem mal wieder etwas technisches Bloggen. Ich habe mich heute mit fancybox in zusammen arbeit mit cloud-zoom beschäftigt. Und so schwer is das eigendlich garnicht ;) Also auf gehts:

Fancybox initialisierung:

  1. $("a.gallery").fancybox({
  2.         ‘onComplete’    :       function(arg) {
  3.                 $(‘#fancybox-img’).wrap(
  4.                         $(‘<a />’)
  5.                                 .attr(‘href’, $(arg[0]).attr(‘href’))
  6.                                 .addClass(‘cloud-zoom’)
  7.                                 .attr(‘rel’, "position: ‘inside’")
  8.                 );
  9.                 $(‘.cloud-zoom’).CloudZoom();
  10.         }
  11. });

Und in der cloud-zoom.css noch den border deaktivieren:

  1. /* This is the zoom window. */
  2. .cloud-zoom-big {
  3.         /*border:4px solid #ccc;*/
  4.         overflow:hidden;
  5. }

Thats it. Have fun!

Ein neuer Gast-Blogger

Hallo liebe Leser,

Damit dieser Blog mal wieder ein wenig Leben eingehaucht bekommt. Habe ich jetzt einen ersten Gast-Blogger ein zuhause gegeben. Er hat keinen Blog aber braucht dringendst eine Plattform um seine Gedanken mit der Welt zu teilen. Und da ist dieser kleine beschiedene Blog vielleicht für den Anfang genau das richtige.

Es ist  *Trommelwirbel* Levente, seines zeichens Software Developer bei der selben Firma wie ich es bin. Ich hoffe das ich damit die Qualität des Blog’s  erhöhen kann.

Ihr solltet ihm am besten auch gleich auf twitter folgen: anthraxx42

EuroVision: Google sagt Sieg von Lena vorraus

Google kann die Zukunft vorhersagen. So schallt es momentan aus der Blogosphere, der Grund:

Google bestimmt anhand von den gesuchen Künstlern welches Land wieviele Punkte für den jeweiligen Kanidaten geben würde. Hier das ergebniss:

Interessant oder?!

ComputerBild startet petition gegen die GEZ

Jetzt mal etwas was mich schon seit dem ich berufstätig bin nervt: die GEZ!

Das sind alles abzocker! Ich will ARD, ZDF und wie sie nicht alle heißen garnicht sehen. Blech’ aber mehr dafür als sich Sky und Co je trauen würden zu verlangen. Und jetzt sollen auchnoch die gebühren für “neuargige kommunikationsgeräte” um mehr als 200% erhöht werden.

Deshalb:

Jetzt teilnehmen: Online-Petition gegen den GEZ-Wahnsinn
//Edit: Gnnnar, danke @ComputerBild. da will man euch mal Unterstützen und ihr nehmt das Bild offline …. Ich weiß schon warum die “Fach”*hust*Zeitschft bullshit ist!

R-Type in Java die 2.

Nach einer (gefühlt) ewigen frimelei, habe ich jetzt in meinem R-Type spiel auch aliens eingebaut.

Aber seht selbst:

R-Type in Java

Ich spiele grade ein wenig weiter mit JAVA herum und habe da ein ganz nettes tutorial gefunden: http://zetcode.com/tutorials/javagamestutorial/

Dabei herumgekommen ist ein erster gehversuch, der dem Klassiker R-Type nachempfunden ist, hier ein video dazu:

Natürlich lässt sich das raumschiff mit der Tastatur steuern. Mal sehen wie weit ich damit noch komme, vielleicht mann man ja demnächst auch irgendwann mal schießen und dann gibt’s vielleicht auch irgendwann nochmal gegener :)

So long…

Top Searches?! – WTF

Manchmal wundere ich mich doch, über welche Suchbegriffe Leute meinen Blog finden. Hier mal ein Einblick in die “Top Searches”

Top Searches 07.04.2010

Top Searches 07.04.2010

Man beachte besonders den 4. Punkt xD

Speed up your Blog! Part 3

Moin und Wilkommen zum letzten Teil der Serie Speeed up your Blog!

Nachdem es letzte Woche um die Expire-Header ging, und davor auch um zipp’ed Content, will ich mich nun den Geschwindigkeitsverbesserungen im Code selbst widmen. Also weg von der Server-config ;)

HTTP-requests minimieren / Javascript und CSS Dateien “Crunchen”

Die letzten beiden Punkte möchte ich einfach mal zusammenfassen, denn grade wenn Ihr WordPress benutzt, gibt es dafür eine sehr einfache Lösung die quasi gar keiner weiteren Erklärung bedarf. Dennoch möchte ich zuerst einmal darauf eingehen warum dieser Punkt auch Performance Steigerung bringen kann. Denn Ein Browser schafft ca 5 Requests gleichzeitig, das ist also die Ideale anzahl an Request für euren Blog / eure Homepage. Wer das hinbekommt, bekommt ein Sternchen von mir, denn das ist nur sehr sehr schwer möglich! Alles was eure Page mehr an requests braucht, muss also nacheinander abgearbeitet werden. Das kostet Zeit und das nicht zu wenig.

Kommen wir zum nächsten Punkt, wenn ihr schon dabei seid eure CSS und JavaScript Files irgendwie zusammen zu schustern, dann bietet es sich i.d.R. auch IMMER an, diese gleich zu minimieren, oder auch “crunchen”. Dafür gibt es offene Projekte wie z.B. Minify, das auf GoogleCode gehosted wird. Oder aber man implementiert es gleich selbst, das ist im übrigen auch das was ich getan habe, nicht für diesen Blog aber für “Die Stämme”. Allerdings sollte man sich zum “crunchen” der dateien an fertigen Biblitheken bedienen, denn hier macht es wenig sinn, das Rad neu zu erfinden. Ich bin am ende für JavaScript bei JSmin gelandet, und für CSS beim CSS.Kompressor von Minify.

Hier gibt es einspar potenzial, wenn Ihr z.B. die CSS datein soweit aufsplittet, das jede unterseite eine eigene CSS datei hat diese sucht ihr dann beim aufrug zusammen, fasst sie auch in eine datei zusammen, dann nurnoch mit einem Kompressor drüber und voila, schon hat man die perfekte CSS-Datei, diese kann man dann noch Weg-Cachen, denn das Crunchen, bruacht schon eine menge CPU Zeit.

Solltet Ihr WordPress benutzten, ist die Lösung viel viel einfacher: Die Lösung heißt CSS-JS-Booster, diesen einfach wie jedes andere WP-plugin auch installieren und es nimmt euch genau die von mir eben beschriebenen Schritte ab.

Klasse! Das soll es jetzt auch erst einmal gewesen sein, vielleicht konnte ich dem ein oder enderem etwas neues zeigen, über Feedback würde ich mich diesmal sogar noch mehr freuen als sonst ;)

Vielen dank geht an dieser Stelle an Lars ;)

Speed up your Blog! Part 2

Moin Moin,

Nachdem wir uns letzte Woche um den gezippten Content gekümmert haben soll es heute weiter gehen mit den Expire-Header

Die expire header richtig setzten

Hier wird es jetzt schon etwas Tricky, denn sobald ihr Content mit Expire-Headern ausliefert, fordert der Browser die Daten gar nicht erneut an, wenn die Expire Zeit noch nicht abgelaufen ist. Also werden Änderungen nicht an den Client übertragen. Jetzt gibt es mehrere Möglichkeiten, entweder ihr hängt an jede Datei einfach einen weiteren GET-Parameter, der die sog. “mtime” (maketime) als UNIX-Timestamp enthält, oder aber ihr wisst ihr habt sowieso nicht sooo viel Bewegung in eurem Pagequellcode, wie es eigentlich bei fast jedem 0-8-15 WordPress  Blog sein sollte. Ich habe mich für die 2. Möglichkeit entschieden, allerdings setze ich dann die ExpireHeader nicht soweit in die Zukunft.

Also los geht es,

/etc/apache2/mods-enabled/expires.conf

bei mir gab es diese Datei anfangs gar nicht, also einfach anlegen.

<IfModule mod_expires.c>
ExpiresActive on

####ExpiresDefault “access plus 2 months”
ExpiresByType image/x-icon “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType audio/x-wav “access plus 1 month”
ExpiresByType audio/mpeg “access plus 1 month”
ExpiresByType video/mpeg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/quicktime “access plus 1 month”
ExpiresByType video/x-ms-wmv “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType text/css “access plus 1 hour”
ExpiresByType text/javascript “access plus 1 hour”
</IfModule>

Ich denke die datei ist quasi selbsterklärend. Nächste Woche geht es dann weiter mit HTTP-Requests und Content-Compressors ;)

Speed up your Blog! Part 1

Moinsen,

Heute mal wieder etwas nützliches, ich habe grade mal ein wenig an der Performance von meinem Blog gedreht, eigendlich ist es garnicht so schwer. Und wie so oft die besten ergebnisse erreicht man mit den kleinen Änderungen

  • Content gezipp’t ausliefern
  • Die expire header richtig setzten
  • HTTP-requests minimieren
  • Javascript und CSS datein “crunchen”

So nun will ich noch erklären wie man diese änderungen für seinen Apache Webserver richtig einstellt. Ich habe hier folgende vorraussetzungen:

Einen Debian Etch vServer, Apache Webserver, PHP, MySQL usw… also das klassische LAMP-Setting.

Damit der Artikel jetzt nicht eeeeeeeeeeeeeeeeewig lang wird, gibt es zu jedem der Punkte oben jede Woche einen neuen Artiekel!

Fangen wir also an!

Content gezipp’t ausliefern

Die absolut beste möglichkeit ein riesen Stück performance zu gewinnen! Einfach die folgende config um diese Zeiler erweitern

/etc/apache2/mods-enabled/deflate.conf
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/jpeg
</IfModule>

Die Datei kann natürlich um jeden beliebigen MIME-Type noch erweitert werden. So das war es auch schon, jetzt noch einmal den Apache neustarten und ihr werdet es sehen, wenn ihr jetzt mal eure Seite betrachtet, es wird eine menge gebracht haben. ;) Versprochen!