Wer so wie ich viel mit jQuery macht, der nutzt sicher auch jQueryUI.

Zugegebenermaßen ist jQueryUI nicht “die beste Lösung” – an manchen Stellen ist das ganze Paket schon etwas krude. Aber die typischen Dinge lassen sich mit relativ wenig Aufwand umsetzen.

Aber dann gibt es doch Limits bei denen man sich einen leichteren Zugang zur API wünschen würde. Seit geraumer Zeit versuche ich das zu umgehen indem ich mich auf Addon-Suche für jQueryUI mache. Über die Addons mit denen ich absolut unzufrieden war, will ich hier gar nicht schreiben.
Seit einiger Zeit nutze ich diese timepicker-Erweiterung für den jQueryUI-datepicker. Mit 28kb (uncompressed) ist er zwar einigermaßen gross, aber die letzten drei Upgrades von jQueryUI hat er unbeschadet überstanden – und das ist hoch anzurechnen.

Ich hatte auch einige andere Alternativen ausprobiert, aber keine war so gut eingebunden wie diese.
Wer hat denn noch gute Erfahrungen mit jQueryUI-Addons?

Ein Projekt mit einigen Herausforderungen:
Zum einen sollte die Ladezeit “gut” sein und zum anderen war natürlich auch ein optischer Anspruch vorhanden.

Der Schwerpunkt der Seite ist die Galerie und damit natürlich ein Problem bzgl. der Ladezeit. Daher haben wir uns gegen eine Thumbnailansicht entschieden. Die etwas “größeren Kleinansichten” bieten eine gute Vorauswahl – die meisten Bilder sind nicht größer als 15kb. Die Großansichten sind alle meistens zwischen 100 und 150kb – und nur wenige Ausnahmen sind größer als 200kb.
Die Bildauswahl wurde entsprechend getroffen um die Bandbreite Schreiner-Arbeiten klar herauszustellen.

Das technische Detail für die Ladezeit sind kombinierte und komprimierte CSS- und Javascript-Files. Der Unterschied lässt sich am Besten an der Startseite festmachen: Die Entwicklerversion hat 592kb und die Liveversion hat 325kb. Wobei ca. 230kb an Bildern bei beiden Versionen gleich ist.

Aus technischer Sicht war bei diesem Projekt für uns auch wieder entscheidend folgende Rahmenbedingungen einzuhalten:

• sauberes und kleines HTML (es sollte auch jede Seite valide sein)
• “graceful degradation”: D.h. bei Nichtverfügbarkeit von Javascript und/oder CSS soll der Inhalt weiterhin zugreifbar sein
• Browserkompatibilität (die Seite funktioniert auch verhältnismässig gut im InternetExplorer 6)

Viel Spass auf der neuen Website http://www.schreinerei-braeu.de/

After my first release on last sunday I have to put out a first bugfix-version. So everything from the first post on this still fits, except:

• IE6 seems to go crazy with it. So I decided to remove support for all IE-browsers with version 6 and smaller – no worry, it degrades nicely.
• IE7 and IE8 of course do not support “opacity:value” in CSS. So the initial set-up with div-elements looked a bit strange. I integrated a small check with $.support.opacity on the append()-part.
• the plugin works nicely with jQuery 1.4.2 – demos are updated now.

Demos: demo1 jQuery 1.3, demo1 jQuery 1.4, demo2 jQuery 1.3, demo2 jQuery 1.4

Downloads: the minified version (2.2kb) or the full source.

btw.: I plan to publish it on the jQuery-plugins-page if I’ve rewritten the loop()-function – so maybe with version 0.4.

I’ve started this plugin for jQuery in december 2009 – and left it for at least two months.
Now I give you moodblender.
Don’t expect a amazing and cool and useful jQuery-plugin. It’s for fun only.

Let’s say you have an area in your website with some sort of “moody image”. Something that sits there pretty still and won’t change. Of course there are tons of jQuery-tools to make this a attractive spot (like cycle), but they are all a bit too much. And I found none that support slicing the image and using some sort of video-style transition. That’s where moodblender comes in.

The plugin is in it’s early stages. You should only use the settings splitparts, loop, maxloop and dwellTime. Using “blendOut: true” is fine, but does not work the way I had it in mind ;)

There are two demos available: number 1 and number 2.

Use the minified version (2.2kb) or read the full source. It’s tested with jQuery 1.3.2, but should work with the latest 1.4 as well.
Browserchecks aren’t complete yet. I’ve only tested it with Firefox 3.6, Safari 4, Google Chrome 4 and Opera 10.10. I did some tests with InternetExplorer 6 to 8, but only with an early version.

HTML

<div id="mood">
<img src="pix/mood_1_test.jpg" alt=""/>
<img src="pix/mood_3_test.jpg" alt=""/>
<img src="pix/mood_2_test.jpg" alt=""/>
</div>

CSS

#mood
{
 position:relative;
 overflow:hidden;
 width:500px;
 height:282px;
}

JS

$(document).ready(function() {
 $('#mood').moodblender({
 loop: true,
 maxloop: 10,
 blendOut: false,
 dwellTime: 3000
 });
});

I’ve a couple of things in mind for version 0.2 and beyond. Some of them are

• rewrite the loop-function and maybe make use of jQuery’s new delay()-function (sometimes looping kills itself or slices move in on one block… timing is evil in JS)
• add support for jQuery Easing Plugin
• fix the ‘blendOut: true’
• add full support for IE6 to 8 (or degrade nicely with IE6 ;)

Klar, das ganze Blog ist eine einige Meinungskundgebung. Hier muss ich aber mal etwas los werden, da dojo jetzt in Version 1.4 erschienen ist:
Javascript-Bibliothek Dojo 1.4.0 erschienen: Entwickler versprechen mehr Stabilität und Geschwindigkeit

Ich habe ja sehr lange script.aculo.us mit prototype-js verwendet. Man kann sagen, das es zuerst da war und gut funktioniert. Es hat aber – wie alle Dinge im Leben – Haken und Ösen, die irgendwie das Leben schwerer machen.
moo-tools ist auch ganz nett – ich hatte aber nie die Gelegenheit es ernsthaft einzusetzen.

Und dann kam ein größeres Projekt an dem ich Frontendarbeiten machen durfte. Krudes HTML und dojo waren da schon vorgegeben – das nur vorweg, da es meine Einschätzung sicher auch negativ beeinflusst hat.
Ich kann nur eines zu dojo sagen: Nimm viele features und mache alles sehr, sehr langsam.
Das ist vor allem kein Spass, wenn man mit dem derzeit langsamsten Browser, dem Firefox arbeitet. Keine Frage, ich liebe den Fuchs, weil er extrem flexibel ist. Bei intensiven Javascript-Dingen erkennt man aber seine Grenzen. Und dojo ist das toolkit mit dem man diese Grenzen per einfachem Seitenaufruf sofort erreicht. Ich fand es richtig übel.

Irgendwann musste ich mir dann auch mal Alternativen zu script.aculo.us ansehen und muss sagen das jQuery schlicht genial ist. Hat auch seine Macken, aber alleine die saubere Plugin-Aufteilung ist genial – da kann script.aculo.us nicht mithalten. Und wer “flot” schon einmal gesehen hat – nun der weiss, dass dies alleine schon ein Grund ist, zu jQuery zu wechseln :-)

Ich würde mir dojo also nicht mal mehr aus weiter Entfernung ansehen wollen – sorry.