Frontend10 min
Evolução do framework: clone do Twitter | guia prático
Após meses sem vídeo: avanços do framework próprio e por que clonar o Twitter é o exercício escolhido para mostrar o que mudou na DX e na arquitetura
#Framework#Twitter
01 / ARTIGOS
Conteúdo em Frontend
Frontend10 min
Figma para código: carta responsiva
Do Figma ao browser: a mesma carta precisa sobreviver mobile, tablet e desktop sem inventar layout no meio do encode.
#Figma#Responsivo
Frontend10 min
GSAP: animações de scroll que fazem sentido | guia prático
Módulo de GSAP: o que é, para que serve e quando animação no scroll melhora a narrativa do site em vez de virar efeito barato na prática
#GSAP#JavaScript
Frontend10 min
Landing: scroll que vira seção fluida
Quando um bloco parece 'plataforma solta', o trabalho é transformá-lo em seção fluida no scroll — hierarquia e ritmo visual.
#Landing#UX
Frontend10 min
Libs React em cima do shadcn/ui
Há ótimas libs de componentes sobre shadcn/ui — mas 'a melhor' muda rápido. Escolha por critérios e teste antes de adotar.
#shadcn#React
Frontend11 min
React ganhou a guerra dos frameworks? O mapa atual
Saiu um framework por semana. Agora o jogo é ecossistema, não só reatividade nova.
#React#Frontend
Frontend4 min
React Icons: benefício real do tree-shaking na prática
Por que React Icons ganha de sprite gigante quando o import é correto — e como pesquisar o ícone certo sem poluir o bundle. Critérios de decisão, a...
#React#Ícones
Frontend6 min
React Icons: ícones otimizados no React na prática
Como usar React Icons sem inflar bundle: import tree-shakeable, escolha de set e quando um SVG local ainda é melhor. Critérios de decisão, armadilh...
#React#Ícones
Frontend12 min
Realtime em Next.js: além do setup Socket.io
Express+Socket.io funciona até escalar dor de cabeça. Há caminhos mais simples para features ao vivo.
#Next.js#Realtime
Frontend10 min
ShadCN + Unicorn Studio + GreenSock
ShadCN é base, não destino: Unicorn Studio + GreenSock elevam o visual — se você proteger performance e acessibilidade.
#ShadCN#GSAP
Frontend10 min
TanStack Query: 3 funções que você ignora | guia prático
Mais de 30% dos apps React usam TanStack Query — mas poucos exploram recursos novos. Três funções (stable + experimentais) para extrair mais da lib
#TanStack#React
Frontend11 min
UI do site ainda manda — mesmo usando Cursor no fluxo
Usuário julga o projeto pela interface. O que a IA não substitui, como usar referência e um checklist visual mínimo. na prática para builders
#Frontend#Prática
Frontend11 min
Flexbox: centralizar div de verdade | guia prático
Centralizar é fácil quando o eixo está claro.
#CSS#Flexbox
Frontend11 min
Front Rocket: lista de products dinâmica | guia prático
Dado dinâmico é o mínimo de produto.
#React#Front
Frontend11 min
TanStack Router: params type-safe | guia prático — guia Craz
Link type-safe é DX e menos 404.
#TanStack#Router
Frontend11 min
TanStack Router no React com Vite | guia prático — guia Craz
Router type-safe reduz link quebrado.
#TanStack#React
Frontend10 min
Next.js & Shadcn UI: Gestão de Projetos UI
Crie interfaces de gestão de projetos com Next.js e Shadcn UI! Inspire-se no Linear para UIs responsivas e modernas. Melhores práticas e dicas de desenvolvimento.
#Next.js#TypeScript
Frontend9 min
Shadcn Address Autocomplete Implementing
Explore o `shadcn-address-autocomplete`, um componente que demonstra como integrar o Google Places API com shadcn/ui para criar campos de autocompletar endereço eficientes e modernos em aplicações Next.js.
#Address Autocomplete#Google Places Api
Frontend10 min
shadcn Admin: dashboards com UI moderna
shadcn-admin: blueprint de painel (sidebar/tema). Auth e dados ainda são seus.
#Admin Dashboard#shadcn/ui
Frontend10 min
Shadcn Multi Select Component Advanced Form
Explore o `shadcn-multi-select-component`, um projeto que demonstra como criar um componente de seleção múltipla personalizável e acessível, utilizando shadcn/ui e Radix UI em aplicações Next.js.
#Multi-select#shadcn/ui
Frontend11 min
shadcn Table: data tables avançadas no Next.js
Data tables shadcn/Next: server-side pagination/sort/filter quando o volume cresce.
#Next.js#React Table
Frontend9 min
shadcn-chat: interfaces de chat com CLI e shadcn/ui
CLI de chat UI no espírito shadcn: composição e streaming — não é o kit de chatbot IA.
#Chat Application#shadcn/ui
Frontend15 min
A Transformação Radical do Front-end: O que Você Precisa Saber
Tudo o que você precisa para não ficar para trás nas novas tendências, ferramentas e práticas de front-end em 2025.
#Front-end#2025
Frontend15 min
Como automatizar testes end-to-end no front-end com IA: aprenda
Como você pode automatizar todo o ciclo de testes da sua aplicação front-end, usando inteligência artificial e o poder do MCP do Sprite. Veja exemplos práticos, principais vantagens
#automação de testes#inteligência artificial
Frontend17 min
Como Criar Landing Pages Originais com Claude Design 2.0 e IA
Use IA de verdade para fugir do 'AI slop' e produzir interfaces marcantes, modernas e com personalidade. Guia prático direto, sem enrolação.
#Claude#Fable
Frontend15 min
Como não perder código e destravar HTML, CSS, IA e Uploads na prática
O segredo para nunca mais perder seu código, aprender a programar com confiança e turbinar seus estudos web com inteligência artificial e uploads fáceis. Um passo a passo
#HTML#CSS
Frontend15 min
Desbloqueando o Poder do Tema: Como o Foco Transforma sua Aplicação
Como a escolha cuidadosa do tema impacta cada aspecto de um produto digital moderno – da performance ao engajamento, descubra as maiores lições do Dev Doido.
#tema#UI
Frontend15 min
Dominando Hero Section com AI: Desafio de Design inédito
Como usar inteligência artificial para criar hero sections excepcionais, otimizando prompts de UI em um experimento prático e gratuito.
#AI#UI
Frontend15 min
Landing Page Cloude Code: Estrutura Profissional, SEO Real, Sites
A ilusão dos sites bonitos acaba quando o cliente coloca a mão. Descubra como gerar websites com estrutura real, design flexível e SEO de verdade em tempo recorde
#web design#cloude code
Frontend15 min
Landing Pages 3D: Como Criar Efeitos Impressionantes com Spline +
Aprenda, passo a passo, a construir landing pages realmente animadas com Spline e Antigravity, usando inteligência artificial, recursos 3D, integração rápida e segredos avançados de design de vibe.
#Spline#Antigravity