Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Things I've learnt from my Hacker News web app

Avatar for Lim Chee Aun Lim Chee Aun
January 22, 2013
Technology
1
130

Things I've learnt from my Hacker News web app

A talk I gave at the Front-end Developers User Group meet up in Hackerspace SG.

Avatar for Lim Chee Aun

Lim Chee Aun

January 22, 2013
Tweet

More Decks by Lim Chee Aun

See All by Lim Chee Aun
Hacktoberfest SG 2018
Avatar for Lim Chee Aun cheeaun
0
140
CSS-ing the Super Silly Hackathon website
Avatar for Lim Chee Aun cheeaun
0
110
Bridging Connections
Avatar for Lim Chee Aun cheeaun
2
480

Other Decks in Technology

See All in Technology
君はジョシュアツリーを知っているか？名前をつけて事象を正しく認識しよう / Do you know Joshua Tree?
Avatar for Y-KANOH ykanoh
4
130
Physical AI on AWS リファレンスアーキテクチャ / Physical AI on AWS Reference Architecture
Avatar for shota aws_shota
1
130
【PHPerKaigi2026】OpenTelemetry SDKを使ってPHPでAPMを自作する
Avatar for Futoshi Endo fendo181
1
190
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
Avatar for Koji Yoshida kyoshidaxx
4
1.8k
「コントロールの三分法」で考える「コト」への向き合い方 / phperkaigi2026
Avatar for blue_goheimochi blue_goheimochi
0
150
20260321_エンベディングってなに？RAGってなに？エンベディングの説明とGemini Embedding 2 の紹介
Avatar for tsho tsho
0
160
Embeddings : Symfony AI en pratique
Avatar for Grégoire Pineau lyrixx
0
270
テストプロセスにおけるAI活用 ：人間とAIの共存
Avatar for hacomono Inc. hacomono
PRO
0
160
脳が溶けた話 / Melted Brain
Avatar for Keisuke69 keisuke69
1
1k
非同期・イベント駆動処理の分散トレーシングの繋げ方
Avatar for Ken ichikawaken
1
100
Agent Skill 是什麼？對軟體產業帶來的變化
Avatar for Bo-Yi Wu appleboy
0
230
Kubernetesの「隠れメモリ消費」によるNode共倒れと、Request適正化という処方箋
Avatar for g0xu g0xu
0
120

Featured

See All Featured
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
110k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
94
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
140
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
160
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
120
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
150
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
690

Transcript

  1. Things I've learnt from my Things I've learnt from my

    Hacker News web app Hacker News web app

  2. 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.

  3. What is Hacker News?

  4. news.ycombinator.com news.ycombinator.com

  5. I built HackerWeb.

  6. 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
  7. None
  8. None
  9. None

  10. 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…

  11. Must-reads • How I built the Hacker News mobile web

    app • How I built the Hacker News mobile web app, Part 2 • Introducing HackerWeb

  12. Focus on 3 things 1. -webkit-overflow-scrolling: touch (Momentum scrolling) 2.

    CORS (Cross-Origin Resource Sharing) 3. Application Cache

  13. 1 Momentum scrolling

  14. -webkit-overflow-scrolling: touch • iOS-specific, for now. No official spec. •

    Introduced since iOS5 (October 2011). • For overflow:scroll elements.

  15. Before iOS5 • Two fingers to scroll overflow:scroll elements. •

    Unintuitive and undiscoverable. • Scrolling libs to the rescue: iScroll, Scrollability, TouchScroll, FTScroller, etc

  16. 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

  17. Demo time • Normal scrolling: jsbin.com/uhiyac/1 • Momentum scrolling: jsbin.com/uhiyac/2

  18. Resources • Overthrow – overflow:auto polyfill • jQuery Mobile: touchOverflow

    • Nested divs with overflow:touch

  19. 2 CORS

  20. 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”.

  21. CORS • A W3C Working Draft. • Allow JavaScript to

    make cross-domain requests. • An interplay between the server and the client. Access-Control-Allow-Origin: *

  22. Use CORS today!

  23. Who implements CORS? • Google APIs • Amazon S3 •

    YouTube API • Dropbox API • GitHub v3 API • …and more

  24. Resources • Enable CORS • CORS isn’t just for XHR

    • Can I use CORS? • Using CORS - HTML5 Rocks • CORS Proxy

  25. 3 Application Cache

  26. AppCache • Easily make your web site/app offline. • A

    working draft. • A douchebag.

  27. Super simple steps Step 1. <html manifest="manifest.appcache"> Step 2. CACHE

    MANIFEST index.html stylesheet.css …

  28. Versioning CACHE MANIFEST # 2013-01-21:v1 index.html stylesheet.css …

  29. Google Reader

  30. Reeddit – Reddit web app client

  31. Track AppCache versions Use Google Analytics' event tracking

  32. Make local dev easier • Serve 404 for .appcache files

    • For HackerWeb, I use node server.js -noappcache

  33. Resources • A Beginner's Guide to Using the Application Cache

    • Fixing Application Cache Community Group • Appcache Facts

  34. 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…

  35. Thanks • cheeaun.com • twitter.com/cheeaun • github.com/cheeaun Images used in

    this presentation • flickr.com/photos/diathesis/2262012694/