Tools und Ansätze zur Beschleunigung des Workflows des Webentwicklers
Veröffentlicht: 2020-12-17Die Webentwicklung bündelt eine Vielzahl von Stacks, Tools, Programmiersprachen und mehr. Einige der hier verwendeten Tools / Workflows funktionieren in einigen Fällen, andere in anderen. Um dies besser anzugehen, betrachten Sie diesen Beitrag als aus der Sicht eines WordPress-Front-End-Entwicklers geschrieben, obwohl die Tools recht breit sind und in vielen Fällen verwendet werden können.
1 - tmux
Eine der größten Änderungen in meinem Workflow war, als ich tmux auf meinem Computer einrichtete (macOS, aber es funktioniert natürlich auch für Linux). Obwohl ich es möglicherweise nicht optimal nutzen kann, leistet es hervorragende Arbeit und ermöglicht es mir, sofort zwischen Projekten zu wechseln, was viel Zeit spart.
tmux hat eine lange Seite mit den ersten Schritten im GitHub-Repository des Projekts, die Sie auschecken können. Es funktioniert auch mit einer sofort einsatzbereiten Tastatur mit Mausunterstützung, die aktiviert werden kann. tmux verwendet Konfigurationsdateien, die für die sofortige Einrichtung systemübergreifend gemeinsam genutzt werden können.
Wie hat sich mein Workflow verändert?
- Mit tmux können Sie auf einfache Weise Bildschirme teilen und mit nur zwei Tastendrücken innerhalb eines Projekts navigieren. Sie können also einen "Schluck" in einer Ansicht ausführen lassen, Befehle zum Ausführen auf einer anderen, SSH zum Server auf der dritten und einige Statistiken auf der vierten.
- Es gibt Ihnen Fenster für jedes Projekt, die wie "Registerkarten" sind. Hier können Sie mit zwei Tastendrücken zu verschiedenen Projekten wechseln. Ich habe mehr als 20 Projekte in Registerkarten geöffnet und wenn ich an einem neuen Projekt arbeiten muss, schalte ich es einfach dort um und gulp läuft bereits. Ich bin in den richtigen Verzeichnissen und kann in weniger als 2 Sekunden mit der Arbeit beginnen.
- Hält das gesamte Setup die ganze Zeit eingeschaltet. Sie müssen es nicht jedes Mal tun, wenn Sie mit der Arbeit beginnen, es ist immer da. Wenn sich Ihr Computer ausschaltet und Sie ihn erneut starten, können Sie (mit einem einfachen Plugin) einfach zu Ihrem Standard-Setup zurückkehren und in etwa 5 Sekunden ist es wieder aktiv. Es ist lustig, dass I7-9900K zu 100% ausgelastet ist, um dies zu erreichen.
- Jedes Panel in einem Fenster ist eine eigene Instanz. So können Sie problemlos verschiedene Node-Versionen für jedes Panel ausführen.

