30 Ferramentas Para Um Desenvolvedor Front-End
À medida que as funcionalidades das aplicações Web ficam cada vez mais sofisticadas e complexas, o desenvolvedor front-end precisa de ferramentas flexíveis para acompanhar o mercado que está em constante evolução. A boa notícia é que o ecossistema de desenvolvimento front-en e web no geral nos oferece muitas opções, com empresas bem estabelecidas e a comunidade de código aberto competindo para criar bibliotecas, frameworks e aplicações mais poderosas para ajudar os desenvolvedores a fazerem seu trabalho e aumentar sua produtividade e a eficiência.
Neste artigo, reuni as 30 principais ferramentas para desenvolvedores front-end e web, que variam de editores de código e playgrounds de código a geradores de CSS, bibliotecas JS e muito mais.
Vamos a cada uma agora!
Editores de Códigos
desenvolvedor front-end
O desenvolvedor front-end passa horas e horas escrevendo ou editando código. Portanto, é natural que seu amigo mais próximo no trabalho seja o editor de código. De fato, conhecer o editor de código de sua escolha e todos os seus recursos e atalhos oferece a qualquer desenvolvedor uma grande vantagem em termos de produtividade.
01 - VScode
O Visual Studio Code (VS Code) da Microsoft é um ambiente de desenvolvimento integrado (IDE) multiplataforma gratuito e de código aberto - ou seja, um software complexo que permite aos desenvolvedores criar, testar e implantar um projeto inteiro.
Aqui estão alguns dos recursos mais populares do VS Code:
- IntelliSense, oferecendo destaque de sintaxe e conclusões inteligentes com base em tipos de variáveis, definições de função e módulos importados;
- Recursos de depuração;
- Comandos Git Embutidos;
- Flexibilidade e extensibilidade: você pode adicionar facilmente extensões relacionadas a novos recursos como temas etc;
- recursos fáceis de implantação.
Eu sou um usuário do VsCode recomendo demais, tem versões para Windows, MacOS e Linux.
02 - Atom
O Atom é um editor de código multi-plataforma gratuito, de código aberto e poderoso que permite:
- Colabore com outros desenvolvedores usando o Teletype for Atom;
- Trabalha com Git e GitHub especifico para Atom;
- Editar código em diferentes plataformas;
- Acelere a codificação com preenchimento automático inteligente;
- Procure, instale e até crie seus próprios pacotes;
- Procurar arquivos de projeto;
- Dividir a interface em vários painéis;
- Encontre e substitua em um arquivo ou em vários projetos;
- Adicione novos temas e personalize a aparência e o comportamento do editor ajustando seu código
03 - Sublime Text
O Sublime Text se apresenta como "um sofisticado editor de texto para código, marcação e prosa". É um aplicativo de edição de código multiplataforma pago e com muitos recursos. Veja os principais:
- Ir para qualquer funcionalidade: atalhos que permitem que os desenvolvedores pesquisem bits de código em arquivos e abra arquivos em projetos;
- várias seleções;
- API poderosa e ecossistema de pacotes para estender a funcionalidade incorporada;
- Edição dividida;
- Personalização fácil;
- Troca rápida de projeto;
- Alta performance
Gerenciadores de Pacotes
desenvolvedor front-end
Os gerenciadores de pacotes são coleções de ferramentas para automatizar consistentemente processos como instalar, atualizar, configurar e remover programas.
04 - NPM
O que é npm? Bem, como diz o site da empresa, são vários recursos. Vamos a algumas:
- O npm é um gerenciador de pacotes do Node.js que ajuda os desenvolvedores JS a compartilhar módulos de código empacotados;
- O registro npm é uma coleção pública de pacotes de código-fonte aberto para Node.js, aplicativos Web front-end e muito mais;
- O npm também é o que os desenvolvedores de clientes da linha de comando usam para instalar e publicar esses pacotes;
- npm, Inc. é a empresa responsável por hospedar e manter todos os itens acima,
05 - Yarn
O Yarn é um gerenciador de pacotes para instalar e compartilhar código e também um gerente de projetos. É extensível via plugins, estável, muito bem documentado, gratuito e de código aberto, eu particularmente uso ele ao invés do npm
Empacotadores (Bundlers)
desenvolvedor front-end
Os empacotadores de módulo são usados para empacotar vários módulos em um ou mais pacotes otimizados para o navegador.
06 - Webpack
Na sua essência, o webpack é um empacotador de módulo estático para aplicações JavaScript. Quando o webpack processa sua aplicação, ele cria internamente um gráfico de dependência que mapeia todos os módulos de que seu projeto precisa e gera um ou mais pacotes configuráveis . … Desde a versão 4.0.0, o webpack não requer um arquivo de configuração para agrupar seu projeto. No entanto, é incrivelmente configurável para melhor atender às suas necessidades.
07 - Parcel
O Parcel é um "empacotador de aplicações Web de configuração zero, ele é muito rápido". Veja alguns características:
- Muito rápido;
- Agrupa todos os ativos do projeto;
- Possui divisão de código e é configuração zero.
Geradores CSS
desenvolvedor front-end
Você já tentou memorizar como declarar propriedades CSS para gradientes, sombras de texto, Flexbox ou Grid, para mencionar apenas algumas? Muito difícil. A menos que você use alguns recursos de CSS e suas propriedades repetidamente, é difícil lembrar de todos. Mas mesmo aqueles que dominam CSS às vezes precisam de uma atualização em algumas propriedades, especialmente se não as usam há algum tempo.
Se você precisar de ajuda rápida com o CSS mais recente, aqui estão os geradores de CSS para lhe ajudar. Digite os valores, visualize o resultado, pegue o código gerado e execute.
08 - CSS3 GEnerator
O CSS3 Generator é uma aplicação on-line gratuita que permite escrever rapidamente códigos para vários recursos modernos de CSS, como Flexbox, gradientes, transições e transformações e muito mais.
Digite os valores CSS necessários, visualize o resultado em tempo real, copie e cole o código gerado. Além disso, esta aplicação mostra uma lista de navegadores e suas versões nas quais seu código CSS é suportado.
09 - The Ultimate CSS Generator
O Ultimate CSS Generator é uma aplicação on-line gratuita que permite gerar código para animação CSS, planos de fundo, gradientes, bordas, filtros e muito mais.
Desenvolva agora mesmo um jogo com JavaScript
Neste treinamento 100% gratuito vou te ensina passo a passo linha a linha como criar um Jogo real usando apenas JavaScript, HTML5 e CSS3, clica agora no botão e se inscreva e receba o curso completo no seu e-mail.
A interface é fácil de usar, as informações sobre o suporte ao navegador para o recurso CSS em que você está interessado são claras e fáceis de localizar, e o código gerado é limpo e preciso.
10 - The CSS Grid Layout Genetaror bt Dmitril Bykov
CSS Grid é incrível, e criar um layout com esse recurso lhe fornece controle total sobre o resultado final. No entanto, é útil ter uma representação visual do layout enquanto você estiver codificando. Embora alguns dos principais navegadores tenham implementado ótimas ferramentas para permitir que você visualize, alguns desenvolvedores podem fazer isso com alguma ajuda adicional. Aqui é onde um gerador de CSS Grid pode ser útil.
O CSS Grid Layout Generator da Dmitrii Bykov é gratuito, acessível online e extremamente flexível. Levei-o para dar uma volta e descobri que ele me dá muito controle, tanto no nível do contêiner da layout, fornecendo bons recursos de visualização e código limpo.
Bibliotecas e Frameworks
desenvolvedor front-end
As demandas por aplicações web atuais dão grande importância à velocidade no carregamento e na atualização do conteúdo da página. Por mais poderoso que seja o JavaScript moderno, quando compactado em uma biblioteca ou framework, ele se torna uma ferramenta ainda mais fantástica para escrever código elegante e sustentável e reduzir esforços de digitação repetitivos e demorados.
11 - React
React é uma biblioteca JavaScript gratuita para criar interfaces de usuário criadas por desenvolvedores do Facebook. É super popular e tem uma empresa bem estabelecida e uma comunidade forte por trás disso. Suas características incluem:
- Declarativo, o que facilita a criação de interfaces com o usuário para codificar, atualizar e depurar;
- Sendo baseado em componentes
- Sendo independente da pilha de tecnologia usada para construir o projeto
Se você tem o desejo de aprender mais React, clique aqui e veja esse curso gratuito.
12 - Vue
O Vue é um "framework JavaScript progressivo" criado por Evan You e mantido por uma equipe internacional de desenvolvedores. É gratuito para uso e liberado sob a licença MIT. Veja algumas qualidades do Vue:
- Acessível: se você conhece - HTML, CSS e JavaScript - pode aprender o Vue rapidamente e começar a integrar ele a qualquer projeto Web rapidamente.
- Versátil: você pode integrar facilmente o Vue em um projeto Web com o mínimo ou o necessário. Você pode começar aplicando o Vue à interface do usuário e aumentar progressivamente até os recursos completos da estrutura.
- Pequeno e de alto desempenho.
13 - Angular
Criado pelo Google, o Angular é o mais maduro de todos os frameworks listados aqui. É gratuito e de código aberto, conta com o apoio de uma empresa gigante e o apoio de uma comunidade forte.
As vantagens do uso do Angular incluem:
- É multiplataforma: web, web mobile, mobile nativo e desktop nativo;
- Velocidade e desempenho;
- Ferramentas poderosas;
- A produtividade e a infraestrutura escalável que suporta os maiores aplicativos do Google.
Geradores estáticos de Sites
desenvolvedor front-end
Os geradores de sites estáticos nos permitem trabalhar como se estivéssemos criando páginas dinâmicas, ou seja, podemos criar pedaços de HTML que ficarão em arquivos separados.
14 - Next.js
A seguir, é uma estrutura gratuita e de código aberto para aplicativos React exportados estaticamente. Características incluem:
- pré-renderização (Next suporta renderização no servidor);
- configuração zero;
- extensibilidade;
- CSS-in-JS;
- documentação impressionante.
15 - Gatsby
O Gatsby é um framework gratuito e de código aberto baseado no React que ajuda os
desenvolvedores a criar aplicaçõess e sites rápidos .
Gatsby fornece vários recursos, como:
- O poder do React, webpack, JavaScript e CSS modernos;
- Um rico ecossistema de plug-ins de dados;
- Geração progressiva de aplicativos da web;
- Implantação super fácil;
- Iniciantes ou sites pré-empacotados do Gatsby, personalizados para diferentes casos de uso.
Otimizadores SVG
desenvolvedor front-end
O desempenho é crucial na Web: os visitantes ficam impacientes enquanto esperam o carregamento do conteúdo e os mecanismos de pesquisa tendem a penalizar sites lentos.
A otimização de gráficos é uma etapa necessária para a criação de sites e aplicação extremamente rápidos, e os gráficos SVG não são exceção. Para garantir que o código SVG esteja limpo e organizado, o uso de um otimizador SVG se tornou uma etapa essencial no fluxo de trabalho de um desenvolvedor front-end.
Abaixo estão dois otimizadores SVG que fazem um trabalho fantástico e são amplamente utilizados por desenvolvedores profissionais.
16 - SVGOMG by Jake Archibald
O SVGOMG é uma aplicação on-line gratuita que permite aplicar várias opções de otimização ao seu código SVG e visualizar o resultado final. É fácil de usar e também funciona offline.
17 - SVG Optimizer By Peter Collingridge
Essa é outra fantástica ferramenta de otimização SVG on-line gratuita que você pode usar para aparar seu código SVG. É intuitivo e fácil de usar.
Bibliotecas de Animações
desenvolvedor front-end
Desenvolva agora mesmo um jogo com JavaScript
Neste treinamento 100% gratuito vou te ensina passo a passo linha a linha como criar um Jogo real usando apenas JavaScript, HTML5 e CSS3, clica agora no botão e se inscreva e receba o curso completo no seu e-mail.
A animação está presente em qualquer lugar da Web, seja na forma de micro efeitos sutis ou no movimento de contar histórias de grandes partes do conteúdo que se desdobra gradualmente na tela.
Embora o CSS e o JavaScript modernos incluam os recursos necessários para criar algumas animações interessantes da Web, as bibliotecas listadas abaixo certamente permitem que você faça o trabalho muito mais rapidamente com alguns resultados surpreendentes.
18 - AnimateCSS
O Animate.css é uma biblioteca de animações prontas para o uso seus projetos web. Ótimo para ênfase, home pages, controles deslizantes e dicas de orientação de atenção.
Bibliotecas de Animações
desenvolvedor front-end
Como o próprio nome sugere, a biblioteca está em CSS puro. Entre os efeitos prontos, você encontrará: pessoas que procuram atenção, como efeitos saltitantes e piscantes, entradas e saídas traseiras, entrando e saindo, e muito mais.
Características incluem:
- instalação rápida com npm, fios ou CDN;
- Fácil de usar;
- Opção de usar propriedades personalizadas de CSS (variáveis CSS) para personalizar a duração, o atraso e as interações da animação classes de utilidade para atrasos, variações de velocidade e repetições
19 - GreenSock (GSAP)
O GSAP (GreenSock Animation Platform) oferece "animação de alto desempenho e nível profissional para a web moderna".
Sua sintaxe altamente intuitiva, baseada em JavaScript, permite criar animações incríveis rapidamente. Não há limite para o que você pode animar com o GSAP, de elementos DOM e objetos JavaScript a experiências imersivas em SVGs, canvas e WebGL. Além disso, o GSAP é compatível com vários navegadores e versões anteriores e oferece documentação fantástica e uma comunidade de suporte.
20 - Anime.js
Anime.js ( /ˈæn.ə.meɪ/) é uma biblioteca de animação JavaScript leve, com uma API simples e poderosa. Funciona com propriedades CSS, atributos SVG, DOM e objetos JavaScript.
O anime foi criado por Julian Garnier e é totalmente gratuito e de código aberto. Graças à sua sintaxe intuitiva e uma boa documentos, você pode começar a usar o Anime.js rapidamente.
Ferramentas do Navegador
desenvolvedor front-end
Sem dúvida o seu melhor amigo do desenvolvedor front-end é ferramentas para desenvolvimento do navegador, as ferramentas de desenvolvedor internas oferecidas pelos principais navegadores são parte integrante das tarefas diárias de desenvolvedor front-end / web. Eles permitem que os desenvolvedores entendam o código escrito por outras pessoas, testem as alterações no código em tempo real e depurem partes do código front-end, além de fazer verificações de desempenho e muito mais.
Essas ferramentas estão ficando cada vez mais sofisticadas e úteis, tanto que não consigo pensar em ser capaz de passar sem elas.
Abaixo estão as ferramentas de desenvolvedor disponibilizadas por dois principais navegadores, Mozilla Firefox e Google Chrome.
21 - Firefox Developer Tools
As Ferramentas do desenvolvedor do Firefox são incríveis Firefox que permitem aos desenvolvedores examinar, editar e depurar códigos HTML, CSS e JavaScript.
Para um guia detalhado sobre o que são e como usá-los, tem uma boa documentação MDN.
22 - Chrome DevTools
Para aqueles que usam principalmente o Chrome como seu navegador preferido, que é o meu caso o Chrome DevTools é uma parte essencial de seu fluxo de trabalho.
O Chrome DevTools é um conjunto de ferramentas de desenvolvedor front-end / Web criadas diretamente no navegador Google Chrome . O DevTools pode ajudá-lo a editar páginas rapidamente e diagnosticar problemas rapidamente, o que ajuda a criar sites melhores, mais rapidamente.
Teste entre Navegadores
desenvolvedor front-end
Os desenvolvedores não têm controle sobre de que tipo de dispositivo seus sites ou aplicações serão acessados. Em 2019, mais da metade do tráfego da Web veio de dispositivos móveis . No geral, os tamanhos de tela variam de desktop e tablet a smartphone e tecnologia vestível.
Você como desenvolvedor front-end, tem que garantir que a página da Web permaneça utilizável em qualquer tamanho de tela constitui um componente essencial do nosso trabalho. Embora nada se compare a testar sites e aplicativos diretamente em diferentes navegadores e plataformas, cobrir todas as bases dessa maneira não é uma opção disponível para a maioria de nós. Os serviços e aplicativos listados abaixo podem ajudar.
23 - Caniuse
Não sei você, mas quando preciso obter informações atuais sobre o suporte ao navegador para qualquer recurso HTML, CSS, SVG e JavaScript - por mais novo ou obscuro que seja -, caniuse é o meu primeiro site acessado.
Você obterá resultados estatísticos atualizados, tanto no nível global quanto no específico do país, além de informações sobre questões, recursos, etc. específicos.
24 - Am I Resposive
Este é uma aplicação on-line gratuita que permite verificar rapidamente a aparência do seu site em diferentes tamanhos de tela.
Aqui está uma lista dos recursos:
- Você pode usar a aplicação em seu site digitando o URL do site que pretende testar em uma caixa de texto ou em qualquer lugar usando o bookmarklet Am I Responsive no seu navegador;
- http://localhost/ projeto;
- Você pode clicar e rolar dentro de cada dispositivo em que seu site é exibido para teste.
25 - Responsive Web Design Checker
O Responsive Web Design Checker é outra aplicação on-line gratuita para testar a aparência do seu site, não apenas em diferentes tamanhos de tela, mas também em uma ampla variedade de dispositivos. Isso inclui vários tipos de desktops e notebooks, tablets como Apple iPad Retina e Amazon Kindle Fire e smartphones como Apple iPhone 6/7 Plus, Samsung Galaxy e muito mais.
26 - BrowserStack
O BrowserStack é um serviço popular e pago que permite testar seu site ou aplicativo em mais de 2000 dispositivos e navegadores reais. Funciona imediatamente e é totalmente seguro.
Colaboração de Código e Playgrounds
desenvolvedor front-end
Se você imaginar os codificadores como indivíduos que passam o dia digitando em esplêndido isolamento por horas, esqueça. Pelo menos, isso faz parte da história. O cenário mais comum envolve equipes de desenvolvedores e não desenvolvedores trabalhando no mesmo projeto. Portanto, poder colaborar em projetos e compartilhar código é de suma importância para o sucesso da maioria dos projetos da web.
Abaixo estão algumas ótimas ferramentas que permitem compartilhar rapidamente código, protótipo e idéias de projetos de teste.
27 - GitHub
O principal local para colaboração em equipe e compartilhamento de código não pode ser senão o super popular e estabelecido GitHub.
Veja como o GitHub se apresenta:
O GitHub é uma plataforma de desenvolvimento inspirada na maneira como você trabalha. Do código aberto aos negócios , você pode hospedar e revisar códigos, gerenciar projetos e criar software junto a 50 milhões de desenvolvedores.
GitHub
28 - CodePen
O CodePen existe há vários anos e é amado amplamente e usado pela comunidade de desenvolvedores front-end. Criado por Chris Coyier e Alex Vazquez, é incrível para experimentar conceitos, protótipos, aprender a codificar e compartilhar códigos. É definido por sua equipe da seguinte maneira:
Desenvolva agora mesmo um jogo com JavaScript
Neste treinamento 100% gratuito vou te ensina passo a passo linha a linha como criar um Jogo real usando apenas JavaScript, HTML5 e CSS3, clica agora no botão e se inscreva e receba o curso completo no seu e-mail.
O CodePen é um ambiente de desenvolvimento social . Na essência, ele permite escrever código no navegador e ver os resultados à medida que você cria. Um editor de código on-line útil e libertador para desenvolvedores de qualquer habilidade e particularmente capacitante para as pessoas que aprendem a codificar. Nosso foco é principalmente nas linguagens front-end, como HTML, CSS, JavaScript e sintaxe de pré-processamento que se transformam nessas coisas.
29 - JSFFiddle
Fundado por Oskar Krawczyk e Piotr Zalewa, o JSFiddle é uma IDE online onde tem uma comunidade online para testar e mostrar trechos de código HTML, CSS e JavaScript criados e colaborativos por vários usuários, conhecidos como "violinos". Permite chamadas AJAX simuladas . Em 2019, o JSFiddle foi classificado como o segundo IDE online mais popular pelo índice de Popularidade da Linguagem de Programação (PYPL) com base no número de vezes que foi pesquisado, diretamente atrás do Cloud9 IDE , em todo o mundo e nos EUA.
30 - SoloLearn
SoloLearn é um ótimo playground online que permite testar códigos HTML, CSS e JavaScript. Ele também oferece cursos básicos de codificação gratuitamente e um fórum onde desenvolvedores e alunos discutem vários tópicos relacionados ao código.
Conclusão
desenvolvedor front-end
Existem milhares de ferramentas de desenvolvimento web disponíveis para o desenvolvedor front-end / web. O importante é que você entenda completamente o que cada ferramenta faz para poder fazer a melhor escolha específica às necessidades do seu projeto. O desenvolvimento web e front-end continua crescendo e evoluindo, por isso é crucial manter-se atualizado sobre as novas ferramentas brilhantes disponíveis, pois algumas economizarão horas de desenvolvimento e, mais importante, contribuem para uma melhor experiência do usuário.
Mais conteúdo
- Promise JavaScript guia completo
- 6 Recursos do ECMAScript Extraordinários
- Guia completa pra Envios de e-mail
Conheça nosso canal do Youtube
<iframe width="560" height="315" src="https://www.youtube.com/embed/GUx-EElkUWw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Treinamento JavaScript
