What the site has gained

The Time Manager answers the keyboard: with a sitting focused, on the Today list, the board or the timeline, D logs it done (Shift+D all of it), L pushes it off today, X says it did not get finished, S splits it, E edits the homework, [ and ] move it a day (the focus goes with it), U undoes a move, and the arrows go from sitting to sitting. “?” lists them there.

The Time Manager can put your planned study blocks in Google Calendar, Apple Calendar or any calendar that takes a link, kept up to date as the plan changes; the link can be replaced or turned off from settings.

A Juice assignment can give each player the questions in an order of their own, so neighbours are rarely on the same one; it is on by default and reports read the same.

A Juice host can start a rematch from the podium: the same quiz again, with a new PIN, and the players follow into the new lobby under the same names and avatars without typing anything.

A Juice host’s lobby has a “Copy join link” button, for posting the game’s own address in a class chat.

Project pages can show short screen recordings, muted and looping, that play only while in view, hold still with reduced motion or a data saver, and can always be paused. None are recorded yet.

The home page shows when each project began, on a strip from July to today, dated by each project’s first commit.

A project page says when the project last changed, where something can say it truthfully: the Datacenter Tracker from its public code on GitHub, the Time Manager from this site’s own code.

The home page’s signposts gain a Juice tile, to the join page, saying how many games were played this week and by how many players.

Each hosted site’s card says how many visits it had this week, counted as its pages are opened, without the owner’s own visits, crawlers or prefetches, and with nothing kept about visitors.

The admin console counts views of the public pages, a week at a time, by day and by page, without cookies, addresses or IDs; crawlers, browsers that ask not to be tracked, and the admin are left out. The colophon says so.

/status shows whether the site, its database and Juice’s code runner are up, checked as you look, with when the running copy started and how many Juice games are being played; /api/status gives the same as JSON.

/colophon says how the site is made: what it is built with, its type, what happens on the page, how a change goes live, and what it does and does not keep about visitors, with the commit that is running.

/changelog lists everything the site has gained, newest first, each change dated by when it was committed and filterable by kind, with an Atom feed of its own for people who follow the site itself; /now’s “Lately on this site” links to it.

The Datacenter Tracker’s page has a Source button to its code on GitHub, the one project whose repository is public.

On a project page, a tool another project also uses is a link to everything on the site that mentions it, and “Built with the same tools” lists those projects with the tools they share.

A project page’s chapters (See it work, How it works, Worth knowing) end in a § that links to the chapter and copies its address, ready to paste.

Each project’s page tells search engines what the project is: its name, what it does, what sort of thing it is (“CLI · terminal UI · web console”), what it is built with, and its screenshots with their captions.

A shared Juice join link (nathanz.cloud/play/123456) unfurls as the quiz: its title, the PIN, how many questions and whether it is live or at your own pace, and that no account is needed.

“?” opens the command palette on the keyboard jumps (g then h for Home, n for Now, and so on), each of which can be chosen like any page.

npm run test:a11y checks every page with axe-core in Chrome: public pages in both languages and themes and on a phone, and the working screens when given a local account. Everything it found is fixed (see Fixed).

Updates, guestbook notes and answers are marked with the language they are written in, on every page and in the feeds, so a screen reader reads a Chinese update in a Chinese voice on the English site (and the other way round), and Chinese is spaced as Chinese there too.

A thin line across the top shows a page is on its way, when it takes a moment.

Moving between public pages eases the new page in, the header staying put; still with reduced motion.

An update, a tag and a project page open with breadcrumbs showing where they sit (Home / Now / …).

The command palette opens with the pages you visited last, “/” opens it too, and “g” then a letter jumps straight to a page (n for Now, g for the guestbook, and so on).

The home page’s footer links to the colophon and the status page, and its “updated” date now opens the changelog.

