15 ms·

Hacker News Web App for Mobile

239 points by EtienneK 13y ago

adieulot 13y ago
Nice job, though I’d like to see news.ycombinator.com/best included, I only read that. :)
holgerrueprich 13y ago
Great work - thanks!
bauerpl 13y ago
Great work! Could you give some tech details about which framework/tools have you used?
- cantbecool 13y ago
  I wonder why the creator hasn't answered this question?
  - thekingshorses 13y ago
    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.
meleva 13y ago
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 ?
- Zircom 13y ago
  Speaking of their error page, they have a typo on there. "...to many requests" instead of "...too many".
- thekingshorses 13y ago
  Hmm. I have not experienced that with mine, but than I don't have that many users.
vxcvxc 13y ago
I was going to build something similar actually. We'll see if I ever do. :)
captn3m0 13y ago
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.
scottmagdalein 13y ago
Killer. Bookmarked. Thanks!
edgarjs 13y ago
Not only useful in mobile. I changed the url in the HNTab[1] to this. http://snappy-app.com/s/show.php?pass=8fb13fb41739e677265bbc9078fc4a4f http://snappy-app.com/s/show.php?pass=8fb13fb41739e677265bbc... [1]: https://github.com/swerage/hntab https://github.com/swerage/hntab
IanChiles 13y ago
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.
deleted 13y ago
[deleted]
petenixey 13y ago
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 13y ago
  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.
deleted 13y ago
[deleted]
igvadaimon 13y ago
How do you parse article text?
- thekingshorses 13y ago
  I use readability. Works for 90% of the articles posted on HN.
sigul 13y ago
very cool
MatthewPhillips 13y ago
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
- renke1 13y ago
  What exactly is a Firefox app? Never heard of that. Good example would be nice.
- martius 13y ago
  +1 for an app manifest!
- thekingshorses 13y ago
  I will definitely do it. I am a huge fan of Firefox and my main browser is still firefox.
- tjohns 13y ago
  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. :)
  - tjohns 13y ago
    Update: There's also a lighter-weight API for "hosted" Chrome apps that don't require all the features of a full "packaged" app, which would work too. https://developers.google.com/chrome/apps/docs/developers_guide https://developers.google.com/chrome/apps/docs/developers_gu...
  - thekingshorses 13y ago
    Added as a hosted app. https://chrome.google.com/webstore/detail/hacker-news/gdljjmpecaafiaedefdogicdipcnmace?utm_source=chrome-ntp-icon https://chrome.google.com/webstore/detail/hacker-news/gdljjm... Let me know if you can install on your chromebook.
noir_lord 13y ago
This is better than the stock HN UI. Nicely done :).
napoleoncomplex 13y ago
This is incredible. Readability, speed, interface, just a great job all around. Maybe mobile web apps are the future after all :).
dombili 13y ago
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.
EtienneK 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.
  - coherentpony 13y ago
    > 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. https://github.com/cheeaun/hackerweb https://github.com/cheeaun/hackerweb
tomasien 13y ago
Very good! I think kind of old though?
deleted 13y ago
[deleted]
marknutter 13y ago
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 13y ago
  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.
ReedR95 13y ago
This is really awesome. Thanks!
rochak100 13y ago
awesome work.. is this open source? Can someone share the link please many thks
- thekingshorses 13y ago
  No, its not. PM me if you want source code. You can use it however you like it without any restriction.
  - hashgowda 13y ago
    How to PM? When I click on your userid, it just shows submission & comments.
    - thekingshorses 13y ago
      send an email at [my HN user id @ nj.premii.com]
  - publicfig 13y ago
    I would love the source code just to read through as well. I also cannot PM you as it won't let me.
    - thekingshorses 13y ago
      send an email at [my HN user id @ nj.premii.com]
  - bandla7 13y ago
    Hi I would love to see the source code. You did a very good job.
    - thekingshorses 13y ago
      send an email at [my HN user id @ nj.premii.com]
  - 13y ago
deleted 13y ago
[deleted]
rochak100 13y ago
awesome work.. is this open source? Can someone share the link please many thks
mumbi 13y ago
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 13y ago
  Nvm, just loaded. Very slick. Awesome site. I like it a lot.
georgebonnr 13y ago
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.
devgutt 13y ago
nice works. The first of this type that I liked, but I'd like to see the actual page of the news.
publicfig 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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 13y ago
        +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?
