Hacker News Web App for Mobile | Hacker News Reader

Hacker News Web App for Mobile

hn.premii.com

239 pointsEtienneK160 comments

I wrote this client. Never submitted to HN, because I wasn't sure if anyone will like it.

After it reached to the FP, my vps server stop responding. So I moved it to S3. S3 doesn't gzip content. Now it takes twice the time to load the app.

Thanks EtienneK for submitting to HN.

Also forgot to mention that you can download an android app from play store. https://play.google.com/store/apps/details?id=com.premii.hn

I serve some gzipped content off of S3, you just have to do the zip yourself before uploading, which is pretty straight forward using most scripting languages.

But then your content is going to require that support, returning gzip'd content with hard-coded headers even when not requested and unwelcome.

This is an excellent design and implementation. I'll be using this from now on :) I have one request though. when a comment is collapsed it should also collapse the child comments just like a tree. Maybe you can add reply, upvote, downvote support too. btw I would pay for this app. Thanks

Collapsing comment is not for thread, but it is side effect of the feature. If you visit the same thread again after 5 mintues. It will only display new comments since your last visit. All other comments are collapsed by default.

I am not sure the best way to implement comment collapse with thread collapse.

Working on a product for dead-simple CDN backed hosting for static websites with performance optimizations built in, called BitBalloon (https://www.bitballoon.com).

Shoot me a note at mathias@bitballoon.com if you're interested in trying it out.

you can have the app online and a lot faster than on S3 in around 30 seconds :)

Hey, great work! I really like it. I noticed when added into home screen, if I click through the direct link to the article, there's not way to go back. This is probably related to "apple-mobile-web-app-*" meta tags. Is there any tweak that can make it possible to go back from external article page?

I had the same issue. iOS 6 / iPhone 5 Have to quit the app and reopen to get back to main screen

What are you using for stripping the content from the links?

readability maybe?

I am using readability.

Love the interface, but why does the Android app require GPS permissions?

Any plans to release the source code?

Yes. I got so many emails for source code. I will put it here. https://github.com/premii/hn

This is the first website I've ever added to my home screen on iOS, and I was completely unaware that by doing so, I could view the site as if it was a full screen app, not having to deal with the safari interface. I was completely unaware of that, and can now really see the utility in adding web apps to the home screen

Also, this is great. Really a solid interface.

EDIT: I would honestly like to see this scale on desktop, just because it's a pretty great interface for Hacker News.

EDIT 2: Nevermind, realized that it worked by acting as a sidebar on wider monitors. That makes sense.

It works fine as a desktop app actually. The sidebar is just one part of the app, and if you click on a post, you get the full article / comments on the right side.

Looks like no framework was used to build this (except for Zepto, I guess). Total size for JS is 55kb, for comparison Angular 1.0.7 minified is 78kb. CSS adds another 30kb, including the ico font that's base64 encoded in style.css. 115kb for the whole page on a fresh load, on subsequent loads it's only something like 4-5kb. Very nice!

