imclab / hackerweb

A simply readable Hacker News web app

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)

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
  • Tappable - touch-friendly tap events
  • Tween.js - simple tweening engine
• 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

More technical stuff

Running a local server

git clone [email protected]:cheeaun/hackerweb.git
cd hackerweb
node server.js -noappcache

The -noappcache argument is to prevent browsers from caching everything in the Application Cache.

Changes to scripts

If there are changes in the /js folder, run this to regenerate the static JavaScript files (skip the npm install if uglify-js is already installed):

npm install uglify-js
node make-scripts.js

The static JS files are defined by scripts.json which specifies which files are combined and minified into smaller individual files.

Changes to templates

If there are changes in the /templates folder, run this to regenerate js/templates.js (skip the npm install if uglify-js is already installed; do not use npm install hogan.js as the current NPM version – 2.0.0 – is not compatible):

npm install uglify-js
npm install git://github.com/twitter/hogan.js.git
node make-templates.js

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

Other platforms?

I have plans to make this app look native on other mobile platforms once I fork our some money and get my hands on other mobile devices (Android, Windows Phone, etc) for development and testing. Contact me if you feel generous enough to donate some devices to me :)

License

Licensed under the MIT License.

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.