SlideShare a Scribd company logo
1 of 67
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
• Device Orientation
• Flexbox
• Encrypted Media Extensions
• CSS3 Regions
• File API
• AppCache
• IndexedDB
• CSS3 Media Queries
• Canvas
• CSS3 Transforms
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 with other browsers
• Free upgrade for Windows 7 and 8 to
Windows 10
• Very, very soon this will matter to us as
developers
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/4337808731
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 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?
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
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
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
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
Mozilla/5.0
The HTML5 Standard even does this!
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);
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) Sniff for specific browser versions
Assume unknown browsers are good
Interoperable intersection
TheMobileWeb
Interoperable intersection
TheMobileWeb
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
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
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
Control Appearance Overrides
Some sites restyle input controls using
-webkit-appearance: none for
critical functionality.
before after
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
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-prefixed Events
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
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"]
.//*[contains(concat(" ", @class, " "), " classname ")]
element1 > element2 > element3
element[attribute="value"]
*.classname
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
97%
3%
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 Development Preview Release
Planning in the open
http://status.modern.ie
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 Capacity
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

More Related Content

What's hot

CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)Zoe Gillenwater
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesJared Smith
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shimsStarTech Conference
 
DODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightDODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightClint Edmonson
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information ArchitectureChristian Crumlish
 
Intro Open Social and Dashboards
Intro Open Social and DashboardsIntro Open Social and Dashboards
Intro Open Social and DashboardsAtlassian
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert Nyman
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 

What's hot (13)

CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility Techniques
 
ARIA Gone Wild
ARIA Gone WildARIA Gone Wild
ARIA Gone Wild
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
 
DODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightDODN2009 - Jump Start Silverlight
DODN2009 - Jump Start Silverlight
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Intro Open Social and Dashboards
Intro Open Social and DashboardsIntro Open Social and Dashboards
Intro Open Social and Dashboards
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 

Similar to No more excuses left - Webinale 2015 Lunch keynote

Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!Chris Mills
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin
 
Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"Alex Theedom
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrowSFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrowJacob Rossi
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010Christian Heilmann
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
Empowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsEmpowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsFITC
 
Empowering the Mobile Web - Mills
Empowering the Mobile Web - MillsEmpowering the Mobile Web - Mills
Empowering the Mobile Web - MillsCodemotion
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"Chris Mills
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"Binary Studio
 

Similar to No more excuses left - Webinale 2015 Lunch keynote (20)

Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"Mobile Java with GWT: Still "Write Once, Run Everywhere"
Mobile Java with GWT: Still "Write Once, Run Everywhere"
 
Push it to the Edge
Push it to the EdgePush it to the Edge
Push it to the Edge
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrowSFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
Jsf2 html5-jazoon
Jsf2 html5-jazoonJsf2 html5-jazoon
Jsf2 html5-jazoon
 
Empowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsEmpowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris Mills
 
Empowering the Mobile Web - Mills
Empowering the Mobile Web - MillsEmpowering the Mobile Web - Mills
Empowering the Mobile Web - Mills
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfTechSoup
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxMaryGraceBautista27
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designMIPLM
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxCarlos105
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parentsnavabharathschool99
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceSamikshaHamane
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYKayeClaireEstoconing
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfphamnguyenenglishnb
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Jisc
 

Recently uploaded (20)

Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptx
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-design
 
Raw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptxRaw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptx
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
 
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptxYOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in PharmacovigilanceRoles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in Pharmacovigilance
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...
 

