9 ms·

Show HN: Read Hacker News Like Pinterest – Built with Vuejs

248 points by valentinvieriu 10y ago

deleted 10y ago
[deleted]
kchauhan 10y ago
Wow! I always like how people implement HN API in their own ways.
- valentinvieriu 10y ago
  Glad you like it. Feel free to use it on a daily basis
sawmurai 10y ago
Looks really nice!
- valentinvieriu 10y ago
  Thank you
rreyes1979 10y ago
Really nice!!! how are you generating the thumbnails?
- Fenaek 10y ago
  Hi, how can I contact you? (email/Twitter) Thank you!
  - valentinvieriu 10y ago
    @valentinvieriu
- valentinvieriu 10y ago
  The thumbnails are generated using phantomjs server. I'm using https://github.com/blockai/phantom-pool https://github.com/blockai/phantom-pool to make sure the phantomjs instance is reused. Also I'm using a scheduling node package (https://github.com/Automattic/kue https://github.com/Automattic/kue) to make sure that images are precached as the link are submited to hackernews. I'll post the code on https://github.com/valentinvieriu/vue-hackernews-2.0 https://github.com/valentinvieriu/vue-hackernews-2.0, but need to take care of some hardcoded redis credentials first. I'll give a reply when it's up
- Fenaek 10y ago
  Hi, I sent you a DM on twitter @rreyes1979
tag2 10y ago
I really like the concept. Great work! The auto refresh is slightly annoying for me personally but I could live with it :)
- valentinvieriu 10y ago
  Agree with this, the first version had no autorefresh. But this is quite annoying if you have this open in a tab. You get old news, and that kind of is against the purpose of the app.
  - duncanawoods 10y ago
    I guess there are two types of users - constant checkers might like auto-refresh but if you check less frequently then you want to scroll deep and for us, auto-refresh is a usability nightmare.
    - valentinvieriu 10y ago
      Agree with this. If you have a solution please let me know. For now I'm considering adding it as a setting.
      - duncanawoods 10y ago
        I'd suggest something like a toast that says "4 new stories" and you click it to refresh. It means you don't get confused by stale data but the page stays under the users control. It also allows you to flag/highlight/animate the new stories so a user can understand the diff from when they last looked at the page. This type of feature is sometimes implemented as a huge green banner stickied to the bottom of the view but that I find that too obtrusive and stress inducing - I end up clicking on them to get them out of the way even when I don't want to see the new stories so it actually makes the experience worse. I prefer a more subtle indicator in the top-right similar to how notifications appear in some apps but it shouldn't feel like an error/warning or something that requires immediate attention.
ElCapitanMarkla 10y ago
Hey this is really cool, nice work
- valentinvieriu 10y ago
  Thank you. Hope you will use this on a daily basis
sarreph 10y ago
The visual aspect is really nice, and a welcoming change.
- valentinvieriu 10y ago
  Glad you liked it!
valentinvieriu 10y ago
Hi, I'm the author of this project. The code will be available soon on github: at https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news - right now that's the old version using Angularjs The project uses as a starting point the amazing Vuejs Implementation from https://github.com/vuejs/vue-hackernews-2.0 https://github.com/vuejs/vue-hackernews-2.0 . It has super fast server side rendering, that's why the feedback is imediate as you load the page. The thumbnails are generated using phantomjs server. I'm using https://github.com/blockai/phantom-pool https://github.com/blockai/phantom-pool to make sure the phantomjs instance is reused. This improves the speed of the screenshots quite well. Also I'm using a scheduling node package (https://github.com/Automattic/kue https://github.com/Automattic/kue) to make sure that images are pre cached as the link are submited to hackernews. I'll post the code on https://github.com/valentinvieriu/vue-hackernews-2.0 https://github.com/valentinvieriu/vue-hackernews-2.0, but need to take care of some hardcoded redis credentials first. I'll give a reply when it's up Thank you for the interest! I'll do my best to reply to all questions if there is interest on this project.
- Dowwie 10y ago
  I'm finding it hard to read the title of the tiles because of the opacity of the background. I don't need such a large thumbnail, nor one that is so legible. How did you like working with Vue? Did you have javascript framework experience prior to using it?
  - valentinvieriu 10y ago
    Design can be changed. Can you tell me what would be a right proportion for you? Wider screenshot ( so higher resolution so you get more context of the page ) but less height? Actually on a retina ipad, the text is quite readable
    - Dowwie 10y ago
      You already designed it to your preference. I'm sharing mine with you. Reduce the tile size by 50%, turn opacity to 100% on the title bar and increase opacity of the tile thumbnail by 25%?
