4 ms·

Show HN: A better Hacker News front end

38 points by AntonioEritas 1y ago

I forked pajecawav's better-hn repo, which turned out to be an excellent foundation to build on. While the original implementation was clean and functional, it didn't quite capture the essence of Hackernews. More importantly, it was missing some features I considered essential for a truly viable alternative. After tinkering with it for a while, I think I've nailed it—at least for my own use case. If it works well for me, chances are others might find it useful too. So I figured, why not share it? Pretty straightforward: no ads, no tracking, no monetization schemes and no intention to do so. Just a simple deployment on Vercel's free tier, which costs me exactly nothing. I'm not expecting millions of users (let's be realistic), but we'll see how it scales if people actually start using it. Any feedback is welcome, or just use it.

cranberryturkey 1y ago
how is this better?
- DemocracyFTW2 1y ago
  rounded corners!——joking, just looking for myself
  - cranberryturkey 1y ago
    besides being too difficult to read..
  - ssl-3 1y ago
    When Rob Malda introduced rounded corners on Slashdot over a quarter of a century ago using HTML tables and GIFs (sadly, I couldn't find a link), that sure did seem neat. But that was... over a quarter a century ago. :)
v3ss0n 1y ago
Not better at all, we don't need flashy UI, we need better content focus
bargainbin 1y ago
The headers are lost in the design amongst all the extra negative space and increased font sizes
upmostly 1y ago
For me, the only lacking feature of vanilla HN is dark mode. I wish they'd add that. Other than that, it's perfect.
- ranger_danger 1y ago
  Dark Reader extension does wonders for me.
  - rcarmo 1y ago
    I keep pointing this out every time dark mode comes up, so don't take it personally: embedded browsers (like the ones in RSS readers) cannot use extensions, and only native dark mode support in the site itself works there. It is _extremely_ annoying to get a white flash while reading news in the night time, and I really don't get why HN doesn't have a pair of CSS lines that would fix it for everyone.
    - ranger_danger 1y ago
      The latest version of Qt WebEngine supports both userscripts and extensions. But embedded browsers could always inject their own userscript for dark mode, so I don't really see the problem.
      - rcarmo 1y ago
        You don't use iOS, do you?
        ssl-3 1y ago
        Are you using iOS, or is iOS using you?
  - exitb 1y ago
    Just tried it and it makes the vote buttons disappear (mobile Safari).
shreddit 1y ago
Way too much spacing between comments.
- AntonioEritas 1y ago
  Fixed!
mosselman 1y ago
I don’t think this is better. Mind you I opened this on my phone. 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
- AntonioEritas 1y ago
  I think I fixed a lot of issues which will make your experience a lot better. Also, creating something modern/flashy wasn't the goal. I think it looks clean and simple, with some modern readability enhancements.
kehvyn 1y ago
I like the bigger touch targets in the header for mobile, but the infinite scroll hurts me, pages introduce natural stopping points and mean the header is always nearby. (I appreciate that it's Load More instead of automatic infinite scroll, but still!)
mewpmewp2 1y ago
I prefer the existing one. What I like about existing one is how simple the titles are to read. They are strong contrast above everything else. Yours has icons that take away focus, and not as much contrast between the meta info etc. It is a bit in similar direction like Old Reddit (good) to New Reddit (terrible).
newman8r 1y ago
Not better IMO but I can appreciate the attempt. Seems messier than the real thing. The icons don't really do anything to help. Takes more time to read.
Ampned 1y ago
[dead]
factorialboy 1y ago
Good effort — I like it. Is it better or not is a subjective thing. Don't get discouraged by some of the comments posted here.
uwemaurer 1y ago
how do you like my hackernews frontend: https://news.facts.dev/ https://news.facts.dev/
thekevan 1y ago
It's more attractive, but a little less readable. I would call it different but not better.
jonplackett 1y ago
Looks nice. Need to be able to comment. That’s the whole point of HN
BoredPositron 1y ago
What's not broken is easily fixed.
InMice 1y ago
Spacing between comments is pretty wide. Gives me that feeling when they redesign a site and everything is spaced our 2x more than it was before. Some text feels too small at default zoom. 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
nabunub 1y ago
Opened it on mobile. UI looks more modern of course, but scrolling is just plain horrible.
mkl 1y ago
First impression: this is strictly worse. Way too much space between everything (even between lines in paragraphs!) means fewer stories visible on screen, and fewer comments visible. Enormous pointless spaces between comments, grey comment text is harder to read. Site links on stories don't link to site's stories. Data is out of date.
ramon156 1y ago
So what's worse/better? What did u fix? What didn't u fix? 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
deleted 1y ago
[deleted]
midenginedcoupe 1y ago
Font size is one of my biggest bugbears with HN, as well as the terrible colour contrast on downvoted posts. I scratched my itch with a custom UserScript https://github.com/mgladdish/website-customisations/tree/main/news.ycombinator.com 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.
Oarch 1y ago
I find the favicons needlessly distracting and unhelpful. I suspect we probably use different parts of the brain for processing images and text, so it's a lot of different information at once. 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).
rava-dosa 1y ago
Its really good modern, loved it. Don't get disappointed with people's comments
- wltr 1y ago
  It’s many times better, but the original website is so mediocre that any implementation is better at something, at least. I’m getting a good laugh reading all this ‘the original is so good’ praises. Just increase the font sizes on mobile and see how it’s broken.
  - AntonioEritas 1y ago
    Yeah, that's why I created this in the first place. The original sucks and I want to use something better, which is just as fast, but better looking. The fontsize, layout, colors are really bad in the original. 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).
    - wltr 1y ago
      They simply don’t care, except for censoring the narratives they don’t like to be discussed. Plus utilising the masses when they want to advertise something to them. All in all, I’m wondering why I waste my time here. By the way, I like your implementation and use it from now on. Hope it’ll be active for some time.
davedx 1y ago
Even tinier font? Basic, basic failure.
- wltr 1y ago
  I can easily make it bigger, and it does not break on my smartphone as the original site.
bryanph_ 1y ago
I've fat fingered the "hide" button quite often when I was trying to hit the comments button. That's the main thing that I find slightly annoying about the default HN layout
zwaps 1y ago
Its laggy on mobile
- AntonioEritas 1y ago
  Fixed!
homarp 1y ago
With normal HN, on the phone I get 12 items from home page. Your version shows me 10. 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
lawgimenez 1y ago
This is better because it has dark mode. Yo Y-comb when we getting dark mode?
ubutler 1y ago
Personally, I like it. However, I like being able to comment and upvote more. At the same time, I'd be reluctant to say the least to hand over my login credentials. It could be quite cool to see this turned into a FOSS RES-style browser extension. Or maybe even a commercial product. I already paid for the HACK app.
dxxvi 1y ago
My hacker news modified with violentmonkey: https://vercel-html-example.vercel.app/hn-violentmonkeys.png https://vercel-html-example.vercel.app/hn-violentmonkeys.png 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.
- archb 1y ago
 Do you mind sharing the script?
 - dxxvi 1y ago
 // ==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">+</td> <td class="zoom">-</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 = `${arr[0]} ${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);
ozgrakkurt 1y ago
Some info explaning why it is better would be nice!
lschueller 1y ago
Please, no. Just bloating it up with additional style elements and mushing it visually is not a big win exactly
padjo 1y ago
Curious why you think it’s better? There’s a trend in software design to think “modernizing” a UI equates to make software better when on most objective measures it makes things worse, been guilty of it myself!
ssl-3 1y ago
Negative feedback, viewing on a Linux PC with Firefox: 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.
kolme 1y ago
I think it looks nice, but: - 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 ;)
silvestrov 1y ago
1) Get rid of all the margins. I'm not here to look at postcards, I'm here to read text. old.reddit is good. 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 https://imgur.com/a/uBPb2pC
- ryandrake 1y ago
  Both 1+2 are partially fixed by hitting my browser's "zoom in" function 3 to 4 times. But still there's too much whitespace. 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.
