Meine Tools 2016

Für das Jahr 2015 habe ich meine eingesetzten Tools für die Webentwicklung vorgestellt. Da ich diese Art von Artikel mag, werde ich die Serie fortsetzen. Im Jahr 2016 hat sich mein Setup etwas verändert. Die Unterschiede zum Vorjahr erfährst du in diesem Artikel.

Alte Bekannte

Ein Großteil der Tools, die ich in 2015 vorgestellt habe, setze ich auch weiterhin ein. Sie leisten weiter gute Arbeit und ich verweise auf die Vorstellung aus dem letzten Jahr.

Native Entwicklungsumgebung

Für die Webentwicklung habe ich mich von MAMP verabschiedet. MAMP stellt Apache, PHP und MySQL in einem Paket zusammen. Unter macOS ist aber z.B. schon ein Apache integriert. Bei MAMP sehen die URLs wie folgt aus http://localhost:8888/leitsch. Alle Websites laufen auf der gleichen Domain. Ich wollte aber die Dev-Adressen. Sieht dann z.B. so aus: http://leitsch.dev. Sieht schöner aus und macht einiges einfacher. Die Website läuft unter einer echten Top-Level-Domain. Netter Nebeneffekt ist, dass in 1Password die Liste der Passwörter zu einer Domain kürzer ist. Man bekommt nicht alle Passwörter zu der localhost-Adresse angezeigt, sondern nur die Passwörter für die Dev-Domain.

Über Homebrew ist PHP und MySQL installiert. Des Weiteren hat sich dabei meine Ordnerstruktur etwas verändert. Für diese Website sieht es z.B. so aus:

~/Sites/leitsch
├── gulpfile.js
├── package.json
└── src
    ├── assets
    ├── content
    ├── index.php
    ├── kirby
    ├── panel
    ├── site
    └── thumbs

Jeder Projektordner beinhaltet einen Unterorder src, in dem die eigentliche Website liegt. Auf der ersten Ebene des Projektordners liegen Metadateien wie z.B. die Gulp-Datei oder die package.json. Diese Trennung bringt den Vorteil, dass beim Hochladen oder dem Deployment die Website von Metadateien getrennt ist und diese nicht auf den Server geladen werden.

Das neue Setup basiert grundsätzlich auf dieser Anleitung.

PHPStorm

Sublime Text ist ein guter Editor. Aber wenn man einmal mit einer IDE gearbeitet hat, will man nichts anderes mehr. PHPStorm ist sehr viel umfangreicher als Sublime Text. Das merkt man direkt schon beim Starten. Sublime Text ist im Vergleich sehr viel schneller gestartet. Besonders bei der Autovervollständigung merkt man direkt einen Unterschied. PHPStorm betrachtet immer das ganze Projekt und kann dann auf jede Funktion oder Objekt aus dem Projekt referenzieren. WordPress oder Drupal wird direkt von PHPStorm erkannt. Auch die Definition einer Funktion und welche Parameter nötig oder möglich sind, lässt sich schneller herausfinden.

Die Kombination mit xDebug ist eine ganz andere Art zu programmieren. Geht schneller und einfacher. Die Ausgabe von irgendwelchen Zuständen direkt auf der Website ist mit xDebug überflüssig. Mit Breakpoints wird die Website angehalten und man sieht den aktuellen Status und kann dann Schritt für Schritt weitergehen.

Vermutlich nutze ich einen ganz kleinen Teil von PHPStorm und das Programm hat noch sehr viel mehr nützliche Funktionen. Diese gilt es in 2017 zu entdecken.

Gulp

Tschüss CodeKit. Hallo Gulp. Für das Kompilieren von SASS habe ich auf Gulp als Taskrunner gewechselt. Die Konfiguration für Gulp lässt sich auch besser in Git versionieren. Mit Gulp gibt es auch keine Einschränken, wenn andere Entwickler an dem Projekt mitarbeiten, die kein Mac und CodeKit nutzen.

Mit Gulp konnte ich unterschiedliche Aufgaben definieren, die CSS für die Entwicklung oder die Live-Version kompilieren. Auf der Live-Version ist die CSS komprimiert und es wird keine Source-Map erstellt. Neben SASS werden mehrere JavaScript-Dateien zu einer zusammengeführt und komprimiert.

