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
1.2k
5

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

More Decks by Horia Dragomir

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

Other Decks in Technology

See All in Technology
なぜ、あなたのAPIは使われないのか？ AX時代の設計原則、ガードレール、運用体制
Avatar for Yoichi Kawasaki yokawasa
1
260
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
53k
AI時代の強いチームの作り方
Avatar for yuukiyo yuukiyo
14
7.9k
最新IoT事例11選に学ぶ！現場の成功パターンと実践のコツ【SORACOM Discovery 2026】
Avatar for SORACOM（ソラコム） soracom
PRO
0
120
reFACToring
Avatar for moznion moznion
1
1k
CTOキーノート：AI時代の「つなぐ」を再定義 ― 真のIoTとリアルワールドAI【SORACOM Discovery 2026】
Avatar for SORACOM（ソラコム） soracom
PRO
0
330
人依存からAIネイティブの体制へ：バックエンド開発の裏側【SORACOM Discovery 2026】
Avatar for SORACOM（ソラコム） soracom
PRO
0
130
それでも、技術なブログを書く理由 #kichijojipm / Why I Still Write Tech Blogs Even Now
Avatar for ShinkuFencer shinkufencer
0
1.4k
ガバメントクラウドでのランサムウェア対策
Avatar for 高橋広和 techniczna
0
120
セキュリティ研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
31
26k
テックカンファレンス三大ステークホルダーの文化人類学 ─ 違いを認め合う関係性作り
Avatar for bash0C7 bash0c7
5
1.3k
コンポーネント名には何を含めるべきなのか？ / what-should-be-included-in-component-names
Avatar for airRnot airrnot1106
0
190

Featured

See All Featured
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
230
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
200
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
290
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
820
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2k
HDC tutorial
Avatar for Michiel Stock michielstock
2
760
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
500
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k

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