7 ms·
Show HN: My weekend project to learn Javascript - 'Pinterest for Hacker News'
- newbusox 15y agoThat's really cool. I'm guessing you're using the Hacker News API (http://api.ihackernews.com/ http://api.ihackernews.com/) to retrieve data? Or something else?
- davj 15y agoThanks man, I did use the Hacker News API to retrieve data. Thank you @ronnieroller!
- shingen 15y agoI 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 15y agoAlso, 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 15y agojust 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.
- davj 15y agoThanks 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 :)
- phamilton 15y agoMy 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 15y agoThanks for checking it out - a social version of hack-a-day would be really cool...
- jiggity 15y agoYou 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 15y agoGood call, I agree.
- skram 15y agoVery very very nice. I've been thinking of doing something similar for RSS feeds in general.
- petercooper 15y agoNice 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 15y agothanks, good point. i will be adding visuals, continuing my JavaScript learning spree. any recommendations on using js to take snap shots?
- petercooper 15y agoIt's possible: https://github.com/niklasvh/html2canvas 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 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 15y agoawesome, i'm looking into both right now
- blazzar 15y agoIf you don't mind paying a little, I have used http://url2png.com/ http://url2png.com/ for one of my sites and it works great.
- davj 15y agoyeah, I've checked them out - what's ur site?
- joshfraser 15y agoit's also worth looking at PhantomJS for generating the screenshots yourself
- dangoldin 15y agoThis is pretty cool. It reminded me of the Isotope library (http://isotope.metafizzy.co/ http://isotope.metafizzy.co/) that helps with a lot of the tiling effects. We were able to integrate it pretty well into our app.
- ronilan 15y agoJS Rules. Shameless plug, my JS project from last week: http://81videos.com/ http://81videos.com/ Now playing - Just Super Bowl Ads.
- ryen 15y agoLooks create. Might wanna take a look at jquery templates instead of writing html code inside javascript code. Nice work
- davj 15y agoyeah, i will probably end up cleaning it up and changing some code
- prawn 15y agoCould 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 15y agoYeah, 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.
- lurchpop 15y agoadd endless scroll and screenshots.
- davj 15y agoyeah, this weekend!
- cantbecool 15y agoWould you mind putting the code on github?
- davj 15y agoYeah, going to clean up the code and put it up.
- int3rnaut 15y agoHey 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 15y agoHey 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/ http://twitter.github.com/bootstrap/ or http://foundation.zurb.com/ 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.
- rafeed 15y agoPretty cool. I agree with all the other suggestions given so far. Also, what tools were/are you using to learn javascript?
- davj 15y agoI 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/ http://twitter.github.com/bootstrap/).
- skrish 15y agoVery 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 15y agoThanks, yeah sorting and different categories will be cool to add next.
- enduser 15y agoJobs postings for YC companies show up with author and time as "null null".
- davj 15y agoyeah, i noticed that - will have to fix it to differentiate job posts from other front page news, since they behave differently.
- gilaniali 15y ago@davj: What resources did you use to learn javascript and to make this site?
- davj 15y agoI 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/ http://twitter.github.com/bootstrap/).
- gkoberger 15y agoYou 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.
- nyrb 15y agoAwesome. 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 15y agoSweet - would love to see ur project! url2png is awesome!
- baby 15y agoCan you sort it by tweets? ps: on Aurora the facebook and twitter buttons in the headers are stacked.
- davj 15y agothanks for the heads up, not yet
- bellbind 15y agoI hate full-width websites that do not handle x-resizing. But nice job.