I just wanted to take a minute to talk about my 2020 TOTY*, the <details> tag. In a year full of terrible things over which we have little control, what could be more welcome than a simple, functional way to create opt-in web page content?
* TOTY = Tag of the year
Example of <details> tag
In Mount Elgon National Park on the Kenya-Uganda border, groups of elephants go into caves and mine salty rocks to lick.
Actually, <details> played a role in the long chain of events that led to me creating Zonelets! A few months ago, I had the idea for a blog where I could post little word puzzles, riddles, classic format jokes, that kind of thing. I wanted to be able to include hints or answers that users would have to click to reveal. You can't do anything like this on Medium! And sites like Twitter and Facebook annoyingly don't have it (those sites wouldn't have worked for the puzzle blog anyway, but it still annoys me that you can't do things like spoiler tagging or putting stuff behind content warnings). The closest thing I found that is widely in use is Discord's spoiler text—a very handy feature! You can also create opt-in posts on Mastodon. But as far as blogging goes, the options were limited. Although I had worked with HTML and CSS before, I had never heard of the <details> tag, and was surprised to find that it's now broadly supported!
I set up a first draft of the puzzle blog using specially styled <details> tags on Github Pages. However, after I remembered Github's collaboration with ICE, I went down the rest of the path that led to Zonelets (which you can read about in detail on the Compare page of the Zonelets site).
Now that the dust has started to settle from that project, I'm thinking about going back to the puzzle/riddle project. But in the meantime I am also using <details> for my comments section on this blog! Disqus comments are a cool and handy feature but take up a huge amount screen real estate and feel sort of out of place on an otherwise quiet, simple, straightforward blog. So it's nice to be able to make the comments section totally opt-in. If you're using a Zonelet and would like to have an "optional" comments section like the one below, simply follow the usual instructions and then enclose it in a <details>. As you can see, the <summary> tag defines the text that you click on to expand the section.
<details>
<summary>Comments Section</summary>
<div id="disqus_thread"></div>
</details>It's also nice to style it a little. Here I've just made the summary the same color as links so that it looks more "clickable". Well, that's all for today, have a nice evening!