jQuery-Logo

Was mich in jQuery schon immer einiges an Nerven gekostet hat war der Animation-Queue. Legt man auf ein Element bzw. auf ein Event einen bestimmten Animationsablauf, und startet diese Animation z.B. durch schnelles hintereinander klicken auf den Trigger, so werden die Animationen aneinandergereiht und nacheinander ausgeführt, auch wenn man den Trigger vielleicht schon einige Sekunden nicht mehr geklickt hat.

Im Artikel Prevent Animation Queue Buildup auf Learning jQuery wurde nun beschrieben wie man besagtes Problem sehr einfach umgehen kann.

Des Rätsels Lösung ist die stop()-Funktion, bei der vor dem Start einer Animation erstmal alle anderen Animationen der selektierten Elemente gestoppt werden. Der Animationsfluss wird also unterbrochen sobald ein neuer Trigger ausgelöst wurde.

Sehr praktisch wird das ganze z.B. bei Hover-Events, wo der User durch schnellere Mausbewegungen sehr schnell einen unschönen Animation-Queue aufbauen kann.


jQuery-Logo

Heute erwischte ich mal wieder folgende Situation: Auf unserer Seite sollte beim Aufruf einer bestimmten URL eine Modalbox (Dialogbox ähnlich einer Lightbox) aufklappen in der der User einige Daten korrigieren sollte.

Mit jQuery sollte sowas eigentlich ganz einfach sein, also Core eingebunden und ein vernünftiges Plugin gesucht. Leider konnte keines der angebotenen Plugins genau das was ich wollte. BlockUI z.B. hatte extreme Probleme was die Darstellung in Browsern mit einem “Explorer” im Namen anging, und jqModal kannte meinen Event-Type nicht.

Eigentlich hatte ich ja noch aus früheren Zeiten ein anderes Plugin im Kopf, aber das schien seit geraumer Zeit in die jQuery UI integriert worden zu sein. Also schnell in die UI-Dokumentation geguckt, und da war meine Dialog-Funktion.

Doch beim Blick auf die Dateigröße blieb mir ein wenig die Luft weg. 52Kb wollte das Plugin für seine Dienste haben, zusätzlich zum normalem jQuery-Core.

Mal ehrlich: So schön solch eine Sammlung wie jQueryUI auch ist, so nervig kann sie auch sein wenn man nur einige kleine Funktionen aus ihr braucht. Klar, für fast alles gibt es auch andere Plugins, nur wurden die wirklich guten Plugins alle von jQueryUI importiert, was dafür sorgt das man diese nicht mehr als Plugins vorfindet und alle nur noch auf die UI verweisen.

Ich finde das Plugin-System von jQuery schon super flexibel und einfach einfach, warum mussten nun bei der UI so viele Abhängigkeiten eingegangen werden die dafür sorgen das man jedem Seitenbesucher gleich ein 100KB-Paket an JavaScript-Files zuwerfen muss?

Schön wäre zumindest gewesen, wenn die in die UI eingeflossenen Plugins auch weiterhin separat als Plugin weiterentwickelt worden wären.


Greasemonkey ist fast schon ein Must-Have für Firefox. Mit diesem kleinen Plugin kann man ohne große Probleme bereits bestehende (fremde) Seiten mit nützlichen Funktionen nachträglich erweitern.

Im Prinzip steckt dahinter nichts als ein wenig Custom-JavaScript was beim aufrufen der Seite automatisch ausgeführt werden kann und somit den DOM der Seite nachträglich manipulieren kann. Neben der bestehenden Datenbank mit Greasemonkey-Scripten ist es natürlich auch interessant selber Hand anzulegen. Oft hat man Seiten die man relativ häufig benutzt, bei denen man sich aber die eine oder andere Funktion wünscht die noch fehlt. Beispiele wären z.B. das nachrüsten einer Tabellensortierung oder auch das verlinken von Geocaching-Tags auf Flickr.

Heute habe ich einen Weg entdeckt um auch in Greasemonkey die Features und Plugins von jQuery nutzen zu können. Alternativ kann natürlich auch folgende URL zum jeweils aktuellem Core genutzt werden: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. Sehr nützlich wie ich finde, denn so ist es nur noch ein Katzensprung bis zum eigenem Userscript.

Durch das duplizieren der ersten Zeilen kann man natürlich auch noch weitere JavaScript-Dateien mit ins Boot holen, also z.B. auch jQuery-Plugins auf die man dann im Customcode zugreifen kann.


Gerade bemerkte ich eine Lustige Angewohnheit der Auth-Component von CakePHP.

Nehmen wir an wir haben eine Userregistration, also mit Feldern wie Username, Password, E-Mail usw. nun trägt der User alles richtig ein, nur bei der E-Mail vertippt er sich bzw. trägt dort keine valide Mailadresse ein. Da ich natürlich in CakePHP auf das Feld eine ValidationRule gelegt habe die besagt das in das Feld nur valide Mailadressen eingetragen werden dürfen schlägt Cake Alarm und quittiert den Versuch mit einer Fehlermeldung.

