Ferramentas Essenciais no Front-end - Undefined #2
Escrito por Hugo de Oliveira em 16/02/2024.
Quais são as ferramentas que mais usamos como pessoas desenvolvedoras front-end? Foi pra responder essa pergunta que organizei uma sala no 👋 Clubhouse, com Isadora Stangarlin (do @papodedev) e Eder Christian. Toda a conversa que tivemos ao vivo foi muito interessante e me fez gastar uma página inteira do caderno só com os nomes das ferramentas citadas.
No Clubhouse as pessoas que estão ouvindo ao vivo podem pedir para participar e falar. Por causa disso, várias pessoas compartilharam suas ferramentas favoritas durante nossa uma hora de conversa.
Como toda pessoa desenvolvedora, usamos um editor de texto ou IDE para escrever boa parte do nosso código. O VS Code foi uma presença unânime como o editor favorito de todo mundo que estava na sala. Acho que não sobra muita dúvida sobre o porquê. Quase todo mundo da sala programava em JavaScript e o VS Code tem muitas ferramentas úteis para essa linguagem. Se me perguntassem no começo de 2020 qual era meu editor de texto favorito, com certeza falaria o Vim. Depois de 5 anos como meu editor padrão, troquei o Vim pelo VS Code quando comecei a programar em TypeScript — simplesmente não dá para ignorar que o VS Code é o melhor editor gratuito para trabalhar em projetos escritos com TypeScript.
Além de falar de editores de texto, também compartilhamos os navegadores que usamos, extensões na web, extensões do VS Code, aplicativos e sites favoritos. Aqui vai uma lista de todas as ferramentas que citamos na conversa:
- Chrome: navegador
- Vimium: extensão do Chrome que te deixa navegar pelo site sem utilizar o mouse, com atalhos inspirados pelo Vim
- VS Code: editor
- vim-mode: extensão para emular o Vim dentro do VS Code
- Figma: aplicativo gratuito de criação de designs com ferramentas de colaboração em tempo real
- Codepen: site para prototipação rápida com HTML, JS e CSS
- Codesandbox: editor completo online com ferramentas de execução de código sem instalar nada no seu computador
- Browsersync: ferramenta de linha de comando que sincroniza a navegação em um site entre vários dispositivos
- Dev.to: site artigos sobre programação
- Chrome: navegador
- VS Code: editor
- ColorPick: extensão do Chrome para copiar a cor de qualquer elemento de um site
- Clear Cache: extensão do Chrome para limpar todo o cache de um site
- Cssmatic: ferramentas para CSS
- daily.dev: extensão do Chrome que te mostra novidades da área de TI na tela de nova aba
- Medium: site com muitos artigos sobre desenvolvimento
- Panda: agregador de conteúdo
- Udemy: plataforma de cursos
- VS Code: editor
- Smashing Magazine: site com ótimos artigos sobre programação, principalmente front-end
- Vercel.app: serviço para deploy de projetos front-end, ótimo para usar com Next.js
- Frontend Masters: plataforma de cursos
- Emmet: extensão para escrever HTML rápido
- Firefox: navegador
- Multi Account Container: extensão do Firefox para isolar cookies e cache de sites
- Envify: extensão do Firefox para colorir o navegador baseado na URL (útil para diferenciar ambientes de desenvolvimento e producão)
- VS Code: editor
- Live Share: extensão do VS Code para fazer paired programming dentro do VS Code
- All about Next.js: curso sobre o framework Next.js
- colorhunt.co: site para descobrir paletas de cores
- getwaves.io: site para criar “ondas” em SVG, para usar como divisor de seções
- mobbin.design: coleções de inspirações para designs
- Undesign: ferramentas para design
- Photopea: site “Photoshop online”
- uppbeat.io: site com músicas sem DRM para utilizar em vídeos ou podcasts
- animaapp.com: plugin para transformar designs em código e protótipos responsivos
- animista.net: site para criar animações CSS com uma ferramenta visual
Eu não conhecia muitas das ferramentas que o pessoal recomendou nessa conversa no Clubhouse. Dá uma olhada em cada uma e não se esqueça de ver também o perfil no Instagram/Twitter de quem contribuiu. Faltou alguma que você usa muito? Manda pra mim.