Show HN: Read Hacker News Like Pinterest – Built with Vuejs
hnews.xyz
hnews.xyz
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.
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.
"It's now JSX and you have to write boilerplate JS code just to show a simple hello world example."
This is absolute insanity. It's time for a re-discovery of “vanilla” HTML, CSS, with a sprinkling of "vanilla" JS from the ground up without any frameworks.
I mean.. this website doesn't even seem to work as intended: http://imgur.com/LdRFS4L
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.
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.
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
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/
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.
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?
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!!
Probably using Riot.js , or just a bookmarklet with javascript
Edit: oh never mind, it's working now. Weird.
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.
Perhaps 3 columns on larger viewport?
Good work!
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