Show HN: Angular 2 HN – A progressive Hacker News client that works offline | Hacker News Reader

Show HN: Angular 2 HN – A progressive Hacker News client that works offline

github.com

134 pointsMrAwesomeSauce43 comments

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.

I use the HackerNew Chrome extension to improve the site UI/UX: https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

The source can be found here: https://github.com/tommoor/HackerNew

It always confuses me now when I open the site on another persons machine.

I 100% agree, but this has been brought up often, and the powers that be do not seem to value this opinion too much.

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.

Did you try this one: https://react-hn.appspot.com/

Thanks for Sharing. Much better.

I'm on a plain Linux laptop with a 15-inch screen. HN is the only site which I always read at a 175% zoom.

Checkout mackernews.com I Made that app to scratch my own itch for precisely the reasons you bring up. :)

You might consider a browser extension like Stylebot which lets you bring your own custom CSS.

Thanks for sharing. Will try it out.

Sure thing. I also keep a collection of Hacker News clients on Pinboard.

https://pinboard.in/u:tedmiston/t:hacker-news/

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 ?

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)

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.

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.

oh the blog post would be perfect!, I will go through it. I will try to create a twitter client to get familiar with angular cli and angular 2 in general. Thanks :)

Btw, I like the way blog UI and its simplicity and code-display friendly-ness, what tool/app you use for the blog? (if you don't mind sharing the details)

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)

Super!

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

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.

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.

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.

Why can't it? What's keeping the browser from caching it?

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

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.

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

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... it's empty .. am I missing something ?

It's using a library to generate one on the fly: https://github.com/GoogleChrome/sw-precache

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

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.

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

Fixed

Shameless plug. I built a native Mac Hacker News client. Mackernews. 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 :)

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

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

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

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.

The largest download on the page is a vendor bundle, at 93.2k gzipped (402k uncompressed). So I'm pretty sure it's not.

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)

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)

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

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

Is there any client that:

- Has all features (up/down voting)

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

- Has good large font support

Reply on news.ycombinator.com