roryisok 10y ago
hah, I literally had this exact idea this morning - I was even going to use vue.js! there goes my january project =/
- valentinvieriu 10y ago
  you can contribute back to this project. Will be on github https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news
duncanawoods 10y ago
Wow - it actually made "new" look interesting to me. When I look at "new" on classic HN, the "0 point 0 comments" and expectation of low quality means I rarely click anything. This drew me into interesting articles I would not otherwise read. Great - very valuable! The title is nearly always visible on the rendered page. The overlayed title adds a lot of extra noise that is spoiling the browsing experience for me. Can you make it optional or on-hover please? I also don't want points/comment prejudicing my judgement of whether a story is worth reading. I feel the unique value this brings for "new" is to get you closer to the content "pre-click" and help you evaluate a page/story on its own merits. I still prefer classic HN for "top" where I'm interested in the discussion more than the stories. The relayout mid-scroll was really annoying. I have a refresh button, let me control it please!
- valentinvieriu 10y ago
  Thank you for the feedback. Noted down the feedback. I agree with you regarding the extra information. I will probably make it on hover. The title might be necessary, because it's not always visible in the screenshot. Regarding the refresh topic i want to have it for the people that want to keep the tab open, and always get the new news, but would be a good idea to have it optional. If you wan to contribute, you can use the https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news ( still old version there ) Thank you
  - duncanawoods 10y ago
    > The title might be necessary, because it's not always visible in the screenshot. That was my first assumption but I am now tempted to say you should fully invest in your concept. Drive a complete behaviour change from choosing stories based on the title to choosing stories based on the actual content, its design and being able to skim the first few paragraphs which lets you judge writing quality and intent more than a title. If the title isn't visible on the page, so what? It clearly wasn't important to the designer. The focus on titles is perhaps a weakness of HN, not a strength. This means you should be delighted to get rid of the title and anything else that becomes an obstruction to skimming real content presented as the designer intended.
vitomd 10y ago
Nice work. I had a similar idea, but to show just the first comment of each post, probably in the same index page or when hovering the link. I find it useful to read the first comment when the title is not very descriptive. Probably using Riot.js , or just a bookmarklet with javascript
- valentinvieriu 10y ago
  Thank you. Comments are available if you want. Just click the comments link
raffandi 10y ago
Wow, this is nice, giving a different view to HN. Perhaps 3 columns on larger viewport? Good work!
- valentinvieriu 10y ago
  it is responsive. IF it does not fit your screen try pressing [ ctr + - ]/[ mac + - ] one or two times. I don't want to rescale images, because on such long list have an impact on scrolling. That's why I've decided not to allow them to rescale.
chpmrc 10y ago
Hi, great idea! I was wondering if you have plans to save the scroll position when transitioning back from an article's comments. It can definitely become my default HN client. Edit: oh never mind, it's working now. Weird.
- valentinvieriu 10y ago
  Hehe.The bug is only for the first time. I cannot figure out why. When you are doing this second time, keeps the scroll. Actually was not a trivial issue. It's quite a hard on to do on a infinite scroll page.
wdroz 10y ago
When you see this post from your website, it's not recursive. Why ?
- valentinvieriu 10y ago
  Haha, yes I was expecting that also, but unfortunately the PhantomJS server failed to render the page correctly. ( I'm using Flexbox - and that's why)
- valentinvieriu 10y ago
  Try Refreshing NOW! :)
imakesoft 10y ago
Sweet! I just think it's too hectic. It refreshes the view too often and I lose my focus.
- valentinvieriu 10y ago
  Thank you for the feedback. Was mentioned several times. Will be addressed in a future release. Probably a flag in the settings.
