Show HN: New Hacker News web client

http://hack.ernews.info/

by antouank • 12 years ago

128 78 12 years ago

hack.ernews.info

antouank12• 12 years ago

Based on the Firebase HN API, I made a web client that updates stories and scores in real-time.

No need to refresh your browser anymore to see new stories and comments.

Also, I used a responsive design to be able to read the stories on my mobile phone.

For now, I only show the top stories, up to 100 of them ( that's how many the API gives you anyway ).

If people find it useful, I might add other things. Hope OAuth becomes available so I can add up-voting and comment adding.

shade23• 12 years ago

I've been waiting for this for a while.Thank You!

antouank12• 12 years ago

You're welcome =]

titraxx• 12 years ago

Same thing here. I was using http://hckrnews.com/ on my tablet because of the non-responsiveness of Hacker News but http://hack.ernews.info/ seems better because it includes comments and use the new API. Thank you !

dandare• 12 years ago

Very nice except for the animations.

(am I the only on who fears that Material Design (when overused) can become the new Flash?)

antouank12• 12 years ago

I kind of like material design, but I'm not a designer myself. So I get that my implementation might be crappy.

I have no problem to disable them ( optionally maybe? ) for whoever thinks they are annoying.

guanche• 12 years ago

Nice work, I will give it a try for a while! Two points of feedback right of the bat: 1) The added margin animation doesn't really makes sense in my mind and doesn't really feel well. Maybe try out a few different focus/hover states? 2) I would like an easier way of closing the comments instead of again finding that little comments icon. Especially at mobile resolutions + touch is this a bit awkward.

insin• 12 years ago

The visualisation of live upvotes is nice, how did you handle that state-wise in React?

I also have comment counts and whatever data is used to dim downvoted comments on my API wishlist ( my own implementation is http://insin.github.io/react-hn ).

An endpoint for just ask/show/jobs items would also be nice.

antouank12• 12 years ago

@insin This project is an opportunity for me to make some production-ready thing on Flux/React. I'm new to it.

I have two stores, one for the news stories, and one for the comments. And then a smaller one for the notifications. I don't use any state in the components. Everything propagates from the top level and the stores.

The counter component doesn't have a state, but when it sees an update, it just adds/removes a class and that's how you get the animation.

gtf21• 12 years ago

Nice! I really like the animations actually. Now all it needs is upvoting and commenting built in (but obviously HN would have to enable that part of the API - which I assume is disabled).

Good job on separating the comments visually.

This is much more usable, not to mention responsive.

Well done!

cheeaun• 12 years ago

Is this open-sourced on GitHub?

antouank12• 12 years ago

No. The HN API is public though. https://github.com/HackerNews/API

atom-morgan• 12 years ago

Is there any chance of it being open-sourced?

atoponce• 12 years ago

Some comment section feedback:

The horizontal indentation on the comments might be a bit aggressive, and each comment is taking up a great deal of vertical screen real estate. Further, the clickable "more" makes reading long comment threads difficult without a great deal of scrolling.

It seems to be optimized for mobile viewing, which is good. Dobbs knows how I hate clicking tiny links with my fat fingers. But, when behind a desktop client, the CSS could be adjusted such that it takes better advantage of my screen resolution.

k__• 12 years ago

I have no problem with big links on desktop, but the comments should be smaller. I hate it when text-boxes simply stretch and the regular HN site does this too.

antouank12• 12 years ago

@atoponce I kept the same indentation because I wanted to have a familiar design. That tree structure is not easy to display. Showing all of the comments at once can be a disaster in slow connections. "Show more" button is needed for now. I hope later I can give users the ability to customize how many things to load. I've only been working on this project for 3-4 days now. Front and back end.

I already have some thoughts on how to handle the comments section, I agree it has to be very efficient cause the whole point of the client is to let you get in and out of the comments section easily. Reading the headlines is the easy part.

If anyone is a designer or has design suggestions, I'm happy to see them.

frade33• 12 years ago

It's awesome, design and animations need little tweaks. But another issue is. HN API Health? It's pretty bleak time to time.

anonfunction2• 12 years ago

Looks nice but I dislike the animations. Also maybe clicking anywhere in a div should open up the comments?

rplnt• 12 years ago

maybe clicking anywhere in a div should open up the comments?

That's what I would expect when you are presented with a change - link gets underlined, bottom slightly "opens"

edit: Actually, those visuals could also mean a link would open. Probably even more than comments.

anonfunction2• 12 years ago

My line of thought was that since comments would open on the site it would have an animation whereas outbound links would use the tried-and-true underlining.

AtmaScout• 12 years ago

I was hoping that comments would have been shown on click.

briandear• 12 years ago

And it's responsive!! Awesome. Reading HN on mobile has always been a pain.

unixpunx2• 12 years ago

Lol what? HN is the most simple website I visit nowadays, aside from plain html and apache file listing. There really isn't any way to make it easier, simpler and faster without sacrificing usability.

You mean doing a pinch gesture with your fingers to zoom is painful?

sehr• 12 years ago

Do you seriously not mind having to zoom in on every single thread, and constantly scrolling left to right to read a comment?

FabianBeiner• 12 years ago

I pretty much like it. But the “jumping” on :hover of an topic doesn’t feel that good.

So instead of

  .list-item:hover {
    margin-bottom: 4px;
    margin-top: 4px;
  }

maybe use something like

  .list-item:hover {
    outline: 3px solid #ccc;
    z-index: 10;
  }

Just my two cents. ;)

