Mais de 100 ferramentas e recursos impressionantes de desenvolvimento da Web

A melhor e pior coisa de ser um desenvolvedor web é que a web está mudando constantemente. Embora isso seja empolgante, também significa que os desenvolvedores da web devem sempre ser proativos no aprendizado de novas técnicas ou linguagens de programação, adaptando-se às mudanças e estar dispostos e ansiosos para aceitar novos desafios. Isso pode incluir tarefas como adaptar estruturas existentes para atender aos requisitos de negócios, testar um site para identificar problemas técnicos ou otimizar e dimensionar um site para melhor desempenho com a infraestrutura de back-end. Nós pensamos em compilar uma lista abrangente de ferramentas e recursos de desenvolvimento web isso pode ajudá-lo a ser mais produtivo, manter-se informado e se tornar um desenvolvedor melhor.

Ferramentas e recursos de desenvolvimento da Web

Muitas dessas ferramentas de desenvolvimento da web abaixo são aquelas que usamos no KeyCDN diariamente. Não podemos incluir tudo, mas aqui estão alguns dos nossos favoritos e outros amplamente utilizados. Felizmente, você encontra uma nova ferramenta ou recurso que o ira ajudá-lo em seu fluxo de trabalho de desenvolvimento. As ferramentas e recursos abaixo estão listados em nenhuma ordem específica.

Bibliotecas JavaScript

O JavaScript é uma das linguagens de programação mais populares da web. UMA Biblioteca JavaScript é uma biblioteca de JavaScript pré-escrito que permite um acesso mais fácil ao longo do desenvolvimento do seu site ou aplicativo. Por exemplo, você pode incluir uma cópia da biblioteca jQuery hospedada do Google usando o seguinte snippet.

  • jQuery: A fast, small, and feature-rich JavaScript library. ´´´ ´´´
  • BackBoneJS: Dê ao seu aplicativo JS uma espinha dorsal com modelos, visualizações, coleções e eventos.
  • D3.js:Uma biblioteca JavaScript para manipular documentos com base em dados.
  • React: Biblioteca JavaScript do Facebook desenvolvida para criar interfaces de usuário.
  • jQuery UI: Um conjunto com curadoria de interações, efeitos, widgets e temas da interface do usuário.
  • jQuery Mobile: Sistema de interface de usuário baseado em HTML5 projetado para criar sites responsivos.
  • Underscore.js: Ajudantes de programação funcional sem estender nenhum objeto embutido.
  • Moment.js: Analise, valide, manipule e exiba datas em JavaScript.
  • Lodash: Uma moderna biblioteca de utilitários que oferece modularidade, desempenho e extras.
  • Vue.js: Uma estrutura JavaScript de código aberto usada para criar interfaces de usuário.

Estruturas front-end

Frontend frameworks geralmente consiste em um pacote composto por outros arquivos e pastas, como HTML, CSS, JavasScript etc. Existem também muitas estruturas independentes por aí. Somos um grande fã do Boostrap e o principal site do KeyCDN é construído nele. Uma estrutura sólida pode ser uma ferramenta essencial para desenvolvedores de front-end.

  • Bootstrap: Estrutura HTML, CSS e JS para o desenvolvimento de primeiros projetos móveis responsivos na web.
  • Foundation: Família de estruturas de front-end responsivas que facilitam o design de sites, aplicativos e e-mails responsivos e bonitos que ficam incríveis em qualquer dispositivo.
  • Semantic UI: Estrutura de desenvolvimento que ajuda a criar layouts bonitos e responsivos usando HTML amigável ao ser humano.
  • uikit: Uma estrutura de front-end leve e modular para o desenvolvimento de interfaces da web rápidas e poderosas.

Estrutura de Aplicativos da WEB

