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

Games, Apps and HTML5

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
89
The Mobile Development We Leave Behind
Avatar for Horia Dragomir hdragomir
0
55
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
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
95k
AI時代にエンジニアはどう成長すれば良いのか？
Avatar for Recruit recruitengineers
PRO
1
140
Lookerの最新バージョンv26.2がやばい話
Avatar for Yuta Ozaki waiwai2111
1
150
大規模な組織におけるAI Agent活用の促進と課題
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
6
7.8k
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4k
入門DBSC
Avatar for Yoshikazu Nojima ynojima
0
130
自動テストが巻き起こした開発プロセス・チームの変化 / Impact of Automated Testing on Development Cycles and Team Dynamics
Avatar for コドモン開発チーム codmoninc
1
1.1k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
EMからVPoEを経てCTOへ：マネジメントキャリアパスにおける葛藤と成長
Avatar for KAKEHASHI kakehashi
PRO
6
860
ソフトウェアアーキテクトのための意思決定術: Create Decision Readiness—The Real Skill Behind Architectural Decision
Avatar for Koji SHIMADA snoozer05
PRO
30
9k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
44k
OpenClawで回す組織運営
Avatar for Kazuto Kusama jacopen
2
360

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
120
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
150
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
140
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
140
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.4k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
490
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k

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