Show HN: I redesigned Hacker News, what do you think?

http://www.cancelbubble.com/hackernews/

There's a link in the top left to watch a 5 minute screencast where I explain some things (also available at http://www.screenr.com/9vGs).

This was something I did for fun after recently finding a grid framework called Fluid Baseline Grid (http://fluidbaselinegrid.com/). I thought it looked pretty cool and wanted to play around with it, to actually build something with it. This is what I came up with. I want to stress this was just for fun, but please feel free to critique (especially the JavaScript)!

I've got about 5 1/2 hours into this, it all came together rather quickly for just designing/developing on the fly. If you're looking for a responsive grid to prototype or develop with, you should check out Fluid Baseline Grid. It uses Chrome Frame for IE so you'll probably not have any IE issues (Chrome Frame is awesome). I admit I didn't test it without Chrome Frame and I'm fine with that, again this was just to play around with the framework :)

I'll quickly go over some of the things I did:

Each story entry is getting the domain's favicon via google (if the favicon is available).

I'm highlighting certain thresholds for story points and comments. The idea being it's easier to spot the hot stories (either by points or comments) at a glance. The current Hacker news is just a sea of black and gray, not so scanable, IMO.

A site like this could make good use of localStorage so I've added a "my favorites" feature towards the top right of the page. I've unfortunately not been able to implement this API at work so this was a cool aspect of this little project to play around with. The API is pretty easy and browser support is actually pretty good - you should definitely look into web storage for your projects. If you hover over each story entry, you'll get contextual icons below the story ranking number on the left. If you click the heart, you'll add that story to your favorites, which is persisted across browser restarts. It's pretty basic, it's only taking the headline and the link (no point or comments count) and there is no favorites pagination or search/filtering or clear all/reset or a tagging mechanism, though those could be added. Think of this as just a MVP.

There are 30 stories on this page but only 15 are unique (I just copied/pasted/duplicated as a FYI).

The site is responsive via the Fluid Baseline Grid so if you have an iPad or smartphone, definitely check it out and let me know if it looks good or looks funky. I unfortunately don't have a smartphone or iPad to test it with. There's also no orientation change events so if you go from portrait to landscape (or vice versa), I think you'd need to do a refresh to get the appropriate layout?

I think that's about it, I made this a couple weekends ago and just got around to doing the screencast this morning. I'm a big fan of screencasts explaining and doing walkthroughs so wanted to wait to post this until I had that ready.

BTW, if anyone in Portland, OR is looking for a front-end developer, please feel free to get in touch. I'm in enterprise-land until the end of this year. The work is, well, pretty boring at times and we're still supporting IE6, so hardly on the cutting edge. I would love to find a place that is doing more HTML5 work, especially with the JS APIs, not to mention someone who can appreciate my extracurricular activities like this. I get tons of kudos from management here on stuff like this that I do, but honestly, development here seems best suited for those that want to punch in and punch out and that's it. It's pretty uninspiring to me.

I wouldn't mind getting hooked up with some Portland Incubator/PIE folks (http://www.piepdx.com/) so if any of you are reading and are looking for some front-end help, drop me a line.

I can be reached at:

cancelbubble "at" that gmail place.

@cancelbubble (if you're interested in front-end development, I post cool stuff all the time).