Ein Blick über die Schulter – Entwickler Tools

Dieser Blogpost wurde im Rahmen des WordCamp Berlin als Session gehalten.

Als das WordCamp anstand, kam mir die Überlegung mal einen Blick über meine Schulter zu erlauben, und damit einen Einblick in meinen Entwickleralltag zu erlauben.

Entwickleralltag? Was mach ich denn überhaupt?

Ok, das ist schnell erzählt. Ich arbeite seit mittlerweile über 3 Jahren Vollzeit als Inhouse Entwickler, ich betreue als nur unternehmenseigene Projekte und warte und optimiere diese. Dort arbeite ich fast ausschließlich mit WordPress und hab somit die Möglichkeit mich mit Dingen auseinanderzusetzen, für die im Agentur und Projektalltag oft keine Zeit bleibt.

Als Anmerkung muss ich hier sagen, das ich selbst auf dem Mac arbeite, somit gelten gerade die Software Empfehlungen in erster Linie für den Mac. Hier ein Aufruf an euch Leser, wenn ihr ein Software Äquivalent für Windows oder Linux kennt, bitte schreibt einen Kommentar, ich werde dies dann ergänzen.

Zunächst einen kurzen Blick auf die „üblichen Verdächtigen“, da es hierzu bereits viele Talks, Tutorials und Beispiele gab, möchte ich hier nur der kurz drüber gehen.

Versionskontrolle – git

Viel gibt es dazu nicht zu sagen, ich nutze git und als externen Dienst, gitlab.com da es hier kostenlose private Repositories gibt. Am Ende ist es fast egal was man nutzt, Hauptsache man setzt es aktiv ein. Gitlab gibt es dabei sowohl als Dienst, aber auch die Möglichkeit dies auf einem eigenen Server zu installieren, der Vorteil hier ist natürlich das man keine Daten an einen Dienstleister rausgibt, dies kann gerade im Hinblick auf den Datenschutz und etwaige Verschwiegenheitsvereinbarungen mit Kunden von Interesse sein.

Lokale Testumgebung

Als lokale Testumgebung setze ich einen lokalen Webserver ein, um mich nicht durch die komplette Konfiguration selbst kämpfen zu müssen, setze ich hier ein vorkonfiguriertes Paket ein. Dafür nutze ich MAMP Pro. Der größte Unterschied zwischen MAMP in der kostenlosen Version und der kostenpflichtigen Pro Version ist es das man deutlich einfacher „echte“ Domains mit wenigen Clicks anlegen kann, also der Unterschied ob ich dev.project-x.tld nutzen kann oder mit localhost/project-x/ arbeiten muss. Da sich WordPress in Unterverzeichnissen durchaus anders verhalten kann, als in einer Domain, kann ich dazu raten solche lokalen Domains zu nutzen, ob man dafür jetzt MAMP/xampp/vagrant(vvv) oder eine handgestrickte Lösung verwendet ist am Ende aber fast egal. Aber gerade wenn man mit seinen Projekten seinen Lebensunterhalt bestreitet, sollte man einen Blick darauf haben das es möglichst einfach ist, Änderungen und Ergänzungen zu machen.

Editor – PhpStorm

Als Editor hab ich mich für PhpStorm entschieden, dieser ist auch für alle Plattformen verfügbar. Auch hier gilt, welchen Editor man benutzt ist fast egal, das wichtige ist, das man einen Editor verwendet der Projekte unterstützt. Die Dateien haben Abhängigkeiten untereinander, also sollte der Editor dies auch berücksichtigen.

Passwortmanager – 1password

Hier nur ganz kurz gesagt, wenn ich noch keinen Passwort Manager verwendet. Fangt jetzt damit an. Ihr habt ja auch nicht einen einzigen Schlüssel mit dem ihr die Haustür, das Büro, das Auto, den Schuppen/Keller, das Fahrradschloss usw. öffnet, aber vermutlich nutzt ihr für Facebook, eure E-Mail Adresse, eure eigene Website, die Website von euren Kunden usw. das gleiche Passwort.


Bis hier hin wenig besonderes. Aber jetzt gehen wir ein bißchen in die Trickkiste

Build Tool – npm und kein composer

Als Build Tool setze ich npm ein. Ich habe mich mich dabei nach reichlicher Überlegung gegen die üblichen verdächtigen wie z.b. Grunt und Gulp entschieden. Da ich den Workflow noch optimiere werde ich hier nicht tiefer ins Detail gehen. Ich habe mich an der Stelle im übrigen auch gegen den Einsatz von Composer entschieden, die Verzeichnisstruktur von WordPress mag nicht ideal zu sein, aber ich bin kein Freund davon die Struktur eine bestehenden Projektes umzubauen, nur um ein Tool nutzen zu können. Die generelle Idee von Composer, alle Plugins und deren Versionen in einer Config Datei zu pflegen finde ich gut, weswegen ich daran gerarbeitet habe dies über wp-cli zu automatisieren, da es hier aber ein paar Probleme gab musste ich das aktuell wieder deaktivieren.

