Bestpractices nl
•Download as KEY, PDF•
2 likes•762 views
presentation on best practices for a couple of java developers
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Bestpractices nl
Similar to Bestpractices nl (20)
Recently uploaded
Recently uploaded (20)
Bestpractices nl
- 1. Javascript “the worlds most misunderstood language”
- 2. the big book
- 6. x = global; var x = global; // if not inside a function function foo(){ x = global; // without var. var y = notglobal; // yeah, var }
- 7. Creëer je eigen namespace
- 8. ;var sancus = function(){ var x = notglobal; };
- 12. Public variables
- 13. Closures
- 14. Revealing module pattern ‘christian heilman’
- 15. ;var sancus = function(){ }(); // self invoking function :)
- 16. ;var sancus = (function(){ // private variables var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init }; }();
- 17. ;var sancus = (function(){ var config = { foo:bar, html5:cool // no trailing , }, init = function(){ // doStuff }; return{ init:init }; }();
- 18. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; // return init to global namespace return{ init:init }; }();
- 19. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init }; }(); sancus.init(); // call init
- 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. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init }; }(); sancus.init(); alert(config.foo); // won’t work
- 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. ;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ alert(config.foo); // will work }; return{ init:init }; }(); sancus.init();
- 24. Niet typesafe (of toch wel?)
- 25. var x = 5; // number var y = ‘5’; // string if ( x == y ){ // true }
- 26. var x = 5; // number var y = ‘5’; // string if ( x === y ){ // false }
- 27. Best practices
- 28. HTML Structuur
- 30. <table> for tabular data
- 31. don’t code for presentation
- 32. code for content
- 33. tell a story
- 36. <a href=”#” onClick=”alert(‘hello world’);”> inline alert </a>
- 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. <!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. (Inline) scripts are blocking everytime they are encountered.
- 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. CSS
- 42. CSS Styling
- 44. base.css
- 46. Fontface
- 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'); }
- 50. css2.1 and css3
- 51. e[att^=”val”]
- 52. http://www.456bereastreet.com/archive/200601/ css_3_selectors_explained/
- 54. put javascript at the bottom
- 55. one exception
- 56. <script type="text/javascript"> document.documentElement.className += ' js-on'; </script>
- 57. (css) .js-on .foo { display:none; } .foo { // what does it look like without js? }
- 59. <a id="_5" class="ui-lnkb" onclick="return WebUI.clicked(this, '_5', event)" href="javascript: void(0);"> this link </a>
- 61. $(‘a’).click(function(){ // do stuff });
- 63. $("body").delegate("a", "click", function(){ // do stuff });
- 65. Touch the dom as little as possible
- 66. Never ever mix
- 67. Never ever mix
- 68. Inline scripts are EVIL
- 69. Inline styles are EVIL
- 70. Never ever mix
- 71. Tips
- 73. var hideStuff = function(tar){ $(tar).addClass(conf.cn.hide); };
- 74. Beware of the semicolon insertion
- 75. var a = b var c = d
- 76. // broken :( var a = bvar c = d
- 77. var a = b; var c = d;
- 78. // still works var a = b;var c = d;
- 80. if($.foo.length !== 0){ $.getScript(‘bar.js’,doStuff()); }
- 81. Write for NO javascript
- 82. Use hijax, not ajax.
- 83. html is a pretty accessible medium...
- 84. node.js
- 85. Vragen? (of wil je voorbeelden)
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- het beschermt je code en voorkomt dat anderen je code kapot kunnen maken...\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- deze functie wordt direct na het interpreteren aangeroepen. zie de laatste ()..\n
- de zaken in de &#x2018;object literal&#x2019; config zijn niet beschikbaar buiten de sancus namespace.\n
- \n
- door de return is init weer global beschikbaar.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- show graph tables essent.\n
- \n
- \n
- \n
- \n
- \n
- Percieved loading time\n
- Percieved loading time\n
- \n
- \n
- Percieved loading time\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Match any E elements, whose att atribute value begins with &#x2018;val&#x2019;\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- repaint and reflow\n
- html and javascript\n
- html and css\n
- slecht onderhoudbaar en langzaam\n
- slecht onderhoudbaar\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n