Abaixo você encontrará ferramentas e extensões para te auxiliar e ajudar no seu desenvolvimento em qualquer área de TI. Confira o repositório para descobrir novas ferramentas para o seu dia-a-dia, caminhos possíveis e as tecnologias para incorporar na sua stack com foco em se tornar um profissional atualizado e diferenciado em front-end, back-end, dentre outras.
Siga nas redes sociais para acompanhar mais conteúdos:
Olá! Se você está lendo isso, é porque provavelmente já conhece o meu repositório no GitHub, que oferece conteúdo gratuito para ajudar desenvolvedores a aprimorarem suas habilidades. E se você está aqui, talvez esteja considerando contribuir com uma doação para apoiar a continuação do projeto.
Se você quiser contribuir, existem várias opções disponíveis, incluindo PayPal, PagSeguro, Mercado Pago, Buy Me A Coffe, Pic Pay e Pix. Qualquer doação, por menor que seja, é extremamente bem-vinda e será usada com responsabilidade e transparência. Obrigado por considerar apoiar meu projeto! Juntos, podemos continuar a compartilhar conhecimento e ajudar a criar uma comunidade de desenvolvedores mais forte e colaborativa.
Este repositório é um projeto gratuito para a comunidade de desenvolvedores. Você pode me ajudar comprando o e-book "e-Front" se estiver interessado em aprender ou melhorar suas habilidades de desenvolvimento front-end. O e-book é completo e cobre tecnologias essenciais como HTML, CSS, JavaScript, React, TypeScript e mais. O valor é simbólico e sua compra me ajuda a produzir e fornecer mais conteúdo gratuito para a comunidade. Adquira agora e comece sua jornada no desenvolvimento front-end.
- eFront - Estudando Desenvolvimento Front-end do Zero. Clique aqui para comprar
Antes de tudo você pode me ajudar e colaborar, deu bastante trabalho fazer esse repositório e organizar para fazer seu estudo ou trabalho melhor, portanto você pode me ajudar das seguintes maneiras:
- Me siga no Github
- Acesse as redes sociais do Guia Dev Brasil
- Mande feedbacks no LinkedIn
- Faça uma doação pelo PIX: [email protected]
A proposta deste guia é te auxiliar com algumas extensões e ferramentas que nós desenvolvedores utilizamos no dia-a-dia para poupar tempo enquanto estamos produzindo nossos projetos, tendo assim como finalidade facilitar seu trabalho durante a execução do mesmo..
Acompanhe outros guias desenvolvidos para te ajudar na sua carreira como desenvolvedor.
Não se assuste com a quantidade de conteúdo apresentado neste guia. Acredito que quem está começando pode usá-lo não como um objetivo, mas como um apoio para os estudos. Neste momento, dê enfoque no que te dá produtividade e o restante marque como Ver depois. Ao passo que seu conhecimento se torna mais amplo, a tendência é este guia fazer mais sentido e ficar fácil de ser assimilado. Bons estudos e entre em contato sempre que quiser! 👊
- Abra Pull Requests com atualizações
- Discuta ideias em Issues
- Compartilhe o repositório com a sua comunidade
Se você deseja acompanhar esse repositório em outro idioma que não seja o Português Brasileiro, você pode optar pelas escolhas de idiomas abaixo, você também pode colaborar com a tradução para outros idiomas e a correções de possíveis erros ortográficos, a comunidade agradece.
Ferramentas geralmente serão sites com algum conteúdo pronto ou customizavel que você possa aplicar no projeto, fazendo assim que você economize tempo no seu desenvolvimento.
- Minimamente - Efeitos para você colocar no seu CSS
- Hamburgers - Gerador de Menu Hamburgers
- Hover CSS - Gerador de hovers para o CSS
- Internxt - Internxt Drive é um armazenamento de arquivos de conhecimento zero serviço baseado na melhor privacidade e segurança da classe
- Motion - Uma nova biblioteca de animação, construída na API Web Animations para o menor tamanho de arquivo e o desempenho mais rápido.
- Hokusai - Conteúdo sobre NFT's
- Hidden Tools - Ampla coleção de ferramentas feitas pela comunidade disponiveís para uso
- Dev Hints - Coleção de cheatsheets
- Bundlephobia - Descubra o custo de adicionar um pacote npm ao seu pacote
- Refactoring Guru - Padrões de projetos "Design patterns"
- DevDocs - DevDocs combina várias documentações de API em uma interface rápida, organizada e pesquisável.
- HTML Validator - Validação de arquivo HTML
- HTML 5 Test - Testa arquivos HTML5
- Image Slide Maker - Ferramenta de geração gratuita do Image Slider Maker
- .NET Fiddle - Codifique e compartilhe projetos C# online
- 1PageRank - Rankeie seu site nos mecanismos de buscas e aprenda com a concorrência
- Any API - Diretório gratuito com APIs públicas
- Autoprefixer CSS - Transpile código CSS atual para código CSS com maior cobertura de navegadores antigos
- Browser diet - Guia de performance para desenvolvimento web
- Can I email... - Descubra o que do HTML e CSS pode ser usado em estruturas de e-mail
- Can I use... - Descubra se você pode usar determinadas tecnologias web
- CloudFlare - CDN grátis
- CMDER - Linha de comando simples, consegue rodar comands bash e Shell, alternativa ao Hyper
- CodePen - Rede social de desenvolvedores front-end
- CodeSandbox - Caixa de área para desenvolvedores web
- Connection Strings - Site com strings de conexão para diversas plataformas
- CSS Formatter - Retire a minificação e formate o código CSS
- CSS Minifier - Conversor de código CSS para CSS minificado
- CSS W3.org - Validar CSS
- Debuggex: Online visual regex tester. JavaScript, Python, and PCRE - Construa e teste expressões regulares
- docsify - Crie docs incríveis de projetos
- EasyForms - API open source que permite criação formulários de contato com HTML puro
- Editor.md - Editor Markdown online e open source
- ES6console - Compilador de JS para Ecmascript
- Firebase - Desenvolva aplicativos mobile e web incríveis este serviço da Google
- Firefox Developer Edition - Navegador web para desenvolvedores web
- Full Page Screen Capture - Capture páginas inteiras com uma extensão para Chrome
- generatedata - Gerador de dados para testes
- Git Command Explorer - Encontre os comandos certos que você precisa sem vasculhar a web
- GitHub Gist - Faça pequenas anotações e pequenos códigos no GitHub Gist
- Google Transparency Report - Verificar segurança de um site
- Grader - Avaliação de site
- How to Center in CSS - Gerador de código para divs ou textos que necessitam de centralização
- Hyper - Linha de comando simples, útil e gratuito
- Joomla - CMS gratuita
- JS Bin - Codifique e compartilhe projetos HTML, CSS e JS
- JSCompress - Conversor de código JS para JS minificado
- JSON Editor Online - Ferramenta para visualizar e editar arquivos JSON
- JSFiddle - Codifique projetos JS online
- JSONLint - Ferramenta para validar seu JSON
- JSON Generator - Ferramenta para gerar JSON com base em template
- KeyCDN Tools - Faça uma análise das suas aplicações web
- Liveweave - Codifique projetos HTML, CSS e JS
- Lorem Ipsum - Gerador de texto fictício
- Mapbox - Mapas e localização para desenvolvedores
- Memcached - Melhore o desempenho de seu website com cache
- Mockaroo - Gerador de dados para testes
- Mussum Ipsum - Gerador de texto fictício
- NPM HTTP-Server - Rode um servidor local com um pacote npm
- Password Generator - Um gerador de senhas simples com foco na segurança
- Online C Compiler - Ferramenta para compilar C online
- React Dev Tools - Ferramenta para debug do ReactJS
- React Hook Form - Valide seus formulários de projetos que utilizam React ou React Native
- RelaX - Crie expressões algébricas relacionais de consultas
- Responsive - Teste a responsividade do seu site
- Shields.io - Gerador de badges para markdown
- SSL Server Test - Testar SSL de sites
- StreamYard - O StreamYard é um estúdio de transmissões ao vivo no seu navegador
- Swagger - Ferramenta para projetar, construir, documentar e usar serviços da Web RESTful
- Tabela ASCII - Tabela completa com caracteres ASCII
- Telegram - Mensageiro criptografado
- TinyJPG - Comprima imagem do formato JPG
- TinyPNG - Comprima imagem do formato PNG
- Creately - Crie e altere lindos diagramas em tempo real com a sua equipe
- Carbon - Crie Snippets de codigo clean e bonitos
- DbDiagram - Crie elegrantes diagramas de banco de dados e gere script ddl
- SqlDesigner - Crie Diagramas de banco de dados de maneira rapida e gere script ddl
- W3.org - Validar HTML
- WakaTime - Gerencie seu tempo de desenvolvimento
- Web Developer - Extensão para Chrome com multi-funções
- Web.dev - Testar website (criado pela Google)
- WebPageTest - Testar perfomance de site
- Wedsites - Liste suas atividades e acompanhe seu progresso
- WordPress - Criação de blogs
- XML Sitemaps - Criador de sitemaps.xml
- Figma - ferramenta para design de interfaces.
- Insomnia - é um API Client, uma ferramenta para fazer testes de API's.
- Rive - ferramenta colaborativa de animação para apps, jogos e sites.
- CloudCraft - plataforma com foco em criar desenhos de arquiteturas AWS.
- BundlePhobia - site para descobrir o custo de adicionar um npm package no seu pacote.
- Font Flipper - Tinder das fontes, basta apertar X caso não goste e ❤ se você gostar, adicione aos favoritos já com o nome da fonte e faça o download pelo Google fonts.
- VisBug - é uma extensão de Chrome, criada pelo google, ferramenta de design que te permite mudar o layout das páginas da web desde o estilo de fontes até a posição dos elementos.
- ThunderClient - é um Rest API Client totalmente leve e compatível com Visual Studio Code. Idêntico ao Postman, ele serve para realizar testes com nossas requisções HTTP.
Extensões para o navegador para dar um apoio no seu desenvolvimento ou produtividade.
- ColorZilla
- CSS Viewer
- JSON Viewer
- JSON Formatter
- Lighthouse
- Octotree
- React Developer Tools
- Redux DevTools
- What Font
- Window Resizer
- Web Developer
- CSS Peeper
- Fake Filler
- Vimium
- Wappalyzer
- Clear Cache
- Markdown Here
- HTTPS Everywhere
- Ghostery
- Usersnap
- Block Yourself from Analytics
- f19N Obtrusive Live Test
- ColorPick Eyedropper
- Lorem Ipsum generator
- IE Tab
- Daily 2.0
- Toggl Button
- OneTap
- User CSS
- ModHeader
- Stylus
- PerfectPixel
- Web Vitals
- Live editor for CSS, Less & Sass
- WP Hive - WordPress Plugin Repo
- Lipsum Generator
- Tag Assistant Legacy by Google
- Checkbot: SEO, Web Speed & Security Tester
- Github Web IDE
- Outliner CSS
- SVG Export
Geradores de CSS para o seu projeto.
- UI Verse - Gerador de buttons, checkboxes, toggle switches, cards, loaders, inputs.
- Neumorphism - Tendência aplicação border-radius
- Fancy Border-Radius - Gerador de formas com border-radius no CSS
- WAIT! Animate - Gerador de animações de CSS
- Best CSS Button Generator - Gerador de botões do CSS
- HTML CSS JS Generator - Gerador de HTML/CSS/JS
- BennettFeely - Criador de clip-path
- Animista - Criador de animações
- Layoutit - Gerador de Grid para CSS
- CSS Gradient - Gerador de gradientes
- Keyframes - Site ajuda você a criar animações keyframes básica e complexas
- Glassmorphism - Site é usado para criar estética de vidro e gerar código CSS
- SVG Wave Generator - Um gerador de ondas SVG gratuito
- Bob SVG Generator - Site para criar formas SVG aleatórias, únicas e orgânicas
- Cubic Bezier - Ferramenta para Cubic-bezier()
- Shadow Generator - Gerador de sombras
- Glassmorphism CSS Generator - Gerador de glassmorphism
- Grabient - Gerador de gradientes
- Box Shadow - Gerador de box-shadow
- Box Shadows Dev - Gerador de box-shadow
- Drop Shadow - Gerador de drop-shadow
- CSS Bud - Gerador de box-shadow
- Shadow Palette - Gerador de sombras.
Ferramentas para procurar projetos open-source.