Jon Plummer

Today I Learned

More hidden pages: /type, /color, and /ogimages

Last year I wrote about a first batch of “hidden” pages on this site—RSS feeds, the readme, the changelog, and the rest. Those are mostly about consuming or documenting the project. Here are three more URLs in the same spirit: they are not in the main navigation, but they are not secret. They are small labs for playing with how the site looks when shared or read, still in the “everything is inspectable” vein.

1. /type

/type/

A single home-page-shaped preview at the correct type scale from jonplummer.css, with two menus: one for headings (h1h4) and one for everything else. Stacks come from Modern Font Stacks; the first option on the body menu keeps body text on the heading stack until you pick a specific second stack. There is a collapsible block of example CSS you can copy when you like a pairing.

Why /type

When I think of changing --font-family or heading tokens in CSS, I need a place to audition stacks against the same article and nav chrome the blog uses, not a separate mini layout.

2. /color

/color/

An embedded color theme gallery: smaller home layout previews, wired to live light-dark() tokens. There is a short intro on the page about where the embed files live and how to refresh them; the heavy lifting is OKLCH builds, harmony and preset cards, and APCA-minded checks in the same spirit as pnpm run test color-contrast.

Why /color

Shipping palettes is still manual work in jonplummer.css, but comparing candidates on a simulated layout beats guessing from swatches alone. Keeping the embed on a first-class URL makes that workflow easy to get to.

3. /ogimages

/ogimages/

A preview of the Open Graph image template: rendered examples with different titles and descriptions, plus a grid of PNGs from src/assets/images/og/ (generated and static).

How /ogimages/ is built

src/ogimages.njk uses Eleventy’s renderFile shortcode against og-image-body.njk for the inline examples and loops a data-fed list for the rest. Styling lives in jonplummer.css under the preview-page rules.

Why /ogimages

Social cards are easy to break with a long title or a missing description. This page is where I sanity-check the template after edits without spelunking _site.


Together, /type/, /color/, and /ogimages/ use tags: page for the shared layout and set eleventyExcludeFromCollections: true so they do not appear in the blog index or RSS feeds, but they still ship as ordinary pages in every build. If you are poking at how this site is put together, start with the earlier hidden-pages post for feeds and docs, then add these three when you decide to play with type, color, or social image generation.

A good problem statement

A good problem statement is

  • Factual: based on actual customer knowledge
  • Specific: we can name
    • examples of the customers who have this problem
    • the pain caused by the problem
    • bonus: things these customers do to try to alleviate the pain
  • Real:
    • a real person feels this real problem in their real life
    • the pain is real
  • Open: the solution is not embedded in the problem statement, so the team has flexibility to address the problem
  • Witnessable: if the problem statement were alleviated, you could readily tell based on customer behavior or results

What to do with the executive prototype

What do you do when an executive brings you a prototype they vibe-coded that they are super-excited about?

Note that “let’s talk about your aims behind this, what it’s meant to accomplish, how it does that” is not just the appropriate response to this executive. It’s the appropriate response to ANYONE’s mock/prototype/sketch. We’re going to need to get really good at this response since roles are blurring and tools are helping folks make stuff they might not have bothered with before. And we’re going to need to get really especially good at offering alternatives to simplify, to make more conformant with customer mental models, to detect and form a plan to learn things we need to learn, etc.

Sometimes you have to take over for the agent

Sometimes you have to spend the time. Sometimes the agent won’t converge on your idea. Sometimes it’s the wrong tool for the job.

Side-by-side square graphics labeled Claude and Me: each shows a red telescope and stylized eye over a starry background with bold UX text, but one is clearly better than the other.

John Perry Barlow’s principles of adult behavior

I recently rediscovered John Perry Barlow’s Principles of Adult Behavior. The Silicon Valley visionary and founder of the EFF died in 2018. In 1977 he wrote this list of principles for himself and asked his friends to hold him to them:

  1. Be patient. No matter what.
  2. Don’t badmouth: assign responsibility, not blame. Say nothing of another you wouldn’t say to him.
  3. Never assume the motives of others are, to them, less noble than yours are to you.
  4. Expand your sense of the possible.
  5. Don’t trouble yourself with matters you truly cannot change.
  6. Expect no more of anyone than you can deliver yourself.
  7. Tolerate ambiguity.
  8. Laugh at yourself frequently.
  9. Concern yourself with what is right rather than who is right.
  10. Never forget that, no matter how certain, you might be wrong.
  11. Give up blood sports.
  12. Remember that your life belongs to others as well. Don’t risk it frivolously.
  13. Never lie to anyone for any reason. (Lies of omission are sometimes exempt.)
  14. Learn the needs of those around you and respect them.
  15. Avoid the pursuit of happiness. Seek to define your mission and pursue that.
  16. Reduce your use of the first person singular.
  17. Praise at least as often as you disparage.
  18. Admit your errors freely and soon.
  19. Become less suspicious of joy.
  20. Understand humility.
  21. Remember that love forgives everything.
  22. Foster dignity.
  23. Live memorably.
  24. Love yourself.
  25. Endure.

You can guess why returning attention to these principles, now, might seem important. (Especially 2, 8–10, 13, 14, 16–20, and 22.) Adult behavior is in short supply, especially among those who style themselves as leaders.