I will show you how to use the new features in HTML5 to create mobile games and the hoops you have to jump through to build a sleek and responsive user interface while trying to avoid most of the headaches that come with the job when you are always an edge case.
11. Viewport
• It's actually hard to use the full screen
• Use a custom hack
Thursday, 8 March, 12 11
12. Viewport
• Viewporter tries to solve this problem, but
fails
• You webapp will run in far too many
environments to create profiles for
Thursday, 8 March, 12 12
14. iOS versus Android
Android is usually half as fast*
Thursday, 8 March, 12 14
15. iOS versus Android
Android is usually half as fast
http://daringfireball.net/linked/2012/03/05/ios-android-html5-benchmarks
Thursday, 8 March, 12 15
16. Loading Speed
• Show first, load later
• Loading JS can freeze the UI
• Lazy-loading?
Thursday, 8 March, 12 16
17. HTTP Hates You
Roundtrips are expensive
Try pipelining
Thursday, 8 March, 12 17
18. applicationCache is a lie
• Loads in one gulp
• Loads in order
• the UI will hate this
• Use it with care
Thursday, 8 March, 12 18
33. Use Event Bubbling!
instead of addingEventListeners to every
node, just add one to their parent.
It’s what the cool kids are doing!
Thursday, 8 March, 12 33
36. req.responseCode < 400
An AJAX request to an asset already stored
in applicationCache will sometimes yield a
responseCode of 0
Thursday, 8 March, 12 36
42. Animations are hard
• Think of the poor CPU
• Use transitions!
• Use CSS3 transforms
Thursday, 8 March, 12 42
43. Also, cheat and add dummy transforms just
to get things HW accelerated
Thursday, 8 March, 12 43
44. Android hates multiple
transforms
You will end up having simplified animations
for Android. That’s OK.
Thursday, 8 March, 12 44
45. Also, turn off Hardware Acceleration for
Android 2.x
Thank you, Ben Green!
Thursday, 8 March, 12 45
46. node[data-mode=”super”]
• set attributes, not just classes
• classes are cool for binary switches, though
Thursday, 8 March, 12 46
47. Tread with care
• CSS3 does not always follow live DOM
events
Thursday, 8 March, 12 47
48. Tread with care
• CSS3 does not always follow live DOM
events
• See this for an example:
http://jsbin.com/orolov/12/edit#html,live
Thursday, 8 March, 12 48