Dwitter - coleção de demos em JavaScript com 140 caracteres

 (beta.dwitter.net)
8 pontos por GN⁺ 2026-01-11 | 2 comentários | Compartilhar no WhatsApp
  • Dwitter é uma plataforma onde é possível criar e compartilhar demos visuais com código JavaScript de até 140 caracteres
  • Cada publicação é chamada de "dweet" e exibe, junto com o código, animações gráficas executadas instantaneamente
  • Os usuários interagem por meio de comentários, remixes e hashtags, e a modificação e recriação de código acontece de forma ativa
  • É possível explorar conteúdos populares com vários critérios de ordenação, como hot, new, top (semana/mês/ano/geral)
  • Um espaço de experimentação em programação criativa que implementa efeitos visuais complexos com código curto

Visão geral do Dwitter.net

  • O Dwitter.net é uma plataforma web para criar demos visuais com código JavaScript limitado a 140 caracteres
    • Cada demo é chamada de "dweet" e gera gráficos animados executados instantaneamente no navegador
    • Após fazer login, o usuário pode criar um novo dweet ou remixar (remix) uma obra existente
  • O site permite explorar conteúdos populares com vários critérios de ordenação, como hot, new, top (semana/mês/ano/geral)
  • Cada dweet inclui funções de compartilhar, tela cheia, denunciar e comentar

Exemplos de dweets em destaque

  • "Bubble universe colour expansion" é valorizado por suas cores variadas e efeito visual marcante
    • Nos comentários, recebeu reações como "A whole universe!"
  • "Ants! 🐜" é uma obra que retrata um grupo de formigas com código curto, recebendo elogios como "god level dweetage!"
  • "Trees, shadows, hills." é uma animação que descreve árvores, sombras e colinas, e recebeu comentários como "Amazing stuff!"
  • "Flight Over Destroyed City ✈️" implementa uma cena de voo sobre uma cidade destruída
    • Nos comentários, surgiram reações bem-humoradas como "i love the smell of sulfur and uranium in the morning"
  • "Solar Orbit ☀️🌘" implementa uma órbita planetária em 140 bytes e provoca espanto com comentários como "How did you fit a whole planetary system in 140 BYTES OF JAVASCRIPT!?!?"

Atividade da comunidade e cultura de remix

  • Cada dweet pode ser remixado com base no código de outro usuário, com o link do original indicado
  • Os comentários misturam feedback técnico, impressões e humor, formando um ambiente de comunidade bastante ativo
  • Com a função de hashtags, é possível explorar temas como #space, #galaxy, #lighting, #scene

Características técnicas

  • A maior parte do código é compactada na forma eval(unescape(escape...)), implementando o máximo de efeito visual dentro do limite de 140 caracteres
  • No código, o foco está no uso da Canvas API para representar formas, cores e movimento
  • Cada dweet mostra o comprimento do código (por exemplo, "// 136/140"), fazendo de otimização e técnicas de compressão elementos importantes

Um espaço para experimentação em programação criativa

  • O Dwitter combina code golf e arte visual, incentivando uma competição criativa entre desenvolvedores
  • O processo de criar resultados visuais complexos com código simples é visto como uma forma de estética da programação
  • A plataforma funciona como um espaço experimental que explora a fronteira entre expressão artística e compressão técnica

Leituras relacionadas

2 comentários

 
roxie 2026-02-27

É realmente impressionante.
 
