62 Ótimas Ferramentas de Desenvolvimento Web

Há algo romântico e emocionante em abrir TextEdit ou Notepad e digitar “<HTML>” para dar início a um novo projeto. É quantos de nós começaram nossa obsessão com a codificação para a web. As ferramentas de desenvolvimento web fazem mais do que apenas gravar nosso texto – elas nos ajudam a criar projetos e sobrecarregam todo o processo. Além disso, há muito mais elementos do que apenas HTML e CSS para considerar.

A fase de planejamento, por exemplo, é vital. É preciso considerar wireframing, escolhas de projeto e fluxos de trabalho colaborativos. Depois, há a escolha da estrutura ideal de JavaScript, se deve usar um Ambiente de Desenvolvimento Integrado (IDE), e muito mais.

Neste artigo, vamos dar uma olhada em 62 ferramentas de desenvolvimento web que você vai querer considerar usar. Mas antes de entrarmos nisso, vamos falar sobre o que pensamos ser uma ferramenta de desenvolvimento web.

O que consideramos uma ferramenta de desenvolvimento web

À primeira vista, a categorização de uma ferramenta de desenvolvimento web parece simples. Entretanto, mesmo mergulhando na parte mais superficial, algumas considerações deixam a questão um pouco confusa.

Por exemplo, considere se um serviço de streaming de vídeo conta como uma ferramenta de desenvolvimento. Em uma bolha, provavelmente não. Entretanto, se você estiver usando-o para gravar sua tela para um aplicativo de projeto específico, ele se transforma repentinamente em uma ferramenta de colaboração única.

Em nossa opinião, uma ferramenta de desenvolvimento web é algo que ajuda você a alcançar os objetivos do seu projeto de forma focada. Embora isto não inclua linguagens de programação individuais, existem subconjuntos, superconjuntos e frameworks como o TypeScript que se sobrepõem à linha. Se você quiser ganhar muito dinheiro, é vital estar atento a estes aspectos.

Para outro exemplo, considere o Git. Pode-se dizer que este sistema de controle de versão (VCS) cobre muitas coisas. Uma linguagem específica é usada para executar comandos, e a funcionalidade básica oferece muitas possibilidades em termos de desenvolvimento web. Entretanto, você também pode usá-lo como uma ferramenta de aprendizagem, incluindo a navegação em logs de rastreamento de problemas e compromissos.

Em geral, uma ferramenta de desenvolvimento web pode ser praticamente qualquer coisa que faça seu projeto funcionar de forma eficiente e produtiva. Você notará esta diversidade na lista de ferramentas.

Como as ferramentas de desenvolvimento web podem agilizar seu fluxo de trabalho

Antes das próximas palavras: “crunch time“.

Sim, esta temida frase grita por ferramentas de desenvolvimento web que economizam tempo para salvar o dia. As estatísticas mostram que mais projetos utilizam o crunch como um padrão, e muitas indústrias de desenvolvimento ainda o utilizam hoje.

Independentemente de sua empresa usar ou precisar de crunch e horas extras, as ferramentas de desenvolvimento web ainda podem ajudar. Estas ferramentas fazem o trabalho pesado e automatizam o trabalho mundano que come em seu dia. Como tal, elas oferecem um impulso orgânico à sua produtividade.

Entretanto, eles também podem oferecer um bônus se você operar sob uma estrutura de projeto ágil, como Scrum. Por exemplo, considere como uma ferramenta como o JSFiddle pode ajudar você a compartilhar trechos com outras equipes durante a cauda de um sprint, pronto para o próximo.

Além disso, enquanto os stand-ups diários não vão a lugar algum, um servidor Discord ou c anal Slack poderia oferecer uma melhor maneira de focar e alinhar um conjunto de tarefas futuras, longe da pressão dos objetivos do seu sprint atual.

De modo geral, as ferramentas de desenvolvimento web são tanto sobre planejamento quanto sobre execução.

Como escolher a pilha de desenvolvimento correta para seu projeto

Uma grande ferramenta de desenvolvimento da web vale seu peso em ouro em um M1-powered MacBook ouro rosa. Como tal, obter a mistura certa de ferramentas para seu projeto específico é crucial para a construção de uma base sólida para o trabalho.

Se é algo que você não considerou antes, uma etapa inicial de planejamento se revelará inestimável. Levar algum tempo para se ajustar às ferramentas que você usará atrasa a fase de codificação do projeto. No entanto, desta vez, você receberá de volta mais tarde, pois haverá menos problemas potenciais relacionados ao software. Você também verá um nível de saída mais consistente (uma vez que todos estarão na mesma página).

Considerações para a escolha de sua pilha de desenvolvimento

A escolha da pilha certa para o projeto se resume ao seguinte:

Complexidade: Considere a complexidade de sua entrega, pois isso determinará a complexidade da pilha.
Escalabilidade: Se seu projeto é para uma empresa local, isto precisará de soluções diferentes para uma empresa global. Como tal, você precisará de uma pilha mais escalável para atingir seus objetivos.
Segurança: É quase desnecessário dizer que o que você escolher não deve comprometer a segurança do usuário e do site.
Custo: É claro que ninguém gosta de gastar demais, e se houver orçamentos apertados envolvidos, isto terá mais um fator do que um livro de cheques em branco.

Há duas áreas em que você pode dividir as tecnologias:

Lado do servidor: Aqui, você vai querer olhar para as tecnologias back-end que você usa. Por exemplo, você vai querer olhar para sua escolha de hospedagem e servidor web, valor chave e armazenamento SQL, qualquer aplicativo e estruturas de automação que você vai usar, e, é claro, a linguagem de programação.
Lado do cliente: Sua escolha de ferramentas front-end provavelmente será mais simples, especialmente em termos das linguagens utilizadas. Se HTML, CSS, e Jav aScript estiverem presentes, a escolha da estrutura JavaScript (e da estrutura de automação) terá que ser considerada.

Quando se trata de algumas pilhas de desenvolvimento do mundo real, você notará que muitos sites grandes usam alguma combinação de JavaScript e React.js, ao lado do Nginx. Você também verá Memcached, Redis, e Ruby on Rails nas pilhas de desenvolvimento.

62 ótimas ferramentas de desenvolvimento web para utilizar

Sem mais delongas, vejamos a lista de ferramentas de desenvolvimento web que recomendamos utilizar. Nós as organizamos em categorias, mas caso contrário, as ferramentas não estão em ordem específica. Se você estiver com pressa, sinta-se à vontade para pular para uma seção específica listada abaixo.

Ambientes de desenvolvimento local

Um ambiente de desenvolvimento local é uma parte essencial de qualquer pilha de desenvolvimento. Entretanto, ele é particularmente vital para o desenvolvimento da web. Aqui estão algumas das mais proeminentes ferramentas de desenvolvimento local.

1. DevKinsta

A tela de respingo DevKinsta. — DevKinsta.

Podemos ser tendenciosos, mas a DevKinsta pode se tornar a ferramenta número um de desenvolvimento web.

Grave isso – somos tendenciosos, e estamos orgulhosos do que lançamos!

Para os usuários não iniciantes, DevKinsta é uma forma de ajudar você a criar as instalações locais do WordPress em um piscar de olhos. É um kit completo que permite projetar, desenvolver e implantar um site WordPress para máquinas MacOS e Windows (com uma versão Linux no pipeline).

Você é capaz de adaptar sua instalação ao seu projeto atual. Por exemplo, seu “servidor” poderia usar Nginx ou Apache, sua escolha de versão PHP, executar o MariaDB ou MySQL, e muito mais:

Há mais debaixo do capô também. Você também pode depurar e testar e-mails através do servidor SMTP integrado, e para gerenciamento de banco de dados, você pode usar a poderosa ferramenta Adminer:

Gerente de banco de dados da DevKinsta, com poder de administração.

Em geral, pensamos que a DevKinsta é ideal para o desenvolvimento moderno do WordPress. Ele pode se encaixar diretamente em seu fluxo de trabalho.

Criamos esta ferramenta com desenvolvedores, designers, freelancers e agências em mente. No entanto, praticamente qualquer pessoa com necessidades diárias de desenvolvimento encontrará valor no DevKinsta – especialmente (mas não exclusivamente) usuários Kinsta.

Além disso, a DevKinsta é totalmente gratuita!

2. MAMP

O logotipo da MAMP.

Você pensaria que as ferramentas clássicas para criar e implantar páginas da web estão mortas e enterradas, dada a chegada de ferramentas mais rápidas de caixa de areia. Entretanto, as pilhas tradicionais de serviços web, tais como LAMP, MAMP, e XAMPP, ainda estão indo bem.

Normalmente, eles combinam um Sistema Operacional (SO) – Linux, macOS ou Windows – junto com o servidor web Apache, banco de dados MySQL e linguagens de programação Python, PHP e Perl em uma pilha. Como tal, uma pilha de serviços web como esta ainda será utilizada em um futuro próximo.

MAMP é a versão específica para MacOS da ferramenta. Esta abordagem permite instalar uma pilha e trabalhar no projeto e implantação. Embora o processo possa ser mais longo do que as configurações mais modernas, ainda há um nível similar de flexibilidade sob o capô – ou pelo menos, o potencial está lá.

Enquanto em uma ferramenta como a DevKinsta, você seleciona a partir de uma interface gráfica de usuário (GUI), com uma pilha de serviços web, você tem que instalar as adições necessárias manualmente. Por exemplo, não há uma maneira integrada de girar um site WordPress sem “implante o seu próprio”. É uma situação semelhante com o teste de e-mail.

Como com outras ferramentas de ambiente de desenvolvimento local, o MAMP é totalmente gratuito. Entretanto, há também uma versão premium do MAMP tanto para Windows quanto para Mac, que amplia a funcionalidade e fornece uma ferramenta de desenvolvimento web abrangente e robusta.

Devido à flexibilidade e ao preço, as pilhas clássicas de serviços web ainda estão em muitos computadores de desenvolvedores. Os aficionados da linha de comando naturalmente gravitarão nesta solução, especialmente se você adora usar gerentes de pacotes como Homebrew, Flatpak, ou Ninite.

Naturalmente, os desenvolvedores Apache também usarão essas pilhas, assim como os desenvolvedores MySQL e Python ou PHP. Por extensão, os desenvolvedores do WordPress também se sentirão em casa aqui.

3. XAMPP

XAMPP é outra pilha de serviços web que recebe muito amor dos desenvolvedores de PHP, incluindo aqueles que criam produtos WordPress. O “X” no nome representa a natureza multiplataforma da ferramenta. Ele oferece instaladores para máquinas Windows, MacOS e Linux:

Embora costumava haver uma diferença entre as várias pilhas de serviços web, atualizações e melhorias constantes equalizaram o campo. Ainda assim, o XAMPP tem um par de truques únicos na manga.

Por exemplo, o MySQL não é mais o Sistema de Gerenciamento de Banco de Dados Relacionais (RDMS) padrão. Ao invés disso, o XAMPP utiliza o MariaDB. É provavelmente uma representação mais precisa de um servidor de produção, dada a mudança para outras soluções após a aquisição da Oracle.

Além disso, há um instalador de aplicativos web dentro do pacote XAMPP. Bitnami é similar a soluções como Softaculous, mas Bitnami é específico para o XAMPP:

