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
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, sub threads
- user profiles
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"></script>
Search is available using a plugin. It uses HN Algolia API.
After some code golf on
hn.js they could be merged.
- Fetch API
- Internationalization API for friendly formatted dates
ES2018 features used
- fat arrows
- template literals
- const, let
- spread operator
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 is pretty good actually. Current (d.d. 2 nov 2019) versions of Chrome, Edge, Firefox and Safari do fine.
|hs.css||styling for navigation (ugly and optional)|
|hn.html||small HTML stub|