Successfully reported this slideshow.

Bestpractices nl

1,214 views

Published on

presentation on best practices for a couple of java developers

Published in: Technology
  • Be the first to comment

Bestpractices nl

  1. 1. Javascript“the worlds most misunderstood language”
  2. 2. the big book
  3. 3. The good book
  4. 4. JavaScript !== Java
  5. 5. Global namespaceDon’t touch!
  6. 6. x = global;var x = global;// if not inside a functionfunction foo(){ x = global; // without var. var y = notglobal; // yeah, var}
  7. 7. Creëer je eigen namespace
  8. 8. ;var sancus = function(){ var x = notglobal;};
  9. 9. Patterns anybody?
  10. 10. Private variables
  11. 11. Priveledged variables
  12. 12. Public variables
  13. 13. Closures
  14. 14. Revealing module pattern‘christian heilman’
  15. 15. ;var sancus = function(){}();// self invoking function :)
  16. 16. ;var sancus = (function(){ // private variables var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();
  17. 17. ;var sancus = (function(){ var config = { foo:bar, html5:cool // no trailing , }, init = function(){ // doStuff }; return{ init:init };}();
  18. 18. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; // return init to global namespace return{ init:init };}();
  19. 19. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();// call init
  20. 20. // ; is just when someone else messed up...;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();
  21. 21. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();alert(config.foo);// won’t work
  22. 22. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();alert(sancus.config.foo);// won’t work
  23. 23. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ alert(config.foo); // will work }; return{ init:init };}();sancus.init();
  24. 24. Niet typesafe(of toch wel?)
  25. 25. var x = 5; // number var y = ‘5’;// stringif ( x == y ){ // true}
  26. 26. var x = 5; // numbervar y = ‘5’; // stringif ( x === y ){ // false}
  27. 27. Best practices
  28. 28. HTMLStructuur
  29. 29. <table>NOT FOR LAYOUT
  30. 30. <table> for tabular data
  31. 31. don’t code for presentation
  32. 32. code for content
  33. 33. tell a story
  34. 34. http://html5boilerplate.com/
  35. 35. Javascript is blocking
  36. 36. <a href=”#” onClick=”alert(‘hello world’);”> inline alert</a>
  37. 37. <a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a>
  38. 38. <!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title> <script src=”script.js”></script> <script src=”script2.js”></script> <script src=”script3.js”></script></head><body> foo</body></html>
  39. 39. (Inline) scripts are blockingeverytime they are encountered.
  40. 40. <!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title></head><body> <!-- javascript at the bottom --> <script src=”script.js”></script></body></html>
  41. 41. CSS
  42. 42. CSSStyling
  43. 43. Start bigend small
  44. 44. base.css
  45. 45. beware of classisitus
  46. 46. Fontface
  47. 47. h1 {font-family:FrescoStdNormalRegular,arial;}
  48. 48. @font-face { font-family:FrescoStdNormalRegular; src: url(fonts/FrescoStd-Normal.eot); src: local(☺) url(fonts/FrescoStd-Normal.woff) format(woff), url(fonts/FrescoStd-Normal.otf) format(opentype), url(fonts/FrescoStd-Normal.svg#FrescoStd-Normal)format(svg);}
  49. 49. http://www.fontsquirrel.com/
  50. 50. css2.1 and css3
  51. 51. e[att^=”val”]
  52. 52. http://www.456bereastreet.com/archive/200601/ css_3_selectors_explained/
  53. 53. JavaScriptgedrag
  54. 54. put javascript at the bottom
  55. 55. one exception
  56. 56. <script type="text/javascript"> document.documentElement.className += js-on;</script>
  57. 57. (css).js-on .foo { display:none;}.foo { // what does it look like without js?}
  58. 58. combine multiple scripts
  59. 59. <a id="_5" class="ui-lnkb" onclick="return WebUI.clicked(this,_5, event)" href="javascript: void(0);"> this link</a>
  60. 60. use unobtrusive javascript
  61. 61. $(‘a’).click(function(){ // do stuff});
  62. 62. Better:Event delegation
  63. 63. $("body").delegate("a", "click", function(){ // do stuff});
  64. 64. http://wnas.nl/hidden-advantage-of-event-delegation
  65. 65. Touch the dom as little as possible
  66. 66. Never ever mix
  67. 67. Never ever mix
  68. 68. Inline scriptsare EVIL
  69. 69. Inline stylesare EVIL
  70. 70. Never ever mix
  71. 71. Tips
  72. 72. Write small functions
  73. 73. var hideStuff = function(tar){ $(tar).addClass(conf.cn.hide);};
  74. 74. Beware of the semicolon insertion
  75. 75. var a = bvar c = d
  76. 76. // broken :(var a = bvar c = d
  77. 77. var a = b;var c = d;
  78. 78. // still worksvar a = b;var c = d;
  79. 79. Dynamically load scripts
  80. 80. if($.foo.length !== 0){ $.getScript(‘bar.js’,doStuff());}
  81. 81. Write for NO javascript
  82. 82. Use hijax, not ajax.
  83. 83. html is a pretty accessible medium...
  84. 84. node.js
  85. 85. Vragen?(of wil je voorbeelden)

×