How I built a Hacker News mobile web app, Part 2 | Hacker News Reader

How I built a Hacker News mobile web app, Part 2

cheeaun.com

92 pointscheeaun21 comments

Just to remind you of a comment from PG when you posted part one of this nearly a month ago-

s/the/a

You wrote A Hacker News mobile app. There are quite a few others.

While it looks nice and all, There is nothing any more or less official for this mobile web app versus any of the others that are already out there.

I very seriously doubt the OP is trying to pass this off as the "official" Hacker News app. I hate geeky pedantism, but the "the" in this situation may be in reference to this being the only web based hacker news app he knows of.

Then perhaps "My" might have been a better word choice. The title is misleading- This is well plumbed territory.

Not that his app isn't neat- The way he emulated a native app is technically interesting. But the presentation as if it were an official app is misleading.

Here are two others I happen to have bookmarked.

I suspect there are others, as well.

http://hn.gethifi.com

http://ihackernews.com/

Hello! Here's a friendlier way to say it!

Thanks for the post! I find the write up technically interesting!

You should change the name because there are many other projects called HN Mobile and because none of these are official. Here are other apps called HN Mobile or Hacker News Mobile:

- https://github.com/ctice/hn-mobile

- http://www.newmediacampaigns.com/blog/hacker-news-mobile-fro...

- http://hn.gethifi.com

- http://ihackernews.com

Remember, creating a project and submitting a link to HN isn't personal, just a lot of hard work and luck! Happy Monday!

You're right, I was in a grouchy mood this morning. I should have been nicer.

Sorry about that.

I was also thrown off by the "the HN mobile web app" and thought it was official. I came to the comments to say, "could you please set the viewport on the regular website and save me the need for an app?", which I still want to say, but not to a third-party developer.

But really, that looks great. Love the attention to detail! I like mobile web approaches a lot. And getting that native look and feel seems to be a big reason (sometimes unspoken) why clients don't want to use the browser. Nice to see some effort put into breaking down that barrier.

Thanks again for another great post.

I agree entirely about HNmobile being a non-standalone app. I've being working on something similar and after considering deploying it as a standalone webapp or even wrapping it with PhoneGap and submitting it to the app store I've gone with a non-standalone web app. Basically if a substantial part of your 'app' is opening links in mobile safari then keeping the app in a traditional browser environment (with back button etc) gives the best user experience.

This is seriously one of the best mobile HN apps I've seen. What impressed me about the article is all the polish for simple UI components like the navbar.

First of all, it looks nice, so congrats, I'm sure it consumed many working hours.

But why didn't you go native ? Your controls are pretty much the OSX ones, why did you concentrate so much in the iOS CSS look-a-like interface ?

Also, you could go hybrid, mixing native controls with a webkit view for the data.

Nevertheless, good work.

I believe the entire point of the effort was to see how close to native he could get a web app version of HN. Half the value of this is the deep dives he gives us in his blog post about just how far one can push HTML/CSS these days.

Looks great. I love the amount of effort you spent in CSS to make it look native. A couple feedback notes:

1. You might want to add the following to remove the Mobile Safari UI chrome when users add the app to the Home Screen:

2. On the iPad, the clickable regions are a bit awkward. The external link takes up a good 95% of the menu item. The view comments link is (logically) the button, but it's too small relative to the importance of the discussion on HN.

Regarding 1. The author states that he purposefully did not include the code to remove the chrome and making it a "web app", since all external links opens up in Safari.

Great work from a technical perspective!

Off-topic: Best way to read HN on mobile IMHO is just to take the Android stock browser, surf to HN and forward the article links with a long press on the article titles to Readitlater or similar services without opening the articles. Fast, simple and convenient (and a great example for Android's intents). I think on iOS there some more steps plus the HN site isn't well readable in iOS' stock browser because of the missing word wrap—maybe that's the reason why there are so many HN apps on iOS while we have only one on Android.

"As long as there's no way for me to simulate a built-in browser in a web app, HNmobile will remain being a non-standalone app."

I'm not sure if you had a look at it yet but there is a PhoneGap/Cordova plugin called ChildBrowser that may do what you want here. I can help you getting setup with a PhoneGap project for your app if you want!

"Since it's hosted on another domain, the API supports CORS so that HNmobile can do cross-domain XMLHttpRequests."

Why don't you use JSONP?

JSONP is considered by most to be a hack and a security risk. CORS is extremely easy to implement, as it only requires you to send some headers to the browser. For example, in a node app I recently wrote, adding CORS was just a matter of adding these lines:

  var allowCrossDomain = function(req, res, next) {
    aptUtil.log('using cors to allow for cross domain xhr');
    res.header('Access-Control-Allow-Origin', '*'); //any domain can submit requests to us.
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
  }; app.use(allowCrossDomain);

Regarding the error "ReferenceError: Can't find variable: atomicFindClose"

We often find with our Javascript exception tracking that it catches ALL javascript exceptions, which as often as not actually involve javascript from external sources. I'm not sure how this would sneak into mobile safari (unless it was being used on another device) but we often get exceptions from Chrome plugins and the like, which we cannot control.

I am planning to build native iOS up using some inspiration from this webapp (with proper credits, of course). I have ~8 HN readers on my iPhone at the moment, and event those who work (not all do), suck for some reason or other so I am using Lim's web app to read HN on my phone but I still want to have it as a native experience.

I think that's worth a try :)

Mac Menu Tab App using this Hacker Nres mobile app inside - http://bit.ly/xAdJ5N

My hope is that Hacker News adopts this as its official mobile app. I'm getting sick of the tiny font on my iPhone.

Great stuff, thanks for sharing.

Reply on news.ycombinator.com