Alexander Zerr

JavaScript Komprimieren

Auf dem Markt haben sich ein Paar bekannte JavaScript Kompresser positioniert wie Packer 3.1, Dojo ShrinkSafe, YUI Compressor und JSMin, die den JavaScript Code komprimieren und den unnötigen Code zu entfernen. Jeder von ihnen nutz seine Technik wie zum Beispiel der Packer es mit der Komprimierung macht wie ein ZIP Programm. Der ShrinkSafe und JSMin entfernen die Umbrüche, Lehrzeichen und Kommentare. Der YUI Compressor macht es mit der Compiler Technik um den JavaScripte Code sozusagen neu zu Kompilieren mit abgekürzten Funktion- und Variablen Namen.
Alle Vier haben bis jetzt ihr Gutes getan um den Code so klein wie Möglich zu komprimieren. Doch jetzt komm wer den sonst? Google.

Google hat vor kurzem seinen Closure Compiler der JavaScript Welt öffentlich gemacht den jeder nutzen kann um seinen JavaScript Code zu Komprimieren. Da ich öfters auf die Komprimierung zugreife, hab ich auch einen kleinen Test gemacht und siehe da, der Google Compiler hat es um ca 1KB geschafft den Code etwas kleiner zu verpacken .

Getestet hab ich mit dem jQuery 1.3.2 Framework ohne Kommentare. Hier sind die gerundeten Ergebnisse:

• Normal: 124KB
• Google Closure Compiler: 55KB
• YUI Compressor: 56KB
• Dojo ShrinkSafe: 70KB
• JSMin: 74KB

So gesehen kann man seinen JavaScript Code sehr einfach fast zu Hälfte kleiner machen und damit einen schnellen Download ermöglichen. Denn auch in der Zeit des DSLs ist es Ratsam bei vielen JavaScripten einfach die Komprimierung zu nutzen.

Damit ist es aber noch nicht Schluss und Google macht noch ein Extra dazu, in dem man die Advanced Optimisation nutzen kann die auch Google bei seinen eigenen Scripten nutzt. Die Technik Reduziert den Code noch um 5KB und das sind eigentlich kein Krümel mehr. Leider ist der Code für Außen nicht mehr Verständlich und somit schwer zu Lesen als auch nicht mehr so einfach nutzbar. Alle Funktion und Variablen Namen werden so verkürzt, dass man nur noch ABC Salat hat. Diese Komprimierung ist gut für Autonome JavaScript Schnippsel zu gebrauchen.

Wer sein Code einfach und schnelle Komprimieren will der kann denn altbekannten Compressorrater nutzen der es mit allen Oben genannten Komprimieren den JavaScript Code packt und Plus dazu sogar noch die GZip anbietet.

Oder man kann ab jetzt an den Closure Compiler von Google nutzen. Der ist aber auf 200KB limitiert und bei meinem Test mit jQuery Kompilierung hat er sogar geschafft meinen Firefox zu killen. Ich hab mein Code mit der API REST Schnittstelle komprimiert. Wer mehr vom Google Closure Compiler erfahren will, der kann die Dokumentation ansehen. Dort ist die API Schnittstelle kurz definiert.

Posted in Tipps | No Comments »

Noch mehr JavaScript Tricks

Und wieder hat John Resig und paar andere JavaScript Entwickler ein paar Geheimnisse über JavaScript präsentiert. Es sind eigentlich keine Geheimnisse sondern die neusten Erfahrungen in der JavaScript Entwicklung, welche für die Neueinsteiger sowie auch für Profis als nützliche Tipps dienen.

Posted in Slides, Tipps | No Comments »

JavaScript lernen

Wie könnte man JavaScript besser lernen? Nur wenn man Code von anderen Entwicklern anschaut, aber um ihn zu verstehen muss man fundamentale Kenntnisse der Programmierung kennen und wissen wie man sie einsetzt. Die Beispiele die John Resig in dem Learning Advanced JavaScript Projekt zeigt, sind sehr gut zum Verstehen wie JavaScript arbeitet.

Folgende Themen werden in Code Schnipseln behandelt:

• Defining Functions
• Named Functions
• Functions as Objects
• Context
• Instantiation
• Flexible Arguments
• Closures
• Temporary Scope
• Function Prototypes
• Instance Type
• Inheritance
• Built-in Prototypes
• Enforcing Function Context
• Bonus: Function Length

Posted in Tipps | No Comments »

jYoup in the Wild

Ich betreibe nebenbei eine Seite wo ich Videos von Youtube einbinde. Bei einem Video gibt es kein Problem es in den Artikel zu integrieren. Es gibt aber Videos die wegen ihrer Länge und Größe in mehrere Teile aufgeteilt werden. Wen ich so ein Video in den Artikel integrieren will, muss ich alle Teile einfügen. Damit sprenge ich meinen Content als auch den Download Trafic der User die alle Teile laden müssen. Das hat mich immer genervt und ich hab angefangen nach der Lösung zu suchen.

Es gab da schon eine API von Youtube, mit welcher man mit JavaScript den Playern Steuern kann. Diese API hab ich angefangen zu studieren und mir wurde am Ende klar das ich einen eigenen Player mit der API von Youtube zusammen stellen werde.