A estrutura de aplicativos da web é uma estrutura de software projetada para ajudar e aliviar parte da dor de cabeça envolvida no desenvolvimento de aplicativos e serviços da web.

  • Ruby: Ruby on Rails é uma estrutura de aplicativo da Web que inclui tudo o necessário para criar aplicativos da Web suportados pelo banco de dados, com o padrão MVC.
  • AngularJS: Permite estender o vocabulário HTML para seu aplicativo da web. O AngularJS é uma estrutura, embora seja muito mais leve e às vezes referida como uma biblioteca.
  • Ember.js: Uma estrutura para criar aplicativos da web ambiciosos.
  • Express: Estrutura da web rápida e minimalista para Node.js.
  • Meteor: Plataforma de aplicativos JavaScript de pilha completa que reúne todas as peças necessárias para criar aplicativos modernos da Web e móveis, com uma única base de código JavaScript.
  • Django: Estrutura da Web Python de alto nível que incentiva o desenvolvimento rápido e o design limpo e pragmático.
  • ASP.net: Estrutura de aplicativo da Web gratuita e totalmente suportada que ajuda a criar soluções da Web baseadas em padrões.
  • Laravel: Uma estrutura de aplicativo da web PHP de código aberto e gratuita para criar aplicativos da Web no padrão MVC.
  • Zend Framework 2: Uma estrutura de código aberto para o desenvolvimento de aplicativos e serviços da Web usando PHP.
  • Phalcon: Uma estrutura PHP de pilha completa fornecida como uma extensão C.
  • Symfony: Um conjunto de componentes PHP reutilizáveis e uma estrutura de aplicativo da web.
  • CakePHP: Uma estrutura popular do PHP que torna a criação de aplicativos da Web mais simples, rápida e requer menos código.
  • Flask: Um microframework para Python baseado em Werkzeug e Jinja 2.
  • CodeIgniter: Estrutura PHP poderosa e leve criada para desenvolvedores que precisam de um kit de ferramentas simples e elegante para criar aplicativos da Web completos.

Tarefas - Pacotes

Tasks runners são tudo sobre automatizar seu fluxo de trabalho. Por exemplo, você pode criar uma tarefa e automatizar a minificação do JavaScript. Em seguida, crie e combine tarefas para acelerar o tempo de desenvolvimento. Gerentes de pacotes (package managers) acompanhe todos os pacotes que você usa e verifique se eles estão atualizados e a versão específica necessária.

  • Grunt: Executor de tarefas JavaScript tudo sobre automação.
  • Gulp: Mantém as coisas simples e torna tarefas complexas gerenciáveis, automatizando e aprimorando seu fluxo de trabalho.
  • npm: Gerenciador de pacotes para JavaScript.
  • Bower: Um gerente de pacotes da web. Gerencie componentes que contenham HTML, CSS, JavaScript, fontes ou até arquivos de imagem.
  • webpack: Um empacotador de módulos para aplicações JavaScript modernas.

Linguagem de Programação

Por trás de todas as ferramentas de desenvolvimento da web há uma linguagem programming language. A linguagem de programação é uma linguagem formal construída projetada para se comunicar com um computador e criar programas nos quais você pode controlar o comportamento. E sim, percebemos que alguns deles nem sempre são referidos como linguagem.

  • PHP: Linguagem popular de script de uso geral, especialmente adequada ao desenvolvimento da web.
  • NodeJS: Ambiente JavaScript do lado do servidor de E / S orientado a eventos, baseado no V8.
  • JavaScript: Programming language of HTML and the web.
  • HTML5: Linguagem de marcação, a versão mais recente do HTML e XHTML, Markup language.
  • Python: Linguagem de programação que permite trabalhar rapidamente e integrar sistemas de maneira mais eficaz.
  • Ruby: Uma linguagem de programação dinâmica e de código aberto, com foco na simplicidade e produtividade.
  • Scala: Scala é uma linguagem orientada a objetos de raça pura, permitindo uma migração gradual e fácil para um estilo mais funcional.
  • CSS3: Versão mais recente das folhas de estilo em cascata usadas no desenvolvimento de front-end de sites e aplicativos.
  • SQL: Suporta a linguagem de consulta estruturada usada com bancos de dados relacionais.
  • Golang: Linguagem de programação de código aberto que facilita a criação de software simples, confiável e eficiente.
  • Rust: Linguagem de programação de sistemas que roda incrivelmente rápido, evita falhas de seg e garante a segurança da multi-tarefas.
  • Elixir: Linguagem dinâmica e funcional projetada para criar aplicações escaláveis e sustentáveis.
  • TypeScript: Linguagem de programação de código aberto que é um superconjunto de JavaScript que compila para o JavaScript simples.

