—
—
—
Waiting for the answer
Technology by design
Chosen for the job.Shown at work on this page.
A tool is worth what it does on the page. On our new system, each of ours earns its place by a job: React composing pages ahead on our server, TypeScript checking every piece before it ships, three.js drawing on your own graphics chip, WordPress where your team writes. This page shows them at work, reads live what runs here, and says plainly what belongs to client projects.
Readings are taken live from this page, in your browser, and sent nowhere. Diagrams are illustrative where marked.
01 · The tools
Twenty-four tools. Each one in its place.
Our twenty-four tools, each where it really works: on this page, read live as you watch; elsewhere on this site; or in client projects. Open a tile for its job.
Live · read from this page
Where each tool works
0 of 24 tools opened01 · Where it works
02 · The selected tool
TypeScriptThis pageChecks that every piece of the code fits the others, before anything ships.
How we know: stated Checked this page before it shipped · none of it reached you.
Where to see itThe code, below
TypeScript. Working for this page. Checks that every piece of the code fits the others, before anything ships. Checked this page before it shipped · none of it reached you.
| Tool | Where it works | Evidence | How it is known |
|---|---|---|---|
| TypeScript | Working for this page | Checked this page before it shipped · none of it reached you. | stated |
| JavaScript | Working for this page | Reading this page… | read |
| HTML | Working for this page | Reading this page… | read |
| CSS | Working for this page | Reading this page… | read |
| PHP | In client work | Our own WordPress plugins are written in it · in client projects. | described |
| Node.js | Working for this page | Built this page’s HTML ahead of your visit. | stated |
| React | Working for this page | React 19.3.0-canary-3f0b9e61-20260317 · HTML from our server, woken in your browser. | read |
| Vue.js | In client work | The same job as React, for teams that use it · in client projects. | described |
| WordPress | In client work | Where our clients’ teams write · in client projects. | described |
| MariaDB | In client work | Where WordPress keeps what teams write · in client projects. | described |
| PostgreSQL | Elsewhere on this site | Keeps this site’s messages, written by a role that cannot read them · your browser never connects to it. | stated |
| MongoDB | In client work | For records that change shape · in client projects. | described |
| REST API | Elsewhere on this site | This site’s forms answer through it, on our server. | stated |
| GraphQL | In client work | Asks for exactly the fields a screen shows · in client projects. | described |
| WebSockets | In client work | An open line, for live updates · in client projects. | described |
| GSAP | Working for this page | Asleep: 0 KB until Motion & 3D comes near. | read |
| Three.js | Working for this page | Asleep: 0 KB until Motion & 3D comes near. | read |
| WebGL | Working for this page | Asking your browser… | read |
| Babylon.js | In client work | For full 3D scenes · in client projects, not loaded here. | described |
| MapLibre | Elsewhere on this site | Reading this page… | read |
| AWS | Working for this page | Reading this page… | read |
| Turnstile | Elsewhere on this site | Reading this page… | read |
| Umami | Working for this page | Reading this page… | read |
| Stripe | In client work | In the shops we build. | described |
Read in your browser, now, and sent nowhere. Client work is described, not run here.
How this is read
- The document
- Elements and titles are counted in this page’s document as it stands in your browser; the language is the one the page declares on its root element.
- The stylesheets
- Every rule in the page’s own stylesheets, nested rules included, read through cssRules; a sheet served from another host cannot be read and is skipped. Design tokens are the distinct custom properties those rules declare. Container queries: asked of your browser with CSS.supports.
- The browser’s records
- Resource Timing: the script files and their size on the wire (or your cache), the files fetched from our storage (pictures through the image optimizer counted by their source), and any request to the map tiles, the form check or the payment provider, by host. Navigation Timing: the first byte. After a move between pages without a reload, the records cover your whole visit, and the readings say so.
- The graphics chip
- One throwaway WebGL context, created once after this board came into view, asked its version and the chip’s name, then released at once. Some browsers keep the name private, and the tile says so.
- Woken later
- three.js and GSAP are not on this page when it arrives. Motion & 3D fetches them when you come near and reports their version; their tiles light then, here, with no reload.
- Stated, not read
- TypeScript is compiled away before a page ships; Node.js built this page’s HTML on our server, where PostgreSQL and the REST API also work, and no browser reads them there. These tiles say so and are tagged “stated”; Node.js’s also gives the first byte your browser recorded, as a plain figure. Client tools are described and carry no measurement.
- Analytics
- In production, the presence of the Self-hosted Umami analytics tracker on this page. A development build carries none and counts nothing.
02 · The page
The page stands before any script arrives.
Each page is assembled ahead by React on our server: you receive finished HTML and CSS, and JavaScript then wakes what you can touch. Here is a page of this site with its scripts off.
Live · scripts off
GET/expertise/technology · scripts: none
01 · What arrived ready
Words, ready—wordsreadable without script
- Real links
- —
- Titles
- —
- Images with text
- —
02 · What waits for script
Buttons, waiting—buttonswaiting for script to answer
03 · How it came
- First byte
- —ms
- HTML, compressed
- —KB
A page of this site, about to be opened with its scripts switched off.
A real page of this site, opened in your browser with scripts switched off. Counted from its own markup.
How this is read
The frame
Your browser asks this site for the page, once, as it would for any page. Its scripts are taken out, and it opens in a frame your browser sandboxes without permission to run any. The frame is the size of a desktop or a phone window. Two things are changed in it. A film on this site gets its source from script, so in the frame it stands as an empty box of its size. A picture the page asks to load late is held until the frame comes near it, as your browser would hold it with scripts on: without them, it would fetch every picture at once.
What is counted
Words are the visible text of the page’s main region. Titles are its headings. A real link has an address that is not empty, not “#” and not a script. An image has its text when it carries an alt attribute. Every button counts as waiting: without script, none answers. So does every film.
The timings
The first byte and the size of the HTML come from your browser’s own Resource Timing record of that request: when its first byte arrived, and how much the HTML weighed as it travelled, compressed.
The comparison
On this page, the words in the frame are set against the words of the page you are reading, scripts running: the smaller count over the live one.
What moves
The tags are drawn by this page, on boxes measured once in the frame before anything moves. Moving through the page shifts the framed page as a whole and changes nothing in it; its own animations are paused when the story ends.
What it costs
One more request for the page’s HTML, made when you come near this section or pick a page, then its stylesheets, its fonts and the pictures near the part of it the frame shows. The page runs no script there, so it counts no visit.
| Reading | Value |
|---|---|
| Words in the main region | — |
| Titles | — |
| Real links | — |
| Images with a text alternative | — |
| Buttons waiting for script | — |
| Instruments drawn on the server | — |
| Films waiting for script | — |
| Points shown in the header | — |
| Moon in the header | — |
| Scripts taken out | — |
| First byte | — |
| HTML as it travelled | — |
| HTML once unpacked | — |
| Frame window | 1440 × 760 |
03 · The code
Types catch the shape. Checks catch the sum.
This site is written in TypeScript, and its build stops on types that do not fit. Types cannot see a wrong sum, so our tests run the code: Québec taxes to the cent, French to the space.
Live checksTypes measured 2026-10-18
01 · A change
02 · The gates
- TypesTypeScript, at the build—Types: waiting
- ChecksThe code, run against known answers—Checks: waiting
- FrenchThe rule our copy tests hold—French: waiting
- Choose a change and send it.
Choose a change and send it.
03 · What it said
Waiting for a change.
What a visitor sees
- Before tax
- —
- GST
- —
- QST
- —
- Total
- —
The checks and the French rule run in your browser, on this site’s own tax code and this page’s French. Types: our build, measured October 18, 2026.
How this is read
- Types
- TypeScript cannot run in a browser without megabytes of compiler, so this gate shows what it said when we ran it on this site’s source on October 18, 2026: 952 files of the site’s own code read, and no error. The message for a price passed as text is the compiler’s own, captured from a one-line file compiled with the site’s settings. The rounded-down change compiles without an error too. The site’s build runs the same check, and its settings leave it on.
- Checks
- Run in your browser as you watch: the known answers our tests hold for the Québec taxes, then the round trip (a price before tax, with its taxes, then back) for every amount from 0 to 200 dollars in 37-cent steps, in each province and territory. The cases come from the module our tests import, and run on the very functions of our free GST & QST calculator. Our tests run them in Node.js on our side; here your browser does. The time is your browser’s clock, the work alone.
- Rounded down
- The same functions with their one shared line changed: each tax cut to the cent below instead of rounded half up. Shown beside the shipped line on its card.
- Price as text
- The call really runs: your browser hands the text to the shipped function, and the receipt prints whatever came back, as it came back.
- French
- The rule our copy tests hold, run on this page’s own French as your browser received it: a curly apostrophe, and a non-breaking space before a colon, a semicolon, a question or exclamation mark, and inside quotation marks.
- Sent
- Nothing. Every reading stays on this page.
04 · How data travels
Where your team writes. How it reaches the screen.
For most clients, words live in WordPress, kept in MariaDB. A site fetches them over REST or GraphQL, or keeps a WebSocket open. Follow one entry, then change it.
One demonstration entry, followed through four stations: written in WordPress, kept by a database, carried to the site, shown as a card.
Illustrative· the shapes are real
Your team writes the entry in WordPress.
Up to 48 characters. Nothing is sent or kept: the text stays on this page.
Seats left
01 · Where it is writtenWordPress
Date—computedThe night of the next full moon, computed in your browser.
Address—Made by WordPress from the title when the entry is first published, and kept after.
The PHP behind this field
register_post_meta( 'event', 'seats_left', [
'type' => 'integer',
'single' => true,
'show_in_rest' => [
'schema' => [ 'minimum' => 0 ],
],
] );Nothing published yet
02 · Where it is keptMariaDB
Waiting for Publish
WordPress’s own tables: a row for the entry, then a row for each field.
03 · How it travelsREST API
Waiting for the entry
- Requests
- —
- Bytes received
- —
- Round trips
- —
—
04 · Where it appearsReact, in your browser
The card, written for 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 draws the card above from the entry, live.
WordPress’s table names, its REST route and each system’s answer to −1 are real; the entry, the GraphQL schema and the channel are drawn. Sizes are counted in your browser from the text shown.
How this is read
- The date
- The next full moon, computed in your browser by the moon calculation this site’s header uses, then written in your language. The walk is set for 8:30 p.m. on the night the moon is full.
- The sizes
- Each figure is the length in bytes of the exact text shown, as UTF-8, counted by your browser. REST and GraphQL count the answers received; the WebSocket counts its one message.
- The refusals
- As each system prints them, checked on 2026-10-17 against its own documentation and source: WordPress’s REST validation (rest_invalid_param, with rest_out_of_bounds inside), PostgreSQL’s check violation (SQLSTATE 23514, under the name it gives an unnamed check), MongoDB’s document validation (code 121, a minimum reported as “comparison failed”). MariaDB keeps −1 because WordPress stores every field as text.
- Drawn
- The entry, the GraphQL schema, the channel and the Vue template are drawn for this demonstration. This site runs none of WordPress, PHP, MariaDB, MongoDB, GraphQL, WebSockets or Vue: they are how we build sites for clients. The card is drawn by React, live.
- Your title
- The field submits nothing and keeps nothing: what you type lives in this page’s memory and is gone when you leave.
- Caching
- How published pages are kept ready for visitors is measured on another page: Performance · Rendering
05 · Motion & 3D
Drawn by your own graphics chip. Right now.
Three.js speaks WebGL to your device’s graphics chip; GSAP times its movement like a score. The gem is computed as you watch, its engine fetched as you came near. Turn it, and read its cost.
Live · your graphics chip
The entrance, as a score
01 · Your device
- Graphics chip
- —
- Drawing with
- —
02 · This frame
- Triangles
- —
- Draw calls
- —
- Frame time
- —
- Frames a second
- —
up to your screen’s rate
03 · What it cost
Fetched when you come within a screen
three.js · GSAP
Not loaded here: Babylon.js, the game-engine toolkit we use for full 3D worlds.
04 · Ask more of it
Cut
Drawn live by your device and counted by its renderer; your chip’s name is read here and sent nowhere.
How this is read
The counts
Triangles and draw calls are three.js’s own renderer counters, reset at every frame. In Split, the two halves are two passes over the same scene in one frame, and both are counted.
The frame
Frame time is the gap between your browser’s animation frames, averaged over the last sixty, and measured while something moves: the drawing stops a second after all is still. A frame rate cannot pass your screen’s own.
Your chip
Its name comes from WebGL’s renderer information, where your browser shares it; some keep it private on purpose. It is shown here and sent nowhere.
The engine
three.js and GSAP arrive by a dynamic import when this section comes within a screen of view, not with the page. Their weight is the sum of the scripts your browser’s Resource Timing records during that import, or “from your cache” when no byte crossed the network.
The score
Drawn from the GSAP timeline’s own tweens: where each starts, how long it lasts, and its ease. A cadence rebuilds the timeline with its ease; Mechanical is the same entrance with no ease at all.
The gem
Generated from a seeded recipe, the same gem at every visit; nothing is pre-rendered or played from a video. The sparkles are one instanced mesh: one draw call, however many there are.
three.js also draws the image optics of the Design page’s Dream Conservatory.
The choice
The project chooses the tool.
We pick from these twenty-four for what a site has to do: WordPress where your team already writes, a database shaped like your records, 3D where it tells your story, a payment provider where you sell. What a project does not need stays off its pages.
What this page shows is our new system, the way we build today. Sites we delivered before it may not include it.
Want a stack chosen for your project?
Tell us what your site has to do. We will tell you what we would build it with, and why.