Embora haja muitos aplicativos disponíveis, você provavelmente estará mais interessado no instalador do WordPress. Ainda assim, há muitos complementos para escolher, fazendo do XAMPP uma solução flexível para o desenvolvimento local.

Editores de texto e código

A maioria dos desenvolvedores adora discutir sobre qual editor de código você deve usar. Ok, somos hiperbólicos, mas há muitas opiniões sobre o assunto, com uma fervorosa base de fãs para cada editor.

Entretanto, se as pesquisas estiverem corretas, você provavelmente está usando Sublime Text, Visual Studio Code (VSCode), ou IntelliJ IDEA. Faz sentido, já que estas três ferramentas escalam desde a simples edição de texto até o Ambiente de Desenvolvimento Integrado (IDE) de pleno direito. No entanto, há outras que também merecem uma menção. Vamos dar uma olhada em algumas delas.

4. Visual Studio Code

Desde seu lançamento em 2015, o uso do Visual Studio Code explodiu em todos os desktops de desenvolvimento de todas as listras.

É um editor de código fonte aberto desenvolvido pela Microsoft que oferece o suficiente na caixa para ser considerado uma IDE. Sem dúvida, ele oferece funcionalidade suficiente para capturar mais da metade do mercado – 55% dos desenvolvedores web usam Visual Studio Code diariamente.

Em sua configuração padrão, o Visual Studio Code é, antes de tudo, um editor de texto. Entretanto, quando acoplado à sua biblioteca de extensão, ele se torna modular e flexível o suficiente para atender a qualquer uma de suas necessidades de desenvolvimento:

A biblioteca de extensões do Visual Studio Code.

Isso significa que você pode instalar linters e fixadores para sua linguagem escolhida (sim, ESLint e PHP CS Fixer estão lá), juntamente com Docker e extensões Vagrant, e muito mais.

Por falar em linguagem, o Visual Studio Code suporta JavaScript, Node.js, e TypeScript out of the box. Entretanto, o ecossistema de extensão é tão rico que você será capaz de encontrar algo que suporte a linguagem que você está usando.

Além disso, você também encontrará uma integração de alto nível com outros produtos Microsoft, mais notadamente o GitHub:

O Visual Studio Code tem uma integração dedicada do VCS com o GitHub.

O Visual Studio é completamente gratuito e, dado o conjunto de recursos, é ideal para muitos. Consideramos o VSCode como um excelente meio termo entre o IDEA e o Sublime Text. Por falar nisso, vejamos a seguir o último.

5. Sublime Text

O Sublime Text é um dos pilares dentro do mundo dos editores de texto. É mais parecido do que a maioria das outras soluções, embora sua aparência desmente o poder sob o capô.

Por exemplo, você verá muito do que o Sublime Text oferece em outros concorrentes. A Paleta de Comando é algo que você verá em muitas soluções, pois é simples de usar.

Além disso, há poderosos atalhos de teclado de edição, como fazer múltiplas seleções para editar várias colunas ao mesmo tempo. Além disso, o recurso Goto Anything oferece combinações semelhantes a Vim de atalhos de teclado para atravessar seus arquivos:

O Sublime Text pode combinar teclas para ajudá-lo a navegar.

O Sublime Text é uma ferramenta Premium com um período experimental muito liberal. Pode ser considerado gratuito, mas para devolver ao desenvolvedor, você deve adquirir uma licença para uso prolongado.

Em nossa opinião, para muitos codificadores menores ou hobbyistas, o Sublime Text oferece uma grande Experiência do Usuário (UX), fornecendo o essencial. Ele continua a encontrar favor entre muitos desenvolvedores por seus visuais agradáveis, layout sem alarde e extensibilidade.

6. Atom

Em certo momento, Atom desfrutou de um uso pesado entre os desenvolvedores. No entanto, desde que o Visual Studio Code chegou, ele tem visto menos adoção. É uma pena porque é um grande editor de código que é adequado para muitos aplicativos diferentes.

É um aplicativo desenvolvido pela GitHub, o que pode explicar porque ele foi empurrado para baixo na ordem de bicadas na Microsoft. Entretanto, ele é atualizado regularmente e pode ser considerado uma versão alternativa do Visual Studio Code.

A edição de texto é funcional, e como seu irmão maior, tem integração GitHub embutida. Há também muitos complementos chamados “pacotes”:

Há muito disponível para ajudar a adaptar o Atom ao seu fluxo de trabalho e projetos. Atom inclui vários temas para escolher, e alguns, como o One Dark, são tão populares que encontraram seu caminho para outros editores também:

Atom é um editor de código funcional que merece uma tentativa. Entretanto, como o Atom é construído sobre Electron (sem trocadilho), alguns usuários têm reclamado de arquivos grandes e projetos em execução lenta. Como tal, sugerimos que é bom para projetos menores e scripts rápidos (especialmente com o pacote de terminais embutido), mas pode não ser o melhor para trabalhos complexos.

7. Notepad++

Logo de cara, vale a pena afirmar que o Notepad++ pode não substituir nenhum dos editores de código “big boy” que você já usa, tais como IntelliJ IDEA ou Visual Studio Code. Entretanto, ele lhe dará mais poder sob o capô para scripts simples e extensões gerais de edição de texto.

Dependendo de seus projetos, pode ser tentado a mudar. Apesar de sua simplicidade, o Notepad++ é utilizado em uma grande variedade de projetos.

É um editor de código somente para Windows, o que explica o elemento “plus-plus” do seu nome. Naturalmente, o Notepad é um editor de texto sem nenhum absurdo encontrado por padrão nas instalações Windows. O Notepad++ se parece com seu irmão, mas também inclui recursos específicos de desenvolvimento, como por exemplo:

Janelas com abas e divisórias
Suporte para quase 80 linguagens de programação
Funcionalidade de auto-completamento
Uma lista de funções, que oferece uma excelente maneira de visualizar todas as funções utilizadas em um arquivo num relance

Além disso, o Notepad++ é flexível quando se trata de gerenciamento de projetos. Ele suporta três abordagens diferentes: sessões, espaços de trabalho e projetos. Assim que você começar a pesquisar o Notepad++, você verá que pode usá-lo para projetos mais extensos do que scripts de uma página.

Pensamos que o Notepad++ vai se adequar aos desenvolvedores que desejam uma grande funcionalidade, que também é personalizável. Ao ser usado, ele tem aquela vibração de código aberto Vim, que vai se adequar mais a certos tipos de projetos do que a outros.

8. O Conjunto JetBrains

Quando se trata de IDEs de desenvolvimento, o conjunto de soluções JetBrains estará no topo (ou muito próximo) de sua lista. O modelo de negócios é inteligente, pois embora haja muitos editores disponíveis na JetBrains, todos eles são na verdade “subconjuntos” do seu editor de marquises, IntelliJ IDEA.

IDEA se fatura como uma IDE Java. Ela suporta praticamente todas as funcionalidades de outras ferramentas IDE em sua gama. E, como tal, também suporta muitas linguagens de programação.

Por exemplo, PyCharm rasga a maior parte da funcionalidade Python do IDEA e a empacota como sua própria ferramenta. Você também encontrará o phpStorm e o WebStorm fazendo a mesma coisa.

PyCharm é uma IDE específica de Python que é popular no espaço de linguagem.

Usando IDEA é uma brisa – JetBrains fez um ótimo trabalho para que você codificasse em vez de se arrastar em configurações e ajustes. Pode ser uma surpresa, mas a linha entre o uso de um editor de linha de comando como o Vim e o uso de IDEA é muitas vezes fina.

Ambas as ferramentas se concentram no fluxo de trabalho e na eficiência, mas IDEA também permite que você importe as ligações do teclado do Vim se você estiver confortável com essa forma de trabalho.

As extensões IDEA permitem o uso de encadernações de teclado Vim para que você se sinta como um Wizard. — As extensões IDEA permitem que você use a junção do teclado do Vim para fazer você se sentir como um mago.

Supomos que você provavelmente esteja usando IntelliJ IDEA se estiver trabalhando como parte de um grande projeto ou empresa com um negócio de software em andamento. Pode ser para compartilhar projetos ou para trabalhar em um ambiente consistente. Muitos desenvolvedores de WordPress estão usando produtos JetBrains por causa de sua robustez no gerenciamento de projetos.

O preço também é um fator, e o IntelliJ é construído sobre um modelo de assinatura que muitas vezes chega a três ou quatro números por ano.

Apesar disso, existem edições “comunitárias” dos produtos JetBrains. Entretanto, estas são versões em escala reduzida do Software de origem; essencialmente, são soluções de código aberto com elementos proprietários removidos.

Além disso, a JetBrains oferece preços competitivos para projetos de código aberto, startups, instalações educacionais, Docker Captains, e muito mais grupos de nicho.

Ferramentas de desenho e prototipagem web

É claro, um aplicativo web não é nada sem uma boa experiência do usuário (UX). Como tal, a prototipagem de seus layouts e visuais muitas vezes precisa de uma ferramenta dedicada. Ferramentas de projeto serão vitais tanto no lado do servidor quanto no lado do cliente do desenvolvimento. Aqui estão algumas escolhas populares.

9. Figma

Figma é uma ferramenta de desenvolvimento da web frequentemente mencionada que lhe permite colaborar no projeto.

Você pode usar o editor de arrastar e soltar para construir interfaces e outros elementos voltados para o usuário. Para os desenvolvedores, você também pode pegar trechos de código para implantar em seus projetos. Figma torna o processo – da ideação à implantação – suave e mantém as revisões em baixa ao longo de toda a cadeia do projeto.

Você também obtém o benefício de um conjunto homogeneizado de ferramentas para ajudar na escolha de fontes e cores. Este processo está em contraste com o uso de ferramentas separadas, como a Escala de Tipo:

…e um subconjunto de ferramentas de desenvolvimento web como Adobe Color, Coolors, vários coletores de cores, e muito mais.

Embora a Figma tenha valor para projetos de um único desenvolvedor, ela tem mais benefícios para uma equipe, uma vez que se dimensiona em tamanho. As equipes vão gostar dos aspectos colaborativos do Figma, como o repositório central de ativos e os componentes reutilizáveis. Os líderes de equipe também apreciarão as opções de relatórios abrangentes para ver como os membros da equipe utilizam os vários sistemas de projeto.

Quanto ao preço, a Figma custa US$ 12 por “editor” no nível padrão, que sobe para US$ 45 por “editor” para as equipes baseadas na empresa (para “editor”, leia-se “assento” – é o mesmo conceito). Como tal, o preço poderia subir com base no número de editores que você gostaria de ter a bordo.

10. Sketch

Sketch é um aplicativo somente para MacOS que também é muito verificado entre os desenvolvedores:

É popular porque o Sketch inclui muitas funcionalidades sob o capô, e é também uma brisa para usar, o que faz sentido já que é um aplicativo macOS nativo. Ele se parece um pouco com o Xcode IDE da Apple, o que não é uma coisa ruim, e se sente ótimo para navegar.

Naturalmente, você pode realizar funções essenciais como edição vetorial e redimensionamento de restrições. Entretanto, há muito mais no aplicativo que o ajudará a gerar projetos e exportá-los para outros de forma rápida.

