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

Games, Apps and HTML5

Avatar for Horia Dragomir Horia Dragomir
September 14, 2012
Technology
5
1.2k

Games, Apps and HTML5

These are the support slides for my talk at PhoneGap Day EU 2012 in Amsterdam.

Avatar for Horia Dragomir

Horia Dragomir

September 14, 2012
Tweet

More Decks by Horia Dragomir

See All by Horia Dragomir
The Mobile Development We Leave Behind (FrontTrends 2014)
Avatar for Horia Dragomir hdragomir
0
86
The Mobile Development We Leave Behind
Avatar for Horia Dragomir hdragomir
0
51
Fast Mobile UIs
Avatar for Horia Dragomir hdragomir
8
1.8k
Technology is Your Office
Avatar for Horia Dragomir hdragomir
2
320

Other Decks in Technology

See All in Technology
Unson OS｜48時間で「売れるか」を判定する AI 市場検証プラットフォーム
Avatar for 佐藤圭吾 unson
0
170
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
Avatar for Naohiro Fujie fujie
0
200
Kiroでインフラ要件定義～テスト
 を実施してみた
Avatar for nagisa_53 nagisa53
3
300
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ 〜僕たちが起こすコラボレーション・ムーブメント〜
Avatar for amixedcolor amixedcolor
1
120
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
Avatar for masayoshi masayoshi
1
410
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
Avatar for knt44kw knt44kw
0
150
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか？ / SRE Lounge #18
Avatar for Hajime KOSHIRO kossykinto
0
130
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
Avatar for Yoichi Kawasaki yokawasa
5
1.7k
【新卒研修資料】数理最適化 / Mathematical Optimization
Avatar for BrainPad brainpadpr
25
11k
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
Avatar for Arthur arthur1
0
340
バクラクによるコーポレート業務の自動運転 #BetAIDay
Avatar for LayerX layerx
PRO
1
830
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く！現場で活用するためのAIエージェント実践入門（Findyランチセッション）
Avatar for Shumpei Miyawaki smiyawaki0820
6
540

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
530
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
32
8.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
332
22k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.4k

Transcript

  1. Games & HTML5

  2. @hdragomir

  3. None
  4. None
  5. None
  6. None

  7. .scrollTo(0, 0)

  8. speed

  9. None

  10. http hates you

  11. None

  12. applicationCache is a lie

  13. applicationCache is a lie https://vimeo.com/43336762

  14. Golf Everything! 140byt.es

  15. None

  16. jQuery

  17. None

  18. .querySelectorAll()

  19. .querySelectorAll() http://snook.ca/archives/javascript/going-simple-with-javascript

  20. getElementsByClassName

  21. getElementById

  22. None

  23. events bubble

  24. XMLHttpRequest rocks the boat

  25. req.responseCode < 400

  26. pushState

  27. requestAnimationFrame

  28. Redraws Hate You

  29. CSS is your friend

  30. Animations are hard

  31. Also, cheat and add dummy transforms just to get things

    HW accelerated

  32. matrix3d(0.8, 0, ...

  33. None

  34. data-mode=”super-duper”

  35. CSS gets lazy

  36. small hacks go a long way

  37. None
  38. None
  39. None

  40. onclick

  41. touchstart touchend touchmove

  42. hammer.js

  43. touchend

  44. perceived responsiveness

  45. perceived responsiveness http://alexmaccaw.co.uk/posts/async_ui

  46. pointer-events: none; user-select: none; user-drag: none;

  47. name=viewport content="initial-scale=0.5"

  48. device-pixel-ratio

  49. navigator.connection

  50. None

  51. Firefox OS

  52. WebApps

  53. WebApps http://singlepageappbook.com/

  54. You should be an edge case

  55. You should be an edge case @hdragomir @wooga this means

    you're doing something special