
How I built a Hacker News mobile web app, Part 2 - cheeaun
http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app_26
======
e1ven
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.

~~~
marknutter
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.

~~~
e1ven
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/>

~~~
benice
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://www.newmediacampaigns.com/blog/hacker-news-mobile-frontend)

\- <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!

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

Sorry about that.

------
pao
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.

------
shutton
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
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.

------
phatbyte
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.

~~~
marknutter
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.

------
peng
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:

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-
translucent">

<link rel="apple-touch-startup-image" href="img/splash.png">

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
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.

------
tferris
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.

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

------
snikch
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.

------
rimantas
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
I think that's worth a try :)

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

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

------
fedesoria
Great stuff, thanks for sharing.