Por exemplo, veja a funcionalidade Smart Layout do Sketch, que usa redimensionamento adaptável para combinar com suas dimensões e layout atual. Há também muitas ferramentas de colaboração para dar a todos uma forma de mergulhar em um design e ajudar a aperfeiçoá-lo.

O Sketch difere de uma ferramenta como a Figma na medida em que um freelancer ou um desenvolvedor solitário pode pular a bordo gratuitamente e depois comprar uma assinatura quando houver necessidade. Neste sentido, o preço do Sketch é um pagamento único de US$ 99 ou US$ 9 por mês por usuário.

11. InVision Studio

O InVision Studio vende-se exclusivamente como um aplicativo de “design de tela”. Faz sentido, e é mais claro para entender também. O InVision Studio oferece todos os recursos e funcionalidades padrão que você esperaria, como um editor intuitivo baseado em camadas e suporte vetorial.

No entanto, há muito mais na caixa relacionado à prototipagem e criação de animações. Por exemplo, você pode apontar, clicar e arrastar para unir quadros de arte e telas. Este recurso permite que você construa animações como parte do processo de design e não como algo que você entrega mais tarde.

Animações dentro da aplicação InVision Studio. — Animações dentro do aplicativo InVision Studio.

Falando em transferências, toda a equipe pode trabalhar dentro do InVision Studio por causa de bibliotecas de componentes compartilhados, opções de sincronização global, um modo de inspeção robusta, e muito mais.

A estrutura de preços também é competitiva. A versão gratuita do InVision Studio lhe dá quase toda a funcionalidade da versão paga, com apenas uma restrição no número de documentos que você pode salvar. O nível Pro é valioso para o poder do aplicativo (cerca de US$ 95/usuário/ano).

12. Affinity Designer

Se você é um usuário do Adobe Illustrator, terá se deparado com o Affinity Designer no passado. A abordagem da Serif ao design gráfico parece dar à solução da Adobe uma corrida por seu dinheiro:

Desde seu lançamento, ganhou uma base de usuários crescente devido a seu bom relacionamento com a comunidade, princípios de design estelar e modelo de preços atraente. Você encontrará versões para Mac, Windows e iPad, e cada versão pode trabalhar com vetores, rasters, ou ambos de uma só vez:

As ferramentas a que você está acostumado do Illustrator estão todas presentes, juntamente com um conjunto completo de perfis de cores e opções de exportação:

As opções de exportação em Affinity Designer.

Em resumo, os recursos e funcionalidades estão no lugar para criar gráficos profissionais para seus projetos. Além disso, o preço é extremamente competitivo. Custa cerca de 50 dólares pelo preço total, o que é um pagamento único. Não tem uma opção adequada baseada em nuvens como o Illustrator. Mesmo assim, por um pagamento único, você recebe a amplitude do Adobe, apresentado de uma forma subjetivamente melhor.

13. CodePen ou JSFiddle

Quando discutimos o IntelliJ IDEA anteriormente, não mencionamos seus recursos menores, porém úteis – arquivos Scratch. Ele permite que você escreva e teste rapidamente um trecho de código sem ter que impactar seu projeto de trabalho atual.

Para usuários de outros editores de código, uma solução como CodePen ou JSFiddle é um excelente substituto. Ambos funcionam de forma semelhante: há três editores de texto para HTML, CSS e JavaScript, e uma tela de saída para ver o resultado:

Você pode nomear sua “Pen” ou “Fiddle” dependendo de sua plataforma, salvá-la e compartilhá-la com outros. É uma idéia tão simples – uma idéia que pode ajudar você a pegar seus pensamentos mal cozidos sobre um aspecto de um projeto e realizá-los em segundos.

Para os desenvolvedores que querem iluminar um determinado elemento dentro de um arquivo e mostrar onde as mudanças são possíveis, uma “IDE online” é inestimável. Além disso, a colaboração também é possível através de chat ou de um “microfone ao vivo”:

A tela JSFiddle Collaboration (Colaboração JSFiddle).

Em geral, uma IDE online poderia ser considerada uma ferramenta de desenvolvimento web “adormecida”, pois não é mencionada com muita freqüência, mas é utilizada por muitos desenvolvedores para criar um código melhor.

14. Buttons Generator

O Buttons Generator é uma ferramenta geradora de botões CSS on-line e gratuita que pode ser usada para criar vários estilos diferentes de botões CSS com apenas um clique. Basta rolar pela lista de estilos de botão e escolher o que você gosta. Clique no estilo desejado e o CSS será adicionado automaticamente à sua área de transferência.

Você pode usar as cores e os estilos dos botões como estão ou editar o CSS para dar ao botão a cor e os estilos que desejar. Existem vários estilos diferentes para escolher, incluindo 3D, Gradiente, com Borda Sombreada, Neomórfico, Retrô, Efeito de Deslizamento e muitos mais.

Experimente, é uma maneira divertida, única e fácil de gerar botões CSS.

Clientes Git

Ter uma forma centralizada de armazenar o código, documentar as mudanças e trabalhar com uma equipe sem duplicação é uma tarefa para um Sistema de Controle de Versão (VCS). Aqui estão alguns clientes que lidam com um VCS: git.

Vamos discutir primeiro o próprio VCS.

15. Git

Git é essencial para um desenvolvedor moderno, e como tal, é uma das ferramentas de desenvolvimento web mais cruciais disponíveis. Em resumo, é uma forma de documentar as mudanças que você faz no código do seu projeto e armazená-las em “repositórios”:

Uma lista de WordPress que o GitHub se compromete.

Git foi inventado pelo criador do Linux Linus Torvalds. e usa uma série de comandos para adicionar alterações em arquivos em uma “área de teste”, onde você os “comprometerá” a um repositório. De lá, você os “empurrará” para um repositório remoto hospedado on-line.

Embora não seja o único VCS disponível – a equipe de desenvolvimento do WordPress aind a usa o Trac para muitos projetos – ele é o mais proeminente. Um VCS como o Git ou Trac ajuda as equipes a trabalhar em conjunto, hospedando o código em um local central.

Os comandos básicos são funções de uma só palavra prefaciadas com git, muitas vezes utilizadas a partir da linha de comando. Por exemplo, os comandos básicos são de uma só palavra:

git add file.php

Esta expressão adiciona file.php à sua área de teste. Em outras palavras, ele registra as mudanças como algo que você gostaria de armazenar sem dar os retoques finais. Você pode fazer isto com um arquivo ou um projeto inteiro, se desejar.

Para comprometer o arquivo, você executa o git commit. Daqui, você pode adicionar um comentário para contar aos outros sobre seus commits. Depois disso, suas mudanças são armazenadas e empurradas para o “ramo” primário. É claro, isso depende se você está trabalhando em um “reporte” remoto.

Se você é novo em Git e VCSs em geral, GitLab tem um ótimo guia para iniciantes no uso de Git na linha de comando. Também falaremos um pouco sobre o próprio GitLab mais tarde.

16. GitHub

Para a grande maioria dos desenvolvedores, GitHub é o local onde os repositórios de Git do projeto são armazenados:

É uma solução de propriedade da Microsoft que cobre muito mais do que a hospedagem Git. Há um monte de ferramentas de teste automatizadas também, e uma tentativa de oferecer recursos de colaboração extra.

As características de colaboração da GitHub.

Para projetos de código aberto, plataformas como o GitHub são quase a opção de fato. Dado isto, GitHub como uma ferramenta de desenvolvimento web não tem preço para muitos usuários de código aberto, aprendizes e desenvolvedores em geral. É especialmente verdadeiro quando se investiga o rastreador de problemas do GitHub para resolver um problema com pacotes instalados.

GitHub não é apenas para armazenar repositórios de programas. É também para outros projetos de codificação, tais como desenvolvimento web, e até mesmo livros.

Em geral, GitHub é uma ferramenta fantástica que ajuda a construir uma comunidade saudável a partir de muitos ramos díspares. Entretanto, não é a única plataforma ao redor.

17. GitLab

Mencionamos isso antes, mas o GitLab é um concorrente do GitHub, com um objetivo semelhante. É essencialmente um host para Git repos, mas também oferece alguns outros extras também.

Enquanto GitHub se autodenomina uma “plataforma de desenvolvimento”, GitLab se concentra em “DevOps”. Em sua camada gratuita, GitLab oferece cada etapa do ciclo de vida DevOps, testes estáticos de segurança do aplicativo, e cerca de 400 minutos por mês para Desenvolvimento Contínuo (CD) e Integração Contínua (CI).

GitLab cai em seu senso de comunidade, que é a grande diferença quando se trata de GitHub. Trata-se mais da implantação e de todo o ciclo de um projeto. Não é negativo, mas significa que GitLab é mais uma plataforma “insular”, indiscutivelmente não tão adequada para projetos de código aberto quanto GitHub.

Para a maioria das equipes, o nível gratuito do GitLab será suficiente. Por cerca de US$ 230 por ano, por usuário, você terá acesso a análises para seu código e produtividade, cerca de 10.000 CD/CI minutos, e mais.

18. Sourcetree

Sourcetree não é um host de repositório Git, mas uma Interface Gráfica do Usuário (GUI) para gerenciá-los. É uma das muitas soluções, tais como GitKraken, Sublime Merge, GitHub Desktop, e muitas outras.

É um produto Atlassian (e nós adoramos Atlassian!) que se conecta com outros produtos como Bitbucket para oferecer uma representação visual do seu repositório Git.

O Sourcetree é comercializado como um cliente Git fácil – e é – mas também é adequado para usuários experientes. Ele tem muito sob o capô para apoiar uma equipe que trabalha com Git (e Mercurial também).

Por exemplo, a Sourcetree faz coisas simples, tais como destacar as mudanças em relação ao último compromisso, mas também aborda mais se você precisar. Os líderes de equipe podem rever os conjuntos de mudanças, trabalhar entre as filiais conforme necessário e visualizar o código usando gráficos e guias de informação:

Se um cliente Git é adequado para você depende de suas circunstâncias. Se você ainda estiver aprendendo, recomendamos manter um Terminal enquanto você compreende o fluxo e o processo. Para profissionais ou equipes com amplo uso de Git, um cliente como a Sourcetree vai raspar minutos do trabalho que você faz todos os dias.

Ferramentas para desenvolvedores de navegadores

Sem um navegador web, não há desenvolvimento web. Entretanto, embora seu navegador escolhido seja fundamental para navegar na web, você também pode usá-lo para descobrir como ele funciona.

A maioria dos navegadores modernos inclui ferramentas de desenvolvimento específicas para ajudá-lo a analisar o código back-end, que você pode então levar de volta ao seu projeto. Aqui estão alguns dos mais populares.

19. Ferramentas para desenvolvedores Chrome

O “DevTools” do chrome são reverenciadas em todas as comunidades por seu conjunto de características e diagnósticos estelares.

Dado o aumento dos navegadores baseados no chrome, muitos têm o mesmo conjunto de DevTools com atalhos similares. Você pode verificar Microsoft Edge, Brave, o próprio Chromium e muitos outros clones e trabalhar com seus projetos dentro do navegador.

A aba Elements será um assombro regular, pois é aqui que você verá o código fonte da página. E, em nossa opinião, a aba Performance dá insights sobre o carregamento da página que outros navegadores DevTools não conseguem igualar:

