36 posts
O PataPass era um site com cara de app — e o navegador deixava isso claro na pior hora possível: no elevador, sem sinal. A história da Fase 4F: banner de instalação com beforeinstallprompt, página offline no service worker e a decisão de nunca cachear HTML.
PataPass was a website wearing an app costume — and the browser made that obvious at the worst possible moment: inside an elevator with no signal. The story of Phase 4F: an install banner driven by beforeinstallprompt, an offline page served by the service worker, and the decision to never cache HTML.
React hydration error #418 in the portfolio footer, a mystery that only happened at night: the server renders in UTC, the visitor in local time, and a new Date() in JSX gave each of them a different answer. The hunt for the useState(null), the pinned timeZone, and the epilogue where I myself created a second bug while fixing the first.
Erro #418 do React no rodapé do portfólio, um mistério que só acontecia à noite: o servidor renderiza em UTC, o visitante em fuso local, e o new Date() no JSX devolvia respostas diferentes pra cada um. A caçada até o useState(null), o timeZone pinado, e o epílogo em que eu mesmo criei um segundo bug arrumando o primeiro.
The portfolio hero typed, erased, and retyped — not as an effect, but as a bug: deferred hydration mounted the component and reset the text already on screen. The story of how LCP dropped from 3.6s to 2.7s by removing idle-hydration from the wrong place.
O hero do portfólio digitava, apagava e redigitava — não por efeito, mas por bug: a hidratação adiada montava o componente e zerava o texto que já estava na tela. A história de como o LCP de 3.6s caiu pra 2.7s removendo a hidratação ociosa do lugar errado.
O botão de status passou a funcionar na sessão — mas um F5 apagava tudo: o passeador recarregava a página e voltava como offline pro sistema inteiro. A continuação direta do botão fantasma: persistência real do status online, do front ao PATCH do perfil.
The status button finally worked within the session — but an F5 wiped it all: a reload brought the walker back offline for the entire system. The direct sequel to the ghost button: real persistence of the online status, from the frontend down to the profile PATCH.
O toggle 'Ficar Online' do walker renderizava, animava e até mudava de cor. Mas o handler era uma função vazia: o estado nunca saía de 'online'. A história de como um teste de loop pegou um botão fantasma e devolveu o status online de verdade.
The walker toggle 'Go Online' rendered, animated, and even changed color. But the handler was an empty function: the state never left 'online'. The story of how a test loop caught a ghost button and gave back real online status.
Um CRUD novo no hub pessoal, com grupos, prioridades e status — e um bug silencioso: o helper apiFetch já montava /api, e eu chamei /api/pedidos por cima. Nasceu o /api/api/pedidos que ninguém via.
A brand-new CRUD in the personal hub, with groups, priorities and status — and a silent bug: the apiFetch helper already prepends /api, and I called /api/pedidos on top of it. /api/api/pedidos was born, and nobody saw it.
Antes, o dashboard carregava seção por seção e eu ainda montava o quadro do ecossistema na cabeça. Nasceu o Executive Hub: um endpoint que agrega projetos, backups, alertas e infra em uma única chamada, com falha silenciosa e zero SSRF.
The home dashboard used to load section by section, and I still had to assemble the big picture in my head. Enter the Executive Hub: one endpoint aggregating projects, backups, alerts and infra in a single call, with graceful failure and zero SSRF.
When the theme toggle animation revealed the old theme instead of the new one, the fault was not in the CSS — React had not committed the state in time.
Quando a animacao de troca de tema revelava o tema antigo em vez do novo, a culpa nao era do CSS — era do React nao ter commitado o estado a tempo.
When reordering a single admin view reset all other views' configs. The story of the controlled LayoutEditor, strict section whitelists, and how one PUT became zero.
O Dashboard do Capivara tinha 994 linhas e era impossível de manter. Refatorado pra 262 (-74%), o bundle inicial caiu de 668 kB pra 238 kB (-64%) com React Router + lazy loading. A lição: componente gigante não é feature — é dívida técnica disfarçada.
The Capivara Dashboard had 994 lines and was impossible to maintain. Refactored to 262 (-74%), the initial bundle dropped from 668 kB to 238 kB (-64%) with React Router + lazy loading. The lesson: a giant component isn't a feature — it's disguised technical debt.
529 commits, 218 testes, 5 mini-games, parallax scene multicamada, terminal interativo com 15+ comandos, i18n PT/EN — a jornada de um portfólio que virou vitrine interativa.
529 commits, 218 tests, 5 mini-games, multi-layer parallax scene, interactive terminal with 15+ commands, full PT/EN i18n — the journey of a portfolio that became an interactive showcase.
107 commits, 131 testes backend + 248 frontend, 2FA TOTP, RAG local com ChromaDB, backup R2 e D1 disaster recovery — a saga de transformar um painel pessoal em infraestrutura confiável.
107 commits, 131 backend tests + 248 frontend, 2FA TOTP, local RAG with ChromaDB, R2 backup and D1 disaster recovery — the saga of turning a personal dashboard into reliable infrastructure.
Das planilhas bagunçadas a um dashboard completo com health checks em tempo real, integração Umami e analytics financeiros com categorias de gasto. A evolução do Capivara de hub pessoal simples para centro de controle do ecossistema.
From messy spreadsheets to a full dashboard with real-time health checks, Umami integration, and financial analytics with spending categories. The evolution of Capivara from a simple personal hub to the ecosystem's control center.