Quelle
2 - Alfred (oder Alternative)
Alfred ist eine „Produktivitäts-App“ für Mac mit Entsprechungen für Windows und Linux. Einige der Dinge, die Alfred tut, sind:
- Sie erhalten schnellen Zugriff auf geöffnete Programme, indem Sie nur ein paar Buchstaben eingeben
- Gehen Sie schnell zu Verzeichnissen
- Durchsuchen Sie, bis Sie direkt im Popup das finden, was Sie benötigen
- Öffnen Sie Dateien mit verschiedenen Programmen
- Durchsuchen Sie das Web oder Ihre integrierten Programme und vieles mehr.
Mit seinem Powerpack gibt es viele andere „Workflow“ -Integrationen, die auch die Arbeit automatisieren können.
Es funktioniert auch als Schnellzugriffsrechner, verwaltet Snippets im gesamten Betriebssystem (es muss nicht einmal darauf zugegriffen werden, es wird nur automatisch erweitert), speichert einen Zwischenablageverlauf (Lebensretter), lässt sich in das Terminal integrieren und so weiter. Alles darüber finden Sie auf der App-Site.
Wie ich es benutze:
- Zunächst natürlich, um Apps zu öffnen. Ich klicke nicht mit dem Zeiger auf Symbole, ich tippe nur Buchstaben und los geht's.
- Verwenden Sie es als Taschenrechner beim Schreiben von CSS (häufig bei EM-Werten).
- Verlauf der Zwischenablage - Manchmal staple ich 5-6 Dinge in die Zwischenablage und füge sie dann bei Bedarf in den Code-Editor ein. Oder gehen Sie ein paar Tage zurück, um eine E-Mail, ein Snippet usw. oder sogar eine kleine Funktion zu finden, die in einem Projekt etwas bewirkt und in einem anderen helfen würde. Das Durchsuchen des Codes dauert 2-3 Sekunden anstatt mehr als 10 Minuten.
- Wechseln Sie bei Entwurfsarbeiten zu Arbeitsverzeichnissen oder direkt zu den XD-Dateien, ohne den Finder zu durchsuchen. Dauert erneut 2-3 Sekunden gegen eine Minute oder so im Finder.
- Snippets - Ich habe ein nettes "Kommentar" -Snippet für Asana mit Screenshots der Ergebnisse vorbereitet, einem Ort, an dem der Commit-Link hinzugefügt werden kann, einer Nachricht an die nächsten Entwickler, dem Status, ob die Bereitstellung aktiviert ist oder nicht, und so weiter. Dies ist eine konsistent aussehende Nachricht über alle Kommentare hinweg, denen das Team problemlos folgt. Das Eingeben und Entfalten des Snippets dauert weniger als 2 Sekunden.
3 - Terminal Tools / Plugins
Oh mein Zsh - Mach das Terminal hilfreich - ZSH ist ein Schatz. Es stehen mehr als 270 Plugins zur Auswahl. Es wird eine einfache Konfigurationsdatei verwendet, deren Migration von meinem alten auf das neue Setup nur wenige Minuten dauerte. tmux macht dasselbe, also war das gesamte Entwickler-Setup Minuten. Mit einer solch großen Anzahl an Plugins finden Sie definitiv etwas Nützliches für Ihren Workflow.

Eines der am häufigsten verwendeten Plugins in ZSH, das ich verwende, ist "Z", das die Pfade lernt, über die Sie auf Dinge zugreifen. Mit nur wenigen Schlüsselfiguren gelangen Sie dann dorthin, wo Sie möchten.
Beispiel: $z te
würde zu /folder/path/inner/more/content/testing
springen - eine Verknüpfung zu Ihrer vorherigen Position. Macht das Wechseln zwischen Verzeichnissen schmerzfrei.
exa - Ein hübscherer LS-Ausgang. Sie können mehr auf ihrer Website finden. Kurz gesagt, es bietet auch eine schnelle und schöne Ausgabe von Dateien und Verzeichnissen. Wieder - hübsch.
ripgrep - Eine superschnelle Suche. Wenn Sie Tausende von Dateien mit Tausenden von Codezeilen nachschlagen müssen, sollten Sie nicht zu lange warten. Ripgrep ist hier, um dich zu retten. Und natürlich gibt es eine Menge weiterer nützlicher Funktionen und aussagekräftiger Flags, mit denen Sie arbeiten können. Es folgen auch Gitignore-Dateien, um die Ergebnisse aussagekräftig zu halten.

