Ferramentas e abordagens para acelerar o fluxo de trabalho do desenvolvedor da Web

O desenvolvimento da Web agrupa uma grande quantidade de pilhas, ferramentas, linguagens de programação e muito mais. Algumas das ferramentas / fluxos de trabalho aqui funcionariam em alguns casos, alguns em outros. Para melhor abordar isso, considere este post como escrito do ponto de vista de um desenvolvedor WordPress Front-End, embora as ferramentas sejam bastante amplas e possam ser usadas em muitos casos.

1 - tmux

Uma das maiores mudanças que tive no meu fluxo de trabalho foi quando configurei o tmux na minha máquina (macOS, mas também funciona com Linux, é claro). Embora eu possa não estar utilizando todo o seu potencial, ele faz um ótimo trabalho e me permite alternar entre os projetos instantaneamente, o que economiza muito tempo.

tmux tem uma longa página de “primeiros passos” escrita no repositório GitHub do projeto para verificar. Ele também funciona com um teclado direto da caixa com suporte para mouse que pode ser ativado. tmux usa arquivos de configuração que podem ser compartilhados entre sistemas para configuração instantânea.

Então, como isso mudou meu fluxo de trabalho?

• O tmux oferece uma maneira fácil de dividir telas e navegar dentro de um projeto com apenas dois pressionamentos de tecla. Assim, você pode ter um “gole” rodando em uma visão, comandos para rodar em outra, SSH para o servidor na terceira e algumas estatísticas na quarta.
• Ele fornece janelas para cada projeto que são como “guias”. Aqui você pode alternar para projetos diferentes pressionando duas teclas. Tenho cerca de 20 projetos abertos em guias o tempo todo e, quando tenho que trabalhar em um novo projeto, simplesmente mudo para lá e o gulp já está em execução. Estou nos diretórios corretos e posso começar a trabalhar em menos de 2 segundos.
• Mantém toda a configuração LIGADA o tempo todo. Você não precisa fazer isso toda vez que começar a trabalhar, ele está sempre lá. Se sua máquina desligar e você inicializá-la novamente, você pode apenas “ressuscitar” (com um plug-in simples) para sua configuração padrão e em cerca de 5 segundos ela estará novamente ativa. É engraçado que seja necessário 100% de uso no I7-9900K para fazer isso.
• Cada painel em uma janela é sua própria instância. Assim, você pode facilmente ter diferentes versões do Node em execução para cada painel.

Fonte

2 - Alfred (ou Alternativa)

Alfred é um “aplicativo de produtividade” para Mac com equivalentes para Windows e Linux também. Algumas das coisas que Alfred faz são:

• Dá a você acesso rápido para abrir programas apenas digitando algumas letras
• Vá para os diretórios rapidamente
• Navegue até encontrar o que precisa diretamente no pop-up
• Abra arquivos com diferentes programas
• Pesquise na web ou em seus programas integrados e muito mais.

Com seu pacote de força, existem muitas outras integrações de “fluxo de trabalho” que também podem automatizar o trabalho.

Ele também funciona como uma calculadora de acesso rápido, gerencia fragmentos do sistema operacional (nem mesmo precisa acessá-lo, ele apenas os expande automaticamente), salva um histórico da área de transferência (salva-vidas), integra-se ao terminal e assim por diante. Você pode encontrar tudo sobre isso no site do aplicativo.

Como eu uso:

• Primeiro, é claro, para abrir aplicativos. Não estou clicando com o ponteiro nos ícones, apenas digito as letras e pronto.
• Use-o como uma calculadora ao escrever CSS (acontece frequentemente com valores EM).
• Histórico da área de transferência - às vezes empilho de 5 a 6 coisas na área de transferência e colo no editor de código sempre que necessário. Ou volte alguns dias atrás para encontrar algum e-mail, algum trecho, etc ou mesmo uma pequena função que faz algo em um projeto e ajudaria em outro. Demora 2-3 segundos em vez de 10+ minutos navegando no código.
• Vá para os diretórios de trabalho ao fazer o trabalho de design ou diretamente para os arquivos XD sem navegar no localizador. Leva novamente 2-3 segundos contra um minuto ou mais no localizador.
• Snippets - preparei um bom snippet de “comentário” para o Asana com capturas de tela dos resultados, um lugar para adicionar o link de commit, mensagem para os próximos desenvolvedores, status se está em teste ou não e assim por diante. Esta é uma mensagem consistente em todos os comentários que a equipe segue facilmente. Leva menos de 2 segundos para digitar e desdobrar o trecho.

3 - Ferramentas / plug-ins de terminal