Chinese is set in Chinese faces chosen for it, a sans for text and a Song serif for headings (PingFang, Noto / Source Han or Microsoft YaHei, whichever a reader has), instead of whatever the browser picks; mono labels no longer fall back to a bitmap-like Song. A heading stays a serif while its font loads.

Chinese is spaced as in print: a hair of space between Han and a Latin word or a number run together, and a line opening with a bracket starts flush instead of half a character in. Code and form fields are left exactly as typed.

Toasts no longer break the list they sit in for screen readers: the role that made each item a status is gone (the region announces them), and a danger toast’s text alone interrupts as an alert.

Warning and danger badges, chips, alerts and timeline marks, and the board’s due flags, now reach 4.5:1: their text takes the darker shade of its colour on the pale tint behind it.

A sitting’s popover on the board was too narrow for work over several sittings: its “more” button sat outside it, behind a sideways scroll.

Closing “Edit homework” put the focus nowhere; it now goes back to the sitting it was opened from.

Switching theme while a page change starts no longer leaves an “AbortError: Transition was skipped” error in the console; the theme still changes.

The Time Manager’s header no longer logs a hydration mismatch: tooltips link their text to the trigger once on the page.

A Juice game’s PIN is read out as text (“PIN 1 9 0 3 8 9” on the host’s screen) instead of from a label on an element that cannot carry one.

Code blocks and tables in /now posts, Juice code, a game report’s players and the admin’s audit log can be scrolled sideways from the keyboard when they are wider than the screen; the audit log’s column headings now stay in view as it scrolls.

The sign-in, account and invitation pages, and the Juice quiz editor, have a top-level heading, so a screen reader’s list of headings starts with what the page is.

Text on the glass header (and the “Next project” label) stays legible over anything that scrolls beneath it: the glass holds more paper (62% in light, 72% in dark, where a light screenshot under it had brought small text to about 4:1), and the header’s links are set in the text colour, not the quieter grey. The name in the header is a full-height link.

A Chinese update’s share card draws its characters in a Song serif and a sans matching the pages, from faces the site carries, instead of fetching one from Google Fonts on every card: from the host that often failed, leaving gaps or no picture at all.

From the command palette, the site can be kept still whatever the device says, its text set larger, and reading mode turned on (also on each update’s page). Each is kept in the browser and applied before the page paints.

The admin’s account button shows how many guestbook stamps wait for approval, with a way straight to them.

The guestbook has a desk: a visitor can put their stamp where they like on it, and the page shows every stamp in its place. A stamp of the day heads the wall, the wall loads more as you ask, and the admin can answer a stamp, the answer shown under it.

An enlarged /now picture zooms: double tap or click, pinch, or + and −, then drag to look around; 0 or another double tap comes back.

Pictures put together in one paragraph of a /now post show as a row, side by side at one height.

/now images load as AVIF where the browser reads it, and in the width the screen needs, made once on the server and kept.

An address alone on its line in a /now post shows as a card with the page’s site, title and description, fetched safely by the server and kept a week; no picture is loaded from the other site.

/now updates can be tagged. Each tag has its own page and feed, the tags show under each update, and /now lists every tag in use.

The 404 page offers to search the site for the words in the address that found nothing.

/now has a search box for its updates.

The site can be searched: /search finds /now updates, projects and pages that mention every word asked for, and the command palette searches as you type.

Each /now update has a Reply by email link under it, the message’s subject naming the update.

/now prints cleanly: the words on white in any theme, links followed by their addresses, code wrapped, and the controls left off the page.

/now gathers its updates under the months they went up in.

Each heading in a /now post can be linked to, by the # beside it, and an update with three sections or more lists them as its contents.

/now posts can have footnotes ([^1]), gathered under the post, with links there and back that never jump into another post’s notes.

/now code blocks name their language and number their lines (from three lines on); copying or selecting the code leaves the numbers behind.

/now says how long an update takes to read, beside its date, once it is more than a minute.

The /now editor’s Card panel shows how a link to the update will look when shared, drawn from the draft as you write, with the title and description it will carry.

