1. Writing better HTML5 websites and debugging them By Peter Messenger Senior Developer – Triple Point Technology http://www.petermessenger.com Email : stonecourier@gmail.com Twitter : stonecourier Linked In : http://www.linkedin.com/in/petermessenger

2. Summary Writing HTML5 Websites generally requires a lot of javascript So will talk about Writing Better Code Monitoring Errors Testing Debugging in Chrome

3. Write Better Code Use typescript to write your client code code – http://www.typescriptlang.org/ http://www.typescriptlang.org/ – TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. – Classes, inheritance, modules, typed variables – Compile time checking

4. Write Better Code Use tools like JSHint/JSHint – Rules for writing better and more supportable – Rules can be turned on/off as required Web Essentials for Visual Studio – http://vswebessentials.com/ http://vswebessentials.com/ – Tools to make programming easier – Includes typescript, JSHint – Source Maps

5. Write Better Code Use MVVM framework or something similar – http://knockoutjs.com/ http://knockoutjs.com/ – Enables testable javascript and easy binding to html – https://angularjs.org/ https://angularjs.org/ – Much more popular, complete toolset, lots of user addons

6. Monitor Errors Javascript window.onerror = function (errorMsg, url, lineNumber, column, errorObj) { alert('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber + ' Column: ' + column + ' StackTrace: ' + errorObj); } C#, Global.asx void Application_Error(object sender, EventArgs e) { ……… } Other Framework

7. Monitor Errors Review errors, categorise them and work on most important first – https://www.petermessenger.com/ptx.aspx?Error s=true

8. Test on different platforms Different browsers have different capabilities and bugs – Sauce Labs – https://saucelabs.com/ https://saucelabs.com/ – Allows you to run up different browsers and mobile devices – Lots of other similar resources

9. Output of Javascript Can be minified with source maps – Allows the browser to convert the code back to the original – Break points, conditional values etc can be set in the original – Errors while using browser also show up in original – Still gives user the benefit of faster load time

10. Examples of Debugging - Chrome https://www.petermessenger.com/ptx.aspx Right click on HTML Element Choose Inspect Element – With Knockout Extension – https://chrome.google.com/webstore/detail/knoc koutjs-context- debugg/oddcpmchholgcjgjdnfjmildmlielhof https://chrome.google.com/webstore/detail/knoc koutjs-context- debugg/oddcpmchholgcjgjdnfjmildmlielhof – Knockout Context section – see bindings and make sense of them

11. Examples of Debugging - Chrome https://www.petermessenger.com/ptx.aspx Open developer window Look at sources – Can put breakpoints in at javascript version or typescript version – Ensure you have source maps turned on in settings Look at network – Click on a option, can see Request Headers and Response, allowing you to see what is going on

12. Examples of Debugging - Chrome https://www.petermessenger.com/ptx.aspx Open developer window Look at console – Can be used as a debug window – Use console.log(“text”) in javascipt – Can also output objects

13. Questions Thanks for listening http://www.petermessenger.com Email : stonecourier@gmail.com Twitter : stonecourier Linked In : http://www.linkedin.com/in/petermessenger