Oh My Zsh - Torne o terminal útil - ZSH é um tesouro. Existem mais de 270 plug-ins para escolher. Ele usa um arquivo de configuração simples, que levou apenas alguns minutos para migrar da minha configuração antiga para a nova. tmux faz o mesmo, então toda a configuração do dev demorou minutos. Com tantos plug-ins para escolher, você definitivamente encontrará algo útil para o seu fluxo de trabalho.

Um dos plug-ins mais usados ​​no ZSH que utilizo é o “Z”, que aprende os caminhos que você usa para acessar as coisas. Em seguida, ele o levará para onde quiser usando apenas alguns caracteres-chave.

Exemplo: $z te pularia para /folder/path/inner/more/content/testing - um atalho para onde você foi anteriormente. Torna o salto entre diretórios fácil.

exa - Uma saída LS mais bonita. Você pode encontrar mais em seu site. Em suma, ele fornece uma saída rápida e agradável de arquivos e diretórios também. De novo - lindo.

ripgrep - Uma pesquisa super rápida. Quando você precisa pesquisar milhares de arquivos com milhares de linhas de código, não deve esperar muito. Ripgrep está aqui para salvá-lo. E, claro, ele vem com uma tonelada de outros recursos úteis e sinalizadores significativos para trabalhar. Ele também segue os arquivos .gitignore para manter os resultados significativos.

Fonte

git-open - Uma pequena ferramenta de Paul Irish no Github que faz o que diz - abre o repositório git. Qual é o grande problema que você pode dizer? Você se lembra do URL exato daquele projeto em que estava trabalhando, pela primeira vez, em 6 meses? Quanto tempo leva para navegar até ele? Este comando o abrirá diretamente para você. E mais - também irá navegar para o branch correto.

Seu CLI! No meu caso, nosso trabalho gira em torno do WordPress. Felizmente como uma CLI através da qual você pode trabalhar com a instalação do WP. Uma configuração simples de um novo site leva comandos básicos como mkdir (criar uma pasta), git clone (Clonar um repo), download do núcleo wp, criar wp db, importar db wp (todos do WP-CLI). Digitando tudo e uma configuração rápida e após 1 minuto você tem uma nova configuração em execução.

Certifique-se de verificar novamente se existem outros CLIs semelhantes que funcionem para você com as ferramentas que você está usando!

Fonte

4 - Plugins do VS Code

Minha escolha para editor de código / IDE é VS Code. Era sublime antes, mas com uma máquina mais robusta agora posso usar corretamente o código VS sem os 3 FPS que recebia antes ao rolar para baixo um documento maior.

Para a lista abaixo, não irei com extensões super famosas como ESLint, GitLense ou pacotes de tema / ícone, pois eles são bem abordados em quase todos os artigos que você encontraria.

• Tag de fechamento automático - para que você não precise escrever as tags de fechamento todas as vezes. Inútil ao fazer HTML limpo com Emmet, mas ajuda quando você tem que fazer uma edição rápida
• Auto renomear tag - Também é muito útil quando você faz edição. Ele irá alterar diretamente as tags de fechamento / abertura quando você editar apenas uma delas.
• Corretor ortográfico de código - Agora você não precisa se sentir envergonhado em PRs quando escreve algo com um erro de digitação. Ou apenas use-o para manter as coisas boas e bonitas para projetos de código aberto.
• Ação duplicada - muito útil para criar novos arquivos a partir dos existentes. É um comando para ser executado com Cmd + P. Funciona muito bem com a criação de novos arquivos sass / js no trabalho de front-end.
• Jumpy - Uma ferramenta incrível! Basta clicar em um atalho que você definir e ele produzirá duas pequenas caixas de letras ao lado de cada palavra. Digite-os e o cursor saltará para eles. Uma maneira rápida de navegar em um arquivo sem usar o mouse.

E uma dica / lembrete profissional - você pode visualizar imagens no código do VS. Ao desenvolver uma IU e seguir uma imagem de seu designer, você pode simplesmente arrastá-la para a janela de visualização e olhá-la lateralmente.

Em resumo:

Está cheio de ferramentas e instrumentos incríveis por aí. Sempre que você notar algum trabalho repetitivo que está fazendo ou se perguntar “não deveria haver uma maneira mais fácil de fazer isso”, basta fazer uma pesquisa! Muito provavelmente, existe de fato uma maneira mais rápida. Se você fizer isso algumas vezes ao longo do ano, acabará com um fluxo de trabalho bem apertado que permite produzir trabalhos em um ritmo muito rápido.

Se possível, encontre também algumas “medidas seguras” - configure algum linting, automatize sua configuração de compilação, construa “modelos iniciais” para trabalhar, talvez até mesmo escreva um pouco de CLI para você.