Guia de Ferramentas e Extensões

🎯 O guia para alavancar a sua carreira

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:}

💌 Doações

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.

Clique aqui para realizar realizar uma doação! 💓

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.

📕 E-Book

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

⚠️ Aviso importante

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]

💡 Nossa proposta

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

Acompanhe outros guias desenvolvidos para te ajudar na sua carreira como desenvolvedor.

🔰 Para quem está começando agora

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! 👊

🚨 Colabore

Abra Pull Requests com atualizações
Discuta ideias em Issues
Compartilhe o repositório com a sua comunidade

🌍 Tradução

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.

・English — Click Here
・Spanish — Click Here
・Chinese — Click Here
・Hindi — Click Here
・Arabic — Click Here
・French — Click Here
・Italian — Click Here
・Korean — Click Here
・Russian — Click Here
・German — Click Here
・Japanese — Click Here

🛠️ Ferramentas e Extensões

⚒️ Ferramentas para desenvolvimento:

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 seu navegador

Extensões para o navegador para dar um apoio no seu desenvolvimento ou produtividade.

⚙️ Geradores de CSS

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 buscar projetos open source

Ferramentas para procurar projetos open-source.

arthurspk/guiadeferramentas

arthurspk

Reviews

Repository Details