Show HN: HN++

Show HN: HN++(hnplusplus.vercel.app)

3 points by 7moritz7 152 days ago | 3 comments

I 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

ofalkaed 152 days ago |

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.

7moritz7 152 days ago | |

Good catch on the page title

Leftium 151 days ago |

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).