7 ms·

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/valent

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%?
    - duncanawoods 10y ago
      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?
cvrajeesh 10y ago
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 10y ago
  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.
  - untog 10y ago
    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.
  - cvrajeesh 10y ago
    Another solution I can think of is - encrypt the URL with a symmetric key. Decrypt it to generate the thumbnail
    - valentinvieriu 10y ago
      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.
      - j1436go 10y ago
        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.
maximl337 10y ago
What do you mean by - It has super fast server side rendering, that's why the feedback is imediate as you load the page? 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?
- maximl337 10y ago
  Found it: https://vuejs.org/v2/guide/ssr.html https://vuejs.org/v2/guide/ssr.html
Xcelerate 10y ago
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. Great job on the site though! It's very smooth.
clbrook 10y ago
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?
- Fuzzwah 10y ago
  I had the same thought.
robodale 10y ago
Hello - excellent work. I'm working on a Vue-based UI myself and really like your use of infinite scrolling + performant rendering. Great Job!

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%?
  - duncanawoods 10y ago
    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?

cvrajeesh 10y ago

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 10y ago
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.
- untog 10y ago
  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.
- cvrajeesh 10y ago
  Another solution I can think of is - encrypt the URL with a symmetric key. Decrypt it to generate the thumbnail
  - valentinvieriu 10y ago
    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.
    - j1436go 10y ago
      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.

maximl337 10y ago

What do you mean by - It has super fast server side rendering, that's why the feedback is imediate as you load the page? 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?

maximl337 10y ago
Found it: https://vuejs.org/v2/guide/ssr.html https://vuejs.org/v2/guide/ssr.html

Xcelerate 10y ago

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. Great job on the site though! It's very smooth.

clbrook 10y ago

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?

Fuzzwah 10y ago
I had the same thought.

robodale 10y ago

Hello - excellent work. I'm working on a Vue-based UI myself and really like your use of infinite scrolling + performant rendering. Great Job!