Explorer ses idées sans jamais perdre le fil
Une carte mentale en forme de petite planète : ouvrir une note fait apparaître ses sous-notes autour d'elle, sans perdre de vue l'ensemble.
Le besoin
Dans la plupart des outils de carte mentale, ouvrir une branche encombre l'écran ou envoie vers une nouvelle page — et on perd le fil d'où l'on venait.
L'idée
Garder l'arbre d'idées classique tel quel — et ne changer que la façon de s'y déplacer.
Ce que j'ai construit
- Une navigation où les sous-notes apparaissent sur une petite sphère autour de leur note, pendant que le niveau parent reste à l'écran.
- Des gestes choisis pour le confort : molette pour zoomer, glisser pour tourner, Alt + glisser pour déplacer la vue, et des zones tactiles agrandies sur téléphone.
- Deux versions précédentes — un dessin à plat, puis une 3D qui changeait de scène à chaque clic — remplacées parce qu'elles faisaient perdre ses repères.
- Elle cartographie aussi automatiquement les projets de ce site, via un petit flux public.
Le résultat
- 3navigations essayées, 1 gardée
- 22tentatives de contourner la protection d'écriture — toutes bloquées
- 2dépendances pour tout le projet
- 5/09/2026en ligne depuis
La carte publique est une démonstration fonctionnelle de la navigation. Une modification n'atteint la production qu'une fois les tests automatisés passés.
En images
Ce que j'ai appris
Les données n'ont presque pas changé en trois versions — seule la façon de s'y déplacer a changé. Garder les deux séparées m'a permis de refaire l'affichage deux fois sans toucher aux données.
Détails techniques Stack, architecture et choix — pour les lecteurs techniques
Stack
- Three.js
- JavaScript vanilla
- Node.js + Express
- SQLite (node:sqlite)
- Cloudflare Tunnel + Access
- systemd
- GitHub Actions
Comment ça marche
- Une seule table récursive, notes(id, parent_id, x, y, titre, contenu), où x et y sont une longitude et une latitude en degrés sur le globe de la note parente.
- Three.js est la seule librairie chargée par le navigateur ; environ 760 lignes de JavaScript sur mesure gèrent le placement, la navigation et l'édition. La caméra pilote directement des coordonnées sphériques au lieu d'OrbitControls.
- Chaque sphère fille a un rayon de 0,46 fois celui du parent ; le graphe de scène n'est jamais reconstruit pendant la navigation.
- Lecture publique ; écriture protégée en amont par Cloudflare Access, et le service n'écoute que sur 127.0.0.1 derrière un tunnel. 22 tentatives de contournement (majuscules, slashs doublés, segments « .. », encodage d'URL, autres méthodes HTTP) aboutissent toutes à la page de connexion.
- Un audit adversarial a trouvé deux vrais défauts, corrigés le jour même : un parseur JSON monté sur toutes les routes laissait un visiteur anonyme écrire dans le journal système, et un seul chargement réseau en échec figeait la navigation.
- Déploiement continu depuis GitHub Actions ; la production ne bouge que si la suite de tests passe.
Incidents et corrections
- Sur téléphone, les taps sur les petits repères de notes (6 à 10 px) rataient souvent : une tolérance de 22 px au doigt et le préchargement du niveau suivant ont fait passer les taps simulés de 12/17 à 17/17.
- L'effet de halo (bloom) était le goulot d'étranglement sur téléphone : le couper sur ces appareils a fait passer un vol sur plusieurs niveaux de 20 à 37 images par seconde.
Ce qui manque encore
- Écriture réservée — volontairement
- Gestes tactiles encore en cours d'affinage