Instrumente și abordări pentru a accelera fluxul de lucru al dezvoltatorului web

Publicat: 2020-12-17

Dezvoltarea web grupează o cantitate imensă de stive, instrumente, limbaje de programare și multe altele. Unele dintre instrumentele / fluxurile de lucru de aici ar funcționa în unele cazuri, unele în altele. Pentru a aborda mai bine acest lucru, considerați această postare scrisă din punctul de vedere al unui dezvoltator WordPress Front-End, deși instrumentele sunt destul de largi și pot fi utilizate în multe cazuri.

1 - tmux

Una dintre cele mai mari schimbări pe care le-am avut în fluxul meu de lucru a fost când am configurat tmux pe mașina mea (macOS, dar funcționează și pentru Linux, desigur). Deși s-ar putea să nu-l folosesc la adevăratul său potențial, face o treabă excelentă și îmi permite să schimb instantaneu proiectele, ceea ce economisește mult timp.

tmux are o lungă pagină „de început” scrisă în depozitul GitHub al proiectului pentru a verifica. De asemenea, funcționează cu o tastatură dreaptă a cutiei, cu suport pentru mouse care poate fi activat. tmux folosește fișiere de configurare care pot fi partajate între sisteme pentru configurare instantanee.

Deci, cum mi-a schimbat fluxul de lucru?

  • tmux vă oferă o modalitate ușoară de a împărți ecranele și de a naviga în cadrul unui proiect cu doar două apăsări de taste. Deci, puteți avea o „înghițitură” care rulează într-o vizualizare, comenzi pentru a rula pe alta, SSH pe server pe a treia și unele statistici care merg pe a patra.
  • Vă oferă ferestre pentru fiecare proiect care sunt ca „file”. Aici puteți trece la diferite proiecte folosind două apăsări de taste. Am aproximativ 20 de proiecte deschise tot timpul în file și când trebuie să lucrez la un proiect nou, îl schimb doar acolo, iar gulp-ul este deja rulat. Sunt în directoarele corecte și pot începe să lucrez în mai puțin de 2 secunde.
  • Păstrează întreaga configurare ACTIVATĂ tot timpul. Nu trebuie să o faci de fiecare dată când începi să lucrezi, este întotdeauna acolo. Dacă aparatul se oprește și îl porniți din nou, puteți „reînvia” (cu un plugin simplu) la configurarea standard și în aproximativ 5 secunde este din nou activat. Este amuzant că este nevoie de o utilizare 100% pe I7-9900K pentru a face asta.
  • Fiecare panou dintr-o fereastră este propria instanță. Deci, puteți avea cu ușurință diferite versiuni de noduri care rulează pentru fiecare panou.
captură de ecran tmux

Sursă

2 - Alfred (sau alternativa)

Alfred este o „aplicație de productivitate” pentru Mac, cu echivalente și pentru Windows și Linux. Unele dintre lucrurile pe care le face Alfred sunt:

  • Vă oferă acces rapid la programele deschise, tastând doar câteva litere
  • Accesați repede directoare
  • Răsfoiți până când găsiți ceea ce aveți nevoie direct în fereastra popup
  • Deschideți fișiere cu diferite programe
  • Căutați pe web sau în programele dvs. care au fost integrate și multe altele.

Cu powerpack-ul său există multe alte integrări „Workflow” care pot automatiza și munca.

pagina de pornire alfred

Funcționează și ca un calculator de acces rapid, gestionează fragmente din sistemul de operare (nu este nevoie să îl accesați, doar le extinde automat), salvează un istoric al clipboardului (salvator de viață), se integrează cu terminalul și așa mai departe. Puteți găsi totul despre acest lucru pe site-ul aplicației.

Cum îl folosesc:

  • Mai întâi, desigur, pentru a deschide aplicații. Nu fac clic cu indicatorul pe pictograme, ci doar scriu litere și iată-ne.
  • Folosiți-l ca calculator atunci când scrieți CSS (se întâmplă adesea cu valori EM).
  • Istoric clipboard - uneori stivuiesc 5-6 lucruri în clipboard și apoi le lipesc în editorul de cod oriunde este nevoie. Sau întoarceți-vă cu câteva zile în urmă pentru a găsi un e-mail, un fragment, etc sau chiar o mică funcție care face ceva într-un proiect și ar ajuta în altul. Este nevoie de 2-3 secunde în loc de 10+ minute de navigare a codului.
  • Accesați directoarele de lucru atunci când efectuați lucrări de proiectare sau direct la fișierele XD fără a naviga în căutare. Durează din nou 2-3 secunde față de un minut cam în căutare.
  • Fragmente - Am pregătit un frumos fragment de „comentariu” pentru Asana cu capturi de ecran cu rezultatele, un loc pentru adăugarea link-ului de validare, mesaj către următorii dezvoltatori, starea dacă este în scenă sau nu și așa mai departe. Acesta este un mesaj constant în toate comentariile pe care echipa le urmează cu ușurință. Este nevoie de mai puțin de 2 secunde pentru a tasta și a desfășura fragmentul.

3 - Unelte / pluginuri terminale