tpetry 13y ago
How did he extract the content of the sites? "Readability" algorithm?
- thekingshorses 13y ago
  I use readability. Works for 90% of the articles posted on HN.
mbesto 13y ago
Anyone know a good library for getting the header menu to stick like that on all mobile devices?
- ryanglasgow 13y ago
  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
coin 13y ago
There's a slight delay after pressing the gear. Makes the site feel sluggish.
- thekingshorses 13y ago
  Which OS, browser are you using?
  - coin 13y ago
    iOS Safari
wp7user 13y ago
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 13y ago
  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.
chakalakasp 13y ago
I may be suffering from dumb user syndrome, but is there a way to log in to reply to comments?
- thekingshorses 13y ago
  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 13y ago
    That's what I thought. Thanks it is a great mobile version.
nns 13y ago
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.
- bgar 13y ago
  You can change to a dark theme in the settings.
- thekingshorses 13y ago
  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.
HPLovecraft 13y ago
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 13y ago
  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 13y ago
    I am on 5.1 as well (5.1.1)
- Timothee 13y ago
  I have the same problem. Also on 5.1.1. The display is refreshed if I rotate my phone back and forth.
jesalg 13y ago
Nice design and execution. Would love to see this in the Chrome Web Store so I can install it as an app.
Kiro 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.
- rimantas 13y ago
  -webkit-transform: translate3d(). Hardware accelerated.
Kiro 13y ago
First time I've ever seen a lag free web app on my Galaxy S3 (stock browser).
pwnna 13y ago
Hey, you should definitely post this to the Firefox OS marketplace! this is what we are missing.
thekingshorses 13y ago
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
- devcpp 13y ago
  Any plans to release the source code?
  - thekingshorses 13y ago
    Yes. I got so many emails for source code. I will put it here. https://github.com/premii/hn https://github.com/premii/hn
- alex_marchant 13y ago
  I serve some gzipped content off of S3, you just have to do the zip yourself before uploading, which is pretty straight forward using most scripting languages.
  - saurik 13y ago
    But then your content is going to require that support, returning gzip'd content with hard-coded headers even when not requested and unwelcome.
    - deleted 13y ago
      [deleted]
- serkanyersen 13y ago
  This is an excellent design and implementation. I'll be using this from now on :) I have one request though. when a comment is collapsed it should also collapse the child comments just like a tree. Maybe you can add reply, upvote, downvote support too. btw I would pay for this app. Thanks
jimbobimbo 13y ago
Looks awesome on Win7/IE10, but doesn't work on WP7.8 :( Gets stuck on the loading animation.
- simba-hiiipower 13y ago
  i know it doesn't help, but i can confirm it works really well on wp8..
- thekingshorses 13y ago
  Sorry not supporting WP7. I will have to rewrite the whole thing and performance will suffer for non-WP7 users.
  - jimbobimbo 13y ago
    Understandable. Thanks anyway - great experience!
enduser 13y ago
This is awesome! Minor gripe: tapping the top of the screen on iOS does not scroll to the top on the front page.
- thekingshorses 13y ago
  I will add it.
rcconf 13y ago
Thanks so much. I've downloaded a few HN apps and they have not been working very well. This shall replace them.
- thekingshorses 13y ago
  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 13y ago
    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?)
scotthtaylor 13y ago
This is awesome!
hashgowda 13y ago
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?
wenbinf 13y ago
I built a small app for seeing hourly archived top 10 posts: http://tthn.doublewapp.com/ http://tthn.doublewapp.com/
message 13y ago
Looks nice, but i miss infinite scrolling.
ladzoppelin 13y ago
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.
bookwormAT 13y ago
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.
GrinningFool 13y ago
For the legions of people undoubtedly wondering, this also works smoothly on BB10 devices.
- thekingshorses 13y ago
  Really. Could you send me screenshots at [my hn id @ nj.premii.com]
  - GrinningFool 13y ago
    Sent
tjohns 13y ago
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?
stevewillows 13y ago
If only HN proper looked this good by default.
telecuda 13y ago
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.
cohort 13y ago
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 13y ago
  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 13y ago
    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?
hugofirth 13y ago
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.
- ibudiallo 13y ago
  Didn't work so well for me on mobile. Not at all. However it is excellent on my desktop.
- rpgmaker 13y ago
  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.
mahyarm 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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 13y ago
        Thanks!
