HN Explorer

Show HN: Unclutter — A new approach to reader mode (unclutter.lindylearn.io)

49 points by phgn ↗ HN
Hey! This is a reader mode browser extension I built that hides noisy page elements rather than extracting and re-rendering only the page text. The idea is to not make all articles look the same [0], have them still render graphs, and ideally to work in more cases.

There are a few "tricks": patching the site CSSOM to apply simpler mobile styles even at desktop width, detecting the likely main text & removing its non-text siblings, blocklists for classnames that contain words like "sidebar", and testing this on a few hundred popular sites.

I got carried away and also added a dark mode, page outlines, private annotations & inline Hacker News comments. The last feature works by parsing every top-level HN comment with a quote in it (formatted with > or "") within a few minutes, and anchoring these quotes in the related article HTML. So when you click a link on HN you’ll see the parts people are talking about while reading. [1]

The code is all on GitHub!

[0] Screenshots comparing it to the Firefox reader mode: https://github.com/lindylearn/unclutter/blob/main/docs/compa...

[1] It's fun to try this on some of the "HN classics" that got 30+ quote comments over the years. Another project I built, https://hn.lindylearn.io/best shows the number of "annotations" an article has beneath its title.

15 comments

[ 3.7 ms ] story [ 57.9 ms ] thread
amadeuspagel
Interesting. When I use a typical reader mode I sometimes lose the motivation to read. I guess the article no longer feels like the thing that I wanted to read. This looks like it would fix that problem.

Edit: I think your extension does a bit too much though. I'd prefer just removing clutter, and if necessary setting a max-width, without adding any new UI elements.

phgn
I had the exact same problem!

Which features did you find annoying specifically? I want this to be "the original article page, but more readable and customisable", not a separate reader mode. I'm curious where that failed for you.

amadeuspagel
There's no specific feature I find annoying, but rather having a new background, where the original page is only one of the elements on that background.

I made an epub reader[1], where I also grappled with the problem of not distracting from the text, while also showing a few useful UI elements - table of contents, notes, much like your extension. The way I did this was to have one sidebar with a few icons, and only if you hover over the icon it shows the respective UI element. And it's all on the same background.

[1] https://1paragraph.app

phgn
I see! Maybe one problem when hiding UI elements by default is discoverability (I suspect most users wouldn't enable the page outline in Unclutter if it were optional).

Do you see people still using all the features of your reader app?

amadeuspagel
If you want the outline to be always visible, I think that using a separate background for the outline, to distinguish it from the main content, would be a better solution then having a new background on which both the outline and the main content are elements. I recently saw a website on HN which I felt had a well designed outline like this - visible but not distracting[1].

My reader app has few users, and I don't track how they use it. I guess even with that model one could make it discoverable with some kind of tutorial, but I always find tutorials kind of annoying. The first time you use an app, when the tutorial is usually shown, you don't want to do a tutorial, you don't care for any advanced features. Maybe the VS Code model - one sidebar that is always visible with different vertical tabs to choose what to show (notes, table of content ...) might work better.

Edit: Just implemented that in 1paragraph[2]. (You'll have add a book to see it, since the default "book" doesn't have an index.)

[1]: https://writequit.org/eos/eos.html

[2]: https://1paragraph.app/

samldev
You may want to check your site on mobile Safari. I’m on an iPhone and every time one of your scroll animations plays it zooms the screen out. Really jarring, enough to make me click off.
phgn
Ahh, I'll take a look thank you!
Yoofie
One thing I hate about alot of these reader tools is that they always never give me proper customization options. Let me configure the font,the font-size, letter-spacing, line-height, etc. I hate being treated like i'm a 5 year old when it comes to basic customization.
Bayart
Vivaldi's reader mode lets you do it.
[deleted]
(comment deleted)
xigoi
Beautiful! I hope it will become available for Firefox Mobile someday.
phgn
That would be cool! Do you use any other reader mode at the moment on mobile?
xigoi
No, I just use Dark Reader to turn all sites white text on black background.
ZeroGravitas
There's a new CSS forced-color mode that somewhat standardises the ability to force user colours on the web. It's related, but distinct from prefers-color-scheme for dark/light modes and prefers-contrast.

It may not be perfect but any project in this space should probably build on top of the standards and lobby sites themselves to support it better.

I noticed Ars Technica does something fancy with blend mode that makes its article images hard to see in this mode for example, but presumably it'll sort that when they notice.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forc...

https://blogs.windows.com/msedgedev/2020/09/17/styling-for-w...

phgn
Oh that's interesting. But the problem with relying on standards is what to do before people adopt them? (even the support for prefers-color-scheme is pretty bad)

I think any extension that adds better page theming needs to do its own CSS patching by default. If the project gets large enough and people want to fix their sites, they can do so through the web standards.