tirant• 12 years ago

Nice, but I still prefer the more information-dense original client.

puppetmaster3• 12 years ago

Can you post?

oneeyedpigeon• 12 years ago

TLDR: no.

From [1] "If people find it useful, I might add other things. Hope OAuth becomes available so I can add up-voting and comment adding."

[1] https://news.ycombinator.com/item?id=8809479

nnain3• 12 years ago

This looks good, the animation on hover doesn't add any value though.

My favourite HN client on phone is http://cheeaun.github.io/hackerweb/. It's lean, fast and looks like a native app on the phone. I've added a shortcut to my mobile's home screen, using the 'Add to Home Screen' option in Chrome, which gives me a nice quick launch icon.

The downside of both these clients is that you can't login or post using them.

nothrabannosir• 12 years ago

(not affiliated) I always use http://ihackernews.com/ which has "collapse thread" buttons for comments and a "view on HN" for one-extra-click-to-reply. Use it on the desktop as well, actually.

Definitely not as beautiful as the one you linked..

rcarmo• 12 years ago

Ditto. I find the animations on this one make it slow on mobile. Haven't tried it on my iPad yet (which is where I use cheeaun's on a daily basis), but I think the visuals might detract from the reading somewhat.

Kiro• 12 years ago

I don't see any hover animations. Have they been removed?

weinzierl• 12 years ago

What do you use for posting from mobile? I tried several apps, even a paid one. They either didn't offer login and posting or offered it but it didn't work.

avalaunch• 12 years ago

MiniHack is my favorite. Works great.

nnain3• 12 years ago

The official news.ycombinator.com. I prefer to post from the computer anyway. MiniHack mentioned in the other comment looks good, though it's only on iOS.

thekingshorses2• 12 years ago

Try http://hn.premii.com/ or download ios/android client http://hn.premii.com/about/

neilellis• 12 years ago

Like it, really needs up vote buttons.

Also the message that someone has up voted X is quite annoying, I’d suggest making that a lot more subtle. Maybe convert it into a subtle animation effect on the circle badge - maybe a short subtle glow.

Keep animations subtle - dial everything down a notch or two.

Keep up the good work though - I like what you’ve done so far.

antouank12• 12 years ago

@nnain I removed the "on hover" animation. Login and posting, is not available from the HN API. so not much to do there.

nnain3• 12 years ago

Cool! May I suggest two more change. 1) Remove the Underline from the link on hover -- instead, change the color of the font. 2) Add a button to collapse the opened comments section (probably besides the 'see more' button), after someone has opened the comments. Have to scroll all the way to top right now. Thanks.

