OG Image Generator - o que aprendi construindo a Tool #1
Sete dias de código, cinco paletas, três bugs sérios e uma marca d'agua. O post-mortem da primeira ferramenta do CajuOS.
O começo
A ideia parecia simples. Uma página com um canvas, dois campos de texto e um botão de download. O usuário digita um título, escolhe uma cor, baixa um PNG 1200x630.
No papel, cabia em tres horas.
Na pratica, levou uma semana inteira. Entrega final no sabado a noite, 23h47, com um bug de renderizacao no Safari que so apareceu depois do deploy.
Esse texto e o que deu certo, o que deu errado e o que muda na proxima.
O que deu certo
Canvas API e mais simples do que parece
Eu nunca tinha usado Canvas API a serio. Sempre achei que precisava de uma biblioteca como fabric.js, konva ou pixi. Mas pra desenhar texto, retangulos e linhas, a API nativa resolve.
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, 1200, 630);
ctx.fillStyle = "#18181b";
ctx.font = "bold 56px Geist, sans-serif";
ctx.fillText("Meu titulo", 80, 200);
Nao precisa de mais nada. O toBlob() gera o PNG na hora.
Path2D salvou os icones
Na primeira versao dos icones decorativos, eu tentei fazer compositing com source-atop. Funcionava no Chrome, quebrava no Firefox e no Safari. Troquei por Path2D direto com ctx.stroke(). Zero dependencia de imagem externa, funciona em todo browser.
Paletas fixas foram a decisao certa
Deixar o usuario escolher qualquer cor do espectro parecia o caminho mais flexivel. Na pratica, 90% das pessoas nao sabem que cor funciona em fundo branco. Oferecer 5 opcoes curadas eliminou decisao sem eliminar controle.
O que deu errado
Subestimei o Safari
Tres vezes. Primeiro com o source-atop dos icones. Depois com o toBlob() que no Safari nao aceita o parametro type do mesmo jeito. E por ultimo com o word-wrap manual no canvas. O Safari renderiza measureText() com kerning diferente do Chrome, entao as quebras de linha ficavam em lugares diferentes.
A licao: testar no Safari antes de lancar, nao depois.
O fundo procedural foi scope creep
A v1.1 ganhou um gerador de fundo procedural: gradiente, blob radial, grid de dots, streaks, glow circles. Sao cinco camadas de canvas. Ficou bonito, mas consumiu dois dias que poderiam ter ido pra feature mais util. Suporte a upload de logo, por exemplo.
Licao aprendida: efeito visual bonito nao e feature. A pergunta certa e "o usuario pediu isso?". Ninguem pediu fundo procedural.
O download falhou no iOS
O canvas.toBlob() gera um blob. Mas o iOS Safari nao permite download direto de blob URLs criados por scripts. Precisei converter pra objeto URL e abrir em nova aba como fallback. Mais uma meia hora de debug em dispositivo que eu nao tinha em maos.
Numeros
| Metrica | Valor | |---|---| | Tempo total (primeira versao) | ~30 horas | | Linhas de codigo (componente principal) | ~400 | | Paletas | 5 | | Versoes ate o lancamento | 3 | | Bugs pos-deploy | 2 (Safari + iOS) | | Dias do prazo original | 7 | | Hora do deploy | 23h47 |
O que muda na Tool #2
- Testar em Safari e iOS primeiro. Nao no final.
- Menos efeito visual, mais utilidade. A proxima tool nao vai ter fundo procedural.
- Prazo mais justo. Tres horas nao e estimativa, e palpite. Se a tool parecer simples demais, provavelmente tem detalhe escondido.
No fim
A OG Image Generator esta no ar, funciona, as pessoas usam. O post-mortem parece negativo porque destaca os erros, mas o saldo e positivo.
A Tool #2 vem na semana que vem. O codigo ta no GitHub.