Sorry I forgot to mention, I also use Fastclick(https://github.com/ftlabs/fastclick) for iOS.

JS is uglified. Libraries takes 55% of file size, and rest is my code.

The UI performance for your web app is impressive. Did you use any other libraries besides fastclick? Or was it a lot of manual work and research to make the UI perform well?

+1. I don't know what are your plans with this app, but I would love to learn more about how you did that. Do you plan to open-source it?

+1. I would love a more detailed "How I built the HN single page app" post.

Yep, I figured that out! Now that I know I like the sidebar better than full width.

I worked on a similar app [1] and it runs as a standalone web app on the iOS homescreen as well. A couple of things that I love about it:

  1. I've done away with a lot of the features the OP has - such
  as comments (unless it's Ask HN), time of post and link. This 
  has made it more lightweight and faster to load on slow mobile 
  networks in my area.

  2. Also, it's only updated twice a day since I actually built 
  this for myself to stop spending so much time on HN.
  
  3. And since I found myself only reading the front page on my 
  commute to  work, it aggregates all the front page articles into 
  one nice page instead of opening one article up at a time.

Not to take away from the OP, but would love any feedback on the whole "less is more" approach.

[1] http://hn.dinopost.com/

This is cool. Finding myself spending too much time on HN, I'm looking to write something similar myself with the purpose of making a weekly digest of only the top stories.

Looks like a few [1][2] have already made the efforts to write filtering based on karma score.

Edit: The OP's app is very close to what I want, but instead of limiting to top 10, use a point threshold directly.

1: https://github.com/fractastical/Hacker-News-Filter 2: http://hnapp.com

Thanks for the feedback. I'll probably open source it at some point. Right now, the components are somewhat tightly coupled.

I prefer the way this one preloads the story contents; I take the subway to work so I have a while without internet access. It would be nice to have comment links at least though, so there's the option to read them if it seems interesting. And the 'open all' button doesn't work for me, assuming that's what the '^' in the top right corner is supposed to do.

Hi Kevin, Thank you for your feedback. The '^' was meant to reveal a translation feature that I was working on, but I suppose 'Open All' would be a more worthwhile feature to implement. The markdown on HN makes it a little tricky to render comments (with their nesting), but glad you mentioned it [1]. Anyone second that feature request?

[1] Wasn't sure of how many people read comments before the article, or read them at all - I stopped when I found that it gave me a biased read, especially on the Show HN type posts.

Following your recommendation, I did the same, and I really enjoy it. The interface addresses many (all?) of my typical annoyances with the otherwise great news:yc app. * it swaps between comments and articles quickly * nice, unobtrusive indenting for threads * holy cow folding comments! * pleasant styling

I haven't figured out how to comment, but I'more of a lurker, so that's fine (it'll keep me from making a fool of myself too much). And there's that initial loading time with a blank, white background that is almost certainly the iPhone's fault.

Swapping over to it now that this is written!

Actually, I could be wrong, but I think the load time is coming from the fact that the developer had to move the application over to S3 in order to deal with the heavy load with this being on the front page, and with S3 not supporting gzip, it's causing a bit of a delay. Once it's loaded, however, the app is very fast in switching between pages and comments.

I apologize, I actually only meant the initial startup. The speed of everything once it starts is fantastic!

I see this delay on forecast.io as well. It could very well simply be a latency issue.

Have you seen http://hackerwebapp.com/? It's very similar and equally slick, but styled specifically to match native iOS apps.

I hadn't known that either, nice find!

Great work! I recommend adding a manifest.webapp file so that Firefox users (and Firefox OS users) can add this as an "app". The manifest file is minimal, and then just a few lines of JavaScript will give you an "install" button. https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest

+1 for an app manifest!

I will definitely do it. I am a huge fan of Firefox and my main browser is still firefox.

Ditto for Chrome/CrOS, please: http://developer.chrome.com/apps/about_apps.html

Also, please consider adding this to the Chrome Web Store so I can install it on my Chromebook. :)

Update: There's also a lighter-weight API for "hosted" Chrome apps that don't require all the features of a full "packaged" app, which would work too.

https://developers.google.com/chrome/apps/docs/developers_gu...

Added as a hosted app. https://chrome.google.com/webstore/detail/hacker-news/gdljjm...

Let me know if you can install on your chromebook.

What exactly is a Firefox app? Never heard of that. Good example would be nice.

I take no credit for this. I found the link for this in another Hacker News thread [1] and thought that more people should know about it, so I submitted it.

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

Ah nice, another one :-)

See also http://ihackernews.com/ or http://cheeaun.github.io/hackerweb/ or (broken ssl cert) https://msean5423.news.ycombinator.com.moovapp.com/, and now http://hn.premii.com/. I was looking into writing one myself.

Personally I won't be very excited before I see an app that's open source. I don't understand why somebody wouldn't share the code for such a simple thing.

> Personally I won't be very excited before I see an app that's open source. I don't understand why somebody wouldn't share the code for such a simple thing.

https://github.com/cheeaun/hackerweb

HN for Android is FOSS and it's awesome.

As for iOS, it doesn't matter whether you get the source code because you have no way to make sure that what you see is what you get (from the App store).

Yeah, I forgot to write that I was looking for something web-based. I'm not really into apps that could just be a website.

I've been using this for a while. Great execution all around. The only gripe I have is not being able to collapse an entire thread of comments. Right now you can collapse individual comments but it's not that useful for long threads.

This is a great example where a mobile web app can really shine. Throw this thing into phonegap and you wouldn't be able to distinguish it from a native app. So awesome.

Comments are collapsed due to you have visited comments before. Next time when you visit (i think after 5 minutes), it will only display new comments. Old comments will be collapsed.

I couldn't figure out best way to collapse threads and collapse comments.

This is by far the best performing web app I've ever used, nothing comes remotely close - it really and truly is amazing. Huge congrats to the creator of this.

This is excellent. I have used http://hackerwebapp.com/ on my iPhone for a while now, but I will put this in rotation to see how they compare. At first glance, they seem very similar and equally slick. A few comments/suggestions based on my experience on iPhone 5 iOS 6 Safari (presuming that OP is the creator, or the creator is in this thread somewhere):

