Schlagwort-Archive: javascript

Bootstrap, Brackets, Grunt

Irgendwie war es ja klar. Gerade, als ich mit dem Theme für mein neues Projekt fertig war, wurde das GUI-Framework Bootstrap in der neusten Version veröffentlicht. Zwar wusste ich bereits, dass es als RC ansteht, aber hätte nicht gedacht, dass just nach Fertigstellung meines Themes auf Basis von Bootstrap 2.3.2 direkt die Version 3 als Final veröffentlicht wird. Natürlich ist die Abwärtskompatibilität eher bescheiden und bedurfte einiges an manuellen Änderungen…

Mehr oder minder gleichzeitig mit der Release von Bootstrap 3, wurde mir der Open Source Web-Editor Brackets von Adobe wieder in Erinnerung gerufen. Als ich das erste Mal davon hörte, wurde der Editor nur für Windows und OSX angeboten. Nun ist die Linux-Version halbwegs brauchbar, wenngleich einige Macken noch vorhanden sind…

Durch beide Projekte bin ich dann auf Grunt.js aufmerksam geworden. Built-Tools kannte ich bisher nur aus dem Java-Umfeld und weiß um ihre Vorzüge. Beispielsweise entstehen zur Entwicklungszeit viele Daten, die gar nicht erst mit dem Theme veröffentlicht werden müssen. Beispielsweise Gimp-Dateien mit hochauflösenden Bildern und Layern, Javascript-Bibliotheken und Schriften, die man zu Testzwecken mal in die entsprechenden Ordner gepackt hat und so weiter. Natürlich kann man auch alles als Shell-Script mit mv, cp, etc. lösen. Grunt bietet aber mehr. Es erlaubt direkt das übersetzen von SASS in CSS, kann CSS und Javascript komprimieren und noch tausend Dinge mehr. Und da es per Javascript oder Coffee-Script gesteuert wird, ist es für den Frontend-Entwickler schnell zu erlernen.

Der Einstieg war für mich hakelig, das offizielle Getting Started ist leider etwas oberflächlich. Auch die erste deutschsprachige Anleitung hat den ein oder anderen Fehler, erlaubte aber schon einen tieferen Einblick in das Thema. Nach ein oder zwei weiteren englisch-sprachigen Tutorials, habe ich aber schnell zumindest die Grunt-züge (*SCNR*) verstanden und nun eine klare Trennung zwischen Quellcode und fertig packetiertem Theme, das ich einfach nur noch auf den Webspace hochladen muss.

Ob der Overhead von ~20MB für das Grunt-Projekt zu anschließend 900kb Theme gerechtfertigt ist, ist sicherlich fraglich. Erst bei richtig großen Webprojekten, wo man Abhängigkeiten und Tests je nach Built-Ziel dynamisch gestalten muss, wird Grunt.js wohl seine richtigen Vorzüge haben.

Und damit mein kleines Webprojekt, ein Theme mit zwei Bildern, drei PHP-Seiten, drei Javascript-Bibliotheken und einer CSS-Datei, den richtigen Overhead bekommt, versioniere ich das komplette Verzeichnis mit Mercurial.

Nochmal als Zusammenfassung der Frameworks und Helfer für diese eigentlich kleine und einfache Aufgabe:

… manchmal glaube ich, dass diese Techniksache doch eigentlich mehr Selbstzweck ist…

Getaggt mit , , , , , , , , , , , , ,

Javascript und unfreiwillige Monatswechsel

Stelllt euch vor, wir haben den 31.07.2013 und ihr schreibt folgenden Javascript-Code:

var date = new Date();
date.setYear(2013);
date.setMonth(5);
date.setDate(13);

Was kommt raus? Nicht etwa 13.05.2013 – Monate sind Null-basiert! Auch nicht der 13.06.2013. Beim setzen des Monats, wird der aktuelle Tag von new Date() beibehalten – sofern nicht vorher explizit umgesetzt. Und ihr erinnert euch, wir haben den 31.07.2013, also will Javascript den 31.06.2013 setzen. Den gibt es aber nicht, und um diesen Overflow zu kompensieren, zählt Javascript eigenständig den Monat hoch. Das Ergebnis des obrigen Codes: 13.07.2013. Sowas muss man erstmal wissen.

Via Tomás und von mir dreist übersetzt.

Getaggt mit , ,

Learning JavaScript Design Patterns

Learning JavaScript Design Patterns

Ein gutes Online-Buch um das Arbeiten mit Pattern in JavaScript. Was sind Pattern, welche Pattern gibt es und wie kann man sie mit jQuery umsetzen?

Getaggt mit, , , ,