Banco de Dados

database é uma coleção de informações armazenadas para que possam ser recuperadas, gerenciadas e atualizadas.

  • MySQL: Um dos bancos de dados de código aberto mais populares do mundo.
  • MariaDB: Feito pelos desenvolvedores originais do MySQL. O MariaDB também está se tornando muito popular como um servidor de banco de dados de código aberto.
  • MongoDB: Banco de dados da próxima geração que permite criar aplicativos nunca antes possível.
  • Redis: Um armazenamento de estrutura de dados em memória de código aberto, usado como banco de dados, cache e corretor de mensagens.
  • PostgreSQL: Um poderoso sistema de banco de dados objeto-relacional de código aberto.

Pré-processador CSS

CSS preprocessor é basicamente uma linguagem de script que estende o CSS e o compila no CSS regular.

  • Sass: Uma extensão CSS de nível profissional muito madura, estável e poderosa.
  • Less: Como uma extensão do CSS que também é compatível com o CSS. Isso torna o aprendizado menos fácil e, em caso de dúvida, permite que você volte ao vanilla CSS.
  • Stylus: Um novo idioma, fornecendo uma maneira eficiente, dinâmica e expressiva de gerar CSS. Suportando uma sintaxe recuada e um estilo CSS regular.

If you are just getting started with a CSS preprocessor you might want to make the transition easier by first using a third party compiler, such as the ones below.

Compiler Sass Language Less Language Mac Windows
CodeKit X X X -
Koala X X X X
Hammer - - - X
LiveReload X X X X
Prepros X X X X
Scout X - X X
Crunch - X X X

Editores de texto / editores de código

Esteja você tomando notas, codificando ou anotando, um bom editor de texto faz parte do nosso dia a dia!

  • Atom: Um editor de texto moderno, acessível e hackable até o núcleo. Um dos nossos favoritos!
  • Sublime Text: Um sofisticado editor de texto para código, marcação e prosa com ótimo desempenho.
  • Notepad++: Um editor de código-fonte gratuito que suporta várias linguagens de programação em execução no ambiente MS Windows.
  • Visual Studio Code: Edição de código redefinida e otimizada para criar e depurar aplicativos modernos da Web e da nuvem.
  • TextMate: Um editor de código e marcação para OS X .
  • Coda 2: Um editor de texto rápido, limpo e poderoso para o OS X
  • WebStorm: IDE leve e poderoso, perfeitamente equipado para desenvolvimento complexo do lado do cliente e desenvolvimento do servidor com o Node.js.

  • Vim: Um editor de texto altamente configurável criado para permitir a edição eficiente de texto.

  • Brackets: Um editor de texto moderno leve e poderoso; escrito em JavaScript, HTML e CSS .
  • Emacs: Um editor de texto extensível e personalizável com funções internas para ajudar em modificações rápidas de texto e código.
  • Dreamweaver:Não é o seu editor de código típico, no entanto, o Dreamweaver pode ser usado para escrever código e criar sites através de uma interface visual.
  • SpaceMacs: Um design de editor de texto para operar nos modos de editor Emacs e Vim.

Editores de Markdown

