Beschleunigen Sie Ihren Workflow beim Erstellen von WordPress-Designs

Geschwindigkeit ist für so ziemlich jedes Projekt von größter Bedeutung. Oft sind die Fristen sehr eng und ein guter Workflow in einem Team ist die einzige Möglichkeit, ihn rechtzeitig einzuhalten und zu verhindern, dass alle während des gesamten Prozesses ausbrennen.

Wie würde ein solcher Workflow aussehen? Und wie können Sie einige Best Practices für Ihre tägliche Arbeit implementieren, um Ihre Lieferungen zu beschleunigen? Nun, es gibt einige Möglichkeiten, wie wir das untersuchen können. Der erste ist:

Verbesserungen des technischen Workflows

In diesem Teil werden wir uns die Tools ansehen, mit denen Entwickler ihre Arbeit beschleunigen. Der einfachste Weg, um herauszufinden, was am besten funktioniert, besteht darin, auf die langsamsten Prozesse hinzuweisen - was am meisten Zeit in Anspruch nimmt. Als nächstes wäre - was die meiste mentale Energie braucht, um zu tun. Manchmal mag ein Prozess sehr schnell sein, aber jedes Mal, wenn Sie ihn tatsächlich ausführen, fühlt es sich wie eine lästige Pflicht an, die Sie lieber für später zurückschieben würden.

Vorschlag 1 - Bereiten Sie ein Starter-Thema vor

Eine enorme Verbesserung unseres Workflows bei DevriX bestand darin, alle Standardaufgaben zu erledigen, bevor wir jedes Projekt starten, sie in einem Repository zu hosten und sie dann jedes Mal zu klonen, wenn ein neuer Build kommt.

Wie hilft es?

1. Es ist nicht erforderlich, jedes Mal ein Gulp-Setup durchzuführen. Alle Pakete sind sofort einsatzbereit, sie werden ausgeführt, die Konfiguration wurde auf mehr als einem Computer getestet.
2. Es kommt mit kurzer Dokumentation. Wenn es neue Teammitglieder gibt, müssen sie keine Fragen zu grundlegenden Einrichtungsaufgaben stellen, da das meiste davon bereits erklärt wurde.
3. Sie müssen sich nicht jedes Mal für die Dateistruktur des Frontends entscheiden. Meistens arbeitet unser Front-End-Team ab dem ersten Tag an einem neuen Thema. Wenn also jedes Mal eine Ordner- / Dateistruktur für die Sass-Dateien erstellt werden muss, würden wir Stunden pro Projekt verschwenden.
4. Wir halten alles konsistent - Dies ist ein weiterer großer Schub. In der Regel ist mehr als ein Projekt gleichzeitig aktiv. Wenn Sie also beim Öffnen eines Projekts zum ersten Mal wissen, wo Sie suchen, was Sie suchen, sparen Sie viel Zeit. Mit der gleichen Struktur für alle Themen, Stile, JS-Dateien und PHP-Dateien befinden sich alle am selben Ort.

Immer wenn wir einen besseren Ansatz für ein Problem finden, das möglicherweise das Build-Setup verbessert, Linters und Hooks einführt, hier und da einige Aktionen oder häufig verwendete Hilfsfunktionen hinzufügt, aktualisieren wir unser Starter-Thema. Wenn die Änderungen am Build-Setup erheblich sind, aktualisieren wir auch die Codebasis vorhandener Projekte, um sie zu befolgen.

Vorschlag 2 - Behalten Sie den gleichen Codierungsstil und die gleichen Ansätze bei

Damit würden alle Entwickler verstehen, was die Leute vor ihnen taten. Es steckt jedoch noch mehr dahinter - wenn dieselben Ansätze zur Implementierung von Layouts angewendet werden, ist die Codebasis konsistenter. Dies ist insbesondere für Front-End-Entwickler erforderlich, da die Verschmutzung der Stile ein großes Regressionsproblem darstellt.

Sie können beispielsweise den HTML / CSS-Codierungsstil von Google sehen.

Quelle

