webcompat.com summit

Welcome!

Web Compatibility Life Cycle

[I]f you consider the Web as an interconnected set of things, it sometimes looks like a living organism. In a biosphere, you usually don't go with a clear cut. New things grows on the dying and evolving things. Part of the process.

Web philosopher, Karl Dubost

Today's Schedule: http://goo.gl/fH83Ff

(Or just Yahoo! "Web Compatibility Summit Schedule")

Backchannel: irc.mozilla.org #webcompat

The problem is actually much, much larger.

Web Legacy

User Agent Strings

Mozilla/1.0 (Win3.1)

Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826

Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0

Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)

Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2251.0 Safari/537.36 OPR/28.0.1747.1

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

What could go wrong?

        with(navigator) {
          Browser=appName;
          Version=parseInt(appVersion.charAt(0));
        }

What could go wrong?

Part 2 — The Wrongening™

        if(ua.indexOf('Firefox/3') !=-1) {
          type = "mp4";
          format = "mp4";
        } else if (ua.indexOf('Firefox') !=-1) {
          type = "webm";
          format = "webm";
        }

        Firefox/3.0   -> mp4
        Firefox/29.0  -> webm
        Firefox/30.0  -> mp4
        Firefox/39.0  -> mp4
        Firefox/40.0  -> webm
        Firefox/300.0 -> mp4

LETS LOOK AT SOME BUGS

DOM PROM BLEMS

window.orientation, 920342

            if (is_iphone || android) {
              var supportsOrientationChange = "onorientationchange" in window,
                  orientationEvent = supportsOrientationChange ? 
                                     "orientationchange" : "resize"
              window.addEventListener(orientationEvent, function() {
                if (window.orientation != 0)
                  badOrientation();
              }}

`window.orientation != 0`

`undefined != 0`

badOrientation()

JAVA SCRIPT WOES

Array.prototype.values(), 883914

            me.definitions.push('function ' + name + '(' + me.fnArgs + ') {',
                            ' try { with(values) {',
                            '  ' + action,
                            ' }} catch(e) {',
                            '}',
                      '}');

OBVIOUSLY

When `values` is an Array in that WithStatement, any reference to "values" in the body statement would become `values.values`, referring to Array.prototype.values instead of the original object.

883914#c13

*Buy Effective JavaScript!
(so Dave Herman doesn't
send his team of lawyers
my way for pirating this
wonderful screenshot)

spot the bug

            var f = someCondition ?
                    {entries: [{}, {}]} :
                    [{}, {}];
             
            if (f.entries) {
              explodeIfYouDontPassMeAnObject(f);
            }

Array.
prototype.
entries() 894658

LITERALLY AN OUTHOUSE FULL OF PURE CSS

ehow.com, 733791

        .button {
          background:-webkit-gradient(linear,left top,right top,
                        from(#c5ccd4), color-stop(71%, #c5ccd4),
                        color-stop(72%, #cbd2d8),to(#cbd2d8));
        }

Fixed-ish

        .ChannelListing .crafts{
          background-color:#cfb793;
          background-image:url(/ui/images/mobile/skins/channel-listing/crafts.png);
          background-position-y:8px;
          background-position-x:7px;
        }