A aba Segurança também fornece algumas boas informações, que serão necessárias para monitorar (ou pesquisar) o site do cliente:

Melhor ainda, você será capaz de gerar relatórios do Google Lighthouse diretamente do seu navegador baseado no Chromium:

Um relatório do Google Lighthouse da Brave's DevTools. — Um relatório do Google Lighthouse da Brave’s DevTools.

As ferramentas DevTools aqui são subjetivamente as melhores, então você encontrará usuários baseados no chrome e no chromium que se apoiarão nelas. Embora outros navegadores também tenham DevTools, e eles também são dignos de consideração.

20. Ferramentas do desenvolvedor Firefox

Com uma base de usuários ativos mensal de cerca de 220 milhões, o Firefox ainda é um navegador popular, apesar do domínio do Google. No passado, os desenvolvedores elogiaram o Firebug, e ele era freqüentemente um líder em depuração dentro do navegador.

Hoje, temos as ferramentas de desenvolvimento do Firefox:

Há um conjunto central de recursos para visualização do código fonte do site (Inspetor), um Depurador, Memória, Armazenamento e muito mais.

Para iniciantes, o Console é uma porta de entrada para a codificação em geral porque você é capaz de executar JavaScript diretamente no navegador, e é uma maneira fácil de testar trechos e encontrar seus pés ao iniciar:

Apesar disso, pensamos que o Firefox (e outros navegadores) tem menos pacotes em suas ferramentas de desenvolvimento do que os navegadores baseados no cro[mo. Ainda assim, para a depuração e solução de problemas entre navegadores, muitas vezes você pressionará o Firefox para entrar em serviço. Como tal, é uma coisa boa que eles sejam ideais para quase todas as tarefas.

Estruturas front-end

Por falar em front-end, você precisará de algo adequado para criar sites incríveis. Sua escolha da estrutura aqui é crucial. Você deve sempre selecionar a melhor ferramenta para o trabalho.

Com isso em mente, vamos olhar para algumas escolhas populares.

21. Bootstrap

A reatividade móvel é uma característica padrão no design moderno da web. É um passo bem-vindo, dado como a navegação móvel já ultrapassou os desktops. Dado isto, você vai querer uma forma de girar os primeiros sites móveis rapidamente.

Bootstrap é uma ótima ferramenta de desenvolvimento web que está vendo muito uso:

É um conjunto de ferramentas que combina plugins JavaScript, variáveis Sass, alguns componentes pré-construídos, um sistema de grade responsiva à qualidade, e muito mais. Há até mesmo um mercado de temas oficiais que funcionam com Bootstrap, e muitos sites WordPress também usam temas construídos em cima da estrutura de design.

Naturalmente, o uso ou não do Bootstrap dependerá das necessidades do seu projeto. Entretanto, é lógico supor que os projetos de desenvolvimento web com orçamentos apertados e reviravoltas rápidas se transformarão em uma solução “Bootstrapped” e a adaptarão ao WordPress. Dado que a estrutura e o WordPress são gratuitos, seu tempo se torna o único fator de custo.

22. Tailwind CSS

No papel, CSS Tailwind CSS não faz sentido. É uma estrutura de front-end para uma linguagem que faz parte da trindade central do desenvolvimento da web. Como tal, é lógico pensar que o usuário alvo já teria o conhecimento adequado sem a necessidade de uma estrutura.

Na realidade, o CSS Tailwind CSS faz todo o sentido. É uma maneira de projetar o front-end do seu site sem deixar HTML.

Você usa classes de utilidade dentro de várias tags para adicionar em CSS a partir de um StyleSheet central. É claro que o CSS ainda é a principal fonte de estilo. Está fora do seu alcance enquanto você constrói um layout usando HTML. Assim, ele permite que você desenvolva estrutura e estilo ao mesmo tempo.

A abordagem nos faz lembrar do Sistema de Grade 960 e funcionaria bem em conjunto com essa estrutura. Dito isto, há o perigo de empacotar elementos com tantas classes que você poderia acabar com uma confusão de código de esparguete. Você vai precisar de paciência e disciplina para trabalhar com o CSS Tailwind, mas se ele se encaixa em seu projeto, é uma estrutura rápida e robusta.

23. Bulma

Fizemos todo o progresso que fizemos no projeto de estruturas e layouts do site, criando colunas flexíveis, responsivas e dinâmicas um bloqueio de estrada para muitos. Embora o manuseio não seja a única coisa que Bulma pode fazer, este tipo de aplicativo é carne e batatas para a estrutura:

Assim como o Tailwind CSS, a Bulma esconde o CSS e lhe dá classes utilitárias para seu HTML. É construído com Flexbox, mobile-first, e modular. É ótimo se você precisar apenas de alguns componentes. Você também pode misturar e combinar frameworks, se desejar.

Além disso, você não precisa de nenhum JavaScript para colocar a Bulma em funcionamento, pois é apenas CSS. Você é capaz de adicionar elementos de interface, tais como botões com o mínimo de código. É uma estrutura simples e de código aberto que pode se adaptar às necessidades do seu próprio projeto. Em nosso livro, essa é uma característica valiosa que você faria bem em aproveitar.

24. Foundation

A equipe da ZURB tem sua única atuação em uma estrutura de CSS na Foundation. É uma ferramenta móvel, semântica, que tem dois sabores para sites e e-mail:

A fundação é construída tendo a acessibilidade como prioridade. Cada trecho da Fundação vem com atributos ARIA dedicados. Entretanto, antes de chegar a esta etapa, Foundation é impressionante para prototipagem rápida por causa de como você adiciona isso ao seu HTML. Você é capaz de criar quase qualquer elemento estrutural em sua página – mesmo vários tipos de menus e navegação:

Criação de um menu de navegação na Foundation.

A ZURB também fornece uma riqueza de excelente documentação e tutoriais para que você aprenda os aspectos internos e externos da estrutura. A fundação é simples de usar, mas suspeitamos que você pode ir a fundo nos locais de construção e sair com layouts e funcionalidades complexas.

Você também encontrará um monte de modelos no site da Fundação. Eles são armações de arame sem ossos para ajudar você a sair do chão – uma inclusão bem-vinda:

De modo geral, a estrutura da Foundation faz o que diz na lata. Ela será central para o desenvolvimento do seu site, em vez de deixá-lo aparafusar mais funcionalidades. Como tal, você pode não estar utilizando-o para cada projeto. Embora, onde for empregado, ele fará o negócio em todos os tipos de sites.

25. Material-UI

Discutiremos Reagir com mais detalhes mais tarde, mas por enquanto, saiba que o Material-UI é baseado na biblioteca de componentes desta estrutura JavaScript. Para os desconhecidos, o Material Design é a “filosofia” do Google sobre como projetar a interface de um site. Isso significa muitas fontes Roboto e blocos de cores:

Material-UI procura atender aos padrões de design do Google.

Você vai importar a biblioteca para o React e depois usar tags HTML dedicadas para construir seu site:

Para personalizar ainda mais o elemento, você adiciona classes a suas tags HTML. Todo o bloco de código é envolvido em uma função, e você renderizará os detalhes (e a página por extensão) em Reagir.

Há muitos temas gratuitos e premium disponíveis, cobrindo também muitos casos de uso e preços:

A biblioteca temática Material-UI. — A biblioteca de temas Material-UI.

Como o Material-UI tem um caso de uso específico – a criação de sites em torno do Material Design – será uma estrutura de ponta a ponta se este for seu objetivo. Em particular, a biblioteca de temas será um recurso valioso para começar, independentemente do seu orçamento.

26. HTML5 Boilerplate

Se você é um desenvolvedor WordPress, pode ter se deparado com Underscores. É um tema básico do WordPress que economiza inúmeras horas reunindo os elementos funcionais e essenciais de seu site. HTML5 Boilerplate faz o mesmo em um nível geral de design.

Como tal, inclui sete arquivos que abrangem HTML, CSS e JavaScript. Todos eles contêm apenas os arquivos e códigos mais necessários para renderizar uma página. Além desse ponto, a forma como sua página se apresenta depende de você.

O HTML5 Boilerplate tem muitos adeptos porque é mais um utilitário que economiza tempo do que uma estrutura completa. Assim, não há visuais fora da caixa para “passar o comércio”, mas se você pressionar o HTML5 Boilerplate para entrar em serviço, você pode descobrir que ele acelera seu desenvolvimento da maneira como o Underscores faz para os desenvolvedores do WordPress.

27. Materialize

Embora não chamaríamos de Materialize um concorrente do Material-UI, é outra estrutura que procura usar os princípios do Design de Material para criar um layout:

No entanto, em vez de usar o React, o Materialize é uma estrutura de CSS. Isso torna a Materialização mais fácil de ser implementada no front-end. Muito como outros frameworks baseados em CSS, você usa classes dentro do HTML para puxar os elementos no front-end.

Dito isto, também há um monte de componentes JavaScript, para elementos como os modais e dropdowns:

Um menu suspenso criado com o Materialize.

Como muitas dessas estruturas, existem temas de alta qualidade que ajudam a construir layouts em um estilo específico. No entanto, todos eles são temas HTML estáticos, o que pode ser um problema se você quiser implementar o JavaScript. Nestes casos, você pode querer considerar Material-UI em vez disso.

Estruturas de aplicativos web

Simplificando, um framework ou biblioteca JavaScript permite que você trabalhe com o chamado código “vanilla” de maneira diferente. Neste caso, é para criar aplicativos e sites específicos na web. Há muitos “sabores” também – vamos cobrir alguns.

28. React.js

React.js é uma popular biblioteca JavaScript projetada no Facebook que alimenta muitos dos elementos mais modernos do WordPress. Tanto o back-end do WordPress.com quanto o Block Editor usam React, e nós o consideraríamos uma primeira maneira de usar o JavaScript como interface.

O backend Calypso para WordPress.com é construído sobre o React. — O back-end Calypso para WordPress.com é construído sobre o React.

Como tal, os desenvolvedores do WordPress devem – parafraseando Matt Mullenweg – aprender a React.js profundamente. No entanto, não é apenas uma estrutura para desenvolvedores de WordPress.

Onde quer que você precise de uma Interface de Usuário (IU) moderna e dinâmica, Reagir será a primeira escolha. Ela usa uma extensão de sintaxe para JavaScript chamada JSX para criar elementos, que são então renderizados para o Módulo de Objeto do Documento (DOM):

const name = "Ken Starr';

const element = <h1>Hello, {name}</h1>;

ReactDOM.render
  Element,
  document.getElementById('root')
);

A variável JavaScript dentro do JSX pode ser qualquer expressão válida, o que lhe permite construir argumentos complexos. Isso faz da Reagir uma escolha forte quando se trata de estruturas. Por causa de sua popularidade, achamos que o React deveria estar em sua lista “mustlearn”, independentemente de onde você gaste seu tempo de desenvolvimento.

29. Vue.js

O Vue.js é outra estrutura JavaScript para a construção de interfaces de usuário. É baseado na “camada de visualização” e é ótimo para integração com outras bibliotecas e frameworks.

