[HN Gopher] Show HN: I built a Hacker News userscript to make th...
___________________________________________________________________
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.
Author : midenginedcoupe
Score : 86 points
Date : 2022-12-18 13:29 UTC (9 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| jccalhoun wrote:
| Nice. I use https://github.com/plibither8/refined-hacker-news
| crtasm wrote:
| Looks good, might you consider crossposting it on
| https://greasyfork.org/ ?
|
| I suggest Violentmonkey (open source) over Tampermonkey
| (proprietary).
| midenginedcoupe wrote:
| Ah, good idea. I'll take a look. Thanks.
| giuliomagnifico wrote:
| 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).
| stefanvdw1 wrote:
| 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
| allarm wrote:
| 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.
| livre wrote:
| 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.
| Aethylia wrote:
| 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.
| livre wrote:
| 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.
| bastawhiz wrote:
| 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.
| Beltalowda wrote:
| 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.
| tutfbhuf wrote:
| 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.
| anhncommenter25 wrote:
| 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
| barnabee wrote:
| 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.
| sogen wrote:
| Can this script be automatically updated using a remote host?
| midenginedcoupe wrote:
| 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.
| Emigre_ wrote:
| 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_ wrote:
| 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_ wrote:
| 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_ wrote:
| 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.
| petodo wrote:
| 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
| arboles wrote:
| > HN homepage is brigaded/manipulated
|
| Do you have a recent example?
| aliqot wrote:
| Wow those are pretty cool, thanks for the heads up. I had no
| clue about Serializer and BestHN
| hxugufjfjf wrote:
| https://github.com/cheeaun/awesome-hacker-news
| belltaco wrote:
| I use hckrnews.
| hamburglar wrote:
| 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.
| mrj wrote:
| 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.
| ShockedUnicorn wrote:
| 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
| guiambros wrote:
| 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
| cowsup wrote:
| 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.
| midenginedcoupe wrote:
| Ah, I'll take a look at those. Thanks.
| rrgok wrote:
| 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.
| zzo38computer wrote:
| 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.
| justsomehnguy wrote:
| 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.
| lapcat wrote:
| 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; }
| j-james wrote:
| Hey, pretty cool. I made one too:
| https://github.com/j-james/hntheme
|
| I really like the quotes, that's a clever little bit of
| JavaScript.
___________________________________________________________________
(page generated 2022-12-18 23:03 UTC)