Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/iuricode/ferramentas-frontend

Ferramentas para trabalhar com desenvolvimento frontend
https://github.com/iuricode/ferramentas-frontend

ferramentas frontend iuricode tools

Last synced: about 2 months ago
JSON representation

Ferramentas para trabalhar com desenvolvimento frontend

Awesome Lists containing this project

README 

        
# Ferramentas Frontend 🛠️



Bem-vindo(a) ao **Ferramentas Frontend**! Este projeto open source é um conjunto de **ferramentas** frontend. Seu propósito citar as melhores ferramentas para ajudar no desenvolvimento frontend.



## Ferramentas 🎉



| Nome | Tecnologia | Descrição curta |

| ------------- | ------------- | ------------- |

| [Swiper](https://swiperjs.com/) | JavaScript | Bibliotecas de slides/carrosseis |

| [barba](https://barba.js.org/) | JavaScript | Blibliotecas de transição |

| [slick](https://kenwheeler.github.io/slick/) | JavaScript | Bibliotecas de slides/carrosseis |

| [Particles](https://vincentgarreau.com/particles.js/) | JavaScript | Bibliotecas de partículas |

| [Tilt](https://gijsroge.github.io/tilt.js/) | JavaScript | Bibliotecas de efeitos |

| [GSAP](https://gsap.com/) | JavaScript | Bibliotecas de animação |

| [mo.js](https://mojs.github.io/) |JavaScript | Biblioteca de efeitos |

| [three.js](https://threejs.org/) |JavaScript | Biblioteca de animações 3D |

| [Sweet Alert 2](https://sweetalert2.github.io) |JavaScript | Alternativa para caixas pop-up |

| [shadcn](https://ui.shadcn.com/) | React |  Bibliotecas de coleção de componentes |

| [animista](https://animista.net/) | CSS | Ferramenta para gerar animações

| [cubic-bezier](https://cubic-bezier.com/#.17,.67,.83,.67) | CSS | Ferramenta para gerar transições

| [Hover](https://ianlunn.github.io/Hover/) | CSS | Animações diversas utilizando Hover |

| [WickedCSS animations](https://kristofferandreasen.github.io/wickedCSS/) | CSS | Efeitos de animações variados |

| [Image Hover](http://imagehover.io/) | CSS | Animações utilizando Hover em imagens |

| [Csshake](https://elrumordelaluz.github.io/csshake/) | CSS | Animações que fazem elementos tremem de maneiras diferentes |

| [CSS Scan - box-shadows examples](https://getcssscan.com/css-box-shadow-examples) | CSS | Exemplos de box-shadows |

| [CSS Scan - checkboxes examples](https://getcssscan.com/css-checkboxes-examples) | CSS | Exemplos de checkboxes |

| [CSS Gradient](https://cssgradient.io) | CSS | Ferramenta para gerar gradientes |

| [ColorZilla](https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=pt-BR) | Extensão | Conta-gotas de cores da página Web

| [Dimensions](https://chrome.google.com/webstore/detail/baocaagndhipibgklemoalmkljaimfdj) | Extensão | Uma ferramenta para medir as dimensões da tela

| [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) | Extensão | Ferramenta que fornece sugestões de como melhorar o desempenho, qualidade e correção de suas aplicações web

| [Pesticide for Chrome](https://chrome.google.com/webstore/detail/bakpbgckdnepkmkeaiomhmfcnejndkbi) | Extensão | Ajuda a visualizar o posicionamento dos elementos na tela

| [Responsive Viewer](https://chrome.google.com/webstore/detail/inmopeiepgfljkpkidclfgbgbmfcennb) | Extensão | Mostra múltiplas telas, testador de design responsivo

| [Wappalyzer - Technology profiler](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg) | Extensão | Identifica tecnologias web usadas em um site

| [Web Developer](https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=pt-BR) | Extensão | Adiciona uma barra de ferramentas com várias ferramentas de desenvolvedor web

| [Web Vitals](https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) | Extensão | Mede métricas para um site saudável

| [WhatFont](https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=pt-BR) | Extensão | Identificador de fontes usadas em um website

| [axe DevTools](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=pt-PT&utm_source=ext_sidebar&pli=1) | Extensão | Verificador de acessibilidade para desenvolvedores, testadores e designers no Chrome

| [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) | Extensão | É uma extensão do Chrome para desenvolvedores React, permitindo inspeção de componentes, monitoramento de estados e alterações dinâmicas

| [TinyPNG](https://tinypng.com/) | Otimização | Compressão inteligente WebP, PNG e JPEG para tornar os sites mais rápidos

| [Contrast Checker](https://contrastchecker.com/) | Otimização | Medidor de contraste do background e da fonte

| [Squoosh](https://squoosh.app/) | Otimização | Otimização e redimensionamento de imagens

| [ConvertIco](https://convertico.com/) | Utilitário | Converte uma imagem em um favicon



## Contribuição ✨



Ajude a comunidade tornando este projeto ainda mais incrível. Leia como contribuir clicando **[aqui](https://github.com/iuricode/ferramentas-frontend/blob/main/CONTRIBUTING.md)** e a **[licença](https://github.com/iuricode/ferramentas-frontend/blob/main/LICENSE.md)**. Estou convencido de que juntos alcançaremos coisas incríveis!