Gängige Methoden zum .list-<name> "Eintrag" oder "Kommentar" oder zum Verwalten von "Listen" wie .list-<name> und dergleichen sind einige der Standardansätze, die wir beim .list-<name> von Layouts verwenden.

Vorschlag 3 - Verbessern Sie Ihr lokales Arbeits-Setup

Eine schnelle Möglichkeit, zwischen Projekten zu navigieren, spart allein viel Zeit. Nur $cd'ing zwischen Verzeichnissen kann leicht eine halbe Stunde pro Tag dauern. Das ist alles verschwendete Zeit. Stattdessen können Sie TMUX auf Ihrem Computer einrichten, für jedes Projekt ein separates Fenster und für jede Aufgabe / jeden Zweck ein separates Fenster einrichten, z. B. „Running Gulp“ - Panel 1; "Ausführen von Befehlen im Thema" - Panel 2; "Befehle in Plugins ausführen" - Panel 3.

Stellen Sie außerdem sicher, dass Sie Ihren Code-Editor direkt vom Terminal aus öffnen können. Es ist eine schnellere Möglichkeit, zum Codieren zu gelangen, als über ein Symbol zu öffnen und dann zu „Projekt öffnen“ und dergleichen zu navigieren. VS Code hat dies wirklich einfach einzurichten.

Nutzen Sie Ihre Werkzeuge besser

• VS-Code, Sublime-Text und viele andere Tools verfügen über ein Befehls-Popup, in das Sie fast alles eingeben können, was der Editor tun kann. Alle offenen Dokumente speichern? Nur ein paar Knöpfe. Schließen Sie sie? Alles das selbe.
• Navigieren Sie durch die Befehlspalette - das Suchen nach Dateien in der Seitenleiste nimmt ebenfalls zu viel Zeit in Anspruch. Schreiben Sie einfach den gewünschten Dateinamen. Fügen Sie einige Erweiterungen hinzu, um allgemeine Vorgänge wie das Umbenennen, Verschieben, Duplizieren und Löschen von Dateien zu beschleunigen.
• Linters einrichten. Zeitverschwendung bei der Dateiformatierung ist unnötig, wenn es Tools gibt, die dies für Sie erledigen können. Fügen Sie jedes Mal, wenn Sie Code einrücken, Leerzeichen zwischen Klammern usw. ein, um Probleme besser zu lösen.
• Verwenden Sie Verknüpfungen und Snippets - für Front-End-Entwickler ist Emmet ein Lebensretter. Einfache Einzeiler wie: nav>.site-nav>ul.list-items>li.list-item*5>a{title} auf mehr als 15 Zeilen HTMl-Code erweitert, alle formatiert und bereit zum Stylen. Das Eingeben dieser Zeile dauert Sekunden.

Beispiel für eine VSCode-Befehlspalette. Sie können viel mehr auf ihrer Übersichtsseite lesen.

Entscheidungsfindung zur Verbesserung des Workflows

Dies kann etwas kniffliger sein und erfordert möglicherweise mehr Erfahrung und Verständnis für die Geschäftsanforderungen des Kunden. Es ist auch einer der verantwortungsbewussteren Ansätze, aber manchmal kann es ein Projekt davor bewahren, eine Frist zu verpassen.

Beginnen Sie mit dem wichtigsten und am schnellsten zu implementierenden. Wenn die Wahrscheinlichkeit gering ist, dass eine Seite am ersten Tag nicht gestartet wird, müssen Sie nicht damit beginnen. Wenn es nach Ihren Schätzungen möglich ist, dass etwas nicht fertig ist, besprechen Sie dies unbedingt mit Ihrem Kunden. Je klarer Sie angeben, was Sie getan haben, was sich verzögern könnte und wo Probleme auftreten könnten, desto wahrscheinlicher ist es, dass Sie ein potenzielles Problem überwinden können.

Delegieren Sie die Arbeit frühzeitig, aber halten Sie die Gesamtzahl der beteiligten Personen niedrig. Dies ist etwas, das jeder zu einem bestimmten Zeitpunkt bemerkt. Vielleicht ist das früheste in der Schule, wenn 10 Kinder an einem Projekt arbeiten, aber nur zwei oder drei den größten Teil der Arbeit erledigen.

