DjCodeDevTeam · document de bord
Ce que fait vraiment djcode.space v2.5 — 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, neuf 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 quatre secondes environ. 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 et son glow, disposition,
cœur, globe, carte, moniteurs, flotte, terminal…) — et dit la vérité : sans WebGL, le cœur
s'affiche n/d ; l'historique du terminal compte les commandes que ce
navigateur a gardées, ou se dit vierge. 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 onze 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. Si le visiteur a réorganisé son cockpit lors d'une visite précédente, sa disposition est appliquée avant ce montage : rien ne saute à l'écran.
Le terminal écrit son message d'accueil — les commandes qu'il suggère se cliquent — et rend la main. Le visiteur peut taper.
L'horloge bat chaque seconde, le compteur d'images se mesure en continu, la nuit avance sur le globe et sur la carte, et la page mesure la distance réseau vers tes quatre domaines — une première fois à l'arrivée, une deuxième quatre secondes plus tard (la première paie l'ouverture de la connexion), puis toutes les 30 secondes. 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 : le centre dialogue (le terminal est l'instrument
principal), les deux colonnes portent les panneaux. Depuis la v2.5.6, leur disposition
par défaut est la tienne — celle que tu t'étais composée : à gauche l'archipel, le
nœud local et la flotte ; à droite l'horloge, le contrôle au sol, le canal et la doctrine
(repliés : le bouton ▸ au bout de leur titre les ouvre), les liaisons et les
systèmes. Le bandeau et la
ligne d'état encadrent le tout comme les instruments fixes d'une cabine.
Ce plan n'est qu'un point de départ : depuis la v2.3, chaque visiteur peut replier et déplacer les panneaux des colonnes (voir la disposition).
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 quatre
domaines publics — djcode.space, myfamilyagenda.online,
inventorymasters.online, mypianoskills.online — à l'arrivée,
quatre secondes plus tard, puis toutes les 30 secondes. Ces mêmes mesures nourrissent
ARCHIPEL et CONTRÔLE AU SOL : une seule source, aucune requête en double. 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 ». Depuis la v2.5.6, le panneau arrive replié, comme dans ta propre disposition :
le bouton ▸ l'ouvre, et la commande doctrine les récite.
Raisonnement : chez toi, la méthode est le produit. Un visiteur qui lit « jamais
de push sans ordre explicite » comprend quel genre d'ingénierie il regarde.
Le feu brûle toujours au centre du monde, mais le monde est enfin la Terre telle qu'elle est en ce moment : les continents en points lumineux, le jour et la nuit calculés à partir de la position réelle du Soleil, et la ligne JOUR│NUIT qui glisse en direct. Le globe se cadre de lui-même pour garder le QG et le visiteur toujours face à nous — la v2.2 les laissait passer derrière la Terre la moitié du temps.
Le QG est entouré de neuf feux : tes neuf systèmes, colorés selon leur état (vert en service, orange en chantier) — c'est l'archipel. Un faisceau de phare tourne et les fait scintiller. Le visiteur n'est jamais un faux point : son navigateur ne révèle qu'un fuseau horaire, alors la page dessine une zone qui couvre ce fuseau et l'écrit en toutes lettres (« fuseau de Paris »). Un visiteur du Québec lit « fuseau du QG » — et plus jamais « Toronto », le nom technique que les navigateurs donnent au fuseau de l'Est.
La donnée la plus forte du panneau : « le serveur qui vous répond est à moins de N km de vous ». Ce n'est pas une estimation, c'est une borne physique : un aller-retour mesuré en N millisecondes ne peut pas avoir voyagé plus loin que ce que la lumière parcourt dans ce temps. Chaque mesure part de la zone du visiteur comme une onde radar et vient toucher ce cercle. On peut faire tourner le globe à la main ; il revient seul à son cadrage cinq secondes après.
Le planisphère des centres de contrôle de mission : la vraie nuit et ses crépuscules,
les méridiens de MIDI et de MINUIT qui avancent en temps réel, l'heure au QG et chez le
visiteur, et la route la plus courte entre les deux. À l'arrivée, la carte rejoue les
24 dernières heures ; le bouton ⟲ 24 h (ou Entrée sur la carte) les rejoue à
volonté.
Surtout, les deux panneaux sont liés :
Replier l'un laisse l'autre fonctionner seul ; le lien reprend à la réouverture, même si l'un des deux a été déplacé dans l'autre colonne.
L'annuaire de ton univers : les neuf unités avec leur verbe (Atlas porte, Hermès
transporte, Héphaïstos forge, Sp1d3r récolte, Fable
ouvre, Thémis attribue, Folio consigne, Orphée accorde, Pharos signale),
les neuf systèmes avec leur état, et le canal de
contact (GitHub, signature, devise). Les liens vers tes quatre domaines publics sont
cliquables ; aucun lien ne mène aux dépôts — ils sont privés, et la page ne prétend pas
le contraire. Depuis la v2.5, chaque ligne de FLOTTE se clique : elle écrit
git <unité> dans le terminal, qui ouvre la fiche publique de son système.
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, TAB y complète et
ESC y annule. Sur petit téléphone il se replie pour laisser la place (la
commande keys on le rappelle). Quand le pilote automatique (demo)
tape, c'est lui aussi qui s'illumine.
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 ».
Les neuf panneaux des colonnes se replient et se déplacent. Le terminal et le clavier, eux, restent au centre : ce sont les instruments fixes.
▾ au bout de chaque titre réduit le
panneau à sa barre de titre ; replié, il devient ▸ et le rouvre. Un panneau
replié ne coûte plus rien : ses animations s'arrêtent. Par défaut, le canal et la
doctrine arrivent repliés.▾ : Entrée replie, Alt + ↑/↓
monte ou descend le panneau, Alt + ←/→ le change de colonne.La disposition est mémorisée dans le navigateur, comme le thème, et
appliquée avant le premier affichage. Rien ne quitte le poste du visiteur. Un panneau
ajouté dans une version future apparaît à sa place par défaut au lieu d'être perdu. Pour
tout remettre comme au premier jour — chaque panneau à sa place, le canal et la doctrine
repliés — une commande : disposition reset.
Pourquoi : le cockpit dépasse la hauteur de la plupart des écrans portables. Le défaut fait un premier tri — le canal et la doctrine repliés —, mais plutôt que de décider pour de bon à la place du visiteur ce qui mérite d'être vu, on lui donne les commandes — c'est un poste de commandement, après tout.
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.
Depuis la v2.5, c'est un terminal vivant : il complète ce qu'on tape, colore la
ligne avant qu'elle parte, se souvient de ce qu'on a tapé, et ce qu'il propose se clique.
aide range les commandes en trois groupes ; celles qui attendent une valeur
l'annoncent entre crochets, et chacune a sa page de manuel (man noyau, ou
noyau --help).
| Commande | Ce qu'elle fait |
|---|---|
| Découvrir | |
| aide | la liste des commandes, en trois groupes, avec la valeur que chacune attend ; chaque nom se clique |
| qui | ta fiche d'identité — l'architecte |
| flotte | les neuf unités ; taper un nom (atlas, thémis, folio…) ou le cliquer ouvre sa fiche |
| systemes | les neuf systèmes et leur état ; un nom se clique et ouvre la fiche publique du projet |
| doctrine | les six règles |
| globe | le QG, et la position du visiteur telle que la page l'estime — une zone et son fuseau, jamais une ville |
| git | [nom du dépôt] — la fiche publique d'un système, tirée de son README, ouverte dans une fenêtre (git mypianoskills, git orphée…). La valeur est obligatoire : git seul répond par une erreur rouge, puis la liste des projets — chaque clé se clique. Les dépôts restent privés : chaque fiche a été filtrée et validée avant publication. git djcode lit le README de cette page en direct |
| canal | les coordonnées publiques : GitHub, le domaine, un système en service |
| github | ouvre github.com/DjC-C0D3 dans un nouvel onglet |
| manuel | ce document |
| demo | le pilote automatique fait la visite : il tape lui-même qui, systemes | grep chantier, change le thème, pousse le noyau, lance scan, ouvre puis referme la fiche d'Orphée, affiche fetch — puis tape le retour au thème et à l'intensité d'avant. ■ STOP, Échap, Ctrl+C, n'importe quelle touche ou un toucher dans le terminal reprennent la main : thème et noyau d'avant sont rendus aussi, sans écho. Le thème qu'il montre n'est pas mémorisé : le choix du visiteur — ou son absence — lui est rendu tel quel. Il n'ouvre aucun lien, ne passe pas en plein écran, n'active pas le son et n'écrit rien dans l'historique ; sans WebGL, il saute le noyau |
| Poste | |
| theme | [or - tron - matrix - cyberpunk] — change l'habillage ; seul, passe au suivant (or → tron → matrix → cyberpunk). Mémorisé pour la prochaine visite |
| noyau | [0.3 à 2.4 - max] — règle l'intensité du feu au centre du globe : un nombre de 0.3 à 2.4 (la virgule marche aussi), max (2.2) ou min (0.35). La valeur est obligatoire : seul, il répond en rouge et rappelle l'intensité actuelle. Alias : cœur |
| son | [on - off] — active ou coupe les bips d'interface (coupés par défaut, mémorisé) ; seul, bascule |
| crt | [on - off] — allume ou éteint l'effet écran cathodique (lignes de balayage, vignette) ; seul, bascule |
| keys | [on - off] — affiche ou masque le clavier du poste ; seul, bascule |
| glow | [on - off] — allume ou éteint le halo lumineux des bordures, pour le thème en cours : chaque thème garde son réglage, mémorisé. D'office, allumé en tron et cyberpunk, éteint en or et matrix ; seul, bascule |
| shade | [1 à 10] — la portée du halo, en pixels : de 1 (serré contre la bordure) à 10 (il remplit l'espace entre deux boîtes ; sur un écran peu haut, où cet espace n'est que de 8 px, le halo s'y arrête). La valeur est obligatoire : seul, il répond en rouge et rappelle la portée actuelle. Vaut pour tous les thèmes, mémorisée |
| color-box | [box] [couleur] — change tout le néon d'une boîte (bordure, halo, reflet, titre, détails), en thème cyberpunk seulement ; le globe d'ARCHIPEL et la carte de CONTRÔLE AU SOL gardent le néon du thème. La boîte : son nom ou son abréviation — A ARCHIPEL, H HORLOGE, CAS CONTRÔLE AU SOL, NL NŒUD LOCAL, T TERMINAL, CV CLAVIER VIRTUEL, L LIAISONS, S SYSTÈMES, F FLOTTE, C CANAL, D DOCTRINE. La couleur : un des dix néons — magenta, cyan, bleu, jaune, violet, orchidée, azur, lime, blanc, lavande —, tous lisibles ; rouge, orange et vert n'en font pas partie : ce sont les couleurs d'état. Le mot s'écrit dans sa couleur. Une faute sur la boîte ou la couleur propose la plus proche. Mémorisé dans le navigateur ; color-box reset rend les néons d'origine. Valeur obligatoire : seul, il répond en rouge et liste les boîtes et leur néon actuel |
| fullscreen | cockpit plein écran — Échap pour en sortir |
| disposition | [reset] — l'état de la disposition (colonnes, ordre, panneaux repliés, mémorisée ou par défaut) ; disposition reset remet chaque panneau à sa place et dans son état d'origine |
| scan | re-mesure immédiatement la latence vers les quatre domaines |
| fetch | la fiche du poste du visiteur, façon terminal, avec un phare en ASCII : navigateur, moteur, plateforme, cœurs, mémoire, écran, fenêtre, GPU, fuseau, langue, thème, session, WebGL. Tout est lu sur place et rien n'est transmis ; ce que le navigateur tait s'affiche n/d |
| top | un moniteur en direct, rafraîchi sur place chaque seconde : images par seconde, image moyenne et pire, longues tâches, mémoire JS, ressources chargées, nœuds DOM, canevas, session. ■ STOP, Échap, Ctrl+C, q (saisie vide) ou toute autre commande l'arrêtent — et il s'arrête seul après cinq minutes. La dernière image reste affichée |
| Outils | |
| man | [commande] — la page de manuel d'une commande, ouverte dans une fenêtre : nom et alias, synopsis, description, valeurs, exemples ; commande --help fait pareil |
| historique | [effacer] — les 20 dernières commandes, numérotées depuis la plus ancienne — chacune se clique ; historique effacer le vide |
| vider | nettoie l'écran ; l'historique, lui, reste |
| matrix | l'œuf de Pâques : la pluie verte, une touche pour en sortir |
| pirater | un jeu de déduction, façon console de piratage : un vidage mémoire — chaque rangée à son vrai décalage — cache 8 à 10 mots de six lettres, dont le mot de passe. Chaque essai refusé dit combien de lettres sont à la bonne place (« Correspondance : 2/6 ») ; quatre tentatives, et un mot absent de la mémoire ne coûte rien. Des parenthèses appariées retirent un leurre ou rendent les tentatives. Gagné : ACCÈS ACCORDÉ, et le cœur s'emballe trois secondes. Perdu : le terminal se verrouille dix secondes (le verrou vit en mémoire : recharger la page le lève). Échap, Ctrl+C ou quitter abandonnent. Alias : hack |
| Enchaîner, filtrer, rejouer | |
| a ; b | enchaîne les commandes, dans l'ordre : theme tron ; crt off |
| a | grep x | ne garde de la sortie que les lignes qui contiennent le motif, surligné — sans tenir compte des majuscules ni des accents ; grep -v inverse, et les filtres s'enchaînent. Seules les commandes à sortie immédiate passent dans un tube : aide, qui, flotte, systemes, doctrine, globe, canal, disposition, historique, fetch, et les unités |
| !! · !n | rejoue la dernière commande, ou l'entrée n de l'historique ; la ligne complète s'affiche avant de partir |
| Hors de l'aide | |
| jadis | un mot sur J.A.D.I.S. — et l'origine de son nom |
Et quelques commandes ne figurent ni dans l'aide ni ici : elles répondent à qui tape comme un développeur.
La ligne de saisie travaille pendant qu'on tape. Une commande reconnue
prend la teinte du thème, une valeur valide passe au vert, une faute au rouge — avant
même l'envoi. Un texte gris, le fantôme, montre la suite : la fin de la commande
commencée (th → eme), ou le genre de valeur attendu
([or - tron - matrix - cyberpunk] · actuel or). Tab complète la commande — s'il y
a plusieurs candidats, Tab encore passe au suivant — mais jamais la valeur : c'est au
visiteur de la choisir. → accepte la complétion ; au doigt, on touche le fantôme.
↑/↓ rappellent l'historique (la ligne en cours revient au bout),
Ctrl+R y cherche, Ctrl+L vide l'écran, Ctrl+U efface
la ligne, Ctrl+C et Échap annulent — la ligne, ou top, demo et
pirater en cours —, et / met le curseur dans la saisie.
Une erreur est rouge, et elle aide. Commande inconnue, valeur manquante
ou invalide : la ligne s'écrit en rouge, comme une vraie panne, puis rappelle la valeur
attendue ou propose ce qui s'en approche le plus — thme répond « vouliez-vous
dire theme ? », et la suggestion se clique.
Deux portes, un seul mécanisme. Les commandes qu'affiche le terminal
se cliquent : les noms de l'aide, de flotte et de systemes, la liste de git, l'historique, les
suggestions — un clic exécute la commande comme si elle était tapée. Les quatre boutons du
bandeau (SON, CRT, THÈME, ⛶) écrivent leur commande dans le terminal —
❯ son s'affiche — avant de l'exécuter : le visiteur apprend la commande en
cliquant. Chaque ligne du panneau FLOTTE fait de même avec git <unité>.
L'historique — jusqu'à 50 commandes tapées ou cliquées — est gardé dans le
navigateur du visiteur, et nulle part ailleurs ; historique effacer le
vide. Les boutons du bandeau, le panneau FLOTTE et le pilote automatique n'y écrivent pas.
Il y a quatre habillages : or (ton identité, le
feu du phare), tron (cyan, l'hommage au film — le défaut, ton choix), matrix
(vert) et cyberpunk — la ville la nuit : des néons de toutes les couleurs sur
un noir bleuté. En cyberpunk, chaque boîte a son néon — jaune, magenta, cyan,
violet, bleu électrique —, attaché à la boîte et non à sa place (un panneau déplacé le
garde), les rangées du clavier font cinq bandes de couleur, les bandeaux du haut et du bas
un filet arc-en-ciel. Les titres des boîtes brillent comme de vrais tubes : le cœur de la lettre chauffé
vers le blanc, le halo de la couleur pure. Le visiteur peut même repeindre une boîte : color-box L jaune
lui donne un des dix néons, gardé dans son navigateur. Changer de thème recolore les
panneaux, les bordures, le globe, la carte, le clavier.
Le glow allume les bordures des boîtes : un halo de la teinte du thème
à l'extérieur, un reflet plus clair à l'intérieur — en cyberpunk, le néon de la boîte
dehors et le reflet d'un autre néon dedans, en tubes plus vifs. Chaque thème garde son propre réglage : d'office, le glow brille en tron et en
cyberpunk, et reste éteint en or et en matrix ; glow on ou glow off
ne change que le thème en cours. shade règle la portée du halo, de 1 à 10 pixels —
8 sur un écran peu haut, où les boîtes sont plus serrées : au-delà, le halo déborderait
chez la boîte voisine. Le halo est statique — il ne coûte rien
d'une image à l'autre.
Mais trois 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 ou en plein magenta, 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. En cyberpunk, les néons sont choisis contre les états : le magenta
tiré vers le violet, loin du rouge des pannes ; le jaune tiré vers le citron, loin de
l'orange « en chantier », et, par défaut, jamais dans une boîte qui affiche de l'orange —
color-box laisse ensuite ce choix au visiteur, pour ses boîtes à lui.
3. Les erreurs du terminal sont rouges. Depuis la v2.5, une commande inconnue, une valeur manquante ou invalide s'écrivent dans le rouge des pannes, et pendant la frappe une valeur valide passe au vert : le terminal parle la même langue que les pastilles, dans les quatre habillages. La commande reconnue, elle, prend la teinte du thème.
Aucun framework, aucune bibliothèque, aucune étape de compilation : du HTML, du CSS et treize 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) avant le premier affichage |
| disposition.js | replier, déplacer et mémoriser les panneaux des colonnes, appliqué avant le montage |
| console.js | le moteur du terminal : les commandes et leurs pages de manuel, les tubes, l'historique, les erreurs — et le glow des boîtes, réglé thème par thème |
| saisie.js | la ligne de saisie : les couleurs, le fantôme, Tab, l'historique au clavier, la recherche — sans lui, le terminal marche encore |
| spectacle.js | fetch, top, demo et pirater, branchés sur le moteur par sa seule porte publique — sans lui aussi, le terminal marche |
| hud.js | tous les moniteurs : horloge, nœud local, liaisons (la source unique des mesures réseau), ligne d'état |
| fiches.json | les fiches publiques de la commande git, chargées seulement quand on la tape |
| archipel.js | la fondation commune du globe et de la carte : géographie, Soleil, fuseau du visiteur, mesures, et le canal qui lie les deux panneaux |
| terres.js | les continents : un masque terre/mer au demi-degré, tiré de Natural Earth (domaine public) |
| core.js | le noyau — la boule de plasma calculée par la carte graphique |
| globe.js | ARCHIPEL : la Terre en points, le jour et la nuit, le QG et ses neuf feux, la zone du visiteur, l'horizon du serveur |
| sol.js | CONTRÔLE AU SOL : la carte jour/nuit, le voyage dans le temps, l'empreinte du globe |
| 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 quatre thèmes, le glow, la grille, les panneaux, le CRT |
Détail d'économie : les boucles de dessin (noyau, globe, carte) se mettent en pause quand l'onglet passe en arrière-plan, que le panneau sort de l'écran ou qu'il est replié. 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, puis la colonne de gauche — l'archipel —, puis celle de droite), le clavier virtuel se replie — le clavier du téléphone est roi |
| pas de WebGL | le noyau disparaît proprement ; le globe et la carte, dessinés autrement, portent leurs panneaux seuls |
| « 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 premiers thèmes, trente-six vérifications ; puis, en v2.5, les teintes de texte du thème cyberpunk — et ses cinq néons — sur ses deux fonds — toutes au-dessus du seuil recommandé ; et, en v2.5.5, les titres des boîtes sur leur propre halo, mesurés au pixel (dans les navigateurs récents).
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.