—
—
—
En attente de la réponse
Technologie dès la conception
Choisis pour la tâche.Montrés à l’œuvre sur cette page.
Un outil vaut ce qu’il fait sur la page. Sur notre nouveau système, chacun des nôtres gagne sa place par une tâche : React qui compose les pages d’avance sur notre serveur, TypeScript qui vérifie chaque pièce avant sa mise en ligne, three.js qui dessine sur la puce graphique de votre appareil, WordPress là où votre équipe écrit. Cette page les montre à l’œuvre, lit en direct ce qui tourne ici et dit clairement ce qui relève des projets clients.
Les lectures sont prises en direct sur cette page, dans votre navigateur, et ne sont envoyées nulle part. Les schémas sont illustratifs là où c’est indiqué.
01 · Les outils
Vingt-quatre outils. Chacun à sa place.
Nos vingt-quatre outils, chacun là où il travaille vraiment : sur cette page, lu en direct sous vos yeux ; ailleurs sur ce site ; ou dans les projets clients. Ouvrez une tuile pour voir son rôle.
En direct · lu sur cette page
Où travaille chaque outil
0 outil ouvert sur 2401 · Où il travaille
02 · L’outil choisi
TypeScriptCette pageVérifie que chaque pièce du code s’emboîte avec les autres, avant toute mise en ligne.
Comment on le sait : déclaré A vérifié cette page avant sa mise en ligne · rien n’en est parvenu jusqu’à vous.
Où le voirLe code, plus bas
TypeScript. Pour cette page. Vérifie que chaque pièce du code s’emboîte avec les autres, avant toute mise en ligne. A vérifié cette page avant sa mise en ligne · rien n’en est parvenu jusqu’à vous.
| Outil | Où il travaille | Preuve | Comment on le sait |
|---|---|---|---|
| TypeScript | Pour cette page | A vérifié cette page avant sa mise en ligne · rien n’en est parvenu jusqu’à vous. | déclaré |
| JavaScript | Pour cette page | Lecture de la page… | lu |
| HTML | Pour cette page | Lecture de la page… | lu |
| CSS | Pour cette page | Lecture de la page… | lu |
| PHP | Projets clients | Nos propres extensions WordPress sont écrites en PHP · dans les projets clients. | décrit |
| Node.js | Pour cette page | A construit le HTML de cette page avant votre visite. | déclaré |
| React | Pour cette page | React 19.3.0-canary-3f0b9e61-20260317 · du HTML venu de notre serveur, réveillé dans votre navigateur. | lu |
| Vue.js | Projets clients | Le même rôle que React, pour les équipes qui l’utilisent · dans les projets clients. | décrit |
| WordPress | Projets clients | Là où les équipes de nos clients écrivent · dans les projets clients. | décrit |
| MariaDB | Projets clients | Là où WordPress garde ce que les équipes écrivent · dans les projets clients. | décrit |
| PostgreSQL | Ailleurs sur ce site | Garde les messages de ce site, écrits par un rôle qui ne peut pas les lire · votre navigateur ne s’y connecte jamais. | déclaré |
| MongoDB | Projets clients | Pour des dossiers qui changent de forme · dans les projets clients. | décrit |
| REST API | Ailleurs sur ce site | Les formulaires de ce site répondent par elle, sur notre serveur. | déclaré |
| GraphQL | Projets clients | Demande exactement les champs qu’un écran affiche · dans les projets clients. | décrit |
| WebSockets | Projets clients | Une ligne ouverte, pour les mises à jour en direct · dans les projets clients. | décrit |
| GSAP | Pour cette page | Endormi : 0 ko jusqu’à l’approche de la section 3D et mouvement. | lu |
| Three.js | Pour cette page | Endormi : 0 ko jusqu’à l’approche de la section 3D et mouvement. | lu |
| WebGL | Pour cette page | Question posée à votre navigateur… | lu |
| Babylon.js | Projets clients | Pour des scènes 3D complètes · dans les projets clients, pas chargé ici. | décrit |
| MapLibre | Ailleurs sur ce site | Lecture de la page… | lu |
| AWS | Pour cette page | Lecture de la page… | lu |
| Turnstile | Ailleurs sur ce site | Lecture de la page… | lu |
| Umami | Pour cette page | Lecture de la page… | lu |
| Stripe | Projets clients | Dans les boutiques que nous bâtissons. | décrit |
Lu dans votre navigateur, maintenant, et envoyé nulle part. Les projets clients sont décrits, pas exécutés ici.
Comment c’est lu
- Le document
- Les éléments et les titres sont comptés dans le document de cette page, tel qu’il se trouve dans votre navigateur ; la langue est celle que la page déclare sur son élément racine.
- Les feuilles de style
- Chaque règle des feuilles de style de la page, règles imbriquées comprises, lue par cssRules ; une feuille servie par un autre hôte ne peut pas être lue et est laissée de côté. Les jetons de design sont les propriétés personnalisées distinctes que ces règles déclarent. Les requêtes de conteneur : demandées à votre navigateur par CSS.supports.
- Les registres du navigateur
- Resource Timing : les fichiers de script et leur poids sur le réseau (ou votre cache), les fichiers tirés de notre stockage (les images passées par l’optimiseur comptées par leur source) et toute requête vers les tuiles de la carte, la vérification du formulaire ou le service de paiement, par hôte. Navigation Timing : le premier octet. Après un passage d’une page à l’autre sans rechargement, les registres couvrent toute votre visite, et les lectures le disent.
- La puce graphique
- Un contexte WebGL jetable, créé une fois quand ce tableau est apparu, interrogé sur sa version et le nom de la puce, puis libéré aussitôt. Certains navigateurs gardent ce nom pour eux, et la tuile le dit.
- Éveillés plus tard
- three.js et GSAP ne sont pas sur cette page à son arrivée. La section 3D et mouvement les charge à votre approche et rapporte leur version ; leurs tuiles s’allument alors, ici, sans rechargement.
- Déclaré, pas lu
- TypeScript est effacé avant la mise en ligne d’une page ; Node.js a construit le HTML de cette page sur notre serveur, où travaillent aussi PostgreSQL et l’API REST, et aucun navigateur ne les y lit. Ces tuiles le disent et portent la mention « déclaré » ; celle de Node.js donne aussi le premier octet noté par votre navigateur, comme simple chiffre. Les outils des projets clients sont décrits, sans mesure.
- Statistiques
- En production, la présence du traceur des statistiques Umami auto-hébergées sur cette page. Une version de développement n’en porte aucun et ne compte rien.
02 · La page
La page tient debout avant tout script.
Chaque page est assemblée d’avance par React sur notre serveur : vous recevez du HTML et du CSS finis, puis le JavaScript réveille ce qu’on peut toucher. Voici une page de ce site, scripts coupés.
En direct · scripts coupés
GET/fr/expertise/technologie · scripts : aucun
01 · Ce qui est arrivé prêt
Mots prêts—motslisibles sans script
- Vrais liens
- —
- Titres
- —
- Images avec texte
- —
02 · Ce qui attend le script
Boutons en attente—boutonsattendent le script pour répondre
03 · Comment elle est arrivée
- Premier octet
- —ms
- HTML, compressé
- —ko
Une page de ce site, sur le point d’être ouverte avec ses scripts coupés.
Une vraie page de ce site, ouverte dans votre navigateur avec ses scripts coupés. Comptée à partir de son propre balisage.
Comment c’est lu
Le cadre
Votre navigateur demande la page à ce site, une seule fois, comme pour n’importe quelle page. Ses scripts en sont retirés, et elle s’ouvre dans un cadre que votre navigateur isole, sans permission d’en exécuter aucun. Le cadre a la taille d’une fenêtre d’ordinateur ou de téléphone. Deux choses y changent. Un film de ce site reçoit sa source du script : dans le cadre, il reste une boîte vide à sa taille. Une image que la page demande de charger plus tard attend que le cadre en approche, comme votre navigateur l’attendrait avec ses scripts ; sans eux, il chargerait toutes les images d’un coup.
Ce qui est compté
Les mots sont le texte visible de la région principale de la page. Les titres sont ses intertitres. Un vrai lien porte une adresse qui n’est ni vide, ni « # », ni un script. Une image a son texte quand elle porte un attribut alt. Chaque bouton compte comme en attente : sans script, aucun ne répond. Chaque film aussi.
Les temps
Le premier octet et le poids du HTML viennent du relevé Resource Timing que votre navigateur tient de cette demande : le moment où son premier octet est arrivé, et ce que pesait le HTML en transit, compressé.
La comparaison
Sur cette page, les mots du cadre sont comparés à ceux de la page que vous lisez, scripts actifs : le plus petit des deux sur celui de la page en direct.
Ce qui bouge
Les étiquettes sont dessinées par cette page, sur des boîtes mesurées une seule fois dans le cadre, avant tout mouvement. Parcourir la page déplace la page encadrée d’un bloc, sans rien y changer ; ses propres animations sont mises en pause à la fin de l’histoire.
Ce que ça coûte
Une demande de plus pour le HTML de la page, faite à votre approche de cette section ou au choix d’une page, puis ses feuilles de style, ses polices et les images proches de la partie que le cadre montre. La page n’y exécute aucun script, et ne compte donc aucune visite.
| Lecture | Valeur |
|---|---|
| Mots de la région principale | — |
| Titres | — |
| Vrais liens | — |
| Images avec texte de remplacement | — |
| Boutons en attente du script | — |
| Instruments dessinés sur le serveur | — |
| Films en attente du script | — |
| Points affichés dans l’en-tête | — |
| Lune de l’en-tête | — |
| Scripts retirés | — |
| Premier octet | — |
| HTML en transit | — |
| HTML décompressé | — |
| Fenêtre du cadre | 1440 × 760 |
03 · Le code
Les types vérifient la forme. Les tests, la somme.
Ce site est écrit en TypeScript ; sa construction s’arrête si les types ne concordent pas. Une somme fausse leur échappe : nos tests exécutent donc le code, taxes du Québec et français compris.
Tests en directTypes mesurés 2026-10-18
01 · Un changement
02 · Les portes
- TypesTypeScript, à la construction—Types : en attente
- TestsLe code, confronté à des réponses connues—Tests : en attente
- FrançaisLa règle qu’appliquent nos tests de contenu—Français : en attente
- Choisissez un changement et faites-le passer.
Choisissez un changement et faites-le passer.
03 · Ce qu’elles ont dit
En attente d’un changement.
Ce que voit un visiteur
- Avant taxes
- —
- TPS
- —
- TVQ
- —
- Total
- —
Les tests et la règle du français tournent dans votre navigateur, sur le code de taxes de ce site et le français de cette page. Types : notre construction, mesurée le 18 octobre 2026.
Comment c’est lu
- Types
- TypeScript ne peut pas tourner dans un navigateur sans des mégaoctets de compilateur : cette porte montre donc ce qu’il a dit quand nous l’avons lancé sur le code source de ce site, le 18 octobre 2026, soit 952 fichiers lus dans le code propre au site, et aucune erreur. Le message pour un prix passé en texte est celui du compilateur, saisi sur un fichier d’une ligne compilé avec les réglages du site. L’arrondi vers le bas se compile lui aussi sans erreur. La construction du site lance la même vérification, et ses réglages la laissent active.
- Tests
- Exécutés dans votre navigateur pendant que vous regardez : les réponses connues que nos tests exigent pour les taxes du Québec, puis l’aller-retour (un prix avant taxes, avec ses taxes, puis le retour) pour chaque montant de 0 à 200 dollars par pas de 37 cents, dans chaque province et territoire. Les cas viennent du module qu’importent nos tests, et tournent sur les fonctions mêmes de notre calculateur gratuit de TPS & TVQ. Nos tests les exécutent dans Node.js de notre côté ; ici, c’est votre navigateur. Le temps vient de l’horloge de votre navigateur, pour le travail seul.
- Arrondi vers le bas
- Les mêmes fonctions avec leur seule ligne commune changée : chaque taxe coupée au cent inférieur plutôt qu’arrondie au plus près. La ligne livrée est montrée à côté, sur sa carte.
- Prix en texte
- L’appel tourne vraiment : votre navigateur passe le texte à la fonction livrée, et le reçu imprime ce qui en est revenu, tel quel.
- Français
- La règle qu’appliquent nos tests de contenu, exécutée sur le français de cette page tel que votre navigateur l’a reçu : une apostrophe courbe, et une espace insécable avant le deux-points, le point-virgule, les points d’interrogation et d’exclamation, et à l’intérieur des guillemets.
- Envoyé
- Rien. Chaque lecture reste sur cette page.
04 · Le trajet des données
Là où votre équipe écrit. Comment ça se rend à l’écran.
Chez la plupart de nos clients, les mots vivent dans WordPress, gardés dans MariaDB. Un site les demande par REST ou GraphQL, ou garde un WebSocket ouvert. Suivez une entrée, puis modifiez-la.
Une entrée de démonstration, suivie en quatre étapes : écrite dans WordPress, gardée par une base de données, transmise au site, affichée en carte.
Illustratif· les formes sont réelles
Votre équipe écrit l’entrée dans WordPress.
Jusqu’à 48 caractères. Rien n’est envoyé ni gardé : le texte reste sur cette page.
Places restantes
01 · Là où on l’écritWordPress
Date—calculéeLa nuit de la prochaine pleine lune, calculée dans votre navigateur.
Adresse—Créée par WordPress à partir du titre lors de la première publication, puis conservée.
Le PHP derrière ce champ
register_post_meta( 'event', 'seats_left', [
'type' => 'integer',
'single' => true,
'show_in_rest' => [
'schema' => [ 'minimum' => 0 ],
],
] );Rien n’est encore publié
02 · Là où on la gardeMariaDB
En attente de la publication
Les tables de WordPress : une ligne pour l’entrée, puis une ligne par champ.
03 · Comment elle voyageAPI REST
En attente de l’entrée
- Requêtes
- —
- Octets reçus
- —
- Allers-retours
- —
—
04 · Là où elle s’afficheReact, dans votre navigateur
La carte, écrite pour React
function EventCard({ e }) {
return <article className="event">
<img src={e.cover} alt="" />
<h3>{e.title}</h3>
<time>{day(e.date)}</time>
<Seats left={e.seatsLeft} />
</article>;
}React dessine la carte ci-dessus à partir de l’entrée, en direct.
Les noms des tables de WordPress, sa route REST et la réponse de chaque système à −1 sont réels ; l’entrée, le schéma GraphQL et le canal sont dessinés. Les tailles sont comptées dans votre navigateur, à partir du texte affiché.
Comment c’est lu
- La date
- La prochaine pleine lune, calculée dans votre navigateur par le calcul lunaire qu’utilise l’en-tête de ce site, puis écrite dans votre langue. La balade est fixée à 20 h 30, la nuit de la pleine lune.
- Les tailles
- Chaque chiffre est la longueur en octets du texte exact affiché, en UTF-8, comptée par votre navigateur. REST et GraphQL comptent les réponses reçues ; le WebSocket compte son unique message.
- Les refus
- Tels que chaque système les écrit, vérifiés le 2026-10-17 dans sa propre documentation et son code source : la validation REST de WordPress (rest_invalid_param, avec rest_out_of_bounds à l’intérieur), la violation de contrainte de PostgreSQL (SQLSTATE 23514, sous le nom qu’il donne à une contrainte sans nom), la validation de documents de MongoDB (code 121, un minimum signalé par « comparison failed »). MariaDB garde −1 parce que WordPress range chaque champ en texte.
- Dessiné
- L’entrée, le schéma GraphQL, le canal et le gabarit Vue sont dessinés pour cette démonstration. Ce site n’utilise ni WordPress, ni PHP, ni MariaDB, ni MongoDB, ni GraphQL, ni WebSockets, ni Vue : c’est ainsi que nous bâtissons des sites pour nos clients. La carte est dessinée par React, en direct.
- Votre titre
- Le champ n’envoie rien et ne garde rien : ce que vous tapez vit dans la mémoire de cette page et disparaît quand vous la quittez.
- Le cache
- La façon dont les pages publiées restent prêtes pour les visiteurs est mesurée sur une autre page : Performance · Rendu
05 · 3D et mouvement
Dessiné par votre puce graphique. En ce moment.
Three.js parle WebGL à la puce graphique de votre appareil ; GSAP règle ses mouvements comme une partition. La gemme est calculée sous vos yeux. Faites-la tourner et lisez ce qu’elle coûte.
En direct · votre puce graphique
L’entrée, en partition
01 · Votre appareil
- Puce graphique
- —
- Dessin par
- —
02 · Cette image
- Triangles
- —
- Appels de dessin
- —
- Durée d’image
- —
- Images par seconde
- —
jusqu’au rythme de votre écran
03 · Ce qu’il a coûté
Chargé quand vous arrivez à moins d’un écran
three.js · GSAP
Pas chargé ici : Babylon.js, la trousse de moteur de jeu que nous utilisons pour les mondes 3D complets.
04 · Exigez-en plus
Taille
Dessiné en direct par votre appareil et compté par son moteur de rendu ; le nom de votre puce est lu ici et n’est envoyé nulle part.
Comment c’est lu
Les comptes
Les triangles et les appels de dessin sont les compteurs du moteur de rendu de three.js, remis à zéro à chaque image. En mode partagé, les deux moitiés sont deux passes sur la même scène dans une seule image, et les deux sont comptées.
L’image
La durée d’une image est l’écart entre deux images d’animation de votre navigateur, en moyenne sur les soixante dernières, et mesurée pendant que quelque chose bouge : le dessin s’arrête une seconde après le retour au calme. Le nombre d’images par seconde ne peut dépasser celui de votre écran.
Votre puce
Son nom vient des renseignements de rendu de WebGL, là où votre navigateur les donne ; certains le gardent privé exprès. Il est affiché ici et n’est envoyé nulle part.
Le moteur
three.js et GSAP arrivent par un import dynamique quand cette section approche à moins d’un écran, pas avec la page. Leur poids est la somme des scripts que la mesure des ressources de votre navigateur (Resource Timing) enregistre pendant cet import, ou « depuis le cache » quand aucun octet n’a traversé le réseau.
La partition
Elle est tracée à partir des animations de la ligne du temps GSAP elle-même : où chacune commence, combien de temps elle dure, et sa courbe. Une cadence reconstruit la ligne du temps avec sa courbe ; Mécanique, c’est la même entrée sans aucune courbe.
La gemme
Elle est générée d’une recette à graine fixe, la même à chaque visite ; rien n’est précalculé ni joué d’une vidéo. Les éclats forment un seul maillage instancié : un appel de dessin, peu importe leur nombre.
three.js dessine aussi les optiques d’images de la Serre des images de la page Design.
Le choix
Le projet choisit l’outil.
Nous choisissons parmi ces vingt-quatre outils selon ce qu’un site doit accomplir : WordPress là où votre équipe écrit déjà, une base de données taillée pour vos dossiers, la 3D là où elle raconte votre histoire, un service de paiement là où vous vendez. Ce dont un projet n’a pas besoin reste hors de ses pages.
Ce que montre cette page, c’est notre nouveau système, notre façon de bâtir aujourd’hui. Les sites livrés avant lui ne l’incluent pas forcément.
Envie d’outils choisis pour votre projet ?
Dites-nous ce que votre site doit accomplir. Nous vous dirons avec quoi nous le bâtirions, et pourquoi.