Show HN: I built a Hacker News userscript to make this site more legible(github.com)

102 pointsby midenginedcoupevor 4 Jahren51 comments

Show HN: I built a Hacker News userscript to make this site more legible

https://github.com/mgladdish/website-customisations/tree/main/news.ycombinator.com

My personal itch to scratch just recently has been the umpteen formatting foibles of HackerNews. So, in the spirit of making the web more personal again, I knocked up a TamperMonkey userscript to fix up the worst of my personal bugbears.

This isn't an attempt at a complete rebrand/redesign of the site, instead it's just fixing up what I think are the biggest design/readability issues whilst trying to remain true to the site's existing aesthetic.

Key features:

  * Base font size increased
  * A little more room around headings
  * Top menu bar is full-width and with a little more padding
  * Downvoted comments no longer faint hard-to-read grey. Instead they're rendered with a light gray background and in a smaller font size.
  * Comments have a more readable max line length
  * Quotes are parsed and transformed to look like genuine quotes. I.e. any p or span that starts with '>' is transformed and rendered with a light orange background and in italics.
  * The 'Add comment' box on items is hidden by default. (Surely you'd want to read all the comments first before leaping in with your own 2p's worth!?)

Check out the repo's readme for example screenshots.

52 comments

livrevor 4 Jahren

Try to not recommend Tampermonkey, it is closed source, slow, bloated and a bit sketchy, uses Google Analytics and right now the privacy policy link in their website isn't working for me (redirects to the home page). There are better, faster, less bloated and open source alternatives, like Violentmonkey which now has a reasonable privacy policy (https://violentmonkey.github.io/privacy/).

Btw thanks for the script, the alternating colours between comments and replies should be part of the standard hacker news experience, thanks for adding that.

Aethyliavor 4 Jahren

Completely agreed on avoid Tampermonkey, but Violentmonkey fails to detect the page on one of my scripts very often. If I refresh it works. This is a match with no wildcards and just a simple path after the URL.

Perhaps a simple bug, but doesn't give me much faith in the project.

livrevor 4 Jahren

That's a shame, never happened to me, have you tried changing it to an include or adding a wildcard at the end? The project has been active for a very long time, I've been using it since it was only an Opera 12 extension, the developer seems very responsive, try reporting a bug.

Aethyliavor 4 Jahren

I haven't tried that yet but I'll give both a try, thank you. I'm not giving up on it yet. Good to know they're responsive, I might look at fixing it myself.

crtasmvor 4 Jahren

That's interesting. To confirm, it doesn't appear in the 'Matched scripts' list when that occurs?

Aethyliavor 4 Jahren

Yes that's correct, but I think it appears everytime with a refresh.

tutfbhufvor 4 Jahren

I think someone should tell dang that the HN news font is too small. If hundred of people on HN complain about the small font size (including me), then the font size should be increased IMHO.

anhncommenter25vor 4 Jahren

This is the only website I have browser zoom set up for. I've acclimated, so I just now peeked back at 100% zoom. my god... it's like the entire website is written in subscript

barnabeevor 4 Jahren

I use most sites at 90% or below, HN is the only site I keep at 100% (across mobile, laptop, and desktop monitors).

Information density is seriously undervalued these days.

hackerman123469vor 4 Jahren

It's the same for me. I have it zoomed at 175% and I just zoomed out to 100% and instantly had to go back.

crtasmvor 4 Jahren

Looks good, might you consider crossposting it on https://greasyfork.org/ ?

I suggest Violentmonkey (open source) over Tampermonkey (proprietary).

midenginedcoupevor 4 Jahren

Uploaded. https://greasyfork.org/en/scripts/456820-hacker-news

I'll give Violentmonkey a go and make sure my script works in both.

midenginedcoupevor 4 Jahren

Ah, good idea. I'll take a look. Thanks.

jibbersvor 4 Jahren

I just made my own CSS for this site, too! I'm most proud of replacing those upvote arrow images with a Unicode glyph.

.votearrow { background: none; } .votearrow:after { content: "\25B2"; position: relative; display: block; line-height: 0.9; color: rgb(154, 154, 154); font-size: 12px; }

https://github.com/dillonjohnbrown/user-styles/blob/main/hac...

jccalhounvor 4 Jahren

Nice. I use https://github.com/plibither8/refined-hacker-news

allarmvor 4 Jahren

Nice, thank you.

> downvoted comments no longer light gray text and hard to read

I don’t understand the reasoning behind this design decision. There’s often long comments threads starting from a downvoted comment and it’s super difficult for me to read it.