The admin console’s audit log reads in words, each with an icon (“Posted to /now”, “Failed sign-in”), the code itself on hover. Approving or removing a guestbook stamp is now recorded there too.

The admin console lists every image uploaded for /now, with its size and the updates, drafts or earlier wordings that use it. Unused ones can be removed at once, and any can be copied as Markdown.

The admin console can download a backup of /now: every update as a Markdown file with its dates, beside the images it shows, in one zip.

⌘/ (Ctrl / elsewhere) in the /now editor lists every shortcut it answers to.

Typewriter mode in the /now editor keeps the line you are writing in the middle of the box.

The /now editor’s spell checker follows the language a draft is written in (English or Chinese), or one you choose, or can be turned off.

The /now editor’s footer says about how long the update takes to read.

Images added in the /now editor show upload progress, hold their place in the text while they upload so writing can carry on, and can be tried again or left out when an upload fails.

The /now editor has an Images panel: every image in the draft with a thumbnail, its description and its caption, filled in without hunting through the Markdown. The warning about an undescribed image opens it.

Rich text pasted into the /now editor from a web page, Google Docs or Word comes in as Markdown: headings, bold and italic, links, lists, quotes, code and tables. A copy from a code editor still pastes as plain text.

/now posts are set as type: straight quotes curl the way they face, an apostrophe becomes ’, three dots an ellipsis, --- an em dash and -- an en dash, on the page, in the feed, titles and cards. Code is left as typed.

/now drafts are kept on the server as well as in the browser, so writing begun on one device carries on on another; the newer copy opens.

Edited /now updates keep their earlier wordings; the editor’s History shows them and brings one back.

Removing a /now update can be undone: it disappears at once, the console offers Undo for ten seconds, and it is only deleted for good an hour later.

/now updates can be scheduled: written now, they go up at the time you choose, and can be moved or posted early until then.

Enlarged, a /now post’s pictures can be stepped through with ← and →, or the buttons at the sides, with a count of where you are.

/now post images show a soft placeholder where they will appear while they load.

The /now editor gains Table and Divider buttons, and pasting a link over selected words turns them into a link.

Coming back to the site, updates posted since your last look at /now are marked new, on /now and beside its signposts on the home page.

A shared link to a /now update with a picture unfurls with that picture, framed beside its first line.

Images in /now posts show their description as a caption underneath, on the page, enlarged and in the feed; ![description](image "caption") gives one a caption of its own.

Each /now update’s page has a Share: the device’s share sheet, or its link copied.

Posting or saving a /now update in the admin console links straight to its page.

/now updates are written in a full-screen Markdown editor, beside a live preview, with a toolbar, shortcuts and drafts kept as you type, and can now run to 8,000 characters (from 2,000).

Images in /now posts open larger when tapped; Escape, or a tap anywhere, closes them.

The sitemap names the project screenshots on the pages that show them, so image search can find them there.

Code blocks in /now posts have a copy button.

Code in /now posts is coloured by language: Python, JavaScript, Java, C, C++ and C#.

/now updates can be corrected after posting, keeping their address, so links to them stay good; an edited update says so beside its date, and feed readers and search engines see when it changed.

Something for anyone who opens the browser’s console.

With the system’s high-contrast setting on, secondary text darkens, field edges and dividers show clearly, and the glass header turns plain paper.

The command palette (Ctrl/⌘ K, or the search button) can share the page you are on: through the device’s share sheet where there is one, or by copying its link.

/.well-known/security.txt says where to report a security problem.

The CV and the site lobby get share cards of their own, so every public page now unfurls as itself: the CV with its first line, the lobby with how many sites are listed.

The home footer says when the site was last updated, and links to what changed lately on /now.

Adding the site to a home screen, or installing it, now gives it its name and a proper icon in the site’s caramel, and a long press offers shortcuts to Now, the guestbook, the Time Manager and Juice (a web manifest).

