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

Diff checkers can help you compare differences between files and then merge the changes. A lot of this can be done from CLI, but sometimes it can be helpful to see a more visual representation.

  • Diffchecker: Online diff tool to compare text differences between two text files. Great if you are on the go and quickly need to compare something.
  • Beyond Compare: A program to compare files and folders using simple, powerful commands that focus on the differences you’re interested in and ignore those you’re not.

A lot of the free text editors we mentioned above also have plugins or extensions which allow you to diff or compare your files.

Code sharing / Code experimenting#

There is always that time when you are on Skype or Google hangout with another developer and you want him or her to take a quick look at your code. There are great team tools for sharing code like Slack, but if they aren’t a member of your team there are some great quick alternatives. Remember not to share anything secure.

  • JS Bin: Tool for experimenting with web languages. In particular HTML, CSS and JavaScript, Markdown, Jade and Sass.
  • JSfiddle: Custom environment to test your JavaScript, HTML, and CSS code right inside your browser.
  • codeshare: Share code in real time with other developers.
  • Dabblet: Interactive playground for quickly testing snippets of CSS and HTML code.

Collaboration tools#

Every great development team needs a way to stay in touch, collaborate, and be productive. A lot of teams work remotely now. The team at KeyCDN is actually spread across many different continents. Tools like these below can help employees streamline their development workflow.

  • Slack: Messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive. One of our favorites, we use this at KeyCDN!
  • Trello: Flexible and visual way to organize anything with anyone. We also use this as KeyCDN.
  • Glip: Real-time messaging with integrated task management, video conferencing, shared calendars and more.
  • Asana: Team collaboration tool for teams to track their work and results.
  • Jira: Built for every member of your software team to plan, track, and release great software or web applications.

Inspiration#

We all need inspiration at some point or another. For frontend developers especially, from time to time, it can be beneficial to check out what other people are doing. This can be a great source of inspiration, new ideas, and making sure your web application or site doesn’t fall behind the times.

  • CodePen: Show off your latest creation and get feedback. Build a test case for that pesky bug. Find example design patterns and inspiration for your projects.
  • Dribble: A community of designers sharing screenshots of their work, process, and projects.
  • Behance: Another community-driven resource where users can showcase and discover creative work.

Website speed test tools#

The speed of a website can be a critical factor to its success. Faster loading websites can benefit from higher SEO rankings, higher conversion rates, lower bounce rates, and a better overall user experience and engagement. It is important to take advantage of the many free tools available for testing website speed.

  • Website Speed Test: A page speed test developed by KeyCDN that includes a waterfall breakdown and the website preview.
  • Google PageSpeed Insights: PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.
  • Google Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome.
  • Dotcom-Tools Speed Test: Test the speed of your website in real browsers from 25 locations worldwide.
  • WebPageTest: Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
  • Pingdom: Test the load time of that page, analyze it and find bottlenecks.
  • GTmetrix: Gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

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

Web development communities#

Every web developer has been there. They have a problem and what do they do? Well, they go to Google to find a quick answer. The web offers so much content right at our fingertips that it makes it easy to diagnose and troubleshoot problems when they arise. Check out a few good web development communities below.

Web development newsletters#

  • wdrl.info: A handcrafted, carefully selected list of web development related resources. Curated and published usually every week.
  • webopsweekly.com: A weekly newsletter for Web developers focusing on web operations, infrastructure, deployment of apps, performance, and tooling, from the browser down to the metal.
  • webtoolsweekly.com: A frontend development and web design newsletter with a focus on tools. Each issue features a brief tip or tutorial, followed by a weekly round-up of various apps, scripts, plugins, and other resources.
  • freshbrewed.co: A weekly reading digest for frontend developers and UX designers.
  • smashingmagazine.com: Smashing Magazine is an online magazine for professional web designers and developers. Useful tips and valuable resources sent out every second Tuesday.
  • fridayfrontend.com: Frontend development links tweeted daily, emailed weekly.
  • /dev tips: Receive a developer tip, in the form of a gif, in your inbox each week.

And of course, you can subscribe to our newsletter if you haven’t already on the right-hand side of this post. For an even further comprehensive list of web development blogs and newsletters, check out our 40+ best web developments blogs of 2018.

Source