Hacker News Client

100 lines Hacker News client

This is a Hacker News client in less than 100 lines of code. Using ES2018 it was easy to make it both small and readable.

Demo Source code

Cheat!

I cheated a little bit by off loading the stylesheet and search to external files but everything works fine without them.

Hacker News Features

Supported Hacker News features are:

• front page
• best stories, new stories, show HN, ask HN and jobs
• (recursive) comments, (collapsible) sub threads
• user profiles

Usage

Standalone version can be found joriszwart.nl/hn. I use it on a daily basis.

For use on your website it can be used as a widget:

<main class="hn"></main>
<script src="hn.js" type="module"></script>

Search plugin

Search is available using a plugin. It uses HN Algolia API.

<script src="search.js" type="module"></script>

After some code golf on search.js and hn.js they could be merged.

HTML5 features

• Fetch API
• Internationalization API for friendly formatted dates

ES2018 features used

Most features were already available in earlier versions of JavaScript but since they are part of a new paradigm I want to mention them.

• async/await
• Promise.all
• fat arrows =>
• template literals
• for..of
• const, let
• destructuring
• spread operator ...

Error handling

The adagium “throw early, catch late!” works for me but not that great for async / await. If you forget to await an async function, errors are not caught. The same was true for Promises of course. In both cases you can use the unhandledrejection event, but I don’t like it :-)

Maybe some linter could be of use?

Browser support

Browser support is pretty good actually. Current (d.d. 2 nov 2019) versions of Chrome, Edge, Firefox and Safari do fine.

Files