Markdown é uma linguagem de marcação em texto sem formatação, usando uma sintaxe fácil que pode ser convertida em HTML em tempo real. Isso é diferente de um editor WYSIWYG. Editores de Markdown às vezes são chamados de WYSIWYG entre eles e simplesmente escrevendo código.

  • StackEdit: Um editor gratuito de marcação online rica.
  • Dillinger: Um editor de Markdown habilitado para nuvem on-line, HTML5 e cheio de palavras da moda.
  • Mou: Editor de Markdown para desenvolvedores no Mac OS X .
  • Texts: Um editor rico para texto sem formatação. Windows e Mac OS X .

Alguns dos editores de texto mencionados acima também suportam a marcação. Por exemplo, existe um pacote de visualização de marcação para Atom. markdown preview atom.

Ícones

Quase todos os desenvolvedores da web, especialmente os desenvolvedores de front-end, em algum momento ou outra necessidade ícones para o projeto deles. Abaixo estão alguns ótimos recursos para ícones de alta qualidade gratuitos e pagos.

  • Font Awesome: Ícones vetoriais escaláveis que podem ser personalizados instantaneamente - tamanho, cor, sombra projetada e qualquer coisa que possa ser feita com o poder do CSS.
  • IconMonster: Uma fonte livre, de alta qualidade, monstruosamente grande e em crescimento contínuo de ícones simples. Um dos nossos favoritos!
  • Icons8: Uma extensa lista de ícones altamente personalizáveis criados por uma única equipe de design.
  • IconFinder: O Iconfinder fornece ícones bonitos para milhões de designers e desenvolvedores.
  • Fontello: Ferramenta para criar fontes personalizadas com ícones.
  • Noun Project: Mais de um milhão de ícones com curadoria. Disponível nas versões gratuita e paga para maior personalização.

Git clients / serviços Git

O Git é um sistema de gerenciamento de código fonte para desenvolvimento de software e web conhecido pelo controle de revisão distribuído. Ao trabalhar com equipes, usando a cliente git empurrar as alterações de código do dev para a produção é uma maneira de manter o caos e garantir que as coisas sejam testadas para que não quebrem seu aplicativo ou site ao vivo.

  • SourceTree: Um cliente Git & Mercurial gratuito para Windows ou Mac. Atlassian também faz um cliente Git da equipe bem legal chamado Bitbucket.
  • GitKraken (Beta): Um cliente Git de plataforma cruzada gratuito, intuitivo, rápido e bonito.
  • Tower 2: Controle de versão com o Git - facilitado. Em um aplicativo bonito, eficiente e poderoso.
  • GitHub Client: Uma maneira perfeita de contribuir para projetos no GitHub e no GitHub Enterprise.
  • Gogs: Um serviço Git auto-hospedado e indolor, baseado no idioma Go.
  • GitLab: Hospede seus projetos de software público e privado gratuitamente.

Servidores da Web

O servidor da web que você acaba usando geralmente depende de uma combinação de preferência pessoal, funcionalidade ou infraestrutura preexistente. Nginx e Apache são os dois servidores da web mais amplamente utilizados, no entanto, existem outras opções.

  • Nginx: Um servidor web de código aberto e alto desempenho. Lida bem com o conteúdo estático e é leve.

  • Apache: Atualmente, alimenta quase 50% de todos os sites. Possui uma comunidade maior ao redor e uma grande seleção de módulos.

  • IIS: Um servidor da web extensível criado pela Microsoft. Oferece excelente segurança e suporte corporativo, portanto, não é de código aberto.

  • Caddy: Um servidor web relativamente novo. É um servidor web de código aberto, HTTP / 2 com HTTPS automático.

Ferramentas de API

Os desenvolvedores da Web geralmente lidam com APIs diariamente. Eles são essenciais no ambiente atual de desenvolvimento da web, no entanto, às vezes pode ser difícil de lidar em termos de monitoramento, criação ou combinação. Felizmente, existem várias ferramentas disponíveis para tornar o trabalho com APIs muito mais eficiente.

  • Runscope: Uma solução de teste, monitoramento e depuração de desempenho da API.

  • Zapier: Conecte as APIs de vários aplicativos e serviços para automatizar fluxos de trabalho e permitir a automação.

  • Postman: Ambiente completo de desenvolvimento de API. Tudo, desde o design, teste, monitoramento e publicação.

  • SoapUI: Ferramenta avançada de teste REST e SOAP. Capacidade de executar testes funcionais, testes de segurança, testes de desempenho, etc.

