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
85
The Mobile Development We Leave Behind
Avatar for Horia Dragomir hdragomir
0
49
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
「どこにある？」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
Avatar for Toru_Kubota toru_kubota
2
290
SwiftUI Transaction を徹底活用！ZOZOTOWN UI開発での活用事例
Avatar for Ryo Tsuzukihashi tsuzuki817
1
800
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
2.1k
今からでも間に合う！ 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
Avatar for Hideaki Aoyagi hideakiaoyagi
1
150
堅牢な認証基盤の実現 TypeScriptで代数的データ型を活用する
Avatar for KAKEHASHI kakehashi
PRO
1
200
Nonaka Sensei
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
600
Long journey of Continuous Delivery at Mercari
Avatar for Hisaharu Ishii hisaharu
1
200
AI Engineering Summit Pre Event LT #10
Avatar for Kaoru okaru
2
560
New Cache Hierarchy for Container Images and OCI Artifacts in Kubernetes Clusters using Containerd / KubeCon + CloudNativeCon Japan
Avatar for Preferred Networks pfn
PRO
0
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
17k
Text-to-SQLの評価データセットを作って最新LLMモデルの性能評価をしてみた
Avatar for Gota gotalab555
3
770
Classmethod AI Talks(CATs) #22 司会進行スライド(2025.06.12) / classmethod-ai-talks-aka-cats_moderator-slides_vol22_2025-06-12
Avatar for shinyaa31 shinyaa31
0
190

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.6k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k

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