Prototype LogoJohn-David Dalton hat mal wieder das Protoculous Paket aktualisiert. Endlich ist das neue Prototype 1.6 um 60% kleiner. Diesmal hat er auch ein kleineres Protoculous (nur mit effects.js) erstellt, welches in der Packer Variante ohne GZIP nur 64k wiegt (mit GZIP nur 28k).

Natürlich gibt es auch wieder das normale Protoculous (Prototype 1.6 mit Scriptaculous 1.8) als Packer (92k) und Shrinkvars Version (152k).

Nun kann man wohl getrost umsatteln. Und wenn die “deprecated” Sektion aus Prototype rausfliegt wird es wohl noch schmaler.

Download

Happy coding!

Stylished.com Model ContestIn letzter Zeit ist es ja recht still hier im Blog. Das hat einen guten Grund: Meine Arbeit bei Stylished.com. Heute möchte ich euch die hübsche Ajax Anwendung zeigen, welche ich die letzten Tage entwickelt habe.

Stylished ist eine soziales Netzwerk für Models, Fotografen und Modelagenturen. In der angeführten Anwendung geht es darum, dass Models in einem virtuellen Contest, eins gegen eins, antreten und sich somit Punkte verdienen.

Stylished.com Model Contest RanglisteDie Teilnahme funktioniert automatisch und die entstehenden Wertungen fliessen in eine Rangliste mit den Kategorien Newcomer, Professionell und Semi-Professionell.

Von der technischen Seite ist die Anwendung komplett in Javascript geschrieben und wird liebevoll mit JSON gefüttert. Als Ajax-Bibliothek wurde natürlich das von mir bevorzugte Protoype und Script.aculo.us Paket gewählt.

Zum Contest: http://www.stylished.com/contests/

Viel Spass damit!

Ich hab mich mal ein wenig mit Adobe AIR befasst. Die Beta soll ja auch den Webentwicklern mit HTML/JS Hintergrund entgegenkommen. Ich habe mich also ans Werk gemacht und musste feststellen das dies wirklich noch zu sehr eine Beta ist.

Es ist möglich Prototype und sonstiges Javascript zu verwenden und auch CSS Frameworks with YUI Fonts-Reset-Grids einzusetzen. Also wirklich ganz normales HTML, mit und ohne Windows Fenster drumherum. Damit hat man schon mal eine ganze Menge Freiraum! Was die Client/Server Kommunikation betrifft, kann man beliebig Ajax verwenden und natürlich auch die von AIR gebotenen Schnittstellen (windows.runtime im DOM). Auch tief verschachtelte Ordner werden von CSS und HTML ohne Probleme übernommen.

Als ich so weit war dem ganzen Leben einzuhauchen traten aber schon die ersten Probleme auf: Es wurde mein “bitte warten” GIF nicht abgespielt. Ich war ja bereit ein wenig einzustecken und komplett auf HTML und Javascript zu setzen, aber keine animierten GIFs - um es halbwegs interessant aussehen zu lassen - ist absolut inakzeptabel. Davon habe ich mich aber wenig beeindrucken lassen. Geht ja auch anders … dachte ich.