No lado do HTML, a Vue não poderia ser mais acessível. Você dá à sua tag uma identificação e chama uma chave de um conjunto de dicionários no lado JavaScript. Os dados agora são reativos, e os dados e DOM são vinculados.

Desta forma, o Vue.js é muito parecido com algumas das estruturas de CSS que examinamos anteriormente no artigo. Esta estrutura é convincente, e nós o encorajamos a olhar através da documentação para ver o que é possível.

Embora o Vue.js apóie as declarações JSX, é mais adequado utilizar modelos baseados nas tecnologias “clássicas” da web. Como tal, ele será ideal para desenvolvedores que não querem trabalhar somente em JavaScript.

30. Express.js

Estamos entrando no território da meta-estrutura aqui, já que o Express.js se conecta ao Node.js e fornece uma base para outras estruturas.

É uma estrutura minimalista (daí o nome), e um benefício primordial é ajudar a organizar os componentes do lado do servidor em um formato familiar de Model-View-Controller (MVC). Como tal, o código parece mais complicado do que outras estruturas – mesmo o JavaScript de baunilha:

var express = require('express');

var app = express();

app.get('/', function(req, res){
  res.send("Hello world!");
});

app.listen(3000);

Pensamos que o Express.js vai se adequar ao aplicativo que puxam e empurram muito dos bancos de dados. Isso o torna adequado para muitos aplicativos web modernas e desenvolvedores back-end que querem trabalhar em tarefas front-end com um mínimo de estresse.

31. Svelte.js

Uma regra sólida ao desenvolver para a web é garantir que seus sites funcionem em tantos navegadores quanto possível. Dito isto, em alguns casos, você pode querer construir aplicativos ou sites sem suportar navegadores legados. Nestes casos, o Svelte.js deve estar perto do topo de sua lista.

A estrutura recebe seu nome devido ao tamanho do seu arquivo – apenas 5kb uma vez minerada. Ela tem um formato parecido com jQuery- que será fácil para usuários familiares:

$('.hello').text("Hello svelte");

Há menos de 40 funções dentro do Svelte API, portanto, o início será simples. Além disso, você pode adicionar novas funções com facilidade usando $.fn.

Você encontrará “polyfills” para suporte ao Internet Explorer 9, mas esta é quase a única concessão. Para suporte de browser hiper-moderno usando uma estrutura super-limpa, Svelte.js poderia ser a única para você.

32. Laravel

Até agora, examinamos as estruturas JavaScript ou CSS. Dada a prevalência do PHP, faz sentido cobrir uma estrutura para esta linguagem também. Laravel é a escolha ideal aqui, pois é popular entre muitos desenvolvedores por sua sintaxe e ecossistema:

É mais apropriado dizer que Laravel é um ecossistema, pois inclui muitas ferramentas para ajudá-lo a construir projetos. Mesmo que você não use muito da estrutura em si, você pode usar o Laravel’s Homestead, um ambiente de desenvolvimento local baseado em Vagrantes.

O próprio Laravel é uma estrutura PHP baseada em Docker e usa um CLI (chamado Sail) para interagir com ele. Assim como o Vagrant, você usará a vela para construir containers e executá-los.

Laravel tem muito mais cordas em seu arco, no entanto. Por exemplo, você pode usá-lo como uma estrutura completa, um back-end API para aplicativos Next.js, e quase tudo o que está entre eles.

Se você é um desenvolvedor PHP, Laravel será uma ferramenta central (se não estiver familiarizado) para seu fluxo de trabalho.

33. Gatsby

Gatsby é uma estrutura de front-end de código aberto que tem atraído muita atenção nos últimos tempos. É porque o Gatsby é rápido, escalável, performante e seguro.

Há um processo de instalação super-rápido envolvendo o Node Package Manager (npm). Teremos mais sobre isso mais tarde. Embora seja um framework JavaScript, Gatsby gera arquivos HTML estáticos em tempo de execução, portanto não há maneira de atacar um site. Além disso, Gatsby automatiza o desempenho para manter seu site funcionando em uma configuração ideal.

Entre o desempenho automatizado, o dimensionamento dinâmico e o edifício HTML estático, Gatsby se sente como um organismo vivo. Há uma complexa “maquiagem” de codificação envolvendo JSX, Markdown, CSS, e muito mais baseada em suas necessidades. Cada passo do seu fluxo de trabalho e cada parte de sua pilha pode ser adaptada às suas necessidades.

Os desenvolvedores do WordPress também vão gostar de como o Gatsby se integra com a plataforma. No entanto, não será adequado em todos os casos. Por exemplo, se você precisa gerenciar um CMS baseado em nuvens por completo, isto não é para você. Mesmo assim, Gatsby pode se adaptar ao seu projeto na maioria dos casos, e funciona muito bem com o

34. Django

Por toda a conversa de que Python é uma linguagem de programação “iniciante” ou “aprendendo”, ela serve como a espinha dorsal para muitos sites de alto perfil. Alguns dos maiores sites – Instagram, Uber, Reddit, Pinterest, e mais – usam Django. Muitas vezes, você não encontrará nenhuma menção ao próprio Python, mas apenas ao Django.

Django é uma estrutura que usa Python para criar aplicativos web do lado do servidor. É tão simples de usar como o próprio Python, com um formato uber-readível.

Python é uma ótima linguagem de script para projetos baseados em lógica, portanto, alavancar isto para um aplicativo web é um bom ajuste. Além disso, a velocidade de processamento do Python é rápida, e a estrutura de arquivo fundamental é leve. Por ser rápido, Django é uma excelente estrutura do lado do servidor em comparação com PHP e tem tanto grunhido quanto a linguagem mais popular.

Dito isto, a absorção é menor, o que pode ser devido à reputação de Python como uma língua de aprendizagem. Apesar disso, Django trabalha bem com outras linguagens, como o JavaScript, para ser a base de um aplicativo web moderna.

É claro, se você planeja usar um CMS como o WordPress, ou está criando soluções para projetos baseados em Reações, você tem menos opções. Mesmo assim, pensamos que veremos um aumento no número de sites rodando no Django.

35. Ruby on Rails

A linguagem de programação Ruby era a “querida” das linguagens para iniciantes e alternativas de script para PHP alguns anos atrás. Ela é frequentemente comparada ao Python.

E assim como Django, Ruby on Rails também era um dos favoritos de muitos desenvolvedores.

A página de espaço reservado para um novo projeto Ruby on Rails.

Você encontrará o Ruby usado em muitos aplicativos web de servidor e de baixo nível. Além disso, o Ruby on Rails é usado como uma estrutura do lado do servidor em inúmeros sites. Ele usa uma abordagem MVC e oferece estruturas para o serviço web, páginas e um banco de dados. Como tal, você tem um site de barebones à sua espera, fora da caixa.

A Ruby on Rails se adequará ao seu projeto se precisar programar muitos trabalhos e trabalhar com soluções de terceiros. Por exemplo, há uma integração nativa com armazenamento de arquivos como o Google Cloud, e um invólucro para envio de e-mails.

No geral, é uma boa escolha se você quiser um conjunto robusto de padrões (como estrutura de pastas) que pode ser personalizado, se necessário. Por outro lado, não é uma boa escolha se você gosta de usar APIs durante o desenvolvimento.

A estrutura de código do Ruby on Rails pode se tornar complexa e desafiadora de se entender com grandes projetos. O tempo de execução também pode ser afetado, portanto pode não ser a melhor estrutura para projetos críticos de velocidade.

Ainda assim, Ruby on Rails é um dos frameworks líderes do lado do servidor web, e seu uso não está diminuindo a velocidade para projetos adequados.

36. TypeScript

Em poucas palavras, o TypeScript fornece “typechecking” estático opcional ao JavaScript. É um “super conjunto” da linguagem, e também suporta muitas outras bibliotecas de JavaScript. No geral, o TypeScript é JavaScript com algumas características extras, e você pode compilar as duas linguagens uma ao lado da outra.

Muitos desenvolvedores recorreram ao TypeScript para reduzir o número de erros de tempo de execução que recebem. Os erros de digitação são um dos mais comuns, e reduzi-los poderia lhe dar muito tempo extra de volta.

Para um exemplo muito simples de TypeScript, considere uma string:

let helloWorld = “Hello World”;

// ^ = let helloWorld: string

Aqui, o TypeScript usa let em vez do habitual var para a variável helloWorld. A partir daí, a TypeScript sabe que o helloWorld é uma string e a verifica com base nisso.

Em última análise, o TypeScript não é uma ferramenta essencial de desenvolvimento web, embora tenha se tornado mais popular devido a sua característica principal de marquise. Se você acabar economizando algum tempo muito necessário, pode se tornar vital para seu fluxo de trabalho.

37. GraphQL

Aqui está uma ferramenta única que pode encontrar favor entre os desenvolvedores que trabalham com os dados dentro de uma API. GraphQL é uma linguagem de consulta utilizada em uma API que também atua como um tempo de execução para servir os resultados da consulta que você faz.

Com uma API REST padrão, muitas vezes você tem que carregar a partir de múltiplas URLs. Com GraphQL, você pode obter dados a partir de uma única solicitação. Além disso, os GraphQL APIs são organizados por tipo e não por pontos finais. Esta classificação ajuda na eficiência de sua consulta e fornece erros mais explícitos quando algo dá errado.

Os tipos também podem ser usados para saltar o código de análise manual, dada a forma como o GraphQL os implementa. Você também é capaz de adicionar novos campos e tipos à sua API sem impactar o trabalho realizado até o momento.

A ferramenta é flexível e escalável em muitas áreas. Como o GraphQL cria uma API uniforme para seu projeto, você pode puxar um motor que corresponda ao idioma do seu projeto escolhido. Isso o torna ótimo para uma ampla gama de aplicativos, em vez de uma solução de nicho para um problema generalizado.

Você encontrará GraphQL usado em sites como GitHub, Spotify, Facebook, e muito mais. Ele deve lhe dar uma idéia de como o GraphQL é usado em sites de consulta de todas as listras. Como tal, você pode precisar recorrer a esta solução mais de uma vez durante os próximos 12 meses e além.

Gerenciador de pacotes

Linguagens de programação, estruturas e muito mais têm muitas peças móveis. Estas dependências devem ser baixadas e instaladas da maneira correta para funcionar. Insira os gerentes de pacotes. Estes o ajudam a baixar e instalar dependências específicas a partir da linha de comando. Vamos analisar algumas ferramentas com as quais você se deparará.

38. Node Package Manager (npm)

Sim, o download de instaladores tem seu lugar. Entretanto, usar um gerenciador de pacotes a partir da linha de comando é super simples na maioria dos casos. Ele também fornece uma maneira zippy de pegar e instalar arquivos da web.

O Node Package Manager (npm) é uma ferramenta de desenvolvimento web específica para JavaScript de propriedade da Microsoft que permite a instalação de pacotes de linguagem específica sob demanda:

Por exemplo, a busca de pacotes React traz mais de 155.000 resultados:

Como com uma IDE online, npm é uma ferramenta de desenvolvimento web que não recebe muito “tempo de antena”, principalmente porque é onipresente. Como tal, praticamente todo desenvolvedor web vai utilizar esta ferramenta.

Entretanto, é incrível, e agora que está sob a ala de GitHub, mais desenvolvedores usarão npm em um futuro próximo.