A “Skip to content” link, the first stop for the Tab key on every page, jumps past the header to the page itself.

On a phone the browser’s bar takes the page’s paper colour, light or dark, and follows the site’s own theme switch.

Selected text takes the site’s own colour, and so do the text cursor and native checkboxes, radio buttons and sliders.

Switching between light and dark fades softly instead of snapping, unless motion is kept still.

Links in /now posts that leave the site carry a small arrow, and screen readers hear that they open a new tab; links back into the site stay in the same tab.

A /now code block written without a language no longer shows its text in an inline-code chip inside the block.

The arrow after a link off the site no longer wraps onto a line of its own; it stays with the link’s last letter.

A --- written straight under an image in a /now post shows as a divider instead of turning the image into a heading, and the image keeps its caption.

Notifications sit in a properly named region rather than a list given a role it may not take.

The signature line in the Sisyphus replay is no longer dimmed below a readable contrast.

The Sisyphus replay and the admin audit log can be scrolled from the keyboard.

Task checkboxes in /now posts have names for screen readers (done, to do), and an update’s own page orders its headings from h2.

The footer’s “updated” link lands on /now’s “Lately on this site” below the header rather than under it.

An image in a /now post whose alt text was left as the placeholder “description” is no longer read aloud as that word; the admin console now points such images out before posting.

/now posts wrap their paragraphs so a word is not left alone on the last line, and balance their headings.

Share cards wrap their title and line evenly, so a word is no longer left alone on the last line.

Every /now update has a page of its own, with a share card showing its first line and the updates either side of it; /now pages back through older updates twelve at a time, and has an RSS feed (Atom) for readers. /now and the guestbook get share cards of their own too: the latest update, and how many stamps are on the desk.

A 404 suggests the page you probably meant: a typo, a project named without /projects/, /resume for the CV, or the section above a page that is gone.

Search engines get more to go on: a sitemap and robots rules, a canonical address for every public page, and structured data naming the site and its owner, with breadcrumbs, so a result can show the site’s name and a tidy path rather than a bare link; a fuller description for the home page. npm run indexnow tells Bing when pages change.

Signposts to the smaller pages: under the home introduction, the latest /now update beside a small breathing dot; at the end of the home page, tiles for /now, the guestbook (showing its latest stamp), the CV and the site lobby, each with a live line, in place of the row of small links.

More avatars for Juice players: seven critters to pick from (the site’s own, a cat, a bunny, a bear, a frog, a robot and a ghost), twelve colours and ten hats, from a graduation cap to a halo. Players who joined before keep theirs.

Java in Juice: fill-in-the-code questions in Java, checked on the server as soon as they are answered, so self-paced players see their result at once; players’ “Run it” and the editor’s runs work too. Java runs in a code runner of its own (Piston, in a VM with none of the host’s files), where every run gets a fresh sandbox with no network that is deleted afterwards. A “Java basics” starter quiz, and AI drafts can include Java fill-ins.

Images in /now posts: add them from the admin console by button, paste or drop. Each is resized and re-encoded, and its location data removed.

Python in Juice runs on the code runner, as Java does: Python answers are checked as soon as they come in rather than when the teacher opens the results, and phones no longer download a Python for the browser (about 10 MB) to use “Run it”. The browser’s own sandbox, now for JavaScript only, can reach no network at all.

/now posts are written in Markdown: headings, bold and italics, links, lists and task lists, code, quotes and tables, with a preview in the admin console. Posts written before read as they did.

Juice, live coding quizzes: make a quiz at /juice from five question types (multiple choice, find the bug, what does it print, fill in the code, put in order), or copy one from a starter library. Fill-in-the-code questions run in the browser, sandboxed, in Python or JavaScript.

Juice assignments: share a link and PIN, players join on their phones with a nickname and a pixel critter (no account) and work through the quiz at their own pace; results per player and per question, downloadable as CSV.

