Dwitter - collection de démos JavaScript en 140 caractères

 (beta.dwitter.net)
8 points par GN⁺ 2026-01-11 | 2 commentaires | Partager sur WhatsApp
  • Dwitter est une plateforme qui permet de créer et partager des démos visuelles avec du code JavaScript de 140 caractères maximum
  • Chaque publication, appelée un « dweet », affiche avec le code une animation graphique exécutée instantanément
  • Les utilisateurs interagissent via les commentaires, remixes et hashtags, et les variations ainsi que les recréations de code y sont très actives
  • Il est possible d’explorer les contenus populaires selon divers critères de tri comme hot, new, top (semaine/mois/année/global)
  • Un terrain d’expérimentation en programmation créative où des effets visuels complexes sont réalisés avec un code très court

Aperçu de Dwitter.net

  • Dwitter.net est une plateforme web de création de démos visuelles avec du code JavaScript limité à 140 caractères
    • Chaque démo, appelée « dweet », génère des graphismes animés exécutés instantanément dans le navigateur
    • Après connexion, les utilisateurs peuvent publier un nouveau dweet ou remixer une création existante
  • Le site permet de parcourir les contenus populaires selon différents tris comme hot, new, top (semaine/mois/année/global)
  • Chaque dweet inclut des fonctions de partage, plein écran, signalement et commentaires

Exemples de dweets représentatifs

  • “Bubble universe colour expansion” est salué pour ses couleurs variées et son effet visuel net
    • Dans les commentaires, on trouve des réactions comme « A whole universe! »
  • “Ants! 🐜” représente une colonie de fourmis avec un code très court, et a reçu des éloges comme « god level dweetage! »
  • “Trees, shadows, hills.” est une animation décrivant des arbres, des ombres et des collines, qui a suscité des réactions comme « Amazing stuff! »
  • “Flight Over Destroyed City ✈️” met en scène un vol au-dessus d’une ville détruite
    • Les commentaires enchaînent les réactions humoristiques, comme « i love the smell of sulfur and uranium in the morning »
  • “Solar Orbit ☀️🌘” reproduit une orbite planétaire en 140 octets, provoquant la surprise avec « How did you fit a whole planetary system in 140 BYTES OF JAVASCRIPT!?!? »

Activité de la communauté et culture du remix

  • Chaque dweet peut être remixé à partir du code d’un autre utilisateur, avec un lien vers l’original clairement indiqué
  • Les commentaires mêlent retours techniques, impressions et humour, créant une ambiance communautaire très vivante
  • Le système de hashtags permet d’explorer les contenus par thème, comme #space, #galaxy, #lighting, #scene

