unexpected delights
When I started this little blog more than a year ago, I didn’t expect to care at all about its underlying code. I didn’t know any html or css and didn’t really want to. I chose to use Blot because it seemed like the simplest of many services available for hosting a site like this—write a .txt file, drop it in a Dropbox folder, done. Thanks to Blot’s clean themes, the barest bit of Markdown in the files would serve for formatting. I wouldn’t have to build the site to look good, and I could focus on Writing The Words, which is what a blog’s all about, right?
Turns out it’s much more than that, and I care more than I thought about how this site looks, how it works, and what’s under the hood.* I started with the easy-to-change options in the Settings tab of Blot’s theme editor: the color of text and links, the font, fontsize, line height, margins. But the site still didn’t truly feel like mine.
I longed for tweaks that couldn’t be made with the sliders and buttons on offer. I wanted a real hand in the construction of this place. The Source Code tab called.
Blot’s simplicity, which I had counted on to make deeper exploration unnecessary, actually made it inviting. I forked the theme I was using so that I didn’t have to start from scratch. That original theme now serves as a full practical reference to use in unravelling the deep mysteries of css—here is what this thing looks like, and here are the classes and values that make it look like that. And it’s also a backup to revert to in case I break something too fundamental to fix. (It’s only happened once so far!)
I still don’t know much html or css, but I’m learning by doing. Gradually, I’m making not just the site’s content but its behavior and appearance more my own. Tinkering with the code, even at the edges, has become an unexpected delight.
It was building a new landing page, not writing a new post, that brought me back from a year–long hiatus. Which I think might say something about what this site is all about, what it could be. What I can make it to be.
discoveries & inspirations
A related delight is seeing cool stuff elsewhere online and checking out how it was made; hitting Dev Tools → Inspect Element, cracking my knuckles over the keyboard, hackervoicing I’m in; embracing a noob’s excitement at the capabilities of these languages. Basics that must barely make grizzled veterans shrug in their sleep are revelatory. They carry the unparalleled joy of being new to me.
Take the <details> tag, which I discovered via Robin Sloan. In a recent newsletter of his, a paragraph had an arrow beside it: an invitation. On clicking it revealed yet more paragraph that had at first been hidden!
The Hint
The Reveal, from The slab and the permacomputer by Robin Sloan
What wizardry was this? Surely some sneaky bit of code, or a plugin of some sort; I’ve heard of plugins? But no! A single element, <details>, with its friend <summary> and of course trusty <p>, made this possible. Incredible! I’ve deployed <details> here, and frankly now have to resist using it for every parenthetical thought I have!
changelog
- Added a landing page
- Added a page to log my reading and watching and cetera
- Varied & minor style changes
- Darker accent color
- Horizontal rule now accent color & single line
- Adjustments to table styling
- Date & tags now on one line; line height of
p.small - Changed ul bullet position to outside; back to inside; back to outside ad inf. Outside avoids column spacing issues, but I don’t like the unindented spillover to new lines that outside forces.