Oh My Zsh - Faceți terminalul util - ZSH este o comoară. Există peste 270 de pluginuri din care puteți alege. Folosește un fișier de configurare simplu, care a durat doar câteva minute pentru a migra de la vechea mea configurare la cea nouă. tmux face același lucru, deci întreaga configurare a dezvoltatorului a fost de câteva minute. Cu o cantitate atât de mare de pluginuri dintre care puteți alege, veți găsi cu siguranță ceva util fluxului dvs. de lucru.

Unul dintre cele mai des utilizate pluginuri în ZSH pe care îl utilizez este „Z”, care învață căile pe care le folosiți pentru a accesa lucrurile. Apoi vă va duce oriunde doriți folosind doar câteva caractere cheie.

Exemplu: $z te ar sări la /folder/path/inner/more/content/testing - o comandă rapidă către locul unde te-ai dus anterior. Face salturi între directoare fără dureri.

oh zsh meu

exa - O ieșire LS mai frumoasă. Puteți găsi mai multe pe site-ul lor. Pe scurt, oferă o ieșire rapidă și plăcută a fișierelor și a directoarelor. Din nou - drăguț.

pagina de pornire exa

ripgrep - O căutare super rapidă. Când trebuie să căutați mii de fișiere cu mii de linii de cod, nu ar trebui să așteptați prea mult. Ripgrep este aici pentru a vă salva. Și, desigur, vine cu o mulțime de alte caracteristici utile și steaguri semnificative pentru a lucra. De asemenea, urmează fișierele .gitignore pentru a menține rezultatele semnificative.

Sursă

git-open - Un mic instrument de Paul Irish pe Github care face ceea ce spune - deschide depozitul git. Care este marea afacere pe care ai putea-o spune? Vă amintiți adresa URL exactă pentru proiectul la care lucrați, pentru prima dată, în 6 luni? Cât durează navigarea către el? Această comandă o va deschide direct pentru dvs. Și mai mult - vă va naviga și către ramura corectă.

CLI-ul dvs.! În cazul meu, munca noastră se învârte în jurul WordPress. Ceea ce fericit ca CLI prin care puteți lucra cu instalarea WP. O nouă configurare simplă a site-ului necesită comenzi de bază, cum ar fi mkdir (creați un folder), git clone (Clone a repo), wp core download, wp db create, wp db import (toate din WP-CLI). Tastați totul și o configurare rapidă și după 1 minut aveți o nouă configurare rulată.

Asigurați-vă că verificați dacă există alte CLI-uri similare care ar funcționa pentru dvs. cu instrumentele pe care le utilizați!

Sursă

4 - Plug-uri VS Code

Alegerea mea pentru editorul de cod / IDE este VS Code. A fost sublim înainte, dar cu o mașină mai robustă, acum pot folosi corect codul VS fără cele 3 FPS pe care le obțineam înainte când derulați un document mai mare.

Cod VS

Pentru lista de mai jos nu voi merge cu extensii super celebre precum ESLint, GitLense sau pachete de teme / pictograme, deoarece acestea sunt bine acoperite în aproape orice articol pe care l-ați găsi.

  • Etichetă de închidere automată - astfel încât să nu trebuie să scrieți etichetele de închidere de fiecare dată. Inutil atunci când faci HTML curat cu Emmet, dar ajută când trebuie să faci o editare rapidă
  • Redenumire automată a etichetei - De asemenea, destul de util atunci când editați. Va modifica direct etichetele de închidere / deschidere atunci când editați doar una dintre ele.
  • Verificator ortografic de cod - Acum nu trebuie să vă simțiți jenat în PR atunci când ați scris ceva cu o greșeală de scriere. Sau pur și simplu folosiți-l pentru a păstra lucrurile frumoase și frumoase pentru proiectele open source.
  • Duplicare de acțiune - Super util în crearea de fișiere noi din cele existente. Este o comandă pentru a rula cu Cmd + P. Funcționează minunat prin crearea de noi fișiere sass / js în front-end.
  • Jumpy - Un instrument minunat! Doar apăsați o comandă rapidă pe care o definiți și va afișa două căsuțe de litere mici lângă fiecare cuvânt. Tastați-le și cursorul dvs. va sări la el. O modalitate rapidă de a naviga într-un fișier fără a utiliza un mouse.

Și un sfat / memento profesional - puteți previzualiza imagini în cod VS. Când dezvoltați o interfață de utilizare și urmăriți o imagine de la designerul dvs., o puteți trage doar în fereastra de vizualizare și o puteți privi în lateral.

Pe scurt:

Este plin de instrumente și instrumente uimitoare acolo. Ori de câte ori observați o muncă repetitivă pe care o faceți sau vă întrebați „nu ar trebui să existe o modalitate mai ușoară de a o face”, faceți o căutare! Cel mai probabil există într-adevăr o cale mai rapidă. Dacă faceți asta de câteva ori pe tot parcursul anului, veți ajunge la un flux de lucru frumos și strâns, care vă permite să produceți lucrări într-un ritm foarte rapid.

Dacă este posibil, găsiți și câteva „măsuri sigure” - configurați câteva scame, automatizați configurarea compilării, creați „șabloane de pornire” pentru a lucra, poate chiar scrieți un pic CLI pentru dvs.