Show HN: My weekend project to learn Javascript - 'Pinterest for Hacker News' | Hacker News Reader

Show HN: My weekend project to learn Javascript - 'Pinterest for Hacker News'

hackerest.com

95 pointsdavj53 comments

Nice implementation, but Pinterest works well from a UX perspective because it's visually oriented and scanning scattered visuals works. Scanning scattered text, however, is harder than scanning a list :-(

Definitely time well spent learning JavaScript though so it will be cool to see it improve.

I agree that this is an impressive way to practice javascript, and a UX mistake. The best way to understand Pinterest is to think of it as porn for women. Pinterest works because deciding if you are attracted to something takes zero cognitive effort and the scattering makes the required text less bothersome.

thanks, good point. i will be adding visuals, continuing my JavaScript learning spree. any recommendations on using js to take snap shots?

It's possible: https://github.com/niklasvh/html2canvas

But.. I'm not sure it's going to work out too well. You'd probably do better off using a service like http://webthumb.bluga.net/home but it gets complicated quickly (although it's been a cpl years since I looked into this so things may have come along).

awesome, i'm looking into both right now

If you don't mind paying a little, I have used http://url2png.com/ for one of my sites and it works great.

yeah, I've checked them out - what's ur site?

it's also worth looking at PhantomJS for generating the screenshots yourself

thanks man, PhantomJS is looking pretty promising.

Can you give details on what resources you used to learn JS and build this?

I spent a ton of time on stackoverflow, quora, w3schools, api.jquery.com, and google. I also bugged my developer friends when I got really stuck. i also used bootstrap from twitter (http://twitter.github.com/bootstrap/).

You should insert snapshots of the linked pages into each of the posts. Pinterest's magic comes from the visual interest of the varying images.

Good call, I agree.

This is pretty cool. It reminded me of the Isotope library (http://isotope.metafizzy.co/) that helps with a lot of the tiling effects.

We were able to integrate it pretty well into our app.

thanks, isotope looks pretty cool - what's your app?

It's called Glossi (http://www.glos.si) and is a way to take your data from the various social networks and create a streaming magazine-like layout out of it.

Could consider colour coding (backgrounds of the tiles) based on number of comments or points, or rough categories based on keywords. That'd provide a quick way for people to evaluate the links visually.

Yeah, that's a good idea. that would make it easier to sort visually, i've got to add something to make it easier to read and select.

Hey davj,

I'm working away on learning javascript as well (currently fueled by codecademy!) any tips for starting a project like this? I'd be really interested in hearing how you took that first step. Oh and...Interesting little project, I really like it and I admire your drive, but you need some knitted keyboard cover pictures to really make this Pinterest-ish. Haha! Hope to hear back from you.

Hey int3rnaut,

Awesome man! I haven't tried codecademy's javascript tutorials yet (heard great things), but I spent a ton of time on stackoverflow, quora, w3schools, api.jquery.com, and google. I also bugged my developer friends when I got really stuck. I would start with something incredibly simple. For UI use something like http://twitter.github.com/bootstrap/ or http://foundation.zurb.com/ so you can get started on your product's functionality quickly. I think the best way to learn a language is to build something with it. Feel free to ping me if you have any questions - happy to help where i can. Hope this helps and good luck! Oh and I'm working on adding images knitted keyboard covers and wedding dresses into hackerest to make it better.

Can you also reveal the details of the hosting you are using? Hacker News generates a lot of traffic and your site looks quite responsive !!!

just using dreamhost

My wife like Pinterest because of the recipes and crafts and stuff.

When you said Pinterest for Hacker News, I thought it was a more social version of Hack-a-day, which I thought would be pretty cool. I would use that. hackerest is the perfect domain for that service. (hint hint)

Thanks for checking it out - a social version of hack-a-day would be really cool...

Very nice. Having an option to view "Ask" would also be very useful. Apart from first page of HN, I also check Ask as there are interesting "Show HN" or "Ask HN" topics that don't stay on front page for long.

Thanks, yeah sorting and different categories will be cool to add next.

That's really cool. I'm guessing you're using the Hacker News API (http://api.ihackernews.com/) to retrieve data? Or something else?

Thanks man, I did use the Hacker News API to retrieve data. Thank you @ronnieroller!

You should add the -moz prefixed background gradient for the header.

background-image: -moz-linear-gradient(center top , #FAFAFA, #F6F6EF);

Works just like the Webkit one.

Pretty cool. I agree with all the other suggestions given so far. Also, what tools were/are you using to learn javascript?

Looks create. Might wanna take a look at jquery templates instead of writing html code inside javascript code. Nice work

yeah, i will probably end up cleaning it up and changing some code

Very very very nice. I've been thinking of doing something similar for RSS feeds in general.

thanks, i think it's makes browsing RSS feed type content easier on the eyes.

totally and i think it's just another good way websites can present their "snackable" content.

Can you sort it by tweets?

ps: on Aurora the facebook and twitter buttons in the headers are stacked.

thanks for the heads up, not yet

@davj: What resources did you use to learn javascript and to make this site?

Jobs postings for YC companies show up with author and time as "null null".

yeah, i noticed that - will have to fix it to differentiate job posts from other front page news, since they behave differently.

I hate full-width websites that do not handle x-resizing. But nice job.

Awesome. We have same mind. I built similar project like this for experiment few weeks ago. I am using twitter bootstrap, jquery, mustache.js, and url2png for screenshot.

I'll put it online later.

Sweet - would love to see ur project! url2png is awesome!

Would you mind putting the code on github?

Yeah, going to clean up the code and put it up.

JS Rules.

Shameless plug, my JS project from last week: http://81videos.com/ Now playing - Just Super Bowl Ads.

add endless scroll and screenshots.

yeah, this weekend!

I like what you did, congrats on the productive weekend.

The only issue I might have with it (depending on how it functions or updates), is due to the lack of a linear flow, it might be difficult to quickly find a story / link again without scanning every box.

I often come back to HN and read a link later, or check the comments later and so on. With a line by line link flow, I can quickly scan for anything I've clicked on or wanted to check out.

I'd suggest having the link colors change upon click through (right now they appear to just stay black). That would add a helpful visual cue.

Or even let me click and tag an icon on the story box, for future reference (equivalent to an "important" tag). Then I can scan the boxes faster.

Thanks man, it's a really fun project. I was curious about what makes Pinterest so compelling - and my hypothesis is the flow and visuals. You bring up some great points. I will be adding/changing some things so expect some of your feedback go live :)

Also, I think it needs the comment count.

If a story doesn't seem interesting at first on HN, but the comment count is high'ish, it might change my mind about reading it and diving into the conversation.

Or if the comment count is just plain high regardless, I'll often scan the discussion to see what has the HN community so fired up.

just added comment count and linking to hn. for now it's just the front page of hn, which hopefully is the most interesting content of the moment.

Reply on news.ycombinator.com