Der Browser-Sync macht auch bei Gulp die Entwicklung einer Website sehr viel einfacher.

CodePen

Mal eben eine Kleinigkeit ausprobieren oder jemanden etwas zeigen. Mit CodePen alles kein Problem. HTML, CSS und JavaScript werden direkt im Browser geschrieben und das Ergebnis live angezeigt - Der Sandkasten für den Frontend-Entwickler. Des Weiteren ist CodePen ein guter Ort, wenn man Inspirationen oder Lösungen im Frontend-Bereich sucht.

GitLab

Erwähnte ich schon, dass ich GitLab-Fan bin!? Wenn nicht, hiermit nachgeholt. Alle meine Projekte verwalte ich über Git und lade sie zu meinem GitLab-Server hoch. Über Git lässt sich wunderbar im Team arbeiten und die Daten sind gleichzeitig auf einem Server gesichert.

Neben der Projektverwaltung läuft ein Großteil der Kommunikation mit Kunden, Entwicklern und Designern über GitLab. Im Issue-Tracker werden alle Aufgaben gesammelt und organisiert. Zu dem Thema habe ich schon einen gesonderten Beitrag geschrieben.

Weiteres Feature, das die Arbeit sehr beschleunigt: Nach dem Pushen zu GitLab wird der Gulp-Task für die Live-Version angestoßen und anschließend die Website auf den Server geladen. Nach wenigen Minuten sind die Änderungen live.

Tower

Tower bietet eine grafische Oberfläche für Git. Git lässt sich vollständig über das Terminal bedienen, jedoch ist es oft über die grafische Oberfläche schöner. Man sieht schneller welche Änderungen wo gemacht wurden. PHPStorm hat auch Git integriert, jedoch verwende ich diese Funktion sehr selten. Wenn es jedoch zu Merge-Konflikten kommt, werden diese mit PHPStorm gelöst.

iTerm und zsh

iTerm bietet mehr Funktionen im Vergleich zum macOS Terminal. Im wesentlichen nutze ich aber auch nur die Split-Funktion, um das Fenster horizontal oder vertikal zu unterteilen.

Als Shell nutzt ich zsh mit Oh My Zsh. Damit geht die Bedienung einfacher im Vergleich zur klassischen Bash. Eine gute Autovervollständigung macht das Leben immer besser.

Tyme2

Zeiterfassung gehört auch immer dazu. Für macOS gibt es das tolle Tool: Tyme2. Ein einfaches Zeiterfassungsprogramm, dass nicht viel Schnick-Schnack bietet. Es erfasst die Zeit zu Projekten und ein Projekt lässt sich noch in Aufgaben unterteilen.

Mail

Im Jahr 2015 habe ich noch verstärkt auf Postbox gesetzt. Irgendwas hat nicht richtig funktioniert und somit ging es zurück zu Mail von macOS.

Franz

Es gibt so viele Kommunikationswege. Entweder hat man den Messenger im Browser offen oder es gibt eine extra App dafür. Franz vereint die Messenger unter einer Haube. In meinem Fall läuft in Franz WhatsApp, Facebook Messenger, Facebook Page und ein paar Slack-Teams.

Camtasia

In einem Screencast ist oft etwas sehr viel schneller und verständlicher erklärt, als wenn man einen langen Text mit Bildern schreibt. Auf der einen Seite kostet das Verfassen des Textes sehr viel Zeit. Auf der anderen Seite kann der Text weiterhin Unklarheiten beinhalten.

Mit Video und Ton lässt es sich besser erklären. Das Programm Camtasia zeichnet die Aktivität auf dem Bildschirm auf. Zusätzlich zu dem Video erklärt man das Vorgehen, das zu sehen ist. Den Screencast lade ich meist zu Dropbox und verschicke den Link.

2017

Soweit der aktuelle Stand aus dem Jahre 2016. Wie immer nehme ich mir vor den Funktionsumfang der einzelnen Programme weiter zu erforschen, um den Workflow weiter zu optimieren.