39. Yarn

Muito como npm e pip para Python, Yarn ajuda você a instalar pacotes relacionados ao seu projeto e suas ferramentas. A diferença aqui é que o Yarn também é uma ferramenta de gerenciamento de projeto.

A instalação é simples, e inicializar o Yarn para um novo projeto também requer um mínimo de esforço. Tornou-se uma solução robusta solução robusta de código aberto para instalar pacotes e gerenciar seu projeto ao lado.

Você usará espaços de trabalho para criar “monorepos” e múltiplas versões do seu projeto, ambas vivem na mesma repo e podem ser referenciadas cruzadas. Você pode instalar plugins para qualquer coisa que as threads não possam fazer (para os quais você deseja adicionar novos fetchers e resolvedores). Para ser mais preciso, você poderia instalar plugins, mas não há muitos, pelo menos nas listas oficiais. Em vez disso, você codificará o seu próprio se estiver desesperado pela funcionalidade. Mesmo assim, a escolha está aí para personalizar as threads de acordo com as necessidades do seu projeto.

O Yarn faz um caso único para se tornar seu principal gerente de embalagem. Para um projeto do mundo real, você pode se apoiar mais na npm, mas a Yarn entrará furtivamente em seu fluxo de trabalho de maneiras que só podem lhe beneficiar.

API e ferramentas de teste

Assegurar que as coisas funcionem é um processo muitas vezes ignorado, mas também vem com arrependimentos quando as coisas dão errado. Como tal, a fase de testes do seu projeto deve ser sólida, robusta e completa.

Diante disto, aqui estão algumas API e ferramentas de teste que você terá à disposição para seus projetos.

40. HoppScotch

Acionada pela Netlify, a HoppScotch é uma ferramenta de desenvolvimento de API de código aberto. Os desenvolvedores a chamam de “ecossistema”, o que desmente a funcionalidade sob o capô.

É uma solução sem sentido e robusta, e não para os fracos de coração. A curva de aprendizado, se você nunca usou uma ferramenta como esta, é íngreme. Quase não há direção para o uso do HoppScotch em nenhuma das páginas do aplicativo, embora isso não seja geralmente um problema, pois a ferramenta é destinada a desenvolvedores experientes de qualquer forma.

Há muitas conexões em tempo real (WebSocket, SSE, e mais), e uma implantação de GraphQL. Nós também gostamos do criador da documentação:

A tela do criador da documentação HoppScotch.

Ele trabalha com suas “coleções” HoppScotch para criar documentação sobre a mosca, o que é uma bem-vinda economia de tempo.

No geral, o HoppScotch é uma ferramenta funcional que estará muito aberta em seu navegador. É uma daquelas soluções que você sempre usará sem perceber – não podemos elogiá-lo mais do que isso!

41. Postman

O logotipo Postman.

Aviso – estamos prestes a mencionar a temida palavra “C”: colaboração. Postman é uma ferramenta de desenvolvimento web que ajuda a criar uma Interface de Programação de aplicativos (API) como uma equipe através da plataforma Postman:

Há muitos casos de uso para integrar o carteiro em seu fluxo de trabalho. Por exemplo, você pode usá-lo de forma padrão para o desenvolvimento de aplicativos, o que se traduzirá diretamente em projetos baseados na web. Você pode simular pontos finais usando servidores mock, o que vai atrair especialmente os desenvolvedores do WordPress.

Você pode até mesmo criar um sistema onboarding para ajudar os usuários de suas APIs a aprender o básico. Os projetos com alta rotatividade de usuários ou tráfego serão beneficiados com isso.

Quanto aos preços, o carteiro oferece um nível gratuito, mas você obterá o maior valor de um dos níveis premium. Você procurará pagar cerca de US$ 12-30, dependendo do seu ciclo de cobrança e do número de usuários.

42. Testing Library

O código que funciona é ideal, mas os aplicativos que funcionam são o objetivo final. A Tes ting Library faz como seu nome sugere: ela fornece um conjunto de utilitários para ajudá-lo a testar seus projetos e encorajá-lo a usar boas práticas de codificação.

A idéia é que você crie testes que representem seu uso do aplicativo. Se eles funcionarem sem problemas, as chances são boas de que seu aplicativo também funcionará. É uma ferramenta agnóstica em relação à estrutura, e não é um test runner. O objetivo central da Biblioteca de Testes é ajudar você a escrever testes que possam ser mantidos desacoplados dos detalhes de implantação.

Tudo dentro da ferramenta Testing Library centra-se em torno de seus princípios orientadores. Como tal, você não está apenas criando testes – você está aprendendo como torná-los melhores e mais valiosos.

Por causa disso, a Biblioteca de testes pode se tornar uma grande parte do seu fluxo de trabalho. Argumentaríamos que quase todas as strings de projetos poderiam se beneficiar da Testing Library, e os usuários da React quase certamente quererão implantar esta ferramenta como um padrão.

Ferramentas de colaboração

Apesar do tropo dos desenvolvedores ser anti-social, a verdade é que tecnologia e colaboração andam de mãos dadas.

Como tal, vamos reunir algumas ferramentas de colaboração que irão se encaixar em seu próximo projeto.

43. Jira

A Atlassian é uma empresa muito apreciada quando se trata de software. Somos grandes fãs de algumas das ofertas da empresa: Confluence, Trello, Sourcetree, Bitbucket, e nosso foco aqui, Jira.

É uma ferramenta de desenvolvimento para equipes que utilizam estruturas Agile – Scrum em particular, por ser tão popular. Por causa disso, você obtém uma riqueza de recursos no pacote. Por exemplo, você é capaz de usar quadros kanban para ajudar a organizar tarefas e sprints. Você também pode implementar sua técnica de estimativa, personalizada para sua metodologia e projeto.

Jira se concentra em um fluxo de trabalho repetível: planejar, rastrear, liberar e relatar. É central para várias estruturas Agile, embora você também possa criar a sua própria, dependendo do seu planejamento pré-projeto. Se você tiver que girar entre os sprints, você pode evoluir seu projeto e escalar para cima ou para baixo.

A grande notícia sobre Jira é que há um nível gratuito para começar, e preços razoáveis para os outros níveis. Dito isto, você verá que uma equipe de dez pessoas será o requisito mínimo para utilizar o Jira efetivamente. Pode ser um exagero para qualquer grupo menor.

44. Taskade

Quando se trata de ferramentas de colaboração, é raro encontrar o Taskade. Ele presta um mau serviço ao aplicativo, pois é uma ferramenta fantástica para manter uma equipe focada e focada no tema.

Se você é usuário de outras ferramentas de colaboração, como Asana ou Basecamp (mais sobre ambas mais tarde), você estará em casa aqui. As informações de que você mais precisa, tais como doses e lembretes, estão centralizadas sob o capô. Assim, você pode apresentá-las de muitas maneiras, dependendo do seu projeto.

Os tipos de visualização “Mindmap” e “Org Chart” são estelares, e cada um dá a você uma perspectiva diferente sobre as informações que você adicionou.

O aplicativo é enganoso em sua simplicidade. Além de uma maneira flexível de apresentar e gerenciar tarefas, pouco mais há a oferecer.

Trabalhar com sua equipe requer um punhado de pressionamentos de botões. Por exemplo, cada tela tem uma janela de bate-papo expansível:

Para alguns, especialmente quando comparado com outras soluções, o Taskade poderia ser visto como barebones e até mesmo subequipado. No entanto, não é o caso. O Taskade é uma forma fantástica de colaborar com uma equipe e, por causa de sua simplicidade, ele se encaixa diretamente em qualquer projeto em que você esteja trabalhando.

45. Asana

Asana é um dos nomes mais proeminentes no campo das ferramentas de colaboração. É um monstro quando se trata de agarrar um projeto e chicoteá-lo em forma com a ajuda de uma equipe. O Asana também é ótimo em adaptar-se a diferentes fluxos de trabalho. Por exemplo, é possível alternar entre listas e calendários, mas também acessar linhas de tempo também.

Há também algumas características e funcionalidades fantásticas baseadas em equipe. Os relatórios são abrangentes e, em planos superiores, você tem acesso a um painel que mostra várias análises relacionadas ao desempenho de sua equipe. Há até mesmo uma maneira de monitorar as cargas de trabalho para cada membro da equipe. Assim, o Asana ajuda você a manter a pressão no mínimo e evita que os membros da equipe se queimem.

Além disso, o nível gratuito não é uma demonstração aleijada do aplicativo completo. Você pode escalar o Asana como escalar uma equipe, e há uma boa funcionalidade aqui para ajudá-lo. Por exemplo, você é capaz de atribuir trabalho aos membros da equipe e gerenciar cada fluxo de trabalho. Você também é capaz de enviar mensagens gerais por espaço de trabalho para toda a equipe.

É uma mão antiga no gerenciamento de projetos colaborativos, mas o Asana entrega quase sempre. Você verá que uma boa parte de seus clientes e colegas de equipe também tem uma conta Asana, o que significa que a montagem dentro do aplicativo acontecerá com mais freqüência do que você pode supor.

46. Basecamp

O Basecamp é outro grande jogador no gerenciamento de projetos em equipe. É um dos antigos guardas, tendo estado por perto tanto tempo quanto o próprio WordPress. O software principal já existe há muito mais tempo, portanto, tem um pedigree e um histórico digno de nota.

No papel, nada é empolgante no Basecamp em comparação com a concorrência. Sinceramente, muitas das outros aplicativos colaborativas alcançaram o que a Basecamp oferece. Não é a história toda, no entanto.

Sim, você pode criar tarefas e listas de tarefas, atribuí-las aos membros da equipe e trabalhar com tudo em uma base de projeto. As características assassinas do Basecamp, no entanto, são a infraestrutura e o projeto.

Há uma abordagem simples para utilizar o Basecamp: criar um projeto, desenvolver sua lista de tarefas ou cronograma e atribuir as tarefas aos colegas de equipe. Cada projeto tem um monte de aspectos autocontidos que o ajudam a passar um projeto para além da linha:

Os elementos que compõem um projeto do Basecamp.

Como dissemos, não há nada de inovador aqui, mas esse é o ponto. Basecamp é um sistema de gerenciamento de projetos confiável, sem muitos sinos e apitos. Como tal, você vai continuar voltando a ele porque é confiável e extensível com base em suas necessidades.

47. Livecycle

O Livecycle é uma ferramenta poderosa projetada especificamente para colaboração de equipes de desenvolvimento. O Livecycle utiliza o poder dos “ambientes de visualização” que se tornaram uma técnica comum usada por equipes de desenvolvimento para criar pré-visualizações temporárias e compartilháveis de novas alterações ou recursos em uma solicitação de pull de desenvolvedor.

Os ambientes de visualização permitem que os desenvolvedores compartilhem uma captura de tela da versão mais recente sem precisar mesclar as alterações no ambiente de teste ou produção.

O Livecycle adiciona uma camada de colaboração semelhante ao Figma a esses ambientes de visualização para que todos na equipe possam deixar feedback visual no contexto.

