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.
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
File | Description |
---|---|
hs.css | styling for navigation (ugly and optional) |
hn.html | small HTML stub |
hn.js | the magic |