Am Anfang hab ich jQuery als Bibliothek genommen und entwickelte auf ihr Kompletten Player. Was mich gestört hat, war die Größe der jQuery. Da ich noch den swfobject genutzt habe um Flash zu integrieren wurde es mir zu viel. Ich hab einfach die beiden rausgeschmissen mit dem Ziel dem Webmaster der diesen Player einbaut nicht noch mit anderen Bibliotheken zu überladen. Und so hab ich den jYoup geboren. Der sehr schlank geworden ist. Im komprimierten zustand ist der Player jetzt 9Kb. Mit den Buttons und den Style Sheets wiegt er insgesamt 38Kb. Den größten Teil nehmen die Bilder ein, da ich sie in PNG mit Transparenz abgespeichert habe, um die Farbe des Players nach belieben zu verändern ohne die Buttons anzufasen. So kam noch ein Hack dazu um die Buttons auch im IE6 mit Transparenz zu zeigen.
Bei der ersten Version hab ich durch den Wmode Parameter die Bedienelemente über den Flash Player gelegt. Auf einer Seite ohne Inhalt lief das Video recht Flott. Als ich den Player in ein Blog eingefügt habe, war ich voll erschrocken an der Prozessor Last was der Player produzierte. Noch nicht mal die Abspielzeit wurde gezählt auf meinem Alten 2500 MHz alten Notebook. So musste ich die Elemente unter dem Video anlegen um die Wmode Transparenz auszuschalten. Danach lief der Player ohne ruckeln.
Das war die Vorgeschichte, jetzt stell ich den Player einmal vor.

Was ist jYoup:
jYoup ist ein selbständiges Objekt der den API Player und die Bedienung des Players auf JavaScript Basis vereint. Man kann den Player mit einer langen Liste an Videos in den Html Code in einem Script Tag integrieren und schon hat man einen einzigen Youtube Player der alle Videos in sich abspielt.

<script type="text/javascript">
jYoup({playList: 'VideoID1,VideoID2,VideoID3',width:500});
</script>

Design:
Das aussehen des Players kann über die Styles verändert werden. Wie zum Beispiel den Rahmen oder die Farbe der Bedienelemente kann nach belieben verändert werden ohne JavaScript anzufassen. Da es so einfacher ist Player zu designen ohne JavaScript. Das einzige was per JavaScript gesetzt werden soll ist die Breite des Players, die Höhe ist Optional. Jeder kann die Buttons austauschen oder die Original Buttons des Players aus einer PSD Datei an eigene Farben anpassen.

.jyp_player { float:left; background:red; border:2px solid red; }
.jyp_play { background:url(/jyoup/pix/play.png); }

Und hier ist der Player Live mit 2 Videos:

Was hat jYoup was Youtube nicht hat:

• Playlisten ohne Registrierung selber zusammen stellen
• Wiederholung der Playlist oder einzelnes Video
• Eigene Gestalltung der Bedien Elemente

jYoup in nächster Zukunft:

• Fullsize wird integriert
• Kommentare nach der Zeitleiste
• Dynamisches Laden der Video Eigenschaften wie Name und Beschreibung
• Plugin für Wordpress

Verträglichkeit der Browser:

• IE6 / IE7
• Firefox 2 / 3 (sowie auf Linux)
• Chrome
• Opera 9.2 und höher
• Andere Browser noch nicht getestet (sagt bescheid ob es auf anderen Browsern läuft)
• Konqueror lief leider nicht

Nachteil:
Die einzigen Nachteile sind, wenn die User JavaScript ausschalten oder alten Browser benutzen. Mir sind diese User sowieso egal, den sie sollten Schleunigst auf neueren Browser umsteigen und JavaScript aktivieren um das Internet in Vollem Umfang zu geniessen.

Lizens:
Ich habe den Player unter GNU Lizens gestellt, somit kann jeder den Player ohne bedenken nutzen und bearbeiten.

Mitmachen:
Da ich nicht soviel Zeit habe den jYoup Komplett zu betreuen brauche ich Hilfe. Wenn jemand Interesse hat den Player mit neuen Features zu bereichern und am Projekt teilzunehmen. Der kann sich bei mir melden und ich schalte ihn dann für den Projekt frei. Ich hab den ganzen Player in Google Code eingefügt wo es die Möglichkeit gibt SVN zu nutzen.
Dazu brauche ich Hilfe Seiten wie man den Player einsetzen kann.
Und Ideen wie man den Player noch besser macht.

Wo kann ich den Player runterladen?
Auf der Projekt Seite jYoup kann man den Player runterladen oder diesen Download Link folgen.

Posted in jYoup | 1 Comment »

Dezentes JavaScript mit jQuery

Wenn man in JavaScript versucht mit wenig Code den grössten Erfolg zu erzielen, kommt man immer wieder in eine Routine rein die den Code mit JavaScript Methoden aufbläht. Um das zu vermeiden, kann man jQuery nutzen. Schon hat man an eigenem Code sehr viel gespart und das Ergebnis lässt sich sehen.

Simon Willison hat das in eine Präsentation gepackt + die Beispiele auf seiner Seite abgelegt.
Es sind sehr schöne Beispiele entstanden die mir gefallen haben und auch die Präsentation ist informativ geworden. Für jQuery Lehrlinge zu empfehlen.

| View | Upload your own

Posted in Allgemein, Slides | No Comments »