Ich mag das Smashing Magazine, denn sie haben dort oft schöne Linksammlungen und Designbeispiele. Heute ist Favicons das Thema. Favicons sind diese kleinen unaufälligen Grafiken neben der Adresse im Browser. Entweder man hat’s, oder hat’s nicht. Smashing Magzine hat heute eine neue Liste mit Favicon-Beispielen in diversen Kategorien erstellt.
Inspire youself: More creative favicons
Schon ein paar schöne dabei, aber ich mag meines und bleib dabei :)
Yahoo hat eine neue API gestartet. Den Yahoo Mail Web Service. Die Schnittstelle (SOAP und JSON-RPC) ermöglicht das auflisten, verschieben von Nachrichten und Ordner. Für Yahoo! Mail Plus Accounts gibt es dann auch noch mehr Funktionen, wie das Zugreifen auf Anhänge, den vollständigen Nachrichteninhalt und die Suchfunktion.
“developers outside of Yahoo! can now build mail tools or applications on the same infrastructure we use to build the highly-scaled Yahoo! Mail service that serves nearly 250 million Yahoo! Mail users today”
Entwickler haben somit die Möglichkeit völlig neue Anwendgungen rund um die API zu programmieren, oder die Mailfunktionen in ihre Applikation zu übernehmen. Zum Beispiel könnte man ein Widget erstellen oder ein Plugin für die Logitech G15 LCD Tastatur schreiben. Die Plattform ist nun frei wählbar.
YUI-Ext für Prototype
So wie es scheint dreht Jack Slocum grad durch :D Erst arbeitete er in seiner YUI-Ext Bibliothek an einer Schnittstelle für jQuery und nun kommt Prototype/Scriptaculous hinzu. Das nenn ich Einsatz. Weiter so! Ich weiger mich ja weiterhin YUI zu lernen und daher kommt mir das gerade recht. Die kommende Version 1.0 von Ext is noch in der Alpha Phase. Mehr infos in seinem Forum. (link)
Kalander (kein Tippfehler)
Kürzlich erst schrieb ich über ein Kalender Widget basierend auf Prototype. Nun fand ich über meine Del.icio.us subscriptions eine weiteres Kalender Widget für Prototype. Kalander ist der Name und kann so ziemlich das gleiche. Ist aber meiner Meinung nach sauberer geschrieben. (link)
Image Cropper mit Scriptaculous
Ein schickes Widget mit dem man Ausschnitte in Bildern festlegen kann. Wie in bekannten Bildbearbeitungsprogrammen braucht man hier nur die Maus. Meist dazu benutz um Bilder zu beschneiden. Was man aber mit dieser Komponente wirklich macht bleibt ja jedem selber überlassen. Bei Flickr z.B. wird eine ähnliche Technik benutzt um bestimmte Stellen in einem Bild zu kommentieren. (link)
J. Dalton hat sich wieder die Mühe gemacht uns mit einer Neuauflage seiner komprimierten Versionen der Prototype Bibliothek zu beglücken. Die Version 2 des Pakets enthält Prototype 1.4, 1.5 RC 1 und 2 sowie 1.5 Final. Im Zip-File sind mehrere Ordner, je nach Geschmack: original, gzipped, formatted, compressed und ultraCompressed. Bei den letzten beiden müsst ihr den Zeichensatz auf iso-8859-1 stellen, sonsts meckert die Konsole. Beispiel:
-
<script type="text/javascript" charset="iso-8859-1"
-
src="prototype.js"></script>
"I created this compressed collection of Prototype libraries to help evangelize Prototype."
Oft wird über Prototype geschimpft.. zu gross, zu aufgebläht, etc.. JD möchte dieses Vorurteil beiseite räumen. Ich selber nutze schon lange die gepackte Version und lass serverseitig gZip drüberlaufen. Jeder aktuelle Browser kommt damit klar und ich komme so auf 14 KB für prototype 1.5. Ich habe zu diesem Thema schonmal was geschrieben.
Der Download des Pakets ist ursprünglich nur in der Google Gruppe verfügbar. Da ich nicht weiss wie lange dort Dateien stehen bleiben hab ich es mal zur Sicherheit auf meinen Webspace gehauen. Mirror: protopressed_v2.zip
Es sei aber gesagt das es keine Unterstützung von offizieller Seite gibt. Es steht jedem frei selber die komprimierten Versionen entweder als gegeben zu nehmen oder vorher ausgiebig zu testen. Mir ist bisher jedenfalls noch kein Fehler untergekommen.
Leider kann man ja nicht immer so nah ran wie man möchte. Es wurde nun herrausgefunden dass man an manchen Positionen der Erde viel näher ran kann als es der Slider von Google Maps erlaubt. Das ganze ist möglich indem man die URL zu einer Position kopiert und den "z" Wert innerhalb der Adresse auf 20 setzt. Das geht nicht überall, aber das finden macht eben Spass.
Kamele fast hautnah in Afrika gefällig? Dann klickt mal hier. Mehr davon gibt es hier und natürlich ist auch selber finden angesagt! Ich probier mal ein, zwei Sachen. Wenn ich was lustiges habe gibts Screens :)
Immer davor gescheut die Template Klasse für mehr als Einzeiler zu benutzen? HTML in Javascript Strings ist für euch ein "no-go"? Dann liefert doch einfach den Template String gleich mit den Daten aus und evaluiert ihn in einem durch! So könnt ihr die Logik von der Presentation getrennt halten und trotzdem die Vorzüge nutzen. So einfach wie schön :)
-
function render(data) {
-
return new Template(data.template).evaluate(data.content);
-
}
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/
Bei Ajaxian entdeckte ich gerade einen interessantes Thema. CSRF und JSON. Dabei wird das Opfer auf eine Seite gelockt die das Verhalten des Array Objekts überschreibt, Daten manipuliert und einen offene JSON Service - zudem das Opfer Zugang hat - aufruft und das Resultat absetzt. Beispiel einer solchen Modifikation:
-
function Array(){ alert('Array kreiert') }
-
var bla = ['mein', 'normales', 'array', 'geheim']
Davon ausgehend das die Daten des JSON Dienstes in einem Array sind, würde unsere Funktion also aufgerufen. Allein durch die vereinfachte Deklaration des Arrays wird meine neudefinierte Funktion verwendet und ein "Array kreiert" gemeldet.
-
function Array() {
-
this[1] = 50;
-
}
-
var a = [40];
-
alert(a[0] + a[1]); // Gives 90
In diesem Beispiel von Ajaxian wurde die Funktion so umgeschrieben das der erste Wert gleich 50 ist. Der anhnungslose Benutzer würde dieses modifizierte Array Ungesehen weitersenden, jedoch mit seiner Zustimmung. Der Dienst selbst würde nicht wissen das die Datenmodifikation ungewollt ist und diese verarbeiten.
Generell eine clevere Sache. Wie ich aber schon dort als Kommentar hinterliess, bin ich recht unbeeindruckt von dieser Methode. Ich würde niemals sensitive Daten ausserhalb meiner Domain zugänglich machen. Ich persönlich überprüfe immer wie die Daten gesendet wurden (vllt. via XHR?), was für Daten erwartet werden, woher die Anfrage stammt und ob eine Berechtigung vorliegt. Bei dieser Methode ist genau die Frage nach der Berechtigung ausgehebelt, aber nicht ob die Daten innerhalb der erlaubten Parameter liegen und ob der Aufruf überhaupt möglich ist. Das schöne an Ajax ist beispielweise, dass man eben nicht auf andere Domains zugreifen kann. Wenn man nun der Applikation keine andere Kommunikation erlaubt um JSON anzufordern, oder Daten zu modifizieren, oder JSON Daten letztendlich zu manipulieren, ist man eigentlich auf der sicheren Seite.
Ich habe die letzten 3 Tage mit jQuery rumgespielt, sogar daran gedacht bereits aktive Projekte auf jQuery umzustellen, aber dann fand ich zugleich den wahren Nutzen von addMethods heraus. Auf der Suche nach Code-Beispielen für jQuery stiess ich auf einen kritischen Artikel auf Encytemedia. Es wurde erklärt dass der Promo-Artikel im offiziellen jQuery Blog - welcher jQuery's Stärken gegenüber Prototype aufzeigen soll - nicht einfach für Gegeben hingenommen werden sollte. Viele Funktionen von jQuery können auf in Prototype erreicht werden, mit ähnlich simplen Syntax.
Mit Element.addMethods bietet Prototype eine einfache Schnittstelle um DOM Elementen neue Tricks beizubringen. Syntax wie $('element').update('hallo') ist praktisch, schnell, direkt und verständlich. Mit addMethods kann ich meine eigenen Element-bezognen Methoden definieren. Ich halte viele meiner neuen Methoden für sinnvolle Erweiterungen und möchte sie hier mit euch teilen. Vielleicht seht ihr das genauso und möchtet sie adoptieren, oder hat sogar eigene bereits entwickelt. Ich beginne mal mit einem Beispiel:
-
<div id="menu">
-
<ul>
-
<li class="page" id="news">News</li>
-
<li class="page" id="infos">Infos</li>
-
<li class="page" id="about">About</li>
-
</ul>
-
</div>
-
$('menu').findClass('page').invoke('click', function(){
-
$('main').updateAjax('/ajax/element/'+this.id, {
-
onLoading: function(){ $('loading').show(); },
-
onComplete: function(){ $('loading').hide(); }
-
});
-
});
Das Javascript sucht im #menu nach Elementen mit der Klasse 'page' und startet einen EventObserver für Mausklicks, und aktualisiert bei einem Klick auf ein gefundenes Element den Inhalt von #main via Ajax. Wer aber Prototype kennt wird festellen, das hier drei Methoden verwendet werden die nicht in Prototype von Haus aus existieren: findClass, click und updateAjax.
- findClass als kurzform zu Element.getElementsByClassName(className)
- click ist die elementbezogene Version von Event.observe(element, 'click', callback)
- updateAjax ist die elementbezogene Version von Ajax.Updater(element, url, options)
Wie man sieht sind das alles Funktionen die man häufig verwendet und sich immer auf ein einzelnes Element beziehen. Genau hier war mein Ansatz diese dem Element Objekt hinzuzufügen. Das ganze funktioniert so:
-
Element.addMethods({
-
findClass: function(element, argument) { return element.getElementsByClassName(argument); },
-
updateAjax: function(element, url, options) { new Ajax.Updater(element, url, options); return element; },
-
click: function(element, callback) { Event.observe(element, 'click', callback); return element; }
-
});
Ich könnte natürlich auch die $$ Funktion verwenden, aber dadurch das ich das direkte (nächstliegende) Elternelement #menu zuerst ansteuer und dann die optimierte Funktion getElementsByClassName verwende bin ich um längen schneller. Wer es kürzer mag, und wenn Performance nicht wirklich eine Rolle spielt kann natürlich auch so verfahren:
-
$$('.page').invoke('click', function(){ $('main').updateAjax('/ajax/element/'+this.id, {etc..} ); })
Ich habe auch noch ein paar für Script.aculo.us eingebaut und für die Template Klasse, die ich ja schoneinmal beschrieben habe.
-
Element.addMethods({
-
template: function(element, template, data) { element.update(new Template(template).evaluate(data)); return element; },
-
toggle: function(element, type, options, callback) { new Effect.toggle(element, type || 'blind', options); return element; },
-
morph: function(element, options) { new Effect.Morph(element, options); return element; },
-
morphStyle: function(element, argument) { new Effect.Morph(element, {style:argument}); return element; },
-
highlight: function(element, options) { new Effect.Highlight(element, Object.extend({queue:{scope:element.id, position:'end'}}, options || {})); return element; },
-
fadeIn: function(element, options, callback) { new Effect.Appear(element, Object.extend({queue:{scope:element.id, position:'end'}, duration:0.5, afterFinish:callback}, options || {})); return element;},
-
fadeOut: function(element, options, callback) { new Effect.Fade(element, Object.extend({queue:{scope:element.id, position:'end'}, duration:0.5, afterFinish:callback}, options || {})); return element; }
-
});
Vor allem template ist praktisch wenn man mit JSON arbeitet. Hier mal ein Beispiel:
-
new Ajax.Request('/json/users/listing', {onComplete:function(xhr){
-
$('userlist').template('<li>#{username}</li>', eval(xhr.responseText))
-
}
-
});
Natürlich häufige Effekte wie Effect.Appear(element) können so gekürzt werden, da auch sie eigentlich Singeltons sind und immer sich auf ein Element beziehen. Ich habe versucht die chainability (verkettungen), was jQuery so elegant macht, zu simulieren indem ich mit Effect.queues per default arbeite, aber hatte nur bedingt Erfolg. Das automatische scoping mit element.id funktioniert zwar, aber verhindert nicht die direkte Ausführung des zweiten Aufrufs in der Kette.
Beispiel: $('message').fadeIn().fadeOut(); geht nicht, obwohl der gleiche Scope verwendet wird. Das liegt wohl daran das die Position des Vorgängers fadeIn mit fadeOut sofort überschrieben wird und irgendwie beide Effekte synchron laufen. Ich habe versucht das mit dem afterEffect callback zu kompenisieren, aber noch recht unschön, wie ich finde:
-
$('message').fadeIn({}, function(fx){
-
fx.element.fadeOut();
-
});
Code wie $('header').update('blubb').highlight().morphStyle('height:30px'); klappt aber ohne Probleme.
Ich experimentiere hier noch selber. :)
Hab vor einiger Zeit das wunderbare Plotr Script gefunden und erfolgreich in mehreren Browsern getestet. Mit Plotr könnt ihr einfach Statistiken und Charts mit Javascript und dem Canvas HTML Element visualisieren ... ich sage mal ... endlich! Natürlich ist das charting im Web nichts wirklich neues, aber mit Javascript ist das natürlich noch eine Ecke flexibler und somit für Entwickler interessanter. Zusammen mit Ajax könnte man hier z.b. eine Live-Statistik visualisieren. Zum Beispiel den Live-Chart "Stack" von Digg, wie er bisher nur in Flash exisitiert. Freu mich schon dafür eine eigene Verwendung zu finden.