When I collapse a comment, I think all subcomments should disappear as well. However, I understand that there are valid use cases for both behaviors. Maybe you could work both functionalities into the UI?

I don't think you should be pushing onto the history stack every time I toggle between Article and Comments view. It's weird that if I toggle 5 times, I have to click the back button in the top left 5 times to get back to the main news feed. That back button should probably just always go straight back to the main news feed view.

I encountered bugs trying to highlight text on comments. When I press and hold on a word, the word highlights as expected, but when I then release my touch, it registers a click, which then collapses the entire comment I was trying to highlight. I'm not sure exactly how Safari passes DOM events, but there's probably a way for you to identify "long clicks" and ignore them.

Several of the loading spinners you show over buttons are awkwardly positioned. It looks like you place the spinner precisely on the pixel I clicked. It would be nicer to center it over the button I clicked.

The article view screwed up on a lot of articles, but I'm sure you're aware of that. :)

I use http://ihackernews.com/ on my mobile. The only issue is that sometimes comments are not displayed because the app reach the api requests limit. Any similar issue with your app ?

Speaking of their error page, they have a typo on there. "...to many requests" instead of "...too many".

Hmm. I have not experienced that with mine, but than I don't have that many users.

Am I the only person using hnsearch to find content on HN? It seems no app developer bothers to implement a search feature in the hacker news apps. Anyway, this is a great app, thank you.

Very cool and very fast. One small request is that (on the iPhone) the app's window sizes to the viewport and so you can't scroll the address bar up out of view. On < iPhone5 this means that with both the app's nav bar and the browser's nav bar in play there's very little real estate left.

However... having added it as a desktop icon it's phenomenal (no browser chrome). Very impressed. Would be great if it told you at the start that this was the outcome from adding it :)

Apple provided way to hide the address bar didn't work on my app. But I have figure out a way to do it. I will add it soon.

Awesome job on this! My only complaint is there's a bit too much padding in the list to make browsing articles practical on an iPhone5 . The text size option helps a little bit with this, but really if you reduced the padding that would give it just the right balance between readability and practicality. Right now it is pretty, but presents too much of a pain to try to see an entire front page's worth of results.

This is incredible. Readability, speed, interface, just a great job all around. Maybe mobile web apps are the future after all :).

Great work! Could you give some tech details about which framework/tools have you used?

I wonder why the creator hasn't answered this question?

I did few places, or other replied to this questions in the thread.

I am not using any framework, but I am using zepto and fastclick library.

Fast, lovely, and amazing.

But it tries so hard to hide Safari that it makes a few very common use cases impossible.

1. You can't back up if you visit a web page

2. You can't share/email an article as you can in safari.

I will be using this daily, but NOT pinned as a web app in ios7

Agree very much about the annoying inability to go back!

This will still be my "go to" as a result: http://cheeaun.github.io/hackerweb/

hi this is awesome, thanks for sharing!

I do have a problem with it on the iphone, it only shows like 2 or 3 items, then below this its blank - however you can click the blank spot and the link works.... anyone else?

I see the same thing on an iPad (iOS 5.1), where a screenful of items show but everything after the scroll is invisible... until you hit the spot where the comment link should be and a few more items become visible.

I am on 5.1 as well (5.1.1)

I have the same problem. Also on 5.1.1. The display is refreshed if I rotate my phone back and forth.

This looks brilliant!

