DEV Community

Ben Halpern for The DEV Team

Posted on

Changelog: Zen Mode

I loved this post from a while ago:

So this weekend, while working on some other stuff, I implemented this as a native feature. It's a feature that hides elements on the page with a key stroke. It minimizes the design so you can focus on reading. And then you can bring back navigation with another keystroke.

That article's implementation used shift + z to accomplish this. I went with simply the 0 button, which is located right next to the arrow keys on the num pad. I could see an argument for other key configurations, though. So we can see how this works in the wild and get feedback.

We're going to be looking at de-cluttering the design in general over the next few weeks, but this was a simple addition that will always have a place one way or another.

This feature won't yet be available on all articles until the cache clears, and I have already noticed a bug in the use of "toggle", where things kind of get out of sync. So I want to go back and implement it a bit differently.

P.S. That "working on some other stuff" was an update to the site's editor:

Happy coding!

Top comments (20)

Collapse
 
jwesorick profile image
Jake Wesorick

Really great quality of life feature! What about implementing both? (Heart if you don't have a num pad.)

Collapse
 
ben profile image
Ben Halpern

Yeah, that probably makes sense. The non-numpad zero works all the same. I also feel like the m button also might make sense as "minimize".

Collapse
 
detunized profile image
Dmitry Yakimenko

I used shift because I use Vimium and most of the single letter shortcuts are bound to something. So shortcuts like ‘m‘ would not be available for people using Vimium or Vimperator.

Great job, though!

Collapse
 
sabatesduran profile image
Dídac

Although I like how simple it is I think I will like to see the article in the center of the screen doing it maybe with some smooth transition.

Really like this feature!

Collapse
 
adyngom profile image
Ady Ngom

Awesome just tried it and it made the focus on the article great. Nice and 'simple' :) Quick question what is the best way to ask for a feature request on the platform?

Thanks again

Collapse
 
jess profile image
Jess Lee

Hey @adyngom -- you can share feature requests by creating an issue in our repo:
github.com/thepracticaldev/dev.to/...

Collapse
 
adyngom profile image
Ady Ngom

Perfect Jess thank you 😊

Collapse
 
kenbellows profile image
Ken Bellows

Hm, my numpad-0 doesn't seem to work, though the top-of-the-keyboard-0 does. Windows 7 Pro desktop, Chrome 74, Microsoft keyboard. I can file a GH issue if desired

Collapse
 
cmmata profile image
Carles Mata

It's the same in Chromium 73 in Fedora Linux. It works with top 0 but not with numpad-0. Strange..

Great functionality anyways!

Collapse
 
dance2die profile image
Sung M. Kim

You are onto something.

Maybe we can have keyboard shortcuts to navigate dev.to? 😉
(Configurable kinda like it is in VS Code)

And it'd be universally accessible too 😃

Collapse
 
detunized profile image
Dmitry Yakimenko

Check out Vimium or Vimperator. Then you can navigate any website with the keyboard.

Collapse
 
dance2die profile image
Sung M. Kim

Thanks, Dmitry.
Looks like another reason to start learning VIM ;)

Thread Thread
 
detunized profile image
Dmitry Yakimenko

You don't need to know or learn VIM in order to use it. I don't and I'm not going to. It does have some VIM specific weird things, but the basic features are easily usable with zero VIM knowledge.

Collapse
 
flrnd profile image
Florian Rand

Awesome! <3

Collapse
 
jesusgollonet profile image
jesús gollonet

Love it! And love the one letter shortcut (vimium-spoiled), It does disable cmd+0 for zooming back to 100%, but i can live with that

Collapse
 
dev_in_the_house profile image
Devin

Nice!

Collapse
 
therealdanvega profile image
Dan Vega

Awesome, love the feature!

Collapse
 
vicentdev profile image
Vicent

That's a pretty nice feature! HoweverI found a bug. When you navigate to one of the articles at the bottom it reveals the asides of the article but the top bar stays hidden. When the 0 button is pressed again that elements toggle.

Collapse
 
jonathanspeek profile image
Jonathan Speek

This is absolutely excellent 🥰

Collapse
 
craignicol profile image
Craig Nicol (he/him)

Not working for me :'(

Firefox, Windows 10