Colophon
How this site is built, for anyone who wants to check the work.
Stack
- Angular 22.2.0, using standalone components, signals, and zoneless change detection.
- Static prerendering with @angular/ssr. Every page is plain HTML at build time, and there is no server at runtime.
- RxJS drives the simulation on the home page, bridged to signals with toSignal.
- The simulations and the live chart are drawn by hand on a canvas, with no chart library.
- The live chart is a Web Component built with Angular Elements. The case study loads it the way any other site would, and a plain HTML sandbox page proves it needs no framework around it.
- Page changes use the browser’s View Transitions API through the Angular router. Motion animates steps inside two demos and is only downloaded with them.
- The SciChart panel loads SciChart’s free community edition from jsDelivr only when you press its button. That edition shows a watermark and sends SciChart anonymous usage data, including the page address.
- Tailwind CSS v4, with colours and type sizes defined as CSS custom properties.
- Fira Code for everything, self-hosted and limited to the Latin character set (36 KB). Icons are Tabler icons through ng-icons, and only the ones used are bundled.
Quality
- Pages work without JavaScript. Only interactive demos need it, and each has a static fallback.
- Every demo is downloaded only when it scrolls into view, so the home page stays small.
- Animation stops when your system asks for reduced motion, and the simulation pauses when the tab is hidden.
- Unit tests run on Vitest. End-to-end, accessibility (axe) and screenshot comparison tests run on Playwright, on desktop and mobile, in light and dark.
- Every push runs the same checks in GitHub Actions: formatting, the tests above, Lighthouse with every category at 95 or above, a JavaScript budget for the home page, and a check of every link. Any failure fails the build.
Design
- The colours come from control-room consoles: a cool grey-blue ground, teal for messages in flight, amber for work done, and red only for failures.
- The page layout borrows its lanes from queue diagrams. Section headings sit in a narrow lane and content in a wide one.
Build log
Real numbers from the last measured build, not claims. The script that produces them is in the repository, and CI runs it on every push.
npm run build
8 pages prerendered to static HTML
- Home page, JavaScript before first interaction
- 116 KB
- Home page, all JavaScript once idle
- 140.5 KB / budget 150 KB
- <nehang-live-chart> Web Component
- 49.4 KB
- Stylesheet
- 7.1 KB
- Fira Code, Latin subset
- 35.4 KB
npm test
8 unit tests passed
npx playwright test
150 end-to-end and accessibility checks passed on desktop and mobile, 4 skipped on purpose
lighthouse --preset=mobile # median of 3 runs
| Page | Performance | Accessibility | Best practices | SEO |
|---|---|---|---|---|
| / | 96 | 100 | 100 | 100 |
| /work/event-driven | 98 | 100 | 100 | 100 |
# Measured on 2026-09-25 at commit edbac29. Regenerate with: npm run report
Source
The full source is public on GitHub. View the repository