PageRenderTime 68ms CodeModel.GetById 27ms RepoModel.GetById 0ms app.codeStats 1ms

/index.html

http://github.com/Incognito/CodeGuide-0000
HTML | 883 lines | 844 code | 39 blank | 0 comment | 0 complexity | 9ca890ed17958f4021536141e80adb6f MD5 | raw file

Large files files are truncated, but you can click here to view the full file

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>So you want to write some quality JavaScript</title>
  6. <meta name="author" content="Brian Graham">
  7. <meta name="viewport" content="width=1024">
  8. <link rel="stylesheet" href="./presentation.css">
  9. </head>
  10. <body class="deck-container">
  11. <article class="slide" id="1-1">
  12. <h1>So you want to write some quality JavaScript</h1>
  13. </article>
  14. <article class="slide" id="1-2">
  15. <h2>Overview</h2>
  16. <ol>
  17. <li>
  18. <a href="#2-1"><h3>Prequil: Dante's inferno</h3></a>
  19. </li>
  20. <li>
  21. <a href="#3-1"><h3>Act one: How things work</h3></a>
  22. </li>
  23. <li>
  24. <a href="#4-1"><h3>Act two: This thing's bigger than just you and me</h3></a>
  25. </li>
  26. <li>
  27. <a href="#5-1"><h3>Act three: How to write clean code, not a total mess</h3></a>
  28. </li>
  29. <li>
  30. <a href="#6-1"><h3>Act four: How to write code that won't break</h3></a>
  31. </li>
  32. <li>
  33. <a href="#7-1"><h3>Act five: How to write JavaScript people will love</h3></a>
  34. </li>
  35. <li>
  36. <a href="#8-1"><h3>Act six: Back to basics</h3></a>
  37. </li>
  38. <li>
  39. <a href="#9-1"><h3>Act seven: Way of the programmer</h3></a>
  40. </li>
  41. <li>
  42. <a href="#10-1"><h3>Epilogue</h3></a>
  43. </li>
  44. </ol>
  45. </article>
  46. <article class="slide" id="2-1">
  47. <h1>Prequil: Dante's inferno</h1>
  48. </article>
  49. <article class="slide" id="2-2">
  50. <h2>Problem?</h2>
  51. <ol>
  52. <li>
  53. <h3>You're just sitting around, it's nearly lunch, you're hungry</h3>
  54. <p>Someone knows you write some code, so they come over and need you to write something that lets you click on a thumbnail and make a larger picture.</p>
  55. </li>
  56. <li>
  57. <h3>You search DuckDuckGo for something</h3>
  58. <p><a href="http://duckduckgo.com/?q=how+do+i+program+javascript%3F">DuckDuckGo</a> (even though it's awesome) ends up giving really confusing results, there's all sorts of answers, some work, some fail. You just don't know what to do. All the good resources look way too complex to get into. After hours of searching top-ten-lists of JavaScript plugins you find this really sweet plugin and try to put it into your code.</p>
  59. </li>
  60. <li>
  61. <h3>It doesn't quite work</h3>
  62. <p>It's way too hard to figure out and you can't get the thing to work. But you're hungry and the pointy-haird guy wants it yesterday. You did see this one thing over on DynamicDrive and W3Schools about how to do something like that, so you try and copy it. It might not be as fancy as those plugins, but it sure does the job. In fact, it probably looks like this...</p>
  63. </li>
  64. </ol>
  65. </article>
  66. <article class="slide" id="2-3">
  67. <h2>Well look what you did! You're a hero!</h2>
  68. <pre><code>
  69. &lt;script&gt;
  70. function runSomething1() {./*set an image to 1.jpg*/}
  71. function runSomething2() {./*set an image to 2.jpg*/}
  72. function runSomething3() {./*set an image to 3.jpg*/}
  73. &lt;/script&gt;
  74. &lt;a href=&quot;&quot; onmouseover=&quot;javascript:runSomething1()&quot; style=&quot;hover{color:blue}&quot; /&gt;Image One&lt;/a&gt;
  75. &lt;a href=&quot;&quot; onmouseover=&quot;javascript:runSomething2()&quot; style=&quot;hover{color:blue}&quot; /&gt;Image Two&lt;/a&gt;
  76. &lt;a href=&quot;&quot; onmouseover=&quot;javascript:runSomething3()&quot; style=&quot;hover{color:blue}&quot;/&gt;Image Three&lt;/a&gt;
  77. </code></pre>
  78. <p>Your pointy haired friend comes back thanking you up-and-down for the awesome job you did and how awesome it works. You're a hero, this must be what it's like to be a professional programmer.</p>
  79. <p>As you gaze off into space, so proud, pointy-hair wonders if you could make a few minor changes to the thing... nothing huge of course.</p>
  80. </article>
  81. <article class="slide" id="2-4">
  82. <h2>Chapter one: the plot thickens.</h2>
  83. <blockquote>I want to add six more images and make every-other image link green, also the fourth image should show up when it loads.
  84. <br/>
  85. <br/>
  86. <em>Love,<br/>
  87. Dr. Pointy-hair, PhD.</em>
  88. </blockquote>
  89. <p>So that's what you go off and do, expanding on your code from before. You add six more functions, go back, make five of the links blue <code>style="hover{color:blue}"</code>, and stick a <code>onload="doSomething4()"</code> into the body tag. </p>
  90. <p>Wow, all this programming is hard work. Finally, after clicking around a bit everything looks like it's in working order. You tell the client they just have to change index2.html in their webserver to index.html, and it will be live. Just to be safe, make an index-bakJul42011.html.bak file so they have a copy of the old one.</p>
  91. <p>Another job well done!</p>
  92. </article>
  93. <article class="slide" id="2-5">
  94. <h2>Well look what you did! You little jerk!</h2>
  95. <p>Pointy hair isn't happy, he renamed files like you said on his website and ran the page only to be faced with this friendly box:</p>
  96. <img src="./mise.gif" alt="JavaScript errors in Internet Explorer" />
  97. <p>Of course, you just explain to him he's on a really really old browser and he should upgrade because Internet Explorer is stupid and smells like old cheese also Fox fires are so 1337.</p>
  98. <p>Pointy hair kindly asks if you've lost your freaking mind. His customers use this browser. He paid you to make this work, so go and make it work. Other sites have stuff like this and it works fine in his browser. You're not getting paid till this works.</p>
  99. <h3>Finally, it works!</h3>
  100. <p>Hours and hours of hard work later you re-write the code twice and finally it works in the browser he uses. You just hope it works in other browsers as well. It's just a shame you ended up working for less than $10.00 per hour on this... Stupid IE.</p>
  101. </article>
  102. <article class="slide" id="2-6">
  103. <h2>How was that vacation?</h2>
  104. <p>Hope you had fun. We needed changes while you were away but everyone said the code was just way too complex to figure out. Hope you can work it out. We want all those thumbnails to have a caption now. Better look at your code.</p>
  105. <pre><code>onclick=&quot;function _gjuc(){var b=_gjwl.href.indexOf(\&quot;#\&quot;);if(b&gt;=0){
  106. var a=_gjwl.href.substring(b+1);if(/(^|&amp;)q=/.test(a)&amp;&amp;a.indexOf(\&quot;#\&quot;)==-1&amp;&amp;!/(^|&amp;)cad=h($|&amp;)/.test(a)){
  107. _gjwl.replace(\&quot;/search?\&quot;+a.replace(/(^|&amp;)fp=[^&amp;]*/g,\&quot;\&quot;)+\&quot;&amp;cad=h\&quot;);return 1}}return 0;}&quot;</code></pre>
  108. <p>Uhhh, wait, you wrote this? What did it do? Ugh... Okay, maybe you should check out some blogs for a while and it will come back to you. Oh, this looks neat, <a href="http://thedailywtf.com/Articles/OnClick-Does-What!.aspx">TheDailyWTF</a>. A site that showcases bad code? </p>
  109. <pre><code>onclick=&quot;function _gjuc(){var b=_gjwl.href.indexOf(\&quot;#\&quot;);if(b&gt;=0){
  110. var a=_gjwl.href.substring(b+1);if(/(^|&amp;)q=/.test(a)&amp;&amp;a.indexOf(\&quot;#\&quot;)==-1&amp;&amp;!/(^|&amp;)cad=h($|&amp;)/.test(a)){
  111. _gjwl.replace(\&quot;/search?\&quot;+a.replace(/(^|&amp;)fp=[^&amp;]*/g,\&quot;\&quot;)+\&quot;&amp;cad=h\&quot;);return 1}}return 0;}&quot;</code></pre> <p>That's your code out there. Oh, that's not good. That's not good at all. Who sent this in? Was it one of the people they had look at your code? Why would they do this? This is so embarassing!</p>
  112. <p>But wait! They don't understand! It's totally out of context. This is top-notch programming! You wrote this yourself! You spent a long time learning how to write JavaScript this well, and it was really hard. They're just jealious. I'll show them, I'll make this code work fine. It'll only take you a few days... Better fire up dreamweaver.</p>
  113. </article>
  114. <article class="slide" id="2-7">
  115. <h2>It's not you, it's me. We had to hire someone else.</h2>
  116. <p>
  117. <strong>Lancey Howard:</strong> Gets down to what it's all about, doesn't it? Making the wrong move at the right time. <br/>
  118. <strong>Cincinnati Kid:</strong> Is that what it's all about? <br/>
  119. <strong>Lancey Howard:</strong> Like life, I guess. You're good, kid, but as long as I'm around you're second best. You might as well learn to live with it. <br/>
  120. <br/>
  121. From <em>The Cincinnati Kid</em>, 1965.
  122. </p>
  123. <img src="./Ckfilm.jpg" alt="JavaScript errors in Internet Explorer" />
  124. <hr/>
  125. <p>The cost of your code per hour is far below average, but the cost of keeping you around was too high. It's hard for the company to write new code around yours, and you take more than three-times as long as the new guy.</p>
  126. <p>How did he get to be such a hot shot? I looked at all the best sites like w3schools, I made multiple backups on the server clearly re-named, my code was linked directly inside HTML element, my variable names didn't waste space, <strong>and</strong> I used the best browser out there.</p>
  127. </article>
  128. <article class="slide" id="2-8">
  129. <h2>Mission Impossible</h2>
  130. <h3>You have two options</h3>
  131. <ol>
  132. <li>
  133. <h4>Figure out how to write better JavaScript</h4>
  134. </li>
  135. <li>
  136. <h4>Go find something else to do that doesn't involve programming</h4>
  137. </li>
  138. </ol>
  139. <p>Oh look, a slideshow called <strong>So, you want to write quality JavaScript?</strong>, lets read that.</p>
  140. </article>
  141. <article class="slide" id="3-1">
  142. <h1>Act one: How things work</h1>
  143. </article>
  144. <article class="slide" id="3-2">
  145. <h2>The year is 2280</h2>
  146. <p>The entire planet exists in the aftermath of a catestrophic event that has obliterated almost all technology. You are part of a team of scientists working to re-build the internet so Las Vegas can easily share pictures of cats with Washington DC.</p>
  147. <p>Your superiors have given you one computer artifact from the old times, with the other computer back at their base hundreds of miles away. How in the world are you going to make this work?</p>
  148. <h2>Challenges</h2>
  149. <ul>
  150. <li>How might we send a signal over long distances?</li>
  151. <li>What would a signal being sent need to look like so that we can understand eachother?</li>
  152. <li>How can we describe what the message inside the signal is?</li>
  153. <li>How will we know what message in the signal is trying to do?</li>
  154. <li>How can we make these messages into full documents?</li>
  155. <li>How might we make documents interactive after they've been sent, rather than static?</li>
  156. </ul>
  157. </article>
  158. <article class="slide" id="3-3">
  159. <h2>Sending signals</h2>
  160. <blockquote>We need to send this signal over 500 miles, using wires, radio waves, signal lights, and perhaps carier pidgeons. We don't have a lot of resources, but this has to work.</blockquote>
  161. </article>
  162. <article class="slide" id="3-4">
  163. <h2>Sending signals</h2>
  164. <ul>
  165. <li><h3>Doesn't matter what it is</h3>
  166. <ul>
  167. <li>You eventually come up with the conclusion that you can send data totally without concern for what it's actually being carried on, you just need a consistant way to represent it.</li>
  168. </ul>
  169. </li>
  170. <li><h3>Doesn't matter how long it takes</h3>
  171. <ul>
  172. <li>And it doesn't matter if it takes one second, a week, or a year. The data is still data, the speed it travels is up to the medium it moves over, be it electricity, wire, or someone walking with the data on a sheet of paper.</li>
  173. </ul>
  174. </li>
  175. <li><h3>Doesn't matter what it carries</h3>
  176. <ul>
  177. <li>The thing that carries the data doesn't impose limits on what it can cary, it should be able to any data.</li>
  178. </ul>
  179. </li>
  180. </ul>
  181. </article>
  182. <article class="slide" id="3-5">
  183. <h2>Signal language</h2>
  184. <blockquote>Its great that you have something that can carry any data, but we need to know how it's going to be sent. Will we confirm recipt? Will you just send stuff and hope it works?</blockquote>
  185. </article>
  186. <article class="slide" id="3-6">
  187. <h2>Signal language</h2>
  188. <p>You end up with two core formats for sending the data</p>
  189. <ul>
  190. <li><h3>Sometimes you need to be sure</h3>
  191. <ul>
  192. <li>Lets say I send you a request form for the latest cats and give you one-hundred million dollars. I want to know that you got that message successfully.</li>
  193. </ul>
  194. </li>
  195. <li><h3>Sometimes it doesn't matter</h3>
  196. <ul>
  197. <li>Maybe I'm sending you a live video feed of all my cats. It's okay if a frame or two go missing, I don't need to confirm each one was sent.</li>
  198. </ul>
  199. </li>
  200. </ul>
  201. </article>
  202. <article class="slide" id="3-7">
  203. <h2>Signal contents</h2>
  204. <blockquote>Its awesome that you have a way to send data over any medium in the same format and have a standard format for it, but I'm still not receiving any lol-cats with this. </blockquote>
  205. </article>
  206. <article class="slide" id="3-8">
  207. <h2>Signal contents</h2>
  208. <p>Alright! Lets send some cats!</p>
  209. <p>Wait, what's cat data look like? How many cats are going to be sent at once? Can I just send the cat? What if I'm sending data that lists multiple cats, but no actual cat data?</p>
  210. <p>How can I make that work?</p>
  211. <br/>
  212. <p>Okay, okay. What if we sent raw-text to describe cats? What would such a document require...</p>
  213. <p>Big cats, small cats, a way that we know it's a cat document, a way to get image files of cats, a way to find other resources on cats too. </p>
  214. </article>
  215. <article class="slide" id="3-9">
  216. <h2>Hyper Cat Markup language</h2>
  217. <p>Another staggering breakthrough! You've devised a way to structure text in such a way it represnts a document all about cats.</p>
  218. <pre><code>
  219. &lt;hcml&gt;
  220. &lt;bigCats&gt;
  221. &lt;smallCats&gt;
  222. &lt;ImageOfCats catRef=&amp;quot;businesscat&amp;quot;/&gt;
  223. &lt;/smallCats&gt;
  224. &lt;smallCats&gt;
  225. &lt;LinkToMoreCats catRef=&amp;quot;hasmoreplz&amp;quot;/&gt;
  226. &lt;/smallCats&gt;
  227. &lt;/bigCats&gt;
  228. &lt;/hcml&gt;
  229. </code></pre>
  230. <p>Briliant.</p>
  231. </article>
  232. <article class="slide" id="3-10">
  233. <h2>Hyper Cat Transport Protocol</h2>
  234. <p>Oh, wait a minute. How are we going to send these cats over the network? How will we know what cats they're requesting?</p>
  235. <p>If only there was a way to wrap our HCML inside of something when sent back would describe where it came from, what chezbergers
  236. the cats on the other side haz, and other information than is inside the HCML. We'd also need something that the server on the other side can use to know what kind of cats it wants back</p>
  237. <p>We should call such a thing after what it is: a transport protocol. Lets call it the Hyper Cat Transport Protocol.</p>
  238. <p></p>
  239. <p></p>
  240. </article>
  241. <article class="slide" id="3-11">
  242. <h2>Hyper Cat Transport Protocol</h2>
  243. <p>What should a request for some Hyper Cats look like? We should have two really important things, one where we try to get information on the cats, and another where we try to do something with the cats.</p>
  244. <p> If we wanted to get cat information we could do something like
  245. <pre><code>
  246. GET /felix?colour=Black
  247. Host: catServer.cat
  248. WhoAmI: Your friendly neighbourhood crazy cat lady
  249. Accept: Catnip, yarn, purrs, hairball
  250. </code></pre>
  251. And if we wanted to ask the cats to do something
  252. <pre><code>
  253. ASK /Felix
  254. Action: Use magic bag of tricks
  255. Host: catServer.cat
  256. WhoAmI: Your friendly neighbourhood crazy cat lady
  257. Accept: Catnip, yarn, purrs, hairball
  258. </code></pre>
  259. </p>
  260. </article>
  261. <article class="slide" id="3-12">
  262. <h2>Hyper Cat Transport Protocol</h2>
  263. <p>Those are pretty straight-forward ways to ask for cats or have them do something on the other side, but, what would our reponse look like?</p>
  264. <p>Well, we'd need to know that the response we get back didn't have any issues, and it would be nice to know how much the cat's were expecting weigh, when they were last fed, and how we should take care of them.</p>
  265. <p>
  266. <pre><code>
  267. HCTP No Issues
  268. Date: Mon, 10 Jan 2280 22:38:34 UCT
  269. Last-Fed: Mon, 10 Jan 2280 18:28:40 UCT
  270. Cat-Weight: 438
  271. Cat-types: Indoor/Outdoor cats
  272. &lt;hcml&gt;
  273. &lt;bigCats&gt;
  274. &lt;smallCats&gt;
  275. &lt;ImageOfCats catRef=&amp;quot;businesscat&amp;quot;/&gt;
  276. &lt;/smallCats&gt;
  277. &lt;smallCats&gt;
  278. &lt;LinkToMoreCats catRef=&amp;quot;hasmoreplz&amp;quot;/&gt;
  279. &lt;/smallCats&gt;
  280. &lt;/bigCats&gt;
  281. &lt;/hcml&gt;
  282. </code></pre>
  283. </p>
  284. <p>Neat! We now know how to deal with the cats, information about them, and if they had any problems on the other side with our request.</p>
  285. <p>I'm sure if we asked for a wrong cat we'd get a response about cats not found, or asked a cat to do something wrong we'd get another error that describes that situation as well.</p>
  286. </article>
  287. <article class="slide" id="3-13">
  288. <h2>CatScript</h2>
  289. <p>Well, it's cool that you get your cats, and can have cats somewhere else do something, but whenever you get some HCML back, it just kinda... sits there in the sun, doesn't play around. Lazy cats.</p>
  290. <p>It's a real shame we can't have cats play around after they come here from the server, but maybe we can do something... there's a few neat techniques that let cats do things in other places, can we put that technique in here?</p>
  291. <p>Of course we can! We just need to make sure the language we speak to cats with makes sense and is expressive enough we can have cats do really cool tricks, and we can include the script for that language with the cats we send, that way the package of HCML comes with instructions on talking to the cats.</p>
  292. <p>What could our script for cats look like?</p>
  293. <pre><code>
  294. HAI
  295. CAN HAS STDIO?
  296. I HAS A VAR
  297. IM IN YR LOOP
  298. UP VAR!!1
  299. VISIBLE VAR
  300. IZ VAR BIGGER THAN 10? KTHX
  301. IM OUTTA YR LOOP
  302. KTHXBYE
  303. </code></pre>
  304. </article>
  305. <article class="slide" id="3-14">
  306. <h2>Application CatScript Interface</h2>
  307. <p>That's all good in well that we have a way to describe complex tasks to cats, but how should we interact with them? How can we interact with the room their in? Can we talk with the people who sent us the cats without having to ask for all the cats a second time?</p>
  308. <p>Okay, whatever it's going to be, lets call them the Cat Object Model, the Room object, and eXtra Cat Requests.</p>
  309. <p>The cat object model will just be a way to work with cats, like change their collars, feed them, move them around, and things of that nature.</p>
  310. <p>The room object will be a way to find out things about the room, like how big it is, what kind of room this is, turn the lights on or off, where it is, and so forth.</p>
  311. <p>The eXtra Cat Request will send a messenger out of the room to go pick up more cats from the server, and when the messenger returns from the XCR we can use the COM to re-arrange things.</p>
  312. </article>
  313. <article class="slide" id="3-15">
  314. <h2>Meanwhile...</h2>
  315. <p>You've done great work so far, unfortunately, there are evil wizards at play.</p>
  316. <p>While you've designed all these wonderful things, there are those out there who don't understand why you did some things the way you did, and simply do not care.
  317. Normally this wouldn't be a big deal, except, they try to work around all you've created with cheap hackish tricks rather than learn it.</p>
  318. <p>The following may seem crule and brutal, but it's the present state of the world as we know it.</p>
  319. <p>What evils do you face? These evil wizards have done such things as, rather than use your Cat Object Model to make one's wiskers move, they feed them all into a meat grinder and glue the bits together the same way... every time they want to move a whisker. Why? Because, they say, it's easier.</p>
  320. <p>They know nothing of your cats, they stich cute outfits and scripts to read to them right into a cat's flesh, rather than send them in a seperate package.</p>
  321. <p>What's worse, the information out there that instructs a normal person to do these things is the most common and first thing they see when trying to use your Hyper Cats. They don't even know there's a better way than murdering kittens and unspeakable torture. Lets make a commitment now to save the kittens.</p>
  322. </article>
  323. <article class="slide" id="3-16">
  324. <h2>Welcome to the real world, Neo.</h2>
  325. <p><blockquote>Have you ever had a dream, Neo, that you were so sure was real? What if you were unable to wake from that dream? How would you know the difference, between the dream world, and the real world?</blockquote></p>
  326. <p>Surprise, you're not really in the 23rd century, you're right here with the rest of us, and none of that stuff you just made up actually exists.</p>
  327. <p>Lucky for you, if you're the chosen one, you'll somehow manage to get a job writing software using the Hyper Text Markup language, Hyper Text Transport Protocol, JavaScript and understand the Document Object Model, Browser Window Object, and XML HTTP Request.</p>
  328. </article>
  329. <article class="slide" id="3-17">
  330. <h2>Unfortunately, it's not all magic.</h2>
  331. <p>Everything was invented a long time ago and is very well documented and tested, chances are there's not a bug with HTTP, it's how your code deals with it.</p>
  332. <p>Tragically, the dark wizard bit from your dream is very real, people abuse the Document Object Model, mix styles and scripts directly with their HTML code, and create unmaintainable, slow, sloppy, messy, pathetic nightmares for the rest of us... either because they didn't want to learn or they wern't lucky enough to find good information.</p>
  333. </article>
  334. <article class="slide" id="3-18">
  335. <h2>HTTP.</h2>
  336. <p>So, to help you understand what HTTP really is (nothing to do with cats), let's talk about how it's different.</p>
  337. <p>First of all, it's not sending cats, it's sending binary information. The information can be a web page, JavaScript file, a download, a movie, and basically everything that ever comes out of your browser uses HTTP.</p>
  338. <p>Who came up with HTTP? The International Engineering Task force. They create these documents called "RFCs", which basically means "Request for comments". They number them, and the one that describes HTTP happens to be RFC 2616. It's been around since 1999, and introduced HTML 1.1, which made some changes from HTML 1.0, which came out in 1946 under RFC 1945, which built on the first version of HTTP which came out in 1991, surprisingly not under the IETF who wern't really the powerful group they are today.
  339. Why am I telling you all this? Because you need to know that people have been working on that backbone of web of web technology for over 20 years. To put this into perspective, Linux came out the same year. </p>
  340. <p>Why am I really telling you this? Because standards are very important, you can't just slap stuff together and say "yeah, kinda does it", without becoming an evil wizard that doesn't care how many developers they turn into psycopaths. (You have a direct impact on making people swear and enter fits to rage by being a dark wizard).</p>
  341. <p>Why else? Because HTTP isn't a magical hand-wavy thing, it's percisely defined and much shorter than this tutorial.
  342. There's two actions web developers need to be concerned with, the GET and the POST request. GET was created to gets data, POST was created to send data to the server, and preform an action.</p>
  343. <p>Can you use a GET request to preform an action and a POST request to get information? Yes, but you shouldn't do this in reverse, and we'll explain why later when discussing common problems more generally. Nothing worse than having a web crawler delete every record from your website because you're using GET to preform actions!</p>
  344. <p>All HTTP does is work as the mechanisim between you and the server. Once the data is on your side, the server could have exploded and the data is still on your side. The same goes for you sending data to the server, there's no "constant" communication.
  345. Pay attention, because one of the top questions I see people ask is why their JavaScript can't interact with the server, and it's very simple: it's sent from the server to run on your machine exclusively. The code your browser runs never runs in the server.</p>
  346. <p>That's really the basics of what you need to know. HTTP does more than just GET and POST, and if you're up for it I encourage you to read the most recent RFC that defines it.</p>
  347. <p>Remember, this isn't magic, it's just a block of text that describes things you're sending back and forth.</p>
  348. </article>
  349. <article class="slide" id="3-19">
  350. <h2>HTML.</h2>
  351. <p>Just like HCML, HTML is a language that describes text and other objects. It can come in differnt forms and has been changing for long time. You'll have to tread lightly and understand that this is meant to be just the data of a website. It's not supposed to have CSS or JavaScript embedded into your html elements.</p>
  352. <p>That's all it is. HTML describes information. It also allows you to be a dark wizard and put JavaScript and CSS styles into an HTML element.</p>
  353. <p>And you'll have to ask yourself, what's going to be easier to work with. Is it something like this??</p>
  354. <pre><code>
  355. &lt;html&gt;
  356. &lt;body&gt;
  357. &lt;p Colour everything orange and When they click on a paragaph make it do something.&gt;Hurray, I'm text.&lt;/p&gt;
  358. &lt;p Colour everything orange and When they click on a paragaph make it do something.&gt;Hurray, I'm text.&lt;/p&gt;
  359. &lt;p Colour everything orange and When they click on a paragaph make it do something.&gt;Hurray, I'm text.&lt;/p&gt;
  360. &lt;p Colour everything orange and When they click on a paragaph make it do something.&gt;Hurray, I'm text.&lt;/p&gt;
  361. &lt;p Colour everything orange and When they click on a paragaph make it do something.&gt;Hurray, I'm text.&lt;/p&gt;
  362. &lt;/body&gt;
  363. &lt;/html&gt;
  364. </code></pre>
  365. <p>Or something like this?</p>
  366. <pre><code>
  367. &lt;html&gt;
  368. &lt;head&gt;
  369. &lt;script&gt;
  370. Colour everything orange
  371. When they click on a paragaph make it do something.
  372. &lt;/script&gt;
  373. &lt;/head&gt;
  374. &lt;body&gt;
  375. &lt;p&gt;Hurray, I'm text.&lt;/p&gt;
  376. &lt;p&gt;Hurray, I'm text.&lt;/p&gt;
  377. &lt;p&gt;Hurray, I'm text.&lt;/p&gt;
  378. &lt;p&gt;Hurray, I'm text.&lt;/p&gt;
  379. &lt;/body&gt;
  380. &lt;/html&gt;
  381. </code></pre>
  382. <p>Obviously the answer is the code sample that seperates concerns. You can easily make all the paragphs blue instead, or make a differnt action happen, quickly add paragraphs, and read it much more quickly. One common defence I hear for the first method is it's shorter lines, which is very nice and all but real programmers don't look at the number of lines. Real programmers look at quality and complexity.</p>
  383. <p>The bad technique quickly becomes a nightmare to work with, eating up all of your precious time dealing with boring errors that don't seem to go away rather than quickly making such a trivial change and being onto your next exciting challenge.</p>
  384. <p>HTML is mostly looked after by the W3C and the WHATWG. The W3C has a validator that describes to you what errors exist in your HTML code, and I highly advise you start using it.</p>
  385. </article>
  386. <article class="slide" id="3-20">
  387. <h2>JavaScript.</h2>
  388. <p>If you've made it this far I'd like to remind you the focus is not on learning JavaScript, but rather learning quality JavaScript. If you don't know JavaScript you may not enjoy the fullness of this tutorial.</p>
  389. <p>As I said before, JavaScript in your browser doesn't even know the server exists, and for all it cares the server could have been in the center of a nuclear explosion.</p>
  390. <p>JavaScript is an interesting and misunderstood language, and many of those things that make it misunderstood are why you're here now, and I thank you for taking the time to learn these things, it means a lot. It means someone won't have to curse you for being a dark wizard, especially me if you're ever in the same chat room asking for guidance.</p>
  391. <p>JavaScript is actually called ECMAScript. You'll find it in a surprising number of places with a new name slapped on it, such as Action Script in flash, The QT programming framework has JavaScript extensions, as does modern PHP. JavaScript is more recently able to run on your server to replace the job of PHP or other server-side languages (but both sides will never know about eachother). I'll referr you to Douglass Crockford's video series on that for more history and the evolution of what it was to what it is now. Douglass Crockford is one of the most influental people in JavaScript, next to Brendan Eich who invented it. You should learna bit about the community when you have a moment.</p>
  392. <p>It's recently moved from the old "ES3" version to it's present "ES5" version, and next will becomes "ES6".</p>
  393. <p>The problem with this is that we unforunately have people using browsers made over ten years ago, much earlier than ES5 came out. This means they can't natively do a lot of really cool and powerful things that modern JavaScript permits.</p>
  394. <p>There is good news however, and that is that we can actually repair old browsers to some degree with compliance libraries, thanks to JavaScript's design choices which we'll get into later.</p>
  395. </article>
  396. <article class="slide" id="3-21">
  397. <h2>Understand the APIs.</h2>
  398. <p>There's three things that make JavaScript do cool things in your browser, and that's the programming interface to work with it. There's three, the DOM API, the XHR request API, and not truthfully an API but similar is the window object.</p>
  399. <p>These specs are all maintained by the W3C and WHATWG. DOM and are very much like that tool that let you move cats around from your dreams, but instead of cats we're obviously just working with HTML nodes that make our browser render such nice websites.</p>
  400. <p>Perhaps the most harmful of all dark wizards exists here, and he's only harmful because his work is so far-spread. Remeber that bit about grinding up all the cats and spending time gluing them together? Well, some guy from Microsoft (Eric Vasilik) working on that awful hunk of standards non-compliancy known as Internet Explorer 6 created what's known as "innerHTML" along with some other evils I dare not speak the name of too loudly lest you try to use them. Normally your browser will render your website for you, but innerHTML demands that the entire page be sent into the trash can just to change a single bit of text somewhere. The real tragedy is the DOM spec fully provides really fast ways to do exactly that, but has gone mostly ignored "because it's easier." I discuss later why this makes all your web apps run so painfully slow. All I'm going to say about this right now is you officaly surrender all rights to ever complain about Internet Explorer if you use this damn thing, and I know how much web devs like to say IE6 is the problem.</p>
  401. <p>Next up we have the XHR request, which is probably known more as "AJAX". Really, it's just a way for you
  402. to request more data from the server without making the browser do it. If the browser did it, you would have to load the
  403. entire page all over again. This is great because getting all of the
  404. data for a page a second time can be very painful. Modern uses are things such as file uploads
  405. without having to submit a form and re-load the page, or those instant updates or chat messages you get.</p>
  406. <p>Lastly is the window object. It's not the picture your browser made, but rather the actual browser window. It'll contain a lot of information about what plugins such as Flash you're using, what the page address is, and other such information. It also lets you change some settings. It's just a simple way to deal with the software that displays the website, nothing more. Unfortunately a lot of browsers take some liberty and add a lot of content into it that's not part of the spec. Luckily, the vendors out there have been generally good at keeping it consistant, with just a few gotchas.</p>
  407. </article>
  408. <article class="slide" id="3-22">
  409. <h2>Summary</h2>
  410. <ul>
  411. <li>It doesn't matter how the computer is connected, it can be over a cellphone network, WiFi, Ethernet cables, written down on post cards and sent via pidgeon. The entire Internet is build on layers that make these things irrelevant to what you're doing with JavaScript, and there is no case where your script won't work because the connection is WiFi. Do you now understand ethernet/wifi and TCP/IP to have a general idea of what's going on?</li>
  412. <li>How much HTTP do you actually know? You should at-least understand how to read the text from a request and understand what it's asking for. You should understand that it doesn't care a browser exists, it only cares about the text sent around. This is why you can't do silly things like make "drag the box into the circle" as a captcha, HTTP simply doesn't care what your browser does or that it even exists. You should also understand the error codes.</li>
  413. <li>Do you understand what HTML is supposed to be? Sure, you might know how tags work and nest elements and all that fun stuff, but do you actually understand doctype and quirks mode? Do you understand that you shouldn't put paragraph tags around a list element? Have you glanced at the spec once in your career? Do you at least try to pass the validator? If you do, then you're on the right track.</li>
  414. <li>JavaScript can be run server-side, and client side (in your browser), but you can never directly talk from your client's JavaScript to anything on the server.</li>
  415. <li>Learn the Window API, learn the DOM API, and learn the XHR API. If you don't know these three things you have no business writing code for the browser, they are the basic building blocks of what make everything in the browser so cool.</li>
  416. </ul>
  417. </article>
  418. <article class="slide" id="4-1">
  419. <h1>Act two: This things bigger than just you and me</h1>
  420. </article>
  421. <article class="slide" id="4-2">
  422. <h2>Secret agent man</h2>
  423. <p>Lets go over hiding techniques</p>
  424. <p>
  425. -put a bunch of whitespace in there
  426. -javascript right-click
  427. -"encrypt"
  428. -spending money on something stupid http://www.juniper.net/security/auto/vulnerabilities/vuln7169.html
  429. -using flash
  430. -http referer header
  431. </p>
  432. <p>Don't be an idiot, be proud of what you made, put it online</p>
  433. <p>Everything on the web is open-source, there is no possibility what-so-ever to hide your code, anyone who says otherwise is trying to fraud you of your money.</p>
  434. </article>
  435. <article class="slide" id="4-3">
  436. <h2>It's a big world after all</h2>
  437. <p>JavaScript's been around a long time, been known as many things, gone through many changes, and survived through changes in not just how the web works, but how browsers are built.</p>
  438. <p>There's dozens of browsers, modern, leagacy, and future. You must be aware of this, as you are likely to deploy code that works in many browsers.</p>
  439. <p>It's important to keep in mind that your code must fulfil a need. If the need absolutely has to work in legacy browsers, then that's your objective. If you're lucky, you can write beautiful standards-compliant-code. If you're smart, you might be able to do both.</p>
  440. <p>What are we concerned about in terms of browsers that is on the way out? Right now, IE6 is in it's death throws, and the other legacy
  441. versions are on their way out. Aside from personal computers we have the legacy mobile platform, a strange mix of awkard rendering engines
  442. that work half the time and don't the rest. What's going to slow you down you here? Legacy browsers were really the days of the wild
  443. west, everyone just invted whatver blink tags they wanted, created whatever programming languages or plugins, invented their own standards,
  444. and other things. They did this to try and gain competitive market share of the browsers by fighting on features. Unfortunately, standards-compliant
  445. is only recently seen as a useful feature.
  446. </p>
  447. <p>
  448. The unfortunate result of this is what we're still dealing with today, because for some bizzare reason users refuse to update their decade-old
  449. browsers for free (an interesting study for anyone into economics or psycology). Old browsers might make styles the wrong way, or have ineffiecient code to preform any given task, or simply lots of little quirks.
  450. </p>
  451. <p>What are we concerned about in terms of browsers that is modern? Modern browsers of 2011 are much more robust and standards-compliant.
  452. There's unfortunately some things that create quirks between browsers as they are not perfectly standards compliant, however, we have it
  453. much better than the legacy world. Our browser issues are much simpler to normalize, ineffiecient code is disappearing, browsers are mostly
  454. open-source (so everyone can fix the problems), and are finally getting over the concept of releasing a single version and rather
  455. started automatically updating with the latest and best tools, so the users have minimal excuse to have outdated browsers even three months later.
  456. </p>
  457. <p>What are we concerned about in terms of browsers that haven't been made yet? Browsers are now growing towards reaching
  458. perfect standards compliance, which is great news for anyone who enjoys maintaining their grasp on sanity. This doesn't mean
  459. standards are finalyized, quite the oposite: they're growing faster than ever. We're reaching brave new boundries of what HTML and HTTP
  460. was conceived capable of doing in the 1980s, leading us to a place where we can create 3d rendering engines and powerful apps. In the future
  461. of browsers we must focus on maintainable code, being sure our code isn't broken by updated standards, but generally, life's looking good.
  462. </p>
  463. <p>Much like the browser issue, there are dozens of JS engines, modern, legacy, and future. The issues here are ones you need to be even more so aware of.</p>
  464. <p>In the past, it was unheard of to run JavaScript outside of the browser, while today it's support is staggering.
  465. You may run it from the command line without a browser, or a whole webserver programmed with JavaScript for instance.</p>
  466. <p>What are we concerned about in terms of JavaScript engines that is on the way out? Slow. They are so slow, it's jealious of a turtle gliding on snales stuck in molases going uphill.</p>
  467. <p>What are we concerned about in terms of JavaScript engines that is modern? JIT compilers, so cool.</p>
  468. <p>What are we concerned about in terms of JavaScript engines that haven't been made yet? ??? Oh man, I don't know, es-next?</p>
  469. <p></p>
  470. <p></p>
  471. </article>
  472. <article class="slide" id="4-4">
  473. <h2>The world can be flat</h2>
  474. <p>If you have to write code that works everywhere, you'll quickly find that you create the same set of fixes each time. Eventually
  475. you'll get smarter and realize you can package them into a library, then you'll search google for something and find out somebody
  476. already poured quite a serious bit of personal effort into making those for you already. Often called differnt things, such as
  477. shims, browser compliancey libraries, or normalizers.
  478. If you know your code's going to run into these issues, use a shim. If you want to make your own and more importantly have good reasons
  479. then please do so. In most cases, there's more to be gained by helping everyone and contributing to the shim than there is making your
  480. own shim that hasn't been tested by thousands of programmers.</p>
  481. <p></p>
  482. <p></p>
  483. </article>
  484. <article class="slide" id="4-5">
  485. <h2>Hack the gibson</h2>
  486. <p>See if I can find that link to hackers xss page... http://ha.ckers.org/xss.html </p>
  487. <p>Link to owasp too https://www.owasp.org/index.php?title=XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet </p>
  488. <p> talk about ssl </p>
  489. <p> talk about get/post </p>
  490. <p> talk about making browsers crash </p>
  491. </article>
  492. <article class="slide" id="4-6">
  493. <h2>Don't listen to fools</h2>
  494. <p>Establish criteria to determine who's a fool, who's a wise man, how you can become wise (philosophy of learning from mistakes)</p>
  495. <p>Explain why w3schools and hitting up google generally sucks</p>
  496. <p>Explain common awesome places to check out.</p>
  497. <p>Authority is meaningless, proof is the gold-standard.</p>
  498. <p></p>
  499. </article>
  500. <article class="slide" id="4-7">
  501. <h2>Help me help you</h2>
  502. <p>Your lazy and poorly written code isn't helpful to you, that's why you have a problem you need help with. Now you want me to decypher your insane garbage to fix something? You've totally lost your mind.</p>
  503. <p>Stop failing</p>
  504. <p>Learn</p>
  505. <p>Teach</p>
  506. </article>
  507. <article class="slide" id="4-8">
  508. <h2>Fail gracefully</h2>
  509. <p>Yes, you write javaScript, but there's a lot of cases outside of running noscript plugins where JavaScript simply doesn't work, and I wish it did.</p>
  510. <p>w3m, lynx, my blackberry, legacy stuff, proxies, scrapers, spiders, and noscript.</p>
  511. <p>Don't be like twitter, your site shouldn't fail totally if your visitor doesn't have JS enabled.</p>
  512. <p>Sometimes it's okay.</p>
  513. <p>At the very minimum, alert that you need to enable js.</p>
  514. </article>
  515. <article class="slide" id="4-9">
  516. <h2>Improve gracefully</h2>
  517. <p>A lot of people have put a lot of great work making older browers support modern fetures.
  518. Don't bring down the quality of your site, improve the quality of their browser. IE6 sucks.</p>
  519. <p>Is this really just repeating shims?</p>
  520. </article>
  521. <article class="slide" id="4-10">
  522. <h2>Ohayo Gozaimasu</h2>
  523. <p>Turns out more than just english speaking people under 50 years of age from western countries use the Internet,
  524. only 2 out of 7 billion people use the internet, names are really confusing,
  525. and english isn't all you'll have to think about.</p>
  526. <p>Basically, learn to i18n.</p>
  527. <p>My friend's last name is tancock, microsoft won't let him sign up for some services
  528. because the morality tyrants think it'd be much more appropreate if his last name were Smith.</p>
  529. </article>
  530. <article class="slide" id="4-11">
  531. <h2>Summary</h2>
  532. <ul>
  533. <li>Sure, you wrote something, but everyone can see it. It's all "open" source.
  534. Sure, you can obfuscate it, minifiy it, whatever... at the end of the day, if I
  535. want to see you code, it's trivial for me to defeat any methods you put in place.</li>
  536. <li>You need to understand multiple browsers differences. Target the most popular ones,
  537. or the ones your market demographic has. For instance, ie6 won't render DOM table-cell
  538. elements if you appendChild rather than the DOM API methods specifically for tables.
  539. More examples exist, you need to learn them. Ideally, you'll only know that browser
  540. differences exist and end up using a nice normalization libaray that makes everything
  541. work the right way.</li>
  542. <li>You need to understand how to write code around all of these issues in browsers, not your
  543. specific browser. You'll quickly learn things that work well in one browser are slow in another.
  544. You'll have to figure out how browsers work and why they're different.</li>
  545. <li>For the love of Odin's beard, don't write code that permits me to do cross-site-scripting
  546. attacks on your code. If you make an ajax call to a cell and do
  547. something like cell.innerHTML = "&lt;script&gt;alert("xss")&lt;/script&gt;",
  548. and an alert box shows up, you've done it wrong.</li>
  549. </ul>
  550. </article>
  551. <article class="slide" id="4-12">
  552. <h2>Summary</h2>
  553. <ul>
  554. <li>Stay the bloody hell away from DynamicDrive, w3Schools, and websites that give bad advice.
  555. You need to find comunities that give good advice. Here on Stack Overflow we have the JavaScript
  556. and Node.JS chat rooms, and we do our best to keep pushing the limits of what's "better", where
  557. as sites like w3s keep outdated data and never bother with it. You should stick with the offical
  558. spec sites such as the W3C, the Mozilla Developer Network (MDN). Ask for peer-review of your code.
  559. When you feel like you're doing something painful with your code, when you're doing a lot of
  560. cut+paste+tweak with your code, you should immediately come to a chat room and ask for guidance on
  561. writing better code.</li>
  562. <li>When you come for guidance, or want to share that really cool thing you made... please, pretty
  563. please. Please, make sure you documented it, make sure your variable names make sense, make sure it's
  564. not all one-lined. You need to write clean code. If you have a pile of garbage, not only have you
  565. failed, nobody who knows how to help you will want to. Help us help you.</li>
  566. </ul>
  567. </article>
  568. <article class="slide" id="4-13">
  569. <h2>Summary</h2>
  570. <ul>
  571. <li>You want to write JavaScript-- that's cool, respect that not everyone supports
  572. JavaScript. Two reasons for this-- 1) Faster Internet for everyone (rather than
  573. "ajax all the things" which leads to a slower experience). 2) Web's more accessible
  574. to people on console-based browsers, people running no-script, mobile phones. What
  575. I'm trying to say is, your site should degrade gracefully if someone doesn't have
  576. JavaScript and at the very least, use &lt;noscript&gt; tags to alert them as to such.</li>
  577. <li>Because of the prototype nature of JavaScript, you can make changes to how the
  578. language actually works-- which is really sweet. You see, JavaScript is evolving,
  579. we're pulling out of "ECMA Script 3", which is the older version of JS, and into
  580. "ECMA Script 5" (aka, es5). Because of prototype, we can fix the es3 language in
  581. the field to work like es5. That means, ie6, a 10 year old browser gets language
  582. feature that came out last year. Use es5-shims wherever you can, they're really
  583. cool and you need to look into it.</li>
  584. <li>The western world of English speaking white kids isn't who uses the internet.
  585. Code accordingly. This means you need to understand internationalization, and
  586. writing code that deals with higher demand. 10 years ago there were less than 500
  587. Million people on-line, today it's roughly 2 billion, and in another 10 years?
  588. Probably close to every person on the planet will have internet access, that means
  589. you need to support names that don't fit the regex of /[a-z ']/i, but include Hindi,
  590. Arabic, accents (this is an existing problem from short-sighted developers), Chinese,
  591. and others. Understand character sets, Unicode and UTF-8.</li>
  592. </ul>
  593. </article>
  594. <article class="slide" id="5-1">
  595. <h1>Act three: How to write clean code, not a pasta</h1>
  596. </article>
  597. <article class="slide" id="5-2">
  598. <h2>A rose by any other name</h2>
  599. <p></p>
  600. <p></p>
  601. <p></p>
  602. </article>
  603. <article class="slide" id="5-3">
  604. <h2>RTFM? I can't, you didn't WTFM!</h2>
  605. <p></p>
  606. <p></p>
  607. <p></p>
  608. </article>
  609. <article class="slide" id="5-4">
  610. <h2>Cut and paste</h2>
  611. <p></p>
  612. <p></p>
  613. <p></p>
  614. </article>
  615. <article class="slide" id="5-5">
  616. <h2>Summary</h2>
  617. <ul>
  618. <li>Name your variables after things that make sense.</li>
  619. <li>Document your code. I don't care if you're using JSDoc powered by
  620. rhino or you have a bunch of scribbles. Write documentation that helps
  621. the person who is going to use your code. Write documentation for someone
  622. who wants to improve or maintain your code. Include useful comments. Comments
  623. like "This fizzes the bizz" or ones half-English half-french aren't helpful.
  624. Describe what a function does. Describe complex sections of code.</li>
  625. <li>Figure out how to limit repetition of code. Look for modular design or
  626. functional patterns. See what you can abstract. You should never end up
  627. cutting+pasting+tweaking large segments of code to do the same thing.</li>
  628. </ul>
  629. </article>
  630. <article class="slide" id="5-6">
  631. <h2>Summary</h2>
  632. <ul>
  633. <li>You need to understand the DOM API. The DOM and window objects provision for a
  634. lot of great things. This sounds like a lot of work but that's because it's a big
  635. scary acronym. A lot of you JavaScript ninjas like to write code such
  636. as &lt;a href="javascript:alert("foo")"&gt;. FFS DONT DO THAT. Wait for the full document
  637. to be loaded, separate your JavaScript code from the html document. This is basic OOP
  638. practices 101, just don't in-line your JS or CSS into your html document, ever.
  639. Figure out how to do it properly or find someone who knows how to show you how
  640. to

Large files files are truncated, but you can click here to view the full file