ankitml 13y ago
Orange in such big area is blinding.!!
nilkn 13y ago
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.
stephanerangaya 13y ago
Awesome work!
waraey 13y ago
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"
airtonix 13y ago
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 13y ago
  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 13y ago
    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()
booruguru 13y ago
I wish the real HN website would get a facelift...I mean seriously, at this point it's just lazy.
baddox 13y ago
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. :)
grannyg00se 13y ago
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 13y ago
  Sure it renders fine, but it isn't particularly suited for small screens and touch interactions.
Zircom 13y ago
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.
shanselman 13y ago
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 13y ago
  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/
tehwebguy 13y ago
I would pay for the source code.
- thekingshorses 13y ago
  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
DaWeasel 13y ago
Thank you for this app ! I haven't tested the whole site yet but I already love it !
JeroenRansijn 13y ago
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.
chris_engel 13y ago
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 13y ago
  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.

239 points by EtienneK 13y ago

adieulot 13y ago

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

holgerrueprich 13y ago

Great work - thanks!

bauerpl 13y ago

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

cantbecool 13y ago
I wonder why the creator hasn't answered this question?
- thekingshorses 13y ago
  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.

meleva 13y ago

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 ?

Zircom 13y ago
Speaking of their error page, they have a typo on there. "...to many requests" instead of "...too many".
thekingshorses 13y ago
Hmm. I have not experienced that with mine, but than I don't have that many users.

vxcvxc 13y ago

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

captn3m0 13y ago

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.

scottmagdalein 13y ago

Killer. Bookmarked. Thanks!

edgarjs 13y ago

Not only useful in mobile. I changed the url in the HNTab[1] to this. http://snappy-app.com/s/show.php?pass=8fb13fb41739e677265bbc9078fc4a4f http://snappy-app.com/s/show.php?pass=8fb13fb41739e677265bbc... [1]: https://github.com/swerage/hntab https://github.com/swerage/hntab

IanChiles 13y ago

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.

deleted 13y ago

[deleted]

petenixey 13y ago

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 13y ago
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.

deleted 13y ago

[deleted]

igvadaimon 13y ago

How do you parse article text?

thekingshorses 13y ago
I use readability. Works for 90% of the articles posted on HN.

sigul 13y ago

very cool

MatthewPhillips 13y ago

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

renke1 13y ago
What exactly is a Firefox app? Never heard of that. Good example would be nice.
martius 13y ago
+1 for an app manifest!
thekingshorses 13y ago
I will definitely do it. I am a huge fan of Firefox and my main browser is still firefox.
tjohns 13y ago
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. :)
- tjohns 13y ago
  Update: There's also a lighter-weight API for "hosted" Chrome apps that don't require all the features of a full "packaged" app, which would work too. https://developers.google.com/chrome/apps/docs/developers_guide https://developers.google.com/chrome/apps/docs/developers_gu...
- thekingshorses 13y ago
  Added as a hosted app. https://chrome.google.com/webstore/detail/hacker-news/gdljjmpecaafiaedefdogicdipcnmace?utm_source=chrome-ntp-icon https://chrome.google.com/webstore/detail/hacker-news/gdljjm... Let me know if you can install on your chromebook.

noir_lord 13y ago

This is better than the stock HN UI. Nicely done :).

napoleoncomplex 13y ago

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

dombili 13y ago

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.

EtienneK 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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.
- coherentpony 13y ago
  > 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. https://github.com/cheeaun/hackerweb https://github.com/cheeaun/hackerweb

tomasien 13y ago

Very good! I think kind of old though?

deleted 13y ago

[deleted]

marknutter 13y ago

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 13y ago
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.

ReedR95 13y ago

This is really awesome. Thanks!

rochak100 13y ago

awesome work.. is this open source? Can someone share the link please many thks

thekingshorses 13y ago
No, its not. PM me if you want source code. You can use it however you like it without any restriction.
- hashgowda 13y ago
  How to PM? When I click on your userid, it just shows submission & comments.
  - thekingshorses 13y ago
    send an email at [my HN user id @ nj.premii.com]
- publicfig 13y ago
  I would love the source code just to read through as well. I also cannot PM you as it won't let me.
  - thekingshorses 13y ago
    send an email at [my HN user id @ nj.premii.com]
- bandla7 13y ago
  Hi I would love to see the source code. You did a very good job.
  - thekingshorses 13y ago
    send an email at [my HN user id @ nj.premii.com]
- 13y ago

deleted 13y ago

[deleted]

