Workflow für Frontend Entwicklung

Wenige Frontend Entwickler nutzen kleine Tools die das Leben erheblich vereinfachen. Ich habe früher in Dreamweaver (Code-Modus) meine Frontends geschrieben. Vor einiger Zeit beschlossen wir, innerhalb der Agentur, alle die gleiche IDE zu verwenden. Die Wahl viel auf JetBrains PHPStorm.
PHPStorm ist total anders als Dreamweaver, viel mächtiger! Die Refactoring-Tools sowie die komplette Integration diverser Versionierungs-Tools sind spitze.

So ziemlich jeder Frontender verwendet Firefox in Verbindung mit Firebug. Meiner Meinung nach bisher die beste Kombination. Im Vergleich zu Chrome und Safari ist Firebug für mich immernoch das beste Developertool um CSS-Anpassungen vorzunehmen. Allerdings ist es auch immer doppelte Arbeit da man die CSS-Eigenschaften, die man in Firebug modifiziert hat, anschließend händisch in das CSS-Dokument übertragen muss.

Hier kommt noch eine vierte Komponente ins Spiel die den Flow so richtig rund macht. Um alles mit einander zu verdrahten quetscht sich nun noch CSS-X-Fire dazwischen. CSS-X-Fire ist ein 2 Komponenten Plugin welches sich in PHPStorm integriert und eine Extension für Firefox bzw. Firebug bereithält.

Nach der Installation kann man nun das CSS in Firebug wie gewohnt anpassen. Die Magic geschieht im Plugin Window von CSS-X-Fire in PHPStorm. Hier sieht man nun eine Liste mit den geänderten Selektoren und deren Eigenschaften. Am unteren Plugin-Fenster-Rand prangt ein großer “Apply all changes” – Button den man nur noch klicken muss. Mit einen Rutsch werden die Änderungen in die CSS-Datei übernommen. Auch das Ändern oder Entfernen von Eigenschaften ist kein Problem.

Firebug Plugin
CSS-Anpassungen vornehmen…

CSS-X-Fire Plugin
.. dann in PHPStorm übernehmen

Das einzige Manko dabei ist, dass man die Selektoren zuvor in der CSS-Datei definiert haben muss um sie über Firebug anpassen zu können.

Ich möchte nicht mehr auf diese Tools verzichten müssen.

Links: JetBrains PHPStorm, Mozilla Firefox, Firebug Extension, CSS-X-Fire Plugin

Marco

daddy in love, runner, kiter, engineer, berlin, sheeeeeit!