loading...
The DEV Team

Changelog: Zen Mode

ben profile image Ben Halpern ・1 min read

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!

Posted on by:

ben profile

Ben Halpern

@ben

A Canadian software developer who thinks he’s funny. He/Him.

The DEV Team

The team behind this very platform. 😄

Discussion

markdown guide
 

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

 

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".

 

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!

 

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!

 

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.

 

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

 

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

Great functionality anyways!

 

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

 

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

 
 

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 😃

 

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

 

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

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.

 
 
 

Not working for me :'(

Firefox, Windows 10

 

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