6 ms·

Show HN: Read Hacker News in a Pinterest Way

113 points by valentinvieriu 11y ago

wingerlang 11y ago
Cool I guess, but it only serves to make me re-realise how much I dislike the grid layout. Edit: To be clear, it is nothing against the project itself. Only in general that it makes it hard to scan pages with layouts like this.
- yaworsk 11y ago
  I agree - I think this is a great idea and really cool to see. However, when I first went to the site, there was something off putting about it which I couldn't put my finger on. Thinking about it, I think it's the amount of eye movement required to scan the links. With HN, on a wide screen, scanning the stories to find ones I want to read only requires a limited amount of movement, mostly downward, whereas with the grid, I have to scan across the entire screen and after doing so, completing one row, I've only scanned the titles of four stories... Nonetheless, I like the innovative idea. Thanks for sharing!
thomasdd 11y ago
Cool to see how HN user comunity always shows new ways to read your favorite News Source. I think, first I noticed was http://hack.ernews.info http://hack.ernews.info It is time to make my own HN frontend! :) And this applies, for each of You! Anyway my favorite frontend/design and UI is still https://news.ycombinator.com https://news.ycombinator.com as it is fine to read and navigate 500 times per day and also offers the procrastination mode if I declare my self as addicted for compulsive HN site visiting. (Witch I should activate long ago :).
Kiro 11y ago
This is the first alternative I feel is worth using. It actually adds something to the experience. I already found some articles where the headline was not that interesting but I could see was something worth reading from the image alone. Good job!
pvdebbe 11y ago
Cool. The only thing not yet emulated is the screen blackout forcing you to login or register, but otherwise it's decent.
- svckr 11y ago
  Exactly what I was about to say, but less cynical than I would have put it. Thank you for sparing us all from my snarky remarks. OP: Don't degrade your accomplishment by comparing it to Pinterest. The super smooth scrolling makes this feel way better than Pinterest!
Tinyyy 11y ago
Kinda cool, but pretty bad on mobile.
pmoorcraft 11y ago
Nice. I own the ycombinator.news domain and was planning to do a similar thing but never got to it. If you want it, I'd be happy to give it.
- overcast 11y ago
  Put together your own side project!
- valentinvieriu 11y ago
  I agree, you should build your own. It's quite fun! I've shared the code on https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news please feel free to fork it. It's free. The hard part is the caching. I suggest using http://cloudflare.com http://cloudflare.com as a free solution
wanda 11y ago
Have to increase my list now... React.js http://hackernews.azurewebsites.net http://hackernews.azurewebsites.net React.js http://hackernewsmobile.com http://hackernewsmobile.com Vue.js http://vuejs.github.io/vue-hackernews http://vuejs.github.io/vue-hackernews jQuery http://hackerbra.in http://hackerbra.in jQuery http://hckrnews.com http://hckrnews.com Vanilla http://ihackernews.com http://ihackernews.com Ionic http://codepen.io/lamogura/pen/QbGXrg http://codepen.io/lamogura/pen/QbGXrg Angular 2 https://hswolff.github.io/hn-ng2 https://hswolff.github.io/hn-ng2
- douche 11y ago
  I like this one (another React version) http://insin.github.io/react-hn/ http://insin.github.io/react-hn/
  - wanda 11y ago
    Oh that /is/ a good one. Thanks.
  - valentinvieriu 11y ago
    This looks great! I like the Comment section. I might steal that idea
- basch 11y ago
  do any of these do anything better than http://hckrnews.com http://hckrnews.com
  - joliv 11y ago
    Some of them do something with the comments, unlike hckrnews.com which just provides a link to them. I do use hckrnews.com for my browsing though—the top 20 is very useful.
- amk_ 11y ago
  I like http://hn.premii.com http://hn.premii.com because it runs articles through the Instapaper API so you don't have to leave the site to read an article. It's also vastly faster than any of the above.
