Hacker News new | past | comments | ask | show | jobs | submit login
How I built a Hacker News mobile web app (cheeaun.com)
308 points by bearwithclaws on March 4, 2012 | hide | past | favorite | 56 comments

Thank you for taking the time to share this so carefully. I think many people getting started in developing UI heavy applications fail to understand that it is all about solving many orthogonal problems, and to do each one carefully is what the job is all about.

People that lack this expectation replace it with the naive thought that there is a single library out there that can do it all for them, and they spend countless time finding it as opposed to breaking up a problem into smaller pieces and attacking each one.

You've consolidated many interesting techniques here, and it's a valuable resource not only in philosophy, but in general hackery.

Are you planning to flesh out the app more, say to allow users to login, comment, upvote?

Yeap, those will take some time since I'll have to store the username and password in the app. Still not sure how I should implement it.

This is impressive but it must be less work to just use Cocoa. Isn't the point of mobile web apps that they're cross platform?

Yes, it would definitely have been lesser work to just use Cocoa. And yes one of the main reasons for choosing mobile web apps is that they are cross platform.

Having said that, I still applaud the guy taking the time and ploughing in so much effort into something that he wanted to do. I appreciate the true hacker spirit in striving to create a webapp that looks and feels totally native. Kudos to the OP.

Web apps also let you deploy changes instantly to 100% of your users as opposed to going through an app store update. That's huge. You have no idea how long users will take to update their apps.. and some never do.

Great work and a fantastic writeup. One crucial interaction missing for the native scrollview feel is tapping the time in the status bar to quickly scroll back to the top. Does mobile safari expose that event?

Edit: it scrolls to top if you tap the navbar. The anim is a bit wonky, but it works.

On a shameless plug note,check out HackerNode.A free iPhone/iPad/iPod app for all iOS(4.0+) devices.


I pushed an update today which grey out visited links and fixes some bugs for the iPad interface.It should be approved in a day or two.

Just downloaded it. A couple of suggestions:

- The design could use some tweaks. (Poor icons in the home screen, not vertically aligned title bar text, ugly "comments" title bar that scrolls with you, inconsistent orange color (click a link and you see the bottom bar is a different color to the top bar), puke color in the "pull to refresh", has a very non-native feel with the custom list view, awkward arrow that is low res in pull to refresh)

- No comment indentation so everything is difficult to follow in the comments

- No ability to login and comment?

- Awkward click regions on the list view. It should only allow you to press on one or two buttons, but instead I can press on the timestamp, the comments, the title or the background. It should be clearer

It's really quick, though, and that's lovely. Keep at it!

Well..You do have an eye for detail.The title bar text is not vertically aligned indeed and I have missed it.

Login and comment will take some time, but I will try and see what I can do about the colors (especially the puke color on the drag refresh header!).

Thanks for the feedback!.Also please do check it out on the iPad.Thats where I have spent a lot of time.

That's a good start and i like the UI. I had some issues on the iPad 2 where transitions weren't really smooth but kind of laggy. The comments could be better arranged (some kind of tree were not only the top-level comments are different). Ashamedlion does have a point about the weird colours and the few refinements. Still the best hacker news app i have tried and will be looking forward for updates. Keep up the good work!

Thanks!.For the comments I am going to draw the table separator in a way such that it shows the depth of the comment below it.I dont want to waste space on such a small screen.

I can't seem to comment or upvote in your app. Without that, it has little value to me. Apart from that, it is quite good!

Or am I overlooking something?

At the moment those features are not available.But they are next on my list and I will be pushing them soon.

To be honest I cant seem to make up my mind on a good user interface for upvoting and commenting on a mobile device.

Is this open source? I'd love to implement some of the changes mentioned above.

Sorry as of now I have decided against open sourcing the main project.But I might decide to do it in the future.

However HackerNode is built on top of another library called three20 which I have forked and I have open sourced my fork at https://github.com/nodemaker/three20

Impressing, but I can't see why people strive for native look and feel. Take a look at the Readability web app, it really doesn't feel like a website at all (somehow they remove the Safari-chrome on the iPad, anyone know how?). When you go for native theming, you will have to do it for each platform. It just feels weird to get and iOS menu on your Android.

The same is true for the Kindle web app: http://read.amazon.com

Direct link to the web app: http://cheeaun.github.com/hnmobile/#/

Hey, I build an Mac OSX menu tab app "wrapper" with @cheeaun code, check it out! http://guidefreitas.wordpress.com/2012/03/04/hacker-news-men...

Haha, that is great!

