
Hacker News Web App for Mobile - EtienneK
http://hn.premii.com
======
thekingshorses
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](https://play.google.com/store/apps/details?id=com.premii.hn)

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

~~~
thekingshorses
I am using readability.

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

~~~
juretriglav
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!

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

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

~~~
cpprototypes
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?

~~~
c2prods
+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?

~~~
adrianlee
+1

------
MatthewPhillips
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](https://developer.mozilla.org/en-
US/docs/Web/Apps/Manifest)

~~~
tjohns
Ditto for Chrome/CrOS, please:
[http://developer.chrome.com/apps/about_apps.html](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. :)

~~~
thekingshorses
Added as a hosted app. [https://chrome.google.com/webstore/detail/hacker-
news/gdljjm...](https://chrome.google.com/webstore/detail/hacker-
news/gdljjmpecaafiaedefdogicdipcnmace?utm_source=chrome-ntp-icon)

Let me know if you can install on your chromebook.

------
EtienneK
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](https://news.ycombinator.com/item?id=6177361)

~~~
nkuttler
Ah nice, another one :-)

See also [http://ihackernews.com/](http://ihackernews.com/) or
[http://cheeaun.github.io/hackerweb/](http://cheeaun.github.io/hackerweb/) or
(broken ssl cert)
[https://msean5423.news.ycombinator.com.moovapp.com/](https://msean5423.news.ycombinator.com.moovapp.com/),
and now [http://hn.premii.com/](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.

~~~
devcpp
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).

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

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

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

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

------
baddox
This is excellent. I have used
[http://hackerwebapp.com/](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. :)

------
meleva
I use [http://ihackernews.com/](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 ?

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

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

------
petenixey
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 :)

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

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

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

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

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

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

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

~~~
pudquick
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/](http://cheeaun.github.io/hackerweb/)

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

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

~~~
HPLovecraft
I am on 5.1 as well (5.1.1)

------
hugofirth
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](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.

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

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

------
chris_engel
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_ )

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

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

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

[http://snappy-
app.com/s/show.php?pass=8fb13fb41739e677265bbc...](http://snappy-
app.com/s/show.php?pass=8fb13fb41739e677265bbc9078fc4a4f)

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

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

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

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

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

~~~
mahyarm
Thanks!

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

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

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

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

------
enduser
This is awesome!

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

~~~
thekingshorses
I will add it.

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

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

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

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

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

------
igvadaimon
How do you parse article text?

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

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

..... No: [http://o7.no/11PNaX2](http://o7.no/11PNaX2)

Just shows the menu links and "Loading"

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

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

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

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

~~~
thekingshorses
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](https://play.google.com/store/apps/details?id=com.premii.hn)

~~~
signed0
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?

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

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

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

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

[http://tthn.doublewapp.com/](http://tthn.doublewapp.com/)

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

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

~~~
airtonix
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()

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

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

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

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

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

~~~
thekingshorses
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](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.

~~~
rcconf
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?)

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

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

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

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

~~~
jimbobimbo
Understandable. Thanks anyway - great experience!

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

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

~~~
ryanglasgow
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](http://cubiq.org/iscroll-4)

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

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

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

~~~
GrinningFool
Sent

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

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

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

~~~
thekingshorses
Which OS, browser are you using?

~~~
coin
iOS Safari

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

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

------
stevewillows
If only HN proper looked this good by default.

------
message
Looks nice, but i miss infinite scrolling.

------
ankitml
Orange in such big area is blinding.!!

------
tomasien
Very good! I think kind of old though?

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

------
noir_lord
This is better than the stock HN UI.

Nicely done :).

------
tehwebguy
I would pay for the source code.

~~~
thekingshorses
How much we are talking about?

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

------
ReedR95
This is really awesome. Thanks!

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

------
scottmagdalein
Killer. Bookmarked. Thanks!

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

many thks

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

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

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

~~~
HiFaraz
Thanks, sent!

------
holgerrueprich
Great work - thanks!

------
scotthtaylor
This is awesome!

------
stephanerangaya
Awesome work!

------
sigul
very cool

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

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

