Narzędzia i podejścia do przyspieszenia przepływu pracy programisty WWW

Opublikowany: 2020-12-17

Tworzenie stron internetowych obejmuje ogromną liczbę stosów, narzędzi, języków programowania i nie tylko. Niektóre narzędzia / przepływy pracy tutaj działałyby w niektórych przypadkach, inne w innych. Aby lepiej podejść do tego tematu, potraktuj ten post jako napisany z punktu widzenia programisty WordPress Front-End developer, chociaż narzędzia są dość szerokie i mogą być używane w wielu przypadkach.

1 - tmux

Jedną z największych zmian, jakie miałem w moim przepływie pracy, była konfiguracja tmux na moim komputerze (macOS, ale oczywiście działa również dla Linuksa). Chociaż być może nie wykorzystuję go w pełni, wykonuje świetną robotę i pozwala mi natychmiast przełączać się między projektami, co oszczędza mnóstwo czasu.

tmux ma długą stronę „Pierwsze kroki” napisaną w repozytorium GitHub projektu do wyewidencjonowania. Działa również z klawiaturą zaraz po wyjęciu z pudełka z obsługą myszy, którą można włączyć. tmux używa plików konfiguracyjnych, które mogą być współużytkowane przez systemy w celu natychmiastowej konfiguracji.

Jak więc zmieniło to mój przepływ pracy?

  • tmux zapewnia łatwy sposób dzielenia ekranów i nawigacji w projekcie za pomocą zaledwie dwóch naciśnięć klawiszy. Możesz więc mieć „łyk” działający w jednym widoku, polecenia do uruchomienia w innym, SSH do serwera na trzecim, a niektóre statystyki na czwartym.
  • Daje ci okna dla każdego projektu, które są jak „karty”. Tutaj możesz przełączać się do różnych projektów za pomocą dwóch naciśnięć klawiszy. Mam około 20+ projektów otwartych przez cały czas w zakładkach i kiedy muszę pracować nad nowym projektem, po prostu przełączam go tam i łyk już leci. Jestem we właściwych katalogach i mogę rozpocząć pracę w mniej niż 2 sekundy.
  • Utrzymuje cały zestaw WŁĄCZONY przez cały czas. Nie musisz tego robić za każdym razem, gdy zaczynasz pracę, zawsze tam jest. Jeśli twój komputer wyłączy się i uruchomisz go ponownie, możesz po prostu „wskrzesić” (za pomocą prostej wtyczki) do standardowej konfiguracji i po około 5 sekundach jest on ponownie uruchomiony. To zabawne, że wymaga to 100% wykorzystania na I7-9900K, aby to zrobić.
  • Każdy panel w oknie to osobna instancja. Możesz więc łatwo uruchomić różne wersje Node dla każdego panelu.
tmux sreenshot

Źródło

2 - Alfred (lub alternatywa)

Alfred to „aplikacja zwiększająca produktywność” dla komputerów Mac z odpowiednikami dla systemów Windows i Linux. Oto niektóre z rzeczy, które robi Alfred:

  • Zapewnia szybki dostęp do otwartych programów po prostu wpisując kilka liter
  • Przejdź szybko do katalogów
  • Przeglądaj, aż znajdziesz to, czego potrzebujesz, bezpośrednio w wyskakującym okienku
  • Otwieraj pliki za pomocą różnych programów
  • Przeszukuj Internet lub zintegrowane programy i wiele innych.

Dzięki pakietowi mocy, istnieje wiele innych integracji „przepływu pracy”, które również mogą zautomatyzować pracę.

Alfred strona główna

Działa również jako kalkulator szybkiego dostępu, zarządza fragmentami w całym systemie operacyjnym (nie ma nawet potrzeby uzyskiwania do nich dostępu, po prostu je automatycznie rozwija), zapisuje historię schowka (ratownik), integruje się z terminalem i tak dalej. Możesz znaleźć wszystko na ten temat w witrynie aplikacji.

Jak tego używam:

  • Najpierw oczywiście do otwierania aplikacji. Nie klikam wskaźnikiem na ikony, po prostu piszę litery i gotowe.
  • Używaj go jako kalkulatora podczas pisania CSS (zdarza się to często w przypadku wartości EM).
  • Historia schowka - czasami układam 5-6 rzeczy w schowku, a następnie wklejam je w edytorze kodu, gdziekolwiek jest to potrzebne. Lub cofnij się kilka dni wstecz, aby znaleźć wiadomość e-mail, fragment kodu itp. Lub nawet małą funkcję, która robi coś w jednym projekcie, a pomogłaby w innym. Przeglądanie kodu zajmuje 2-3 sekundy zamiast ponad 10 minut.
  • Przejdź do katalogów roboczych podczas wykonywania prac projektowych lub bezpośrednio do plików XD bez przeglądania wyszukiwarki. Trwa ponownie 2-3 sekundy w porównaniu do minuty lub więcej w wyszukiwarce.
  • Snippets - przygotowałem ładny fragment „komentarza” dla Asany ze zrzutami ekranu wyników, miejscem na dodanie linku do zatwierdzenia, wiadomością do następnych programistów, statusem czy jest w fazie przejściowej czy nie i tak dalej. Jest to spójny komunikat we wszystkich komentarzach, który zespół łatwo śledzi. Wpisanie i rozwinięcie fragmentu zajmuje mniej niż 2 sekundy.

3 - Narzędzia terminala / wtyczki

