Strumenti e approcci per accelerare il flusso di lavoro dello sviluppatore web

Lo sviluppo Web riunisce una quantità enorme di stack, strumenti, linguaggi di programmazione e altro ancora. Alcuni degli strumenti / flussi di lavoro qui funzionerebbero in alcuni casi, altri in altri. Per affrontare meglio questo problema, considera questo post come scritto dal punto di vista di uno sviluppatore Front-End di WordPress, sebbene gli strumenti siano piuttosto ampi e possano essere utilizzati in molti casi.

1 - tmux

Uno dei più grandi cambiamenti che ho avuto nel mio flusso di lavoro è stato quando ho impostato tmux sulla mia macchina (macOS ma funziona anche per Linux ovviamente). Anche se potrei non utilizzarlo al massimo del suo potenziale, fa un ottimo lavoro e mi consente di passare da un progetto all'altro all'istante, il che consente di risparmiare molto tempo.

tmux ha una lunga pagina di "introduzione" scritta sul repository GitHub del progetto da controllare. Funziona anche con una tastiera fuori dalla scatola con supporto per il mouse che può essere abilitato. tmux utilizza file di configurazione che possono essere condivisi tra i sistemi per l'installazione istantanea.

Allora come ha cambiato il mio flusso di lavoro?

• tmux ti offre un modo semplice per dividere le schermate e navigare all'interno di un progetto con solo due pressioni di tasti. Quindi puoi avere un "gulp" in esecuzione in una vista, comandi da eseguire in un'altra, SSH al server in terza e alcune statistiche in quarta.
• Ti dà finestre per ogni progetto che sono come "schede". Qui puoi passare a diversi progetti premendo due tasti. Ho circa 20+ progetti aperti in schede tutto il tempo e quando devo lavorare su un nuovo progetto lo sposto lì e gulp è già in esecuzione. Sono nelle directory corrette e posso iniziare a lavorare in meno di 2 secondi.
• Mantiene l'intero setup sempre attivo. Non devi farlo ogni volta che inizi a lavorare, è sempre lì. Se la tua macchina si spegne e la riavvii, puoi semplicemente "resuscitare" (con un semplice plug-in) alla tua configurazione standard e in circa 5 secondi si riavvia. È divertente che per farlo sia necessario il 100% di utilizzo su I7-9900K.
• Ogni pannello in una finestra è la propria istanza. Quindi puoi facilmente avere diverse versioni di Node in esecuzione per ogni pannello.

fonte

2 - Alfred (o alternativa)

Alfred è una "app di produttività" per Mac con equivalenti anche per Windows e Linux. Alcune delle cose che Alfred fa sono:

• Ti dà un rapido accesso ai programmi aperti semplicemente digitando alcune lettere
• Vai rapidamente alle directory
• Naviga fino a trovare ciò di cui hai bisogno direttamente nel popup
• Apri file con programmi diversi
• Cerca nel web o nei tuoi programmi che sono stati integrati e molti altri.

Con il suo powerpack ci sono molte altre integrazioni "Workflow" che possono automatizzare anche il lavoro.

Funziona anche come un calcolatore di accesso rapido, gestisce frammenti attraverso il sistema operativo (non è necessario nemmeno accedervi, li espande automaticamente), salva una cronologia degli appunti (salvavita), si integra con il terminale e così via. Puoi trovare tutto su di esso sul sito dell'app.

Come lo uso:

• Prima di tutto, ovviamente, per aprire le app. Non faccio clic con il puntatore sulle icone, digito solo lettere ed eccoci.
• Usalo come calcolatrice quando scrivi CSS (accade spesso con valori EM).
• Cronologia degli appunti: a volte impilo 5-6 cose negli appunti e poi le incollo nell'editor di codice dove necessario. Oppure torna indietro di qualche giorno per trovare alcune e-mail, alcuni frammenti, ecc. O anche una piccola funzione che fa qualcosa in un progetto e potrebbe aiutare in un altro. Ci vogliono 2-3 secondi invece di 10+ minuti per sfogliare il codice.
• Vai alle directory di lavoro quando esegui lavori di progettazione o direttamente ai file XD senza navigare nel Finder. Prende di nuovo 2-3 secondi contro un minuto o giù di lì nel mirino.
• Snippet - Ho preparato un bel frammento di "commento" per Asana con screenshot dei risultati, un posto dove aggiungere il link di commit, un messaggio ai prossimi sviluppatori, lo stato se è in staging o meno e così via. Questo è un messaggio dall'aspetto coerente in tutti i commenti che il team segue facilmente. Occorrono meno di 2 secondi per digitare e aprire lo snippet.

3 - Strumenti / plug-in del terminale

