Show HN: New Hacker News web client(hack.ernews.info)
hack.ernews.info
Show HN: New Hacker News web client
http://hack.ernews.info/
84 comments
v0.4.0 is up.
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.
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.
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.
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.
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.
@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.
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.
Very nice except for the animations.
(am I the only on who fears that Material Design (when overused) can become the new Flash?)
(am I the only on who fears that Material Design (when overused) can become the new Flash?)
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.
I have no problem to disable them ( optionally maybe? ) for whoever thinks they are annoying.
I've been waiting for this for a while.Thank You!
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 !
You're welcome =]
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!
Good job on separating the comments visually.
This is much more usable, not to mention responsive.
Well done!
Is this open-sourced on GitHub?
No. The HN API is public though. https://github.com/HackerNews/API
Is there any chance of it being open-sourced?
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.
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.
@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.
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.
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.
[deleted]
It's awesome, design and animations need little tweaks. But another issue is. HN API Health? It's pretty bleak time to time.
Looks nice but I dislike the animations. Also maybe clicking anywhere in a div should open up the comments?
> 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.
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.
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.
I was hoping that comments would have been shown on click.
And it's responsive!! Awesome. Reading HN on mobile has always been a pain.
[deleted]
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?
You mean doing a pinch gesture with your fingers to zoom is painful?
Do you seriously not mind having to zoom in on every single thread, and constantly scrolling left to right to read a comment?
I browse so many non-mobile websites (such as forums) that I do it without thinking about it, I actually had to pick up my phone just now to see how I actually use HN. Wasn't a problem at all. I don't know if the experience is more "painful" on other mobile browsers, but the experience is flawless on Safari.
I pretty much like it. But the “jumping” on :hover of an topic doesn’t feel that good.
So instead of
So instead of
.list-item:hover {
margin-bottom: 4px;
margin-top: 4px;
}
.list-item:hover {
outline: 3px solid #ccc;
z-index: 10;
}
Nice, but I still prefer the more information-dense original client.
Can you post?
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
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
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.
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.
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.
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.
(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..
Definitely not as beautiful as the one you linked..
Try http://hn.premii.com/ or download ios/android client http://hn.premii.com/about/
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.
@nnain I removed the "on hover" animation.
Login and posting, is not available from the HN API. so not much to do there.
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.
@nnain
I already worked on a solution for getting in and out of the comments section. You can just keep scrolling and comments will collapse automatically, otherwise you can always close it from the icon which stays on top of the screen.
Give it a try.
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.
I don't see any hover animations. Have they been removed?
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)
(This is also why I'm not terribly fond of the default animation of the OSX Dock)
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.
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
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
> 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
This is a feature I'd love in the current site as well
+ top for a day/3 days/week!
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?
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?
A separate page for an item's comments would work better for popular links.
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.
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.
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.
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.
Too big
The world needs two things: a new Javascript framework and a new HN reader!
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.
[deleted](3)
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.
Please, think of the children.
> 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.
This is why engineers are not designers. Left up to engineers, every pixel would be crammed full of "content", all at 11px font.
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.
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...
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...
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.
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.
Very cool - just installed both.
Looks very good. Well done.
Not bad, but I still prefer the “HackerWeb” version when on mobile (http://cheeaun.github.io/hackerweb/).
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!
Nice job!
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...
I tried to reply to your comments but I was getting the "you're submitting too fast" message...
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.
I also think that this is the best client.
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?
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.
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.
Looks very good
Suggestion: when expanding the comments, add an option to Show All comments instead of just loading a few each time
Suggestion: when expanding the comments, add an option to Show All comments instead of just loading a few each time
Try HNPaper http://hnpaper.forge.partlab.io (checkout the statistics: http://hnpaper.forge.partlab.io/statistics)
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 :)
Nice job on your webclient. Loving the material design-eque buttons :)
It'd be nice if this had infinite scrolling.
http://hack.ernews.info/main.0.3.0-4-gf7fc609.css
http://hack.ernews.info/bundle.0.3.0-4-gf7fc609.js