Wie sieht denn meine Projektstruktur aus?

Ich arbeite ausschließlich im Ordner /source/ und syncronisiere den Inhalt automatisch beim Speichern via rsync in meine lokale Testumgebung. Somit habe ich sowohl eine sehr saubere und unabhängige Umgebung zu testen, als auch eine klare Struktur die ich für meine Projekte in Git einchecken kann.

Zum Thema Build Tools gibt es auf WordPress.tv diverse gute Sessions.

hosts Datei Verwaltung

Neben den Einträgen für den lokalen Webserver hat man häufig diverse andere Einträge in der hosts Datei, z.B. vor der Liveschaltung oder dem Umzug einer Seite kann es passieren das man hier mehrere Einträge verwalten muss, oder die mal wecheln will. Dafür bin ich im Mac AppStore über ein schönes Tool gestolpert, es heißt iHosts und ist kostenlos verfügbar. Nur wenn man mehr Profile verwalten will braucht man einen optionalen In App Kauf. Das einzige was hier nötig ist, ist das man dem eigenen User die Rechte geben muss die Host Datei zu editieren, ohne das Admin Passwort eingeben zu müssen. Den nötigen Befehl erhält man über die Hilfe angezeigt, sobald ich den nochmal vorliegen habe ergänze ich diesen hier.

Zwischenablage

Ich denke das Problem kennt jeder, zwei Werte tauschen, oder mehr, schnell fängt man an beim Copy und Paste noch Fensterwechsel zu machen. Und dann braucht man vielleicht noch schnell Lorem Ipsum, oder einen anderen Textbaustein den man regelmäßig benutzt. Jetzt frag ich dich, wie oft hast du schon nach Lorem Ipsum oder anderen Blindtexten gegoogled? Wenn du dein Geld mit Webseiten verdienst… 100 mal? 1000 mal? Du wirst vermutlich genau wie ich antworten: Locker hundert mal, aber vielleicht noch nicht 1000, ich weiß es aber nicht.

Und genau für diese beiden Problem ist mein nächstes Tool, und zwar Clipmenu. Clipmenu speichert automatisch die letzten Einträge die man über CMD + C kopiert. Und lässt sie über CMD + SHIFT + V anzeigen und über eine einfache Tastatur oder Mausnavigation erreichen. Im Screenshot ist bereits ein zweiter Teil zu sehen, die Snippets, hier lassen sich beliebige Texte hinterlegen. Ich habe hier unter anderem zwei verschieden lange Versionen von Lorem Ipsum hinterlegt, Farben aus dem CI meines Arbeitgebers, IP Adressen die ich regelmäßig benötige, sowie einige andere Schnippsel die ich häufiger benötige.

Des weiteren unterstützt Clipmenu auch Actions, diese sind einfache JavaScript Dateien mit denen sich der Inhalt der Zwischenablage manipulieren lässt. Standardmäßig sind u.a. folgende Actions hinterlegt: trim, lowercase, uppercase, md5, base64 en und decode, diverse HTML Funktionen etc. Es kann z.B. hilfreich sein, wenn man häufig E-Mail Links benötigt sich eine Action zu bauen die automatisch ein mailto link erstellt, und automatisch die E-Mail Adresse codiert um es Spammern schwieriger zu machen die Adressen zu sammeln.

Alternativen zu Clipmenu.

Favicons erstellen – IconSlate

Ja natürlich hab auch ich versucht Photoshop beizubringen mir FavIcons abzuspeichern, kurz gesagt, ich bin mehrfach gescheitert, und dann hab ich das günstige Tool IconSlate im AppStore gefunden. Es generiert mir saubere .ico Datein mit mehreren Auflösungen in einem sehr schlanken Workflow.

PHP Codeschnippsel und Test

Gerade wenn man mal Codeschnippsel ausprobieren will die man nicht regelmäßig nutzt, oder man einen Proof of Concept machen will, ist der Aufwand das im Projekt zu machen oft zu hoch. Dafür hab ich 2 Workflows/Tools.

  1. Ein eigenes PhpStorm Projekt mit dem Namen „Test“ was dann auch ganz langweilig über localhost/test/ zu erreichen ist. Hierdrin liegt alles was ich testen will, sei es kleinere PHP Schnippsel, oder ein CSS was ich ausprobieren will.
  2. qPHP – leider scheint es aktuell nicht mehr im AppStore zu stehen. Dieses Tool ist ein Code Runner, es führt also in einer isolierten Umgebung PHP Code aus, perfekt wenn man nur mal eben was ausprobieren will, gerade wenn ich nur eine Funktion die ich geschrieben habe, isoliert testen will kopiere ich sie oft hier rein, da ich Code und Ergebnis in einem gemeinsamen Fenster habe.

