14 ms·
Show HN: I built a Hacker News userscript to make this site more legible
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.
- petodo 4y agonice 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
- aliqot 4y agoWow those are pretty cool, thanks for the heads up. I had no clue about Serializer and BestHN
- hxugufjfjf 4y agohttps://github.com/cheeaun/awesome-hacker-news https://github.com/cheeaun/awesome-hacker-news
- belltaco 4y agoI use hckrnews.
- petodo 4y agoYeah 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.
- arboles 4y ago> HN homepage is brigaded/manipulated Do you have a recent example?
- guiambros 4y agoNice 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 https://github.com/TheLastAirsickLowlander/DarkHacker
- deleted 4y ago[deleted]
- cowsup 4y agoVery 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.
- midenginedcoupe 4y agoAh, I'll take a look at those. Thanks.
- lapcat 4y agoI 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; }
- jccalhoun 4y agoNice. I use https://github.com/plibither8/refined-hacker-news https://github.com/plibither8/refined-hacker-news
- crtasm 4y agoLooks good, might you consider crossposting it on https://greasyfork.org/ https://greasyfork.org/ ? I suggest Violentmonkey (open source) over Tampermonkey (proprietary).
- midenginedcoupe 4y agoAh, good idea. I'll take a look. Thanks.
- midenginedcoupe 4y agoUploaded. https://greasyfork.org/en/scripts/456820-hacker-news https://greasyfork.org/en/scripts/456820-hacker-news I'll give Violentmonkey a go and make sure my script works in both.
- stefanvdw1 4y agoNice! 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 https://modernorange.io
- livre 4y agoTry 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/ 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.
- Aethylia 4y agoCompletely 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.
- livre 4y agoThat'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.
- Aethylia 4y agoI 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.
- crtasm 4y agoThat's interesting. To confirm, it doesn't appear in the 'Matched scripts' list when that occurs?
- Aethylia 4y ago
- Emigre_ 4y agoThe 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/ https://www.accessibilitychecker.org/color-contrast-checker/ [2] https://webaim.org/articles/contrast/ https://webaim.org/articles/contrast/
- Emigre_ 4y agoIt 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_ 4y agoWhile 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?!
- rrgok 4y agoI 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.
- midenginedcoupe 4y agoIt 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/ 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.
- Beltalowda 4y agoI 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.
- allarm 4y agoNice, 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.
- mrj 4y agoThis 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.
- ShockedUnicorn 4y agoThose 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
- midenginedcoupe 4y agoThanks. I've fixed the pointer issue. And yeah, HN's html and css is shocking.
- tutfbhuf 4y agoI 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.
- anhncommenter25 4y agoThis 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
- barnabee 4y agoI 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.
- hackerman123469 4y agoIt's the same for me. I have it zoomed at 175% and I just zoomed out to 100% and instantly had to go back.
- justsomehnguy 4y agoThat'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.
- sogen 4y agoCan this script be automatically updated using a remote host?
- midenginedcoupe 4y agoI 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.
- sogen 4y agoCool. Thanks!
- zzo38computer 4y agoI 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.
- hamburglar 4y agoMy 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.
- bastawhiz 4y agoI 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.
- jibbers 4y agoI 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/hacker%20news.css https://github.com/dillonjohnbrown/user-styles/blob/main/hac...
- Obscurity4340 4y agoNot 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.
- fourmajor 4y agoI love the Modern for Hacker News extension: https://www.modernhn.com/ https://www.modernhn.com/
- cbeach 4y agoMy biggest bugbear is the size of the upvote/downvote buttons. They’re tiny, hard to touch accurately and vanish when clicked, giving useless feedback.
- giuliomagnifico 4y agoNiice 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).
- casmike 4y agoI customized your script for myself and thought I'd share it - https://github.com/Meekelis/Hacker-News-Readability-Tweaks 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.