Hilariously, one of the top three links is currently your own site, which fails to render properly. (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!
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.
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.
> 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.
Lots of news sites don't allow ad blockers these days. This means that all you'll see in the screenshot is some popup.
It will only actually be "bad" if the costs (losing some people with ad-blockers which are like dead weight to them anyway) outweighs the benefits (being able to force their ads to regular visitors and discourage them from adopting ad-blockers).
Otherwise, it's mostly "don't let the door hit you on your way out" case.
I suspect there are network effects of pushing out users who use ad blockers. These people, who will feel frustrated with their experience on your site, might not share your articles to other users, who in turn might not have those ad blockers installed.
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)
I kinda like the lack of adblocker actually. It lets me avoid promoting sites with excessive advertising without having to really expose myself to any advertising (since you can't really read the text in the images, especially not accidentally).
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.
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].
Because I get additional feedback for what I'm going to read (which often includes images within a post too, the formatting of the post, etc) than just the domain name and title?
Twitter was designed to be text-based and was beloved during this phase of its existence.
Around ~2013/2014 Twitter Cards were introduced. Cards are text (the tweet) + a large image (2-4 tweets in size). This was marketed to users as a preview of the URL/article content, but it was really about making the ads less obtrusive. It failed and, IMO, had massively negative impacts on the UX.
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.
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.
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.
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.
I agree, all the HN clones that come up are usually just a ton of JavaScript that slow everything down. I've been using my own minimal clone[0]. It uses the firebase websocket API and focuses on speed and readability. The source is here[1] if anyone wants to fork it and create their own experience.
Yeah I don't like the large image square, it might be cool if list mode could be toggled into and remembered via local storage or ever side storage
2 counters points:
- The low-js version is already pretty good and usable without js, why make a clone to specialize in using even less JavaScript?
- vuejs 2.x is targeting isomorphic server side rendering, so you should target your complaints to anything that should work with js disabled, but only works with js enabled.
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.
85 comments
[ 4.1 ms ] story [ 161 ms ] threadI would suggest you to add /best as well (unless I missed it and it's already there)
You should add option for table view too.
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!
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.
I guess it's using something like headless chrome to get the thumbnails?
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.
Lots of news sites don't allow ad blockers these days. This means that all you'll see in the screenshot is some popup.
Otherwise, it's mostly "don't let the door hit you on your way out" case.
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
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.
IMO this approach has harmed the UX of twitter.com tremendously and is done mostly to facilitate ad integration. Dark patterns for the lose.
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.
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...
Yes, me.
Around ~2013/2014 Twitter Cards were introduced. Cards are text (the tweet) + a large image (2-4 tweets in size). This was marketed to users as a preview of the URL/article content, but it was really about making the ads less obtrusive. It failed and, IMO, had massively negative impacts on the UX.
Really it just feels wrong for hackernews, the site that works in elinks and only uses 7 or so optional lines of JavaScript.
[0] https://hxn.kbl.io/ [1] https://github.com/blopker/HXN
The first version of Vue HN is used in the Examples on the official Vue website: https://vuejs.org/v2/examples/hackernews.html
2 counters points:
- The low-js version is already pretty good and usable without js, why make a clone to specialize in using even less JavaScript?
- vuejs 2.x is targeting isomorphic server side rendering, so you should target your complaints to anything that should work with js disabled, but only works with js enabled.
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.
edit: My bad, the Live Demo link takes it to a different HN Vue page. https://vue-hn.now.sh/top
For those that do use it, don't you find the jumping around of the news items distracting?
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.