rochak100 13y ago

awesome work.. is this open source? Can someone share the link please many thks

mumbi 13y ago

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 13y ago
Nvm, just loaded. Very slick. Awesome site. I like it a lot.

georgebonnr 13y ago

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.

devgutt 13y ago

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

publicfig 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      +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?

tpetry 13y ago

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

thekingshorses 13y ago
I use readability. Works for 90% of the articles posted on HN.

mbesto 13y ago

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

ryanglasgow 13y ago
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

coin 13y ago

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

thekingshorses 13y ago
Which OS, browser are you using?
- coin 13y ago
  iOS Safari

wp7user 13y ago

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 13y ago
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.

chakalakasp 13y ago

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

thekingshorses 13y ago
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 13y ago
  That's what I thought. Thanks it is a great mobile version.

nns 13y ago

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.

bgar 13y ago
You can change to a dark theme in the settings.
thekingshorses 13y ago
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.

HPLovecraft 13y ago

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 13y ago
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 13y ago
  I am on 5.1 as well (5.1.1)
Timothee 13y ago
I have the same problem. Also on 5.1.1. The display is refreshed if I rotate my phone back and forth.

jesalg 13y ago

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

Kiro 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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.
rimantas 13y ago
-webkit-transform: translate3d(). Hardware accelerated.

Kiro 13y ago

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

pwnna 13y ago

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

thekingshorses 13y ago

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

devcpp 13y ago
Any plans to release the source code?
- thekingshorses 13y ago
  Yes. I got so many emails for source code. I will put it here. https://github.com/premii/hn https://github.com/premii/hn
alex_marchant 13y ago
I serve some gzipped content off of S3, you just have to do the zip yourself before uploading, which is pretty straight forward using most scripting languages.
- saurik 13y ago
  But then your content is going to require that support, returning gzip'd content with hard-coded headers even when not requested and unwelcome.
  - deleted 13y ago
    [deleted]
serkanyersen 13y ago
This is an excellent design and implementation. I'll be using this from now on :) I have one request though. when a comment is collapsed it should also collapse the child comments just like a tree. Maybe you can add reply, upvote, downvote support too. btw I would pay for this app. Thanks

jimbobimbo 13y ago

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

simba-hiiipower 13y ago
i know it doesn't help, but i can confirm it works really well on wp8..
thekingshorses 13y ago
Sorry not supporting WP7. I will have to rewrite the whole thing and performance will suffer for non-WP7 users.
- jimbobimbo 13y ago
  Understandable. Thanks anyway - great experience!

enduser 13y ago

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

thekingshorses 13y ago
I will add it.

rcconf 13y ago

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

thekingshorses 13y ago
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 13y ago
  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?)

scotthtaylor 13y ago

This is awesome!

hashgowda 13y ago

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?

wenbinf 13y ago

I built a small app for seeing hourly archived top 10 posts: http://tthn.doublewapp.com/ http://tthn.doublewapp.com/

message 13y ago

Looks nice, but i miss infinite scrolling.

ladzoppelin 13y ago

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.

bookwormAT 13y ago

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.

GrinningFool 13y ago

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

thekingshorses 13y ago
Really. Could you send me screenshots at [my hn id @ nj.premii.com]
- GrinningFool 13y ago
  Sent

tjohns 13y ago

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?

stevewillows 13y ago

If only HN proper looked this good by default.

telecuda 13y ago

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.

cohort 13y ago

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 13y ago
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 13y ago
  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?

hugofirth 13y ago

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.

ibudiallo 13y ago
Didn't work so well for me on mobile. Not at all. However it is excellent on my desktop.
rpgmaker 13y ago
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.

mahyarm 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      Thanks!

ankitml 13y ago

Orange in such big area is blinding.!!

nilkn 13y ago

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.

stephanerangaya 13y ago

Awesome work!

waraey 13y ago

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"

airtonix 13y ago

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 13y ago
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 13y ago
  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()

booruguru 13y ago

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

baddox 13y ago

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

grannyg00se 13y ago

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 13y ago
Sure it renders fine, but it isn't particularly suited for small screens and touch interactions.

Zircom 13y ago

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.

shanselman 13y ago

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 13y ago
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/

tehwebguy 13y ago

I would pay for the source code.

thekingshorses 13y ago
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

DaWeasel 13y ago

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

JeroenRansijn 13y ago

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.

chris_engel 13y ago

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 13y ago
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.