cpcallen 10y ago
Cute - but totally the opposite of what I want. Can you make a site that makes Pinterest (and Facebook!) look like HN, reducing each post to a clear, informative headline, so I can quickly scan 25+ posts without having to scroll, and click through to the ones I'm actually interested in?
- valentinvieriu 10y ago
  Try the original version (https://vue-hn.now.sh/ https://vue-hn.now.sh/ ) ;)
  - bsirkia 10y ago
    Love original version! Only thing stopping me from making it my regular client is the lack of "best" menu item. I love checking out day's best or week's best if I've been to busy to keep up. Great work though.
- matt4077 10y ago
  Here's Pinterest without the pictures https://about:blank https://about:blank.
- thehooplehead 10y ago
  Agreed. I think HN is the kind of forum where a picture isn't quite worth a thousand words. With these types of articles, I'd be more interested in bulleted summaries than thumbnails. I appreciate HN for being information-dense/text-heavy.
thecupisblue 10y ago
Looks cool and works way better than Pinterest
- valentinvieriu 10y ago
  Thank you.
kristiandupont 10y ago
This is very nice. Seems more suited for Reddit, or perhaps subreddits like the many picture-centric subreddits (personal favourite: /r/outrun)
- valentinvieriu 10y ago
  Actually I was thinking on building similar projects for other websites. I think it helps a lot previewing what the landing page is about. I will look into reddit api, when I'll have the time
pjc50 10y ago
Missing the authentic Pinterest experience of giant modals popping up as soon as you scroll down, trying to force you to log in.
- valentinvieriu 10y ago
  Good one! I can add them if people request them, but i doubt :)
richardboegli 10y ago
AWESOME work. Very impressed!
burnt1ce 10y ago
Ditto.. good job!
nedsma 10y ago
Nice concept.
- valentinvieriu 10y ago
  Thank you
AndrewVos 10y ago
This is really nice, well done! One suggestion I might add is that you remove the hover effect from the image. It feels a bit inconsistent maybe? Also not 100% sure about the infinite scrolling. I spend a lot of time on half-working internet and have to refresh the page a lot. Also it means that when scrolling there's a lot of items jumping around on the page, which means you lose your place quite easily.
- valentinvieriu 10y ago
  The jumping around will be addressed. See one of the suggestions in the comments. Regarding infinite scrolling, I have a personal preference for this type of navigation. I consume those on my tablet, and feels natural just to scroll. Thank you for the feedback.
- component 10y ago
  Adding on the issue of refresh; I usually access HN on my iPhone - currently every back action triggers a _refresh_. A great example of back action handing is Reddit's mobile page. Other than that the whole thing looks really neat.
sealthedeal 10y ago
very much like!
htaunay 10y ago
Congrats, great concept and delivery! As feedback, I'm noticing that some thumbnails for specific types of urls (e.g. PDF's and Ask HN) aren't being generated correctly, and just get a solid color. Maybe a static icon representing the type of a particular url (e.g. https://tse3.mm.bing.net/th?id=OIP.Ma1c43eb41218e48366a5dc8a8970b184o0&pid=15.1 https://tse3.mm.bing.net/th?id=OIP.Ma1c43eb41218e48366a5dc8a...) would be better to look at?
- valentinvieriu 10y ago
  Yes, thank you. The pdfs are hard to screenshot. They can consume a lot of memory on load. It's planned to have an icon or something. Right now they are ignored. Thank you for the suggestion
ndirish1842 10y ago
Awesome idea/execution. One issue with HN that I constantly run into is that I might miss an interesting article because each submission (30 on each page) look so similar. Your approach (where at most 4 articles appear within my browser at once) allows me to take more time to consider whether I should read each article. Well done!!
koolba 10y ago
The is cool yet also makes me feel like the hours I spend staring at HN are just as dumb as hours spent staring at designer bags on Pinterest. Having HN appear as a wall of text just hides it really well.
donmatito 10y ago
Very good idea and execution. It is nice to be able to compare the power image-based design versus the simplicity of the text-based design
blcArmadillo 10y ago
You're missing the giant login modal that prevents you from using the site ;)
tedmiston 10y ago
This is pretty cool. The realtime refresh is a nice touch. It would be helpful to link back to the stories on HN so one can comment. Added to my list of HN clients: https://pinboard.in/u:tedmiston/t:hacker-news/ https://pinboard.in/u:tedmiston/t:hacker-news/
danenania 10y ago
This is really nice. A minor suggestion: I think you might as well thumbnail Ask HN/Tell HN/any other pure text posts too. This would look better than the big blank squares for those, and work well as a preview.
- jw989 10y ago
  I agree with this. Other than this it's a great project, nice work!
ezekg 10y ago
Am I the only one getting a 503 response on all of the assets?
- fokinsean 10y ago
  I am too.
- valentinvieriu 10y ago
  I guess that the server went to sleep for a while. It runs on a free heroku tier. I'm planning on moving it on Digital Ocean, but waiting for things to cool down a little :)
deleted 10y ago
[deleted]
brilliantcode 10y ago
The more I am studying React + Redux, the more it becomes apparent to me that it's over engineered for an individual and even a small team. It feels like the Java Swing days where verbosity and architectural opinion dominates all in the name of cross-platformity. Another minus is that you no longer use the existing conventions that stood the test of time, HTML and CSS. It's now JSX and you have to write boilerplate JS code just to show a simple hello world example. On top of that it poses barriers for designers who only had to worry about how the HTML/CSS looks, now additional work has to go into splitting everything into myriad logical pieces which really have no impact on the overall productivity or quality. And that's only for the React view side, the real beast is Redux. That simple grid table you could get away with using jqGrid is now a 10 week job involving multiple engineers. I'm curious to know if anyone found any enlightment working with Vue.js and whether something like Redux makes sense to hold states of the app or if they got away with it.
- duderific 10y ago
  React/Redux solves a specific problem: managing state and DOM rendering in a complex single page app. If you don't have that specific problem, you probably shouldn't use that combination of technologies. If you do, you can use React/Redux or any of the other technologies out there (Angular, Vue etc.).
- greenspot 10y ago
  Getting into React is kind of mixed bag. The core concepts are easy to understand and compared to other frameworks lean. JSX is easy, components are trivial but once you try to get productive, wow, it's not that simple anymore. It's more than a bit of HTML embedded in JS. So, you need really to spend time to understand the core of React very, very well. And this takes time, effort and at least a couple of real and serious apps you should write to understand why React and its concept are the next step in FE dev and why others use React's concept as blueprint (e.g. Inferno). Tutorials are not enough, real projects are the best way to grok React. I don't think it's like Java Swing, not at all (I think the comparison is misleading since React is from the ground very different, e.g. totally different design patterns/paradigms, .g. no observer pattern, and a super minimal API). It's a tool which is super flexible. It's definitely not your daddy's jQuery-based front-end framework which let you start quickly. But once you get more experienced with React you face much better code maintainability with a small code base already. Further, you should be good at JS and ES6. I guess this might be another obstacle for many. Compared to Vue which I like a lot and which shares also some similarities, Vue is more complex due to a large API surface, code-in-HTML templating syntax, nested instance semantics, observable gotchas, ES5 workarounds and a larger documentation that is absolutely vital to read and understand. Give React a try. You need of course a real use case. Many website's use cases don't require React and could be done with some simple server-side rendering. So, React is def not the best tool of every job. I was ignoring React too long by just using it for some toy projects or going through tutorials. This was not enough. Once I tried React for a real project, I learned its brilliance and I don't want to go back to anything else for SPAs or websites with more interactivity.
enraged_camel 10y ago
One really nice thing about this is that the screenshots are built-in defense against the editorialization of the submission title.
harisamin 10y ago
Nice job! Love seeing ppl trying to build a better way to read Hacker News content. I built this to scratch my own itch http://mackernews.com http://mackernews.com I wanted a Mac HN client (you can up vote and post too :) ). I really wish HN gave us better apis to work with :(
wellwhatever 10y ago
this is beautiful
yumaikas 10y ago
Providing a link to the comments on hackernews itself would be kind of nice for being able to upvote stories and the like. There are a lot of these in the new sections that I'd like to be able to upvote/downvote without having to navigate to them in HN and such.
- valentinvieriu 10y ago
  It is on top of my todo list. One bad thing with all those readers on top of the api, is that it makes it easy to read, but does not give the opportunity to rate and by this attacks the foundation of the quality of the articles on the list. I wish that there was a way to do SSO and then have the complete voting experience on your app. But then again, what would be the purpose of the original hacker news website then?
wilshiredetroit 10y ago
I'm Loving this! I had stepped away from my desk and a new set of links are there... I almost want to say its like a "Screensaver of Links"
MrAwesomeSauce 10y ago
This really is amazing. Probably one of the best clients that's out there at the moment. I recently built a one myself with Angular (https://github.com/hdjirdeh/angular2-hn https://github.com/hdjirdeh/angular2-hn) so I'm always amazed with all the different clients out there with their own unique twist. I've always been interested in using Vue, how do you like the framework? Also, which Hacker News API are you using to power this? I'm on mobile so I can't see any of the requests at the moment. But since this is SSR, I probably wouldn't be able to see the API calls anyway.
ericbrow 10y ago
This is really awesome. This is now my default HN portal. Thank you.

248 points by valentinvieriu 10y ago

deleted 10y ago

[deleted]

kchauhan 10y ago

Wow! I always like how people implement HN API in their own ways.

valentinvieriu 10y ago
Glad you like it. Feel free to use it on a daily basis

sawmurai 10y ago

Looks really nice!

valentinvieriu 10y ago
Thank you

rreyes1979 10y ago

Really nice!!! how are you generating the thumbnails?

Fenaek 10y ago
Hi, how can I contact you? (email/Twitter) Thank you!
- valentinvieriu 10y ago
  @valentinvieriu
valentinvieriu 10y ago
The thumbnails are generated using phantomjs server. I'm using https://github.com/blockai/phantom-pool https://github.com/blockai/phantom-pool to make sure the phantomjs instance is reused. Also I'm using a scheduling node package (https://github.com/Automattic/kue https://github.com/Automattic/kue) to make sure that images are precached as the link are submited to hackernews. I'll post the code on https://github.com/valentinvieriu/vue-hackernews-2.0 https://github.com/valentinvieriu/vue-hackernews-2.0, but need to take care of some hardcoded redis credentials first. I'll give a reply when it's up
Fenaek 10y ago
Hi, I sent you a DM on twitter @rreyes1979

tag2 10y ago

I really like the concept. Great work! The auto refresh is slightly annoying for me personally but I could live with it :)

valentinvieriu 10y ago
Agree with this, the first version had no autorefresh. But this is quite annoying if you have this open in a tab. You get old news, and that kind of is against the purpose of the app.
- duncanawoods 10y ago
  I guess there are two types of users - constant checkers might like auto-refresh but if you check less frequently then you want to scroll deep and for us, auto-refresh is a usability nightmare.
  - valentinvieriu 10y ago
    Agree with this. If you have a solution please let me know. For now I'm considering adding it as a setting.
    - duncanawoods 10y ago
      I'd suggest something like a toast that says "4 new stories" and you click it to refresh. It means you don't get confused by stale data but the page stays under the users control. It also allows you to flag/highlight/animate the new stories so a user can understand the diff from when they last looked at the page. This type of feature is sometimes implemented as a huge green banner stickied to the bottom of the view but that I find that too obtrusive and stress inducing - I end up clicking on them to get them out of the way even when I don't want to see the new stories so it actually makes the experience worse. I prefer a more subtle indicator in the top-right similar to how notifications appear in some apps but it shouldn't feel like an error/warning or something that requires immediate attention.

ElCapitanMarkla 10y ago

Hey this is really cool, nice work

valentinvieriu 10y ago
Thank you. Hope you will use this on a daily basis

sarreph 10y ago

The visual aspect is really nice, and a welcoming change.

valentinvieriu 10y ago
Glad you liked it!

valentinvieriu 10y ago

Hi, I'm the author of this project. The code will be available soon on github: at https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news - right now that's the old version using Angularjs The project uses as a starting point the amazing Vuejs Implementation from https://github.com/vuejs/vue-hackernews-2.0 https://github.com/vuejs/vue-hackernews-2.0 . It has super fast server side rendering, that's why the feedback is imediate as you load the page. The thumbnails are generated using phantomjs server. I'm using https://github.com/blockai/phantom-pool https://github.com/blockai/phantom-pool to make sure the phantomjs instance is reused. This improves the speed of the screenshots quite well. Also I'm using a scheduling node package (https://github.com/Automattic/kue https://github.com/Automattic/kue) to make sure that images are pre cached as the link are submited to hackernews. I'll post the code on https://github.com/valentinvieriu/vue-hackernews-2.0 https://github.com/valentinvieriu/vue-hackernews-2.0, but need to take care of some hardcoded redis credentials first. I'll give a reply when it's up Thank you for the interest! I'll do my best to reply to all questions if there is interest on this project.

Dowwie 10y ago
I'm finding it hard to read the title of the tiles because of the opacity of the background. I don't need such a large thumbnail, nor one that is so legible. How did you like working with Vue? Did you have javascript framework experience prior to using it?
- valentinvieriu 10y ago
  Design can be changed. Can you tell me what would be a right proportion for you? Wider screenshot ( so higher resolution so you get more context of the page ) but less height? Actually on a retina ipad, the text is quite readable
  - Dowwie 10y ago
    You already designed it to your preference. I'm sharing mine with you. Reduce the tile size by 50%, turn opacity to 100% on the title bar and increase opacity of the tile thumbnail by 25%?

