![Page 1: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/1.jpg)
Things I've learnt from myThings I've learnt from myHacker News web appHacker News web app
![Page 2: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/2.jpg)
Hello, I'm Chee Aun.• Hardcore web developer.
• Created quite a bunch of fun little side projects.
• Tweet a lot of interesting stuff at @cheeaun
• Occasionally read Hacker News.
![Page 3: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/3.jpg)
What isHacker News?
![Page 5: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/5.jpg)
I builtHackerWeb.
![Page 6: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/6.jpg)
HackerWeb• A simple read-only web app client for Hacker News.
• Mobile-optimized, iOS-optimized.
• Works on all modern browsers, hopefully.
• Check it out at hackerwebapp.com
![Page 7: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/7.jpg)
![Page 8: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/8.jpg)
![Page 9: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/9.jpg)
![Page 10: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/10.jpg)
Cutting-edge web tech-webkit-overflow-scrolling: touch, localStorage,
sessionStorage, CORS, Application Cache, CSS
Animation, CSS Media Queries, Flexible Box Layout
(old spec), requestAnimationFrame, Web Workers,
and more…
![Page 11: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/11.jpg)
Must-reads• How I built the Hacker News mobile web app
• How I built the Hacker News mobile web app, Part 2
• Introducing HackerWeb
![Page 12: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/12.jpg)
Focus on 3 things1. -webkit-overflow-scrolling: touch
(Momentum scrolling)
2. CORS (Cross-Origin Resource Sharing)
3. Application Cache
![Page 13: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/13.jpg)
1
Momentumscrolling
![Page 14: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/14.jpg)
-webkit-overflow-scrolling:touch
• iOS-specific, for now. No official spec.
• Introduced since iOS5 (October 2011).
• For overflow:scroll elements.
![Page 15: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/15.jpg)
Before iOS5• Two fingers to scroll overflow:scroll
elements.
• Unintuitive and undiscoverable.
• Scrolling libs to the rescue: iScroll, Scrollability,
TouchScroll, FTScroller, etc
![Page 16: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/16.jpg)
Starting from iOS5• One finger to scroll overflow:scroll elements.
• -webkit-overflow-scrolling: touch
adds momentum to it.
• Scrolling libs are still in used due to bugs/quirks.
• Bug: Can't scroll to top when tapping status bar
![Page 17: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/17.jpg)
Demo time• Normal scrolling: jsbin.com/uhiyac/1
• Momentum scrolling: jsbin.com/uhiyac/2
![Page 18: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/18.jpg)
Resources• Overthrow – overflow:auto polyfill
• jQuery Mobile: touchOverflow
• Nested divs with overflow:touch
![Page 19: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/19.jpg)
2
CORS
![Page 20: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/20.jpg)
Before CORS• Use JSONP.
• Request data from a server in a different domain.
• Example: json-head.appspot.com/?
url=http://www.google.com/&callback=test
• A “hack”.
![Page 21: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/21.jpg)
CORS• A W3C Working Draft.
• Allow JavaScript to make cross-domain requests.
• An interplay between the server and the client.
Access-Control-Allow-Origin: *
![Page 22: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/22.jpg)
Use CORStoday!
![Page 23: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/23.jpg)
Who implements CORS?• Google APIs
• Amazon S3
• YouTube API
• Dropbox API
• GitHub v3 API
• …and more
![Page 24: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/24.jpg)
Resources• Enable CORS
• CORS isn’t just for XHR
• Can I use CORS?
• Using CORS - HTML5 Rocks
• CORS Proxy
![Page 25: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/25.jpg)
3
ApplicationCache
![Page 26: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/26.jpg)
AppCache• Easily make your web site/app offline.
• A working draft.
• A douchebag.
![Page 27: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/27.jpg)
Super simple stepsStep 1.
<html manifest="manifest.appcache">
Step 2.
CACHE MANIFESTindex.htmlstylesheet.css…
![Page 28: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/28.jpg)
VersioningCACHE MANIFEST# 2013-01-21:v1
index.htmlstylesheet.css…
![Page 29: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/29.jpg)
Google Reader
![Page 31: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/31.jpg)
Track AppCache versionsUse Google Analytics' event tracking
![Page 32: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/32.jpg)
Make local dev easier• Serve 404 for .appcache files
• For HackerWeb, I use node server.js
-noappcache
![Page 33: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/33.jpg)
Resources• A Beginner's Guide to Using the Application Cache
• Fixing Application Cache Community Group
• Appcache Facts
![Page 34: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/34.jpg)
More resources• Moobile – new mobile application framework built
on MooTools
• Ratchet – Prototype iPhone apps with simple HTML,
CSS and JS components
• HTML5 Rocks
• Can I use…
![Page 35: Things I've learnt from my Hacker News web app](https://reader033.vdocuments.net/reader033/viewer/2022052822/554bbb83b4c90594278b4d37/html5/thumbnails/35.jpg)
Thanks• cheeaun.com
• twitter.com/cheeaun
• github.com/cheeaun
Images used in this presentation
• flickr.com/photos/diathesis/2262012694/