Refined Hacker News(github.com)
github.com
Refined Hacker News
https://github.com/plibither8/refined-hacker-news
69 comments
Hacker news needs a redesign, the UI is horrible by basic accessibility standards: Very small click targets, horrible mobile experience, too small font size.
HN is an example of what used to be good about the internet. The page loads quickly without pulling in 100Mb of frontend dev navel-gazing. In my experience simple sites like this are much easier to modify locally for accessibility, via screen readers, or local style sheets to modify things like the small click targets.
I think many in the HN crowd see it as a rejection of the modern bloat and straight up garbage code that many popular sites (particularly news aggregators, looking @ you reddit) tend to become.
I think many in the HN crowd see it as a rejection of the modern bloat and straight up garbage code that many popular sites (particularly news aggregators, looking @ you reddit) tend to become.
Supposing that all your disabled readers are also all programmers is a terrible approach to developing your website. It was developed a long time ago without any consideration for any of these things and simply hasn't changed to address these things; it's not with intent.
I appreciate that hacker news is largely unchanged and I also appreciate a website that is more conservative about making unnecessary changes to it just for the sake of change, but addressing accessibility issues shouldn't be eschewed just for the sake of not changing. You might argue that anyone that is bothered by those changes could also just modify locally for their own personal taste, which seems much more reasonable.
I appreciate that hacker news is largely unchanged and I also appreciate a website that is more conservative about making unnecessary changes to it just for the sake of change, but addressing accessibility issues shouldn't be eschewed just for the sake of not changing. You might argue that anyone that is bothered by those changes could also just modify locally for their own personal taste, which seems much more reasonable.
This is a false dichotomy. You can fix the small click targets without adding 100mb of react.
I agree. It's the one site I can browse on a very limited mobile connection, and I'm very glad about it.
It’s a knee jerk reaction by those that don’t want change or’ worried the changes would go too far
Personally I agree that accessibility needs huge improvement. Not just for those who have disabilities but even other users on a touch screen will benefit
Personally I agree that accessibility needs huge improvement. Not just for those who have disabilities but even other users on a touch screen will benefit
I literally use it to test if my internet is working!
What if I told you that you can have a modern site without the bloat? You can improve accessibility without making it more difficult for the user to tweak things.
So many people here on HN think it's all or nothing. But that couldn't be further from the truth. You're basically using the worst of the worst sites as an example for how modern sites look and function.
All that is required to build a good modern site, is the will to do so. Even small tweaks to the existing site would improve it a lot. For example, the click targets are extremely small on mobile. Comments get grayed out to the level of them almost being invisible. There is no way to collapse comment threads. And the list goes on and on. All of this can be fixed without rewriting the whole site.
So many people here on HN think it's all or nothing. But that couldn't be further from the truth. You're basically using the worst of the worst sites as an example for how modern sites look and function.
All that is required to build a good modern site, is the will to do so. Even small tweaks to the existing site would improve it a lot. For example, the click targets are extremely small on mobile. Comments get grayed out to the level of them almost being invisible. There is no way to collapse comment threads. And the list goes on and on. All of this can be fixed without rewriting the whole site.
Comment threads have been collapsible for a while now, the link looks like [-] or [+].
It's a counterintuitive concept that most of the web doesn't get. Their features have no deep value. I, we know HN is backward, flawed, limited.. it's fugly it's bad, crooked, a shame, laughable, it's whatever. Yet we come back.
Reddit used to be like that.. search feature was lame, ui was bland .. but the subs and spirit was way so much more important it even made the flaws something you were attached too. It's a very human trait actually.. you know that some stuff gives you so much, you start to like the limitations.
Reddit used to be like that.. search feature was lame, ui was bland .. but the subs and spirit was way so much more important it even made the flaws something you were attached too. It's a very human trait actually.. you know that some stuff gives you so much, you start to like the limitations.
> Their features have no deep value. I, we know HN is backward, flawed, limited.. it's fugly it's bad, crooked, a shame, laughable, it's whatever. Yet we come back.
The fact that some people keep coming back despite legitimate problems with the website's design is hardly an argument for not solving legitimate problems.
The fact that some people keep coming back despite legitimate problems with the website's design is hardly an argument for not solving legitimate problems.
but are they problems ? will that change the reason people come here ?
see it as a kind of filter in a way
see it as a kind of filter in a way
Amen.
The problems GP listed have nothing to do with the size of JS or any other loaded resources, except for maybe adding a handful of bytes to the 2KB of CSS.
The trouble is conflating "what used to be good about the Internet" with deliberately making a website difficult to read and less accessible, when there's absolutely no reason those things need to be correlated.
The trouble is conflating "what used to be good about the Internet" with deliberately making a website difficult to read and less accessible, when there's absolutely no reason those things need to be correlated.
One of the reasons why HN has stayed relatively under the radar for the majority of people is in part because of its perceived "bad design". I, for one, love the fact that it's not attracting a wider audience. You have reddit for that.
There's "bad design" (subjective) then there's "fails to meet accessibility standards" (objective). HN would not pass WCAG 2.0 AA for a large number of reasons. Tap targets and illegible text being big ones.
It doesn't matter if you can zoom into text when downvoted comments have so little contrast with the background (#ddd over #f6f6ef). The "X minutes ago", "hide", "edit" comment header links even fail without zooming.
It doesn't matter if you can zoom into text when downvoted comments have so little contrast with the background (#ddd over #f6f6ef). The "X minutes ago", "hide", "edit" comment header links even fail without zooming.
> Tap targets and illegible text being big ones.
You can zoom, and the website reacts very well to zooming.
> It doesn't matter if you can zoom into text when downvoted comments have so little contrast with the background (#ddd over #f6f6ef).
That's on purpose. If you don't agree with it it's trivial to overload it with custom CSS.
You can zoom, and the website reacts very well to zooming.
> It doesn't matter if you can zoom into text when downvoted comments have so little contrast with the background (#ddd over #f6f6ef).
That's on purpose. If you don't agree with it it's trivial to overload it with custom CSS.
Agreed, it's not accessible; if you write your own accessible theme, it will have an accessible theme.
Your apartment building doesn't have a wheelchair ramp? That's on purpose. If you don't agree with it it's trivial to buy a bag of concrete and build one.
Your apartment building doesn't have a wheelchair ramp? That's on purpose. If you don't agree with it it's trivial to buy a bag of concrete and build one.
> Your apartment building doesn't have a wheelchair ramp? That's on purpose. If you don't agree with it it's trivial to buy a bag of concrete and build one.
That's a bad metaphor. First it's not possible to build a wheelchair ramp in your apartment building without affecting everyone else. Second, a custom CSS is very easy to make compared to a wheelchair ramp. Third, the comments being hard to read is, again, on purpose. I don't know the precise reason behind it, from what I understand it's part of the numerous tools that HN has to try to be a better place for discussion online than the rest. Some other tools seems to be: dead comments not being visible by default, new accounts having their names highlighted, the "reply" button not being here on "deep" threads in the "regular tree view".
If you don't agree with this decision, that's fine but that doesn't mean everyone is aligned with you.
That's a bad metaphor. First it's not possible to build a wheelchair ramp in your apartment building without affecting everyone else. Second, a custom CSS is very easy to make compared to a wheelchair ramp. Third, the comments being hard to read is, again, on purpose. I don't know the precise reason behind it, from what I understand it's part of the numerous tools that HN has to try to be a better place for discussion online than the rest. Some other tools seems to be: dead comments not being visible by default, new accounts having their names highlighted, the "reply" button not being here on "deep" threads in the "regular tree view".
If you don't agree with this decision, that's fine but that doesn't mean everyone is aligned with you.
Yes, a custom CSS theme is easy to make, for web developers. https://pastebin.com/aMYiGr05
It's not for my friend, who's a contractor. He finds working with concrete to be easy though. I don't.
Being inaccessible on purpose doesn't change the fact that it's inaccessible.
It's not for my friend, who's a contractor. He finds working with concrete to be easy though. I don't.
Being inaccessible on purpose doesn't change the fact that it's inaccessible.
I don't think it's that hard for non web developers. The rule is commtext { color: black; }. I think that adding an option (like showdead) would be better, as it doesn't require people to take the time to find out by themselves. Again, your comparaison doesn't really hold.
> Being inaccessible on purpose doesn't change the fact that it's inaccessible.
It explains why it still is though.
> Being inaccessible on purpose doesn't change the fact that it's inaccessible.
It explains why it still is though.
> The rule is commtext { color: black; }
No it's not, it's more complicated: https://pastebin.com/aMYiGr05 (and there's no "commtext" class). So it's literally harder than you think, and you're presumably a developer. So how about the average user?
> It explains why it still is though.
Um, ok? And the building only has stairs because the architect didn't consider the needs of people that use assistive devices like wheelchairs. What's your point? "Why?" was not in question.
No it's not, it's more complicated: https://pastebin.com/aMYiGr05 (and there's no "commtext" class). So it's literally harder than you think, and you're presumably a developer. So how about the average user?
> It explains why it still is though.
Um, ok? And the building only has stairs because the architect didn't consider the needs of people that use assistive devices like wheelchairs. What's your point? "Why?" was not in question.
There is a commtext class tough. Tested on Chrome and Firefox. I don't know what your linked pastebin does but if you just want all the comments to show up as black text, the rule commtext { color: black; } in the body is all you need. Please check that kind of information by yourself before assuming that I'm wrong.
> Um, ok? And the building only has stairs because the architect didn't consider the needs of people that use assistive devices like wheelchairs.
Using metaphors doesn't help, they don't hold. Unless you assume that there is some people that are considered undesirable and that are also being kept out by having only stairs? And that aren't correlated to people that use assistive devices like wheelchairs?
> What's your point? "Why?" was not in question.
Why is why not in question? HN breaks accessibility guidelines in an easily fixable ways for reasons that are related to the primary purpose of the website. I think at this point it's just a difference of values between us. You seem to think that accessibility guidelines should matter above everything, I think it's fine to break them when it's needed for the "purpose" of the website. One other example of that would be "old internet" website, with flashing text, non-legible text and everything. On these websites, not respecting the guidelines is fine for me.
> Um, ok? And the building only has stairs because the architect didn't consider the needs of people that use assistive devices like wheelchairs.
Using metaphors doesn't help, they don't hold. Unless you assume that there is some people that are considered undesirable and that are also being kept out by having only stairs? And that aren't correlated to people that use assistive devices like wheelchairs?
> What's your point? "Why?" was not in question.
Why is why not in question? HN breaks accessibility guidelines in an easily fixable ways for reasons that are related to the primary purpose of the website. I think at this point it's just a difference of values between us. You seem to think that accessibility guidelines should matter above everything, I think it's fine to break them when it's needed for the "purpose" of the website. One other example of that would be "old internet" website, with flashing text, non-legible text and everything. On these websites, not respecting the guidelines is fine for me.
Do you understand what a "class" is in HTML? Do you understand that the class "commtext" doesn't appear anywhere in the source code for HN? The comment colors are controlled by classes like "c00" etc. Chrome has a tool called "DevTools" you can use that will show you. Here's the CSS for this site: https://news.ycombinator.com/news.css
Again, you don't understand it, but want to tell everyone else how easy it is...
> not respecting the guidelines is fine for me
in contrast I think everyone should be able to use the web, that it should be accessible. This isn't important to you, but sometimes you have to think about other people with a limited set of abilities in a compassionate way. The GP mentions "bad design" and I mentioned an objective measure: text that can't be read by someone without writing code.
Again, you don't understand it, but want to tell everyone else how easy it is...
> not respecting the guidelines is fine for me
in contrast I think everyone should be able to use the web, that it should be accessible. This isn't important to you, but sometimes you have to think about other people with a limited set of abilities in a compassionate way. The GP mentions "bad design" and I mentioned an objective measure: text that can't be read by someone without writing code.
> Do you understand what a "class" is in HTML?
Yes, I do.
> Do you understand that the class "commtext" doesn't appear anywhere in the source code for HN?
It actually does, try looking at the source code again.
> The comment colors are controlled by classes like "c00" etc.
Which is unrelated to the fact that you can use commtext to set their color.
> Chrome has a tool called "DevTools" you can use that will show you. Here's the CSS for this site: https://news.ycombinator.com/news.css
Why are you looking at the CSS and not at the HTML? Look at the HTML, and you'll see that every comment is inside an HTML element (usually a span) that has a commtext class.
> Again, you don't understand it, but want to tell everyone else how easy it is...
Again, you haven't checked and just assume you are right.
We can continue the conversation about values once you've learned how to use "show source" or the inspector.
Here's the link for the source of the page of the story: view-source:https://news.ycombinator.com/item?id=28686126. Try looking up "commtext" (by using Ctrl + f).
Yes, I do.
> Do you understand that the class "commtext" doesn't appear anywhere in the source code for HN?
It actually does, try looking at the source code again.
> The comment colors are controlled by classes like "c00" etc.
Which is unrelated to the fact that you can use commtext to set their color.
> Chrome has a tool called "DevTools" you can use that will show you. Here's the CSS for this site: https://news.ycombinator.com/news.css
Why are you looking at the CSS and not at the HTML? Look at the HTML, and you'll see that every comment is inside an HTML element (usually a span) that has a commtext class.
> Again, you don't understand it, but want to tell everyone else how easy it is...
Again, you haven't checked and just assume you are right.
We can continue the conversation about values once you've learned how to use "show source" or the inspector.
Here's the link for the source of the page of the story: view-source:https://news.ycombinator.com/item?id=28686126. Try looking up "commtext" (by using Ctrl + f).
This is an often repeated claim, but I've never found it plausible.
The reasons this forum has remained under the radar for the majority of people are more likely related to it being hosted on a subdomain of a site almost no one has even heard of, it being called "Hacker News" (which immediately limits its mainstream appeal) and its content not being shared on popular social media sites outside of the population that already knows about it. Plus, this community has kind of a bad reputation in many tech circles, so many potential users avoid it like the plague.
The design isn't keeping anyone away - Craigslist has a similar low-res design and the mainstream has no problem with it. Old Reddit was similar to HN, and 4chan is even more arcane, and both have huge userbases.
The only people who ever complain about Hacker News' layout are its own users.
The reasons this forum has remained under the radar for the majority of people are more likely related to it being hosted on a subdomain of a site almost no one has even heard of, it being called "Hacker News" (which immediately limits its mainstream appeal) and its content not being shared on popular social media sites outside of the population that already knows about it. Plus, this community has kind of a bad reputation in many tech circles, so many potential users avoid it like the plague.
The design isn't keeping anyone away - Craigslist has a similar low-res design and the mainstream has no problem with it. Old Reddit was similar to HN, and 4chan is even more arcane, and both have huge userbases.
The only people who ever complain about Hacker News' layout are its own users.
HN looks similar to how reddit did before the UI redesign, and reddit made many things significantly worse when redesigning.
UI redesigns as a concept are in my opinion horrible.
The approach linked to here is much better. Making incremental changes to the existing and well known UI. No need for a full redesign all at once.
UI redesigns as a concept are in my opinion horrible.
The approach linked to here is much better. Making incremental changes to the existing and well known UI. No need for a full redesign all at once.
Reddit had large, high-contrast text and tap targets. Downvoted comments did not have their color contrast reduced. If we're getting specific, HN does not look that similar.
When I look at HN and old.reddit.com side by side they have a lot in common
Anyways, when is the victorville film archive grand re-opening?
Anyways, when is the victorville film archive grand re-opening?
Browsers support adjusting font size if that's an issue for you. They also tend to remember your font size of choice per site.
I have no issue using Hacker News on mobile either. There are apps available if you prefer something mobile-centric.
I have no issue using Hacker News on mobile either. There are apps available if you prefer something mobile-centric.
Man, the replies to this somehow conflating improving accessibility and UX with adding 200ms of input delay and MBs of javascript really show a lack of understanding of the topic.
I was somewhat surprised at that too. HN comments, for example, aren't nested/threaded in any semantic way. Just spacer gifs in a <table>. I don't know how visually impaired readers follow comment threads here.
I am on the mild end of the accessibility spectrum -- I am, for the most part, keyboard-only.
HN's design is one of the best I've found on the Web, and one of the few places I still feel comfortable at.
HN's design is one of the best I've found on the Web, and one of the few places I still feel comfortable at.
By default it's small, but all you need to do is zoom in and it's perfect. For example, on my 1440p monitor I'm at 213% zoom and it's working great for me.
I don't think it needs a redesign, but some of the smaller, less obtrusive tweaks in this extension for example, would be more than welcome. I used to use other HN apps and newsfeed-reskin websites but I have definitely come to appreciate the utter simplicity of HN's design.
With respect, I don't think it needs a redesign.
It could do with a few minor CSS tweaks to address some of those points you've listed (which I do agree with to a degree).
But we are a long way from horrible by accessibility standards - I mean, it's literally text only for a start!
It could do with a few minor CSS tweaks to address some of those points you've listed (which I do agree with to a degree).
But we are a long way from horrible by accessibility standards - I mean, it's literally text only for a start!
Disagree. HN has one of the most usable designs on the internet. The last thing we need is more unnecessary JS bloat.
GP in no way suggested "more unnecessary JS bloat".
It's a nice simple site. For example you can trivially tell your browser to adjust the font size because there isn't a lot of "modern" junk messing with the font handling.
Completely agree. The default font is too small for me to read it, so I set it at 150% and that's it. Everything works fine after this small customisation.
It's actually excellent by accessibility standards. The small click targets and text can be easily solved by using your browsers built in zoom functionality.
It doesn't "need" a redisign, precisely because this kind of website can easily be extanded by things like this extension.
[deleted]
These are some great additions. Thanks!
I'd love to have dark mode feature.
This userstyle[1] installed with Stylus on Clonimums+Firefox and Cascadea on Safari has served me well.
[1]: https://userstyles.org/styles/113994/hacker-news-dark
[1]: https://userstyles.org/styles/113994/hacker-news-dark
Hi, developer of the extension here! There is a "dark mode" preset available in the Custom CSS settings of the extension. Open the extension popup from the toolbar (list of extensions) and you'll know what I'm talking about :).
https://github.com/darkreader/darkreader is great for this. Adds dark mode to any site.
Chromium-based browsers, including Chromium, Google Chrome, Brave, and others have a native dark mode stylesheet that can be enabled in chrome://flags/#enable-force-dark
It works to varying degrees of success depending on the site. Some sites become unreadable with it.
What I personally do is I have this flag enabled in my primary browser on my main computer, Brave on a MacBook Pro. And for any site that is severely broken I either skip that site, or if the site is important then I open the page in question in my secondary browser, Safari, and read it with its normal default style.
It works to varying degrees of success depending on the site. Some sites become unreadable with it.
What I personally do is I have this flag enabled in my primary browser on my main computer, Brave on a MacBook Pro. And for any site that is severely broken I either skip that site, or if the site is important then I open the page in question in my secondary browser, Safari, and read it with its normal default style.
Discussions on similar submissions:
https://news.ycombinator.com/item?id=23804469 Refined Hacker News (July 11, 2020 — 93 points, 40 comments)
https://news.ycombinator.com/item?id=20173974 Show HN: Browser Extension to Refine the HN Experience (June 13, 2019 — 259 points, 122 comments)
(FD: Admittedly I got this from the Refined Hacker News add-on, which shows this info at the bottom of each post)
https://news.ycombinator.com/item?id=23804469 Refined Hacker News (July 11, 2020 — 93 points, 40 comments)
https://news.ycombinator.com/item?id=20173974 Show HN: Browser Extension to Refine the HN Experience (June 13, 2019 — 259 points, 122 comments)
(FD: Admittedly I got this from the Refined Hacker News add-on, which shows this info at the bottom of each post)
I would greatly enjoy a comment-reply alert. Having to check my profile again and again to manually detect replies is not super efficient. Often I discover replies too late to engage an already gone replier.
I get an email notification using this service: https://www.hnreplies.com/
Thx but email is overkill I think. Much more efficient would be a small `unread replies` beacon in top bar.
Perhaps that beacon would be more efficient, but I think you may be waiting a long time for it.
In the meantime, I do suggest trying hnreplies as sloppycee suggested. Unless you comment here a lot, it's not that many emails - and it has the advantage that you don't have to keep watching or reloading HN to see if you got any replies to a comment.
Considering how fast stories drop off the home page, hnreplies gives me a chance to reply to a comment while people may still be looking at the thread.
So give it a try - you can always unsubscribe if it's not for you.
In the meantime, I do suggest trying hnreplies as sloppycee suggested. Unless you comment here a lot, it's not that many emails - and it has the advantage that you don't have to keep watching or reloading HN to see if you got any replies to a comment.
Considering how fast stories drop off the home page, hnreplies gives me a chance to reply to a comment while people may still be looking at the thread.
So give it a try - you can always unsubscribe if it's not for you.
I hear you but to me, the beacon would better allow for effortless long-lived conversations. Whereas mail alerts demand more work : a filter/folder lest hnreplies will drown among unrelated mails + switching to browser on link.
Reddit does it perfectly. You see alert and get ALL unread replies and pop them with a simple body click.
Reddit does it perfectly. You see alert and get ALL unread replies and pop them with a simple body click.
I need a filter to only show technical info from HN, like it was ten years ago :-)
I don't think HN was ever about just "technical" stuff. There is Lobsters for that kind of thing.
Out of curiosity, I brought up HN from 10 years ago on archive.org. I counted - 10 of the top 20 links were things that I wouldn't consider to be "technical".
Out of curiosity, I brought up HN from 10 years ago on archive.org. I counted - 10 of the top 20 links were things that I wouldn't consider to be "technical".
You don't have to go to archive.org! Here is the content on the HN front page 10 years ago to the day:
https://news.ycombinator.com/front?day=2011-09-27
https://news.ycombinator.com/front?day=2011-09-27
Feature request: functionality to auto-hide articles from a user-configurable domain kill-list, for those of us who don't want to see articles from e.g. Politico or Buzzfeed. Bonus points if it could also filter stories with user-configurable keywords in the title.
I've suggested this in the past to dang for the main HN UI, but they have limited resources for this sort of thing and there's a fear that if filtering is too easy, it'll split the community here.
I've suggested this in the past to dang for the main HN UI, but they have limited resources for this sort of thing and there's a fear that if filtering is too easy, it'll split the community here.
Techcrunch would be out of business within a week.
This is a neat idea!
I recommend submitting a GH issue.
Previously, when I filed a bug the maintainer had committed a fix within literally a few minutes. Of course, one can't count on such things, but it's at least a strong indicator of project-developer care and interest level.
I recommend submitting a GH issue.
Previously, when I filed a bug the maintainer had committed a fix within literally a few minutes. Of course, one can't count on such things, but it's at least a strong indicator of project-developer care and interest level.
Yep, please do open an issue on Github! Best way for me to keep track of it.
And thanks for the kind words :)
And thanks for the kind words :)
Here's the userscript I use for blocking clickbait sites on HN.
https://greasyfork.org/en/scripts/433199-filter-hackernews-b...
https://greasyfork.org/en/scripts/433199-filter-hackernews-b...
Or atlasobscura, or two words titles that have no context.
Instead of requesting this or that, I would just like to say that this is great work presented in a very nice way. The effort put there is impressive :)
Developer of the extension here, thank you!
Hi all, developer of Refined Hacker News here! Happy to see that it has been posted about again, thanks @jaytaylor! As stated in my previous Show HN for this extension, my philosophy behind the extension (as mentioned in the my comment) is:
> There are many extensions out there that add quite a few features to Hacker News, but they also always do one thing, which I have realised, is a slippery slope: changing the minimalistic design and style of Hacker News.
> I created this extension with one thing in mind: I am NOT going to mess around with the overall design or style of Hacker News. It's sacrosanct.
Thanks, I'm up for discussion! :D
> There are many extensions out there that add quite a few features to Hacker News, but they also always do one thing, which I have realised, is a slippery slope: changing the minimalistic design and style of Hacker News.
> I created this extension with one thing in mind: I am NOT going to mess around with the overall design or style of Hacker News. It's sacrosanct.
Thanks, I'm up for discussion! :D