The thing I miss most about the web before social media was everyone having their own blog or personal site. It was decentralized and punk.
The URL made it all work. One inbound link and you were in. And every outbound link made it stronger. So we all linked to our friends and favorites to include, inform, and pay respect. We called them blogrolls.
Let’s unpack some teachable moments that I encountered while implementing my links page.
DRY and accessible labels
A constant goal of mine is writing less code without sacrificing core principles like clarity or accessibility.
The blogroll component is semantically a list of lists. Each list has a label, but that’s not important enough to warrant a heading. It turns out that we don’t need complicated markup to express this:
When the link is focused, a screen reader might announce:
Donald Trump, Link, List Item, Worst Presidents.
aria-label attribute isn’t visually accessible on its own.
::before pseudo-element we can dynamically insert content as the first child of an element.
So we leverage the
attr() CSS function to display our
aria-label for sighted users:
The best part: pseudo-elements aren’t included within the accessibility tree, so the labels aren’t announced twice!
Negative margins to the rescue
Lately I’ve become more trusting of negative
margins to solve complex layout problems.
They don’t always make intuitive sense.
So I like to frame it as undoing another element’s positive
margins; using them purposefully reduces their cognitive load.
Typically they’re helpful when implementing layouts with evenly-spaced items.
Our first instinct may be to add
margins around each item:
But what if we want the children to align to the edges of their container?
By setting negative
margins on the container, we can undo the outermost
margins of its children:
Putting it all together, here are the rules that define the list gutters:
Eventually I’d like to expand my links page to include a microblog where I can share links more extemporaneously. Like an article that resonated with me but doesn’t warrant a full post. That’s a change for another day.