Show the window, keep the back room shut

A shop window shows what's for sale. The back room holds the invoices, the keys and the staff rota. Nobody minds the back room existing, as long as the door stays shut.

What this is about. A web page works the same way, except its door is easy to leave ajar without noticing. This post is about how I decide what a page hands out, and about timing: what a small site can leave for later, what it can't, and what happens to a plan when nobody is watching it.

A page carries more than it shows

Modern sites send the page and its data together, so the page can come alive in the browser without asking the server again. That's fast and pleasant. It also means that whatever the page was given travels with it, even the parts nothing on screen ever uses. Open the page source and it's all there.

So the useful question isn't "what does the page show?" It's "what did we hand it?" Those two drift apart quietly. A field gets added for the editor, the public page reuses the same loader, and now every visitor receives a value only the editor needed.

Two audiences, two shapes

The cheapest way to build a page is to pass the stored record straight through. One shape, used everywhere. It works until you notice that the editor and the visitor want very different things.

An editor needs the whole record: who created it, when it goes offline, where it sits in the menu. A visitor needs a headline, the text, a date and a byline. So now there are two shapes. Staff get the full one. Visitors get what the page renders, and the fields only the editor uses come out empty.

The byline was the nice part. A post shows who wrote it and, on some sites, a little badge. The badge used to be built from the author's account role, which meant the page carried the role itself. Now it carries a label made for readers, "crew" or "HQ", and nothing about the account behind it. Same badge on screen, less in the source.

Size decides when, not whether

These sites have few users, and only one takes payments. So payments and logins came first, and what a public page carries came after. On a small site that's housekeeping, not a fire.

Had it been bigger sites, of course this must be addressed already in the plan.

With many accounts and money moving, the visitor shape belongs on the first sketch, next to the database tables. A small site buys time. It doesn't buy an exemption.

Plans drift

I think there actually was a plan but it drifted.

There was. Then features arrived one at a time, each adding a field "for now", each harmless on its own. Drift makes no noise, so something has to listen for it: a second pair of eyes on the page source, and tests that read a page the way a visitor gets it and fail the day it carries an editor-only field. The plan was written once. The tests run on every change.

The browser as bouncer

The browser can guard the door too. A content policy is a short list the page sends along: which scripts may run, where things may load from. Anything not on the list stays outside.

You don't hire the bouncer blind. First he only reports who he would have turned away, and you read the reports: the video embed you forgot, the payment widget, a script your own framework writes inline. When the complaints go quiet, he gets to say no. Skip the listening and he throws out your own checkout on a Friday.

What happened, and how else it could be done

Visitors got the editor's record because one shape was the easy default. Now they get a public shape, staff keep the full one, the badge is a reader's label, and tests fail if the public shape grows. Every site also sends a content policy that listens first.

Other ways: list what goes in instead of what comes out, so a new field stays private until someone says otherwise. Safer, but every new feature costs a decision. A separate public API makes the split impossible to forget, and doubles the upkeep. Or do nothing for a while, which is fine as long as it's a choice and not drift.

Back rooms fill up on their own. Windows you dress on purpose.

Originally published at idunworks.com.