Un éditeur de texte minimaliste qui s’exécute dans le navigateur et stocke tout son contenu dans l’URL

• Un éditeur de texte léger qui fonctionne dans le navigateur et stocke tout le texte dans le hash de l’URL
• Le contenu saisi est compressé via deflate pour réduire la longueur de l’URL, et l’ensemble fonctionne entièrement côté client sans serveur backend
• Inclut des fonctions pratiques de base comme la sauvegarde automatique (délai de 500 ms), le mode sombre et la compatibilité mobile
• Il est possible de définir le titre du document avec # Title ou d’ajouter des attributs de style à la balise <article>, qui sont également enregistrés dans l’URL
• Le simple partage de l’URL permet de transmettre le document, ce qui le rend utile pour partager rapidement des notes simples ou des extraits de code

---

Vue d’ensemble

• textarea.my est un éditeur de texte minimaliste qui s’exécute entièrement dans le navigateur
  • Toutes les données sont stockées dans le hash de l’URL, sans besoin de serveur ni de base de données séparés
  • Conçu en JavaScript, il est utilisable immédiatement sans installation

Fonctionnalités principales

• Compression du texte (Compression magic)

  • Le texte saisi est compressé avec l’algorithme deflate afin de minimiser la longueur de l’URL
  • Il est possible de partager de longues notes avec une URL d’environ 500 caractères

• Sauvegarde et partage via l’URL

  • Le contenu rédigé est inclus dans le hash de l’URL, qui peut donc être copié et partagé
  • Même sans stockage sur serveur, le document peut être restauré à partir du seul lien

• Sauvegarde automatique et mode sombre

  • Une sauvegarde automatique avec un délai de 500 ms après la saisie est fournie
  • Le mode de couleur du système est détecté pour appliquer automatiquement le mode sombre

• Interface adaptée au mobile

  • Il est possible de rédiger des documents sur smartphone avec les mêmes fonctionnalités
  • Le design responsive le rend pratique en déplacement

• Architecture sans backend

  • Comme le dit la formule « Zero servers were harmed », c’est une application entièrement côté client
  • Aucun problème de charge serveur ni de stockage de données personnelles

Mode d’emploi

• Accéder à textarea.my et commencer à saisir immédiatement
• On peut constater que l’URL s’allonge au fur et à mesure de la saisie
• Il suffit de copier l’URL pour la partager avec d’autres personnes

Astuces avancées (Pro tips)

• Saisir # Title sur la première ligne du document pour le définir comme titre de la page
• Les données sont conservées à la fois dans localStorage et l’URL, pour une double sauvegarde
• En ajoutant un attribut style à la balise <article> dans les outils de développement, ce style est lui aussi enregistré dans l’URL

Liens d’exemple

• Un document d’exemple de Crime and Punishment de Fyodor Dostoevsky est fourni
• Un document d’exemple de An Ode to Comic Sans rédigé par ChatGPT est fourni

Caractéristiques techniques

• Réalisé sur une base JavaScript
• Gestion des données uniquement via le hash de l’URL et localStorage, sans requête serveur
• Une structure simple qui réduit les risques de sécurité et assure un chargement rapide

Conclusion

• textarea.my est un éditeur de texte ultra-léger fonctionnant dans un environnement serverless qui propose
  une approche originale permettant d’enregistrer et de transmettre des documents par le simple partage d’une URL
• C’est un outil bien adapté aux développeurs et designers pour noter rapidement des idées, garder des mémos de code ou rédiger des documents de test

[GN⁺]

Commentaires sur Hacker News