Ambientes locais de desenvolvimento

Dependendo do sistema operacional em que você está executando ou do computador ao qual você tem acesso atualmente, pode ser necessário iniciar um rápido ambiente local (local dev environment). Existem muitos utilitários gratuitos que agrupam Apache, mySQL, phpmyAdmin etc. todos juntos. Essa pode ser uma maneira rápida de testar algo em sua máquina local. Muitos deles têm versões portáteis.

  • XAMPP: Distribuição Apache completamente gratuita e fácil de instalar, contendo MariaDB, PHP e Perl.

  • MAMP: Ambiente do servidor local em questão de segundos no OS X ou Windows.

  • WampServer: Ambiente de desenvolvimento web do Windows. Ele permite criar aplicativos da web com Apache2, PHP e um banco de dados MySQL.

  • Vagrant: Crie e configure ambientes de desenvolvimento leves, reproduzíveis e portáteis.
  • Laragon: Uma ótima maneira rápida e fácil de criar um ambiente de desenvolvimento isolado no Windows. Inclui Mysql, PHP Memcached, Redis, Apache e incrível por trabalhar com seus projetos Laravel.

Verificadores de Diferenças

Verificadores diferentes podem ajudá-lo a comparar diferenças entre arquivos e mesclar as alterações. Muito disso pode ser feito na CLI, mas às vezes pode ser útil ver uma representação mais visual.

  • Diffchecker: Ferramenta diff online para comparar diferenças de texto entre dois arquivos de texto. Ótimo se você estiver em movimento e precisar rapidamente comparar algo.
  • Beyond Compare: Um programa para comparar arquivos e pastas usando comandos simples e poderosos que se concentram nas diferenças de seu interesse e ignoram aqueles que você não é.

Muitos dos editores de texto livre mencionados acima também possuem plug-ins ou extensões que permitem diferenciar ou comparar seus arquivos.

Compartilhamento de código

sharing code - Sempre existe esse momento em que você está no hangout do Skype ou do Google com outro desenvolvedor e deseja que ele dê uma olhada rápida no seu código. Existem ótimas ferramentas de equipe para compartilhando código como o Slack, mas se eles não são membros da sua equipe, existem ótimas alternativas rápidas. Lembre-se de não compartilhar nada seguro.

  • JS Bin: Ferramenta para experimentar idiomas da web. Em particular HTML, CSS e JavaScript, Markdown, Jade e Sass.
  • JSfiddle: Ambiente personalizado para testar seu código JavaScript, HTML e CSS dentro do seu navegador.
  • codeshare: Compartilhe código em tempo real com outros desenvolvedores.
  • Dabblet: Playground interativo para testar rapidamente trechos de código CSS e HTML.

Ferramentas de colaboração

collaborate - Toda grande equipe de desenvolvimento precisa de uma maneira de manter contato colaborar, e seja produtivo. Muitas equipes trabalham remotamente agora. A equipe do KeyCDN está realmente espalhada por muitos continentes diferentes. Ferramentas como essas abaixo podem ajudar os funcionários a otimizar seu fluxo de trabalho de desenvolvimento.

  • Slack: Aplicativo de mensagens para equipes que estão em uma missão para tornar sua vida profissional mais simples, mais agradável e mais produtiva.
  • Trello: Maneira flexível e visual de organizar qualquer coisa com alguém.
  • Glip: Mensagens em tempo real com gerenciamento integrado de tarefas, videoconferência, calendários compartilhados e muito mais.
  • Asana: Ferramenta de colaboração de equipe para as equipes rastrearem seu trabalho e resultados.
  • Jira: Criado para cada membro da sua equipe de software planejar, rastrear e liberar ótimos aplicativos de software ou web.

