Screenshot of collapse button for an open details element
JavaScript

Collapse an Open Details Element (JavaScript)

The <details> HTML element is really great. And paired with <summary> you've got all you really need to make easy-to-read expandable/collapsable sections of a document. But I recently wanted to have at the bottom of each segment a quick way to close the expanded details segment I'd just scrolled through. By default, you can simply click on the <summary> element you used to open it. But what if your sections are long enough that that has drifted off the top of your screen? That's the situation I was in that led me to want to write as little JavaScript as possible to reach up to the top from the bottom of my (long) details section and collapse it. So we're going to explore how to collapse an open details element in this article.

Continue reading

Standard
High-Level Concepts

All Programs Have a Surrounding Human Context. This Matters

This is the second in a series detailing what I consider "Thoughtful Code." In the first one, I highlighted the high-level overview of what I consider "good" code, here I'm going to go (a lot) deeper into what this overarching framework means in its specific components. Well one of it's components. Specifically, the context in which our code lives, and how that shapes our definition of code quality.

Continue reading

Standard