Show HN: A better Hacker News front end
hakkernieuws.vercel.appBut that was... over a quarter a century ago. :)
But embedded browsers could always inject their own userscript for dark mode, so I don't really see the problem.
Also dark mode seems way too modern a feature for a forum whose entire aesthetic is frozen in the 1990s. Dark mode doesn't directly improve the signal to noise ratio or quality of conversation.
Maybe the best solution is to just let everyone use whatever plugins or browser scripts they want to and leave HN as it is.
Later, I used Netscape. Some of the more prominent settings[1] were for default colors: For text, links, visited links, and background. I very quickly made it white on black (but kept the blue/purple links unchanged).
But that was just me attempting to stick to my own familiarities.
For most others, the default background in those days was also not white; it was instead grey (#c0c0c0, [2], [3]).
Backgrounds defaulted to grey with Netscape all the way to the end, with Netscape Communicator 4.8 still defaulting to grey [4] at its 2002 release. Mosaic was also consistently grey [except for on the Macintosh], and so was IBM's WebExplorer (the forgotten independently-developed web browser that shipped with their forgotten desktop operating system).
Even Internet Explorer remained grey by default until the release of version 4, in the last half of 1997. [5]
But you're right, of course: There's no need for dark (or grey) mode here on HN. It's a simple-enough affair for a person of sufficient wit to change it to whatever they want, in-browser, here in 2025.
---
[1]: https://www.ou.edu/class/webstudy/n4/old/N_Link_Appearance.h...
[2]: https://news.ycombinator.com/item?id=20302205
[3]: https://scholar.lib.vt.edu/reports/soasis-slides/colors.html
[4]: https://commons.wikimedia.org/wiki/File:Netscape_Communicato...
Some things I wish it had while reading comments:
- keyboard shortcut to go to next/previous comment at same level (`j`/`k` a la vim?)
- keyboard shortcut to upvote a comment while it is selected
- memory of which comments I already read, so that when I come back to a comment section, I can navigate directly to the unread comments (useful for conversations that span multiple hours/days). Perhaps also styling read comments differently.
Overall there is too little space for the titles and the space there is, is given to the branding of the source, so favicon and domain.
I believe the focus should be the content. The hn community overall is quite good at filtering out the nonsense, so if you go to the homepage there will be quality content and having to filter out based on source is not necessary for me.
The approach taken in your design is similar to a search engine where filtering on source credibility or appropriateness IS necessary.
While it looks “modern” I think your redesign proves that flash does not equal good UX
I think they're afraid to improve it because a lot of people are attached to the original version and will freak out (see all the comments lol).
By the way, I like your implementation and use it from now on. Hope it’ll be active for some time.
The + - buttons on the top panel change the font size of every thing except the font size of the panel.
Things are arranged to minimize the page scrolling.
The news title and number of comments are darker and a little bit bigger than other elements for an easy reading.
// ==UserScript==
// @name ycombinator
// @namespace Violentmonkey Scripts
// @match https://news.ycombinator.com/*
// @grant GM_addStyle
// @version 1.0
// @author -
// @description 10/5/2022, 6:35:39 PM
// ==/UserScript==
GM_addStyle(`
.pagetop { color: #fff }
body .title { font: 19px/1.5 sans-serif }
body a, body a:link { color: #222 }
body .comhead { font-size: 16px; font-style: italic }
body .title .rank { color: #aaa; font-size: 14px }
body .subtext { font-size: 16px; padding: 4px 0 6px 19px }
.c00, .c00 a:link { color: #444 } body .comment { font: 16px/1.45 sans-serif; max-width: none }
body span.pagetop a, body span.pagetop a:visited { color: #fff }
body tr.athing:not(.comtr):nth-child(even) { background: linear-gradient(#f4f4f4, #eee, #f4f4f4) }
body tr.athing > td { padding: 5px 10px 5px 1px }
body tr.athing > td.votelinks { padding-right: 5px }
td.zoom { font-weight: 700; color: #fff; width: 32px }
td.zoom > span { cursor: pointer; font-size: 1.5rem }
div.toptext { font-size: 17px; color: #333 }
span.number-of-comments { font-size: 18px; color: #666 }
`);
const t = document.getElementById('hnmain');
if (t != null) {
t.removeAttribute('bgcolor');
t.removeAttribute('width');
t.parentNode.removeChild(t);
document.body.prepend(t);
}
const spanPagetop = document.querySelector('td span.pagetop');
if (spanPagetop) {
const tr = spanPagetop.parentElement.parentElement;
tr.insertAdjacentHTML('afterbegin', `
<td class="zoom"><span onclick="zoomIn(); return false">+</span></td>
<td class="zoom"><span onclick="zoomOut(); return false">-</span></td>
`);
}
setTimeout(function() {
while (true) {
const td = document.querySelector('tr:not([id]) > td.subtext');
if (td == null) {
break;
}
const tr = td.parentElement;
const previousTr = tr.previousElementSibling;
if (previousTr != null) {
tr.parentElement.removeChild(tr);
previousTr.append(td);
} else {
break;
}
}
while (true) {
const tr = document.querySelector('tr.spacer');
if (tr == null) {
break;
}
tr.parentElement.removeChild(tr);
}
document.querySelectorAll('td.title[valign="top"]').forEach(td => td.setAttribute('valign', 'middle'));
document.querySelectorAll('table > tbody > tr:has(> td + td + td + td) + tr + tr > td[colspan="2"]:first-child + td:last-child').forEach(td => {
td.setAttribute('colspan', '2');
});
document.querySelectorAll('a[href^="item?id="]').forEach(a => {
const arr = a.innerHTML.split(' ');
if (arr.length == 2) {
a.innerHTML = `<span class="number-of-comments">${arr[0]}</span> ${arr[1]}`;
}
});
}, 419);
const myScript = document.createElement('script');
myScript.innerHTML = `
const FONT_SIZE_THRESHOLD = 26.9;
function zoomIn() {
const bodyTitle = document.querySelector('body .title');
if (bodyTitle) {
const newFontSize = parseFloat(getComputedStyle(bodyTitle).getPropertyValue('font-size').replace('px', '')) + 1;
document.querySelectorAll('body .title').forEach(t => {
t.style.fontSize = newFontSize + 'px';
if (newFontSize > FONT_SIZE_THRESHOLD) t.style.fontWeight = 300;
});
}
const bodyComment = document.querySelector('body .comment');
if (bodyComment) {
const newFontSize = parseFloat(getComputedStyle(bodyComment).getPropertyValue('font-size').replace('px', '')) + 1;
document.querySelectorAll('body .comment').forEach(t => {
t.style.fontSize = newFontSize + 'px';
if (newFontSize > FONT_SIZE_THRESHOLD) t.style.fontWeight = 300;
});
}
}
function zoomOut() {
const bodyTitle = document.querySelector('body .title');
if (bodyTitle) {
const newFontSize = parseFloat(getComputedStyle(bodyTitle).getPropertyValue('font-size').replace('px', '')) - 1;
if (newFontSize > 12) document.querySelectorAll('body .title').forEach(t => {
t.style.fontSize = newFontSize + 'px';
if (newFontSize < FONT_SIZE_THRESHOLD) t.style.fontWeight = 400;
});
}
const bodyComment = document.querySelector('body .comment');
if (bodyComment) {
const newFontSize = parseFloat(getComputedStyle(bodyComment).getPropertyValue('font-size').replace('px', '')) - 1;
if (newFontSize > 12) document.querySelectorAll('body .comment').forEach(t => {
t.style.fontSize = newFontSize + 'px';
if (newFontSize < FONT_SIZE_THRESHOLD) t.style.fontWeight = 400;
});
}
}
`;
document.head.appendChild(myScript);2) Font is too small and light. Make subject font much bigger. The 2nd line is not nearly as important as the title, so title should be much bigger. (your darkmode is better at this than light mode). Personally I prefer Verdana to AppleSystemFont as the latter is very light.
1+2) The posting page has too much vert space between posts and too small font. I'm here for the text.
3) I don't care about icons. They don't help me to decide "do I want to read this posting".
My layout design: https://imgur.com/a/uBPb2pC
I don't know why so many sites default to tiny fonts and using fixed margins to restrict content to a tiny column down my screen. Fortunately, most browsers allow you to set a minimum font size, which fixes a lot of these sites.
Overall it has 'more' spacing. Which I don't feel I need: I appreciate the high density of original.
did you add any 'additional' features? stuff lile 'kill file', per commemt bookmark/tag, different search features ( 'more like this', 'best of the day comments based on your liking') would gives some reason to switch
As others here noted, I can't find any noteworthy addition (actually none? maybe I'm not very observant) to the features the actual HN has. I'd appreciate a more thorough explanation of this.
A UI refresh is certainly not a bad idea (although the existing content density is hard to match), but this "modern" UI looks like the average Bootstrap website from 10 years ago with a few extra shadows and transparency. I enabled Javascript to test the theme switching and discovered that scrolling becomes very laggy (on a phone). Perhaps you're accidentally running some animation? It feels very unnatural.
Also you followed original HN here making clicked on links grey, ive always found it annoyingly hard to quikcly spot them in the list after they get turned grey.
Thanks for sharing this
(I appreciate that it's Load More instead of automatic infinite scroll, but still!)
Is it better or not is a subjective thing. Don't get discouraged by some of the comments posted here.
1. It lacks density where HN excels at density. It is my opinion that it has way too much negative space, and that I do not care if my opinion flies in the face of modern web design ethos. (I do not come to HN because my scroll-finger lacks exercise.)
2. It includes tiny little icons that I cannot discern without careful attention. At best, this is distracting and represents additional complexity that provides no positive value.
Positive feedback:
1. The pages do seem to load fast, and that's certainly a welcome consistency.
Other thoughts:
1. If the best it accomplishes is that parts of it stay the same, but other parts get worse, then: It isn't better. It is worse. Change for the sake of change is usually a non-starter, in my opinion.
- Dark mode feature
- search might be useful.
What I think is worse:
- More spacing
- Menu missing threads, past, comments, jobs and submit.
- Icon buttons.
Possibly unpopular opinion, but I think text based buttons are much faster to locate while icons require more effort to understand. Icons only make sense to you when you already know what it is supposed to represent
From my part I see this kind of exercises quite often, but I happen to like this exercise. Actual good content density and the favicons are actually a good idea since they let you know where a link would take you to.
The only downside I saw (for me) is that article titles, in the article pages, are too big.
- Scrolling is unbearable on Firefox/Android.
- The icons are way too "noisy" I would remove them. Also, posts without icon look "misplaced".
Other than that looks pretty nice. The dark mode is awesome. Don't let the angry mob bring you down ;)
My main gripes with HN UI are the expand/collapse and voting buttons are tiny on mobile. And it's very easy to accidentally hide an article by accident (it's a hassle to undo this).
https://hn.algolia.com/?dateRange=last24h&page=1&prefix=fals...
Maybe this is exclusively intended for desktop?
altought i prefer the default HN interface, i think the ui is generally fine and you did a good job and avoided overengineering.
with a text heavy page like HN, the most important thing is imo to carefully choose a font family and font properties (line-height, letter-spacing, etc.). as is, the default HN does a better job with this but leaves a lot of room for improvement as well.
personally, i'm using a few lines of css to add dark mode to default HN and zoom in to 125% cause the default font-size ist too small for me (an old person).
I scratched my itch with a custom UserScript
https://github.com/mgladdish/website-customisations/tree/mai...
I'm particularly pleased with how quotes are rendered - I wouldn't go back to 'default' HN now.
All this description says that it's better for you. Why? What could be improved?
I mostly check HN on my phone. Harmonic is awesome for this, and I can definitely tell you why it's better for phones.
- Nice filtering - infinite scroll - local bookmarking - rich UI for actions
It is a bit in similar direction like Old Reddit (good) to New Reddit (terrible).