Code vergleichen – changes & PhpStorm

Es kommt von Zeit zu Zeit vor das man zwei Dateien vergleichen möchte, zum Beispiel weil man Änderungen abgleichen möchte, prüfen möchte was sich geändert hat, uvm. In der Fachsprache spricht man hier von diff. PhpStorm hat hier ein Diff inkl Syntaxhighlighting integriert.

Mit changes hingegen kann ich ein komplettes Projekt mit allen Unterordnern und Dateien vergleichen. Dies ist z.b. Hilfreich wenn man ein fremdes Projekt übernehmen will, oder wenn man prüfen möchte was sich bei einem Update tatsächlich geändert hat, hier lässt sich z.B. schon ablesen wie tief die Änderungen im Update sind, und man kann absehen wie intensiv man hier testen muss.

Für Windows habe ich hier vor meinem Umstieg auf den Mac Beyond Compare genutzt.

Designtest – Bildschirmlupe

Jeder von uns, der mit Design Berührungspunkte hat, insbesondere wenn man mit CSS arbeitet kennt das, man ist unsicher ob jetzt 2 Inhalte in Flucht sind, ob da irgendwo noch ein Pixel ist der da nicht sein soll, oder oder oder. Den häufigsten Workflow den ich dort gesehen habe ist: Bildschirmfoto, in Photoshop kopieren, reinzoomen. Ich hab das mal bei mir getestet, wenn Photoshop nicht gerade geöffnet ist, dauert das selbst auf einem aktuellen MacBook in hoher Ausstattung über eine Minute bis man das Ergebnis hat. Ich nutze dafür die Bildschirmlupe von OSX. Und zwar mit den Einstellungen Bild-in-Bild und temporäres Zoomen.

Dies erlaubt es mir sofort zu Zoomen um zu gucken ob es einen Fehler gibt, oder ob alles so ist wie ich wollte. Außerdem kann ich die Ränder der Lupe als Lineal zweckentfremden, um Fluchten zu prüfen.

Reguläre Ausdrücke

There is no problem that regex can’t make worse

Reguläre Ausdrücke sind ein genau so mächtiges, wie komplexes Konzept der Informatik. Ich habe auch selbst Jahrelang mit dem Thema gekämpft. Mittlerweile behaupte ich das ich mich recht gut mit regex auskenne. Wie habe ich das geschafft?

  1. Regexbuddy – Ein geniales Stück Software um komplexe reguläre Ausdrücke aufzubauen und zu verstehen. Leider ausschließlich für Windows verfügbar, aber einer der Gründe neben den IE Tests warum ich eine Virtuelle Maschine habe.
  2.  Regexr – Eine Webversion ähnlich zu Regexbuddy, aber leider nicht mit dem gleichen Funktionsumfang
  3. Die Suchfunktion/Such und Ersetzenfunktion von PhpStorm, da diese Live Feedback liefert, ist dies mittlerweile der Punkt an denen ich die meisten meiner einfacheren Regulären Ausdrücke erstelle.

Browser und Browserplugins

Ich selbst nutze primär Chrome für die Entwicklung, um IE zu testen habe ich eine VM mit einer Windows Testversion von modern.ie installiert.

Also Browserplugins verwende ich:

  • PerfectPixel: Erlaubt es ein JPG über die Website zu legen, und so eine möglichst pixelgenaue Umsetzung von Screendesigns
  • Page Analytics: Visualisiert die Google Analytics Ergebnisse direkt auf der Website, sofern ihr eingeloggt seid und der User Leserechte für die Seite hat
  • GA Debugger: Zeigt Debug Infos für Google Analytics in der Konsole an, gerade sinnvoll wenn man mehr als eine GA Instanz und mehr als nur den PageView trackt.
  • NoFollow: Ein simples kleines Plugin, was allen NoFollow Links per CSS einen roten Rahmen gibt
  • JavaScript Errors Notifier: Hebt die JavaScript Fehler hervor
  • Web Developer Toolbar: Erlaubt viele Manipulationen, fairerweise gesagt, ich nutze es immer seltener

Linktipps

 

2 Comments

  1. Hier noch der Link zu https://emmet.io/ , damit kann man mit sehr leicht sehr viel schneller HTML und CSS schreiben, indem man entweder einen CSS-Selektor schreibt und diesen dann in mit einem Tastendruck in die entsprechende HTML-Struktur verwandelt, oder indem man Kürzel zu CSS-Regeln umwandelt. Man kann auch komplexere Sachen machen, aber selbst die schnell erlenten Grundfunktionen helfen einem im Alltag schon sehr. Bonus: Lorem Ipsum ist auch eingebaut, lorem100 wird z.B. mit einem Tastendruck zu 100 Wörtern Lorem Ipsum.
    Wenn nicht schon eingebaut, gibt es für praktisch jeden Editor oder jede IDE eine Emmet-Erweiterung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.