oldestofsports 1y ago
What I think is better: - 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
Gualdrapo 1y ago
Note that the HN hivemind loves crammed, almost unreadable text content, so the feedback you're getting is more than expected. 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.
hoechst 1y ago
idk how you would define "no tracking", but this is using vercel insights, a tracking tool. 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).
id00 1y ago
I still believe https://hckrnews.com/ https://hckrnews.com/ is the peak
- OnionBlender 1y ago
  Agreed. I like being able to quickly see what is new since the last I visited so that I'm not re-reading the same headlines.
jemiluv8 1y ago
The comment section not being collapsible is my main pain point. Just wished I could skim the top three most voted top level comments and then look at others. Instead I get sucked into this wilderness of a single thread and never quite easily viewing other top level threads
jemiluv8 1y ago
I have pain points but still like the way the site looks like something from the 1990’s. I’d like to keep it that way. And please write it in arc or some other lisp dialect. The last thing I want to see on this site is JavaScript.
a022311 1y ago
> More importantly, it was missing some features I considered essential for a truly viable alternative. 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.
zihotki 1y ago
Asceticism of HN is a feature, not a bug
dragonwriter 1y ago
On mobile, with typical username length, comments with even one level of indentation have the heading-line wrap, which is just one of many of the problems with the “making everything take vastly more space” layout, at least on mobile. Maybe this is exclusively intended for desktop?
sourcetms 1y ago
I've just used Algolia's view for filtering and sorting. Much nicer. https://hn.algolia.com/?dateRange=last24h&page=1&prefix=false&query=&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=last24h&page=1&prefix=fals...
AntonioEritas 1y ago
Update: Fixed a lot of issues, also based on all your feedback - Better readability and alignment - Icon toggle - Past feature - Much more under the hood to make it even more secure and faster.

