{"id":2692,"date":"2014-01-27T12:00:43","date_gmt":"2014-01-27T15:00:43","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=2692"},"modified":"2014-01-27T12:00:43","modified_gmt":"2014-01-27T15:00:43","slug":"20-ferramentas-para-melhorar-suas-habilidades-de-codificacao-em-javascript-parte-i","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/20-ferramentas-para-melhorar-suas-habilidades-de-codificacao-em-javascript-parte-i\/","title":{"rendered":"20 ferramentas de JavaScript para melhorar suas habilidades de codifica\u00e7\u00e3o"},"content":{"rendered":"

A biblioteca do\u00a0JavaScript<\/strong><\/a> \u00e9 composta de c\u00f3digos pr\u00e9-escritos que permitem um desenvolvimento mais f\u00e1cil de aplica\u00e7\u00f5es baseadas nessa linguagem, especialmente o AJAX<\/strong> e outras tecnologias centradas na web. O uso principal do JavaScript \u00e9 escrever fun\u00e7\u00f5es que s\u00e3o incorporadas ou inclu\u00eddas em p\u00e1ginas HTML<\/strong> <\/a>e interagem com o Document Object Model (DOM<\/strong>) da p\u00e1gina.<\/span><\/p>\n

Reunimos as\u00a020 ferramentas de JavaScript<\/strong> que ir\u00e3o melhorar suas habilidades de codifica\u00e7\u00e3o e te auxiliar\u00e3o a finalizar um trabalho com mais agilidade e facilidade.<\/span><\/p>\n

1 \u2013 Simple State Manager<\/b><\/span><\/h2>\n

O Simple State Manager \u00e9 um administrador leve e de uso simples para sites responsivos. Ele n\u00e3o requer um framework<\/em> de JavaScript e \u00e9 perfeito para cuidar de c\u00f3digos relacionados especificamente a layout de forma \u201climpa\u201d. <\/span><\/p>\n

Com ele voc\u00ea pode definir um ponto de interrup\u00e7\u00e3o<\/a> e reunir todos os c\u00f3digos a serem executados naquele ponto. Uma vez que outro ponto de interrup\u00e7\u00e3o seja alcan\u00e7ado, o Simple State Manager<\/strong> desabilita todos os c\u00f3digos anteriormente customizados e aciona os novos \u2013 te liberando da necessidade de faz\u00ea-lo manualmente. O administrador vem com API completa, um detector de bugs e um suporte para plugins de expans\u00e3o.<\/span><\/p>\n

2 \u2013 jsMini<\/b><\/span><\/h3>\n

Se voc\u00ea deseja minimizar seus arquivos JavaScript ou jQuery rapidamente e facilmente, o jsMini<\/strong> \u00e9 a ferramenta ideal. <\/span><\/p>\n

Apenas copie e cole seu c\u00f3digo fonte, selecione se voc\u00ea deseja b\u00e1sico ou compress\u00e3o total e ent\u00e3o reduza seu c\u00f3digo.<\/span><\/p>\n

3 \u2013 CountUp.js<\/b><\/span><\/h3>\n

CountUp.js \u00e9 uma \u201cclasse\u201d JavaScript sem depend\u00eancia e leve, que pode ser usada para criar anima\u00e7\u00f5es r\u00e1pidas que mostram informa\u00e7\u00f5es num\u00e9ricas de forma mais interessante. Apesar de seu nome, o CountUp<\/strong> (Contar para Cima, em tradu\u00e7\u00e3o livre) pode contar em ambas as dire\u00e7\u00f5es, dependendo dos par\u00e2metros startVal<\/i> e endVal<\/i> que voc\u00ea usar. <\/span><\/p>\n

No programa est\u00e3o inclusos arquivos Bower e Component .json, bem como uma vers\u00e3o CoffeeScript.<\/span><\/p>\n

4 \u2013 Grasp<\/b><\/span><\/h3>\n

O Grasp<\/strong> possibilita que voc\u00ea procure, substitua e refatore seu JavaScript baseado na estrutura do c\u00f3digo ao inv\u00e9s do pr\u00f3prio texto. Ele \u00e9 mais potente que a busca e substitui\u00e7\u00e3o padr\u00e3o e permite que voc\u00ea refatore seus c\u00f3digos com muito mais facilidade, permitindo tamb\u00e9m que voc\u00ea implemente macros b\u00e1sicos de uma linha.<\/span><\/p>\n

5 \u2013 Gulp.js<\/b><\/span><\/h3>\n

Gulp.js \u00e9 um sistema de constru\u00e7\u00e3o stream. Seu uso de streams<\/em> e c\u00f3digo sobre configura\u00e7\u00e3o (CoC) permite uma constru\u00e7\u00e3o simplificada e intuitiva. Gra\u00e7as a sua prefer\u00eancia por CoC, o Gulp mant\u00e9m as coisas mais simples simplificadas e torna as tarefas complexas mais administr\u00e1veis.<\/span><\/p>\n

Ao \u201cdomar\u201d o poder dos streams<\/em> dos n\u00f3s, voc\u00ea tem constru\u00e7\u00f5es r\u00e1pidas que n\u00e3o escrevem arquivos intermedi\u00e1rios no disco. As guias estritas do Gulp<\/strong> asseguram que os plugins<\/em> se mantenham simples e funcionem conforme o esperado. Com uma superf\u00edcie API m\u00ednima, voc\u00ea aprende a trabalhar com o Gulp rapidamente. E \u00e9 f\u00e1cil entender seu funcionamento: sua constru\u00e7\u00e3o \u00e9 como um fluxo de \u00e1gua atrav\u00e9s de uma s\u00e9rie de encanamentos.<\/span><\/p>\n

6 \u2013 Ocrad.js<\/b><\/span><\/h3>\n

O Ocrad.js \u00e9 um simples programa de OCR (Reconhecimento \u00d3ptico de Caracteres) que transforma imagens de texto escaneadas em texto. \u00c9 uma vers\u00e3o de JavaScript do projeto\u00a0Ocrad<\/strong>, com somente 1MB e t\u00e3o simples que n\u00e3o \u00e9 necess\u00e1rio nenhum treinamento para usar.<\/span><\/p>\n

7 \u2013 Headroom.js<\/b><\/span><\/h3>\n

Headroom.js \u00e9 um\u00a0widget<\/em>\u00a0leve e de alta performance que permite visualizar a barra de rolagem como o usu\u00e1rio. O cabe\u00e7alho desaparece de vista quando voc\u00ea rola pra baixo e reaparece quando rola pra cima. O\u00a0Headroom.js<\/strong>\u00a0permite que voc\u00ea deixe vis\u00edvel os elementos que desejar no momento apropriado e foque no conte\u00fado o tempo todo. O widget tem uma API puramente de JavaScript, tendo tamb\u00e9m compatibilidade opcional com jQuery e Zepto.<\/span>
\n8 \u2013 Jiko<\/b><\/span>
\nJiko<\/strong>\u00a0\u00e9 uma ferramenta de\u00a0templates<\/em>\u00a0moderna e f\u00e1cil de usar para JavaScript. Sua fun\u00e7\u00e3o \u00e9 prover aos programadores uma forma de escrever\u00a0templates<\/em>\u00a0com um sistema t\u00e3o poderoso quanto ferramentas baseadas em servidores remotos com tecnologia de ponta, como a\u00a0Jinja<\/a>\u00a0e a\u00a0Mako<\/a>.<\/span><\/p>\n

9 \u2013 FileAPI<\/span><\/strong><\/h3>\n

O\u00a0FileAPI<\/strong>\u00a0\u00e9 um grande conjunto de ferramentas JavaScript para quase todo tudo relacionado a trabalho com arquivos. Ele possui fun\u00e7\u00f5es de upload de arquivos (simples\/m\u00faltiplos) com suporte para a fun\u00e7\u00e3o\u00a0drag \u2018n\u2019 drop<\/i>\u00a0(arraste e solte), recorte de imagens, redimensionamento, aplica\u00e7\u00e3o de filtros, informa\u00e7\u00e3o de arquivos e muito mais. <\/span>
\nAs ferramentas s\u00e3o separadas e v\u00eam com uma classe PHP <\/a>que se encarrega das a\u00e7\u00f5es no que tange o servidor. Tamb\u00e9m possui retorno em Flash para browsers sem suporte (upload e c\u00e2meras) e detalhamento de a\u00e7\u00f5es documentado.<\/span><\/p>\n

10 \u2013 Object Playground<\/b><\/span><\/h3>\n

O\u00a0Object Playground<\/strong>\u00a0\u00e9 uma ferramenta de visualiza\u00e7\u00e3o e experimenta\u00e7\u00e3o para objetos JavaScript. Seus pr\u00f3s s\u00e3o bem diretos: funciona inteiramente no browser e \u00e9 muito simples de usar.<\/span><\/p>\n

\"Conhe\u00e7a<\/a><\/p>\n

11 \u2013 Echo.js<\/b><\/span><\/h3>\n

A\u00a0Echo<\/strong>\u00a0\u00e9 uma ferramenta independente de carregamento de imagens em modo\u00a0lazy loading<\/i>\u00a0para JavaScript. \u00c9 r\u00e1pido, usa atributos\u00a0data-*<\/i>\u00a0de HTML5, funciona no IE8+ e \u00e9 t\u00e3o simples quanto uma ferramenta dessas deve ser, tendo menos do que 1KB reduzido e agn\u00f3stico no que tange a bibliotecas, ou seja, n\u00e3o requer jQuery, Zepto ou quaisquer outros.<\/span>
\nO\u00a0lazy loading<\/i><\/a>\u00a0funciona permitindo o carregamento dos ativos somente quando os elementos \u201cestariam\u201d vis\u00edveis, quando se comunica com o sistema do servidor, que \u00e9 automatizado simplesmente com a troca do atributo\u00a0image src<\/i>.<\/span><\/p>\n

12 \u2013 jsComplexity<\/b><\/span><\/h3>\n

Gostaria de saber o qu\u00e3o complexo seu c\u00f3digo JavaScript \u00e9 de verdade? Pois basta \u201cjog\u00e1-lo\u201d no\u00a0JsComplexity<\/strong>\u00a0para an\u00e1lise e ver com seus pr\u00f3prios olhos. Quanto mais complexidade em seu c\u00f3digo, maiores as chances de ocorrerem bugs, portanto, qualquer coisa que voc\u00ea puder fazer para simplific\u00e1-lo pode melhorar sua performance e confiabilidade.<\/span><\/p>\n

13 \u2013 Chance.js<\/b><\/span><\/h3>\n

O Chance \u00e9 um gerador minimalista de\u00a0cadeias<\/a>\u00a0[1]<\/i>, n\u00fameros, etc. aleat\u00f3rios para auxiliar a reduzir a monotonia, particularmente enquanto escrevendo testes automatizado ou em qualquer lugar onde voc\u00ea necessite de algo aleat\u00f3rio. <\/span>
\nO\u00a0Chance<\/strong>\u00a0\u00e9 um software livre, lan\u00e7ado sob a licen\u00e7a do MIT. A melhor parte \u00e9 que ele \u00e9 carregado diretamente no site, ent\u00e3o basta abrir o programa no seu browser e us\u00e1-lo.<\/span><\/p>\n

14 \u2013 Bookmarkfiy<\/b><\/span><\/h3>\n

Bookmarkify<\/strong>\u00a0torna a cria\u00e7\u00e3o de bookmarklets super simples. Apenas nomeie seu\u00a0bookmarklet<\/a>, acrescente o c\u00f3digo para ele, inclua-o e pronto!<\/span><\/p>\n

15 \u2013 David<\/b><\/span><\/h3>\n

David<\/strong>\u00a0\u00e9 uma ferramenta para conseguir uma vis\u00e3o por cima de suas pend\u00eancias de\u00a0Node<\/a>. Ela cria uma \u201cplaca\u201d mostrando o status atual de cada pend\u00eancia e voc\u00ea pode incorporar em seu site se desejar.<\/span><\/p>\n

16 \u2013 jQuery User Interface<\/b><\/span><\/h3>\n

O\u00a0jQuery U<\/a>I<\/strong>\u00a0\u00e9 uma solu\u00e7\u00e3o criada a partir da mistura de intera\u00e7\u00f5es de interface de usu\u00e1rio, efeitos,\u00a0widgets<\/em>\u00a0e temas, e constru\u00edda sobre a biblioteca jQuery do JavaScript. Auxilia tanto na constru\u00e7\u00e3o de aplica\u00e7\u00f5es web interativas quanto em tarefas mais simples, como a adi\u00e7\u00e3o de um calend\u00e1rio em um formul\u00e1rio.<\/span><\/p>\n

17 \u2013 YUI Library<\/b><\/span><\/h3>\n

YUI<\/a>\u00a0\u00e9 uma biblioteca JavaScript e CSS gratuita e livre, pr\u00f3pria para a constru\u00e7\u00e3o de aplica\u00e7\u00f5es amplamente interativas. Seu n\u00facleo leve arquitetura modular a tornam escalon\u00e1vel, r\u00e1pida e robusta. A\u00a0YUI<\/strong>\u00a0\u00e9 um das bibliotecas mais populares do mundo.<\/span><\/p>\n

18 \u2013 Modernizr<\/b><\/span><\/h3>\n

Modernizr<\/a>\u00a0\u00e9 uma ferramenta de JavaScript que detecta aplica\u00e7\u00f5es em HTML5 e CSS3<\/a> no browser do usu\u00e1rio. Quando posto em funcionamento no carregamento da p\u00e1gina, ele detecta e ent\u00e3o cria\u00a0 um objeto JavaScript com os resultados e adiciona classes ao elemento\u00a0html<\/i>\u00a0para ativar seu CSS. O\u00a0Modernizr<\/strong>\u00a0suporta v\u00e1rios tipos de testes e inclui, opcionalmente, o\u00a0YepNope.js<\/a>\u00a0para carregamento de recursos\u00a0.js<\/i>\u00a0e\u00a0.css<\/i>\u00a0externos.<\/span><\/p>\n

19 \u2013 Backbone.js<\/b><\/span><\/h3>\n

O\u00a0Backbone<\/strong><\/a>\u00a0cria estruturas para aplica\u00e7\u00f5es web ao providenciar modelos com liga\u00e7\u00e3o de valores-chave e eventos customizados, gera um acervo API com in\u00fameras fun\u00e7\u00f5es, cuida da administra\u00e7\u00e3o de eventos de\u00a0programa\u00e7\u00e3o declarativa<\/a>\u00a0e conecta com sua API atrav\u00e9s de uma interface RESTful JSON.<\/span><\/p>\n

20 \u2013 AngularJS<\/b><\/span><\/h3>\n

Quando o HTML falha ao tentar usar vis\u00f5es din\u00e2micas declarativas em aplica\u00e7\u00f5es web, o\u00a0AngularJS<\/strong><\/a>\u00a0te permite estender seu vocabul\u00e1rio HTML, resultando em um ambiente extremamente expressivo, leg\u00edvel e r\u00e1pido de desenvolver.<\/span><\/p>\n

As ferramentas apresentadas aqui permitem que voc\u00ea administre o estado do JavaScript, condense seus c\u00f3digos, refa\u00e7a estruturas codificadas e muito mais. <\/span><\/p>\n

Esperamos que essa lista lhe seja \u00fatil. Se conhecer outras ferramentas de JavaScript, nos deixe um coment\u00e1rio. E n\u00e3o deixe de conferir as pr\u00f3ximas postagens!<\/span><\/p>\n

Colaborou nesse artigo:<\/em>\u00a0Wilson Divino<\/a><\/strong>.<\/span><\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>