Oh My Zsh - Spraw, by terminal był pomocny - ZSH to skarb. Do wyboru jest ponad 270 wtyczek. Używa prostego pliku konfiguracyjnego, którego migracja z mojej starej konfiguracji do nowej zajęła tylko kilka minut. tmux robi to samo, więc cała konfiguracja programisty zajęła kilka minut. Przy tak ogromnej liczbie wtyczek do wyboru na pewno znajdziesz coś przydatnego w swoim przepływie pracy.

Jedną z częściej używanych wtyczek w ZSH, z której korzystam, jest „Z”, która uczy się ścieżek, których używasz, aby uzyskać dostęp do rzeczy. Zabierze Cię tam, gdzie chcesz, używając tylko kilku kluczowych znaków.

Przykład: $z te przeskoczy do /folder/path/inner/more/content/testing - skrót do miejsca, w którym byłeś wcześniej. Sprawia, że ​​przeskakiwanie między katalogami jest bezbolesne.

o mój zsh

exa - ładniejsze wyjście LS. Możesz znaleźć więcej na ich stronie internetowej. Krótko mówiąc, zapewnia szybkie i przyjemne wyjście plików i katalogów. Znowu - ładna.

exa homepage

ripgrep - super szybkie wyszukiwanie. Kiedy musisz przeszukać tysiące plików z tysiącami linii kodu, nie powinieneś czekać zbyt długo. Ripgrep jest tutaj, aby cię uratować. I oczywiście zawiera mnóstwo innych przydatnych funkcji i znaczących flag do pracy. Jest również zgodny z plikami .gitignore, aby wyniki były znaczące.

Źródło

git-open - Małe narzędzie autorstwa Paula Irisha na Githubie, które robi to, co mówi - otwiera repozytorium git. O co chodzi, możesz powiedzieć? Czy pamiętasz dokładny adres URL tego projektu, nad którym pracowałeś po raz pierwszy od 6 miesięcy? Jak długo trwa nawigacja do niego? To polecenie bezpośrednio otworzy je dla Ciebie. I więcej - poprowadzi Cię również do właściwej gałęzi.

Twój CLI! W moim przypadku nasza praca kręci się wokół WordPressa. Co szczęśliwie jako CLI, dzięki któremu możesz pracować z instalacją WP. Prosta konfiguracja nowej witryny wymaga podstawowych poleceń, takich jak mkdir (utwórz folder), git clone (klonuj repozytorium), pobieranie wp core, wp db create, wp db import (wszystko z WP-CLI). Wpisując wszystko i szybką konfigurację, a po 1 minucie masz uruchomioną nową konfigurację.

Upewnij się, aby dokładnie sprawdzić, czy istnieją inne podobne interfejsy wiersza polecenia, które działałyby dla Ciebie z narzędziami, których używasz!

Źródło

4 - Wtyczki VS Code

Mój wybór dla edytora kodu / IDE to VS Code. Wcześniej było to wzniosłe, ale dzięki mocniejszej maszynie mogę teraz poprawnie używać kodu VS bez 3 klatek na sekundę, które otrzymywałem wcześniej, przewijając większy dokument.

Kod VS

Poniższa lista nie obejmuje super znanych rozszerzeń, takich jak ESLint, GitLense lub pakiety motywów / ikon, ponieważ są one dobrze opisane w prawie każdym artykule, który można znaleźć.

  • Tag automatycznego zamykania - dzięki czemu nie musisz za każdym razem pisać tagów zamykających. Bezużyteczne podczas robienia czystego HTML z Emmetem, ale pomaga, gdy musisz wykonać szybką edycję
  • Znacznik automatycznej zmiany nazwy - również bardzo pomocny podczas edycji. Zmieni bezpośrednio tagi zamykające / otwierające, gdy edytujesz tylko jeden z nich.
  • Sprawdzanie pisowni w kodzie - teraz nie musisz się wstydzić w PR, gdy napiszesz coś z literówką. Lub po prostu użyj go, aby zachować ład i wygląd w projektach open source.
  • Duplikuj akcję - Super pomocna przy tworzeniu nowych plików z już istniejących. To polecenie do uruchomienia z Cmd + P. Działa świetnie przy tworzeniu nowych plików sass / js we front-end.
  • Jumpy - niesamowite narzędzie! Po prostu naciśnij zdefiniowany skrót, a obok każdego słowa zostaną wyświetlone małe dwie litery. Wpisz je, a kursor przeskoczy do niego. Szybki sposób poruszania się po pliku bez użycia myszy.

I profesjonalna wskazówka / przypomnienie - możesz wyświetlać podgląd obrazów w kodzie VS. Kiedy opracowujesz interfejs użytkownika i podążasz za obrazem od swojego projektanta, możesz po prostu przeciągnąć go do widoku i spojrzeć na niego z boku.

W skrócie:

Jest tam mnóstwo niesamowitych narzędzi i instrumentów. Kiedykolwiek zauważysz jakąś powtarzalną pracę, którą wykonujesz lub zastanawiasz się, czy nie powinno być na to prostszego sposobu, po prostu przeprowadź wyszukiwanie! Najprawdopodobniej rzeczywiście istnieje szybszy sposób. Jeśli zrobisz to kilka razy w ciągu roku, uzyskasz ładny, napięty przepływ pracy, który pozwoli Ci wykonywać pracę w bardzo szybkim tempie.

Jeśli to możliwe, znajdź także jakieś „bezpieczne środki” - skonfiguruj trochę lintingu, zautomatyzuj konfigurację kompilacji, zbuduj „szablony startowe” do pracy, może nawet napisz trochę dla siebie CLI.