38 points by AntonioEritas 1y ago

cranberryturkey 1y ago

how is this better?

DemocracyFTW2 1y ago
rounded corners!——joking, just looking for myself
- cranberryturkey 1y ago
  besides being too difficult to read..
- ssl-3 1y ago
  When Rob Malda introduced rounded corners on Slashdot over a quarter of a century ago using HTML tables and GIFs (sadly, I couldn't find a link), that sure did seem neat. But that was... over a quarter a century ago. :)

v3ss0n 1y ago

Not better at all, we don't need flashy UI, we need better content focus

bargainbin 1y ago

The headers are lost in the design amongst all the extra negative space and increased font sizes

upmostly 1y ago

For me, the only lacking feature of vanilla HN is dark mode. I wish they'd add that. Other than that, it's perfect.

ranger_danger 1y ago
Dark Reader extension does wonders for me.
- rcarmo 1y ago
  I keep pointing this out every time dark mode comes up, so don't take it personally: embedded browsers (like the ones in RSS readers) cannot use extensions, and only native dark mode support in the site itself works there. It is _extremely_ annoying to get a white flash while reading news in the night time, and I really don't get why HN doesn't have a pair of CSS lines that would fix it for everyone.
  - ranger_danger 1y ago
    The latest version of Qt WebEngine supports both userscripts and extensions. But embedded browsers could always inject their own userscript for dark mode, so I don't really see the problem.
    - rcarmo 1y ago
      You don't use iOS, do you?
      - ssl-3 1y ago
        Are you using iOS, or is iOS using you?
- exitb 1y ago
  Just tried it and it makes the vote buttons disappear (mobile Safari).

shreddit 1y ago

Way too much spacing between comments.

AntonioEritas 1y ago
Fixed!

mosselman 1y ago

I don’t think this is better. Mind you I opened this on my phone. 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

AntonioEritas 1y ago
I think I fixed a lot of issues which will make your experience a lot better. Also, creating something modern/flashy wasn't the goal. I think it looks clean and simple, with some modern readability enhancements.

kehvyn 1y ago

I like the bigger touch targets in the header for mobile, but the infinite scroll hurts me, pages introduce natural stopping points and mean the header is always nearby. (I appreciate that it's Load More instead of automatic infinite scroll, but still!)

mewpmewp2 1y ago

I prefer the existing one. What I like about existing one is how simple the titles are to read. They are strong contrast above everything else. Yours has icons that take away focus, and not as much contrast between the meta info etc. It is a bit in similar direction like Old Reddit (good) to New Reddit (terrible).

newman8r 1y ago

Not better IMO but I can appreciate the attempt. Seems messier than the real thing. The icons don't really do anything to help. Takes more time to read.

Ampned 1y ago

[dead]

factorialboy 1y ago

Good effort — I like it. Is it better or not is a subjective thing. Don't get discouraged by some of the comments posted here.

uwemaurer 1y ago

how do you like my hackernews frontend: https://news.facts.dev/ https://news.facts.dev/

thekevan 1y ago

It's more attractive, but a little less readable. I would call it different but not better.

jonplackett 1y ago

Looks nice. Need to be able to comment. That’s the whole point of HN

BoredPositron 1y ago

What's not broken is easily fixed.

InMice 1y ago

Spacing between comments is pretty wide. Gives me that feeling when they redesign a site and everything is spaced our 2x more than it was before. Some text feels too small at default zoom. 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

nabunub 1y ago

Opened it on mobile. UI looks more modern of course, but scrolling is just plain horrible.

mkl 1y ago

First impression: this is strictly worse. Way too much space between everything (even between lines in paragraphs!) means fewer stories visible on screen, and fewer comments visible. Enormous pointless spaces between comments, grey comment text is harder to read. Site links on stories don't link to site's stories. Data is out of date.

ramon156 1y ago

So what's worse/better? What did u fix? What didn't u fix? 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

deleted 1y ago

[deleted]

midenginedcoupe 1y ago

Font size is one of my biggest bugbears with HN, as well as the terrible colour contrast on downvoted posts. I scratched my itch with a custom UserScript https://github.com/mgladdish/website-customisations/tree/main/news.ycombinator.com 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.

Oarch 1y ago

I find the favicons needlessly distracting and unhelpful. I suspect we probably use different parts of the brain for processing images and text, so it's a lot of different information at once. 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).

rava-dosa 1y ago

Its really good modern, loved it. Don't get disappointed with people's comments

wltr 1y ago
It’s many times better, but the original website is so mediocre that any implementation is better at something, at least. I’m getting a good laugh reading all this ‘the original is so good’ praises. Just increase the font sizes on mobile and see how it’s broken.
- AntonioEritas 1y ago
  Yeah, that's why I created this in the first place. The original sucks and I want to use something better, which is just as fast, but better looking. The fontsize, layout, colors are really bad in the original. 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).
  - wltr 1y ago
    They simply don’t care, except for censoring the narratives they don’t like to be discussed. Plus utilising the masses when they want to advertise something to them. All in all, I’m wondering why I waste my time here. By the way, I like your implementation and use it from now on. Hope it’ll be active for some time.

davedx 1y ago

Even tinier font? Basic, basic failure.

wltr 1y ago
I can easily make it bigger, and it does not break on my smartphone as the original site.

bryanph_ 1y ago

I've fat fingered the "hide" button quite often when I was trying to hit the comments button. That's the main thing that I find slightly annoying about the default HN layout

zwaps 1y ago

Its laggy on mobile

AntonioEritas 1y ago
Fixed!

homarp 1y ago

With normal HN, on the phone I get 12 items from home page. Your version shows me 10. 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

lawgimenez 1y ago

This is better because it has dark mode. Yo Y-comb when we getting dark mode?

ubutler 1y ago

Personally, I like it. However, I like being able to comment and upvote more. At the same time, I'd be reluctant to say the least to hand over my login credentials. It could be quite cool to see this turned into a FOSS RES-style browser extension. Or maybe even a commercial product. I already paid for the HACK app.

dxxvi 1y ago

My hacker news modified with violentmonkey: https://vercel-html-example.vercel.app/hn-violentmonkeys.png https://vercel-html-example.vercel.app/hn-violentmonkeys.png 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.

archb 1y ago
Do you mind sharing the script?
- dxxvi 1y ago
 // ==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">+</td> <td class="zoom">-</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 = `${arr[0]} ${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);

ozgrakkurt 1y ago

Some info explaning why it is better would be nice!

lschueller 1y ago

Please, no. Just bloating it up with additional style elements and mushing it visually is not a big win exactly

padjo 1y ago

Curious why you think it’s better? There’s a trend in software design to think “modernizing” a UI equates to make software better when on most objective measures it makes things worse, been guilty of it myself!

ssl-3 1y ago

Negative feedback, viewing on a Linux PC with Firefox: 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.

kolme 1y ago

I think it looks nice, but: - 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 ;)

silvestrov 1y ago

1) Get rid of all the margins. I'm not here to look at postcards, I'm here to read text. old.reddit is good. 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 https://imgur.com/a/uBPb2pC