Ao gerenciar o feedback da revisão dessa maneira, o Livecycle torna o processo de revisão mais curto, obtém feedback de qualidade superior dos desenvolvedores e permite que as equipes enviem código para produção mais rapidamente. Altamente recomendado para qualquer equipe de desenvolvimento que deseja impactar seus fluxos de trabalho de revisão e experiência geral de desenvolvedor.

Executadores de tarefas

Trabalhar em tarefas pequenas dentro de um projeto de desenvolvimento web apresenta um problema. Elas são necessárias para torná-lo mais eficiente e produtivo. Você tem que gastar tempo e energia para colocar estas micro-tarefas na linha do lado oposto.

Para ajudar, você precisará de um corredor de tarefas. Aqui estão alguns de nossos favoritos.

48. Grunt

Grunt é um corredor de tarefas específico para JavaScript que procura automatizar algumas das tarefas mundanas e repetitivas que você vai encontrar diariamente. Considere tarefas que você pode tipicamente considerar comuns: cunhagem, minificação, compilação e muitas outras.

Grunt lida com eles para você através de um arquivo de configuração baseado no JSON (chamado de “Gruntfile”). Aqui está um exemplo:

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};

Se você frequentemente encontra seus projetos perdendo tempo através de tarefas de rotina, o Grunt provavelmente se tornará parte de sua caixa de ferramentas de desenvolvimento web como já é para WordPress, Bootstrap, e muitos outros.

49. Gulp

Quando você compara os corredores de tarefas, muitas vezes é um tiroteio entre Gulp e Grunt. Gulp é um kit de ferramentas baseado em JavaScript para automatizar seu fluxo de trabalho e aumentar sua eficiência.

Você usará arquivos e “fluxos” dedicados para agir sobre seus bens e códigos antes de serem escritos em disco. Cada tarefa que você criar é uma função “assíncrona”, e você pode defini-la como privada ou pública. A diferença é uma das permissões: as tarefas privadas não podem ser executadas pelo usuário final e são projetadas para trabalhar com outras funções.

Por falar nisso, você pode usar as funções de série() e paralela() para criar tarefas. Isso significa que você pode pegar pequenas tarefas, fazê-las uma engrenagem em um sistema mais extenso e depois aninhá-las.

Além disso, você também é capaz de estender a funcionalidade do Gulp através de plugins criados pela comunidade:

Pode ser uma generalização, mas tanto o Gulp quanto o Grunt são bons em coisas diferentes. Gulp é sólido quando se trata de trabalhar com ativos que podem fazer parte de um conjunto mais extenso de instruções. Por causa disso, você vai querer escolher o executor de tarefas adequado para cada projeto.

Ferramentas de contêinerização

Aqui, nós vamos dizer que se você não estiver usando alguma forma de contentorização ou uma ferramenta de máquina virtual, seu progresso como desenvolvedor web sofrerá.

É claro que isto não é necessariamente verdade para todos, mas há muitos benefícios em utilizar um ambiente de desenvolvimento baseado em contêineres. Aqui estão algumas soluções de escolha.

50. Docker

Para muitos, o Docker é o ambiente de desenvolvimento baseado em contêineres de escolha. A plataforma de código aberto não tem tudo a ver com contêineres, mas esta é uma razão frequentemente mencionada para utilizá-la.

No front-end, é um processo simples: clique em um botão e obtenha um ambiente virtual de desenvolvimento de caixas de areia. É claro, qualquer coisa que pareça simples na parte de cima está bem embaixo. Docker combina uma Interface de Usuário (IU), CLI e API com uma provisão de segurança para colocar uma rápida implantação em suas mãos.

Para muitos desenvolvedores, o Docker será fundamental para a criação de novos aplicativos. Os desenvolvedores web – em particular WordPress devs – têm uma escolha de ferramentas para o trabalho. Local by Flywheel e DevKinsta são plataformas líderes.

O Docker alimenta a aplicação DevKinsta. — O Docker alimenta o aplicativo DevKinsta.

Nota: Lançamos recentemente DevKinsta – uma ferramenta de desenvolvimento local para ajudar você a girar novos sites WordPress. Você também pode implantar os sites em sua conta Kinsta com um único clique.

O Docker também se integra com muitas ferramentas – e várias delas já estarão em seu fluxo de trabalho. Apps como GitHub, VS Code e outros podem se conectar com o Docker e oferecer uma integração suave.

De modo geral, a Docker poderia retomar toda uma série de artigos sobre o que ela contém. Apesar disso, nada disso pode ser necessário. A probabilidade é que você esteja usando o Docker diariamente, e você já sabe como é fantástico!

51. LXD

Em termos simples, LXD é um gerente de contêineres para distros Linux. Ele é baseado em imagens e vem com várias imagens pré-construídas para Linux. O uso de um LXD lhe dá paz de espírito que você estará desenvolvendo no mesmo sistema operacional padrão do usuário final.

Foi fundada pelo Ubuntu developers Canonical, e, é claro, mantém uma estrutura de código aberto. Você é capaz de criar ambientes seguros usando containers sem privilégios, controlar o uso de recursos usando muitos recursos e até mesmo gerenciar redes.

O LXD também é escalável, o que significa que você pode executar milhares de nós de computação ou manter as coisas simples. Para aplicativos baseadas em nuvem, o LXD se integra com OpenNebula – este último tem drivers oficiais para gerenciar as instâncias do LXD.

Por padrão, muitas ferramentas de contentorização utilizam o Ubuntu como ambiente virtual padrão. Mesmo assim, o LXD é otimizado para executar a distro. Se não é algo que você já tentou antes, vale a pena o tempo para correr através de um espaço de trabalho de teste. Você pode descobrir que ele se adapta melhor a fluxos de trabalho específicos ou a projetos de clientes do que a concorrência.

Ferramentas de otimização de imagem

Os ativos (ou mídia, ou qualquer que seja seu nome preferido) são abundantes em toda a web. Há culturas online inteiras dedicadas e baseadas em imagens. Como tal, fazer com que seus projetos de desenvolvimento web tenham bom desempenho, apesar do número de imagens utilizadas, é fundamental.

Aqui estão algumas das mais populares e excelentes ferramentas de otimização d e imagem disponíveis.

52. ShortPixel

Há muitos plugins de otimização de imagem disponíveis, mas o ShortPixel tem um algoritmo subjetivamente robusto. Ela é capaz de reduzir o tamanho dos arquivos de imagem sem afetar a qualidade. Se estivermos sendo picuinhas, diremos que como a configuração padrão é a maior compressão disponível, não há alternativa se sua imagem não for suficientemente comprimida. No entanto, isto não é uma crítica importante.

ShortPixel tem toneladas de funcionalidade sob o capô. Há três níveis de compressão, um ótimo otimizador de PDF e até mesmo um compressor GIF. Este último é algo que você não encontra em muitas outras ferramentas, portanto é um acréscimo bem-vindo à linha de produtos.

Toda a interface é acessível, também: Você arrasta e solta imagens no uploader e espera que o ShortPixel faça sua mágica. Uma vez processadas suas imagens, você pode baixá-las em lote ou selecionar imagens individuais para download:

As ferramentas ShortPixel API também são robustas. Você encontrará APIs separadas para reduzir imagens online e offline, bibliotecas de clientes PHP e .NET abrangentes, um mecanismo adaptativo baseado em JavaScript, e muito mais.

Sugerimos que o ShortPixel é uma ferramenta para desenvolvedores, pois é ótimo para conectar seu site ou aplicativo. Diríamos também que ele ultrapassaria seu vício em TinyPNG em um piscar de olhos, especialmente se você quisesse usá-lo como parte de um fluxo de trabalho maior.

53. TinyPNG

Chegou a hora da ferramenta de otimização de imagem favorita de todos – TinyPNG. Você também pode incluir o TinyJPG nesta entrada, embora ambas as ferramentas trabalhem com os mesmos formatos de imagem.

Você verá que o TinyPNG não mudou muito ao longo dos anos. É ainda uma ferramenta simples de arrastar e soltar para otimizar suas imagens. Não há sinos ou apitos, e não há um conjunto extenso de formatos de arquivo. Ainda assim, o que o TinyPNG oferece é uma usabilidade suprema e um monte de integrações com outras ferramentas.

Por exemplo, há um plugin Photoshop e – para plugins mais finos – um API funcional para desenvolvedores. Até mesmo usuários Python podem entrar em ação, pois a API também suporta esta linguagem. Houve vários plugins criados usando a API para muitas ferramentas de terceiros também.

Não estamos sugerindo que o TinyPNG tenha o monopólio do mercado de otimização de imagem, mas muitas vezes é a primeira escolha para muitos usuários. Pegar uma imagem e deixá-la cair no carregador leva segundos, e quando você obtém uma representação perfeita de 99,9% de sua imagem de volta, é fácil de confiar.

Ferramentas de teste do site

Falamos anteriormente sobre testar seu API e o código central do site, embora isto falhe o desempenho do seu site. Aqui estão algumas ferramentas que adoramos e que também poderiam ajudá-lo a analisar o desempenho de seus sites.

54. Responsively

Se você já foi sobrecarregado pelo número de consultas à mídia que precisa realizar e aperfeiçoar em seu aplicativo, confira Responsively. É uma ferramenta open source front-end para ajudá-lo a desenvolver sites de acordo com os vários viewports de seus dispositivos escolhidos.

Visualizando diferentes dispositivos em Responsively.

O ótimo disto é como você pode comparar os layouts lado a lado. Isso lhe dá uma sólida chance de aumentar sua consistência entre os dispositivos. Cada dispositivo é preciso, e há muitos para escolher, o que é excelente se seu site tiver como alvo dispositivos específicos.

Você também pode adicionar as extensões do navegador dedicado para Mozilla Firefox, Microsoft Edge e Google Chrome para enviar páginas para o navegador Responsively. A partir daqui, você pode abrir as ferramentas de desenvolvimento embutidas e começar a trabalhar.

Há toneladas de outras características, tais como funcionalidade de captura de tela, suporte de carregamento (hot-loading), e mais para ajudá-lo a se desenvolver. É difícil argumentar com o slogan que Responsively é o “navegador do desenvolvedor web”. Ela pode acabar se tornando um componente essencial de seu fluxo de trabalho.

55. Google Lighthouse

Para muitos, a PageSpeed Insights do Google é uma ferramenta valiosa para descobrir como um site funciona e onde você pode aumentar a velocidade de carregamento.

Dito isto, alguns dos softwares debaixo do capô são mais interessantes de se examinar em profundidade. Ele também poderia ser mais adequado às suas necessidades. O Google Lighthouse pode ser executado contra qualquer página web, e fornece auditorias e relatórios de desempenho de páginas, SEO, aplicativos Web Progressivas (PWA), etc.

As principais formas de executar o Farol Google são a partir da linha de comando, usando as DevTools do Chrome, ou como um módulo de Nodo. Se você usar a interface PageSpeed Insights, o Lighthouse gera algumas das pontuações e fornece mais informações.

Vale notar que na superfície, o Google Lighthouse e PageSpeed Insights parecem semelhantes. Mas o PageSpeed Insights utiliza dados baseados em laboratório combinados com dados de usuários do mundo real. A análise do Lighthouse’suse desconsidera os dados dos usuários e mede mais elementos do seu site.

