HackerWeb
A simply readable Hacker News web app. http://hackerwebapp.com/
About
This project started as one of my silly mini-projects. I create this initially to try out iOS 5+ Mobile Safari's new -webkit-overflow-scrolling: touch
CSS support. I need some sort of content for scrolling, so why not Hacker News' stories? I'm also trying something called Fake it 'til you make it which I make the web app looks (and feels) like a native mobile app. In this case, like a native iOS app. If the web app is loaded on non-iOS devices, it'll switch to the 'web' theme which is like a generic theme for other browsers and platforms.
Read my two-part blog post on how I built this web app:
- How I built the Hacker News mobile web app (HN thread)
- How I built the Hacker News mobile web app, Part 2 (HN thread)
Also read my introductory post, Introducing HackerWeb.
Technical stuff
This web app works best on iOS 5+ Mobile Safari (iOS theme) and other modern browsers (web theme). It uses these wonderful scripts:
- Hogan.js - logic-less templating
- Amplify.Store - client-side storage
- ruto.js -
location.hash
router - iOS
- Web
- ibento.js - simple event delegation
- classList.js - shim for
element.classList
- Vanilla JavaScript - everything else
Also uses the unofficial Hacker News API.
Some of the cutting-edge web technologies used:
- localStorage & sessionStorage
- CORS
- Application Cache
- CSS Animation
- CSS Media Queries
- Flexible Box Layout (old spec)
- requestAnimationFrame
- Web Workers
Development stuff
-
Prerequisites
git clone git://github.com/cheeaun/hackerweb.git cd hackerweb/ npm install
-
Grunt tasks
-
Compile templates in
templates/*
to generateassets/js/templates.js
grunt templates
-
Concat and minify JavaScript files in
assets/js/*
to generatejs/*
grunt uglify
-
Watch the templates and scripts, run
templates
anduglify
tasks when they're changedgrunt watch
-
Embed images into CSS files
grunt embedImage
This will parse CSS files in
assets/css/*
and change this (any lines withurl()
):background-image: url(PATH); /* embedImages:url(PATH) */
... into this:
background-image: url(data:DATAURI); /* embedImages:url(PATH) */
-
Run a local dev server.
grunt connect
Arguments:
--appcache
- enable Application Cache--port=XX
- specify a custom port number
-
Run both
watch
andconnect
tasks at the same timegrunt server
-
Contributing and Feedback
Feel free to fork, file some issues or tweet your feedback to me.
Do check out these awesome contributions as well:
- Bookmarklet to switch between HackerNews and HackerWeb by duncansmart
- HNmobile Bookmarklet by neocoder
- Hacker News Menu Tab (GitHub) by Guilherme Defreitas
License
MIT.
Other similar apps
This is the not the first third-party app for Hacker News. Others have tried doing the same thing, despite some slight differences. I've compiled a list of apps here.