jQuery.twinkle in Aktion

Es gibt Themen zu denen fällt mir einfach keine sinnvolle, kurze Überschrift ein jQuery.twinkle ist so ein Thema…

Im Grunde ist das, was das PlugIn tut sehr simpel: es lenkt die Aufmerksamkeit eines Benutzers auf ein bestimmtes Element einer Website. Wenn man z.B. einen Benutzer einer Applikation auf einen bestimmten Button hinweisen möchte oder ihm zeigen möchte wo bestimmte Informationen angezeigt werden, dann ist das mit jQuery.twinkle sehr einfach möglich – sobald man es aufruft wird an der Position auf die man den Benutzer aufmerksam machen möchte ein grafischer Effekt eingeblendet. Zum Beispiel ein sich vergrössernder roter Kreis, ein pulsierender Kreis, oder kleine Kreise die das jeweilige Element umkreisen (ja, ich weiss – da sind eine Menge Kreise in diesem Satz ).

Perfekt ist sowas zum Beispiel wenn ein Benutzer eine Aktion zum ersten Mal durchführt. Man könnte dann einmal so etwas anzeigen wie "Wenn Sie die Daten eingegeben haben, klicken Sie bitte auf speichern." und dann z.B. sofort oder wenn er mit der Maus über das "speichern" fährt den entsprechenden Button markieren.

cdnjs.com

Seit einiger Zeit bieten sowohl Microsoft als auch google die Möglichkeit an, populäre JavaScript-Bibliotheken von ihren jeweiligen Content Delivery Networks aus einzubinden. Die Betonung liegt dabei aber auf "populär" wodurch viele "kleinere" Projekte aussen vor bleiben.

An dieser Stelle setzt cdnjs an. Die Seite nutzt das Cloudflare CDN um eine grosse Anzahl von JavaScript-Bibliotheken zur Verfügung zu stellen. Dort finden sich neben den populären Bibliotheken (Prototype, jQuery, dojo, usw.) zum Beispiel auch: modernizr, sizzle, raphael, less, cufon und viele, viele mehr.

Eine Auswertung zur Geschwindigkeit des CDN findet ihr übrigens hier.

Meiner Meinung nach ist das eine sehr gute Idee.

140byt.es

140byt.es ist eine Sammlung von JavaScript-Codeschnippseln die nicht länger als 140 Bytes sein dürfen (und somit auch in einen Tweet passen würden).

Auf der Seite finden sich einige sehr nütliche Funktionen die in verschiedene Kategorien (wie z.B. Datum, CSS, HTML, etc.) aufgeteilt sind. Wer will kann auch eigene Funktionen zu dem Projekt beisteuern.

Bei den meisten Scripts gibt es neben der kurzen Version noch eine mit Kommentaren und oft auch noch ein Beispiel welches die Funktion in Aktion zeigt.

Meiner Meinung nach ist 140byt.es ein sehr lustiges und interessantes Projekt welches man sich ruhig mal anschauen sollte.

Cutter.js Homepage

Cutter.hs ist eine kleine Bibliothek zum Kürzen von Texten auf Websites.

Man übergibt der Funktion dabei die Anzahl an Wörtern die man gerne von einem Text anzeigen möchte und den Rest erledigt sie dann selber. Das Besondere dabei ist, dass die Funktion auch mit Text sauber funktioniert in dem HTML-Tags vorkommen. Angenommen, man hat in seinem Text einen Link der mehrere Worte umfasst (im Sinne von "Link zu einem tollen Blog und so" ) dann sorgt Cutter.js dafür, dass die Wörter des Links die sichtbar sind ganz normal anklickbar sind.

Das Script blendet auf Wunsch auch einen Link ein mit dem man den gekürzten Text "ausklappen" kann um ihn ggf. komplett lesen zu können.

CanvasLoader Generator

CanvasLoader ist eine JavaScript-Bibliothek mit der typische Loader-Grafiken / Indikatoren "on-the-fly" erzeugen kann. Das heisst: man definiert verschiedene Parameter und die Bibliothek erstellt daraus z.B. ein typischen "Ich bin am laden lieber User, bitte warte kurz” Indikator – also einen ringförmigen Farbverlauf der sich dreht (Ich stelle fest – ich hätte einen anderen Screenshot machen sollen ).

Auf der Seite findet man dann auch den entsprechenden Generator, der eine komfortable Oberfläche bereitstellt über die man sich den Code für einen Indikator erstellen lassen kann. Dazu muss man dann lediglich den Radius des Kreises, die Farbe, die Geschwindigkeit, etc. einstellen und bekommt dann den entsprechenden Code zurückgeliefert.