Gigablah• 12 years ago

One of the worst things you can do as a designer is to move an element around while the user is trying to target it with the cursor.

(This is also why I'm not terribly fond of the default animation of the OSX Dock)

phazelift• 12 years ago

Looking good, only the score numbers might be a little too thin, and the margin on hover animation doesn't work for me. It distracts me from reading, becoming a bit annoying.

ilzmastr• 12 years ago

Nice! The live update is sick!

What would make me use this instead of news.ycombinator.com every day however would be:

- the ability to hide stories you've already read (some box to tick like a todo list) or are not interested in. They take up so much space, so there is a lot of wasted space after 5 mins on the site and reading/seeing I'm not interested in the top stories. I don't want to click 'show more', I want new headlines to replace old unwanted headlines

- Color coding the actual divs to signify hotness and using size of divs to signify importance/upvotes would be nice. The font is so thin in the orange circles (and the spacing between them and the text) that I cannot read it in my peripheral vision and have to glance back and forth between titles and ranks

- hover movement is disturbing enough for me to navigate with keyboard instead of mouse

mahoro• 12 years ago

+ top for a day/3 days/week!

Fourkeys• 12 years ago

the ability to hide stories you've already read (some box to tick like a todo list) or are not interested in. They take up so much space, so there is a lot of wasted space after 5 mins on the site and reading/seeing I'm not interested in the top stories. I don't want to click 'show more', I want new headlines to replace old unwanted headlines

This is a feature I'd love in the current site as well

selmnoo• 12 years ago

Probably the best HN redesign I've seen yet to date.

Some light criticism:

1) decrease the padding between each story space, there's juuust a touch too much white space

2) the big attraction to HN is indeed the comments, so accessing or invoking the comments should be really easy. In your version, I have to click the comment icon or the comment numeral count link... why not instead have the entire space (excluding the story link) open up the comments?

stefantalpalaru• 12 years ago

A separate page for an item's comments would work better for popular links.

whizzkid• 12 years ago

I have been seeing quite often that the webpages makes it to first place on Hacker News are getting unresponsive, slow or even down just like this one.

Is there anybody knows about the load statistics when a story on Hacker News gets on the first place?

What i mean is; how many requests are made to a web page, what is the req/seq and etc?

I guess this would be useful for me and other people to get ready for possible load on our site to be sure if we can handle this load.

pothibo• 12 years ago

My blog has been in the top 5 a few times. When you reach the top 3 positions, you can expect around 150-250 simultaneous users for a few hours.

Top 5 is more like 50-75.

Top 15 is around 25-50.

Those numbers aren't req/sec but simultaneous user. There's a difference between the two but it still gives you a number to compare things to.

All you read about how the top 3 gets 75% of the traffic in Google is true to about every places where there's ordering.