ryandrake 1y ago
Both 1+2 are partially fixed by hitting my browser's "zoom in" function 3 to 4 times. But still there's too much whitespace. 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.

oldestofsports 1y ago

What I think is better: - 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

Gualdrapo 1y ago

Note that the HN hivemind loves crammed, almost unreadable text content, so the feedback you're getting is more than expected. 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.

hoechst 1y ago

idk how you would define "no tracking", but this is using vercel insights, a tracking tool. 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).

id00 1y ago

I still believe https://hckrnews.com/ https://hckrnews.com/ is the peak

OnionBlender 1y ago
Agreed. I like being able to quickly see what is new since the last I visited so that I'm not re-reading the same headlines.

jemiluv8 1y ago

The comment section not being collapsible is my main pain point. Just wished I could skim the top three most voted top level comments and then look at others. Instead I get sucked into this wilderness of a single thread and never quite easily viewing other top level threads

jemiluv8 1y ago

I have pain points but still like the way the site looks like something from the 1990’s. I’d like to keep it that way. And please write it in arc or some other lisp dialect. The last thing I want to see on this site is JavaScript.

a022311 1y ago

> More importantly, it was missing some features I considered essential for a truly viable alternative. 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.

zihotki 1y ago

Asceticism of HN is a feature, not a bug

dragonwriter 1y ago

On mobile, with typical username length, comments with even one level of indentation have the heading-line wrap, which is just one of many of the problems with the “making everything take vastly more space” layout, at least on mobile. Maybe this is exclusively intended for desktop?

sourcetms 1y ago

I've just used Algolia's view for filtering and sorting. Much nicer. https://hn.algolia.com/?dateRange=last24h&page=1&prefix=false&query=&sort=byPopularity&type=story https://hn.algolia.com/?dateRange=last24h&page=1&prefix=fals...

AntonioEritas 1y ago

Update: Fixed a lot of issues, also based on all your feedback - Better readability and alignment - Icon toggle - Past feature - Much more under the hood to make it even more secure and faster.