
Vue HN 2.0 - galfarragem
https://hnews.xyz/top
======
swiley
I don't like it, here's why. The current version is very compact, each line of
text is a different article. All the complex CSS makes scrolling on android
Firefox hang.

Really it just feels wrong for hackernews, the site that works in elinks and
only uses 7 or so optional lines of JavaScript.

~~~
fenomas
This doesn't look like a "Hey look how much I improved HN's CSS!" kind of
project. It calls itself a "HN clone built with Vue 2.0 + vue-router + vuex,
with server-side rendering", so one presumes that it was made to showcase
those things (as opposed to, because the author felt HN desperately needed a
front-end framework and thumbnails).

I mean, if you think it's using Vue wrong then flame away, sure. But
critiquing that you prefer HN's current design strikes me as a bit like going
to a "TodoMVC in framework X" project and commenting that you prefer to use
paper and pencil.

~~~
hrayr
Yep, that's precisely what it is. It's a showcase for the technology:
[https://vuejs.org/v2/examples/hackernews.html](https://vuejs.org/v2/examples/hackernews.html)

edit: My bad, the Live Demo link takes it to a different HN Vue page.
[https://vue-hn.now.sh/top](https://vue-hn.now.sh/top)

~~~
unityByFreedom
Wow... That live demo is a lot better than existing hn, at least on mobile..
but you can't comment =\

------
hansede
The purpose of this is not to demonstrate a new design for the site, the
purpose is to demo a well written server side rendered + client side hydrated
Vue app, and especially how fast it loads:
[https://twitter.com/youyuxi/status/860856697799098368](https://twitter.com/youyuxi/status/860856697799098368)

~~~
SkyMarshal
What does "client side hydrated" mean?

~~~
scottmf
It means the initial server-rendered page comes with a JSON representation of
the store used to render it. Usually in the HTML.

The client "rehydrates" this data into its own store so that its state is
consistent with the data rendered. Essentially we're in the same position as
if we'd rendered it client-side.

It's a lot simpler than it might sound.

------
rodionos
1) Consider installing an adblock plugin into the headless browser you're
using for screenshots. Sometimes the ad banner takes half of the thumbnail
image, e.g. NYT.

2) The thumbnail images oftentimes just repeat the title, consider reducing
the size of thumbnails to fit more text.

3) In the spirit of HN, consider removing all images from thumbnails to give
readers a feel for the text.

~~~
mxstbr
Why do screenshots at all? Just parse the open graph metadata and get the meta
image the site wants to display rather than screenshotting it.

Most sites these days have a meta tag for images they want to display which is
likely optimized for exactly this usage. Can always fallback to screenshots if
those don't exist, but I'm pretty certain it'd be more pleasing.

You could implement this in less 10 minutes with micro-open-graph[0]
(disclaimer: I made that). Runs on now.sh, so it's free to host too.
(depending on how much traffic you send to it)