Emigre_vor 4 Jahren

The background of the center section of Hacker News is #F6F6EF. The colour of the main text of a post is #828282, which results on a contrast ratio of 4:1 (calculated here [1]).

This is below the minimum required level to conform to the Contrast and Color Accessibility requirements of the WCAG... a pity! See [2]. The minimum contrast is recommended to be 4.5:1.

The comments (below the main post text) text colour is black (#000000) and that has good contrast - it reaches level AAA in the WCAG guidelines, which is the best rating. Unfortunately as mentioned by OP downvotes faint the colour of the text!...

[1] https://www.accessibilitychecker.org/color-contrast-checker/

[2] https://webaim.org/articles/contrast/

Emigre_vor 4 Jahren

It would be nice if the maintainers of the site reviewed these particular design choices at some point, to perhaps opt for something more conformant with those accessibility guidelines. Although to be honest 4:1 is not far from the minimum. Just increasing it a little would 'technically' be enough. The downvoted comments colours are another topic...

Accessibility is important!...

hunter2_vor 4 Jahren

While the ridiculously low contrast of downvoted comments is a problem, let's say for a second that "you're meant to ignore it anyway, and we use low contrast to indicate it" is a reasonable idea. Then why is the main submission text lower contrast than the comments?!

Emigre_vor 4 Jahren

I think the main text has a higher contrast than downvoted comments?… I’m mot sure, actually. If they receive lots of downvotes, their text colour becomes really pale.

hunter2_vor 4 Jahren

I meant compared to normal comments, not compared to downvoted comments.

Emigre_vor 4 Jahren

Ah! True…

mrjvor 4 Jahren

This is cool, thanks for this! I have added

      @media (min-width: 768px) {
        body {
          padding: 0 40px;
        }
      }

because it felt crowded on a desktop screen. I do feel like removing the :visited color difference is a usability negative.

Also the 'add comment' input isn't a button so it doesn't get a normal pointer:

      input[type='submit'] {
        cursor: pointer;
      }

HN's table layout makes it tough to do normal things you'd expect on a site like this.. kinda surprising to see a no-kidding table layout these days. It brings back bad memories. Thanks for posting.

ShockedUnicornvor 4 Jahren

Those are some good changes, I also change to something like:

    a:visited {
        color: gray;
    }

to help see which items on the front page I've clicked on

midenginedcoupevor 4 Jahren

Thanks. I've fixed the pointer issue.

And yeah, HN's html and css is shocking.

giuliomagnificovor 4 Jahren

Niice thanks, I only changed the font to "San Francisco" (Apple user) and 0.9rem in comment. Maybe on desktop the layout needs to be centered (like the original).

hamburglarvor 4 Jahren

My main problem with HN is that when reading it on an iPhone, the font size control seems to be completely ineffective because when I make the font size larger, the layout changes and the browser zooms out to view the whole thing. So I just end up having to zoom in and pan incessantly, which is a much worse experience than just going and finding my laptop.

bastawhizvor 4 Jahren

I have arguably thick sausage fingers, and I routinely accidentally flag or hide posts when trying to visit a link on my phone. It's easy to accidentally do this and hard to undo. I would love it if this site would make destructive actions slightly harder to accidentally perform, or at least make it a setting.

Beltalowdavor 4 Jahren

I have the following in Stylus:

  body      { margin: 0; color: #000; background-color: #eee; }
  #hnmain   { background-color: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .2) } /* Better colours */
  .itemlist { padding-left: .5em; }
  td        { color: inherit; }
  .togg     { float: left; margin-right: .5em; } /* Collapse button to the left */
  .comment  { line-height: 1.4em; }              /* Bit more line-height */

The thing I miss the most is the ability to clearly cite/quote things, whether it's other posts or something from an article. Yes, you can use ">", maybe wrapped in italics, but I find it pretty unclear, especially for longer texts. You can have some user CSS or whatnot to clarify that, but that won't work for the majority of folks reading your post.

Obscurity4340vor 4 Jahren

Not sure if this is appropos but I gave up on using the website in a browser. Interested to hear everyone's take on this but I've found the HACK app to be the most visually and functionally appealing, particularly in making the experience more similar to using Reddit through an app like Apollo.

Its cool that people are putting together their own solutions but there are options that have invented the wheel in a pleasing format already and might facillitate discovery and ease of use in a way that might not be as comprehensive.

cowsupvor 4 Jahren

Very impressive and very clean. I’ve set up many user scripts for websites I browse for all of my devices. User scripts are indispensable to me.

Two quirks:

1. In Safari on my iPad, “add comment” is invisible, since it still uses the white font from vanilla HN. I’ve fixed this by adding “color: #333;” just below your existing “background-color: white;”

2. There seems to be no way to indicate if I have already read a post. In vanilla HN, read posts are slightly more faint. This script breaks that by overriding all links, including a:visited.

Otherwise a nice set of great QoL changes.

midenginedcoupevor 4 Jahren

Ah, I'll take a look at those. Thanks.

guiambrosvor 4 Jahren

Nice additions. I like in particular the removal of the indexes, and how quotes look better.

Just a heads that if you use a dark theme (e.g. [1]), then it makes a whole mess, with illegible colors, parts in white background and so on. Not a surprise, given both are fighting to manipulate the DOM.

[1] https://github.com/TheLastAirsickLowlander/DarkHacker

casmikevor 4 Jahren

I customized your script for myself and thought I'd share it - https://github.com/Meekelis/Hacker-News-Readability-Tweaks.

I included a link to your original repository in my README.md as it would have taken some effort to fork just one directory properly. Thanks for the script.

lapcatvor 4 Jahren

I take a minimalistic approach, which is not perfect, but good enough for me, and gets my preferred font size and dark mode support. CSS:

:root { color-scheme: light dark; }

* { background-color: revert !important; color: revert !important; font-size: revert !important; }

center { text-align: left !important; }

table#hnmain { width: 100% !important; }

stefanvdw1vor 4 Jahren

Nice!

Felt the same way but took it a step further and designed a whole new front-end[0] so that it was easier to use on modern large format screens (and added some things like dark mode).

0. https://modernorange.io

justsomehnguyvor 4 Jahren

That's what the zoom for.

I have HN set to 130% and it's fine.

Please, stop messing with the font size, every time I see 1/3 of my FullHD monitor set with 28pt+ text (and barren wastelands on other 2/3) I really want to slap someone over TCP/IP.

rrgokvor 4 Jahren

I wish this had max-width: 60ch (or at least 80ch). I have some difficulties in reading and keeping my attention past 60-80ch line width wall of texts. Sometime I manually edit the CSS to make line shorter, so that I can keep reading.

midenginedcoupevor 4 Jahren

It does set max-width of .comment and .toptext to 40em. Which means items on the page can nest across the screen, but each one will be no wider than that.

I took my cue from https://design-system.service.gov.uk/ where the majority of their design decisions are informed by thorough extensive user research. They set their text elements to a max width of 38em. That felt a little mean to me so I upped it to 40.

[deleted]vor 4 Jahren

cbeachvor 4 Jahren

My biggest bugbear is the size of the upvote/downvote buttons. They’re tiny, hard to touch accurately and vanish when clicked, giving useless feedback.

fourmajorvor 4 Jahren

I love the Modern for Hacker News extension: https://www.modernhn.com/

zzo38computervor 4 Jahren

I use a CSS code which makes downvoted comments to be displayed the same as any other comments, and adding vertical lines to the left of indented items.

sogenvor 4 Jahren

Can this script be automatically updated using a remote host?

midenginedcoupevor 4 Jahren

I think so. Although I'm still new to TamperMonkey and figuring out its quirks.

Whilst I've been putting this together I've asked Tampermonkey to check for updates and it's pulled in the newest version from my repo. So you should get automatic updates when I make changes. Although I believe those changes may take a little time to come through due to github's caching of raw content URLs.

sogenvor 4 Jahren

Cool. Thanks!

petodovor 4 Jahren

nice work, I wouldn't mind if this was HN redesign (especially like uncensored comments section), though it still doesn't fix obvious issue with useless HN homepage which is brigaded/manipulated, so one has to resort to alternative sites like Serializer or BestHackerNews to read HN posts

arbolesvor 4 Jahren

> HN homepage is brigaded/manipulated

Do you have a recent example?

aliqotvor 4 Jahren

Wow those are pretty cool, thanks for the heads up. I had no clue about Serializer and BestHN

hxugufjfjfvor 4 Jahren

https://github.com/cheeaun/awesome-hacker-news

belltacovor 4 Jahren

I use hckrnews.

petodovor 4 Jahren

Yeah I used hckrnews before Serializer, but top10/20 has too little content and top 50% or all too much, I find chronological Serializer very mild filtering better plus Serialized allows syncing across devices (smartphone/desktop) through unique URL you just save to bookmarks.

For Top charts I find BestHackerNews at heroku better, since you are not limited by amount and you can see all sorted by top in last 24 hours, week or month.