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.

Advertisements

Standardwerte in Jade-Templates

Folgendes Problem:
Ich habe ein Jade-Layout und ein Jade-Template. Ich möchte den Titel-Tag beim Rendern der Seite bestimmen. Das Layout-Template sah so aus (Funktioniert nicht!):

!!! strict
html
  head
    title #{title}
  body
    #kopfzeile Guten Tag!
    #inhalt!= body

Dies funktionierte auch, wenn man es wie folgt aus Express aufrief:

res.render('template.jade', {title: "Mein Titel"});

Nun wollte ich an manchen Stellen das Attribut einfach nicht verwenden und bekam eine Fehlermeldung.
title is not defined
Ich hab mich dann im Git-Repository umgesehen und diesen Eintrag gefunden.
Die Lösung ist, statt direkt auf die Eigenschaft zuzugreifen das locals-Objekt zu benutzen:

!!! strict
html
  head
    title= (locals.title || "Standardtitel")
  body
    #kopfzeile Guten Tag!
    #inhalt!= body

Dies kann nun so aufgerufen werden:

res.render('template.jade');

Oder mit gesetztem Titel:

res.render('template.jade', {locals:{title:"Mein Titel"}});

Nur ein kurzer Post zu Node.js

Mein aktuelles Projekt benutzt nun Node.js mit MongoDB. Mongoose bietet mir dabei den Datenzugriff auf die MongoDB, was ganz gut funktioniert. Außerdem habe ich mich nun doch entschlossen neben Express.js auch die Template Engine Jade einzusetzen. Ich finde die Idee, solch eine hübsche Syntax zu haben, durch die dann HTML erstellt wird sehr gut! Bis auf eine Kleinigkeit funktioniert es auch sehr gut. Wenn man eine Variable im Template anzeigt, diese aber nicht setzt, dann wird ein Fehler ausgelöst und die Seite wird nicht angezeigt. Hier wäre es schöner, wenn man stattdessen nichts anzeigen könnte, da manche Information nicht mitkommt, weil sie nicht benötigt wird. Naja, ich werde sehen, ob sich dafür eine hübsche Lösung findet.

jQuery und der kleine Fallstrick

Ich arbeite seit kurzem mit jQuery und finde es sehr gut! Eine gute Javascript-Bibliothek, die einem sehr Viel Arbeit abnimmt.
Aber ich habe auch schon den ersten Fallstrick entdeckt.
Wenn ich ein DOM-Element mit der ID „sortMe“ habe und dieses mit $(„sortMe“) suche und dann Methoden darauf ausführe, funktioniert dies nicht! Es gibt aber auch keinen Fehler, oder ähnliches. Es klappt einfach nicht.
Hat mich etwas Zeit gekostet, herauszufinden, dass ich keinen Klotz davor gemacht habe. Richtig muss es heißen $(„#sortMe“)
Aber jetzt bin ich schlauer! Den Klotz nicht vergessen und nach einem Plugin suchen, dass hier zumindest während der Entwicklung Fehler auswirft!

Aptana Studio 3 zeigt (Pseudo-)Fehler bei statischen Dateien in Node.js

Ich nutze nun Aptana Studio 3 um unter Ubuntu für Node.js zu programmieren. Es gefällt mir gut, da es Autovervollständigung unterstützt. Nun hatte ich einen kleinen Test geschrieben, um statische Dateien, wie Bilder, mit Express verfügbar zu machen und musste feststellen, dass Aptana diesen als Falsch anmeckerte, obwohl er läuft.
Es geht um die folgende Zeile:

app.use(express.static(__dirname + '/public'));

Das Problem ist das Wort static. Dies gehört zu den reservierten Wörtern in Javascript und wurde trotzdem von den Entwicklern genutzt. Da mich das Anmeckern des Fehlers nervte, habe ich die Array-Schreibweise angewendet:

app.use(express['static'](__dirname + '/public'));

Nun meckert er nicht mehr und es funktioniert.

Ich lerne Javascript neu!

Ich habe ein sehr kleines, aber interessantes Buch in der Bibliothek entdeckt: „JavaScript: The Good Parts“ von Douglas Crockford. Das Buch versucht den Aufbau von JavaScript zu vermitteln, indem es nur die guten Dinge von Javascript aufzeigt und die schlechten lediglich im Anhang erwähnt. Ein interessanter Ansatz, aber es ist trotzdem etwas trocken zu lesen. Die vorgestellten Methoden sind allerdings sehr nützlich. Die Beispiele könnten etwas mehr „CleanCode“ vertragen, da manche Variablen-/Funktionsnamen sprechender sein könnten. Ich denke ich werde etwas Erfahrung sammeln und mich dann an einem Artikel zu CleanCode in JavaScript versuchen.

Vorträge der MIX11 zu JavaScript

Die folgenden beiden Vorträge auf der MIX11 kann ich sehr empfehlen:

  • Javascript – The Language
    • Sehr interessante Einführung in Javascript, die sehr gut vermittelt wie mächtig Javascript ist und welche Art der Vererbung in Javascript genutzt werden kann!
  • Writing Maintainable Javascript
    • Ein paar Hinweise, wie man wartbaren Code in Javascript schreibt. Sehr hilfreich. Und ein sehr lustiger Vortragsstil!