[0]: [https://github.com/mxstbr/micro-open-
graph](https://github.com/mxstbr/micro-open-graph)

~~~
coldtea
> _Why do screenshots at all? Just parse the open graph metadata and get the
> meta image the site wants to display rather than screenshotting it._

Because screenshots show what you'll actually see in the site?

I don't care for the "meta image the site wants to display" at all.

------
DeBraid
Does anyone prefer the large (contextless) images that consume majority of
screen real estate to text-based HN UI?

IMO this approach has harmed the UX of twitter.com tremendously and is done
mostly to facilitate ad integration. Dark patterns for the lose.

~~~
fny
I feel like there are trade offs. With the image approach, I can tell what I'm
engaging with at a glance instead of a few clicks and page loads. I know
whether a link is a blog post, repo, promotion, article, tweet without having
to decipher the domain, and I can even tell whether a site will accost me for
my email address.

On the other hand, one could argue a lot of what the images tell can be
inferred from looking at the title and metadata alone, but this has definitely
reduced my "false positive" clicks. Vanilla HN wins hands down for information
density.

~~~
piotrkubisa
I totally agree with you. I have positive experience to see preview of the
website, because now I could recognize what is behind the link. Personally, I
really like "native" HN which is just simple, fast and straightforward to use,
and I definitely wouldn't be satisfied to use the Vue-version on daily basis.

I think website preview (history-less, pre-rendered and cached) might be a
possible field for interest for startups (pocket, raindrop etc.) and their
browser extensions to manage bookmarks in browser, because they currently
generate (and cache) image previews on their own so they can offer website
preview as feature. This feature also reminds me Force Touch [1].

[1]: [http://osxdaily.com/2016/02/23/preview-web-page-links-
safari...](http://osxdaily.com/2016/02/23/preview-web-page-links-safari-mac-
multitouch/)

------
BonoboBoner
Nice job, but I prefer the text based version. I dont like having to parse all
those pictures in my head. Who cares about a thumbnail of the website?

------
CSMastermind
While I'd love to see this site get an update, I think switching to this type
of thumbnail layout would hurt it tremendously.

------
lilgreenland
Awesome, but the thumbnail for this site doesn't render on this site. I was
hoping for an infinite loop of thumbnails.

~~~
arangelov
The thumbnail renders for me, but the thumbnails in the thumbnail don't seem
to render.

------
ivan_ah
Nice full example of a working vue.js app. For me it loads very fast, almost
comparable to the text-only version.

Where is the code that generates the screenshots? I looked around here
[https://github.com/vuejs/vue-hackernews-2.0](https://github.com/vuejs/vue-
hackernews-2.0) but couldn't find anything. Is this the right repo/branch ?

~~~
zingplex
After doing some poking around, I have found the repo here [0].

[0] [https://github.com/valentinvieriu/visual-hacker-
news](https://github.com/valentinvieriu/visual-hacker-news)

------
lamby
Very nice. I would love the links to the original news.ycombinator.com pages
comment pages somewhere, particularly on the comments. Also, the title element
doesn't change on the individual comment pages.

------
lucb1e
Looks very pretty, though I'm not sure whether I'd prefer this. At least on
mobile I definitely prefer the text version, where there is less bandwidth and
a smaller screen.

------
turdnagel
I'd simply prefer to see: a larger default font on this site and a way to get
to the parent of a comment in a single click.

------
wassago
I've been using the original Vue HN ([https://vue-hn.now.sh/top](https://vue-
hn.now.sh/top)) for months, never even turn on the original HN (unless I need
to post a comment, like now).

------
kyle-rb
The mobile viewport for me is slightly smaller than the width of the page, so
I can always scroll left or right just a few pixels, and never zoom out. Not a
real issue, but it bugs me a little bit.

------
c8g
I love the preview but I am a fan of hckrnews.com. is there any plan of time
based sorting and a option in setting (like hckrnews) that if i click on
comment it will bring me to HN discussion.

------
wjh_
Neat idea!

I guess it's using something like headless chrome to get the thumbnails?

------
cupcakestand
How do you capture the screenshots? With the new headless Chrome?

Minor thing: Would be great to have mobile screenshots when accessing your
site on mobile (otherwise everyhing on the screenshots is tiny).

------
cyberferret
Nice! I did a far simpler 'Top HN News' project [0] as my first foray into
Vue.js programming as well. Some background for anyone who is interested in
how I built it - [1]

[0] - [http://tophn.info/](http://tophn.info/) [1] =
[https://hackernoon.com/tophn-a-fun-side-project-built-
with-v...](https://hackernoon.com/tophn-a-fun-side-project-built-with-vue-js-
and-rethinkdb-f22159641c1b)

------
lossolo
It's based on that [https://github.com/vuejs/vue-
hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0)

------
memco
FYI: if you click the "Built with Vue.js" it takes you to the github page,
which links to a live demo at: [https://vue-hn.now.sh/top](https://vue-
hn.now.sh/top). This vue-hn site has a more traditional layout and is pretty
clean and fast.

To the maker: it would be nice if you linked to the HN page so as to enable
people to comment on posts they find via your client.

------
partycoder
Not sure this is the right direction.

In HN the right side of the screen is underutilized. Maybe you can have the
list on topics on the left, and previews on the right, etc. Or have the right
area to be customizable...

But I like having a list of topics since it allows you to discard the ones
that are uninteresting faster.

Maybe if you could also have tags like in slashdot and filter tags that would
be good too, but HN doesn't have tags.

------
turtleofdeath
Looks great. Great work.

My wants:

\- Default to no images and toggle them like Reddit Enhancement Suite

\- Vim shortcuts for all navigation, including a help menu

\- Dark mode

\- Gallery mode