No more excuses left - Webinale 2015 Lunch keynote

  • 1. Chris Heilmann - @codepo8 - June 10, 2015, Webinale, Berlin No more Excuses left Let’s make the Web excellent!
  • 3. “But we have to support Internet Explorer” “We would love to use all this cool HTML5 stuff…”
  • 4. This even became a running gag…
  • 6. So I took drastic measures…
  • 7. HTML5 is backwards compatible and fault tolerant. It should not matter what browser our end users have.
  • 9. As cool, modern developers, we made our choice… inkknife_2000 https://www.flickr.com/photos/23155134@N06/15582432508
  • 10. Does IE even matter?
  • 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. What was off was the messaging around it.
  • 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. I am not here to tell you about browser speed and feature comparisons…
  • 18. Instead, I want to report to you how the browser was created… Faceymcface1 https://www.flickr.com/photos/12335386@N00/4337808731
  • 20. A fork from the past
  • 23.
  • 24. “The web should just work for everyone – users, developers, and businesses.”
  • 25. 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?
  • 26. Getting the right, modern content
  • 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. 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
  • 29. 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
  • 31. The HTML5 Standard even does this!
  • 32. 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);
  • 33. Please don’t do UA sniffing
  • 34. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. Control Appearance Overrides Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after
  • 41. 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
  • 43. To date, of these types of fixes are in Edge.
  • 44. Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle IE Layout Quirks MS-prefixed Events
  • 45. 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
  • 46. Using data to design a platform
  • 48. 33 trillion pages 44 billion sites 7 thousand APIs bing Web Crawler Instrumentation Microsoft Edge
  • 49. Implementing XPath: crawler data in action
  • 50. Implementing XPath: crawler data in action
  • 51. 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
  • 54. Using open source JavaScript to complete it Selectors Engine Wicked-Good-Xpath code.google.com/p/wicked-good-xpath C++ JS 97% 3%
  • 57. 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
  • 58. What’s available in Microsoft Edge now
  • 59. What’s in the works now
  • 60. How decisions are made for the future… Real World Usage Data Developer/Partner Feedback Standards Stability Development Capacity
  • 61. Personally, I do not care what browser you use or prefer. Nobody should make that decision for you!
  • 62. Fact is, that Microsoft Edge is coming and will be something a lot of people use.
  • 63. The good news is that if you support standards and don’t assume one special browser, you’re ready for it!
  • 64. We now have a chance to do things right for the web by working towards interoperability. https://status.modern.ie/
  • 66. All the information in one place… https://dev.modern.ie
  • 67. Join in and help build a browser for you uservoice.modern.ie status.modern.ie remote.modern.ie insider.windows.com @codepo8

