Show HN: HN++
hnplusplus.vercel.appI know many are happy with the HN frontend. I wrote this for fun and it turned out really useful so I published it. Here are the most important features:
- Rainbow indentation: This is inspired by the Rainbow CSV extension - comments of the same "depth" have the same colored stripe on the left.
- Native filters: Filter the various frontpages (Top, Show...) by upvote count or comment count. There is a "Controversial" (comment count > upvote count) filter too, if you want drama.
- Read later: Save comments and posts and revisit them through a bookmark menu. Saved to local storage.
- Collapsible sticky header: No need to scroll back up to see thread details and navigate to submitted link
- Infinite scroll: No pagination, you just continue scrolling.
- Styled quotes: Paragraphs starting with ">" are styled as a blockquote
- Reply as usual: You can click on Write reply and it takes you to the same page that would open in the regular HN UI
- Favicons: Helps my brain focus. Uses the DuckDuckGo favicon service + caching.
- Dark mode!
- "Open links in new tab": Especially useful on mobile. Can be toggled in the settings.
- Slightly more intuitive navigation? Atleast to me it makes more sense. Clicking a submission title, c2a button or comment count directs you to the thread. Clicking a submission link takes you to the link.
If you have any good ideas or see a bug, feel free to tell me
Infinite scroll should be outlawed.
Rainbow indentation and opening links in new tabs would be nice although I think rainbow could result in ambiguous colors?. Embedding videos could possibly get me to switch if added, but maybe not, I think the deficiencies of HN are part of what makes it work. Looks good/works good on mobile but not big on the desktop layout, I will probably try it out for abit when browsing on my phone.
Page title is "Create Next App," which is confusing on desktop where I just have tabs with their titles and not thumbnails of the page.
Good catch on the page title
Deeply nested comments become nearly unreadable. For example: https://hnplusplus.vercel.app/item/46288491
- comments are pushed all the way to the right side, in a very narrow column
- also must scroll down several screens of just colored stripes
Loading of nested comments could be sped up by using an unofficial API like https://github.com/cheeaun/node-hnapi
- This API sends all the child items of an item at once
- (However due to aggressive caching, many recent children could be missing)
I would add a max-width to the top nav, too. At 2560x1440, the top nav stretches all the way to the corners, making them hard to reach. (Also looks weird with the max-width of the content.)
Some items have over-sized favicons
- It seems to be the job posts, which all lead to 404s
Perhaps some settings to adjust the font. I find the font too small/light.
---
Here are some ideas you may consider taking from my HN frontends (they are both MIT open-source)
- Latest version: https://hn.leftium.com
- Still rendering comments from older version: https://hw.leftium.com
- Based on the HN clients I found most readable: https://hackerwebapp.com (with some ideas from https://hckrnews.com)
Mobile page down: tapping the numbers scrolls that item to the top. I find this more ergonomic than scrolling on mobile.
I reduced items down to two lines to fit more items per screen. I noticed I don't use the poster's id to to decide which items to open so I only show the poster's id on the item page itself.
Items always open comments; the posted URL can be opened from the comments page. (Personally, I always read the comments, and sometimes don't even open the original URL.)
I find highlighting the OP's id useful. I plan to also add toggle highlighting of other specific user ids.
Seeking orange: I highlight items that pass a certain points/comments threshold. First just the icon, then the number, too. Helps more interesting items stand out.
When I re-implement comments, I plan to create a view that focuses on top-level comments and reading a single "thread" at a time.
- So you can choose which conversations to read.
- There will also be a way to expand all the comments for certain users that are more interesting (like the OP).