Live Juice games: a host screen with the PIN and a QR code, questions with a timer, the room’s answers revealed, a scoreboard between questions and a podium at the end, with players answering on their phones. Fill-in answers are checked by the host’s browser. Deploys wait for live games to finish.

Juice for the admin: draft a quiz with AI from a topic, and see every account’s games in the admin console.

A lobby of hosted sites at /sites. Owners choose to list a site, with a line about it; unlisted sites stay reachable only by their address.

A Chinese version of the public pages: 中文 / EN in the header, or automatically for browsers set to Chinese. Project names, the stack and the working screens (Time Manager, hosting, admin, sign-in) stay in English.

Hosting for signed-in users: upload a static site (HTML, CSS, JavaScript and their assets) file by file, as a folder, or as one .zip or .7z, and it goes live at /host/ plus a six-character code. Manage your sites at /host; the admin console lists everyone’s. Hosted pages run sandboxed, apart from the rest of the site.

Share cards: links to the site and to each project unfold into an image with the pixel avatar at its desk.

A /now page of short updates, posted from the admin console, with what the site gained lately.

A command palette (Ctrl K, or the search button in the header): every page, copying the email address, theme and sound, the squash game, and the easter eggs found so far.

Dark mode, following the device unless switched in the header; the pixel art keeps its paper colours.

Seasonal outfits for the avatar: a witch’s hat at Halloween, a Santa hat at Christmas, a party hat at New Year, lanterns at Lunar New Year.

A pixel squash game: keep the rally going. From the palette, the 404 page, or typing squash with the avatar.

A guestbook: leave a pixel stamp; each is approved in the admin console before it shows.

A printable CV of the projects at /cv.

Optional sound: soft paper and click sounds, off until turned on in the palette.

Live figures on the Datacenter Tracker’s card, read straight from its database on the host.

A replay of Sisyphus at work on its page, with made-up messages.

An easter egg on the home page: type print("Hello world!") along with the avatar and it runs.

Type along with the avatar: with nothing focused on the home page, what you type comes up as code in its editor, the arms tapping along; Enter passes the tests for you. A hint appears after a few seconds.

The avatar follows the visitor’s clock: late at night its lamp is on, there is a moon, and it yawns; on weekend mornings it keeps a squash ball up on a racket, with a court in its editor.

Signing out plays the sign-in flight backwards: the sheet sinks away and the home page drops into place.

A copy button beside “Get in touch”: the address folds into a paper plane that flies into the header, and “Copied” lands under the button.

After choosing a password, the invitation folds back into its envelope, the seal presses shut, and the envelope flies off as the Time Manager rises.

Numbers in a project’s facts count up the first time they scroll into view.

Screenshots on a project page lift out into a viewer, their shadow swelling as they rise, and drop back into place when closed.

In the Time Manager, pressing Done strikes the title through and draws a tick before the celebration opens.

A small avatar peeks over the sign-in card; it winces at a wrong password and grins on the way in.

A 404 page: the pixel avatar leafing through a book of blank pages with a magnifying glass, looking for the page that is not there.

An invitation arrives as a letter: the envelope’s wax seal cracks, the flap opens, a letter addressed to the guest slides out and unfolds into the form for choosing a password.

Signing in turns the page like a stack of cards: the sign-in card tilts back and flies up off the page while the Time Manager (or the admin console) rises from behind it.

Each project page ends with a page turn: scrolling past the last section tilts an end card up and away, and the next project’s card rises from behind it, with a glass label over its screenshot.

A pixel-art avatar beside the home intro: a caramel-orange critter with a mop of dark hair, typing code on a laptop in a loop. The lines type out, the tests pass, it hops and beams, and it starts again. SVG and CSS only, in Meridian colours; it holds still for reduced motion.

Site icons: an Instrument Serif “N” in paper on a Meridian caramel tile, as a favicon (16/32/48, hinted to the pixel grid), an SVG icon and a marbled Apple touch icon, drawn by scripts/make-icons.py from the tokens file.

