Schlagwort-Archive: web development

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 , , , , , , , , , , , , ,

Webdesign: Sinn und Zweck einer Sidebar

Der Trommelschlumpf und Sabines Traumbilder stellen die interessante Frage: Ist eine Sidebar für Webseiten/Blogs sinnvoll? Wann bietet sie Mehrwert und wo wird sie einfach nur als antiquiertes Relikt oder Werbefläche eingesetzt. Eine Frage an die Webdesigner mit ein paar guten Denkansätzen.

In meinem nächsten Projekt gibt es wohl auch nur noch Head-Navi und Footer.

Getaggt mit , , , , ,

Shit For Making Websites

Eine schicke Tool-Sammlung für Web-Designer.

http://shitformakingwebsites.com/

Getaggt mit, ,