Looks awesome. That being said, it doesn't load at all under Android Gingerbread.

It doesn't load either on my Nook Color. Bizarrely, it seems to work fine on my Mac under Firefox...

Awesome! This is so far the most beautiful and readable HN App I have seen on the iPhone and iPad.

Except: There does not seem to be a way to post comments or to vote. Is there something I am overlooking?

Doesn't scroll on my BlackBerry Bold 9900. The OS6/7 devices use a Webkit-based browser, so I'm a little surprised that Webkit-specific CSS didn't work, though that may have been only for Safari.

You've done an interesting thing, pushing CSS3 to replicate the iOS interface. But, why replicate the iOS UI in a web app? Web apps are supposed to be platform-neutral; a native interface shouldn't be part of that, in my opinion. Wouldn't a mobile-friendly stylesheet make more sense?

Mobile web apps should work in more places than safari on the iPhone. Otherwise call it a "mobile safari app".

I tried the app in mobile Firefox, no luck. I tried it mobile Opera, no go. Also, I don't understand why anyone would use Apple's native interface graphics on purpose for a web app. I get why native dev it makes things easier to build than custom icons etc, but on the web, you are not on Apple's leash no more, be free!

I think he might have saved himself a lot of work if he just read the official Apple guides on developing web apps for Mobile Safari: https://developer.apple.com/library/safari/#referencelibrary...

This is fantastic! Very well-designed and it is the best "fake" iPhone app I've used in terms of responsiveness.

You should set the apple-mobile-web-app-capable meta tag:


You didn't read the article:

  > Tapping on links will launch Mobile Safari, which jumps 
  > out of your standalone app. There's a way to prevent that
  > and make it load inside the standalone app, but since the
  > toolbar is gone, there's no Back button and you can't go back.
Unrelated note: what's best practice for quoting on HN?

Nice work. On my iPhone 4 it doesn't seem to stop loading..

I understand wanting to use CSS b/c I've had to do similar things for mobile web sites.

However, if he's just developing for iOS, why not create a new web app in Dashcode?

Tried it on a webOS phone. No dice =( Bummer.

I learned some new stuff about CSS! Motivated to create my own mobile web app now. Thanks for the in-depth explanations.

the -> a

This reminds me of the Spartan project and all the money FB is burning to get around APPL policies. I think in the medium and long term this overly restrictive appstore strategy and the limitations of mobile webapps are going to backfire, similarly to how Nintendo's 3rd party policies of the '80s backfired soon after the NES. Initially it made a ton of money, but then it lost the market to the likes of Sega, Sony and MSFT.

I've just finished using the tappable library the article references and found that it does work very well.

If you add commenting this would be a complete replacement for desktop viewing of HN for me!

This is a bit unrelated but anyone know which font is used in the website logo?

Graublau Sans.

Thank You.

Great stuff! Thank you for the detailed writeup as well!

The details are fantastic. Great work!

Congrats! :D

since we are on the subject -- what are the features you missing on HN the most?

It might be just me, since I am a newbie, but how do people keep track of replies to their comments? The only thing that notifies me is a change in karma and then I hit my profile and browse my own comments. Is there another way?

Not that I know of. If you're anticipating a reply, you generally just have to remember to check.

Conversations between individuals are de-emphasized in exchange for content and a variety of ideas. I think the effect is good.

I agree. What you said actually just happened. I remembered that need to check for possible answers to this to reloaded the page and came back here. I guess it's working for everybody.

I don't believe there are any 'push' notifications, but you can use the "threads" link on the top bar to see each of your comment threads and scan for replies.

Not ideal, but it's still better than either remembering to check the discussion itself.

I use Notifio. And while it still works, it's no longer being worked on and will probably stop working soon.

Thanks for sharing this.

so complicated

Does anyone have a reasonable explanation as to why HN does not have a mobile stylesheet?

It's on our todo-list. It's just about #50.

HN is a side project. And what matters most about HN is content, not formatting. So this sort of thing is two steps removed from top priority.

I would be happy to provide one to you. Where do I submit a pull request?

By the way, one of the main reasons I bought an iPad stems from the fact that HN comments were so hard to read on my iPod Touch. And I'm a student who doesn't have a lot of money to buy every latest Apple gadget. So it is pretty important to me. ;-)

pg - in that case, wouldn't it be worth delegating these tasks? I'm sure there are a lot of people on here that would be more than happy to contribute.

Am I reading it wrong, or he's admitting that he's ripped off the images for his application right from Apple ? That's not exactly legal, in my book...

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact