
Show HN: My weekend project to learn Javascript - 'Pinterest for Hacker News' - davj
http://www.hackerest.com
======
petercooper
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.

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

~~~
petercooper
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).

~~~
davj
awesome, i'm looking into both right now

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

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

------
jiggity
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.

~~~
davj
Good call, I agree.

------
dangoldin
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.

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

~~~
dangoldin
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.

------
prawn
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.

~~~
davj
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.

------
int3rnaut
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.

~~~
davj
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.

~~~
vvnraman
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 !!!

~~~
davj
just using dreamhost

------
phamilton
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)

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

------
skrish
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.

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

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

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

------
gkoberger
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.

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

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

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

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

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

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

------
baby
Can you sort it by tweets?

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

~~~
davj
thanks for the heads up, not yet

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

~~~
davj
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/>).

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

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

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

------
nyrb
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.

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

------
cantbecool
Would you mind putting the code on github?

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

------
ronilan
JS Rules.

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

------
lurchpop
add endless scroll and screenshots.

~~~
davj
yeah, this weekend!

------
shingen
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.

~~~
shingen
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.

~~~
davj
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.