Ich habe dann die Animation einfach in Flash umgesetzt und das SWF in das HTML mit dem üblichen Object-Tag eingefügt. Man sollte meinen dass dies klappt, wo AIR doch eigentlich zusammen mit Flex sowieso den Schwerpunkt in Flash hat. Ergebnis: Fehlanzeige! SWF Dateien werden nicht innerhalb des HTML Bereichs angezeigt. Egal mit welchen Tricks. Im Forum habe ich dann erfahren dass dies bekannt ist und mit der nächsten Version kommen soll. :-(

Okay.. Also HTML Support ist drin und läuft auf WebKit (was mehr oder minder eine gute Wahl ist), aber Animationen lassen sich nicht mit den üblichen Mitteln realisieren. Damit ist das ganze zur Zeit ziemlich sinnlos, aber für mich nicht gänzlich gestorben. Ich werde nun mal versuchen mit Flash und Flex die Sache auszuprobieren, denn Lust meine ursprüngliche Idee umzusetzen habe ich immernoch.

Es gibt ein Beta Update für Flash womit Adobe AIR integriert wird, aber auch hier nur halb! Es gibt kein Code-Hinting, was häufige Blicke in die Referenz Doku zur Folge hat. Mit ein paar Tricks kann man aber sich bis zum Adobe Integrated Runtime 1.0 Release behelfen.

Schade das der Einstieg in die AIR Entwicklung nicht so leicht war, wie erhofft.

Wer es auch mal probieren möchte sollte sich Aptana IDE besorgen. Dort ist es super integriert.

AIR HTML QuickStart
AIR Javascript Language Reference

Hmm.. ein JSON XHR mit mehr Sicherheitsfeatures klingt gut - aber wenns der User nicht hat, dann hat er einfach Pech? Verstehs nicht ganz, aber ich seh es mal als Proof of Concept. Wenn es wirklich anklang finden sollte, kann man ja immernoch darauf setzen.

JSONRequest Extension

via Ajaxian

Ich las grad wieder auf Ajaxian darüber und auch ich selbst steh dem oft gespalten gegenüber. Ich leuge nicht ein starker Vertreter von Prototpye.js zu sein, und wahrscheinlich werden folgende Gedanken davon geprägt sein, aber ich finde ich muss mal schreiben was ich an Prototype so wirklich mag und was ich bei jQuery vermisse.

Das Frameworks einen neuen Schreibstil mit sich bringen ist bekannt. Von den ganzen Codeschnipseln und endlosen Experimenten kann ich sagen dass Prototype einfach eleganter ist, bzw. es liest sich einfach schöner.

Ich würde zum Beispiel niemals auf die Idee kommen einen Ajax-Chat oder ein komplexes Interface mit jQuery umzusetzen, denn dort würde man (einfach um den Überblick nicht zu verlieren) Klassen und Objekte erstellen um die Anwendung in handliche Einheiten zu zerlegen. Dazu ist jQuery meiner Meinung nach einfach nicht Gedacht. Prototype wartet hierzu mit einem ganzen Arsenal von Utilities auf.

Bei jQuery gibt es viele Nebenprodukte wie $.each, die vielleicht wie eine Alternative zu Prototype erscheinen, aber auf mich eher wirken als wäre den Entwicklern später eingefallen das sie noch was vergessen haben. Aber deshalb sind es eben zwei paar Schuhe.

In jQuery dreht sich alles um Elemente (eher Sammlungen von Elementen). Es wird immer davon ausgegangen dass man mit HTML arbeitet, was meiner Meinung nach ein riesiger Nachteil von jQuery ist. Zur DOM-Manipulation bestens geeeignet (und man kann dort wirklich mächtige Ein-Zeiler schreiben), aber wenn man mit fremden Daten arbeitet kommt man schnell ins Schleudern. Dann ist plötzlich jQuery nicht mehr so toll.

Prototype hat seine stärken bei der Verarbeiten von Daten. Arrays, Hashes und Strings. Das liegt daran, weil Prototype eine ganz andere Route verfolgt. Es erweitert die vorhandnen Javascript Objekte und würzt es mit einem einfachen Modell zum Erstellen von Klassen. Es hilft einem also nicht nur schnell an irgendwelche Elemente zu kommen, sonder greift einem auch in anderen Bereichen unter die Arme.

Demnach kann man jQuery und Prototype auch gar nicht wirklich gegenüber stellen.

Bei der Frage nach Prototype oder jQuery antworte ich eigentlich deshalb meist: Wollen wir ein wenig HTML manipulieren, oder wollen wir eine Ajax-Anwendung schreiben? Letzteres wäre dann Prototype.

Man muss nur mal einen Blick in Dokumentation beider schauen. Bei Prototype gibt es für alles etwas. Bei jQuery stellt der DOM Abschrnitt alles andere in den Schatten.

Prototype kann einfach mehr und lässt einen nicht irgendwann im Dunkeln, weshalb Prototype mein Favorit für jede Anforderung ist.

Geoffrey Grosenbach und Justin Palmer vom Prototype Core-Team haben sich die letzten Wochen über zusammengesetzt und den zweiten Teil der Prototype Video Serie zusammengestellt. Das Video geht 90 Minuten und zeigt euch wie man mit Ajax und Json seiner Applikation den letzten Schliff verpasst, und worauf man achten muss bevor man Ajax verwendet. Wie auch im ersten Teil wird empfohlen das Tutorial mit Firefox samt Firebug zu verfolgen. Beispiel Rails Projekte die im Video verwendet werden, liegen dem Download bei.

Vorschauvideo

Ihr könnt das Video (quicktime und ipod format vorhanden) für 9 Dollar (rund 6 Euro) via PayPal oder Google Checkout bei peepcode.com kaufen.

Ich habe mir die Zeit genommen und eine Offlineversion der Wiki Doku zusammengestellt. Ich hoffe es gefällt und ist eine gute Ergänzung zu den bereits bekannten Prototype API Docs.

Es gibt sie in drei Geschmacksrichtungen: Als druckbares PDF ohne hyperlinks und bookmarks und als desktop version mit klickbaren Querverweisen. Obendrauf gibt es die CHM zum einbauen in eure IDE und als einfache Schnellreferenz unter Windows. Dateigrösse varriert von 72K bis 250K als PDF und ist circa 40 Seiten lang.

Zur Download Seite

Letzte Woche habe ich mir die knapp 1-stündige Einführung des Firebug Autors Joe Hewitt angetan. Leider sind gute Entwickler nicht auch gleich immer gute Erzähler, mich eingeschlossen. :)