GN⁺ 2026-01-11
Comentários do Hacker News
  • Fiquei feliz em ver isso no HN :D
    Desculpem por ter que reiniciar o servidor rapidinho. Graças à lição que aprendi da última vez que algo parecido aconteceu, redimensionei o DigitalOcean droplet
  • É legal, mas quando você impõe um limite por número de caracteres, surge um metajogo de comprimir caracteres ASCII usando caracteres Unicode multibyte
    Por exemplo, algo como eval(unescape(escape\<<97 wide characters>>`.replace(/u../g,'')))`, restaurando 194 caracteres ASCII a partir de 97 caracteres Unicode
    Eu preferiria um acordo no estilo do diálogo entre Ford Prefect e Mr Prosser: “vamos considerar que colocamos 194 caracteres dentro de 140 e simplesmente mostrar”
    É uma lógica parecida com o limite de 4096 bytes nas demoparties, em que na prática você comprime 12~20KB com Crinkler para caber
    • O frontend beta em beta.dwitter.net/top tem um toggle de “compressed”, então dá para ver do jeito que você preferir
    • Outra opção é simplesmente limitar por bytes em UTF-8 (por exemplo, 140 bytes)
    • 140 bytes equivalem a cerca de 160 caracteres ASCII. Excluindo caracteres de controle, dá para ir até 170 caracteres
    • Acho que este comentário foi o que recebeu mais respostas entre os que já vi no HN :-)
    • Fico feliz por alguém ter percebido a referência a HHG (Hitchhiker’s Guide)
  • Neste inverno, o Dwitter completa 10 anos
    Fui procurar uma entrevista antiga e achei interessante: entrevista no Medium
    A verdadeira mágica está na comunidade: comunidade no Discord
  • Organizei uma coleção de esboços generativos feitos no Dwitter em até 140 caracteres
  • Antigamente participei de uma pequena competição na edição Authotokey do Dwitter e venci com uma animação de engrenagens
    GIF animado
    Mais detalhes no post do fórum do Autohotkey
  • Quando vejo sites como o Dwitter, minha confiança na criatividade humana se renova
    Com restrições, a diversidade explode. Ilusões visuais, frases curtas, experimentos em direções inesperadas
    Restrições induzem foco e reduzem o custo do fracasso, incentivando a experimentação
    A maioria das plataformas tenta expandir a criatividade adicionando recursos, mas acaba tornando tudo mais complexo
    Eu sempre volto à regra de que restrição cria diversão
    Fico curioso sobre quando restrições produzem resultados melhores e quando elas parecem artificiais
  • Na época inicial do Twitter, eu era profundamente viciado em code golf de 140 bytes
    Essa experiência mudou completamente a minha forma de pensar código
    Em uma pequena comunidade, compartilhávamos técnicas para economizar bytes e fazíamos de tudo, de renderização de Mandelbrot a resolvedores de Sudoku
    Dez anos depois, fiquei realmente surpreso ao encontrar uma implementação de UUID que eu havia feito naquela época no codebase da minha empresa
    Links relacionados: vídeo no YouTube, Byte-saving techniques, UUID gist
  • Hoje descobri pela primeira vez que: 
    js_func`string`
    isso é sintaxe JS válida. js_func é chamado como um tagged template literal
    Agora vou começar a usar coisas como console.log\weeee``
    • Algumas bibliotecas usam essa sintaxe para oferecer sintaxe parecida com JSX sem etapa de build
      Ex.: htm, lit.dev
    • Eu também usei esse recurso recentemente em um gerador de imagens em código
      Armazenei pequenos dados SVG em código inline para criar um sampler de 13KB
      link de exemplo
    • Agora finalmente entendo por que essa sintaxe é usada em templates de SQL e GraphQL
      Ex.: 
      sql`SELECT * FROM users WHERE id = ${userId}`
gql`query GetUser { user(id: ${userId}) { name email } }`
  • Gosto do Dwitter, mas queria que bloqueassem o uso de eval
    Em vez disso, seria melhor adicionar mais atalhos. Por exemplo, s significa Math.sign, mas isso poderia ser expandido ainda mais
    • Plataformas assim precisam existir primeiro para que surjam formas de “quebrar” as regras
      Se isso mudar depois, o alvo fixo desaparece e parte do encanto se perde
      beta.dwitter.net melhora a acessibilidade de codificação sem perder esse alvo fixo
      Exceções como Math.sin ou codificador de cores CSS foram adicionadas por motivos práticos
      No Dwitter 2, também houve discussões sobre incluir mais caracteres predefinidos para que os usuários possam expandir por conta própria
      No fim das contas, o que importa é a criatividade. Mesmo distorcer as regras já é, por si só, um ato criativo
    • Se a pontuação passar a ser calculada em bytes UTF-8, isso resolveria o problema do eval pela raiz
      Ainda seria possível comprimir dados em literais de string, mas a compressão do código como um todo diminuiria
    • Uso o dwitter.net há muito tempo e estou satisfeito com a permissão de eval. Regra é regra (ou ausência de regra)
  • Como exemplos relacionados,