Changelog: Zen Mode
Ben Halpern

Ben Halpern @ben

About: A Canadian software developer who thinks he’s funny.

Location:
NY
Joined:
Dec 27, 2015

Changelog: Zen Mode

Publish Date: May 13 '19
83 20

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!

Comments 20 total

  • Ady Ngom
    Ady NgomMay 13, 2019

    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

  • Dan Vega
    Dan VegaMay 13, 2019

    Awesome, love the feature!

  • Jake Wesorick
    Jake WesorickMay 13, 2019

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

    • Ben Halpern
      Ben HalpernMay 13, 2019

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

      • Dmitry Yakimenko
        Dmitry YakimenkoMay 14, 2019

        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!

  • Florian Rand
    Florian RandMay 13, 2019

    Awesome! <3

  • Dídac
    DídacMay 13, 2019

    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!

  • Ken Bellows
    Ken BellowsMay 13, 2019

    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

    • Carles Mata
      Carles MataMay 14, 2019

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

      Great functionality anyways!

  • Craig Nicol (he/him)
    Craig Nicol (he/him)May 13, 2019

    Not working for me :'(

    Firefox, Windows 10

  • Jonathan Speek
    Jonathan SpeekMay 14, 2019

    This is absolutely excellent 🥰

  • Vicent
    VicentMay 14, 2019

    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.

  • Sung M. Kim
    Sung M. KimMay 14, 2019

    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 😃

    • Dmitry Yakimenko
      Dmitry YakimenkoMay 15, 2019

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

      • Sung M. Kim
        Sung M. KimMay 15, 2019

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

        • Dmitry Yakimenko
          Dmitry YakimenkoMay 15, 2019

          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.

  • jesús gollonet
    jesús gollonetMay 15, 2019

    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

  • Devin
    DevinJun 15, 2019

    Nice!

Add comment