Hacker Slide: HN front page over time | Hacker News Reader

Hacker Slide: HN front page over time

hackerslide.com

165 pointsfranck31 comments

Oh, please, please someone toss in some animation (and also expand the sample set to a much longer time frame).

By animation I mean that the transition between two "frames" should be titles moving smoothly between positions. It would need some clever use of color and exact path to make it legible.

The user-facing purpose of such animation is to make it easier for people to perceive (viscerally) the bouncy dynamics of the ranking system.

(It's a neat hack as is, too, of course.)

(and also expand the sample set to a much longer time frame)

Sure - it only started to collect data about 10 hours ago but that's certainly the plan.. though I've realized it's already useful for me to catch up with HN while I was asleep.

Regarding animation, thanks for the idea. I'm really just a JavaScript "dabbler" but I'll have a think about how it could be done. Rather than just rendering a JSON file into HTML it seems I'd need to start storing the data as it comes in and perform manipulations as necessary. This might be a bit too much for me for a quick project but I'm open sourcing the code so it could happen.

Check out Quicksand, a jQuery plugin for animating lists as they reorder or change:

http://razorjack.net/quicksand/

Interesting idea. I built http://hckrnews.com/ so that it would be easier to track what is new as well as catch up on what had been posted since my last visit. I'm not sure why I'd visit this instead?

I like that.

However, the reason I'm currently visiting mine is that it's great to see how the front page looked merely hours ago. I'm familiar with the "top 30" and stuff can fall off of it so fast. A site like yours is okay and the info looks nice but it's a "different" thing to the HN front page, less of a facsimile.

I think a animation like on this page http://unbounce.com/ would totally rock here (click on the bottom tabs).

disclaimer: I have no association with ubounce.com, I just wandered on their page yesterday and those animations really stayed with me I guess :)

Allright, I tossed in the animation. Check it out. :)

http://github.com/blaines/hackerslide

Quicksand + CSS3

If you thought this was interesting, you might also like:

http://www.hntrends.com

Which is a site I built about a year ago that takes a somewhat different approach to visualizing HackerNews front page data.

When I read the title of the post the first thing that popped in to my head was hntrends.

It would be nice of PG could spare a static page on HN for all the user contributed stuff.

The site below is a nice alternative until then

http://resourcey.com/site_details/2/news.ycombinator.com/

I like it. But, is it just me or it takes ~15 seconds to load!

Would be nice to see the articles coloured by the change in their movement since last version, one colour for rising another for falling.

...reword: some way to quickly perceive each entry's change from the previous time step. Maybe color?

Separate the requirement from the solution.

Good idea in political, corporate, America.

Here on the internet, you can go ahead and speak your mind.

If only you had noticed that the other response to the comment confused the requirement...

good luck!

Wouldn't a constant, distinguishable color per article work better with visual perception? Generating the color using a function on the title itself would seem nice, simple solution to test.

Thanks for the interest folks!

As mhill notes, the inspiration for this was http://redditsnapshot.sweyla.com/ but I decided to go with sliding through hours rather than days due to the lack of data. I quickly realized, though, that even having the last 48 hours or so would be useful to me in order to "catch up" with items that pass too quickly from the front page overnight/etc.

Several people have suggested adding colors or other notifications of "new" items appearing over time, movements up and down, etc, and I'm adding some stuff to track that and will add CSS classes to signify those events.

I'm also planning to upload the code to GitHub once I clean up a horrible tab mismatch disaster that befouled it..

For anyone who cares about such things, it's currently a Ruby based "crawler" that runs once a hour and saves the items into JSON files which the then almost-pure-JavaScript page loads as you use the "selectToUISlider" control built by Filament Group, see http://www.filamentgroup.com/lab/update_jquery_ui_slider_fro...

I saw a post in Reddit doing frontpage snapshot yesterday http://redditsnapshot.sweyla.com/ and thought to myself, this is pretty cool; I should make one for HN. Today someone already has done it. Congrat.

I had the same thought (as you can tell!) and thought that after the whole *Instant fad, I should quickly whip something up since I had a few spare hours ;-)

I'm a little perturbed by the whole "whip something out in a few hours" craze of late but have adopted a "if you can't beat em, join em" approach for the moment.

It looks like a nice interface to something like Web Archive: http://archive.org. It should be there for every website!

This is really cool, and seems like it will be even more fun once you've collected a bit more data.

One minor usability tweak: having the slider "snap" to the hour doesn't quite feel right. The end result is that the ball is never actually under my cursor, which feels broken. Might be more usable if the mall always stayed with your cursor, but snapped back to the nearest hour when you let go.

Nice stuff though - it will be cool to see how you evolve this.

This should settle the 'HN has changed...' arguments once and for all! I think the only thing you really need to add is a way to flag/highlight one article so you can watch how it slips over time.

Another suggestion - Allow readers to choose timezone

IMHO Reddit version feels better. It has both the hour as well as day sliders and multiple controls for the same.

It is, but this was just whipped up in a couple of hours this morning to get going fast ;-)

That said, something about the Reddit one's approach to separating days and hours doesn't feel right to me. Two interfaces for controlling one variable (in essence). Copying that would be easy but it doesn't smell right to me though I'm open to opinions and suggestions.

I totally agree with this sentiment, but you do have two ways that people want to interact with the data. Scrub by day, scrub by hour, depending on what level of detail is wanted. You might need still two controls, but they should at least be the same type of controls.

Alternatively, you could add a drop down to select the granularity and then use a single slider control.

Edit: This is based on just seeing the reddit one, BTW. I tried to check out yours, but it seems that it's popularity has flooded the server.

You have a good point. I'll give it some thought now..

it seems that it's popularity has flooded the server.

Try again - it's not the load but something weird in my Apache setup (I'm suspecting Passenger) that causes it to pass out every now and then load or not :-(

What does the pink background on some items mean?

The highlighted item is no more than 1 hour old, as measured by the time of its first appearance on the front page.

Highlighting to find new stuff would work better if each article could show up highlighted at most once. For instance "The Original Microsoft Windows 1.0 Press Release" is highlighted and marked as "0 hours ago" both at 05:00 and 06:00.

This is only a temporary hack. I only added "new" detection after it had been going several hours but once enough time has passed, I'll remove the hack based on hours under 2.

Reply on news.ycombinator.com