Dies zeigt sich insbesondere bei Projekten, die mit mehr Front-End-Arbeit beginnen. Selten vom ersten Tag an kann mehr als ein Entwickler arbeiten, da eines der ersten Dinge, die festgelegt werden müssen, die Architektur des Projekts ist. Die grundlegenden Entscheidungen des Designteams sollten der Build sein. Was sind die Komponenten, wie erweitern sie sich, die Dateitrennung, die Struktur und Regeln der Medienabfrage, die Namenskonventionen. Alles davon.

Und wenn sich in einem so grundlegenden Stadium mehr als ein Entwickler befindet, können beide damit beginnen, einen grundlegenden Teil des Codes zu implementieren, den sie benötigen, um den Rest der Site zu gestalten. Wenn sie diesen Code pushen, entstehen Konflikte, und einer der Entwickler muss möglicherweise den größten Teil der Arbeit wiederholen.

Ein guter Zeitpunkt, um weitere Front-End-Entwickler hinzuzufügen, wäre, wenn mehr grundlegende Arbeiten erledigt sind und die Arbeit an separate Komponenten wie „Inhaltskarten“ oder „Zielseite X“ oder „404-Seite“ und dergleichen delegiert werden kann. Bis dahin werden Schriftarten angewendet, allgemeine Typografieeinstellungen festgelegt, die meisten Dateien erstellt und mindestens 1-2 Seiten erstellt.

Und dann ist es ideal, wenn die Gesamtzahl der Personen, die sich auf ein einzelnes Projekt konzentrieren, auf ein Minimum beschränkt wird. In Bezug auf das Zeitmanagement und die Konzentration auf die Aufgabe ist ein Tipp, den Entwickler, die in einem Team arbeiten, möglicherweise berücksichtigen sollten, die Arbeitslast für ein bestimmtes Projekt zu ändern.

Nehmen wir an, wir haben den Front-End-Entwickler John, der seit zwei Wochen in Vollzeit an einer neuen Site arbeitet. Zu diesem Zeitpunkt hat er es mehr als 80 Stunden am Tag betrachtet. Er hat sehr wahrscheinlich aufgehört, Probleme auf der Website zu entdecken! Jetzt wäre ein guter Zeitpunkt für seine Freundin Kate, den größten Teil seiner Arbeit zu übernehmen. Kate kann anfangen, kleinere Probleme zu beheben, überprüfen, ob es dem Design entspricht, die Leistung hier und da verbessern und die wenigen Seiten und Komponenten fertigstellen, die John verschoben hat, nur weil er nicht die mentale Energie hat, dies zu tun.

Es ist durchaus möglich, dass die meisten Entwickler dies erlebt haben, und es fühlt sich so gut an, einen Teamkollegen zu haben, der ein oder zwei Wochen lang einspringen und die Dinge übernehmen kann, während Sie sich mit einem neuen Projekt oder Wartungsarbeiten an älteren Websites ein wenig klar werden .

In Summe:

Es gibt nicht nur einige offensichtliche technische Möglichkeiten, um die Entwicklungsgeschwindigkeit einer Site zu verbessern. Es ist eine Mischung aus Teamarbeit - wie Sie gemeinsame Richtlinien in Ihrem Team definieren und wie Sie Ihre Arbeitsumgebung einrichten / Ihre Arbeit automatisieren, während Sie alle verfügbaren Tools verwenden. Wie Sie Ihren Geist für längere Zeit frisch und scharf halten, um die hohe Produktivität aufrechtzuerhalten, die Sie am ersten Tag hatten.

Um all dies zu verwalten, braucht ein starkes Team gute leitende Entwickler, um die Architektur festzulegen, verantwortliche Entwickler, die Richtlinien befolgen und qualitativ hochwertige Arbeit leisten, und gute Projektmanager, um nach dem mentalen Zustand aller zu suchen.