The document discusses various techniques for building games and applications using JavaScript, including DOM manipulation, Canvas API, events, communication, and touch devices. It provides examples and links to resources for DOM manipulation using direct appending, document fragments, and innerHTML. It also covers topics like removing event handlers, conditional statements, and social networks APIs.

1. GG Team Workshop GAMES & APPS IN JAVASCRIPT 2011 by Michal Budzynski

3. Prototype

4. Alpha

5. Beta

6. RC

7. Gold Master

8. Localization

9. GG Team Workshop 2011 by Michal Budzynski

11. Assembling them into DOM tree

12. Connecting created tree into main DOM structure

13. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending

15. Append all nodes & elements to it

16. Connecting documentFragment to the main DOM structure

17. GG Team Workshop DOM manipulation – document fragment

18. GG Team Workshop 2011 by Michal Budzynski Result:

20. Put it directly into innerHTML of the parent node

21. Use methods like .childNodes() or .getElementsByTagName()

22. GG Team Workshop DOM manipulation – document fragment 2011 by Michal Budzynski

23. GG Team Workshop For single string using array buffer instead of += makes perfect sense – huge performance difference in older browsers and comparable results in newer ones. Doing join() on multiple arrays for concatenation is not a good idea. It takes way more time than simple +! http://kasia.drzyzga.pl/2011/04/never-concatenate-strings-with-really/ 2011 by Michal Budzynski

24. GG Team Workshop 2011 by Michal Budzynski

25. GG Team Workshop 2011 by Michal Budzynski

27. .fillStyle = “”

28. .fillRect(a, b, c, d)

29. .moveTo(x, y)

30. .lineTo(x, y)

31. .bezierCurveTo()

32. .arc(x, y, radius, startAngle, endAngle, anticlockwise)

33. .stroke()

34. .fill()

36. ctx.clearRect()

37. canvas.toDataURL();

38. GG Team Workshop 2011 by Michal Budzynski checker.draw('#f00') Result: checker.draw('#00f') Result:

39. GG Team Workshop 2011 by Michal Budzynski Result:

41. More specific position of variable – better performance

43. More specific position of variable – better performance

44. GG Team Workshop 2011 by Michal Budzynski Result:

46. Events by attributes (DOM lvl 1)

47. Event Listeners (DOM lvl 2)

49. Events by attributes (DOM lvl 1)

50. Event Listeners (DOM lvl 2)

51. Removing event-handlers

52. GG Team Workshop 2011 by Michal Budzynski Removing event handlers

53. GG Team Workshop 2011 by Michal Budzynski Removing event handlers

54. GG Team Workshop 2011 by Michal Budzynski Removing event handlers

55. GG Team Workshop 2011 by Michal Budzynski Result:

61. http://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/

62. GG Team Workshop 2011 by Michal Budzynski Result:

64. Long polling

65. JSONP polling

66. Forever iframes

67. FlashSockets (tfuuuuuuuuuu!)

68. WebSockets

69. GG Team Workshop 2011 by Michal Budzynski Communication One to rule them all!

70. GG Team Workshop 2011 by Michal Budzynski Communication One to rule them all!

71. GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game?

72. GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game? We cannot.

74. http://easywebsocket.org/

75. GG Team Workshop 2011 by Michal Budzynski Result:

78. Take players - if no free places – disconnect (?)

80. Take players - if no free places – disconnect (?)

81. Say hello

83. Take players - if no free places – disconnect (?)

84. Say hello

85. Show when you will be ready

87. Take players - if no free places – disconnect (?)

88. Say hello

89. Show when you will be ready

90. Send & receive all the movements

91. GG Team Workshop 2011 by Michal Budzynski Result:

93. 'touchstart' is the new 'mousedown'

94. Etc.

95. http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/

97. content="width=device-width, initial-scale=1, maximum-scale=1"

98. A pixel is not a pixel

99. “ The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320—480 pixels (~160 dpi). Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi).”

100. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

101. GG Team Workshop 2011 by Michal Budzynski Result:

102. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs

103. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs

105. REST API with backend libraries

106. http://dev.gg.pl/api/pages/ggapi.html

107. http://developers.facebook.com/docs/reference/javascript/

108. GG Team Workshop 2011 by Michal Budzynski Result:

110. http://twitter.com/michalbe

111. http://ongamestart.com

112. http://googlepolska.blogspot.com

113. http://falsyvalues.com

115. http://jsday.it

116. http://braziljs.com.br

117. http://nodecamp.eu