Per Zufall fand ich vorhin zu Firebug zwei kurze, aber präzise Tutorial-Videos auf YouTube. Das erste Video beschreibt wie man den Debugger im Allgemeinen einsetzt, und das Zweite zeigt wie man mit Firebug das CSS einer Seite temporär ändern kann, was es alles im Net-Tab zu sehen gibt und wie man den Inspector benutzt um schnell an Elemente zu kommen.

  1. YouTube: Introduction to Debugging AJAX Application
  2. YouTube: Introduction to CSS editing using Firebug
  3. Yahoo Video: Joe Hewitt’s Firebug Overview

Für CakePHP Baker dürfte dieser Link hier auch interessant sein: FireCake, ebenso wie für Nicht-Baker diese PHP Alternative: FirePHP .. oder beides ;)

Hier die wichtigsten Eckdaten

Wie es scheint steht das neue Release ganz im Zeichen von $$.

  • $$ wurde komplett überarbeitet und ist nun super-schnell. (tests)
  • $$ hat bei manchen Selektoren doppelte Ergebnisse geliefert. Das wurde behoben.
  • $$ unterstützt, bis auf ein paar Pseudo-klassen, CSS3 komplett.

Weitere Neuerungen

  • Element up, down, previous und next wurden verbessert.
  • Element get/setStyle sind ebenfalls schneller
  • setStyle bei opacity:0 funktioniert in IE nun korrekt.
  • Neue nützliche String Erweiterungen: empty, blank, times, include, sowie starts/endsWith
  • Zusätzlich kommt ein hauseigner JSON Support: .toJSON() und evalJSON()
  • String escapeHTML und Array uniq() sind schneller geworden

Es gibt noch viel mehr, aber das hier waren so die interessantesten Updates aus dem Originalbeitrag auf prototypejs.org. Wie in den Kommentaren bei zu lesen war, müssen Benutzer von Script.aculo.us die neuste SVN Version ausschecken bevor versucht wird Prototype 1.5.1 RC zu integrieren.

Download prototype.js v1.5.1 RC1

Ein “neues” Buch ist erschienen, und soweit mir bekannt das erste seiner Art: Prototype and Scriptaculous in Action. Seit Oktober bereits als eBook zu kaufen, jedoch nun auch gebundenem Format erhältlich. Wer Englisch kann, und das hier so oft beschrieben Prototype Javascript Framework erlernen möchte, sollte sich überlegen dieses Buch zu kaufen. Ich habe mir die Einleitung durchgelesen (freier Download auf der Seite) und der Schreibstil ist gut und auf den Punkt. Leider fehlen weitere Beispieltexte, so dass ich nicht abwägen kann für welche Zielgruppe das nun gedacht ist (Beginner/Advanced). Ich spiele daher noch mit dem Gedanken mein PayPal damit zu belasten. Der versprochene Blick hinter die Kulissen von Prototype im 3. Abschnitt des Buches reizt mich schon.

Das Autoren-Team besteht aus Dave Crane, bekannt durch den Bestseller Ajax in Action, Michael Bibeault, Co-Autor bei Ajax in Practice, Java-Entwickler und Tom Locke, Web-Entwickler und Dozent für Ruby on Rails, und Erfinder von Logix.

Die Bestellmöglichkeit, sowie weitere Infos findet ihr auf den Seiten des Verlags
http://www.manning.com/crane3/