I was using hacker news as an example to espouse the benefits of a decent mobile design the other day... another user tried to tell me that Hacker news was perfect for mobile browsing (https://news.ycombinator.com/item?id=6171701). I present your work as compelling evidence to the contrary.

In all seriousness though - this is the sort of thing I have been meaning to get around to myself - thank you.

Didn't work so well for me on mobile. Not at all. However it is excellent on my desktop.

It really puzzles me that HN doesn't have a mobile version. It just doesn't scale right on mobile. It sucks and it shouldn't because its design is not that complex.

Looks just as great on desktop as it does on mobile. Good job.

I really love this trend of having a scrolling ListView as a sidebar in web apps, similar to what many tablet apps are doing. The ones that come to mind: Gmail Offline, Quartz, Feedbin and Evernote (to an extent)

There was also a news aggregator site that was on HN a few weeks ago that did something similar. Sadly, I can't remember the URL for the life of me. Anyone remember it?

You should add a target="_blank" to your article and HN links so they get opened in safari instead of the app context.

It would also be nice if you would store the current app state in localStorage, because the app is reset when you switch to another app and you have to navigate/ scroll back to the article/comment where you left. (Damn you apple for your broken html5 app approach! shakes fist)

I do add target="_blank" to links when you click on it. Not sure why its not opening in Safari. It used to open in safari, but not sure what happened.

Excellent. From a usability standpoint, please design a blank state for the content area on desktop, it is not clear at the moment. @publicfig "EDIT: I would honestly like to see this scale on desktop, just because it's a pretty great interface for Hacker News. " also backs this up.

How? Instead of the orange, make it light, and add label + icon, (like in Mail.app) to show nothing is selected. Just my 2c.

Not only useful in mobile. I changed the url in the HNTab[1] to this.

http://snappy-app.com/s/show.php?pass=8fb13fb41739e677265bbc...

[1]: https://github.com/swerage/hntab

Well done! Is there a way to see more articles once you reach the bottom? Also what font did you use for the webpage icon?

No, there is no way to see more articles. I never clicked on the next button on HN so i didn't bother to implement that. It should be easy to add it.

I am using icomoon.io for icon font.

What is the font used for the webapp icon here? http://hn.premii.com/a/icon/ios/Icon-72@2x.png

Sorry, i had to find original PSD to find the font name. Its called Ribbon. I doesn't render like this. I modified in PSD to make it look like this.

Thanks!

I actually really like this as a desktop application as well. I would honestly consider using this over news.ycombinator.com if it were more fully featured (like allowing one to log in and post comments).

If you don't plan on monetizing this, I think a lot of people would love for you to open source it. This is quality work.

This seems well done but the menu bar at the top takes a bunch of screen real estate for little use. Not really sure of the benefit of this website over HN. HN is one of the rare sites that actually renders fine on mobile just the way it is. Everything is there, and it loads quickly.

Sure it renders fine, but it isn't particularly suited for small screens and touch interactions.

I use this on a daily basis on my iPad. The best part is that it loads articles within the same tab. That doesn't often work for many stuff (chrome experiments, for eg), but for most purposes, it saves me the hassle of shifting tabs and hunting for content.

This is awesome!

Minor gripe: tapping the top of the screen on iOS does not scroll to the top on the front page.

I will add it.

I may be suffering from dumb user syndrome, but is there a way to log in to reply to comments?

You are not dumb. Unfortunately I am not supporting login. I don't want to store users' login id and password and I am not sure the best way to do this without storing user's data.

That's what I thought. Thanks it is a great mobile version.

Looks great but unfortunately doesn't work on WP7.5 (gets stuck 'Loading'). I know this isn't a huge demographic of HN readers (possibly just me) but it would be great if it was possible to fix this!

Sorry. There is no plan to support WP7. I will have to rewrite it, and performance won't be as good as this for non-WP7 users.

How do you parse article text?

I use readability. Works for 90% of the articles posted on HN.

Cool, but can it render its own site? Click on this article from within the app...

..... No: http://o7.no/11PNaX2

Just shows the menu links and "Loading"

This is really great (except for the Orange!). But love the interface. Kudos.

My only gripe with all HN interfaces is that none of them can login and hence are read-only. You cant really comment on anything.

You can change to a dark theme in the settings.

I have not implemented login/posting. I don't want to store users' login id and password and I am not sure the best way to do this without storing user's data.

What is the tech stack used to build this? I see lot of "/x-premii" tags in the source. Did you build any JS framework? what drives the UI - bootstrap? And watz the backend?

Love it! Nice work. Can I suggest you wrap the web app up using trigger.io (or something similar) and place it on the app stores. I'd happily pay a few squid for this!

If you are on android, you can download this as a native app from here. https://play.google.com/store/apps/details?id=com.premii.hn

This is the best Hacker News Android app I've seen!

Would it be possible to have the refresh icon spin instead of that weird animation, or is that a result of it being a web app?

For the default browser on the S3 (on mine at least), the settings menu only shows up if you click it, go to an article/comments, and then back to the main screen.

The link within the thread that breaks out of your mobile web app should open in standard Safari - this way I can easily email or SMS the link to a friend. Nice job.

Superb job. You should build an RSS app.

One small nitpick: On Ask HN page you can open the threads only if you click on the comment link. Clicking on thread names doesn't work.

I built a small app for seeing hourly archived top 10 posts:

http://tthn.doublewapp.com/

hitting the system back button on android should go back in the web app. currently it just closes the page.

I recommend you look at how angular handles this.

As far as I know, web apps don't have direct access to or control over the Android back button. I think the solution is to add history events, because in browsers the Android back button defaults to navigating back in history, but this web app already seems to be doing that.

it's actually not on my nexus 4 and 7. which is why I made the comment. the web apps I make with angularjs do.

also this isn't about direct access to hardware buttons. hitting the system back button on android devices while a web view is in focus is the same as : window.location.back()

How do you make the "panning" so smooth?

I really want to know what was done to get this kind of smoothness and performance in a web app.

Do you mean the vertical swiping? If so, it's smooth because there's nothing special going on. It's just the page being swiped up and down, i.e. native behavior.

I mean the horisontal swipe when you click an item. Are you using Android? The smoothness of this site is revolutionary compared to the lag you're normally used to.

transform: translate(0, 100%) or transform: translate3d(0, 100%, 0) for hardware acceleration. I have tested with both, and it works great. Trick is try not to do anything else when animating.

-webkit-transform: translate3d(). Hardware accelerated.

Thanks so much. I've downloaded a few HN apps and they have not been working very well. This shall replace them.

If you are on android, you can download this as a native app from here. https://play.google.com/store/apps/details?id=com.premii.hn

iOS. Only option is to add it to your home. I have build iOS app, but haven't submitted to the app store.

I've added it to the home screen. It's fantastic apart from 2 issues (iOS):

1. Swapping between comments and the article (like 5 times) and then wanting to get back to the main page. (I have to hit back the same amount of times as I swapped.)

2. When clicking a link, there is no way to get back to the main page. (is there a way to get the status bar back when browsing via homescreen?)

I have been using this for a while on my Nokia WP 8. It works great and is really fast. Thank you for the effort.

Nice design and execution. Would love to see this in the Chrome Web Store so I can install it as an app.

Looks awesome on Win7/IE10, but doesn't work on WP7.8 :( Gets stuck on the loading animation.

i know it doesn't help, but i can confirm it works really well on wp8..

Sorry not supporting WP7. I will have to rewrite the whole thing and performance will suffer for non-WP7 users.

Understandable. Thanks anyway - great experience!

Hey, you should definitely post this to the Firefox OS marketplace! this is what we are missing.

Anyone know a good library for getting the header menu to stick like that on all mobile devices?

iScroll is the industry standard for this. I've seen it used on a lot of web apps and it works pretty well.

http://cubiq.org/iscroll-4

Nice job, though I’d like to see news.ycombinator.com/best included, I only read that. :)

