Conhecer as ferramentas corretas para o seu projeto pode reduzir muito o seu trabalho (em horas e esforço) e melhorar muito a qualidade do resultado final do que você está desenvolvendo.
1 – JsPDF – Gerador de PDF’s Javascript
⭐17.149 no Github – Link da documentação
Gerar PDF’s para relatórios, documentos e etc é uma tarefa comum para os desenvolvedores (embora possa ser um pouco complicada sem as ferramentas certas), usando a biblioteca jsPDF você consegue fazer isso de forma fácil, rápida e customizada.
2 – Video.js – Player de vídeo customizável
⭐25.708 no Github – Link da documentação
Caso você precise incluir um player de vídeo no seu APP certamente vale a pena testar a Biblioteca Video.js, com ela você pode criar um player básico ou um player totalmente customizado.
Entre as features interessantes da Video.js estão:
- Mudança na aparência do Player
- Reação a eventos (exp: O usuário deu play, o vídeo finalizou e etc)
- Alteração nos controles do vídeo
- Multi idiomas
- Entre outras
3 – Chart.js – Gráficos incríveis facilmente
⭐44.680 no Github – Link da documentação
Muitos tipos de aplicações necessitam da apresentação de gráficos, com a Charts.js fica fácil incluir a maior partes dos tipos de gráficos no seus projetos Javascript com facilidade.
Ps: Vale a pena visitar a documentação para conhecer cada um deles.
4 – Leaflet – Mapas interativos amigáveis no mobile
⭐25.411 no Github – Link da documentação
Se você precisa inserir mapas no seu APP você pode fazer isso usando a Leaflet, com ela você consegue incluir mapas que se ajustam no mobile e te permitem inserir marcadores em endereços com tranquilidade.
Um exemplo de código para a inserção de mapa com marcação:
|
1 2 3 4 5 6 7 |
var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') .openPopup(); |
5 – Uppy – Upload fácil e rápido de arquivos
⭐best internet dating chat up lines no Github – https://onebitcode.com/how-often-should-you-talk-when-you-first-start-dating/
Fazer o Upload de arquivos sempre foi uma tarefa com algumas complicações para o desenvolvedor, mas com a Uppy o processo fica bem mais simples.
Com essa biblioteca é possível fazer o upload de arquivos (locais, do Google Drive, Dropbox, Instagram, ou até mesmo da camera do mobile) para outra aplicação com grande facilidade.
6 – Quill – Editor Rich Text de fácil integração
⭐women seeking men in nigeria no Github – https://onebitcode.com/cherry-blossom-dating-asia/
Caso precise de um editor de Rich Text (texto + elementos html como listas, links, imagens, emoticons e etc) você pode usar o Quill editor sem preocupações, ele é fácil de usar e totalmente customizável.
Aqui na Escola de Javascript temos um tutorial que ensina como criar um editor de textos com electron, nele nós usamos o Quill editor, vale a pena conhecer.
7 – Moment.js – Manipulação de datas no Javascript
⭐41.950 no Github – Link da documentação
A Moment.js é uma biblioteca muito famosa na comunidade Javascript, com ela é possível parsear, validar, manipular e mostrar datas usando Javascript de forma fácil, caso você ainda não conheça ela, vale a pena visitar a documentação.
Alguns exemplos de uso:
|
1 2 3 4 |
moment().format('MMMM Do YYYY, h:mm:ss a'); // August 6th 2019, 1:23:52 pm moment("20111031", "YYYYMMDD").fromNow(); // 8 years ago moment().subtract(10, 'days').calendar(); // 07/27/2019 moment().format('lll'); // Aug 6, 2019 1:24 PM |
8 – ml5 – Machine Learning amígável para a Web
⭐2.821 no Github – Link da documentação
Machine Learning é um tópico de interesse crescente no meio da programação, a ml5 é uma biblioteca que te permite vislumbrar um pouco das possibilidades que essa área tem e também criar ferramentas úteis de machine learning usando Javascript.
9 – Reveal – Framework para criação de apresentações usando HTML
⭐47.597 no Github – Link da documentação
Se você precisa criar apresentações online (semelhante a apresentações com slides) direto no browser usando HTML + Javascript a Reveal é a biblioteca certa para você.
Um exemplo de apresentação:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="js/reveal.js"></script> <script> Reveal.initialize(); </script> </body> </html> |
10 – Faker.js – Gerador de dados realístas para Node e para a Web
⭐19.931 no Github – Link da documentação
Muitas vezes quando você está criando uma aplicação você precisa de dados de exemplo (nome, telefone, email e etc), então você acaba utilizando o Lorem Ipsum em tudo, desde o nome do usuário até a descrição e acaba em um cenário com uma aparência pouco realista.
Para evitar isso você pode usar a Biblioteca Faker, ela gera dados falsos mas realistas, por exemplo, você pode gerar nomes, endereços, dados de empresas entre outros tipos de dados úteis com ela.
Obs: Essa biblioteca também é excelente em cenários onde você está criando testes, assim a cada novo teste seus dados vão variar e vai aumentar as chances deles estarem representando a realidade.
Exemplo de uso:
|
1 2 3 4 |
var faker = require('faker'); var randomName = faker.name.findName(); // Rowan Nikolaus var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz var randomCard = faker.helpers.createCard(); // random contact card containing many properties |
11 – fullPage – Ferramenta para criar páginas Full Screen facilmente
⭐27.191 no Github – Link da documentação
Caso você precise criar telas que se encaixem 100% no seu browser a biblioteca fullPage é o caminho, com ela é possível separar uma página (ou landing page por exemplo) em sessões e depois fazer com que cada sessão tome 100% do browser de acordo com a navegação.
Exemplo de uso:
|
1 2 3 4 5 6 |
<div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div> |
12 – SweetAlert – Alternativa elegânte ao “Alert” do Javascript
⭐20.145 no Github – Link da documentação
Mostrar mensagens de alerta para o usuário as vezes é necessário, mas o alert default do browser não é nada elegante, usando a SweetAlert você consegue gerar mensagens customizadas com grande facilidade.
Conclusão
Eu espero que essas 12 bibliotecas apresentadas sejam úteis para você, caso você tenha indicações de outras bibliotecas que devam entrar na segunda versão desta lista comente a baixo, muito obrigado por estar com a gente.
Não se esqueça de compartilhar este artigo com outros programadores, isso incentiva muito o nosso trabalho 💪😁
Visite também “As 27 Ferramentas que todo programador deve conhecer” no nosso outro Blog (OneBitCode.com).
Grande abraço, Leonardo Scorza
Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀
Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma,
Javascript e Es6+) até React e ExpressJs totalmente do zero!
Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá
aprender como conseguir as melhores vagas no módulo carreira de Programador.
Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪
top top, sobre a momentJS, recentemente eu substitui por date-fns por uma questão de usabilidade em operações que envolvem retornos de distancia entre datas, conheci esse site hoje, estou de olho nesse bootcamp de ruby quando abre turma?