Working on a product for dead-simple CDN backed hosting for static websites with performance optimizations built in, called BitBalloon (https://www.bitballoon.com).
Shoot me a note at mathias@bitballoon.com if you're interested in trying it out.
you can have the app online and a lot faster than on S3 in around 30 seconds :)
Hey, great work! I really like it. I noticed when added into home screen, if I click through the direct link to the article, there's not way to go back. This is probably related to "apple-mobile-web-app-*" meta tags. Is there any tweak that can make it possible to go back from external article page?
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
Collapsing comment is not for thread, but it is side effect of the feature. If you visit the same thread again after 5 mintues. It will only display new comments since your last visit. All other comments are collapsed by default.
I am not sure the best way to implement comment collapse with thread collapse.
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.
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.
Following your recommendation, I did the same, and I really enjoy it. The interface addresses many (all?) of my typical annoyances with the otherwise great news:yc app.
* it swaps between comments and articles quickly
* nice, unobtrusive indenting for threads
* holy cow folding comments!
* pleasant styling
I haven't figured out how to comment, but I'more of a lurker, so that's fine (it'll keep me from making a fool of myself too much). And there's that initial loading time with a blank, white background that is almost certainly the iPhone's fault.
Actually, I could be wrong, but I think the load time is coming from the fact that the developer had to move the application over to S3 in order to deal with the heavy load with this being on the front page, and with S3 not supporting gzip, it's causing a bit of a delay. Once it's loaded, however, the app is very fast in switching between pages and comments.
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!
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?
I worked on a similar app [1] and it runs as a standalone web app on the iOS homescreen as well. A couple of things that I love about it:
1. I've done away with a lot of the features the OP has - such
as comments (unless it's Ask HN), time of post and link. This
has made it more lightweight and faster to load on slow mobile
networks in my area.
2. Also, it's only updated twice a day since I actually built
this for myself to stop spending so much time on HN.
3. And since I found myself only reading the front page on my
commute to work, it aggregates all the front page articles into
one nice page instead of opening one article up at a time.
Not to take away from the OP, but would love any feedback on the whole "less is more" approach.
This is cool. Finding myself spending too much time on HN, I'm looking to write something similar myself with the purpose of making a weekly digest of only the top stories.
Looks like a few [1][2] have already made the efforts to write filtering based on karma score.
Edit: The OP's app is very close to what I want, but instead of limiting to top 10, use a point threshold directly.
I prefer the way this one preloads the story contents; I take the subway to work so I have a while without internet access. It would be nice to have comment links at least though, so there's the option to read them if it seems interesting. And the 'open all' button doesn't work for me, assuming that's what the '^' in the top right corner is supposed to do.
Hi Kevin, Thank you for your feedback. The '^' was meant to reveal a translation feature that I was working on, but I suppose 'Open All' would be a more worthwhile feature to implement. The markdown on HN makes it a little tricky to render comments (with their nesting), but glad you mentioned it [1]. Anyone second that feature request?
[1] Wasn't sure of how many people read comments before the article, or read them at all - I stopped when I found that it gave me a biased read, especially on the Show HN type posts.
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
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.
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.
> 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.
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).
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.
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.
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.
This is excellent. I have used 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. :)
I use 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 ?
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.
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 :)
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.
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?
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.
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). 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.
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.
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?
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)
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.
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.
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.
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.
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.
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!
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.
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?
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!
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.
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.
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.
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()
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.
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.
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.
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?)
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