Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Chris Heilmann - @codepo8 - June 10, 2015, Webinale, Berlin
No more Excuses left
Let’s make the Web excellent!
Chris Heilmann
@codepo8
“But we have to
support Internet
Explorer”
“We would love to
use all this cool
HTML5 stuff…”
This even became a
running gag…
This made me
angry…
So I took drastic
measures…
HTML5 is backwards compatible and
fault tolerant.
It should not matter what browser our
end users have.
But Internet
Explorer dropped
off our radar…
As cool, modern
developers, we
made our choice…
inkknife_2000 https://www.flickr.com/photos/23155134@N06/15582432508
Does IE even matter?
Netmarketshare.com
Statcounter.com
Out-of-the-box
browsers really
matter!
Standards & Features
• WebGL
• WebSockets
• CSS3 Gradients
• Blocked scoped variables
• Pointer Events
• Fullscreen API
• ...
What was off was
the messaging
around it.
• Out-of-the-box Windows 10 browser
• Desktop, Mobile, Xbox. Hololens, IOT…
• Evergreen and constantly updated
• On par wi...
I am not here to tell
you about browser
speed and feature
comparisons…
Instead, I want to
report to you how
the browser was
created…
Faceymcface1 https://www.flickr.com/photos/12335386@N00/4337...
Faceymcface1 https://www.flickr.com/photos/12335386@N00/4337808731
…and what that
means about us as
developers of the
web.
A fork from the past
The engine split
Interoperability: a new approach
“The web should just work for everyone – users,
developers, and businesses.”
If standard defines an API
behavior but all other
browsers behave differently, is
it a standard?
Interoperability means th...
Getting the right, modern content
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
Mo...
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
Mo...
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
Mo...
Mozilla/5.0
The HTML5 Standard even does this!
window.mobileCheck = function() {
var check = false;
(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberr...
Please don’t do UA sniffing
Please don’t do UA sniffing
Please avoid UA sniffing as much as
possible
Always do feature detection
(If isolating a bug) ...
Interoperable intersection
TheMobileWeb
Interoperable intersection
TheMobileWeb
Prioritizing interop
Interop2
Interop1
Interop3
Interop0
Worked in IE11
Used by real sites
Works in other
browsers We anti...
Font Resource Handling
Before loading font resources, IE and
Firefox check the font server’s CORS
header, and the font’s i...
Control Appearance Overrides
Apple added ways to restyle HTML controls on the
iPhone to match OS control look and feel.
We...
Control Appearance Overrides
Some sites restyle input controls using
-webkit-appearance: none for
critical functionality.
...
Gradients
Apple originally added support for gradients to WebKit using a
Core Graphics friendly syntax.
During standardiza...
innerHTML orphaned children
To date,
of these types of fixes are in Edge.
Removing code (yay!)
VML
attachEvent()
VB Script
Conditional Comments
X-UA-Compatible
currentStyle
IE Layout Quirks
MS-pre...
interface AesGcmEncryptResult
{
readonly ciphertext
constructor
readonly tag
}
interface ApplicationCache : EventTarget
{
...
Using data to design a platform
Insiders Program
3+ million users


33 trillion pages
44 billion sites
7 thousand APIs
bing
Web Crawler
Instrumentation
Microsoft Edge
Implementing XPath: crawler data in action
Implementing XPath: crawler data in action
Hypothesis:
Most XPath queries can be rewritten in CSS selectors
//element1/element2/element3
//element[@attribute="value"...
Trial run #1
94%
Tweaking, trial run #2
97%
Using open source JavaScript to complete it
Selectors Engine
Wicked-Good-Xpath
code.google.com/p/wicked-good-xpath
C++
JS
...
Standards and roadmap
Specifications
130
140
150
160
170
180
190
200
210
May June July Aug Sept Oct Nov Dec Jan Feb Mar April
Under Consideration In Developmen...
What’s available in Microsoft Edge now
What’s in the works now
How decisions are made for the future…
Real World Usage Data
Developer/Partner
Feedback
Standards Stability
Development Ca...
Personally, I do not
care what browser
you use or prefer.
Nobody should
make that decision
for you!
Fact is, that
Microsoft Edge is
coming and will be
something a lot of
people use.
The good news is
that if you support
standards and don’t
assume one special
browser, you’re
ready for it!
We now have a
chance to do things
right for the web by
working towards
interoperability. https://status.modern.ie/
@MSEdgeDev
All the information in one place…
https://dev.modern.ie
Join in and help build a
browser for you
uservoice.modern.ie
status.modern.ie
remote.modern.ie
insider.windows.com
@codepo8
No more excuses left - Webinale 2015 Lunch keynote
Upcoming SlideShare
Loading in …5
×

No more excuses left - Webinale 2015 Lunch keynote

2,411 views

Published on

Nobody reads this.

Published in: Education
  • Be the first to comment

No more excuses left - Webinale 2015 Lunch keynote

  1. 1. Chris Heilmann - @codepo8 - June 10, 2015, Webinale, Berlin No more Excuses left Let’s make the Web excellent!
  2. 2. Chris Heilmann @codepo8
  3. 3. “But we have to support Internet Explorer” “We would love to use all this cool HTML5 stuff…”
  4. 4. This even became a running gag…
  5. 5. This made me angry…
  6. 6. So I took drastic measures…
  7. 7. HTML5 is backwards compatible and fault tolerant. It should not matter what browser our end users have.
  8. 8. But Internet Explorer dropped off our radar…
  9. 9. As cool, modern developers, we made our choice… inkknife_2000 https://www.flickr.com/photos/23155134@N06/15582432508
  10. 10. Does IE even matter?
  11. 11. Netmarketshare.com
  12. 12. Statcounter.com
  13. 13. Out-of-the-box browsers really matter!
  14. 14. Standards & Features • WebGL • WebSockets • CSS3 Gradients • Blocked scoped variables • Pointer Events • Fullscreen API • Device Orientation • Flexbox • Encrypted Media Extensions • CSS3 Regions • File API • AppCache • IndexedDB • CSS3 Media Queries • Canvas • CSS3 Transforms
  15. 15. What was off was the messaging around it.
  16. 16. • Out-of-the-box Windows 10 browser • Desktop, Mobile, Xbox. Hololens, IOT… • Evergreen and constantly updated • On par with other browsers • Free upgrade for Windows 7 and 8 to Windows 10 • Very, very soon this will matter to us as developers
  17. 17. I am not here to tell you about browser speed and feature comparisons…
  18. 18. Instead, I want to report to you how the browser was created… Faceymcface1 https://www.flickr.com/photos/12335386@N00/4337808731
  19. 19. Faceymcface1 https://www.flickr.com/photos/12335386@N00/4337808731 …and what that means about us as developers of the web.
  20. 20. A fork from the past
  21. 21. The engine split
  22. 22. Interoperability: a new approach
  23. 23. “The web should just work for everyone – users, developers, and businesses.”
  24. 24. If standard defines an API behavior but all other browsers behave differently, is it a standard? Interoperability means the web “just works” if ($.client.profile().name === 'msie') { var IHateIE = { 'scrollTop': context.$textarea.scrollTop(), 'pos': context.$textarea.textSelection('getCaretPosition', {startAndEnd: true}) }; context.$textarea.data('IHateIE', IHateIE); } For some reason IE seems to be calculating that differently. You might have to put in a special rule for IE there. In Chrome, the error does not occur, the xml is appended successfully and the other methods after these two run as expected. In IE however, a hierarchyRequestError is thrown at the appendChild statement. no matter HOW I passed the ko object to the child window, something got lost. Horrible behavior, IE... Why does the following code throw an 'Unspecified error' (on the appendChild line) in IE11 which I click the button?
  25. 25. Getting the right, modern content
  26. 26. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0 User-Agent Strings
  27. 27. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0 User-Agent Strings
  28. 28. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
  29. 29. Mozilla/5.0
  30. 30. The HTML5 Standard even does this!
  31. 31. window.mobileCheck = function() { var check = false; (function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hi ptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|win dows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|- m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm- |cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|- d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g- mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |- |/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1- w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)- |on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1- 8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i- )|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(- |0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m- |m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|- v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  32. 32. Please don’t do UA sniffing
  33. 33. Please don’t do UA sniffing Please avoid UA sniffing as much as possible Always do feature detection (If isolating a bug) Sniff for specific browser versions Assume unknown browsers are good
  34. 34. Interoperable intersection TheMobileWeb
  35. 35. Interoperable intersection TheMobileWeb
  36. 36. Prioritizing interop Interop2 Interop1 Interop3 Interop0 Worked in IE11 Used by real sites Works in other browsers We anticipate sites will require this functionality soon Real site usage is farther out or never
  37. 37. Font Resource Handling Before loading font resources, IE and Firefox check the font server’s CORS header, and the font’s installable header (as per W3C specification). This is done to ensure that the font usage rights are honored. WebKit does not check CORS / installable header.before after
  38. 38. Control Appearance Overrides Apple added ways to restyle HTML controls on the iPhone to match OS control look and feel. Web developers add custom markup to disable Apple’s styles and provide their own. -webkit-appearance: none ← Most common value. -webkit-appearance: button -webkit-appearance: checkbox -webkit-appearance: radio etc.. before after
  39. 39. Control Appearance Overrides Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after
  40. 40. Gradients Apple originally added support for gradients to WebKit using a Core Graphics friendly syntax. During standardization the syntax was changed leaving WebKit incompatible with the standard. Some sites continue to use the original Apple syntax. Proprietary Apple Markup (still in WebKit): -webkit-gradient(linear, left top, right bottom, colorstop(0, #FFFFFF), color-stop(1, #00A3EF)); Webkit-prefixed W3C Standard Gradient in WebKit: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); Unprefixed W3C standard: linear-gradient(to bottom right, FFFFFF 0%, #00A3EF 100%); before after
  41. 41. innerHTML orphaned children
  42. 42. To date, of these types of fixes are in Edge.
  43. 43. Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle IE Layout Quirks MS-prefixed Events
  44. 44. interface AesGcmEncryptResult { readonly ciphertext constructor readonly tag } interface ApplicationCache : EventTarget { function addEventListener function dispatchEvent function removeEventListener } interface Attr : Node { readonly boolean expando } interface AudioTrackList : EventTarget { addEventListener dispatchEvent removeEventListener } interface BookmarkCollection Remembering the IEisms that have passed
  45. 45. Using data to design a platform
  46. 46. Insiders Program 3+ million users  
  47. 47. 33 trillion pages 44 billion sites 7 thousand APIs bing Web Crawler Instrumentation Microsoft Edge
  48. 48. Implementing XPath: crawler data in action
  49. 49. Implementing XPath: crawler data in action
  50. 50. Hypothesis: Most XPath queries can be rewritten in CSS selectors //element1/element2/element3 //element[@attribute="value"] .//*[contains(concat(" ", @class, " "), " classname ")] element1 > element2 > element3 element[attribute="value"] *.classname
  51. 51. Trial run #1 94%
  52. 52. Tweaking, trial run #2 97%
  53. 53. Using open source JavaScript to complete it Selectors Engine Wicked-Good-Xpath code.google.com/p/wicked-good-xpath C++ JS 97% 3%
  54. 54. Standards and roadmap
  55. 55. Specifications
  56. 56. 130 140 150 160 170 180 190 200 210 May June July Aug Sept Oct Nov Dec Jan Feb Mar April Under Consideration In Development Preview Release Planning in the open http://status.modern.ie
  57. 57. What’s available in Microsoft Edge now
  58. 58. What’s in the works now
  59. 59. How decisions are made for the future… Real World Usage Data Developer/Partner Feedback Standards Stability Development Capacity
  60. 60. Personally, I do not care what browser you use or prefer. Nobody should make that decision for you!
  61. 61. Fact is, that Microsoft Edge is coming and will be something a lot of people use.
  62. 62. The good news is that if you support standards and don’t assume one special browser, you’re ready for it!
  63. 63. We now have a chance to do things right for the web by working towards interoperability. https://status.modern.ie/
  64. 64. @MSEdgeDev
  65. 65. All the information in one place… https://dev.modern.ie
  66. 66. Join in and help build a browser for you uservoice.modern.ie status.modern.ie remote.modern.ie insider.windows.com @codepo8

×