4 ms·

Show HN: A clean alternative Hacker News interface

11 points by memorable 5y ago

This is a clean Hacker News interface that I called `Lipu`. Repo: https://github.com/HoangTuan110/lipu https://github.com/HoangTuan110/lipu

hsblhsn 5y ago
I have been trying to do the same thing. You can see my try at https://hn.hsblhsn.me/ https://hn.hsblhsn.me/
- timoteostewart 5y ago
  Very cool! I like the teaser of each link's textual content that you offer from the digest view. And pulling in the og:image is also a nice touch, IMO. And all in Go!
bckr 5y ago
This sucks to say, but I don't like it very much. It lacks contrast and lacks space between lines. Additionally, clicking on the comments just brings me back to HN. Good job putting something out there.
- senectus1 5y ago
  yeah I'm not a fan of that over the normal one either. but having said that I normally only ever access HN articles via RSS anyway, So I never would see either.
jkmcdonald 5y ago
I don't think so.... my first thought was "this is too cluttered"
Minor49er 5y ago
Each page makes a request that returns a list of IDs which appears to then be used to make individual requests for each news story. So each pageload makes dozens of requests. Couldn't that information just be provided in the first request? Also, the layout is a little too minimal. It's harder to scan headlines than it is on Hacker News. Even just a small amount of spacing between the items would work wonders here. Overall, I'm not totally sold on this being a clean alternative to Hacker News (which is tough to beat since you really can't get much cleaner than HN to begin with), but I think you could significantly improve the experience without having to change too much.
ICodeSometimes 5y ago
I can see the inspiration here but the execution could be more refined i think. Great job putting something into the wild though!
timoteostewart 5y ago
Nice job, Tuan! Having written an HN interface myself, my hat off to you for seeing it through and sharing it. Building on Minor49er's comment about requests, a nice feature in your next iteration of Lipu might be to cache some or all of the details of the submission on your server side. Three benefits from doing that are: (1) you can choose how often you query firebaseio for fresh data to avoid hammering their server, (2) your UX latency isn't so dependent on network traffic, and (3) you can reuse the submission details (i.e., provide a speedy response to user) when the user switches from one category (e.g., top, new, ask, show) to another and the same story happens to be present in both categories. For other HN readers, Tuan has a brief dev blog of sorts about developing Lipu: https://tsk.bearblog.dev/journal-lipu/ https://tsk.bearblog.dev/journal-lipu/ . (Not too bad for a 14-year-old!)
- bckr 5y ago
  Nice find. This is a great devlog (and I like the theme on this). Bright future ahead
sundarurfriend 5y ago
Just a blank page when Javascript is disabled. Which is fine (though a small noscript message would make things clearer), just letting you know in case it's a use case you just didn't consider, rather than decide not to support.
unnouinceput 5y ago
Nope, not even close. Lipu takes 3 seconds to load all threads, while HN original is instant. Plus that white it burns. I like light themes instead of dark, but not pure white. HN's light grey is perfect.
- scim-knox-twox 5y ago
  And Lipu doesn't work without JS...
brailsafe 5y ago
Hacker News may not be very pretty, but it gets a lot of things right typographically, by not trying very hard. I think this might be a good opportunity to play around with learning to improve your layout and type skills a bit. In particular, I don't think that slab serif typeface with dangling descenders is a good choice for what is a list of a few closely grouped lines of text, as opposed to something like the paragraph typeface HN uses for the body of comments. Likewise, those grouped lines of text need much more room to breath. It's amazing how much work or experience it can take to make a even a link list readable and usable.
- memorable 5y ago
  Thank you for your comments! I actually borrow the Zilla Slab[0] font from Mozilla Foundation website[1] just because I thought it looks pretty good. I don't realized how much it is a problem to everyone (It seems like typography and links are common problems of my interface). I will need to find a more appropriate font to use for this case then. [0]https://fonts.google.com/specimen/Zilla+Slab https://fonts.google.com/specimen/Zilla+Slab [1]: https://foundation.mozilla.org/en/ https://foundation.mozilla.org/en/
  - brailsafe 5y ago
    Slab Serifs can be really nice, but they can also be too decorative for a lot of dense text. Slabs, much like Didot, really need to use negative space effectively, along with a great body text pairing, to work well imo
squarefoot 5y ago
I find it really hard to read. The white background for starters, but also the lack of indentation which makes it hard to pick one post from the others. Colors too look wrong to me, plus alternating between them makes things even less readable; look at how the HN page makes it so easy to look at the post title by placing it just right of the post number (with the lower line indented for more convenience) and uses black to make it immediately recognizable.
rkagerer 5y ago
Strongly prefer the original HN.
posix86 5y ago
Hmm. I always considered HN to be one of the cleanest sites that displays dense info. Props for going through with the project though! I'm sure you learned a lot of useful things. If you want some feedback: I'm hvaing a hard time distinguishing one post from another. Maybe changing the color of the author & comments links could change that? Maybe add some spacing, so that the title & metadata is grouped together? This id already starting to approach native HN though. :)
EricMausler 5y ago
I dont know much front end, but does it really make sense that a style wrapper is only 5% CSS code? Is CSS mostly deprecated now in favor of js libs?
iKlsR 5y ago
A decent attempt but like others have said it's a bit cramped so just giving the text some breathing room would be a big improvement to your current copy. For anyone else by far the cleanest, functional hn implementation is https://hckrnews.com https://hckrnews.com
asmr 5y ago
The interface is a little hard to look at and things feel squished together, and it also doesn't offer anything beyond the default page. I've been browsing HN using hckr news for years now, it sorts submissions by time and has a really great UI/UX. https://hckrnews.com/ https://hckrnews.com/

