MrAwesomeSauce

Thanks for this, I usually prefer smaller fonts when reading online but I do agree that the official Hacker News site is quite small. More than a few people have mentioned they would prefer having the ability to increase size/line spacing so I'm going to try to add this.

Yep, like dkrvt mentioned I'm using sw-precache to generate the server worker file. The file in my root folder that you're seeing is sort of a placeholder which gets copied to the actual bundle folder that gets deployed (you don't see it in the GitHub repo, you'll need to build the app locally [ng build --prod] to generate it]. sw-precache then lets me run a simple command which sets up the service worker on the fly based on some simple configurations.

Here's an excellent article btw that helped me understand how to set up sw-precache with an Angular CLI app (https://coryrylan.com/blog/fast-offline-angular-apps-with-se...)

Good call, that is kind of weird. Will fix it :)

Yeah I've only briefly tried Yeoman quite some time ago, but they are quite similar in terms of generating scaffolds.

And thank you, I appreciate it! I tried my best to flush out every single step I had to go through while building the app so I'm glad you liked it.

Cool, there a bunch of clients available but not too many that let you login and comment/upvote/etc. Thanks for sharing!

Thanks for this, I was actually thinking about this when I was playing around with the app on mobile today. Might have to limit the scroll to top only when the user is navigating between pages and not when the user goes back.

Of course! So the blog itself is built with Jekyll (https://jekyllrb.com/) and hosted on Github Pages. This makes it easy for me to just create new posts with markdown and GitHub pages provides free hosting!

I tried to keep things as minimal as possible so I'm glad you like it. For the code highlighting, I'm using Prism (http://prismjs.com/index.html)

Thank you :)

The CLI is just a command line interface that makes scaffolding and generating a project a lot easier. Adding new components, routes, services, etc... can be done with simple commands. Angular seed gives you a skeleton that you can start your app with, and the quick start provides a super barebones starting point with just a single AppComponent if I'm not mistaken.

I personally enjoy using the CLI and haven't tried the seed myself. If you're interested in how I set up this app, I wrote a blog post (http://houssein.me/angular2-hacker-news) detailing each and every step using the CLI so I hope it helps :) (this was done a few months ago so the progressive elements such as the Service Worker and manifest isn't included)

The two main bundle files (main and vendor) used to total around that number, but adding Ahead-of-Time compilation reduced them to 589 KB uncompressed and 115 KB gzipped, which was pretty cool.

Thank you! I agree the styling could definitely use a bit of improvement, and Vue HN looks so clean so I can definitely encapsulate similar styling

Thank you for this, this is exactly the kind of feedback I appreciate so much.

It was my intention to have people follow along step by step, so I apologize for having some unnecessary complexity in the middle that sort of stopped you from following along. I'll try and update my post around this area to make it a little more streamlined. I felt like these points weren't really necessary to mention as I omit them once I begin to use the unofficial API. But my apologies, I should have addressed this better.

Yeah someone else mentioned they were seeing the same thing, weird I didn't see this issue at all. But he did solve it by just manually updating the value in angular-cli.json (https://github.com/angular/angular-cli/issues/1900) so give that a shot if you haven't already.

Put a note in my post in case anyone else experiences this issue.

Oops, thanks for catching this. Just updated it.

I built a Hacker News client with Angular 2 (https://angular2-hn.firebaseapp.com) and shared it here a short while ago (https://news.ycombinator.com/item?id=12438119). Got some very useful feedback and thought it would be nice to write a post on how I built it. I go through building the entire app step by step from scratch solving each problem along the way.

As always, I hope you find it useful and would appreciate any feedback.

Just fixed this. Each comment/post doesn't download through a separate request anymore. The main page now takes ~ 3.8 KB on my site, almost half of the original site :)

And done. With this absolutely amazing API (https://github.com/cheeaun/node-hnapi/), items don't load individually and everything loads roughly with half the bandwidth than right here on the original site.

Not to mention that requests now get cached :)

Okay weird, yeah not sure why it's happening for me.

And thanks so much for spotting that, will fix that up.

Okay it's not the iPhone, it's just Safari for some reason. Tried on Chrome and everything loads perfectly fine (I like the experience on mobile). I can add stories and everything no problem.

On Safari I don't see any requests and clicking add story or Reddit does nothing :(

Update: Just fixed the comment section to not load individually async. It now loads at a proper speed. A post with > 1000 comments now takes ~ 200ms and 130KB (where it used to take ~15X longer).

Appreciate all the feedback folks. I'll be updating the post pages in the next few days to do the same to make this app substantially faster.

Fair point, I can see how that can feel like you're left at a random location.

One other thing I noticed is that stories don't seem to load on my iPhone, but works fine on browser. Not sure why though.

Thanks! Yep absolutely speed definitely needs work. And yeah for sure apps like Materialistic, HackerNews-React-Native are way more fully fledged.

This is cool! Thanks for sharing. I like how you can open the comments inline. One thing I think that might be cool to add would collapse button that shows (bottom right the screen maybe?) when you open inline comments. It would be nice to collapse the comments without having to scroll all the way back up.

Very good point, I have the loading indicators show immediately if the response isn't received. Any slight internet connection issues or even just a slight stagger for the requests to complete, it'll show the loading icons.

Thanks for the suggestion. I'll consider delaying the loading behaviour so it doesn't show all the time when the app is performing normally.

Thank you. And really eh? Hmmm haven't tested on an Android device throughly and it does load pretty decently on my iPhone.

But as someone already mentioned here, there definitely is some work that needs to be done to speed up the requests in general. There's quite a large transfer that happens on every page because of the way I load each item individually. I'll have to find a way to speed that up.

Yeah it's completely different. Will definitely suggest looking into it a bit before making the switch especially if you're planning to do so for a large project. There's quite a bit of overhead you most definitely would have to deal with.

Oh thanks for that mate will definitely look into this, especially the free tier

Thank you! Yeah I was thinking that too, I need to look into caching the requests so it doesn't get hit every single time.

Cheers mate, glad you like it :)

Thank you, you're right I'm loading every item individually async from the official API. Not only are the requests unnecessarily large, it can take a while to load with a large number of comments. Definitely something to work on and fix.

Yeah I know, another Hacker News client? There seems to be a new one everyday.

I wanted to build one with a responsive UI that would provide a `native` feel regardless of which device you use. Decided to use Angular CLI, RxJS and Webpack to do the job.

There are definitely areas of improvement and I would love some feedback :)