DjCodeDevTeam · document de bord
Ce que fait vraiment djcode.space v2.0 — panneau par panneau, et surtout pourquoi.
La page ne décrit pas un poste de commandement — elle en est un.
La v1 était une page qui racontait ton univers : du texte, des sections, un terminal en accessoire. La v2 inverse la logique. Puisque ta particularité est de commander une flotte — tu définis le quoi, six agents écrivent le comment — la vitrine te met littéralement aux commandes. Le visiteur n'est plus devant une brochure : il est assis dans ton cockpit.
Le style vient d'eDEX-UI, le terminal futuriste culte inspiré des interfaces de TRON: Legacy : panneaux chanfreinés, données qui bougent partout, scanlines d'écran cathodique, clavier lumineux. On l'a reconstruit à la main — pas une ligne de bibliothèque externe — et rempli avec ton contenu réel : ta flotte, tes systèmes, ta doctrine.
Quand quelqu'un ouvre la page, quatre choses s'enchaînent en environ trois secondes. Rien n'est décoratif : chaque étape a un travail.
Un journal de démarrage défile, façon ordinateur qui s'allume. Ce n'est pas du faux texte : chaque ligne annonce un vrai module qui se charge (thème, cœur, globe, moniteurs, flotte…). C'est le sas d'entrée : il annonce au visiteur qu'il entre dans une machine, pas sur un site. Une touche ou un clic le saute.
Les dix panneaux se « tracent » à l'écran l'un après l'autre, en cascade — comme un système qui met ses instruments sous tension un par un.
Le terminal écrit son message d'accueil et rend la main. Le visiteur peut taper.
L'horloge bat chaque seconde, le compteur d'images se mesure en continu, le globe tourne, et toutes les 30 secondes la page re-mesure la distance réseau vers tes trois domaines. C'est ce qui rend le cockpit vivant : il respire même si on ne touche à rien.
Sur grand écran, le cockpit occupe toute la fenêtre, sans défilement — comme un tableau de bord d'avion : tout est visible d'un coup d'œil. Chaque zone a un métier.
La grille du cockpit sur grand écran. Sur téléphone, ces zones s'empilent.
La logique de lecture : la colonne gauche mesure (que du chiffré, du vivant), le centre dialogue (le terminal est l'instrument principal), la droite montre ton univers (qui fait quoi, qu'est-ce qui tourne). Le bandeau et la ligne d'état encadrent le tout comme les instruments fixes d'une cabine.
C'est le choix le plus important de la v2, et celui qu'il faut comprendre pour lire le reste. Un cockpit eDEX affiche des données qui bougent. Or ta page est un site statique : il n'y a aucun serveur à elle dont on pourrait afficher le processeur ou la mémoire. Deux options existaient :
Option refusée : inventer des chiffres — un faux « CPU 47 % » qui gigote au hasard. Ça brille en démo, mais c'est un mensonge permanent, et ta règle 05 (« tests verts et vérification réelle ») l'interdit moralement : on n'affiche pas du théâtre en se donnant des airs d'instrument.
Option retenue : montrer la seule machine réellement présente — celle du visiteur. Son navigateur sait des choses sur son propre matériel et accepte de les dire. Le cockpit devient un miroir : chacun y voit son poste.
Le trajet des données : du navigateur du visiteur vers l'écran, et nulle part ailleurs.
Vie privée — à retenir
Tout ce que le cockpit affiche est lu localement et reste local. La page n'a ni traqueur, ni statistique, ni envoi de données. Le panneau NŒUD LOCAL le dit en toutes lettres au visiteur : « Lu par votre navigateur, affiché ici. Rien n'est transmis. »
Corollaire assumé : quand le navigateur refuse de répondre (Firefox ne dit pas la
mémoire, par exemple), le panneau affiche n/d — non disponible. Un
trou honnête vaut mieux qu'un chiffre inventé. C'est ta doctrine appliquée au design.
Heure locale en grand, heure UTC, date, fuseau du visiteur, et la durée de sa session — qui compte depuis son arrivée. Rôle : ancrer le cockpit dans le temps réel dès le premier regard. Une horloge qui bat prouve que rien n'est une image figée.
La fiche technique du visiteur : nombre de cœurs de son processeur, ordre de grandeur de sa mémoire, niveau et charge de sa batterie, type de connexion et débit, carte graphique, définition d'écran, et le nombre d'images par seconde que la page rend — mesuré, pas supposé. C'est le panneau qui surprend : les gens reconnaissent leur machine, et comprennent d'instinct que tout est vrai.
La page chronomètre réellement un aller-retour réseau entre le visiteur et tes trois
domaines publics — djcode.space, myfamilyagenda.online,
inventorymasters.online — à l'arrivée puis toutes les 30 secondes. Barres et
millisecondes sont de vraies mesures ; un domaine injoignable passerait au rouge. Rôle :
prouver que l'archipel répond, en direct, depuis n'importe où dans le monde.
Tes six règles, en toutes lettres dans le cockpit — pas cachées dans une page « à propos ». Raisonnement : chez toi, la méthode est le produit. Un visiteur qui lit « jamais de push sans ordre explicite » comprend immédiatement quel genre d'ingénierie il regarde.
Deux dessins superposés. Derrière : le noyau — la boule de plasma doré héritée de la v1, calculée en 3D par la carte graphique. Devant : une Terre en fil de fer qui tourne, avec deux points réels : le QG à Québec et le visiteur, placé d'après son fuseau horaire. Un arc les relie, parcouru par une impulsion lumineuse — la liaison en cours entre ton poste et le sien.
Pourquoi cette fusion : le globe aux arcs est LA signature d'eDEX, et le noyau est le feu de ton phare (Pharos). Plutôt que choisir, le feu brûle au centre du monde — personne d'autre n'a cette image.
L'annuaire de ton univers : les six unités avec leur verbe (Atlas porte, Hermès transporte, Héphaïstos forge, Sp1d3r récolte, Fable ouvre, Pharos signale), les six systèmes avec leur état, et le canal de contact (GitHub, signature, devise). Les liens vers tes deux domaines publics sont cliquables ; le reste est volontairement sans lien — les dépôts sont privés, et la page ne prétend pas le contraire.
La signature la plus reconnaissable d'eDEX. Deux comportements selon l'appareil :
sur ordinateur, chaque touche du vrai clavier illumine sa jumelle
à l'écran — l'effet « console de film » ; sur tactile, il devient un vrai
clavier : on tape les commandes du terminal avec. Sur petit téléphone il se replie pour
laisser la place (la commande keys le rappelle).
Le mince bandeau du bas : durée de session, images par seconde, taille de fenêtre, position de la souris au pixel près. Rôle : les signes vitaux permanents — le détail qui fait « instrument » plutôt que « page ».
Tout ce que les panneaux montrent, le terminal peut le raconter — et il est le seul endroit où l'on agit sur le cockpit. Principe de conception : le terminal est un raccourci, jamais un passage obligé — un visiteur qui ne tape rien voit quand même tout l'essentiel dans les panneaux.
| Commande | Ce qu'elle fait |
|---|---|
| aide | la liste de toutes les commandes |
| qui | ta fiche d'identité — l'architecte |
| flotte | les six unités ; taper un nom (atlas, pharos…) ouvre sa fiche |
| systemes | les six systèmes et leur état |
| doctrine | les six règles |
| scan | re-mesure immédiatement la latence vers les trois domaines |
| theme | change l'habillage : or → tron → matrix (mémorisé pour la prochaine visite) |
| son | active ou coupe les bips d'interface (coupé par défaut, mémorisé) |
| crt | allume ou éteint l'effet écran cathodique (scanlines) |
| keys | affiche ou masque le clavier du poste |
| fullscreen | cockpit plein écran |
| globe | explique les deux nœuds de la liaison |
| noyau <n> | règle l'intensité du feu (de 0.3 à 2.4, ou max) |
| jadis | un mot sur J.A.D.I.S. — et l'origine de son nom |
| matrix | l'œuf de Pâques : la pluie verte, une touche pour en sortir |
Confort inclus : ↑/↓ rappellent l'historique, Tab
complète, / met le curseur dans la saisie, et une commande mal tapée propose
la plus proche au lieu de râler. Les quatre boutons du bandeau (SON, CRT, THÈME, ⛶)
exécutent exactement les mêmes commandes — deux portes, un seul mécanisme.
Il y a trois habillages : or (défaut — ton identité, le feu du phare), tron (cyan, l'hommage au film) et matrix (vert). Changer de thème recolore les panneaux, les bordures, le globe, le clavier.
Mais deux choses ne changent jamais, et c'est voulu :
1. Les couleurs d'état. Ta règle 02 — vert = opérationnel, orange = problématique, rouge = mort — est un langage, pas une décoration. Un état doit dire la même chose dans tous les habillages, sinon l'information se perd. Les pastilles restent donc vertes en thème tron comme en thème or.
2. Le noyau reste or. Même en plein cyan, le feu au centre du globe garde sa couleur. C'est le phare : il ne change pas de camp. Et en thème tron, l'orange dans le cyan reproduit exactement le contraste visuel de TRON: Legacy — un clin d'œil assumé, pas un oubli.
Aucun framework, aucune bibliothèque, aucune étape de compilation : du HTML, du CSS et huit petits fichiers JavaScript écrits à la main. Raisonnement : rien à maintenir, rien qui expire, rien qui casse — une page qui marchera encore telle quelle dans dix ans, et qui charge vite partout.
| Fichier | Son métier |
|---|---|
| boot.js | la séquence d'allumage, le montage des panneaux, et la lecture des réglages mémorisés (thème, CRT, son) avant le premier affichage |
| console.js | le terminal : les commandes, l'historique, la complétion |
| hud.js | tous les moniteurs : horloge, nœud local, liaisons, ligne d'état |
| core.js | le noyau — la boule de plasma calculée par la carte graphique |
| globe.js | la Terre en fil de fer, les deux nœuds, l'arc et son impulsion |
| keyboard.js | le clavier : illumination à la frappe, saisie au doigt |
| audio.js | les bips — fabriqués par synthèse, aucun fichier son n'existe |
| style.css | toute l'apparence : les trois thèmes, la grille, les panneaux, le CRT |
Détail d'économie : les boucles de dessin (noyau, globe) se mettent en pause quand l'onglet passe en arrière-plan ou que le panneau sort de l'écran. Le cockpit ne brûle pas la batterie d'un visiteur qui est parti lire ailleurs.
Chaque situation limite a un comportement prévu, choisi, et vérifié :
| Situation | Comportement |
|---|---|
| téléphone | les colonnes s'empilent (terminal d'abord), le clavier virtuel se replie — le clavier du téléphone est roi |
| pas de WebGL | le noyau disparaît proprement ; le globe, dessiné autrement, porte le panneau seul |
| « réduire le mouvement » | si le visiteur a réglé son système pour éviter les animations : boot instantané, rien ne bouge, tout le contenu est là |
| JavaScript coupé | un résumé en texte simple avec les liens essentiels |
| navigateur discret | chaque mesure refusée affiche n/d — jamais un chiffre inventé |
Et l'accessibilité n'est pas une option : les contrastes des textes ont été mesurés — douze rôles de texte dans chacun des trois thèmes, trente-six vérifications, toutes au-dessus du seuil recommandé.
Juste après la mise en ligne de la v2, tu as vu une page en vrac : les données vivaient, mais la mise en page avait disparu. Voici ce qui s'était réellement passé — ça vaut la peine d'être compris, c'est un classique du web.
Le mécanisme de la panne
Pour aller vite, un navigateur garde en réserve les fichiers d'un site qu'il a déjà visité (le « cache »). La v1 disait aux navigateurs : « gardez mes fichiers 7 jours sans revenir vérifier ». Tu avais visité la v1 le matin ; l'après-midi, ton navigateur a reçu la nouvelle page HTML… mais a ressorti la vieille feuille de style de sa réserve. Résultat : le squelette v2 habillé avec le costume v1 — qui ne connaît aucun des nouveaux panneaux. Les fichiers nouveaux (moniteurs, globe), absents de la réserve, chargeaient frais : d'où ce mélange étrange, des données vivantes dans une page nue.
Le remède
Chaque fichier est maintenant appelé avec un numéro de version dans son
adresse — style.css?v=2.0.1. À la prochaine mise à jour, le numéro change :
pour le navigateur c'est une adresse jamais vue, il ne peut pas la sortir de sa
réserve, il télécharge le frais. La réserve de 7 jours reste (c'est bon pour la
vitesse), mais elle ne peut plus servir du périmé. Règle gravée dans le dépôt : toute
modification d'un fichier ⇒ changer le numéro.
Pourquoi mes vérifications ne l'avaient pas vu : mon banc d'essai ouvre toujours un navigateur neuf, à la réserve vide — il ne pouvait pas voir ce que voit un visiteur qui revient. Toi, tu l'as vu. C'est ta règle 05 en action : tests verts et vérification réelle — la tienne a attrapé ce que la mienne ne pouvait pas attraper.