Not saying do that, just saying what I'd want.

------
DanielBMarkham
I like it, I guess. Neat idea. Not something I feel like I would have a use
for, but I'm probably not the target audience. Heck, it's cool just seeing Vue
in use.

Neater would be a thumbnail-in-the-thumbnail showing a picture of the
submitter and author, perhaps on the upper left and right corners. Might
require a bit of data mining, though.

------
frigo_1337
I'm not a huge fan of the UI (images are nice, but only for about half of the
usual HN content), but I am very impressed by the performance of the app.

The speed at which images and content are loaded (esp. during paging) makes it
feel very snappy to use. I don't know why, but it "feels" even faster than the
standard client.

------
maliker
Pretty much all the screenshots are of text - a professor's website, a github
repo, etc.

It would be interesting to see how submitters, if this new one is the only
interface, optimize the images that show up in the screenshot.

I confess I would not choose the new interface after a quick test drive. I
prefer going through single line text descriptions.

------
orthoganol
I'll be a contrarian, I actually really like this. I can take cues visually -
like seeing it's github, a blog, a service, or an atlas obscura-like piece -
and a lot more quickly determine if it's something I feel like looking into
given my mood or time constraints. So thank you :)

------
akshatpradhan
Not to hijack this post, but there was another HN skin that was created a
while ago. It was posted on HN about a year ago or something and it came in at
300+ points. What the skin/website did was sort the day's HN post by number of
points. Does anybody know where I can find that?

------
AngeloAnolin
One thing that caught my eye on this is the (perceived?) speed of how fast it
was able to grab a screenshot of the website and display it on the image
placeholder. Likely I'd be spending some time looking at the implementation
and how the developers were able to do that.

------
JustSomeNobody
I'm not crazy about the thumbnails and here's why. The way I use HN is I look
at the article title, dip into the comments first and read the top 2 or 3 to
get an idea of whether or not the article would suit me. Having thumbnails is
a distraction from that flow.

------
touart
The upvote score should be displayed bigger, also a "classic" mode would be
great.

------
mathw
It's seriously, impressively fast. I was really surprised by how fast it
loaded everything and had it ready to go. Wow.

Unfortunately, it also decided to reorder the thumbnails while I was scrolling
down the page. Nooooooooooo

------
dpnewman
I like the thumbnails - but I'd like them more if they were a toggle on/off or
avail perhaps on hover - so we can also have the succinct list view that makes
consuming and grokking more efficient.

------
stared
I expected a fractal from this thread (Vue HN 2.0 link on the front page)...

------
hoschicz
Why do the thumbnails have a slight orange or green overlay until I hover over
them? I hate that the overlay color is not consistent and I haven't found any
connection between the site and the color.

------
safek
I feel like the score would look better if "score: " were removed and the
score itself were brighter or bolder or otherwise in sharper focus.

------
eriknstr
Looks ok for the most part. Not going to use it myself.

For those that do use it, don't you find the jumping around of the news items
distracting?

------
sebringj
Your main audience is used to command lines. :)

------
hug
Hilariously, one of the top three links is currently your own site, which
fails to render properly. ([https://h-u.gs/Ky20B](https://h-u.gs/Ky20B) for
reference.)

That aside, this is a well-executed concept: It loads quickly, is fairly well
laid out, and the comment section is more modern feeling than the original HN
-- if a little too modern for my taste.

I'll never use it, the thumbnails are completely useless to me, and I'm in
Australia. Dynamically loaded content is garbage, over here. Too much time
spent staring at an empty screen waiting for content. The actual linked-site
content takes as long as it takes, of course, and you have no control over
that, but it's definitely well done!

------
drops
style over substance

------
bbzealot
Very nice!

I would suggest you to add /best as well (unless I missed it and it's already
there)

~~~
galfarragem
Unfortunately I'm not the author, just an happy user. I find this app to be
really useful to skim HN, specially on phones.

------
gravelc
Nice! No a fan of the overlay colours, but that's just personal preference.

------
andresmaiden
I prefer Vue HN and use it every day insted of the original HN.

------
drivingmenuts
Looks like a page full of ads.

------
Arzh
I like it!

------
verdverm
Sweet, thanks. Are you helping us to cache pages?

------
haburka
Awesome work! I really like it!

------
gtonic
Neat!

------
arc_of_descent
Nice job!