Inspiração

inspiration - Todos nós precisamos inspiração em algum momento ou outro. Especialmente para desenvolvedores de front-end, de tempos em tempos, pode ser benéfico verificar o que outras pessoas estão fazendo. Isso pode ser uma ótima fonte de inspiração, novas idéias e garantir que seu aplicativo ou site não fique para trás nos tempos.

  • CodePen: Mostre sua última criação e obtenha feedback. Crie um caso de teste para esse bug irritante. Encontre exemplos de padrões de design e inspiração para seus projetos.

  • Dribble: Uma comunidade de designers que compartilham capturas de tela de seu trabalho, processo e projetos.

  • Behance: Outro recurso orientado pela comunidade, onde os usuários podem mostrar e descobrir trabalhos criativos.

Ferramentas de teste de velocidade do site

website speed - A velocidade de um site pode ser um fator crítico para o seu sucesso. Sites de carregamento mais rápido podem se beneficiar de classificações mais altas de SEO, taxas de conversão mais altas, taxas de rejeição mais baixas e uma melhor experiência e envolvimento geral do usuário. É importante aproveitar as muitas ferramentas gratuitas disponíveis para teste velocidade do site.

  • Website Speed Test: Um teste de velocidade da página desenvolvido pelo KeyCDN que inclui uma falha na cascata e a visualização do site.
  • Google PageSpeed Insights: O PageSpeed Insights analisa o conteúdo de uma página da web e gera sugestões para tornar essa página mais rápida.
  • Google Chrome DevTools: Conjunto de ferramentas de criação e depuração da Web incorporadas ao Google Chrome.
  • Dotcom-Tools Speed Test: Teste a velocidade do seu site em navegadores reais de 25 locais em todo o mundo.

  • WebPageTest: Execute um teste de velocidade gratuito do site em vários locais do mundo usando navegadores reais (IE e Chrome) e em velocidades reais de conexão do consumidor.

  • Pingdom: Teste o tempo de carregamento dessa página, analise-o e encontre gargalos.
  • GTmetrix: Dá uma visão de quão bem o site é carregado e fornece recomendações acionáveis sobre como otimizá-lo.

You can see a more in-depth list on our post about website speed test tools.

Comunidades de desenvolvimento da Web

web development communities - Todo desenvolvedor web esteve lá. Eles têm um problema e o que eles fazem? Bem, eles vão ao Google para encontrar uma resposta rápida. A web oferece tanto conteúdo na ponta dos dedos que facilita o diagnóstico e a solução de problemas quando eles surgem. Confira algumas boas comunidades de desenvolvimento web abaixo.

Boletins informativos sobre desenvolvimento da Web

  • wdrl.info: Uma lista artesanal e cuidadosamente selecionada de recursos relacionados ao desenvolvimento da web. Com curadoria e publicada normalmente toda semana.
  • webopsweekly.com: Semanal boletim informativo para desenvolvedores da Web com foco em operações da Web, infraestrutura, implantação de aplicativos, desempenho e ferramentas, do navegador ao metal.
  • webtoolsweekly.com: Um boletim informativo de desenvolvimento de front-end e web design com foco em ferramentas. Cada edição apresenta uma breve dica ou tutorial, semanal arredondamento de vários aplicativos, scripts, plug-ins e outros recursos.

  • freshbrewed.co: Semanal resumo de leitura para desenvolvedores de front-end e designers de UX.

  • smashingmagazine.com: Smashing Magazine é uma revista on-line para web designers e desenvolvedores profissionais. Dicas úteis e recursos valiosos enviados toda segunda terça-feira.

  • fridayfrontend.com: Links de desenvolvimento de frontend twittados diariamente, enviados por e-mail semanal.
  • /dev tips: Receba uma dica do desenvolvedor, na forma de um gif, na sua caixa de entrada cada semana.

40+ best web developments blogs of 2018.

Source