Downloaded 19 times
![False Friends var d = new Date("2013-05-08") d.getYear() d.getMonth() d.getDay() // 113 // 4 // 3 1900+Y [0-11] day of week](https://image.slidesharecdn.com/javascriptlikeits2013-130509135429-phpapp02/75/JavaScript-Like-It-s-2013-37-2048.jpg)
Uploaded byOutSystems
JavaScript Like It’s 2013
This document discusses strategies for improving JavaScript development in 2013 and beyond. It recommends: 1) Knowing your language thoroughly by reading documentation 2) Learning to use developer tools like Firebug and DevTools effectively 3) Building applications with future-proofing in mind through techniques like feature detection instead of browser detection.
JavaScript Like It’s 2013
- 1.
- 2.
- 3. JavaScript 2013jQuery Backbone.js Ember.js AngularJS Sammy.js CanJS Knockout ExtJSasm.jsWinRT Emscripten WebSockets WebGL WebWorkersWebRTC CanvasWeb Audio/Video API WebSpeech WebCrypto
- 5. 2013jQuery asm.jsWinRT Emscripten WebSockets WebGL WebWorkersWebRTC CanvasWeb Audio/Video API WebSpeech WebCrypto JavaScript Backbone.js Ember.js AngularJS Sammy.js CanJS Knockout ExtJS
- 6. 2013 Time to getit right!
- 7.
- 9.
- 10. JavaScript • Datepickers • Drop-downmenus • Collapsible content • Client-side form validation • Cheesy animations
- 12.
- 13. 1995: JavaScript (Netscape) 2013:Now! 18 Years
- 14. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 2013: Now!
- 15. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 1997: ECMA-262 Ed1 1999: ECMA-262 Ed3 (ES3 - Baseline) 2013: Now!
- 16. “The nice thingabout standards is that you have so many to choose from.”
- 17. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 1997: ECMA-262 Ed1 1999: ECMA-262 Ed3 (ES3 - Baseline) 2013: Now!
- 18. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 1997: ECMA-262 Ed1 1999: ECMA-262 Ed3 (ES3 - Baseline) 2006: Browser compatibility (lack thereof) 2013: Now!
- 19.
- 20.
- 21. JavaScript development cycle •Copy • Paste • Kick it until it works
- 23.
- 24. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 1997: ECMA-262 Ed1 1999: ECMA-262 Ed3 (ES3 - Baseline) 2006: Browser compatibility??? 2013: Now!
- 25. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 1997: ECMA-262 Ed1 1999: ECMA-262 Ed3 (ES3 - Baseline) 2006: Browser compatibility??? 2013: Now!
- 26. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 1997: ECMA-262 Ed1 1999: ECMA-262 Ed3 (ES3 - Baseline) 2006: jQuery 2013: Now!
- 27. JavaScript development cycle •Download jQuery plugin • Copy • Paste • Kick it until it works
- 28.
- 29. The problem withcycles
- 30. 1995: JavaScript (Netscape) 1996:JScript (Microsoft) 1997: ECMA-262 Ed1 1999: ECMA-262 Ed3 (ES3 - Baseline) 2006: jQuery 2013: Now!
- 31.
- 33. Breaking the Cycle 1.Know your language
- 35. #1 – Knowyour language
- 36. False Friends English Portuguese pretendfingir to intend pretender
- 37. False Friends var d= new Date("2013-05-08") d.getYear() d.getMonth() d.getDay() // 113 // 4 // 3 1900+Y [0-11] day of week
- 39. False Friends var d= new Date("2013-05-08") d.getYear() d.getMonth() d.getDay() // 113 // 4 // 3
- 40. False Friends var d= new Date("2013-05-08") d.getFullYear() d.getMonth() d.getDay() // 2013 // 4 // 3
- 41. False Friends var d= new Date("2013-05-08") d.getFullYear() d.getMonth()+1 d.getDay() // 2013 // 5 // 3
- 42. False Friends var d= new Date("2013-05-08") d.getFullYear() d.getMonth()+1 d.getDate() // 2013 // 5 // 8
- 44. False Friends // the== operator "a" == "a" // true "a" == "b" // false
- 45. False Friends // the== operator false == null // false false == 0 // true 0 == "" // true ...
- 46. False Friends // the=== operator "a" === "a" // true false === 0 // false 0 === "" // false // there’s also the !== operator
- 47. #1 Know yourlanguage If you lack absolute certainty READ THE DOCS! https://developer.mozilla.org/en/docs/JavaScript
- 49. Breaking the Cycle 1.Know your language 2. Know your tools
- 50. #2 Know yourtools Image credit: http://www.flickr.com/photos/justinbaeder/5317820857/
- 52. #2 Know yourtools • Don’t trust errors • Console-test everything • Change as you go! • See documentation for Firebug and DevTools
- 53. #2 Know yourtools
- 54. Breaking the Cycle 1.Know your language 2. Know your tools 3. Build for the future
- 55. Image credit: NationalLibrary of France (BnF)
- 56.
- 57. #3 Build forthe future if ( BrowserIsIE() ) { e.attachEvent( ... ); } else { e.addEventListener( ... ); }
- 58. #3 Build forthe future if ( BrowserIsIE() ) { e.attachEvent( ... ); } else { e.addEventListener( ... ); }
- 62. #3 Build forthe future if ( BrowserIsIE() ) { e.attachEvent( ... ); } else { e.addEventListener( ... ); }
- 63. #3 Build forthe future if ( e.addEventListener ) { e.addEventListener( ... ); } else { e.attachEvent( ... ); }
- 65. #3 Build forthe future if ( ? ) { e.style.boxShadow = "0 0 4px red"; } else { e.style.border = "solid 1px red"; }
- 66. #3 Build forthe future if ( Modernizr.boxshadow ) { e.style.boxShadow = "0 0 4px red"; } else { e.style.border = "solid 1px red"; }
- 67. #3 Build forthe future Feature Detection instead of Browser Detection http://modernizr.com/
- 68. Breaking the Cycle 1.Know your language 2. Know your tools 3. Build for the future
- 69.
- 71.