The pixel avatar wears glasses, with a glint that crosses the lenses now and then, and headphones, its tuft poking up through the band.

The home intro no longer lists the four projects the page shows right below it; it says how they come about instead.

The site header is a floating capsule of liquid glass: rounded, detached from the page edges and still in view as you scroll; wider than the content on desktop. In Chromium it refracts what passes beneath it, with a slight colour fringe at the rim; elsewhere it is frosted glass.

The Time Manager and the admin console now sit inside the site: the site header and the ink background around them, each on a paper sheet so their text never sits on the ink. The Time Manager’s own account menu gave way to the one in the site header.

On a phone the header overflowed its capsule once the language, search and theme buttons joined it. Below 640px the language and theme switches now live in the command palette (which gained a language item) and Sign in is an icon, so the capsule fits a 320px screen again.

A dark-mode visitor saw a missing project (/projects/nope) in light mode: React rebuilds the page in the browser there and dropped the theme class. The theme is now re-applied on mount, before paint.

Plain-HTTP and www. requests are redirected permanently to https://nathanz.cloud, so the sign-in form is never served in the clear.

Every response carries security headers (no framing, nosniff, a referrer policy, a permissions policy, HSTS); X-Powered-By is no longer sent.

A ?next= path containing a tab or newline could send a fresh sign-in to another site; return paths are now resolved as a browser would and kept only if they stay on the site.

The origin check on scheduler writes, and admin invite links, no longer trust a client-sent X-Forwarded-Host.

Squash Review as a fourth project, with a details page; contact by email while it has no public deployment. Screenshots of its report, court analysis, upload step and landing page.

A live marbled-ink background on the public pages, ported from the Squash Review app, coloured from the Meridian tokens instead of its Court Red.

Project screenshots: a cover on each homepage card and a captioned gallery on each details page, shown as soon as the file exists in public/projects/<slug>/.

Screenshots for all three projects, with private details blurred: others’ names, the host’s name and paths, the owner’s email and class timetable.

Fonts are served from the repo instead of downloaded from Google Fonts at build time; the host’s connection to Google timed out and failed a deploy.

The admin console is denser: people are one table row each with their controls in a Manage dialog, Grant access opens in a dialog, the summary is a single strip, and the audit log scrolls in place.

The ink background dropped its resolution and frame rate on fast machines: it judged GPU load from frame gaps that its own frame skipping and normal vsync jitter inflated, and never stepped back up. It now measures the display’s refresh, renders on a stride of it, and adapts only to sustained missed refreshes, in both directions.

The ink background’s pointer interaction. It never felt natural, so the ink now just drifts on its own and with scroll.

Portfolio home page and a details page for each project: Datacenter Tracker (links to its live console), Sisyphus (contact by email, address assembled in the browser), and Time Manager (sign-in required).

The Time Manager, forked from the standalone app, served under /scheduler.

Sign-in with no signup: the admin is created by npm run admin:create on the server; everyone else by a one-time, 48-hour invite link from /admin.

Admin console at /admin: grant, suspend, delete, access-until dates, per-user photo scanning with a daily cap, live sessions with per-session sign-out, and an audit log.

/account to change your own password.

Failed sign-in throttling per IP and per username.

/api/health, reporting the commit being served.

Deploy pipeline in deploy/: the host polls GitHub, builds in an idle slot, switches over only after tests, build and a health check pass, and publishes through a Cloudflare tunnel. A failed dependency install is retried on the next poll rather than refusing the commit.

Each Time Manager user has their own SQLite database, so one user can never see another’s homework; accounts live in a separate auth.db.

Photo scans are refused unless the admin enabled them for that user, and count against the user’s daily cap.

The Sisyphus mailbox sync, its /api/sync route and SYNC_* settings, and the Windows service scripts from the standalone app.