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 ;)

Der Firefox ist schon ein bisschen in die Jahre gekommen und muss sich inzwischen dem Problem stellen erfolgreich zu sein. So erfolgreich, das der Glaubenskrieg schon lange voll ausgebrochen ist.
Ich will gar nicht über die absolute Geschwindigkeit reden. Klar. Da gibt es die WebKit-basierten Browser, die hier sicher die Nase vorne haben. Oder den Opera, der unberechtigter Weise immer am Rand steht.

Für mich als Entwickler ist der Firefox schlichtweg unersetzlich. Und da spielt die Zeit für den Seitenaufbau eher eine untergeordnete Rolle. Es geht um die Zeit, die man braucht einen (Hinweis auf einen) Bug zu finden.
Die Add-ons des Firefox sind die wahren Gewinner. Man muss immer aufpassen nicht zu viele zu installieren/ aktivieren – anderfalls kann es schon ziemlich unerträglich langsam werden ;)

Meine TOP-Add-ons:

1. Firebug
   Der Safari hat auch eine schöne Debug-Console. Aber der Firebug ist ein Quäntchen besser. Das mag die Gewöhnung sein, aber es ist alles da, wo es sein muss.
   Als Add-on im Add-on ist da noch Firecookie zu empfehlen – tut genau das was der Name vermuten lässt.
2. Web Developer
   Man könnte meinen das man durch den Firebug die Web Developer-Toolbar weglassen könnte. Man könnte es meinen.
   Aber mit “Disable” und “CSS” habe ich da die sicher am meisten geklickten Menüs unterhalb dessen ich Dinge wie den Cache bis hin zu selektiven Stylesheets alles ein- und ausschalten kann. Nur wenige Klicks oder gemerkte Shortcuts entfernt.
3. FoxyProxy Standard
   Eine elegante Verwaltungsmöglichkeit von Proxy-Servern. Inkl. Nutzung verschiedener Proxies anhand von URL-Patterns. Ein absolutes Muss im Zusammenhang mit ssh-SOCKS “-D” oder paros-proxy.
4. Screengrab
   Screenshots auf Basis von Systemtools sind heute jedem geläufig. Aber sobald man eine ganze Website haben will, die nicht komplett auf den Monitor passt, dann wird es lästig. Screengrab ist einfach zu bedienen (nur wenige, leicht verständliche Optionen) und liefert ein wunderbares PNG der aktuellen Seite.
5. JSONView
   Ein XML-File schnell im Browser öffnen und ein wenig “durchblättern” – kein Problem.
   Mit JSONView geht das auch wunderbar bei JSON-formatierten Daten.

Es gibt dann noch eine Menge mehr an Add-ons die mehr oder weniger regelmäßig aktiv nutze oder phasenweise disabled belasse. Da gehören z.B. der “DNS Flusher“, das “Adblock Plus” oder “Greasemonkey” dazu.

Für die Gestaltung von Subnav-Boxen einer Kundenwebsite, wollten wir  Schatteneffekte mit reinem CSS erstellen – ohne die Verwendung von background-images.

Das gelingt mit der CSS3 Eigenschaft”box-shadow” sehr schön, die Styledefinition lautet dann z.B. für den Firefox (Gecko) so:
-moz-box-shadow: 8px 8px 18px #6f7072;

Diese CSS-Eigenschaft benötigt folgende Angaben:

Der 1. Wert: “x-Abstand”
Er verschiebt  den Schattens horizontal. Ein positiver Wert verschiebt den Schatten nachch rechts, ein negativer nach links.

Der 2. Wert:  “y-Abstand”
Er verschiebt  den Schattens vertikal.  Ein positiver Wert positioniert den Schatten unten, ein negativer oben.

Der 3. Wert : “Blur-Radius” (optional)
Die Größe des Weichzeichnereffektes.
Je größer der Wert, desto größer und transparenter wird der Schatten. Wenn kein Wert angegeben wird, wird der Wert auf 0 gesetzt.

Der 4. Wert  hier definiert die Schattefarbe.

Es ist noch ein  weitere Wertangabe, vor der Farbdefinition, möglich:
“Spread-Radius” (optional)
Der “Überfüllungs-Radius”, er vergrößert bei positivem Wert den Schatten und weitet ihn aus – und umgekehrt.
Wenn kein Wert angegeben wird, wird der der Wert auf 0 gesetzt.

Anmerkung:
Wenn “inset” (optional)  als keyword angegeben ist, wird der Schatten nicht außen, sondern innerhalb des Rahmens gezeichnet.
Inset Schatten werden über dem Hintergrund, aber unter Rahmen und Inhalt dargestellt.

(more…)

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.

Vor einigen Tagen bin ich zum ersten mal über das Phänomen gestolpert, das XHTTP-Requests zwar abgesetzt wurden, aber dann nix mehr passiert ist.
In der console von Firebug steht dann u.a. eine Meldung wie diese:

onreadystatechange FAILS Error: Permission denied for <http://test.deam.org> to create wrapper for object of class UnnamedClass Error: Permission denied for <http://test.deam.org> to create wrapper for object of class UnnamedClass readystatechange