• C’est drôle, j’ai moi aussi fait presque exactement la même chose, sauf que c’était pour des cartes
  J’avais besoin d’un moyen de dessiner sur une carte et de partager un lien pour que l’autre personne puisse voir sa position
  Annoter une capture d’écran règle le premier problème, mais pas le second
  Du coup, je l’ai implémenté moi-même dans un esprit Vibe engineering
  L’idée, c’est une sorte d’« appli instantanée » pour un besoin précis
  Comme ça peut être hébergé à bas coût sans backend, on peut le proposer gratuitement
  Démo MapDraw

  • Super cool ! Je l’utilise en ce moment pour préparer un voyage
    Est-ce qu’on pourrait aussi ajouter des annotations textuelles ? Et ce serait bien si le bouton de suppression effaçait la dernière forme ou une sélection, au lieu de tout réinitialiser
  • L’expression « Vibe engineered » me fait trop rire. vibe coding, d’accord, mais appeler ça de l’ingénierie, c’est drôle :D
  • La réactivité de la page est bien meilleure que celle de n’importe quelle appli de carte que j’ai utilisée jusqu’ici
  • Vraiment excellent ! Juste un bug à signaler : quand on déplace la carte, le dessin suit de manière fluide, mais lors d’un zoom, le dessin ne bouge qu’une fois l’animation terminée
  • Projet vraiment génial

• J’étais justement en train de faire quelque chose de similaire ce matin
  C’est plus propre d’utiliser .toBase64({ alphabet: "base64url" }) et fromBase64({ alphabet: "base64url" }) au lieu de faire des replace sur la chaîne base64
  Voir la doc MDN

• D’après la spec, les URL peuvent faire au minimum 8 000 caractères
  Les principaux navigateurs acceptent plus de 64 000 caractères, et Chrome monte jusqu’à 2 MB
  RFC9110 section 4.1-5, référence StackOverflow, doc Chromium

  • Chrome, c’est 2 MB, Firefox 1 MB, et WebKit n’a pas de limite
    À titre d’exemple, même le texte complet de Crime and Punishment tient dans une URL
  • J’ai l’impression que l’industrie de la surveillance allonge de plus en plus les URL pour y ajouter des utm-tracker et des identifiants de campagne
    Quand on regarde les liens de partage Instagram ou YouTube, il y a des paramètres de suivi de plusieurs centaines de caractères
  • À noter qu’un caractère (character) et un octet (octet) ne sont pas la même chose. Si ce n’est pas converti en ASCII compatible URI, il faut garder à l’esprit que 1 caractère ≠ 1 octet

• Je ne comprends pas pourquoi stocker les données dans l’URL et la faire grossir comme ça. localStorage ne suffit pas ?

• J’avais fait quelque chose de similaire autrefois avec un tableur
  Il fallait passer d’une cellule à l’autre puis rafraîchir la page pour que ça fonctionne
  Exemple
  Le code complet faisait environ 130 lignes
  Plus d’exemples

• J’ai créé un petit framework JS qui permet de mettre en place facilement ce genre de partage via URL
  lost.js sur GitHub

• J’aime bien cette approche du point de vue de la vie privée
  Du coup, je réfléchis à ajouter une option d’enregistrement dans l’URL à mon éditeur kraa.io

  • Cela dit, du point de vue de la privacy, textarea.my inclut des scripts de suivi
    Du code beacon Cloudflare y est injecté, donc il faut faire attention
  • Dans ce cas, est-ce qu’il y a vraiment un avantage en matière de vie privée par rapport à l’utilisation d’un éditeur de texte natif local ?

• J’avais déjà fait quelque chose de similaire pour des tablatures de guitare
  Voir tabviewer.app
  Le problème des URL trop longues a été résolu en utilisant un service de raccourcissement d’URL

  • J’ai aussi créé un éditeur de tablatures pour le même usage
    Dépôt GitHub

• Beau projet, mais quand j’ai chargé « Crime and Punishment », mon navigateur mobile a planté
  Les URL n’ont visiblement pas été conçues pour supporter une telle « punition »

• Petite autopromo : j’ai fait quelque chose de similaire moi aussi, mais ça n’a intéressé personne
  Buffertab sur GitHub

  • La fonction de saisie vocale est intéressante. Je me demande si tu avais envisagé d’utiliser Whisper wasm au lieu de l’API OpenAI