Quelle
git-open - Ein kleines Tool von Paul Irish auf Github, das das tut, was es sagt - es öffnet das Git-Repository. Was ist die große Sache, die Sie sagen könnten? Erinnern Sie sich an die genaue URL für das Projekt, an dem Sie zum ersten Mal seit 6 Monaten gearbeitet haben? Wie lange dauert die Navigation? Dieser Befehl öffnet es direkt für Sie. Und mehr noch - es navigiert Sie auch zum richtigen Zweig.
Ihre CLI! In meinem Fall dreht sich unsere Arbeit um WordPress. Was gerne als CLI, über die Sie mit der WP-Installation arbeiten können. Ein einfaches neues Site-Setup erfordert grundlegende Befehle wie mkdir (Ordner erstellen), git clone (Klonen eines Repos), wp core download, wp db create, wp db import (alles von WP-CLI). Wenn Sie alles eingeben und eine schnelle Konfiguration vornehmen, wird nach 1 Minute ein neues Setup ausgeführt.
Stellen Sie sicher, dass Sie überprüfen, ob es andere ähnliche CLIs gibt, die mit den von Ihnen verwendeten Tools für Sie funktionieren würden!

Quelle
4 - VS Code Plugins
Meine Wahl für Code Editor / IDE ist VS Code. Früher war es großartig, aber mit einer leistungsstärkeren Maschine kann ich jetzt VS-Code ohne die 3 FPS, die ich zuvor beim Scrollen eines größeren Dokuments erhalten habe, ordnungsgemäß verwenden.
Für die Liste unten werde ich nicht mit super berühmten Erweiterungen wie ESLint, GitLense oder Theme / Icon Packs gehen, da sie in fast jedem Artikel, den Sie finden würden, gut behandelt werden.
- Tag automatisch schließen - Damit Sie die schließenden Tags nicht jedes Mal schreiben müssen. Nutzlos, wenn Sie sauberes HTML mit Emmet ausführen, aber hilfreich, wenn Sie eine schnelle Bearbeitung durchführen müssen
- Tag automatisch umbenennen - Auch sehr hilfreich beim Bearbeiten. Die schließenden / öffnenden Tags werden direkt geändert, wenn Sie nur eines davon bearbeiten.
- Code-Rechtschreibprüfung - Jetzt müssen Sie sich in PRs nicht mehr schämen, wenn Sie etwas mit einem Tippfehler geschrieben haben. Oder verwenden Sie es einfach, um die Dinge für Open Source-Projekte schön und hübsch zu halten.
- Doppelte Aktion - Super hilfreich beim Erstellen neuer Dateien aus vorhandenen. Es ist ein Befehl, mit Cmd + P auszuführen. Funktioniert hervorragend mit der Erstellung neuer sass / js-Dateien im Front-End.
- Jumpy - Ein großartiges Werkzeug! Drücken Sie einfach eine von Ihnen definierte Verknüpfung und es werden kleine zwei Buchstabenfelder neben jedem Wort ausgegeben. Geben Sie sie ein und Ihr Cursor springt dorthin. Eine schnelle Möglichkeit, ohne Maus in einer Datei zu navigieren.
Und ein Tipp / eine Erinnerung: Sie können Bilder in VS-Code in der Vorschau anzeigen. Wenn Sie eine Benutzeroberfläche entwickeln und einem Bild Ihres Designers folgen, können Sie es einfach in das Ansichtsfenster ziehen und auf der Seite anzeigen.
Zusamenfassend:
Es ist voll von erstaunlichen Werkzeugen und Instrumenten da draußen. Wann immer Sie sich wiederholende Arbeiten entdecken oder sich fragen: "Sollte es keinen einfacheren Weg geben, dies zu tun?", Führen Sie einfach eine Suche durch! Höchstwahrscheinlich gibt es tatsächlich einen schnelleren Weg. Wenn Sie dies das ganze Jahr über einige Male tun, erhalten Sie einen schönen, engen Workflow, mit dem Sie sehr schnell arbeiten können.
Wenn möglich, finden Sie auch einige „sichere Maßnahmen“ - richten Sie Flusen ein, automatisieren Sie Ihr Build-Setup, erstellen Sie „Starter-Vorlagen“, mit denen Sie arbeiten können, und schreiben Sie möglicherweise sogar eine kleine CLI für sich.