Secret control panels
Still other times, well, you know that saying that every setting is a design failure? Sometimes my design failures are just too precious to me, and goddammit it’s my website so I’ll leave them there if I want to. 🙃
Plus, it’s good to keep a few secrets.
Here are a few examples.
Control panel on this site
At the time of this writing, it shows an option to display link annotations. I have experimented with annotations for PDFs, Wikipedia links, and the like, but I’m not sure whether I really like them.
To implement this, I just needed a few pieces:
- The checkbox itself
onclick()function that when checked/unchecked adds/removes an enabler class to the element that contains all my content
- CSS that shows link annotations only for elements that are children of the enabler class
Note that there is no server side code here; all of this is just stored to memory (and optionally to localStorage).
I don’t share the repo for this site, but the code as deployed is accessible from the browser’s “View Source” functionality, and quite readable (it’s not minified or anything, and short).
Control panel on keymap.click
Controls on keymap.click have options for the debug level, more cluttered navigation in the side bar, and a different color scheme.
This project uses React and NextJS,
and I was already using React Context for app-side values.
I added a few more for my new secret control panels items,
and added a new NextJS page for the
and it worked just like the other controls already in my app.
This too has no server side code.
You can read the source on GitHub if you like.
Control panel on biblemunger.micahrl.com
Controls for biblemunger show font options. I think I picked the best fonts for the page, but I wanted to include an option (even if secret) to use a lovely digital restoration of the original 1611 King James Version typeface. It is very busy for the modern eye, but I just could not resist.