Em nossa opinião, vale a pena executar tanto PageSpeed Insights quanto Lighthouse, especialmente se o objetivo do seu cliente é chegar ao topo das Páginas de Resultados de Motores de Busca (SERPs). Em qualquer caso, é uma ferramenta sólida a ter à mão, e poderia até suplantar PageSpeed Insights como sua ferramenta de desempenho de escolha.

56. Cypress

Os testes de ponta a ponta não são uma experiência feliz para muitos desenvolvedores. O Cypress é uma solução simples que vai contra a tendência de testes de ponta a ponta e produz algo excepcional.

Enquanto a maioria das ferramentas de teste de ponta a ponta são baseadas em Selenium, a Cypress vai em uma direção diferente. Isso significa que os problemas que os usuários encontram com testadores baseados em Selênio não estão presentes aqui. Na verdade, os desenvolvedores querem fazer da instalação, da escrita e da execução de testes uma brisa.

Para isso, eles construíram a arquitetura do zero e se concentraram em testes de ponta a ponta, excluindo outras formas. Para ajudar no desempenho, o Cypress roda no mesmo loop de execução do seu programa, em vez de executar comandos remotos através da rede.

Como o código de teste é executado no navegador, não há nenhum condutor ou ligação de idioma a considerar. Mesmo assim, você é capaz de compilar até JavaScript antes de executar os testes.

Se você é um engenheiro de Garantia de Qualidade (QA) ou um desenvolvedor que deseja que seus testes de ponta a ponta tenham acesso nativo ao seu trabalho, a Cypress deve comandar sua atenção. A melhor parte é que também há um nível gratuito com todas as funcionalidades!

57. Stack Overflow e motores de busca

Por um momento, permita-nos estender os limites do que é considerado uma ferramenta de desenvolvimento web. O Stack Overflow é bem conhecido por qualquer pessoa que tenha até mesmo um conhecimento passageiro do desenvolvimento da web:

É um site de perguntas e respostas focado em programação, e faz parte da rede Stack Exchange que cobre todos os tipos de outros assuntos:

Um dos muitos sites de nicho na rede Stack Exchange.

É conhecido como um recurso para milhares de desenvolvedores, e apesar de alguma controvérsia sobre sua comunidade, o tráfego ainda é substancial. Ousaríamos dizer que Stack, junto com seu mecanismo de busca de escolha, representa uma ferramenta flexível de desenvolvimento web para aprender e melhorar suas habilidades.

Por exemplo, é provável que você se dirija para o Stack Overflow quando encontrar um bloqueio de desenvolvimento relacionado ao código. Da mesma forma, quando surge um erro que você não sabe como resolver, colá-lo em um mecanismo de busca é a maneira mais rápida de encontrar a resposta que você precisa.

Considerando que 90% dos usuários pesquisados vão ao Stack Overflow para resolver problemas, é provável que todos usem a ferramenta. Entretanto, para iniciantes – ou mesmo se você não conseguir articular seu problema – os mecanismos de busca serão, sem dúvida, um pouco mais amigáveis.

Referências de desenvolvimento web

Se você é um desenvolvedor que subscreve o ethos “RTFM”, não precisará de nenhum convencimento sobre as poucas entradas seguintes. Em contraste, se você gosta de entrar em um problema e resolvê-lo, saiba que já houve inúmeros desenvolvedores antes de você que provavelmente encontraram uma resposta.

Diante disso, observe as poucas ferramentas de desenvolvimento web a seguir, todas baseadas em materiais de referência web.

58. MDN Web Docs

Nos primeiros tempos da rede, havia um site chamado Webmonkey dirigido pela Lycos e que tinha como objetivo ensinar o desenvolvimento e a programação da web a novos usuários. O espírito desse site vive no MDN Web Docs da Mozilla. O Webmoney fechou em 2004, e o MDN Web Docs chegou em 2005, de modo que há um encaixe natural entre os dois.

É uma coleção de recursos para ajudar a ensinar programação para a web em alguns casos, e produtos específicos da Mozilla em outros. O conteúdo é dividido em duas grandes categorias: tecnologias e guias de referência. São mostrados vários tutoriais baseados em sua capacidade e experiência existente, um guia de referência dedicado, e alguns recursos adicionais para o primeiro.

Os guias são todos relacionados a nichos e indústrias específicas dentro da indústria de desenvolvimento. Por exemplo, a referência Web Development funciona como uma página “cornerstone” para guias adicionais de HTML, CSS e JavaScript.

Há também uma ampla análise de várias indústrias, como o desenvolvimento de jogos e o que é necessário para começar no campo:

Guia do MDN Web Doc sobre desenvolvimento de jogos.

MDN Web Docs é leitura essencial para um desenvolvedor web iniciante, e também oferece valor mais do que suficiente para um especialista. Se existe algum site que merece um bookmark do navegador, é este!

59. DevDocs — API Documentation Browser

No passado, você guardava todos os manuais dos produtos que comprava em uma gaveta ou armário empoeirado. Como a vida se tornou mais digital, esses manuais em papel deram lugar a downloads em PDF a partir do site de cada fabricante.

Através disso, agora temos sites que coletam as versões digitais dos manuais em bibliotecas de curadoria. Ele permite encontrar o que você precisa a partir de um repositório. Como tal, é lógico que também existiria um para tópicos de desenvolvimento web.

Em resumo, DevDocs é uma biblioteca de documentação para APIs, e é algo que pensamos que será valioso para quase todos os desenvolvedores:

Antes de olhar através da biblioteca, você vai querer habilitar sua documentação API desejada. Você o faz a partir da tela Preferências:

Uma vez feito, você poderá acessar a documentação relevante a partir de um menu em árvore dedicado:

É uma solução simples para um problema ineficiente, pois você tem várias referências API em um só lugar. DevDocs é outro site que merece um bookmark, e é uma pena que não haja um aplicativo desktop disponível para uma referência ainda mais rápida.

60. CSS-Tricks

Chris Coyier é um nome que muitos desenvolvedores web conhecerão. Apostamos que você já conhece o site que ele fundou – CSS-Tricks. Como o nome sugere, é um site dedicado à codificação de front-end, especificamente CSS, e como ficar melhor.

Como observa a página Sobre, durante os primeiros anos, o CSS foi o tópico predominante. Desde então, no entanto, HTML, JavaScript, WordPress e muito mais se tornaram igualmente importantes e freqüentemente discutidos. O resultado é um site focado no desenvolvimento de front-end, com uma grande quantidade de artigos, vídeos e guias para inspirá-lo.

Um elemento simples mas valioso é o CSS Almanac, que delineia os seletores e as propriedades dentro do CSS. É uma grande fonte de referência se você precisar se atualizar com certos aspectos da linguagem.

Embora existam aspectos de referência do CSS-Tricks, ele não é um recurso de referência por si só. Mesmo assim, deve ser um assombro regular para você, seja através de um feed RSS ou outra solução. O conteúdo é de alta qualidade e pode desafiá-lo de maneiras que você não havia pensado antes. No mínimo, assine o boletim informativo e espere que o CSS-Tricks chegue à sua caixa de entrada.

61. DEV Community

Imagine que você poderia pegar as partes excelentes das mídias sociais, desenvolvimento web e Stack Overflow, e depois criar um site que as funda. A Comunidade DEV poderia ser o resultado.

É uma plataforma de blogging, mas também uma maneira de encontrar as respostas para as perguntas sobre desenvolvimento. Você seleciona tags e pessoas para seguir, e seu newsfeed se torna uma linha do tempo automatizada e curada de artigos e insights:

A linha do tempo da comunidade DEV para a tag JavaScript.

É um ponto justo para sugerir que esta é uma informação que você pode encontrar em qualquer lugar – se você estiver disposto a encontrá-la. O ponto positivo da Comunidade DEV é que ela está aqui, e é uma coletânea dirigida de assuntos de desenvolvimento. Pense nisso como uma trilha de convenção de desenvolvedores, em vez de ouvir demais e se meter em uma conversa relacionada na parada do ônibus.

É outro site que se sairá bem dentro do seu feed RSS, ou como uma digestão em sua caixa de entrada. Como tal, é também um recurso “adormecido” no sentido de que você se dirigirá aqui muitas vezes sem perceber.

62. Can I use…

Pode-se argumentar que Jeeves iniciou a tendência de fazer perguntas na Internet para encontrar informações. Ele foi substituído rapidamente por vários algoritmos de busca, embora a busca baseada em perguntas ainda seja uma maneira confiável de encontrar o que você precisa.

Can I use.. é a resposta do desenvolvedor do front-end a “Existe um Ask Jeeves para CSS? ”

A premissa é simples: você digita o seletor CSS ou propriedade no campo de busca, e o banco de dados retorna se você pode utilizá-lo para criar sites. Você também não está restrito ao CSS. JavaScript e HTML também são suportados:

Procurando por um elemento HTML em Can I use…

É um banco de dados de linguagens front-end, por isso não vai procurar retornar resultados para PHP, Python, ou outras linguagens do lado do servidor. Mesmo assim, Can I use… é uma ferramenta imensa e valiosa que o ajudará quando se trata de acessibilidade e design para múltiplos dispositivos.

É uma simples proposta para puxar um elemento específico e ver rapidamente se seu navegador de destino o suporta:

A tabela de suporte do navegador em Can I use…

Se você olhar mais de perto, você também pode encontrar estatísticas como a data de liberação do elemento e uma porcentagem de uso:

Informações para um elemento específico em Can I use…

De modo geral, Can I use… talvez não tenha uso regular. Em certas etapas de um projeto, porém, ele estará aberto quase o tempo todo. Uma vez que você tenha descoberto o que seus navegadores alvo vão suportar, Can I use… embaralha de volta para seus favoritos e espera quando for necessário. É um serviço útil que pode ser um “portador de água” quando se trata do seu código front-end.

Resumo

O tempo e o dinheiro são curtos, e há uma certa lógica para optar pelas mesmas ferramentas antigas de desenvolvimento web que você sempre usou. Entretanto, fazer uma escolha criteriosa sobre o que você precisa para um projeto lhe poupará tempo, custo e produtividade.

Neste artigo, abordamos 62 ferramentas incríveis de desenvolvimento web que você pode usar para dar a você e sua equipe uma etapa acima. Talvez você já esteja fazendo isso. Se as várias pesquisas estiverem corretas, mais desenvolvedores do que nunca estão se voltando para GitHub, TypeScript, várias pilhas de serviços web, e uma das muitas estruturas de JavaScript para fazer com que os projetos sejam aprovados.

Não importa quais ferramentas de desenvolvimento web você escolha usar, os clientes Kinsta têm acesso a ainda mais através da plataforma MyKinsta. Isto inclui um impulso rápido e fácil para sua otimização geral, usando o recurso de minificação de código que está embutido diretamente no painel MyKinsta, permitindo aos clientes ativar a minificação automática de CSS e JavaScript com um simples clique.

Você tem uma ferramenta de desenvolvimento web para recomendar que os desenvolvedores usem em um futuro próximo? Informe-nos suas idéias na seção de comentários abaixo!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.

Como a Express Legal Funding Aumentou o Tráfego Orgânico em 50.000% e Simplificou o Gerenciamento do Site

Como a Torro Media Alcança Consistentemente Pontuações do Google PageSpeed Acima de 90 em Todos os Sites de seus Clientes