The thumbnails are generated using phantomjs server. I'm using 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) to make sure that images are precached as the link are submited to hackernews.
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.
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.
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.
I agree. Love the layout and the fact I can get more of an idea what the thread is about, but the constant auto refreshing, as well as the refreshing while scrolling threw me a little bit.
I tend to skim a bunch of articles, and make a mental note of the position of interesting ones to go back to later, but when I scroll up, everything is in a different location, breaking the mental map that I had built.
Other than that, I think it is a great alternative. Good work.
It is massively annoying and a huge UX misstep. It just happened to me: I hovered over a story I was interested and could feel the muscles in my hand tensing as I was about to click when suddenly the stories refreshed and I lost the one I was interested in. It made me somewhat irrationally angry, like something was stolen from me.
Do not automatically change content that requires people to read
The project uses as a starting point the amazing Vuejs Implementation from 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 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) to make sure that images are pre cached as the link are submited to hackernews.
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?
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
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%?
What I like about it is actually being able to read content in the tiles. For me, reducing their size would just turn it into a gimmick - cute thumbnails but why bother?
It shouldn't be too difficult - surely right now you have some sort of task that scrapes the Hacker News API to present the stories? Generate the thumbnail then, store it on S3.
Thank you for the suggestion. I'm not so familiar with this. Will this work on frontend too? If I expose the secrets on the fronted, then it's pointless.
Do you have some suggestions on how to do this?
Appreciate the help! It's an important aspect and a very resource intensive process that I need to protect.
Your decryption/encryption secret (key) is stored on the server side only and if a client requests a thumbnail, you can validate the URL value by successfully decrypting it with this secret and probably do a simple HTTP URL validation check of the decrypted value.
And you have to encrypt all thumbnail URLs with this secret before passing them to the client.
To the extent that you are pulling new stories directly from Firebase on the client side, encrypting (or signing) urls with a symmetric key will not work. This is because you would need to embed the secret in the front-end code which means the secret is no longer secret ;-)
You could also tail the Firebase feed from a server process, generate the relevant images and only serve images for pre-existing urls.
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
You could try generating a unique token for each page-view, and use this as an access-token for all other resources pulled by the page.
The reality is that it's not too many people who will misuse your API... so don't pick a mechanism that will place undue load on your server until you really have to.
My suggestion would be to wait a second or two for the pages to load before taking a screenshot of them. It seems that for some websites, there is dynamic loading or an animation first, and this shows up on your board as uninformative pictures.
Take this as a personal opinion, but I felt like I was having to work to find the titles...maybe they'd do better on top? Is that something that could be easily A/B tested?
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!
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.
> 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.
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
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.
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.
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.
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?
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.
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.
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
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.
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.
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.
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...) would be better to look at?
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
110 comments
[ 2.6 ms ] story [ 230 ms ] threadI'll post the code on 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
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.
Then give the option to hide it, after you've made your selection. :)
The auto-refresh was making me crazy as well - even a big 'Auto-Refresh: ON' toggle by the menu would be enough.
I'm not a fan of settings in general but it does appear you're getting two distinct groups of users.
I tend to skim a bunch of articles, and make a mental note of the position of interesting ones to go back to later, but when I scroll up, everything is in a different location, breaking the mental map that I had built.
Other than that, I think it is a great alternative. Good work.
Do not automatically change content that requires people to read
The project uses as a starting point the amazing Vuejs Implementation from 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 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) 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, 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.
How did you like working with Vue? Did you have javascript framework experience prior to using it?
You could also tail the Firebase feed from a server process, generate the relevant images and only serve images for pre-existing urls.
You could try generating a unique token for each page-view, and use this as an access-token for all other resources pulled by the page.
The reality is that it's not too many people who will misuse your API... so don't pick a mechanism that will place undue load on your server until you really have to.
Great job on the site though! It's very smooth.
How is this different from a normal VueJS app where I would fetch data with ajax or vue-resource and then fill the elements with content?
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!
If you wan to contribute, you can use the https://github.com/valentinvieriu/visual-hacker-news ( still old version there )
Thank you
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.
Probably using Riot.js , or just a bookmarklet with javascript
Perhaps 3 columns on larger viewport?
Good work!
Edit: oh never mind, it's working now. Weird.
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.
Other than that the whole thing looks really neat.
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...) would be better to look at?