For the legions of people undoubtedly wondering, this also works smoothly on BB10 devices.

Really. Could you send me screenshots at [my hn id @ nj.premii.com]

Sent

Thank you for this app ! I haven't tested the whole site yet but I already love it !

First time I've ever seen a lag free web app on my Galaxy S3 (stock browser).

There's a slight delay after pressing the gear. Makes the site feel sluggish.

Which OS, browser are you using?

iOS Safari

I was going to build something similar actually. We'll see if I ever do. :)

How did he extract the content of the sites? "Readability" algorithm?

If only HN proper looked this good by default.

Looks nice, but i miss infinite scrolling.

Orange in such big area is blinding.!!

Very good! I think kind of old though?

nice works. The first of this type that I liked, but I'd like to see the actual page of the news.

This is better than the stock HN UI.

Nicely done :).

I would pay for the source code.

How much we are talking about?

j/k. I will upload source code to github tomorrow. https://github.com/premii/hn

This is really awesome. Thanks!

I wish the real HN website would get a facelift...I mean seriously, at this point it's just lazy.

Killer. Bookmarked. Thanks!

awesome work.. is this open source? Can someone share the link please

many thks

No, its not. PM me if you want source code. You can use it however you like it without any restriction.

How to PM? When I click on your userid, it just shows submission & comments.

I would love the source code just to read through as well. I also cannot PM you as it won't let me.

Hi I would love to see the source code. You did a very good job.

I'd love to see the source code too please. I'm working on a side project and would love to make it as smooth as this.

send an email at [my HN user id @ nj.premii.com]

Thanks, sent!

I don't see a PM function so I'll leave a message here. You can send a link to my email if you prefer.

https://onetimesecret.com/secret/kaomwielzr6q358j7g19z5j0ker...

password is your first employer.

Great work - thanks!

This is awesome!

Awesome work!

very cool

Link won't load so I'm not sure what it is. I personally like HackerNode on my iPhone, though.

Maybe once it loads I will change my mind.

Nvm, just loaded. Very slick. Awesome site. I like it a lot.

Reply on news.ycombinator.com