20 ferramentas de JavaScript para melhorar suas habilidades de codificação

A biblioteca do JavaScript é composta de códigos pré-escritos que permitem um desenvolvimento mais fácil de aplicações baseadas nessa linguagem, especialmente o AJAX e outras tecnologias centradas na web. O uso principal do JavaScript é escrever funções que são incorporadas ou incluídas em páginas HTML e interagem com o Document Object Model (DOM) da página.

Reunimos as 20 ferramentas de JavaScript que irão melhorar suas habilidades de codificação e te auxiliarão a finalizar um trabalho com mais agilidade e facilidade.

1 – Simple State Manager

O Simple State Manager é um administrador leve e de uso simples para sites responsivos. Ele não requer um framework de JavaScript e é perfeito para cuidar de códigos relacionados especificamente a layout de forma “limpa”.

Com ele você pode definir um ponto de interrupção e reunir todos os códigos a serem executados naquele ponto. Uma vez que outro ponto de interrupção seja alcançado, o Simple State Manager desabilita todos os códigos anteriormente customizados e aciona os novos – te liberando da necessidade de fazê-lo manualmente. O administrador vem com API completa, um detector de bugs e um suporte para plugins de expansão.

2 – jsMini

Se você deseja minimizar seus arquivos JavaScript ou jQuery rapidamente e facilmente, o jsMini é a ferramenta ideal.

Apenas copie e cole seu código fonte, selecione se você deseja básico ou compressão total e então reduza seu código.

3 – CountUp.js

CountUp.js é uma “classe” JavaScript sem dependência e leve, que pode ser usada para criar animações rápidas que mostram informações numéricas de forma mais interessante. Apesar de seu nome, o CountUp (Contar para Cima, em tradução livre) pode contar em ambas as direções, dependendo dos parâmetros startVal e endVal que você usar.

No programa estão inclusos arquivos Bower e Component .json, bem como uma versão CoffeeScript.

4 – Grasp

O Grasp possibilita que você procure, substitua e refatore seu JavaScript baseado na estrutura do código ao invés do próprio texto. Ele é mais potente que a busca e substituição padrão e permite que você refatore seus códigos com muito mais facilidade, permitindo também que você implemente macros básicos de uma linha.

5 – Gulp.js

Gulp.js é um sistema de construção stream. Seu uso de streams e código sobre configuração (CoC) permite uma construção simplificada e intuitiva. Graças a sua preferência por CoC, o Gulp mantém as coisas mais simples simplificadas e torna as tarefas complexas mais administráveis.

Ao “domar” o poder dos streams dos nós, você tem construções rápidas que não escrevem arquivos intermediários no disco. As guias estritas do Gulp asseguram que os plugins se mantenham simples e funcionem conforme o esperado. Com uma superfície API mínima, você aprende a trabalhar com o Gulp rapidamente. E é fácil entender seu funcionamento: sua construção é como um fluxo de água através de uma série de encanamentos.

6 – Ocrad.js

O Ocrad.js é um simples programa de OCR (Reconhecimento Óptico de Caracteres) que transforma imagens de texto escaneadas em texto. É uma versão de JavaScript do projeto Ocrad, com somente 1MB e tão simples que não é necessário nenhum treinamento para usar.

7 – Headroom.js

Headroom.js é um widget leve e de alta performance que permite visualizar a barra de rolagem como o usuário. O cabeçalho desaparece de vista quando você rola pra baixo e reaparece quando rola pra cima. O Headroom.js permite que você deixe visível os elementos que desejar no momento apropriado e foque no conteúdo o tempo todo. O widget tem uma API puramente de JavaScript, tendo também compatibilidade opcional com jQuery e Zepto.
8 – Jiko
Jiko é uma ferramenta de templates moderna e fácil de usar para JavaScript. Sua função é prover aos programadores uma forma de escrever templates com um sistema tão poderoso quanto ferramentas baseadas em servidores remotos com tecnologia de ponta, como a Jinja e a Mako.

9 – FileAPI

