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

http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app_26

by cheeaun • 14 years ago

92 21 14 years ago

cheeaun.com

e1ven3• 14 years ago

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.

marknutter3• 14 years ago

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.

e1ven3• 14 years ago

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/

phatbyte• 14 years ago

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.

marknutter3• 14 years ago

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.

shutton• 14 years ago

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.

xutopia• 14 years ago

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.

marknutter3• 14 years ago

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

tferris• 14 years ago

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.

peng• 14 years ago

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.

world_eggplant• 14 years ago

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.

sylvinus• 14 years ago

"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?

enoughalready• 14 years ago

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);

pao• 14 years ago

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.

guidefreitas• 14 years ago

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

fedesoria• 14 years ago

Great stuff, thanks for sharing.

rimantas• 14 years ago

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.

cheeaun• 14 years ago

I think that's worth a try :)

snikch• 14 years ago

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.

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

Related Stories