What is used, and where
| Technology | What it does here | Where |
|---|---|---|
| HTML5 | Landmarks, headings and labelled forms, so pages work with screen readers and search engines. | every page |
| CSS | Cascade layers, container queries, :has(), color-mix(), view transitions between pages, and light and dark themes. | assets/site.css |
| JavaScript | Small scripts and modules: the gallery and quick search, the planner and admin pages, and five sample engines (booking, menu, timetable, catalog, estimator). No libraries. | assets/*.js |
| SVG | Illustrations that stay sharp at any size. | the sample pages |
| JSON-LD | Structured data, so search engines know the business name, address and hours. | home page, bespoke sample |
| Pages Functions | The API behind the forms: validation, spam checks, rate limiting and storage. | functions/ |
| D1 (SQLite) | Stores briefs, rate-limit counters and an audit log. | migrations/ |
| Turnstile | A privacy-friendly human check on the brief form. | plan page |
| Cloudflare Access | Signs the owner in to the admin page. The API checks the token again. | admin page |
| GitHub Actions | Tests, code scanning and automatic backups on every change. | .github/workflows |
| Node.js | Builds every sample site, and the registry the hub reads, from small JSON files. Adding a sample means adding one file. | tools/build.mjs |
| Design styles | Ten design trends (bento grid, minimalism, neumorphism, claymorphism, skeuomorphism, glassmorphism, liquid glass, brutalism, maximalism, spatial UI) built as small sets of CSS variables. Any mix can be switched on, and the site uses a hybrid of all ten. See the Design lab. | assets/skins.css, assets/lab.js |
| Shortcuts and gestures | Keyboard shortcuts that follow the Mac or PC key, trackpad pinch and two-finger swipes, touch swipes, pinch and press-and-hold, and a switch to turn the gestures off. Press ? on any page for the full list. | kit/akc.js, assets/hub.js |
| Browser APIs | View Transitions for the gallery, dialog for quick search and lightboxes, the History API for shareable filters, Pointer and Wheel events for gestures, the Vibration API for a small tap on supported phones, Web Share, Blob downloads for calendar files, and local storage for saved items, carts and your design choice. | assets/hub.js, kit/ |
Security, privacy and updates
Every request to the API is checked on the server. Database queries use bound parameters, the brief form has a human check and a rate limit, and the admin area refuses anyone without a valid Cloudflare Access token. Secrets live in Cloudflare's settings, not in the repository.
The form asks only for what we need to reply. IP addresses are hashed with a secret before they are used and are not stored with your brief. Briefs are deleted after 180 days. The privacy page has the details.
Changes go through GitHub, where the tests run. With branch protection on, a change cannot go live until they pass, and a backup of the previous version is tagged automatically.
Demos
Container query
Drag the corner to resize. The card changes layout by its own width, not the screen's.
I switch to a side-by-side layout when my container is wide.
:has() selector
This panel styles itself when the checkbox is on, with no JavaScript.
oklch() and color-mix()
Your browser
Which of these features this device supports right now.