Interface Experiments with Focus Mode

One of the joys of self-hosting a Jekyll blog is experimenting and tweaking the code on a whim. Today I implemented a little feature I've had in mind for a while based somewhat on Safari's built-in Reader Mode that "declutters" the page you're on. I'm calling it Focus Mode.

To see any page on this website in Focus Mode simply hold-down the F key on your keyboard for about a second. To toggle Focus Mode off simply repeat that step.

What does Focus Mode do? It adds a simple focusMode class to the body of the webpage that tells the browser to:

• Hide the header
• Hide the footer
• Hide any footnotes (An old "experiment" I've mostly stopped using)
• Format links with the article so be indistinguishable from the regular text.

That last point was the impetus for the idea. Every time your eyes come across a link in an article you have to make a decision to stay with what you're reading or follow it elsewhere. If you choose to stick with it you probably can't help but think about that link you passed up. You might even make a mental note to go back and click on it when you're done reading the article.

I think none of this lends itself to being able to comprehend the words you're reading. Maybe "Focus Mode" will be an antidote to this.... the tricky part is discoverability. If you're reading this post you know about it, but I'll need to find a way to advertise it to future visitors.