Bestpractices nl
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Bestpractices nl

  • 1,172 views
Uploaded on

presentation on best practices for a couple of java developers

presentation on best practices for a couple of java developers

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,172
On Slideshare
1,093
From Embeds
79
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
2

Embeds 79

http://wnas.tumblr.com 79

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \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 ‘object literal’ 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 ‘val’\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

Transcript

  • 1. Javascript“the worlds most misunderstood language”
  • 2. the big book
  • 3. The good book
  • 4. JavaScript !== Java
  • 5. Global namespaceDon’t touch!
  • 6. x = global;var x = global;// if not inside a functionfunction foo(){ x = global; // without var. var y = notglobal; // yeah, var}
  • 7. Creëer je eigen namespace
  • 8. ;var sancus = function(){ var x = notglobal;};
  • 9. Patterns anybody?
  • 10. Private variables
  • 11. Priveledged variables
  • 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’;// stringif ( x == y ){ // true}
  • 26. var x = 5; // numbervar y = ‘5’; // stringif ( x === y ){ // false}
  • 27. Best practices
  • 28. HTMLStructuur
  • 29. <table>NOT FOR LAYOUT
  • 30. <table> for tabular data
  • 31. don’t code for presentation
  • 32. code for content
  • 33. tell a story
  • 34. http://html5boilerplate.com/
  • 35. Javascript is blocking
  • 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 blockingeverytime 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. CSSStyling
  • 43. Start bigend small
  • 44. base.css
  • 45. beware of classisitus
  • 46. Fontface
  • 47. h1 {font-family:FrescoStdNormalRegular,arial;}
  • 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. http://www.fontsquirrel.com/
  • 50. css2.1 and css3
  • 51. e[att^=”val”]
  • 52. http://www.456bereastreet.com/archive/200601/ css_3_selectors_explained/
  • 53. JavaScriptgedrag
  • 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?}
  • 58. combine multiple scripts
  • 59. <a id="_5" class="ui-lnkb" onclick="return WebUI.clicked(this,_5, event)" href="javascript: void(0);"> this link</a>
  • 60. use unobtrusive javascript
  • 61. $(‘a’).click(function(){ // do stuff});
  • 62. Better:Event delegation
  • 63. $("body").delegate("a", "click", function(){ // do stuff});
  • 64. http://wnas.nl/hidden-advantage-of-event-delegation
  • 65. Touch the dom as little as possible
  • 66. Never ever mix
  • 67. Never ever mix
  • 68. Inline scriptsare EVIL
  • 69. Inline stylesare EVIL
  • 70. Never ever mix
  • 71. Tips
  • 72. Write small functions
  • 73. var hideStuff = function(tar){ $(tar).addClass(conf.cn.hide);};
  • 74. Beware of the semicolon insertion
  • 75. var a = bvar c = d
  • 76. // broken :(var a = bvar c = d
  • 77. var a = b;var c = d;
  • 78. // still worksvar a = b;var c = d;
  • 79. Dynamically load scripts
  • 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)