11 points by memorable 5y ago

This is a clean Hacker News interface that I called `Lipu`. Repo: https://github.com/HoangTuan110/lipu https://github.com/HoangTuan110/lipu

hsblhsn 5y ago

I have been trying to do the same thing. You can see my try at https://hn.hsblhsn.me/ https://hn.hsblhsn.me/

timoteostewart 5y ago
Very cool! I like the teaser of each link's textual content that you offer from the digest view. And pulling in the og:image is also a nice touch, IMO. And all in Go!

bckr 5y ago

This sucks to say, but I don't like it very much. It lacks contrast and lacks space between lines. Additionally, clicking on the comments just brings me back to HN. Good job putting something out there.

senectus1 5y ago
yeah I'm not a fan of that over the normal one either. but having said that I normally only ever access HN articles via RSS anyway, So I never would see either.

jkmcdonald 5y ago

I don't think so.... my first thought was "this is too cluttered"

Minor49er 5y ago

Each page makes a request that returns a list of IDs which appears to then be used to make individual requests for each news story. So each pageload makes dozens of requests. Couldn't that information just be provided in the first request? Also, the layout is a little too minimal. It's harder to scan headlines than it is on Hacker News. Even just a small amount of spacing between the items would work wonders here. Overall, I'm not totally sold on this being a clean alternative to Hacker News (which is tough to beat since you really can't get much cleaner than HN to begin with), but I think you could significantly improve the experience without having to change too much.

ICodeSometimes 5y ago

I can see the inspiration here but the execution could be more refined i think. Great job putting something into the wild though!

timoteostewart 5y ago

Nice job, Tuan! Having written an HN interface myself, my hat off to you for seeing it through and sharing it. Building on Minor49er's comment about requests, a nice feature in your next iteration of Lipu might be to cache some or all of the details of the submission on your server side. Three benefits from doing that are: (1) you can choose how often you query firebaseio for fresh data to avoid hammering their server, (2) your UX latency isn't so dependent on network traffic, and (3) you can reuse the submission details (i.e., provide a speedy response to user) when the user switches from one category (e.g., top, new, ask, show) to another and the same story happens to be present in both categories. For other HN readers, Tuan has a brief dev blog of sorts about developing Lipu: https://tsk.bearblog.dev/journal-lipu/ https://tsk.bearblog.dev/journal-lipu/ . (Not too bad for a 14-year-old!)

bckr 5y ago
Nice find. This is a great devlog (and I like the theme on this). Bright future ahead

sundarurfriend 5y ago

Just a blank page when Javascript is disabled. Which is fine (though a small noscript message would make things clearer), just letting you know in case it's a use case you just didn't consider, rather than decide not to support.

unnouinceput 5y ago

Nope, not even close. Lipu takes 3 seconds to load all threads, while HN original is instant. Plus that white it burns. I like light themes instead of dark, but not pure white. HN's light grey is perfect.

scim-knox-twox 5y ago
And Lipu doesn't work without JS...

brailsafe 5y ago

Hacker News may not be very pretty, but it gets a lot of things right typographically, by not trying very hard. I think this might be a good opportunity to play around with learning to improve your layout and type skills a bit. In particular, I don't think that slab serif typeface with dangling descenders is a good choice for what is a list of a few closely grouped lines of text, as opposed to something like the paragraph typeface HN uses for the body of comments. Likewise, those grouped lines of text need much more room to breath. It's amazing how much work or experience it can take to make a even a link list readable and usable.

memorable 5y ago
Thank you for your comments! I actually borrow the Zilla Slab[0] font from Mozilla Foundation website[1] just because I thought it looks pretty good. I don't realized how much it is a problem to everyone (It seems like typography and links are common problems of my interface). I will need to find a more appropriate font to use for this case then. [0]https://fonts.google.com/specimen/Zilla+Slab https://fonts.google.com/specimen/Zilla+Slab [1]: https://foundation.mozilla.org/en/ https://foundation.mozilla.org/en/
- brailsafe 5y ago
  Slab Serifs can be really nice, but they can also be too decorative for a lot of dense text. Slabs, much like Didot, really need to use negative space effectively, along with a great body text pairing, to work well imo

squarefoot 5y ago

I find it really hard to read. The white background for starters, but also the lack of indentation which makes it hard to pick one post from the others. Colors too look wrong to me, plus alternating between them makes things even less readable; look at how the HN page makes it so easy to look at the post title by placing it just right of the post number (with the lower line indented for more convenience) and uses black to make it immediately recognizable.

rkagerer 5y ago

Strongly prefer the original HN.

posix86 5y ago

Hmm. I always considered HN to be one of the cleanest sites that displays dense info. Props for going through with the project though! I'm sure you learned a lot of useful things. If you want some feedback: I'm hvaing a hard time distinguishing one post from another. Maybe changing the color of the author & comments links could change that? Maybe add some spacing, so that the title & metadata is grouped together? This id already starting to approach native HN though. :)

EricMausler 5y ago

I dont know much front end, but does it really make sense that a style wrapper is only 5% CSS code? Is CSS mostly deprecated now in favor of js libs?

iKlsR 5y ago

A decent attempt but like others have said it's a bit cramped so just giving the text some breathing room would be a big improvement to your current copy. For anyone else by far the cleanest, functional hn implementation is https://hckrnews.com https://hckrnews.com

asmr 5y ago

The interface is a little hard to look at and things feel squished together, and it also doesn't offer anything beyond the default page. I've been browsing HN using hckr news for years now, it sorts submissions by time and has a really great UI/UX. https://hckrnews.com/ https://hckrnews.com/