Da Cake schlau ist füllt es alle Felder automatisch mit den zuvor eingegebenen Werten wieder aus, damit man auch wirklich nur das fehlerhafte Feld neu bestücken muss. Das lustige ist jedoch das die Auth-Component in das Passwort-Feld bereits den MD5-Hash als value übergibt. Merkt man das nicht und korrigiert nur das eigentlich fehlerhafte Feld, so wird der MD5-Hash nochmal in einen MD5-Hash verwandelt und man kann sich somit nicht mit dem angelegten Account einloggen. Für mich ist das ein klarer Bug, denn die Auth-Component sollte natürlich prüfen ob die Validierung einen Alarm ausgelöst hat, und nur falls alles Ok ist sollte der Wert in MD5 umgewandelt werden.

Im IRC-Channel zu CakePHP wurde mir nun gesagt ich solle doch einfach das Passwordfeld generell leer halten, denn das sei schließlich vollkommen normal das man bei einem Validierungsfehler auch die Passwörter nocheinmal eintragen müsse. Ja klar, das machen zwar einige Portale so, doch mich persönlich nervt das einfach gewaltig.

Sicherlich ist es unsicher das Passwort in das value zu setzen, doch ist sowas doch bei einer Adminoberfläche die nur 2-3 Personen nutzen zu vernachlässigen. Warum wird da ein offensichtlicher Bug also so bekämpft?

Eine Lösung habe ich dafür leider nicht, außer dem Feld dauerhaft ein value="" mit auf den Weg zu geben, damit eben das Feld bei einer Falscheingabe statt dem MD5-Hash wenigsten nichts beinhaltet und somit wieder Alarm schlägt falls man es versehentlich leer lässt.

Wie seht ihr das? Sollte man ein Passwordfeld bei einer Fehlerausgabe wieder mit dem Eingabewert befüllen oder den Nutzer nochmals dazu auffordern sein Passwort einzugeben, obwohl es ja eigentlich die Validierung absolviert hat?


Logo von CakePHP

Da ich leider nirgendwo ein fertiges Suchplugin für das “neue” CakePHP-Cookbook fand, bastelte ich mir schnell selber eins zusammen.

Dabei entstanden zwei einfache Suchplugins für die Dokumentation von CakePHP 1.1 und CakePHP 1.2. Im Anschluss wollte ich die beiden XML-Dateien über das Mozilla Add-Ons Portal anderen Entwicklern zugänglich machen, doch Pustekuchen. Ich kann zwar neue Plugins hochladen, aber darf nur Plugins, Wörterbücher, Themes oder Übersetzungen hochladen.

Komisch, oder gibt es da evtl. für die Suchwerkzeuge ein eigenes Formular das irgendwo weit weit versteckt untergebracht wurde?

Naja, solange ich die beiden Dateien nicht direkt bei Mozilla unterbringen darf bekommt der interessierte CakePHP-Entwickler sie eben hier.

Da meine Dateien jetzt nicht auf den Mozilla-Servern liegen, fragt der Firefox auch nicht selber ob man die Suchmaschine direkt hinzufügen will. Daher muss man aktuell noch manuell die jeweilige XML-Datei in den Ordner searchplugins im Firefox-Ordner kopieren. Nach einem Neustart des Browsers solltet ihr dann direkt aus der integrierten Suche heraus das Cookbook durchsuchen können.


Für jQuery gibt es einen ganzen Batzen an Plugins, und einige davon braucht der fleißige Webentwickler auch von Zeit zu Zeit, z.B. die Thickbox oder iFixPng2.

Manchmal findet man jedoch auch sehr innovative und originelle Plugins, so z.B. jParallax. Parallax ermöglichst es dem User eine Art 3D-Gefühl zu vermitteln, und das ganz einfach durch die Überlagerung mehrerer 2D-Ebenen und der Möglichkeit diese mittels der Maus zu bewegen.

So hat man z.B. die Möglichkeit mehrere Fotos freizustellen und wie auf einer Bühne hintereinander zu platzieren um später mit der Maus den Viewport dynamisch versetzen zu können.

Dabei zeigen die Demos gleich mögliche Anwendungsgebiete, so z.B. eine Karte, einen Bergsteiger oder auch andere Spielereien.

Das Prinzip ist ähnlich wie die Verschiebung der Hintergrundgrafiken auf der Webseite von Silverback. Sobald man das Browserfenster horizontal erweitert oder verkleinert kommt ein räumliches Gefühl auf.

Das Plugin ist sicherlich nichts für den täglichen Gebrauch, doch eventuell findet sich ja die eine oder andere nützliche Verwendung. Vielleicht kommt es auch ganz gut als Gimmick in Headern die auf den ersten Blick zwar statisch aussehen, bei einem Mouseover dann aber zum Leben erweckt werden…

via: Webappers



Ältere Einträge

Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda