
Show HN: Read Hacker News Like Pinterest – Built with Vuejs - valentinvieriu
https://hnews.xyz/new
======
valentinvieriu
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.

~~~
cvrajeesh
May be you should consider rejecting random urls from your thumbnail
generation endpoint. Now I could generate thumbnail of any website e.g. my
blog
[https://hnews.xyz/thumbnail/?url=http://rajeeshcv.com](https://hnews.xyz/thumbnail/?url=http://rajeeshcv.com)

~~~
valentinvieriu
It's a hard one to do.I agree you can do that now. I'm thinking on a solution,
but it's not really easy. Right now I have no solution.

~~~
striking
Do what [https://hackernewsfilter.com/](https://hackernewsfilter.com/) does,
use a Bloom filter. It's simple enough.

~~~
valentinvieriu
Thank you for this idea. This seems like a quite friendly one. So you are
using the Firebase API, and each time a website is added you add i to the
Bloom filter? This seems it will work for my website, but then the screenshot
api can be use only if you previously pushed that url in the bloom filter

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

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

~~~
greenspot
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.

~~~
brilliantcode
what about redux? can you do away with Redux and if so what do people use
instead?

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

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

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

------
cpcallen
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
Try the original version ([https://vue-hn.now.sh/](https://vue-hn.now.sh/) )
;)

~~~
bsirkia
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.

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

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

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

~~~
valentinvieriu
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 :)

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

~~~
valentinvieriu
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
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
Agree with this. If you have a solution please let me know. For now I'm
considering adding it as a setting.

~~~
duncanawoods
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.

~~~
valentinvieriu
That's a great idea! I'll look into this. I like the idea that you get
notified when new items are added. Thank you!

------
tedmiston
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/)

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

------
htaunay
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.Ma1c43eb41218e48366a5dc8a...](https://tse3.mm.bing.net/th?id=OIP.Ma1c43eb41218e48366a5dc8a8970b184o0&pid=15.1))
would be better to look at?

~~~
valentinvieriu
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

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

------
harisamin
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 :(

------
ndirish1842
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!!

------
yumaikas
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
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?

------
vitomd
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
Thank you. Comments are available if you want. Just click the comments link

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

------
danenania
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
I agree with this. Other than this it's a great project, nice work!

------
wilshiredetroit
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"

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

~~~
valentinvieriu
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

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

~~~
valentinvieriu
Glad you liked it!

------
donmatito
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

------
thecupisblue
Looks cool and works way better than Pinterest

~~~
valentinvieriu
Thank you.

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

~~~
valentinvieriu
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)

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

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

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

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

~~~
valentinvieriu
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)

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

~~~
valentinvieriu
Glad you like it. Feel free to use it on a daily basis

------
raffandi
Wow, this is nice, giving a different view to HN.

Perhaps 3 columns on larger viewport?

Good work!

~~~
valentinvieriu
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.

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

~~~
Fenaek
Hi, how can I contact you? (email/Twitter) Thank you!

~~~
valentinvieriu
@valentinvieriu

------
ElCapitanMarkla
Hey this is really cool, nice work

~~~
valentinvieriu
Thank you. Hope you will use this on a daily basis

------
richardboegli
AWESOME work. Very impressed!

------
sawmurai
Looks really nice!

~~~
valentinvieriu
Thank you

------
burnt1ce
Ditto.. good job!

------
nedsma
Nice concept.

~~~
valentinvieriu
Thank you

------
wellwhatever
this is beautiful

