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
91
The Mobile Development We Leave Behind
Avatar for Horia Dragomir hdragomir
0
62
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
LLM時代のリファクタリング戦略_AIエージェントによる段階的・安全なTS移行方法
Avatar for PLAY, inc. play_inc
0
210
Typiaで配信JSONの安全性を構造的に担保する(TSKaigi2026)
Avatar for RightTouch righttouch
PRO
1
180
脅威をエンジニアリングの糧にして：恐怖を乗り越えた先にあったもの / Turn threats into fuel for engineering: what lay beyond overcoming fear
Avatar for nrs nrslib
1
320
イベントストーミングとKiroの仕様駆動開発で実現する要件の認識合わせプロセス
Avatar for syobochim syobochim
6
730
サプライチェーン攻撃への備えについて考えている #湘なんか
Avatar for すてにゃん stefafafan
3
2.4k
エンジニアは生成AIと どのように向き合うべきか？ ことばの意味という観点から
Avatar for Hitomi Yanaka verypluming
3
250
【ハノーバーメッセ振り返りイベントat名古屋】データは集約からAI起点の収集に ～組織内・組織間でのデータ連携～
Avatar for 田中 聖也 tanakaseiya
0
130
管理アカウント単一運用からAWS Organizationsに移行するの大変で滅
Avatar for 平目 hiramax
0
260
Javaで学ぶSOLID原則
Avatar for Negima negima
1
190
GitHub Copilot CLI の Rubber Duck 機能を使ってコーディングの品質をあげよう #techbaton_findy
Avatar for すてにゃん stefafafan
2
1.1k
layerx-fde-practices
Avatar for cipepser cipepser
6
2.8k
Strands Agents超入門
Avatar for KintoTech_Dev kintotechdev
1
120

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
190
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
120
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
190
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.1k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
300
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k

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