Based on the provided content, here are the requested details: "Writing Better HTML5 Websites: Enhancing Coding & Debugging Skills

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

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

Write Better Code Use typescript to write your client code code 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

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/ Tools to make programming easier Includes typescript, JSHint Source Maps

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

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

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

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

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

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 Knockout Context section see bindings and make sense of them

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

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

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