Stylus und CoffeeScript

Entwickler sind bequem und schreiben sich lieber ein kleines Script oder Programm, ehe sie einen Task manuell ein Dutzend mal ausführen. Für Web(-frontend-)entwickler gilt das genauso. Hier hat sich insbesondere in den letzten beiden Jahren einiges getan: Präprozessoren für CSS und CoffeeScript. Ich bin erst vor einigen Wochen dazu übergegangen, beides zu nutzen und aus meiner Sicht lohnt sich der – ohnehin geringe – Aufwand zum Einstieg. Die Zeit zum Schreiben von CSS und JS hat sich merklich verkürzt. Anpassungen gehen schneller von der Hand. Der Artikel gibt selbstverständlich nur einen kleinen Einblick in den Funktionsumfang.

CSS-Präprozessor: Stylus

Neben den Wegbereitern LESS und SASS, habe ich persönlich am meisten Gefallen an Stylus gefunden. Alle drei sind Präprozessoren für CSS und erweitern es um äußerst praktische Funktionen. Eine wichtige Eigenschaft: alle Möglichkeiten sind optional. Es ist auch möglich ganz normales CSS durch den jeweiligen Präprozessor jagen. Ich konzentriere mich im Folgenden auf die Eigenschaften von Stylus. Die Syntax ändert sich nur minimal: Das Verschachteln von Elementen wird wesentlich vereinfacht. Zudem ist möglich, ohne Klammern zu arbeiten und stattdessen über die Einrückung zu steuern, was wozu gehört. Mit Variablen, Mixins und @extend ist es möglich den eigenen CSS-Code wesentlich besser zu abstrahieren und muss elementare Eigenschaften nur einmalig festlegen. So kann man beispielsweise sicher gehen, dass man bei einer Änderung der Link-Farbe keine CSS-Regel übersehen hat oder sich Mixins anlegen, die Vendor-Prefixe automatisch hinzufügen.

JavaScript-Aufsatz: CoffeeScript

CoffeeScript ist eine eigene Sprache, die sich selbst aber zu 100% in JavaScript übersetzt und lediglich das Schreiben von JavaScript vereinfachen will. Bei CoffeeScript geht es mehr um syntaktischen Zucker, um eine Vereinfachung der Syntax. So können einfache Funktionen wesentlich prägnanter geschrieben werden oder das Initialisieren von Variablen automatisch übernommen werden. Sehr großer Pluspunkt: Der produzierte Code ist lesbar.

Anwendung im täglichen Entwicklerleben

Beide, Stylus und CoffeeScript, müssen ans Werk gehen, eher die Daten an den User geliefert werden. Dafür gibt es zwei Wege: Entweder lokal die Dateien verarbeiten und das Endresultat auf den Server schieben, oder diesen Prozess auf dem Server erledigen lassen. Da ich persönlich erst auf meiner lokalen Entwicklungsumgebung teste und dann alles auf den live-Server schiebe, lade ich die fertigen CSS & JS Dateien einfach per FTP hoch.

Verwendung

Stylus & CoffeeScript sind beide als Module für node.js am Start und erforden auch dementsprechend einen node.js-Server. Wichtig, falls man die Generierung der Dateien gerne remote abfeiern möchte. Für die lokale Umgebung gibt es zwei angenehme Alternativen, welche die Nutzung sehr vereinfachen:
  • Persönlich nutze ich am Mac mit CodeKit eine GUI-Programm, dass die Verwaltung der verschiedenen Präprozesoren sehr angenehm löst und bei jedem Speichervorgang die Dateien neu verarbeitet.
  • Eine Alternative (die es auch bald für Windows gibt) ist LiveReload, das geht soweit, dass es – wahlweise über JavaScript oder Browserengine – auch direkt die Seite aktualisiert.

Designers.MX

designers.mx Ich stolperte gestern über Designers.mx – einfaches Konzept: Leute (ausgewähltedesigneryouknow) laden Playlisten hoch und machen noch ein schönes Cover dazu. Unglaublich gute Stücke dabei. Eignet sich super zum Arbeiten.

Sechs Tage in Lyon

Spreche immer noch kein Französisch, trank dafür aber mehr französisches Bier und Wein. Es endete damit, dass ich ein Jahr älter wurde. Danke an alle Beteiligten für den super Kurztripp.

Ein Wochenende in Berlin

Zum ersten Mal in Berlin gewesen. Anlass war der Google Developer Day. Das bedeutete: Lange Autofahrt, viel Spaß, viel (Glüh-)Wein, bestätigte Vorurteile (Sorry, Berlin), noch mehr Spaß. Danke Google für die geilen Vorträge, X Liter Club Mate, übermäßig viel Essen und ein ganzen Haufen neue Ideen. Bis nächstes Jahr. Dann bekomm ich auch das ChromeBook, deal? Auf dem Bild übrigens der Blick aus unserer - verrauchten und klingellosen (macht jede Pizzabestellung 100% spannender), aber super gelegenen - Wohnung.

November

Ist naturgemäß ein guter Monat und endet jedes Jahr damit, dass ich ein Jahr älter werde. Dieses Jahr geht's den ganzen Monat nur um Awesomeness. Zwischen Kälte, Unmengen an Kaffee, Bachelorarbeit und Arbeit gesellen sich Foster The People, Berlin und Lyon. Details folgen. Foster The People im Atomic