Eine weitere Falle in Javascript!

Da will man in Ruhe eine kleine for-Schleife programmieren, und die will einfach nicht laufen…

var i;
for(i=0; i < data.lenght; i++){
    cooleAnweisungen(data[i]);
}

Nur wurde diese Schleife nie betreten, egal, wieviele Elemente das data-Array hat.

Woran lag es!? Ich habe length falsch geschrieben. Schwer zu sehen, durch Betriebsblindheit. Aber trotzdem finde ich, dass JavaScript ein komisches Verhalten zeigt.

Wäre data undefined, dann würde ein Fehler ausgelöst, da aber lenght undefined ist, passiert nichts. Schlimmer noch! Es gibt keinen Fehler und undefined ist nicht größer als i, was im ersten moment 0 ist. Dadurch wird die Schleife nie betreten, es wird aber auch kein Fehler gemeldet.

Also, immer gut auf das geschriebene in JavaScript achten!

Advertisements

CSS Generierung mit Stylus

Um eine große, komprimierte CSS-Datei zu bekommen und diese trotzdem noch wartbar zu halten, begab ich mich auf die Suche nach einem Tool für Node und Express. Dabei stieß ich auf Stylus.

Es ist einfaches CSS, nur ohne Klammern und Semikolons. Und man kann Javascript benutzen. Es wird auf der Serverseite beim Start des Servers in eine CSS-Datei compiliert und kann dabei auch direkt komprimiert werden.

Die @import Anweisung aus CSS wird verwendet, um dem Browser mitzuteilen, dass er an dieser Stelle eine weitere CSS-Datei nachladen soll. Stylus kennt diese Anweisung und wenn die Angegebene Datei auf „.css“ endet, dann wird die Anweisung auch als solche im Fertigen CSS stehen. Ist allerdings eine „.styl“-Datei angegeben, dann wird diese vor dem Compilieren eingefügt. Hierdurch kann eine Masterdatei mit Imports erstellt werden und das CSS in einzelne Dateien aufgeteilt werden.

Stylus compiliert aus solch einer Zusammenstellung eine große CSS-Datei. So ist das CSS (Stylus) wartbar, durch die einzelnen Dateien und es entsteht nur eine Datei, welche der Browser einmal lädt und dann cachen kann.

Ein kleiner Bonus:
Durch die Möglichkeit Variablen zu benutzen, durch einfache Anweisungen wie MainColor = #123456 kann nun eine „.styl“-Datei erstellt werden, welche alle Farben mit Namen definiert. Zum Beispiel Color1, Color2, … und Complement1, Complement2, … Diese wird mit der Import-Anweisung eingefügt und stellt so den anderen Styl-Dateien die Variablen zur Verfügung. Wenn sich nun die Farbpalette der Seite ändert, muss nur die Datei Colors.styl verändert werden.