roryisok 10y ago

hah, I literally had this exact idea this morning - I was even going to use vue.js! there goes my january project =/

valentinvieriu 10y ago
you can contribute back to this project. Will be on github https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news

duncanawoods 10y ago

Wow - it actually made "new" look interesting to me. When I look at "new" on classic HN, the "0 point 0 comments" and expectation of low quality means I rarely click anything. This drew me into interesting articles I would not otherwise read. Great - very valuable! The title is nearly always visible on the rendered page. The overlayed title adds a lot of extra noise that is spoiling the browsing experience for me. Can you make it optional or on-hover please? I also don't want points/comment prejudicing my judgement of whether a story is worth reading. I feel the unique value this brings for "new" is to get you closer to the content "pre-click" and help you evaluate a page/story on its own merits. I still prefer classic HN for "top" where I'm interested in the discussion more than the stories. The relayout mid-scroll was really annoying. I have a refresh button, let me control it please!

valentinvieriu 10y ago
Thank you for the feedback. Noted down the feedback. I agree with you regarding the extra information. I will probably make it on hover. The title might be necessary, because it's not always visible in the screenshot. Regarding the refresh topic i want to have it for the people that want to keep the tab open, and always get the new news, but would be a good idea to have it optional. If you wan to contribute, you can use the https://github.com/valentinvieriu/visual-hacker-news https://github.com/valentinvieriu/visual-hacker-news ( still old version there ) Thank you
- duncanawoods 10y ago
  > The title might be necessary, because it's not always visible in the screenshot. That was my first assumption but I am now tempted to say you should fully invest in your concept. Drive a complete behaviour change from choosing stories based on the title to choosing stories based on the actual content, its design and being able to skim the first few paragraphs which lets you judge writing quality and intent more than a title. If the title isn't visible on the page, so what? It clearly wasn't important to the designer. The focus on titles is perhaps a weakness of HN, not a strength. This means you should be delighted to get rid of the title and anything else that becomes an obstruction to skimming real content presented as the designer intended.

vitomd 10y ago

Nice work. I had a similar idea, but to show just the first comment of each post, probably in the same index page or when hovering the link. I find it useful to read the first comment when the title is not very descriptive. Probably using Riot.js , or just a bookmarklet with javascript

valentinvieriu 10y ago
Thank you. Comments are available if you want. Just click the comments link

raffandi 10y ago

Wow, this is nice, giving a different view to HN. Perhaps 3 columns on larger viewport? Good work!

valentinvieriu 10y ago
it is responsive. IF it does not fit your screen try pressing [ ctr + - ]/[ mac + - ] one or two times. I don't want to rescale images, because on such long list have an impact on scrolling. That's why I've decided not to allow them to rescale.

chpmrc 10y ago

Hi, great idea! I was wondering if you have plans to save the scroll position when transitioning back from an article's comments. It can definitely become my default HN client. Edit: oh never mind, it's working now. Weird.

valentinvieriu 10y ago
Hehe.The bug is only for the first time. I cannot figure out why. When you are doing this second time, keeps the scroll. Actually was not a trivial issue. It's quite a hard on to do on a infinite scroll page.

wdroz 10y ago

When you see this post from your website, it's not recursive. Why ?

valentinvieriu 10y ago
Haha, yes I was expecting that also, but unfortunately the PhantomJS server failed to render the page correctly. ( I'm using Flexbox - and that's why)
valentinvieriu 10y ago
Try Refreshing NOW! :)

imakesoft 10y ago

Sweet! I just think it's too hectic. It refreshes the view too often and I lose my focus.

valentinvieriu 10y ago
Thank you for the feedback. Was mentioned several times. Will be addressed in a future release. Probably a flag in the settings.

cpcallen 10y ago

Cute - but totally the opposite of what I want. Can you make a site that makes Pinterest (and Facebook!) look like HN, reducing each post to a clear, informative headline, so I can quickly scan 25+ posts without having to scroll, and click through to the ones I'm actually interested in?

