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

Things I've learnt from my Hacker News web app

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Lim Chee Aun Lim Chee Aun
January 22, 2013
Technology
130
1

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

More Decks by Lim Chee Aun

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

Other Decks in Technology

See All in Technology
全社統制を維持しながら現場負担をどう減らすか〜プラットフォームチームとセキュリティチームで進めたSecurity Hub活用によるAWS統制の見直し〜/secjaws-security-hub-custom-insights
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
1
520
iOS・Androidの文字サイズ設定をWebViewに！モバイルUIのアクセシビリティTips
Avatar for おしん shincarpediem
2
110
AIエージェントの支払い基盤　AgentCore Payments概要
Avatar for たけのこ kmiya84377
2
190
CyberAgent YJC Connect
Avatar for shimayuu shimaf4979
1
190
おいらのAWSアップデートの追い方〜Slack×AgentCore〜
Avatar for やくも yakumo
1
110
マンション備え付けのネットワークとLTE回線を組み合わせた ネットワークの安定化の考案
Avatar for harutiro harutiro
1
130
オライリーイベント登壇資料「鉄リサイクル・産廃業界におけるAI技術実応用のカタチ」
Avatar for Takumi Karasawa takarasawa_
0
410
"うちにはまだ早い"は本当？ ─ 小さく始めるPlatform Engineering入門
Avatar for Haruka Sakihara harukasakihara
6
590
2026-05-14 要件定義からソース管理まで！IBM Bob基礎ハンズオン
Avatar for YutaNonaka yutanonaka
0
160
"スキルファースト"で作る、AIの自走環境
Avatar for subroh_0508 subroh0508
0
340
AWS WAFの運用を地道に改善し、自社で運用可能にするプラクティス
Avatar for ANDPAD inc andpad
1
220
Oracle Cloud Infrastructure presents managed, serverless MCP Servers for Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
1
320

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
290
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
520
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
110
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.4k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
360
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
49
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k

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/