Oh My Zsh - Rendi utile il terminale - ZSH è un tesoro. Ci sono oltre 270 plugin tra cui scegliere. Utilizza un semplice file di configurazione, che ha richiesto solo pochi minuti per migrare dalla mia vecchia configurazione a quella nuova. tmux fa lo stesso, quindi l'intera configurazione dello sviluppo è stata di pochi minuti. Con una quantità così grande di plugin tra cui scegliere, troverai sicuramente qualcosa di utile per il tuo flusso di lavoro.

Uno dei plugin più usati in ZSH che utilizzo è "Z", che apprende i percorsi che usi per accedere alle cose. Quindi ti porterà ovunque tu voglia usando solo pochi personaggi chiave.

Esempio: $z te passerebbe a /folder/path/inner/more/content/testing - una scorciatoia a dove sei andato in precedenza. Rende il salto tra le directory senza dolore.

exa - Un'uscita LS più carina. Puoi trovare di più sul loro sito web. IN breve, fornisce anche un output veloce e piacevole di file e directory. Di nuovo - carino.

ripgrep - Una ricerca super veloce. Quando hai bisogno di cercare migliaia di file con migliaia di righe di codice, non dovresti aspettare troppo. Ripgrep è qui per salvarti. E, naturalmente, viene fornito con un sacco di altre funzioni utili e bandiere significative con cui lavorare. Segue anche i file .gitignore per mantenere i risultati significativi.

fonte

git-open - Un piccolo strumento di Paul Irish su Github che fa quello che dice - apre il repository git. Qual è il grosso problema che potresti dire? Ricordi l'URL esatto di quel progetto su cui stavi lavorando, per la prima volta, in 6 mesi? Quanto tempo ci vuole per raggiungerlo? Questo comando lo aprirà direttamente per te. E altro ancora: ti porterà anche al ramo corretto.

La tua CLI! Nel mio caso, il nostro lavoro ruota attorno a WordPress. Che fortunatamente come una CLI attraverso la quale puoi lavorare con l'installazione di WP. Una semplice nuova configurazione del sito richiede comandi di base come mkdir (crea una cartella), git clone (Clone a repo), wp core download, wp db create, wp db import (tutto da WP-CLI). Digitando tutto e una rapida configurazione e dopo 1 minuto avrai una nuova configurazione in esecuzione.

Assicurati di ricontrollare se ci sono altri CLI simili che potrebbero funzionare per te con gli strumenti che stai utilizzando!

fonte

4 - Plugin di codice VS

La mia scelta per l'editor di codice / IDE è VS Code. Prima era sublime, ma con una macchina più robusta ora posso usare correttamente il codice VS senza i 3 FPS che stavo ottenendo prima quando scorrevo un documento più grande.

Per l'elenco seguente non andrò con estensioni super famose come ESLint, GitLense o pacchetti di temi / icone in quanto sono ben trattati in quasi tutti gli articoli che potresti trovare.

• Tag di chiusura automatica: in modo da non dover scrivere i tag di chiusura ogni volta. Inutile quando fai HTML pulito con Emmet, ma aiuta quando devi fare una rapida modifica
• Ridenominazione automatica del tag: molto utile anche durante le modifiche. Cambierà direttamente i tag di chiusura / apertura quando ne modifichi solo uno.
• Controllo ortografico del codice - Ora non devi sentirti in imbarazzo nei PR quando hai scritto qualcosa con un errore di battitura. O semplicemente usalo per mantenere le cose belle e carine per i progetti open source.
• Azione duplicata - Super utile per creare nuovi file da quelli esistenti. È un comando da eseguire con Cmd + P. Funziona alla grande con la creazione di nuovi file sass / js nel lavoro front-end.
• Jumpy - Uno strumento fantastico! Basta premere una scorciatoia da te definita e produrrà due piccole caselle di lettere accanto a ciascuna parola. Digitali e il cursore salterà su di esso. Un modo veloce per navigare in un file senza usare il mouse.

E un suggerimento / promemoria professionale: puoi visualizzare in anteprima le immagini nel codice VS. Quando sviluppi un'interfaccia utente e segui un'immagine del tuo designer, puoi semplicemente trascinarla nel viewport e guardarla sul lato.

In breve:

È pieno di strumenti e strumenti sorprendenti là fuori. Ogni volta che noti un lavoro ripetitivo che stai facendo o ti chiedi "non dovrebbe esserci un modo più semplice per farlo", fai una ricerca! Molto probabilmente c'è davvero un modo più veloce. Se lo fai un paio di volte durante l'anno, ti ritroverai con un bel flusso di lavoro stretto che ti consentirà di produrre lavoro a un ritmo molto veloce.

Se possibile, trova anche alcune "misure sicure": imposta un po 'di linting, automatizza la configurazione della build, crea "modelli di avvio" con cui lavorare, magari scrivi un po' di CLI per te stesso.