DEV zen mode: userscript

For a long time I've been killing the top and the bottom bars on Medium while reading longer articles. This is especially true on mobile, where a huge amount of precious vertical reading space is taken up by all kinds of bars. Now it seems Medium got rid of those and it got much nicer to read.

DEV has a similar problem. I'm easily distracted by the visual noise and I find it difficult to concentrate on reading when there I see something but text. I can ignore the sidebar, but ignoring the horizontal bar on the bottom is difficult, especially when it cuts a line of text in the middle.

So this time I decided to automate the process and make a userscript that removes the top, bottom and sidebars with a keyboard shortcut. Welcome DEV zen mode. Install it, press Shift-Z while in the article section and all the boxes go away. Press the same key again to bring them back.

To install the script you'd need a userscript manager extension installed in your browser. That would be Tampermonkey for Chrome or Greasemonkey for Firefox.

The script itself is available on openuser.js. Alternatively it's possible to create a new script with Tampermonkey/Greasemonkey and paste the file form GitHub into it.

The core of the feature was not that difficult to put together. Adding a keyboard shortcut and hiding some elements is pretty trivial with vanilla JavaScript. I'm sure the code is not very robust yet and could benefit from some cleaning up. For one thing, I'm not saving the original display property, just assuming it's blank. It works not, but might get broken when CSS changes.

There was one problem I ran into though. I wanted to be able to bring back the hidden elements when the user navigates away from the page. To make this happen I tried to find an event that is fired when the URL changes. To my surprise everything I found online didn't work. I tried to add a listener for hashchange event, but couldn't get any callbacks to trigger. After a while I gave up and used some hack I found on StackOverflow.

I would really love to see this becoming a feature of DEV. It doesn't have to be exactly like this, but some kind of a reading mode would be really nice to have. I'm not a web developer and I don't think I have the chops to contribute a feature like this to the codebase. Anyone interested? =)

detunized / dev-zen-mode

DEV (dev.to) zen reading mode scripts

DEV zen mode

This is a userscript that adds a keyboard shortcut (Shift+Z) to toggle top, bottom and sidebars on DEV. This improves the reading experience with long articles.

More details in the blog or on DEV.

License

The library is released under the MIT license. See LICENSE for details.

View on GitHub

Comments

[Ben Halpern]

Very cool! I could see this becoming a native feature.

[Steve Layton]

My understanding is that window.onhashchange() is only really going to see changes to location.hash and not all URL changes. So if we click on an anchor link and go from https://dev.to to https://dev.to#something the location.hash becomes #something. A quick example that can be pasted in the console is:

function hashHandler() {
  console.log("The hash has changed! It's now " + location.hash);
}

window.addEventListener('hashchange', hashHandler, false);

Then just throw a #hash in the address bar and hit enter.

[Dmitry Yakimenko]

I thought so. The names kinda gives it away, doesn't i? But I was confused by what I read online. It seemed like it's supposed to fire on any URL change. Oh, well. Next time better luck.

[Mikael Klages]

I'm getting horrid flashbacks to websites I've visited on my phone with 2+ in-site pop-ups, banners on both the top and bottom I can't remove since they think I want to always have access to their menu and footer info, and additional banners for downloading their app, undoing the pop-up decisions I made, or ask me if I want to subscribe or get push notifications...

I get tired just thinking about it

[Stephanie Handsteiner]

and additional banners for downloading their app, undoing the pop-up decisions I made

reddit's mobile page in a nutshell.

[Jack Harner 🚀]

Ya, Reddit making the Mobile site a dumpster fire isn't going to get me to install the Offical Reddit mobile app. Most of the unofficial Reddit apps out there are miles ahead of Reddit's own.

[Andy Zhao (he/him)]

@flaque bet you'd like this :)

[Stephanie Handsteiner]

For this reason I'm using Safari's reader mode, a plus is, it's dark if you use the system's dark-mode.

[Dmitry Yakimenko]

Firefox now has reading mode as well. Safari is kinda limited and going the way of IE6. I use multiple platforms, all three major ones actually, so for me the browser has to run everywhere. When I'm in Firefox I use the reading mode as well.