Webentwickler-Sammlung – 24 Tools, Tipps, Programme

Seit nun vielen Jahre bewege ich mich beruflich und auch als Hobby im Bereich des Webs. Primär als PHP Entwickler liegen mir Backend Aufgaben mehr als Frontend Aufgaben, dennoch beschäftigt man sich zwangsläufig mit der gesamten Materie. Über die Zeit hinweg haben sich einige Bookmarks, Tools und Programme angesammelt, welche ich nun mit euch Teilen möchte. In welchem Abstand ich euch solche Sammlungen liefere, weiß ich noch nicht und hängt davon ab, wie viel Ideen ich zusammen bekomme. Aber weitere Listings werden folgen…

PhpStorm IDE

Backend

Begonnen im Backend dreht sich bei mir alles rund um Apache, PHP (ein super Einstieg für PHP Entwickler: phptherightway.com) und MySQL. Alle drei Programme benutze ich in der jeweils aktuellsten Version. Da ich immer mit mehreren Projekten hantiere und nicht in Live-Umgebungen entwickeln kann/will, benutze ich Vagrant um Entwicklungssysteme schnell zu bauen und in diesen zu entwickeln. Damit das ganze schnell gestartet werden kann, ist PuPHPet zu empfehlen. Hier kann die virtualsierte Box (ich benutze VirtualBox) einfach zusammengeklickt werden. Anfangs muss man eine Menge Zeit in ein Basis System und die Konfiguration investieren, wenn es aber einmal läuft ist es eine 1a Sache :)

Steht die ganze Entwicklungsumgebung geht es an das Programmieren. Mehr zu PHP selbst, werde ich in der nächsten Sammlung schreiben. Generell entwickle ich mit PHPStorm. Eine richtige IDE ist essenziell und wichtig um effizient Programmieren zu können. Zusätzlich gibt es zahlreiche Plugins wie für z.B. RegEx, für die man dann keine Online Tools (Beispiel: regexpal.com) mehr benutzen muss. Ein Editor mit Syntax Highlighting ist zwar schneller (viele Funktionen einer IDE fehlen, weshalb diese Editoren schneller in der Bedienung sind), aber keine Alternative für die Programmierung. Falls man dennoch einen Editor benötigt empfehle ich SublimeText. Dieser hat ein paar coole Funktionen, welche sich sehr schnell nutzen lassen. Wenn dann erst einmal Teile der Entwicklung fertig entwickelt sind, müssen diese Änderungen auf einen Live-Server übertragen werden. Hierbei rede ich nicht von dem klassischen Copy’n’Paste sondern von einem ordentlichen Deployment. An dieser Stelle kommt Git zum Einsatz. Dies kann man auf einem eigenen Server installieren und auch mit einer GUI selbst (Gitlab) betreiben oder freie Dienste nutzen (Github). Für OpenSource Programme nutze ich sehr gerne GitHub. Damit das Übertragen mit Git einheitlich ist, setze ich auf git-flow. Dabei handelt es sich um ein Branching Model, welches definiert wie man mit Git zu arbeiten hat. Wenn die Struktur erst einmal steht und das Projekt größer wird, dann können an das Git auch z.B. Test-Server für automatisierte Tests angebunden werden.

Frontend

Weiter geht es im Frontend! Hier werde ich nicht auf Firefox mit seinen internen Tools und Firebug verzichten wollen. Für eine größtmögliche Kompatibilität zwischen den Browser, sollte auf jeden Fall auf ein CSS/HTML Framework zurückgegriffen werden. Ich setze dafür Twitter Boostrap ein, welches sich mit weitere Erweiterungen z.B. Fuel UX ergänzen lässt. Damit man aber dennoch alle Browser im Blick hat empfehle ich Sauce Labs. Damit können schnell alle verschiedenen Browser optisch überprüft werden und der Dienst hat zahlreiche weitere Features.

Beispiel Analyse GTmetrix – englische Schulnoten

Da die Webseite natürlich nicht genauso aussehen soll wie das Twitter Bootstrap Standard-Theme, muss dennoch CSS programmiert werden (360friends.de ist seit Dezember auch auf Basis von Twitter Boostrap). Damit im CSS alle Browser Feinheiten berücksichtigt werden (vgl. css3generator.com), setze ich auf CSS Preprozessoren. Die bekanntesten sind Less und Sass wobei diese ein fast gleiches Feature-Set bieten. Mit diesem Sprachen lässt sich das CSS besser strukturieren und gleichzeitig muss ich deutlich weniger schreiben. Wie praktisch! :)

Im Frontend ist zudem die Geschwindigkeit immer wichtig (inzwischen Ranking Faktor von Google). Wenn ich einen Bericht der Geschwindigkeit brauche nutze ich das Tool GTmetrix(kann als PDF exportiert werden). Für eine schnelle Analyse zwischendurch habe ich zudem Yahoo YSLOW im Firebug installiert. Viel Spaß beim analysieren…

Und nun?

Jetzt bin ich mal gespannt wie ihr das so seht :) Kanntet Ihr die Tools bereits? Habt ihr damit Erfahrung oder sogar bessere Alternativen? In der nächsten Sammlung wird es rund um PHP Tools gehen, mit denen das PHP Entwickeln vereinfacht und perfektioniert wird. Stichwort PhpMetrics, phpmd etc.