Introdução:

Não é de hoje que o mundo da programação está cheio de ferramentas. Isto ficou mais evidente para mim quando eu mexi um pouco com Node.js, onde eu precisava instalar diversas bibliotecas para algumas das mais variadas funções.

No entanto, existem inúmeras ferramentas, das mais variadas finalidades, e pode ser um tanto difícil encontra-las, uma vez que você não sabem nem que ela existe.

Observação:

1. Nem todas as ferramentas eu utilizei ativamente. Algumas eu utilize apenas para algo especifico ou algum amigo meu uso e recomendo. ENTÃO É ESTREITAMENTE RECOMENDADO VERIFICAR POR SI MESMO A SITUAÇÃO DO PROJETO NO GITHUB. Se a biblioteca ainda é mantida, se tem falhas de segurança e etc... Não sei quando você pode estar vendo isto, então é necessário avisar. No momento todos estão sendo atualizados e mantidos :)

2. Não estou afirmando que todas as ferramentas presentes aqui estão as melhores. Podem existir outras. Não existe isso de melhor, existe aquilo que resolve teu problema. Irei citar as que eu conheço com uma breve descrição. Atente-se se resolve o teu problema. De qualquer forma, mesmo que não tem um valor agora, pode ter no futuro, então sempre bom salvar em algum canto.

Ferramentas e sites utilitários:

Irei Listar alguns sites e ferramentas que podem ser úteis para realizar alguma atividade que não involva diretamente código.

Bootstap icons:

Bootstrap icons é onde eu obtenho svg de forma gratuita na maioria das vezes. A variedade é grande e você pode baixa-los individualmente. Também é possível constumiza-los em código (mudar cor, tamanho e etc..)

Link: icons.getbootstrap

Illustrations

Esta ferramenta é incrível e eu uso até para posts no instagram. Aqui tem svgs mais complexo, como ilustrações de pessoas e etc e tudo gratuitamente!

link: illustrations

Material Symbols

Esta aqui também é para svgs e é do google. Também tem uma vasta variedade e é gratuito.

link: Material Symbols

Carbon:

Quer criar aquela imagem bonita com código, conheça o carbon. Além da extensão para o vscode, também existe o site deles que faz a mesma coisa.

link: Carbon

PageSpeed Insight

Quer saber se teu site tá bom, teste ele no PageSpeed Insight gratuitamente. Aqui é onde eu pessoalmente gosto mensurar a qualidade geral de um site e tomo como base algumas alertas.

Lembrando que é "bom" no sentido desepenho, responsividade, acessibilidade e etc...

link: pagespeed

Music Loop

Este aqui, eu conheci aqui mesmo. Não me recordo de quem foi ou qual foi o post infelizmente . Mas já faz 2 anos desde então, e periodicamente eu uso. Esta ferramenta coloca vídeos do youtube em loop sem anúncios. Se você é como eu que periodicamente coloca aquela trilha sonora de Dark Souls de fundo, recomendo bastante.

link: ytb-music-loop

Gerador de Link para Whatsapp

Cliente pediu para adiciona um link de Whatsapp no site dele, então aqui esta:

link: socialhub.

obs: Utilizei apenas uma vez por alto. Recomendo pesquisar a fundo se quiser ter mais certeza sobre a procedência.

The Best Landing Page Design:

Procurando fonte de inspiração? Conheça este site aqui cheio de landing pages de alta qualidade.

link: landingfolio

World Vector Logo

Querendo logo de empresas? Procure neste site aqui:

Link: World Vector

Photopea:

Quer editar imagens ao estilo Photoshop gratuitamente e ainda por cima mais rápido? Conheça o Photopea:

link: photopea.com

Roadmap:

Está perdido entre as milhares de tecnologias que existem no mundo do Front-end, ou até mesmo sobre assuntos sobre PHP e JavaScript, então aqui esta sua solução:

link: roadmap.sh

Bibliotecas, Frameworkds e ferramentas de teste:

A lista aqui vai ser grande. Alguns tem funções similares, mas tem nuances diferentes.

Tailwindcss

Tailwindcss ganhou meu coração desde o ano passado e se mostrou poderoso naquilo que se propõe a fazer: Ser flexível, estilizar sites de maneira elegante e super leve.

link: tailwindcss.com

React:

Esta aqui, esta na lista por eu conhecer bem, afinal dediquei bastante tempo. Entretanto, pessoalmente eu não recomendo tanto assim, uma vez que eu aprendi, sei suas limitações... Mas, não podemos negar que esta em alta no momento e é amplamente utilizado no mercado, mas pode ser íngrime de aprender.

link: react.dev

Vue:

Assim como o React, é uma biblioteca para o JavaScript. Porém, Vue é mais simples, muito mais simples e tem ganhado bastante espaço no mercado atualmente.

link: vuejs.org

Angular

Assim como React e Vue, é uma biblioteca para JavaScript mantida pelo o google. Seu ecossistema é bem fechado, no sentido que você raramente irá precisar baixar uma biblioteca externa para algo, assim como no React que precisa ate para roteamento. O google mantém várias ferramentas que podem ser integradas junto ao Angular eles mesmo.

link: angular.dev

Jotai:

Amplamente utilizado no React, Jotai é um gerenciador de estados moderno e extremamente simples de utilizar.

Link: Jotai

RadixUi

é uma biblioteca de componentes pré-estilizados para criação rápida de sites bonitos e modernos.

link: Radix-UI

Sass

Eu encaxei aqui, mas isto na verdade é um pré-processador para CSS, que é extremamente útil com diversas funcionalidades. Para que de fato estou programando em CSS 😂

link: Sass

Vitest

Vitest é uma forma de testar o seu código sendo amplamente compatível com diversas tecnologias. Aprendam a testar o seu código!

link: vitest.dev

Jest

Alternativa ao Vitest para testar o seu código.

link: Jest

Astro

Chegou chegando tem um tempo, e do meu ponto de vista promete ser um sólido competidor com o Next.js. Andei notando que muitos já fizeram a substituição de Next.js para Astro.

link: Astro

Next.js

Minha ferramente principal no dia a dia. Next.js certamente inovou a forma que a web é construída e a equipe é fortemente impulsionada a sempre buscar o melhor. Quando se trata de SSR, eu diria que Next.js tem mais bagagem que muitas outras por ai.

link Next.js

Nuxt.js

Biblioteca baseada contruída em cima do Vue.js, enfim, para Vue.js. Se mostrou extremamente popular atualmente e dizem que foi inspirada pelo o Next.js que foi contruído em cima do React.

link: Nuxt

Shadcn ui

Biblioteca de componentes pré-configurado extremamente em alta. Lembrando que ele é apenas para React no momento, então, infelizmente outro amiguinhos não poderão tirar proveito.

Link: ui-shadcn

Conclusão:

Gostaram? Não pude trazer tudo pois existe um limite de 20.000 caracteres :( Mas espero ter ajudado de alguma forma.