
Show HN: Angular 2 HN – A progressive Hacker News client that works offline - MrAwesomeSauce
https://github.com/hdjirdeh/angular2-hn
======
pritambarhate
Is there a hacker news client which focuses more on typography. I use official
hacker news site on Web. On a Retina Mac book Pro with 13-inch screen. I find
the fonts too small. Also, one major issue is the line height. Even with
browser zomming, the text lines seem to be too close together.

I wonder if other hacker news members also find this problematic.

~~~
theweirdone
Did you try this one: [https://react-hn.appspot.com/](https://react-
hn.appspot.com/)

~~~
pritambarhate
Thanks for Sharing. Much better.

------
vayarajesh
Cool, I was just getting started with Angular 2 and Typescript (coming from
Angular 1) and I think your example is just the perfect way to understand how
an app is to be made with it :)

How is angular-cli different from angular's quick start or a seed project
setup ?

~~~
MrAwesomeSauce
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](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)

~~~
Yhippa
Not sure if you've used this but it sounds like Angular CLI is very similar to
Yeoman in terms of guided app generation.

That blog post is very good BTW. I like how it goes through all of the
intermediate steps that any developer would do to make a PoC.

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

------
kswahl1
It's annoying how it scrolls to the top of the page when when you go back from
article.

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

------
csantini
This is well done, but it proves to me that we are not there yet with
javascript really replacing mobile apps, even on a such a simple app:

When you click on a news and then you go back to the ng2 app it takes more
than a second to load back the js code when compared to any native HN app.

This is a big limitation for a news reader: of course the javascript app
cannot stay in memory when you leave the page and then come back to it.

~~~
codingdave
That sounds more like a UX flaw in the app than something wrong with JS. Why
would a newsreader close itself when you actually read the news? It makes more
sense to open articles in a new tab (or whatever your specific device does),
and leave the reader open, avoiding this problem. That is a fairly universal
mechanism anymore when working from a page/app acting as a content hub.

------
STRiDEX
Really cool. Love angular-cli so far. Would like to see the styling from
[https://vue-hn.now.sh/top](https://vue-hn.now.sh/top) used as I think the
animations are challenging to replicate in angular 2.

~~~
keldaris
Personally, I find the styling of the OP's site much better than that of Vue-
HN, largely because of the higher contrast (and less over-emphasized vote
counts).

Might be just me, though, as I still find the vanilla HN site the best looking
of all, not to mention it runs with no JS enabled, no cross site stuff, etc.,
and takes very little resources - the best kind of web design, in my humble
opinion.

------
ing33k
This looks good !

btw I am trying to learn service workers and wanted to check how you have
implemented the offline support, but when I checked

[https://github.com/hdjirdeh/angular2-hn/blob/master/src/serv...](https://github.com/hdjirdeh/angular2-hn/blob/master/src/service-
worker.js) it's empty .. am I missing something ?

~~~
dkrvt
It's using a library to generate one on the fly:
[https://github.com/GoogleChrome/sw-
precache](https://github.com/GoogleChrome/sw-precache)

------
jamra
Firstly, I love your app.

This is kind of a nitpick, but on the desktop version, hovering over the menu
options "new, show, ask, and jobs" makes the text bold and pushes the other
text aside. It's a little weird. Perhaps work with a fixed width for each menu
item so it doesn't push the other items.

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

------
harisamin
Shameless plug. I built a native Mac Hacker News client. Mackernews.
[http://mackernews.com](http://mackernews.com) you can login vote, comment,
post, upvote in a native interface. It tries to render a reable web version of
the article when possible :)

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

------
johnwheeler
Nice work. Is the ng2 download still clocking in at ~750 KB webpacked?
Restricted to mobile so no webdev tools

~~~
Bahamut
I am leading an ng2 project at work and with webpack 2 + AOT compilation, we
have our app bundled in ~450 KB gzipped & minified, including polyfills (core-
js, web animations, viewport buggyfill), Font Awesome (to eventually be
stripped out for an svg sprite map - this takes up ~110 KB of the bundle),
dependencies (socket.io, Wavesurfer, rxjs, ng2, ng-bootstrap, @ngrx/store,
filepicker.js), and our application code.

We definitely could do better, but we are working on a tricky project for the
timeline & resources (a course management app for our LMS - features drag and
drop slide rearrangement, audio recording & playback, and video playback).

------
vbsteven
Working offline is cool but the app feels noticably slower than the plain html
version for navigating between comments and main pages. Tested on Firefox and
Chrome (Android)

~~~
MrAwesomeSauce
Yeah I still think there's room for improvement, and I'll be looking into
different ways to make it faster (server side rendering being one of them)

------
inian
"Progressive" HN client just ships JS without any server rendering..HN is
exactly the kind of application that you would expect to work without any JS.

~~~
MrAwesomeSauce
Yep, that's definitely the next thing I need to think about. I agree, this is
something that needs to work with JS disabled.

------
WhitneyLand
Is there any client that:

\- Has all features (up/down voting)

\- Has >= performance (apparently this one doesn't)

\- Has good large font support