stangeek 11y ago
@wanda do you know about HN Cards on iOS? (shameless plug, but it's free so...)
- sehr 11y ago
  Try replying to them, @'s have no power here
dragansah 11y ago
Love it!
kelvin0 11y ago
I like the idea and trying new things. However, here are a few subjective points (I am not a designer!): * Somehow pinterest pictures paint a richer front page, and that works for them. The frontpages from HN do not give the same pleasing aesthetic. * What I like about the current front page is that nothing distracts me from the content (headlines). Loads quickly with minimal clutter.
overcast 11y ago
Take this as constructive criticism, rather than a complaint. But the "pinterest" layout is exhausting at this point. Too many sites use it, and it's the opposite of a good user experience in my opinion. With that said, good for you for working on new projects!
- dantillberg 11y ago
  I second this, while also upvoting the OP because I think this is pretty novel and kudos to the author for putting it together. Scrolling through pictures makes me feel like my IQ loses 20-30 points... I just want more eye candy, rather than carefully reading the text. But I imagine that's more a thing of taste and interaction style, and it's pretty neat that we can change the HN UI to suit our own desires/needs. If only the same were true for Facebook and the like!
  - overcast 11y ago
    The Pinterest layout really is for the lowest common denominator, and that's why it works for its target audience. However it just doesn't work for anything else at this point.
nmalaguti 11y ago
The only improvement I'd like to see is a way to know when I've already visited the link, i.e. purple/light gray links.
- valentinvieriu 11y ago
  I've put it on my list. Glad to see the amazing feedback. I'll make sure I will add more features in the near future.
random_rr 11y ago
FIREBASE WARNING: Specified Firebase has reached its Peak Connections limit. If you are the Firebase owner, consider upgrading. (https://visual-hacker-news.firebaseio.com https://visual-hacker-news.firebaseio.com)
- valentinvieriu 11y ago
  That's funny. The firebase database I'm using it's the public Hacker News API. Should not have this limitation
paulcole 11y ago
I think this is really cool! Great job!
Negative1 11y ago
For certain stories, much nicer to browse this way! For other's, it just doesn't make sense (a single page with heading and code... hmm). Either way, great job!
inder_gt 11y ago
Very nice
paride5745 11y ago
Technologically nice, but I really hate the Pinterest Way so I would never use a website with that kind of layout.
freddref 11y ago
Could do with a link to comments.
- GBond 11y ago
  I'd also like to see comment links. Very cool project and something I would use!
buckbova 11y ago
I really like this. I'm sure there's features missing like comments and some kind of visited indicator but I like the thumbs. Helps to give context to the headline. I'm not getting 500 stories as the description described. Is there a reason you're using the yeoman favicon? Did the generator put it there? Should mention you're using koajs, http://koajs.com/ http://koajs.com/, I'm sure folks who haven't used would like to check out your code.
- valentinvieriu 11y ago
  Thank you for the feedback. It was a weekend project, and yes I'm using a yeoman generator for the angular project. I'm using KOA just as a thin web server and also as a proxy to cache the images.
scoot 11y ago
You made it onto your own front page. Very meta!
tenkabuto 11y ago
I am glad to see that the grid of images is actually equally aligned, rather than being presented as a jumbled, unequally-aligned mess like Pinterest's grid is.
deleted 11y ago
[deleted]
- valentinvieriu 11y ago
  Interesting idea. I might look into expanding this. The whole idea with the big thumbnail was that you can quickly have a glimpse at the content before you click on the link. If you are on mobile or tablet, you can almost read half of the landing page.
w8rbt 11y ago
Neat project. I would not mind that view occasionally (perhaps as an option) but not all the time. Thanks for the link.

113 points by valentinvieriu 11y ago

Cool I guess, but it only serves to make me re-realise how much I dislike the grid layout. Edit: To be clear, it is nothing against the project itself. Only in general that it makes it hard to scan pages with layouts like this.

yaworsk 11y ago
I agree - I think this is a great idea and really cool to see. However, when I first went to the site, there was something off putting about it which I couldn't put my finger on. Thinking about it, I think it's the amount of eye movement required to scan the links. With HN, on a wide screen, scanning the stories to find ones I want to read only requires a limited amount of movement, mostly downward, whereas with the grid, I have to scan across the entire screen and after doing so, completing one row, I've only scanned the titles of four stories... Nonetheless, I like the innovative idea. Thanks for sharing!

thomasdd 11y ago

Cool to see how HN user comunity always shows new ways to read your favorite News Source. I think, first I noticed was http://hack.ernews.info http://hack.ernews.info It is time to make my own HN frontend! :) And this applies, for each of You! Anyway my favorite frontend/design and UI is still https://news.ycombinator.com https://news.ycombinator.com as it is fine to read and navigate 500 times per day and also offers the procrastination mode if I declare my self as addicted for compulsive HN site visiting. (Witch I should activate long ago :).

Kiro 11y ago

This is the first alternative I feel is worth using. It actually adds something to the experience. I already found some articles where the headline was not that interesting but I could see was something worth reading from the image alone. Good job!

pvdebbe 11y ago

Cool. The only thing not yet emulated is the screen blackout forcing you to login or register, but otherwise it's decent.

svckr 11y ago
Exactly what I was about to say, but less cynical than I would have put it. Thank you for sparing us all from my snarky remarks. OP: Don't degrade your accomplishment by comparing it to Pinterest. The super smooth scrolling makes this feel way better than Pinterest!

Tinyyy 11y ago

Kinda cool, but pretty bad on mobile.

pmoorcraft 11y ago

Nice. I own the ycombinator.news domain and was planning to do a similar thing but never got to it. If you want it, I'd be happy to give it.

overcast 11y ago
Put together your own side project!
valentinvieriu 11y ago
I agree, you should build your own. It's quite fun! I've shared the code on https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news please feel free to fork it. It's free. The hard part is the caching. I suggest using http://cloudflare.com http://cloudflare.com as a free solution

wanda 11y ago

Have to increase my list now... React.js http://hackernews.azurewebsites.net http://hackernews.azurewebsites.net React.js http://hackernewsmobile.com http://hackernewsmobile.com Vue.js http://vuejs.github.io/vue-hackernews http://vuejs.github.io/vue-hackernews jQuery http://hackerbra.in http://hackerbra.in jQuery http://hckrnews.com http://hckrnews.com Vanilla http://ihackernews.com http://ihackernews.com Ionic http://codepen.io/lamogura/pen/QbGXrg http://codepen.io/lamogura/pen/QbGXrg Angular 2 https://hswolff.github.io/hn-ng2 https://hswolff.github.io/hn-ng2

douche 11y ago
I like this one (another React version) http://insin.github.io/react-hn/ http://insin.github.io/react-hn/
- wanda 11y ago
  Oh that /is/ a good one. Thanks.
- valentinvieriu 11y ago
  This looks great! I like the Comment section. I might steal that idea
basch 11y ago
do any of these do anything better than http://hckrnews.com http://hckrnews.com
- joliv 11y ago
  Some of them do something with the comments, unlike hckrnews.com which just provides a link to them. I do use hckrnews.com for my browsing though—the top 20 is very useful.
amk_ 11y ago
I like http://hn.premii.com http://hn.premii.com because it runs articles through the Instapaper API so you don't have to leave the site to read an article. It's also vastly faster than any of the above.

stangeek 11y ago

@wanda do you know about HN Cards on iOS? (shameless plug, but it's free so...)

sehr 11y ago
Try replying to them, @'s have no power here

dragansah 11y ago

Love it!

kelvin0 11y ago

I like the idea and trying new things. However, here are a few subjective points (I am not a designer!): * Somehow pinterest pictures paint a richer front page, and that works for them. The frontpages from HN do not give the same pleasing aesthetic. * What I like about the current front page is that nothing distracts me from the content (headlines). Loads quickly with minimal clutter.

overcast 11y ago

Take this as constructive criticism, rather than a complaint. But the "pinterest" layout is exhausting at this point. Too many sites use it, and it's the opposite of a good user experience in my opinion. With that said, good for you for working on new projects!

dantillberg 11y ago
I second this, while also upvoting the OP because I think this is pretty novel and kudos to the author for putting it together. Scrolling through pictures makes me feel like my IQ loses 20-30 points... I just want more eye candy, rather than carefully reading the text. But I imagine that's more a thing of taste and interaction style, and it's pretty neat that we can change the HN UI to suit our own desires/needs. If only the same were true for Facebook and the like!
- overcast 11y ago
  The Pinterest layout really is for the lowest common denominator, and that's why it works for its target audience. However it just doesn't work for anything else at this point.

nmalaguti 11y ago

The only improvement I'd like to see is a way to know when I've already visited the link, i.e. purple/light gray links.

valentinvieriu 11y ago
I've put it on my list. Glad to see the amazing feedback. I'll make sure I will add more features in the near future.

random_rr 11y ago

FIREBASE WARNING: Specified Firebase has reached its Peak Connections limit. If you are the Firebase owner, consider upgrading. (https://visual-hacker-news.firebaseio.com https://visual-hacker-news.firebaseio.com)

valentinvieriu 11y ago
That's funny. The firebase database I'm using it's the public Hacker News API. Should not have this limitation

paulcole 11y ago

I think this is really cool! Great job!

Negative1 11y ago

For certain stories, much nicer to browse this way! For other's, it just doesn't make sense (a single page with heading and code... hmm). Either way, great job!

inder_gt 11y ago

Very nice

paride5745 11y ago

Technologically nice, but I really hate the Pinterest Way so I would never use a website with that kind of layout.

freddref 11y ago

Could do with a link to comments.

GBond 11y ago
I'd also like to see comment links. Very cool project and something I would use!

buckbova 11y ago

I really like this. I'm sure there's features missing like comments and some kind of visited indicator but I like the thumbs. Helps to give context to the headline. I'm not getting 500 stories as the description described. Is there a reason you're using the yeoman favicon? Did the generator put it there? Should mention you're using koajs, http://koajs.com/ http://koajs.com/, I'm sure folks who haven't used would like to check out your code.

valentinvieriu 11y ago
Thank you for the feedback. It was a weekend project, and yes I'm using a yeoman generator for the angular project. I'm using KOA just as a thin web server and also as a proxy to cache the images.

scoot 11y ago

You made it onto your own front page. Very meta!

tenkabuto 11y ago

I am glad to see that the grid of images is actually equally aligned, rather than being presented as a jumbled, unequally-aligned mess like Pinterest's grid is.

deleted 11y ago

[deleted]

valentinvieriu 11y ago
Interesting idea. I might look into expanding this. The whole idea with the big thumbnail was that you can quickly have a glimpse at the content before you click on the link. If you are on mobile or tablet, you can almost read half of the landing page.

w8rbt 11y ago

Neat project. I would not mind that view occasionally (perhaps as an option) but not all the time. Thanks for the link.