All articles
StyleX: a biblioteca de CSS do Facebook para estilização em larga escala
StyleX: a biblioteca de CSS do Facebook para estilização em larga escala Você já passou horas tentando entender por que um botão azul ficou roxo só em uma página? Ou chegou ao fim de um projeto e descobriu...
6 min read
Valdi: o novo framework cross‑platform do Snapchat para apps nativos com TypeScript
Valdi: o novo framework cross‑platform do Snapchat para apps nativos com TypeScript Por que todo mundo está falando de Valdi? Se você é desenvolvedor ou acompanha as novidades do universo...
8 min read
Passive View: Simplificando a separação entre lógica e interface no desenvolvimento de interfaces
No desenvolvimento de software, uma das maiores dificuldades é manter a interface do usuário (UI) desacoplada da lógica de negócios. Quando esses dois aspectos estão misturados, o código pode se...
4 min read
Kotlin Multiplatform e Compose Multiplatform entenda o que são e para que servem no desenvolvimento mobile
Aprenda como Kotlin Multiplatform e Compose Multiplatform simplificam o desenvolvimento mobile multiplataforma. Entenda o que são, para que servem e como usá-los em projetos reais....
10 min read
Explicando MVVM para uma criança
Sempre fiz posts sobre o desenvolvimento web, mas agora comecei uma nova fase como desenvolvedor mobile na Stone Co. Por isso, decidi compartilhar um pouco do que estou aprendendo nessa área. Esse é o primeiro post de uma série voltada para desenvolvimento mobile, principalmente com Kotlin Multiplat...
3 min read
As 25 palavras reservadas do Go
Uma das características do Go é sua simplicidade e clareza. Projetada para ser fácil de aprender e usar, a linguagem evita a complexidade excessiva encontrada em algumas outras linguagens de programação. Parte dessa simplicidade é refletida no número limitado de palavras reservadas — apenas 25. Comp...
4 min read
O quanto um desenvolvedor Frontend deve conhecer sobre Backend?
No mundo do desenvolvimento web, as linhas entre frontend e backend estão cada vez mais tênues. Enquanto alguns desenvolvedores se especializam em uma dessas áreas, há uma crescente demanda por profissionais que compreendem bem ambas. Neste post, vamos explorar a importância do conhecimento de backe...
4 min read
Biome.js: Um novo lint e formatter para JavaScript e TypeScript
Manter um código limpo e bem formatado é essencial para a legibilidade e manutenção. Ferramentas como ESLint e Prettier têm sido os pilares dessa tarefa por anos. No entanto, uma nova ferramenta chamada Biome.js está emergindo como uma alternativa promissora oferecendo desempenho superior e uma expe...
4 min read
Explorando a nova API use do React 19: Simplificando a leitura de Promises e Contextos
O React 19 introduziu a nova API use, que traz uma abordagem simplificada e flexível para lidar com Promises e Contextos dentro dos componentes React. Neste artigo, vamos explorar os detalhes dessa API, seus benefícios e como ela pode mudar o dia a dia dos desenvolvedores React...
3 min read
Minha experiência aprendendo Golang
Nesse último mês tenho gastado meu tempo livre estudando Go, e nesse post quero contar um pouco como tem sido minha experiência nessa jornada de aprender uma stack nova. Antes de mais nada, o que é Go? Go, também conhecida como Golang, é uma linguagem de programação de código aberto desenvolvida pel...
4 min read
Como escolher a arquitetura de software ideal para o seu projeto
Hoje vou te mostrar uma abordagem relativamente simples, mas muito eficaz, que estou utilizando no meu dia a dia de engenheiro de software. Ela é baseada no movimento criado pelo Dan McKinley, que se chama Boring Technology. Vou te explicar como ela funciona...
5 min read
Como criar um monorepo utilizando o Turborepo
Você já se deparou com a questão de como organizar o código-fonte de um projeto grande e complexo? Se sim, você provavelmente já ouviu falar sobre o monorepo, uma abordagem que está se tornando cada vez mais popular entre equipes de desenvolvimento de software. Mas o que exatamente é um monorepo...
10 min read
Qual stack estou utilizando para desenvolver meus projetos em 2024
Em 2024, decidi me dedicar à criação de alguns Micro-SaaS como um objetivo pessoal. Para isso, precisei escolher uma stack que me permitisse desenvolver aplicações Full Stack de forma rápida e escalável. Foi aí que encontrei a stack que vou compartilhar neste post! Mas antes de tudo...
5 min read
O React 19 já está chegando, conheça as novas features!
O React está constantemente evoluindo, e a próxima grande atualização, a versão 19, está à vista, trazendo uma série de novidades. Neste artigo, vamos dar uma olhada nas últimas inovações que estão chegando, incluindo o React Compiler, as Actions, os React Canaries e novos hooks experimentais...
7 min read
Como integrar a API da OpenAI utilizando stream no Next.js
Se você não vive em uma caverna e está por dentro dos assuntos mais comentados dos últimos tempos, provavelmente já ouviu falar do ChatGPT. Este é um sistema de chat que se utiliza do modelo GPT (Generative Pre-trained Transformer) da OpenAI para interagir com usuários de maneira semelhante...
8 min read
Implementando Composition Pattern em aplicações React
Criar e manter uma aplicação React em grande escala é sempre um desafio, por isso existe patterns que nos ajudam a organizar melhor a estrutura do nosso app e tornar ele mais fácil dar manutenção. E hoje vou te mostrar um pattern que gosto muito de utilizar nas minhas aplicações, o Composition Patte...
4 min read
Entendendo Web Workers e como utilizá-los com React
Nos últimos anos, as aplicações web têm se tornado cada vez mais complexas e ricas em recursos, levando a uma maior demanda por processamento e gerenciamento de tarefas. Neste contexto, os Web Workers surgem como uma solução eficiente para melhorar o desempenho das aplicações...
9 min read
O que é, e para que serve o CORS (Cross-Origin Resource Sharing)?
CORS (Cross-Origin Resource Sharing) é um mecanismo de segurança em navegadores que restringe as solicitações HTTP de um domínio a outro domínio diferente do qual a solicitação foi originada. Em outras palavras, o CORS permite que um servidor especifique quais outros domínios podem acessar seus recu...
3 min read
Como transformar sua aplicação web em um aplicativo mobile em 5 minutos
Não, você não leu errado, vou te ensinar a como transformar uma aplicação web em uma aplicação mobile, e não é PWA (Progressive web app), para isso, vamos utilizar o Capacitor. O Capacitor é um runtime nativo multiplataforma que facilita a criação de aplicativos móveis de alto desempenho que funcion...
7 min read
Como construir aplicações web mais rápidas, acessíveis e sustentáveis
Como desenvolvedor, a preocupação com o desempenho, acessibilidade e sustentabilidade dos nossos projetos é essencial para entregar experiências de alta qualidade para os usuários. Neste artigo, vou compartilhar algumas ferramentas valiosas que uso no meu dia a dia para monitorar e melhorar esses as...
3 min read
Como melhorar o desempenho de aplicações React com Code Splitting
O desempenho é um fator crítico no sucesso de qualquer aplicação web. Uma aplicação rápida e responsiva pode proporcionar uma excelente experiência para o seu usuário, enquanto uma aplicação lenta pode gerar frustrações. Uma abordagem importante para melhorar o desempenho de suas aplicações React é ...
3 min read
O que são React Server Components?
Nos últimos dias o React Server Components vem sendo bem falado pela comunidade em geral, mas você sabe o que é isso, para que serve e qual dor ele vem resolver? Vem comigo que vou te explicar tudo o que você precisa saber sobre o RSC. Antes de mais nada, o que é React Server Componentes? O React Se...
6 min read
10 hooks do React que você precisa conhecer
O React é uma biblioteca JavaScript amplamente usada para criar interfaces de usuário. Uma das suas características mais valiosas é o sistema de Hooks, que permite o uso de estado e outros recursos do React sem a necessidade de escrever uma classe. Embora o useState e o useEffect sejam os Hooks mais...
5 min read
Como melhorar a acessibilidade em aplicações React
A acessibilidade é uma parte essencial do desenvolvimento de aplicações web, garantindo que todos os usuários, incluindo aqueles com deficiências, possam utilizar nossos produtos de forma eficiente e eficaz. Neste post, abordarei algumas técnicas para aplicar acessibilidade em aplicações React. Vamo...
6 min read
Monitorando as atividades dos seus usuários usando o Microsoft Clarity em aplicações React
Como disse o Nadella, manter a atenção e o engajamento do usuário é uma commodity extremamente valiosa, e como fazer isso? Um dos principais pontos é entender qual é o comportamento do seu usuário! Coletar dados de como o usuário está se comportando dentro da sua aplicação é uma ferramenta poderosa ...
5 min read
Arquitetura para aplicações React v2
A aproximadamente um ano atrás fiz um post falando sobre como eu criava a arquitetura das aplicações em React, porém já se passo um bom tempo, e já estava na hora de fazer um update naquela estrutura. Esse post é para te mostrar a nova maneira como estou criando minhas aplicações React...
5 min read
Pare de usar variáveis de ambiente do jeito errado
Algum dia você já ficou procurando o que estava quebrando sua aplicação, e depois de um bom tempo descobriu que esqueceu de alguma variável de ambiente? Eu já, várias e várias vezes… Hoje venho te mostrar como acabar de vez com esse problema...
3 min read
Criando uma biblioteca de Design System utilizando React
Design System é um documento vivo com todos os componentes e suas variações de um produto ou serviço, para facilitar tanto a comunicação entre times como o desenvolvimento final do produto. Ele facilita a manter a constância do design do produto. A ideia é que...
10 min read
O que são Micro-frontends?
A algum tempo atrás, estávamos acostumados a criar aplicações monolíticas, ou seja, o frontend e o backend ficavam na mesma camada. E com a evolução da área surgiu os micro-serviços, onde conseguimos criar soluções independentes...
4 min read
Você ainda usa CREATE-REACT-APP em 2022?
Se você ainda usa CRA para criar suas aplicações React, eu tenho uma alternativa que pode ser melhor! VITE é uma ferramenta de construção que visa fornecer uma experiência de desenvolvimento mais rápida e enxuta para projetos webs...
4 min read
Arquitetura para aplicações Next.js
Recentemente fiz um post mostrando como monto a arquitetura das minhas aplicações utilizando React, se você não viu da uma olhada aqui, vai curtir bastante! E algumas pessoas me perguntaram como eu fazia com o...
4 min read
Feature escondida do navegador que pode mudar como você desenvolve sua UI
Recentemente descobri essa feature que tem otimizado meu trabalho durante o desenvolvimento de uma aplicação que é o document.designMode, se você também não conhece, se liga em um exemplo de como ela funciona...
2 min read
Refresh Token com Axios Interceptors e fila de requisições
A um tempo atrás eu estava com problemas de refreshToken na aplicação de um cliente, o que acontecia era que a página Dashboard chamava 3 endpoints diferentes, e quando dava erro 401 (Unauthorized), meu interceptor que criei dentro...
3 min read
Root import com React e TypeScript
Aposto que você já se perdeu nos caminhos relativos na hora de importar algo em sua aplicação certo? Então hoje vou te mostrar como resolvi esse problema nas minhas aplicações e nunca mais precisei perder tempo descobrindo...
3 min read
Arquitetura para aplicações React
Hoje vou mostrar como crio a arquitetura das minhas aplicações front-end utilizando React, escalável e de uma forma organizada para ser de fácil entendimento e manutenção do código....
4 min read
Criando uma documentação com StoryBook para React
Hoje vou te mostrar uma ferramenta que vem ganhando bastante espaço na comunidade e no mercado, que é ninguém menos que o Storybook, uma ferramenta Open Source que prepara um...
4 min read
Arquitetura de projetos React com diferentes módulos
Por ser uma lib, o React não cria muitas regras em como você deve organizar e estruturar seus projetos. E isso é muito legal, nos da a liberdade de criar como nós quisermos...
4 min read
Dark Mode com React JS e Styled Components
Fala devs, beleza? Hoje vou ensinar para vocês um jeito bem simples de como criar o Dark Mode na sua aplicação React JS utilizando apenas Styled Components...
3 min read
Como criar email forwarding gratuitos para seu domínio
Esses dias fiz um post sobre a hospedagem da Vercel, ensinando como fazer deploy de uma aplicação que você pode ver por aqui. Durante o meu uso do dia a dia, senti falta de um serviço de e-mail personalizado com o meu domínio, por exemplo...
3 min read
A melhor documentação do mundo!
Hoje vou compartilhar com vocês uma dica incrível de como usar o GitHub como documentação...
2 min read
A melhor hospedagem grátis para o seu Front-End
Sempre usei os serviços da Hostinger Brasil para hospedar minhas aplicações, e nunca tive problemas, porém fiz uma nova versão do meu site pessoal utilizando React, e senti a falta de um deploy automático...
3 min read
Refresh Token usando Axios Interceptors
Axios é um cliente HTTP, que funciona tanto no browser quanto em Node.Js. A biblioteca é basicamente uma API que sabe interagir tanto com XMLHttpRequest quanto com a interface HTTP do N...
2 min read
O dia em que transformei uma caixa cinza em um jogo 2D
Durante essa semana participei da #ImersaoGameDev da Alura. Foram 5 dias em que o Guilherme Lima, Paulo Silveira e a Juliana Negreiros se dedicar...
2 min read
A extensão que todo Front End deveria conhecer
Esses dias me deparei com a extensão VisBug achei tão incrível que resolvi compartilhar, ela trás diversos design debug tools para o navegador como...
2 min read