[{"data":1,"prerenderedAt":118},["ShallowReactive",2],{"work-pt-10k-switches":3},{"id":4,"title":5,"author":6,"body":7,"company":98,"date":99,"description":100,"extension":101,"highlight":102,"meta":103,"navigation":102,"path":104,"role":105,"seo":106,"sitemap":107,"stem":108,"tags":109,"thumbnail":32,"year":116,"__hash__":117},"work\u002Fwork\u002Fpt\u002F10k-switches.md","10k Switches","Salguento",{"type":8,"value":9,"toc":90},"minimark",[10,15,19,23,26,37,46,50,58,61,65,72,75,84],[11,12,14],"h2",{"id":13},"projeto","Projeto",[16,17,18],"p",{},"Experimento web colaborativo com 10 mil switches persistentes. Qualquer visitante pode ligar ou desligar um item, escolher entre seis cores e acompanhar em tempo real as alterações feitas por outras pessoas. A navegação exibe o total de switches ativos e a quantidade de interações realizadas na sessão.",[11,20,22],{"id":21},"interface-e-design","Interface e Design",[16,24,25],{},"A interface usa uma grade responsiva, tema claro ou escuro e controles compactos para manter o foco no comportamento coletivo. A identidade visual deriva do próprio componente de switch e utiliza azul sobre cinza. Os controles têm identificação acessível, estado de processamento e foco visível para navegação por teclado.",[16,27,28,33],{},[29,30],"img",{"alt":31,"src":32},"Identidade visual do 10k Switches.","\u002Fimg\u002Fwork\u002F10k-switches\u002Fcover-10k-switches.png",[34,35,36],"em",{},"Identidade visual do projeto.",[16,38,39,43],{},[29,40],{"alt":41,"src":42},"Interface do 10k Switches com a grade de switches.","\u002Fimg\u002Fwork\u002F10k-switches\u002Fsite-10k-switches.png",[34,44,45],{},"Interface do experimento colaborativo.",[11,47,49],{"id":48},"arquitetura-técnica","Arquitetura Técnica",[16,51,52,53,57],{},"O frontend é uma aplicação SvelteKit escrita em TypeScript e estilizada com Tailwind CSS. O build usa ",[54,55,56],"code",{},"adapter-static",", gera arquivos Brotli e Gzip e carrega o cliente Supabase de forma assíncrona após a hidratação. O Supabase fornece persistência em PostgreSQL, API REST e sincronização por Realtime.",[16,59,60],{},"A carga inicial consulta a primeira página com a contagem exata e busca os lotes restantes em paralelo. Uma assinatura Realtime é iniciada antes da consulta; eventos recebidos durante o carregamento ficam em uma fila e são aplicados de forma idempotente após a montagem dos dados. Um mapa não reativo relaciona cada identificador à sua posição, permitindo atualizações em tempo constante, enquanto inserções ordenadas usam busca binária.",[11,62,64],{"id":63},"desempenho-e-confiabilidade","Desempenho e Confiabilidade",[16,66,67,68,71],{},"A grade virtual renderiza apenas as linhas visíveis e uma pequena área excedente, adaptando-se a 5, 8, 16 ou 25 colunas. O cálculo da janela é limitado por ",[54,69,70],{},"requestAnimationFrame"," e evita leituras de layout durante a rolagem. Alterações locais são otimistas, bloqueiam cliques concorrentes e fazem rollback em caso de erro; a confirmação local mantém os contadores corretos mesmo sem Realtime.",[16,73,74],{},"O projeto possui validação com ESLint, Prettier e Svelte Check. Um workflow do GitHub Actions executa consultas periódicas somente leitura para manter atividade no banco do plano gratuito.",[16,76,77],{},[78,79,83],"a",{":rel":80,":target":81,"href":82},"noreferrer","_blank","https:\u002F\u002F10kswitches.salguento.xyz","Web App",[16,85,86],{},[78,87,89],{":rel":80,":target":81,"href":88},"https:\u002F\u002Fgithub.com\u002Fsalguento\u002F10k-switches","GitHub",{"title":91,"searchDepth":92,"depth":92,"links":93},"",2,[94,95,96,97],{"id":13,"depth":92,"text":14},{"id":21,"depth":92,"text":22},{"id":48,"depth":92,"text":49},{"id":63,"depth":92,"text":64},"Autoral","2025-04","Experimento colaborativo com 10 mil switches sincronizados em tempo real","md",true,{},"\u002Fwork\u002Fpt\u002F10k-switches","Desenvolvedor",{"title":5,"description":100},{"loc":104},"work\u002Fpt\u002F10k-switches",[110,111,112,113,114,115],"TypeScript","SvelteKit","Supabase","Realtime","TailwindCSS","Bun",2025,"7GhfGi2KLyZYQlAnyE8_jguVQvz6sX7MAqAN_cr9VfU",1785182831364]