As for the load, it depends a lot, that website seems to poll HN's API quite a lot so maybe that's how they get down (HN throttle the # of query).

I made it on the top 5 with a VPS on 128MB of RAM and didn't even feel it (without caching). You need a LOT of traffic for a blog to be affected by the load.

Obviously, when you do a lot of polling/database intensive stuff (games, etc.) the bottlenecks are easier to reach.

annoying_tech• 12 years ago

Too big

mvonthron• 12 years ago

The world needs two things: a new Javascript framework and a new HN reader!

yousry• 12 years ago

I recently tested my web-pages against a 4k display. The impression was horrible. One tiny column and useless word-wraps generated almost unreadable text. I would really like to see themes that can handle horizontal resolutions above 1900 pixels.

pottspotts• 12 years ago

In the words of Steve Jobs: "That is really ugly, and you're fired". It has that failed Web 3.0 look. More rounded corners, excessive margin, but less content per page. One commenter pointed out its easier on mobile, but that can be resolved with the existing style.

Please, think of the children.

marknutter• 12 years ago

but less content per page

This is why engineers are not designers. Left up to engineers, every pixel would be crammed full of "content", all at 11px font.

dmd• 12 years ago

This is exactly what I want, though.

sixothree• 12 years ago

fwiw I'm not a designer but I found it very hard to read because of all of the excess spacing. I had to read one article header at a time instead of just scanning my eyes.

alexggordon• 12 years ago

Looks good. My only comment is that I really wish it showed more posts. I have some big monitors, with pretty high resolution, and I love being able to see lots of content on them.

As far as dealing with my taste in UI I use Hacker News Enhancement Suite[0] for computers and MiniHack for mobile[1](not affiliated). The primary reason I switched to MiniHack was I really wanted the ability to log in and comment. I spend a lot of time working on just an iPad (writing, etc.) and it's great to be able to comment as myself without any of this fancy browser stuff.

[0] https://github.com/etcet/HNES [1] https://itunes.apple.com/us/app/minihack-for-hacker-news/id6...

rebelshrug• 12 years ago

Very cool - just installed both.

thekingshorses2• 12 years ago

There is no API to login/comment.

I have web client http://hn.premii.com/ that uses new APIs (No login).

iOS client https://itunes.apple.com/us/app/hacker-news-yc/id713733435 where you can login and upvote.

rafaqueque• 12 years ago

Looks very good. Well done.

mproud• 12 years ago

Not bad, but I still prefer the “HackerWeb” version when on mobile (http://cheeaun.github.io/hackerweb/).

filmgirlcw• 12 years ago

I like this a lot -- I do wish it was possible to view a few more items at once -- at least on higher-density displays -- but this looks great.

Nice job!

antouank12• 12 years ago

thanks for the feedback. I'll try to improve the site based on that.

I tried to reply to your comments but I was getting the "you're submitting too fast" message...

gulbrandr• 12 years ago

Good job! You could gzip your CSS and JS:

http://hack.ernews.info/main.0.3.0-4-gf7fc609.css

http://hack.ernews.info/bundle.0.3.0-4-gf7fc609.js

antouank12• 12 years ago

@gulbrandr They are already gzipped. I can see the original size of the assets in the disk, the ones served are much smaller.

cheshire137• 12 years ago

Doesn't beat http://www.hckrnews.com/ for me since that lets me show just the top 50% of stories, top 20%, the front page, etc.

astkaasa• 12 years ago

I also think that this is the best client.

sova• 12 years ago

yo what happened to that recalibrated HN site with the awesome awesome (fill-the-border-box-up-as-the-rating-increases) coolness and simplicity? anyone know what i'm talking about?

q2• 12 years ago

Please add an option/extension so that downvoters provide reasons for their downvoting. It helps to understand the other view points or reasons for disagreement rather than just downvoting, which appears rude/insensitive, and may be for ideological/racial reasons(which we never know).

Upvoting without reason may be ok, in that case at least we know that upvoter is in the same/similar logical region as we are. Downvotes may indicate differences of opinion but do not indicate what/why are those differences. So reasons for downvoting clarifies those reasons and other view points, which I guess is the reason for "comments" in the first place.

guilhermetk• 12 years ago

Looks very good

Suggestion: when expanding the comments, add an option to Show All comments instead of just loading a few each time

rgaidot• 12 years ago

Try HNPaper http://hnpaper.forge.partlab.io (checkout the statistics: http://hnpaper.forge.partlab.io/statistics)

harisamin• 12 years ago

Nice job! Not to pull anything away from it, but I just published my first Mac app to the App Store, its a native HN client. https://itunes.apple.com/us/app/mackernews-hacker-news-clien... Will do an official post once i have a landing page up.

Nice job on your webclient. Loving the material design-eque buttons :)

theunamedguy• 12 years ago

It'd be nice if this had infinite scrolling.

GhotiFish• 12 years ago

Comments should be able to collapse.

antouank12• 12 years ago

@GhotiFish They are now. :)

antouank12• 12 years ago

v0.4.0 is up.

Show HN: New Hacker News web client

Related Stories