2. Chasing the evolving web
SESSION CODE: WEB203
Aaron
Readify Senior Developer, Technical Specialist (Web)
Microsoft MVP – Internet Explorer (Development)
Chasing the evolving web
(c) 2011 Microsoft. All rights reserved.

4. Why? IE 10 Platform Previews – 8 to 12 weeks Chrome release – 12 weeks
Chrome release – 12 weeks
Firefox release – 14 weeks

5. Demo
HTML5 Boilerplate

6. Recap – HTML5 Boilerplate
Gets you started on a new project
Includes defaults like
CSS normaliser
jQuery
Google Analytics
Folder structure

7. HTML5, CSS3, ES5 Some browsers have partial implementations
Browser prefixes often used
New releases support more features
Older browsers still exist
Clients still want them supported

8. What Works? User Agent sniffing Feature detection Bad
Locks into the idea of “Browsers I understand”
User Agent can be faked
Feature detection
Query the browser to find out what it supports
Harder for the browser to lie

9. Demo
Feature Detection

10. Recap – Feature Detection
Don’t user agent sniff
User agents can be faked
Query the browser for support
If support doesn’t exist use a polyfill or shim
Polyfill – adds existing functionality
Shim – replicate functionality the best way you can

11. Complex Feature Detection
@font-face
Canvas
Canvas Text
WebGL
HTML5 Audio
HTML5 Video
rgba
hsla
border-image
border-shadow
text-shadow
Multiple Backgrounds
background-size
Opacity
CSS animation
CSS columns
CSS gradients
CSS reflections
CSS 2D transforms
CSS 3D transforms
Flexible box model
CSS transitions
Geolocation API
localStorage
sessionStorage
Web Workers
applicationCache
SVG
Inline SVG
SVG Clip Paths
SMIL
Web SQL DB
IndexedDB
Web Sockets
Hash changed event
History management
Drap & Drop
Cross-window messaging
Touch
Media Queries

12. Complex Feature Detection
How do you detect
@font-face
New input attributes
New input types
CSS3 features
Lots of complex JavaScript
Still have to decide how to deal with the feature

13. Modernizr and YepNope.js
Demo
Modernizr and YepNope.js

14. Recap - YepNopeJS Asynchronous loader
Loads CSS & JavaScript
Can be used to load files conditionally

15. Recap - Modernizr Modernizr does feature support
Use full version in development
Generate a custom build for production
Modernizr can be extended to add your own tests

16. Simplifying Common Tasks
Working with AJAX
$.ajax?
Caching?
RESTful?
Browser storage
localStorage?
sessionStorage?
Cookies?
Cross-component communication?

17. Demo
AmplifyJS

18. Recap - AmplifyJS Pub/ Sub Storage Simplified Request/ Response
Easier for JavaScript unit tests
Each part available separately

19. Stateful applications
Server style coding, but in the browser
Handling hashbangs
Binding data to UI
Creating data modules

20. Demo
KnockoutJS

21. Recap - KnockoutJS MVVM in JavaScript Declarative binding
Automatic event wire up
Very familiar when coming from Silverlight/ WPF

22. Thank You http://html5boilerplate.com http://modernizr.com
Me:
@slace

23. Enrol in Microsoft Virtual Academy Today
Why Enroll, other than it being free?
The MVA helps improve your IT skill set and advance your career with a free, easy to access training portal that allows you to learn at your own pace, focusing on Microsoft technologies.
What Do I get for enrolment?
Free training to make you become the Cloud-Hero in my Organization
Help mastering your Training Path and get the recognition
Connect with other IT Pros and discuss The Cloud
Where do I Enrol?
Then tell us what you think.

24. (c) 2011 Microsoft. All rights reserved.
Resources
Sessions On-Demand & Community
Microsoft Certification & Training Resources
technet.microsoft.com/en-au
Resources for IT Professionals
Resources for Developers
(c) 2011 Microsoft. All rights reserved.

25. (c) 2011 Microsoft. All rights reserved.
12/7/2018 2:44 AM
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
(c) 2011 Microsoft. All rights reserved.
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.