Editor's Notes

  1. Today I want to talk about web development and what went wrong. I also want to talk about us running out of excuses to make the web an excellent medium for our users to get their information fix.
  2. Hello, I am Chris. I’ve been a web developer for about 17 years now and delivered lots of big products and sites. Until recently I was the principal spokesperson for Mozilla, advocating HTML5 and talking about its merits for development on Desktop and Mobile.
  3. I got a lot of people excited, but once I finished my presentations at the after parties or on Twitter I always heard the same thing. Internet Explorer keeps people from building great stuff on the web.
  4. This even became a running gag – people asked if it is HTML5 and if it didn’t work in IE, it must be HTML.
  5. This made me angry, as - whilst being a joke – it points at a basic misunderstanding of the web.
  6. So I took drastic measures. I went to work for the company that seemingly holds the web back.
  7. However, as developers we got a bit over-excited about what Safari, Chrome and Firefox offered us as new and shiny functionality. And we didn’t care if it was a standards or experimental features.
  8. The reason is simple: most of us use Macs. That way, testing and even staying up to speed what IE supports became a chore. Something you only do in testing.
  9. Which makes us ask the question if IE even matters. Surely if the cool people of the web use Macs, everybody else does, too?
  10. Some statistics say differently and when you get out of our bubble, you’ll encounter more and more PCs than you thought were still around.
  11. Even on the “captive audience” statistics, IE is on second place before Firefox and Safari.
  12. The reason is that users click what comes with the operating system. The out-of-the-box browser matters a lot. People don’t install a different browser for the sake of web functionality. They do it because of access to services.
  13. IE11 was not a bad browser in terms of standards support.
  14. The problem was that we didn’t care as IE was considered the browser of the outdated OS. Microsoft advocated standards compliance, where innovation was what we wanted. It didn’t matter what new IE could do as all we saw was the old browsers we had to work around that didn’t get updated.
  15. Well that’s over with. Windows 10 soon will come with a new browser, that does all the things we expect a browser to do.
  16. I will not tell you about features, comparisons and speed today. Microsoft Edge is very good in comparison. But that’s boring. As a developer, I expect the out-of-the-box browser to be excellent and better than the ones that come in as guests.
  17. Today I want to cover a few of the things that lead to the new browser in Windows 10 and what it means for web development. We’re covering four topics.
  18. The main point was that Internet Explorer was not a browser people wanted to use, but had to . And developers really didn’t want to use at all. Patching and cleaning up the browser was not really an option. The engine it ran, Trident, was woefully outdated and full of things that people did not use as they weren’t standardised.
  19. So instead, we created a fork of the browser, keeping all the “plumbing” that made it talk to windows, but allowing us to create a cleaner, leaner web rendering engine that is on par with the other browsers like Chrome, Safari or Firefox.
  20. Interoperability is what all of this is about. We wanted to ensure that there is no need for another browser in Windows 10 than the one it got shopped with. That’s why we built a browser that works with the web of today and beyond.
  21. We know that with its age, the experience of end users differed a lot to other browsers. This meant for web developers extra work and often you needed to fix your code only to work in Internet Explorer. This hurt the browser’s reputation and wasted your time. That’s why we approached re-building the browser from scratch slightly different this time.
  22. At the center of the redesign of the browser is this mantra – the web should just work for everyone – users, developers and businesses. This sounds simple, but there are a lot of moving parts in this and at times we have to juggle competing needs. Users simply want the web to work, click the browser icon and go online. Any change is scary and everything was better before – until you get used to the change and then defend this one to the teeth the next time around. Developers want browsers to lead innovation and to give them new and shiny things all the time whilst not breaking what is already done. This becomes especially complex when the products were based on experimental implementations of technology and not agreed standards. Businesses only want their web sites not to break and not having to assign engineers to fix them. Maintenance is not fun and harder to budget than new products. In order for the web to keep succeeding, browser makers need to keep doing this tight-rope walk.
  23. In the past the focus of Microsoft was standards compatibility. This is a necessity for a lot of enterprise customers. For those, quick iterative innovation isn’t possible as there is a need for certification and reliance on legal procedures. It also prevents us from the problem that Internet Explorer caused in the past that it did things differently to other browsers and thus leaving developers confused as to which one to follow. The problem with standards is though that they take time and lots of agreement between browser creators. A lot of standards defined by the W3C are not supported by browsers. Instead, browser vendors agreed on – in many cases – simpler versions of the same functionality. In many cases, these versions were also easier to implement for the browser maker. This leads to a lot of code on the web that “just works”, but isn’t standardised. Instead of staying in an ivory tower and claiming the Windows 10 browser supports an unused standard to the letter, we started following the crowd and making things work that are in use.
  24. In order to make the web just work, the biggest issue is that in many cases developers send different versions of the same web site to different browsers. That way browser makers can not fix issues, as they never show up. This is a great example of this. The mobile view of this web site looks and works utterly different in Firefox, Safari and Internet Explorer. This not only means it is hard to improve the experience of the browser, it also means that developers need to maintain different versions for different browsers. In most cases, this means that one gets 90% of the effort and the others hopefully work. This is bad for the web, as it advocates the need for a certain browser or device to get the correct experience.
  25. Trying to detect the browser is not easy. The main tool that people use is the User Agent String. This should tell you what browser is in use. The problem is though that because people relied on a certain browser to display their web sites, the user agents became longer and longer and more and more cryptic. Browsers have to pretend to be other browsers to ensure that web sites build long ago show up in them.
  26. A lot of these “pretend identifiers” stay in the user agent string – the big one being “Mozilla/5.0” which was the identifier to determine it is not Internet Explorer.
  27. Many of these identifiers are legacy and point at browsers that are not in use at any longer, like Netscape, Mozilla Phoenix which later on became Firefox or Konqueror.
  28. Anyone remember Mozilla 5.0 and knows what it is? It’s actually Netscape Navigator 6, from the year 2000
  29. Having to pretend to be a different browser for things on the web to even show up has become so normal that even the HTML5 standard advocates it. The product name and the application code name are constants and hard-wired to Gecko and Mozilla. This is a legacy caused by web developers relying on browsers and not writing towards a standard. And it does hurt the web.
  30. This is an actual UA sniffing example in use on the web today. It should determine if the current browser is a mobile one. It fails with Windows Phones.
  31. User Agent sniffing is a terrible idea. You rely on a string that could be anything and can be faked and you build for a certain browser at a current moment in time. You are keeping the web from becoming truly interoperable and you’re doing the main thing we as developers hated browser makers for: telling us what browser to use.
  32. Of course, there are exceptions when there are deadlines to be met and certain bugs to work around. However, when you sniff out a browser, at least check for the version and assume that browsers not known to you do the right thing. In other words, patch the problem, rather than blocking everything for future releases.
  33. When creating Microsoft Edge, the team looked at interoperability and what is missing or what all browsers have in common. This diagram is not to scale but should give you an idea how much overlap there is between different browsers. Notice that what’s considered “the mobile web” is mostly about Chrome and Safari, with Android and iOS being the big players here. This leads to a lot of code written exclusively for these browsers. Opera is missing, but that’s because it uses the Blink engine of Chrome and Opera Mini – whilst being a massive mobile player – is a service rather than a browser as your code gets changed on the fly to support low-end devices.
  34. With Microsoft Edge, the team remove all the legacy code that was exclusive to Internet Explorer and concentrated on the mobile web as the fastest growing part of the market. This is why we made Microsoft Edge pretend to be other browsers and tested the web in it. We looked at thousands of web sites and checked what didn’t work.
  35. We receive an amazing amount of data on site compatibility and I’ll talk more about that in a moment. To make sense of it all, we use a classification system to prioritize what we invest in to maximize its impact. At the top of this priority list is what we call “Interop 0”, these are sites that worked in IE11 but no longer work in Microsoft Edge. Sometimes this is because we goofed, but most often it’s because we’re now getting interoperable content and need to make a change to behave like other browsers. So beyond just ensuring a site continues to work, we’re also reducing the delta in behavior of our engine when compared with other engines. Next there is Interop 1 issues, these are ones that affect Microsoft Edge but also were broken in IE11. Often these are new standards that are being adopted by the web. So we implement them. Next we have Interop 2, these are things that are typically emerging in standards. They may or may not be supported by any browser at the moment. Generally, sites aren’t yet adopting these features quite yet but we anticipate they will in the near future. Finally there’s the Interop 3 bucket, these are things that are still in the idea or iteration stage or are supported but deprecated in other browsers with very low or 0 usage on the web. Some features in this bucket will eventually make it to Interop 2 once standards solidify and developer interest increases. Others are on their way out and may never get implemented in our engine.
  36. One example of this: when loading fonts IE and Firefox check that the font is ready to be installed. Webkit doesn’t do that. This leads to a broken experience in IE11. With Edge, we deliberately violate the definition of the standard to ensure that the display of fonts works out. FYI: Feature 602898 http://www.w3.org/TR/css3-fonts/ CSS Fonts Module Level 3 W3C Candidate Recommendation 3 October 2013 4.9 Font fetching requirements For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document. The implications of this for authors are that fonts will typically not be loaded cross-origin unless authors specifically takes steps to permit cross-origin loads. Sites can explicitly allow cross-site loading of font data using the Access-Control-Allow-Origin HTTP header. For other schemes, no explicit mechanism to allow cross-origin loading, beyond what is permitted by the potentially CORS-enabled fetch method, is defined or required.
  37. Another very common use on the web is to use –webkit-appearance to make things look different to what they are and override the original look and feel. This leads to broken sites in non-webkit browsers. In this case, this is not that problematic.
  38. However, in other cases developers relied heavily on this feature and make the site impossible to use if the browser doesn’t support it. For example here were the lack of labels wouldn’t allow me to know which checkbox I activated.
  39. Gradients are another big issue. There is a massive difference between the original Apple proposal and what ended up in the specification. Sadly enough, not many web sites upgrade the original syntax which can lead to white buttons with white text.
  40. In addition to looking at thousands of web sites, the team also actively monitors developer channels and finds long-standing bugs in IE that need removing in Edge. One of those was the issue of child element references getting deleted when the parent element got removed with innerHTML.
  41. To date, over 4000 of these fixes are in Microsoft Edge – and more will come.
  42. Of course, adding new features doesn’t really make for a better browser, unless we also remove some of the cruft that slowed the browser down over the years. In the case of Edge, this meant that we got rid of a lot of IE-only code, with the biggest part being the different document modes. It makes developers really happy to remove code. Like, really happy. So let’s take a moment to see all the things we were able to remove…
  43. Let’s take a second to review the non-interoperable IE’isms we’ve removed thus far.
  44. Testing lots of web sites by hand gave the team a lot of insight, but to ensure we really learn what is going on we needed to tap into more information.
  45. The first thing the team did was to rely on the 3+ million users of the Microsoft insiders program to give us feedback what works and what doesn’t. This helped with a lot of problems with large sites. However, even that doesn’t quite scale to the size of the web. Unless the insiders are really prolific: “So we’re done once each one of them browses 11 million pages”
  46. That’s the bread and butter of a web crawler though, so we thought we’d use the Bing crawler to our advantage. We built a low-level version of the Edge engine and added an instrumentation layer that gives us insight on the standard and non-standard use of all the pages indexed by the crawler. We then added this information into a database and improved the engine with the results.
  47. One of the results of this crawler experience is that XPATH – an older and seemingly obscure W3C standard not supported in IE – is used by sites and sometimes for very crucial content. For example the prices on the TomTom site.
  48. Even worse, on this lotto site I would never know if I’ve won when the browser doesn’t support Xpath.
  49. Instead of implementing a heavy xpath engine for a seemingly small amount of web sites, the team made an assumption: wouldn’t it be possible to do most Xpath queries these days using the CSS selector engine. CSS selectors have gotten pretty powerful in the last iterations.
  50. As it turns out, this assumption was good: 94% of the Xpath in the wild could be traversed using CSS selectors, thus piggy-backing on the engine already in the browser.
  51. With a bit of tweaking of the CSS engine, the team reached 97% success rate. Of course, this still leaves 3% without functionality, which could be fatal for the site.
  52. Instead of implementing Xpath, the rest of the 3% is now covered using a JavaScript solution called Wicked Good Xpath. This is an open source engine which got converted to internal JS to the browser. We also started contributing to this library, using some of the findings of the Bing crawler to make it better.
  53. Of course, none of this means that we’re not implementing and contributing to standards any longer – on the contrary. With a new engine implementing newer technology we have a much better chance to get some of the bleeding edge work standardised.
  54. Status tracks 193 standards or proposals – this doesn’t include the baseline stuff supported IE8+ The HTML5 spec alone is 693 pages when printed. Microsoft has 90 members in 58 different Working Groups (avg amongst top 5 browser makers is ~80) So you can imagine how easy it is for browsers to behave differently or for specs to have mistakes.
  55. For the future work we’re planning everything in the open. On status.modern.ie you can see what is being implemented, what is being worked on and what is under consideration.
  56. These are just a few examples of what got added to Edge. This changes constantly, so make sure you come back to the status page.
  57. More things are in the making, and it would be helpful for you to test the implementations with us.
  58. You might wonder what “under consideration” means in the case of the Edge team. Well, like any other team, we have to juggle dependencies and demand and we are looking at various parts of this. We look at real world usage data in other browsers, as what developers want is not necessarily what they are using. We look at developer and partner feedback. We check how stable a standard is before we implement it as we don’t want to disappoint developers and of course we have to see where the time of our developers is used to the most effect.