valentinvieriu 10y ago
Try the original version (https://vue-hn.now.sh/ https://vue-hn.now.sh/ ) ;)
- bsirkia 10y ago
  Love original version! Only thing stopping me from making it my regular client is the lack of "best" menu item. I love checking out day's best or week's best if I've been to busy to keep up. Great work though.
matt4077 10y ago
Here's Pinterest without the pictures https://about:blank https://about:blank.
thehooplehead 10y ago
Agreed. I think HN is the kind of forum where a picture isn't quite worth a thousand words. With these types of articles, I'd be more interested in bulleted summaries than thumbnails. I appreciate HN for being information-dense/text-heavy.

thecupisblue 10y ago

Looks cool and works way better than Pinterest

valentinvieriu 10y ago
Thank you.

kristiandupont 10y ago

This is very nice. Seems more suited for Reddit, or perhaps subreddits like the many picture-centric subreddits (personal favourite: /r/outrun)

valentinvieriu 10y ago
Actually I was thinking on building similar projects for other websites. I think it helps a lot previewing what the landing page is about. I will look into reddit api, when I'll have the time

pjc50 10y ago

Missing the authentic Pinterest experience of giant modals popping up as soon as you scroll down, trying to force you to log in.

valentinvieriu 10y ago
Good one! I can add them if people request them, but i doubt :)

richardboegli 10y ago

AWESOME work. Very impressed!

burnt1ce 10y ago

Ditto.. good job!

nedsma 10y ago

Nice concept.

valentinvieriu 10y ago
Thank you

AndrewVos 10y ago

This is really nice, well done! One suggestion I might add is that you remove the hover effect from the image. It feels a bit inconsistent maybe? Also not 100% sure about the infinite scrolling. I spend a lot of time on half-working internet and have to refresh the page a lot. Also it means that when scrolling there's a lot of items jumping around on the page, which means you lose your place quite easily.

valentinvieriu 10y ago
The jumping around will be addressed. See one of the suggestions in the comments. Regarding infinite scrolling, I have a personal preference for this type of navigation. I consume those on my tablet, and feels natural just to scroll. Thank you for the feedback.
component 10y ago
Adding on the issue of refresh; I usually access HN on my iPhone - currently every back action triggers a _refresh_. A great example of back action handing is Reddit's mobile page. Other than that the whole thing looks really neat.

sealthedeal 10y ago

very much like!

htaunay 10y ago

Congrats, great concept and delivery! As feedback, I'm noticing that some thumbnails for specific types of urls (e.g. PDF's and Ask HN) aren't being generated correctly, and just get a solid color. Maybe a static icon representing the type of a particular url (e.g. https://tse3.mm.bing.net/th?id=OIP.Ma1c43eb41218e48366a5dc8a8970b184o0&pid=15.1 https://tse3.mm.bing.net/th?id=OIP.Ma1c43eb41218e48366a5dc8a...) would be better to look at?

valentinvieriu 10y ago
Yes, thank you. The pdfs are hard to screenshot. They can consume a lot of memory on load. It's planned to have an icon or something. Right now they are ignored. Thank you for the suggestion

ndirish1842 10y ago

Awesome idea/execution. One issue with HN that I constantly run into is that I might miss an interesting article because each submission (30 on each page) look so similar. Your approach (where at most 4 articles appear within my browser at once) allows me to take more time to consider whether I should read each article. Well done!!

koolba 10y ago

The is cool yet also makes me feel like the hours I spend staring at HN are just as dumb as hours spent staring at designer bags on Pinterest. Having HN appear as a wall of text just hides it really well.

donmatito 10y ago

Very good idea and execution. It is nice to be able to compare the power image-based design versus the simplicity of the text-based design

blcArmadillo 10y ago

You're missing the giant login modal that prevents you from using the site ;)

tedmiston 10y ago

This is pretty cool. The realtime refresh is a nice touch. It would be helpful to link back to the stories on HN so one can comment. Added to my list of HN clients: https://pinboard.in/u:tedmiston/t:hacker-news/ https://pinboard.in/u:tedmiston/t:hacker-news/

danenania 10y ago

This is really nice. A minor suggestion: I think you might as well thumbnail Ask HN/Tell HN/any other pure text posts too. This would look better than the big blank squares for those, and work well as a preview.

jw989 10y ago
I agree with this. Other than this it's a great project, nice work!

ezekg 10y ago

Am I the only one getting a 503 response on all of the assets?

fokinsean 10y ago
I am too.
valentinvieriu 10y ago
I guess that the server went to sleep for a while. It runs on a free heroku tier. I'm planning on moving it on Digital Ocean, but waiting for things to cool down a little :)