Caractéristiques techniques

  • La plupart des codes sont compressés sous une forme eval(unescape(escape...)), afin de produire un maximum d’effets visuels dans la limite des 140 caractères
  • Le code s’appuie principalement sur l’API Canvas pour dessiner formes, couleurs et mouvements
  • Chaque dweet affiche sa longueur de code (par ex. “// 136/140”), ce qui fait de l’optimisation et des techniques de compression des éléments essentiels

Un espace d’expérimentation en programmation créative

  • Dwitter combine le code golf et l’art visuel, et stimule une compétition de créativité entre développeurs
  • Le processus consistant à produire un résultat visuel complexe avec un code simple est perçu comme une forme d’esthétique de la programmation
  • La plateforme sert d’espace d’expérimentation pour explorer la frontière entre expression artistique et compression technique

À lire aussi

2 commentaires

 
roxie 2026-02-27

C'est vraiment incroyable.
 
GN⁺ 2026-01-11
Avis sur Hacker News
  • Ravi de voir ça sur HN :D
    Désolé d’avoir dû redémarrer brièvement le serveur. Grâce à la leçon tirée de la dernière fois où c’est arrivé, j’ai redimensionné le droplet DigitalOcean
  • C’est sympa, mais imposer une limite en nombre de caractères crée un méta-jeu consistant à compresser des caractères ASCII à l’aide de caractères Unicode multioctets
    Par exemple, une forme comme eval(unescape(escape\<<97 wide characters>>`.replace(/u../g,'')))` permet de restaurer 194 caractères ASCII à partir de 97 caractères Unicode
    J’aimerais presque qu’on adopte une convention du genre de la conversation entre Ford Prefect et Mr Prosser : « considérons simplement que j’ai mis 194 caractères dans 140 et affichons-le comme ça »
    C’est une logique assez proche des limites de 4096 octets en demoparty, où en pratique on compresse 12 à 20 Ko avec Crinkler pour rentrer dans la contrainte
    • Le frontend bêta beta.dwitter.net/top a un bouton « compressed » qui permet de l’afficher comme on veut
    • Une autre solution serait simplement d’imposer une limite en octets UTF-8 (par ex. 140 octets)
    • 140 octets correspondent à environ 160 caractères ASCII. En excluant les caractères de contrôle, on peut aller jusqu’à 170 caractères
    • C’est peut-être le commentaire ayant reçu le plus de réponses que j’aie jamais vu sur HN :-)
    • Content de voir quelqu’un repérer la référence au HHG (Hitchhiker’s Guide)
  • Cet hiver, Dwitter fête son 10e anniversaire
    J’ai retrouvé une ancienne interview, assez intéressante : interview Medium
    La vraie magie, c’est la communauté : communauté Discord
  • J’ai rassemblé une collection de croquis génératifs réalisés sur Dwitter en 140 caractères
  • Il y a longtemps, j’ai participé à un petit concours dans l’édition AutoHotkey de Dwitter, et j’ai gagné avec une animation d’engrenages
    GIF animé
    Voir aussi ce post sur le forum AutoHotkey
  • Quand je vois un site comme Dwitter, ça renouvelle ma confiance dans la créativité humaine
    Avec des contraintes, la diversité explose au contraire : illusions d’optique, phrases courtes, expérimentations dans des directions inattendues
    Les contraintes favorisent la concentration et réduisent le coût de l’échec, ce qui encourage l’expérimentation
    La plupart des plateformes essaient d’élargir la créativité en ajoutant des fonctionnalités, mais cela finit souvent par les rendre plus complexes
    Je repense souvent à cette règle : les contraintes créent le plaisir
    Je me demande dans quels cas les contraintes produisent de meilleurs résultats, et à partir de quand elles deviennent artificielles
  • À l’époque des débuts de Twitter, j’étais devenu complètement accro au code golf en 140 octets
    Cette expérience a totalement changé ma façon de penser le code
    Dans une petite communauté, on partageait des techniques d’économie d’octets tout en réalisant de tout, du rendu de Mandelbrot à des solveurs de Sudoku
    Dix ans plus tard, j’ai eu un choc en retombant sur l’ancienne implémentation UUID que j’avais écrite dans le codebase de mon entreprise
    Liens associés : vidéo YouTube, Byte-saving techniques, UUID gist
  • Chose apprise aujourd’hui pour la première fois : 
    js_func`string`
    C’est une syntaxe JS valide. js_func est appelé comme tagged template literal
    Je vais maintenant essayer des trucs comme console.log\weeee``
    • Certaines bibliothèques utilisent cette syntaxe pour prendre en charge une syntaxe de type JSX sans étape de build
      Exemples : htm, lit.dev
    • J’ai moi-même utilisé cette fonctionnalité récemment dans un générateur d’images dans le code
      J’ai stocké de petites données SVG en code inline pour créer un sampler de 13 Ko
      Lien d’exemple
    • Je comprends enfin pourquoi cette syntaxe est utilisée pour les templates SQL et GraphQL
      Par exemple : 
      sql`SELECT * FROM users WHERE id = ${userId}`
gql`query GetUser { user(id: ${userId}) { name email } }`
  • J’aime bien Dwitter, mais j’aimerais qu’ils bloquent l’usage de eval
    À la place, j’aimerais qu’ils ajoutent davantage de raccourcis. Par exemple, s signifie Math.sign, mais on pourrait aller plus loin
    • Une plateforme comme celle-ci doit d’abord exister pour qu’on puisse ensuite trouver des moyens d’en « casser » les règles
      Si on la modifie après coup, la cible fixe disparaît et une partie du charme s’en va
      beta.dwitter.net améliore l’accessibilité de l’encodage tout en conservant cette cible fixe
      Des exceptions comme Math.sin ou l’encodeur de couleurs CSS ont été ajoutées pour des raisons pratiques
      Dans Dwitter 2, il a aussi été question d’inclure davantage de caractères prédéfinis pour que les utilisateurs puissent les étendre eux-mêmes
      Au final, l’essentiel, c’est la créativité. Même tordre les règles est en soi un acte créatif
    • Si on passait le calcul du score en octets UTF-8, cela réglerait le problème de eval à la racine
      Il resterait possible de compresser des données dans des littéraux de chaîne, mais la compression du code dans son ensemble diminuerait
    • J’utilise dwitter.net depuis longtemps, et le fait que eval soit autorisé me convient. Les règles sont les règles — ou leur absence
  • Exemples liés,