O FileAPI é um grande conjunto de ferramentas JavaScript para quase todo tudo relacionado a trabalho com arquivos. Ele possui funções de upload de arquivos (simples/múltiplos) com suporte para a função drag ‘n’ drop (arraste e solte), recorte de imagens, redimensionamento, aplicação de filtros, informação de arquivos e muito mais.
As ferramentas são separadas e vêm com uma classe PHP que se encarrega das ações no que tange o servidor. Também possui retorno em Flash para browsers sem suporte (upload e câmeras) e detalhamento de ações documentado.

10 – Object Playground

O Object Playground é uma ferramenta de visualização e experimentação para objetos JavaScript. Seus prós são bem diretos: funciona inteiramente no browser e é muito simples de usar.

11 – Echo.js

A Echo é uma ferramenta independente de carregamento de imagens em modo lazy loading para JavaScript. É rápido, usa atributos data-* de HTML5, funciona no IE8+ e é tão simples quanto uma ferramenta dessas deve ser, tendo menos do que 1KB reduzido e agnóstico no que tange a bibliotecas, ou seja, não requer jQuery, Zepto ou quaisquer outros.
O lazy loading funciona permitindo o carregamento dos ativos somente quando os elementos “estariam” visíveis, quando se comunica com o sistema do servidor, que é automatizado simplesmente com a troca do atributo image src.

12 – jsComplexity

Gostaria de saber o quão complexo seu código JavaScript é de verdade? Pois basta “jogá-lo” no JsComplexity para análise e ver com seus próprios olhos. Quanto mais complexidade em seu código, maiores as chances de ocorrerem bugs, portanto, qualquer coisa que você puder fazer para simplificá-lo pode melhorar sua performance e confiabilidade.

13 – Chance.js

O Chance é um gerador minimalista de cadeias [1], números, etc. aleatórios para auxiliar a reduzir a monotonia, particularmente enquanto escrevendo testes automatizado ou em qualquer lugar onde você necessite de algo aleatório.
O Chance é um software livre, lançado sob a licença do MIT. A melhor parte é que ele é carregado diretamente no site, então basta abrir o programa no seu browser e usá-lo.

14 – Bookmarkfiy

Bookmarkify torna a criação de bookmarklets super simples. Apenas nomeie seu bookmarklet, acrescente o código para ele, inclua-o e pronto!

15 – David

David é uma ferramenta para conseguir uma visão por cima de suas pendências de Node. Ela cria uma “placa” mostrando o status atual de cada pendência e você pode incorporar em seu site se desejar.

16 – jQuery User Interface

O jQuery UI é uma solução criada a partir da mistura de interações de interface de usuário, efeitos, widgets e temas, e construída sobre a biblioteca jQuery do JavaScript. Auxilia tanto na construção de aplicações web interativas quanto em tarefas mais simples, como a adição de um calendário em um formulário.

17 – YUI Library

YUI é uma biblioteca JavaScript e CSS gratuita e livre, própria para a construção de aplicações amplamente interativas. Seu núcleo leve arquitetura modular a tornam escalonável, rápida e robusta. A YUI é um das bibliotecas mais populares do mundo.

18 – Modernizr

Modernizr é uma ferramenta de JavaScript que detecta aplicações em HTML5 e CSS3 no browser do usuário. Quando posto em funcionamento no carregamento da página, ele detecta e então cria  um objeto JavaScript com os resultados e adiciona classes ao elemento html para ativar seu CSS. O Modernizr suporta vários tipos de testes e inclui, opcionalmente, o YepNope.js para carregamento de recursos .js e .css externos.

19 – Backbone.js

O Backbone cria estruturas para aplicações web ao providenciar modelos com ligação de valores-chave e eventos customizados, gera um acervo API com inúmeras funções, cuida da administração de eventos de programação declarativa e conecta com sua API através de uma interface RESTful JSON.

20 – AngularJS

Quando o HTML falha ao tentar usar visões dinâmicas declarativas em aplicações web, o AngularJS te permite estender seu vocabulário HTML, resultando em um ambiente extremamente expressivo, legível e rápido de desenvolver.

As ferramentas apresentadas aqui permitem que você administre o estado do JavaScript, condense seus códigos, refaça estruturas codificadas e muito mais.

Esperamos que essa lista lhe seja útil. Se conhecer outras ferramentas de JavaScript, nos deixe um comentário. E não deixe de conferir as próximas postagens!

Colaborou nesse artigo: Wilson Divino.