deleted 10y ago

[deleted]

brilliantcode 10y ago

The more I am studying React + Redux, the more it becomes apparent to me that it's over engineered for an individual and even a small team. It feels like the Java Swing days where verbosity and architectural opinion dominates all in the name of cross-platformity. Another minus is that you no longer use the existing conventions that stood the test of time, HTML and CSS. It's now JSX and you have to write boilerplate JS code just to show a simple hello world example. On top of that it poses barriers for designers who only had to worry about how the HTML/CSS looks, now additional work has to go into splitting everything into myriad logical pieces which really have no impact on the overall productivity or quality. And that's only for the React view side, the real beast is Redux. That simple grid table you could get away with using jqGrid is now a 10 week job involving multiple engineers. I'm curious to know if anyone found any enlightment working with Vue.js and whether something like Redux makes sense to hold states of the app or if they got away with it.

duderific 10y ago
React/Redux solves a specific problem: managing state and DOM rendering in a complex single page app. If you don't have that specific problem, you probably shouldn't use that combination of technologies. If you do, you can use React/Redux or any of the other technologies out there (Angular, Vue etc.).
greenspot 10y ago
Getting into React is kind of mixed bag. The core concepts are easy to understand and compared to other frameworks lean. JSX is easy, components are trivial but once you try to get productive, wow, it's not that simple anymore. It's more than a bit of HTML embedded in JS. So, you need really to spend time to understand the core of React very, very well. And this takes time, effort and at least a couple of real and serious apps you should write to understand why React and its concept are the next step in FE dev and why others use React's concept as blueprint (e.g. Inferno). Tutorials are not enough, real projects are the best way to grok React. I don't think it's like Java Swing, not at all (I think the comparison is misleading since React is from the ground very different, e.g. totally different design patterns/paradigms, .g. no observer pattern, and a super minimal API). It's a tool which is super flexible. It's definitely not your daddy's jQuery-based front-end framework which let you start quickly. But once you get more experienced with React you face much better code maintainability with a small code base already. Further, you should be good at JS and ES6. I guess this might be another obstacle for many. Compared to Vue which I like a lot and which shares also some similarities, Vue is more complex due to a large API surface, code-in-HTML templating syntax, nested instance semantics, observable gotchas, ES5 workarounds and a larger documentation that is absolutely vital to read and understand. Give React a try. You need of course a real use case. Many website's use cases don't require React and could be done with some simple server-side rendering. So, React is def not the best tool of every job. I was ignoring React too long by just using it for some toy projects or going through tutorials. This was not enough. Once I tried React for a real project, I learned its brilliance and I don't want to go back to anything else for SPAs or websites with more interactivity.

enraged_camel 10y ago

One really nice thing about this is that the screenshots are built-in defense against the editorialization of the submission title.

harisamin 10y ago

Nice job! Love seeing ppl trying to build a better way to read Hacker News content. I built this to scratch my own itch http://mackernews.com http://mackernews.com I wanted a Mac HN client (you can up vote and post too :) ). I really wish HN gave us better apis to work with :(

wellwhatever 10y ago

this is beautiful

yumaikas 10y ago

Providing a link to the comments on hackernews itself would be kind of nice for being able to upvote stories and the like. There are a lot of these in the new sections that I'd like to be able to upvote/downvote without having to navigate to them in HN and such.

valentinvieriu 10y ago
It is on top of my todo list. One bad thing with all those readers on top of the api, is that it makes it easy to read, but does not give the opportunity to rate and by this attacks the foundation of the quality of the articles on the list. I wish that there was a way to do SSO and then have the complete voting experience on your app. But then again, what would be the purpose of the original hacker news website then?

wilshiredetroit 10y ago

I'm Loving this! I had stepped away from my desk and a new set of links are there... I almost want to say its like a "Screensaver of Links"

MrAwesomeSauce 10y ago

This really is amazing. Probably one of the best clients that's out there at the moment. I recently built a one myself with Angular (https://github.com/hdjirdeh/angular2-hn https://github.com/hdjirdeh/angular2-hn) so I'm always amazed with all the different clients out there with their own unique twist. I've always been interested in using Vue, how do you like the framework? Also, which Hacker News API are you using to power this? I'm on mobile so I can't see any of the requests at the moment. But since this is SSR, I probably wouldn't be able to see the API calls anyway.

ericbrow 10y ago

This is really awesome. This is now my default HN portal. Thank you.