planet.webcompat.com

otsukare by Karl Dubost at

webcompat life

is the reason behind the magical value used by developers for coping with iOS change in between iOS 8 and iOS 9. It's awsome in some ways, because it is not really documented and if it is the reason. Web developers are using a value from the C++ code not intended for it to overcome a change in a platform, which in itself creates Web compatibility isssues on Firefox. I will write a bit more about it once I really understood what is happening.

webcompat issues

  • webc-4728 landofknown on Firefox iOS receives the desktop version.
  • webc-4744. No music. The second song never comes.
  • webc-4746. Another issue with viewport and large content. Chrome resizes the content, but Firefox respects the initial value.
  • webc-4782. Interaction between column layout and float.
  • webc-4804. London Transport with issues.

webcompat.com dev

Otsukare!

otsukare by Karl Dubost at

webcompat life

With all these new issues, it's sometimes difficult to follow everything. The team has grown. We are more active on more fronts and the non-written rules we had when we were 3 or 4 persons were working. When we grow, we need a bit more process, and slightly more dedicated areas for each of us. It will help us to avoid work conflicts and to make progress smoothly. Defining responsibilities and empowering people. This week it happens some tiles were put in my house on two days. After the first day, the tiles were there on the wall without the joint in between. I started to regret the choice of tiles. Too big, too obvious. But the day after, the joint was put in place in between the tiles and everything made sense. Everything was elegant and how we had envision it.

webcompat issues

webcompat.com dev

Otsukare!

otsukare by Karl Dubost at

webcompat life

webcompat issues

webcompat.com dev

Miscellaneous

Otsukare!

Mike Taylor's Web Log by Mike Taylor at

Bug 1331638 is a good example of why feature detection is important, but also a good reminder to test in enviroments where the feature totally doesn't exist.

A website (Twitter, in this example) tries to do the right thing and check for support before throwing notifications at you:

this.isSupported = function() {
  var a = "PushManager" in window,
      b = this.getNotificationPermission() !== "denied",
      c = "serviceWorker" in navigator,
      d = c && "showNotification" in ServiceWorkerRegistration.prototype;
  return d && a && b && c
}

Digging into getNotificationPermission:

this.getNotificationPermission = function() {
    return Notification && Notification.permission
}

OK, that looks pretty good. A boolean expression checking for the existence of Notification then returning its permission property value. So why the bug report with ReferenceError: Notification is not defined?

In Firefox, you can turn off the Notifications API via the dom.webnotifications.enabled pref. If you choose to do that, the Notification interface global totally doesn't exist.

And what happens if you refer to something that doesn't exist? ReferenceError. Boom. The page totally explodes.

Well, that's dumb. My app doesn't support users who do that, you're thinking. But the situation won't be any different for older browsers that don't implement the API.

The fix in this case is very simple (and to their credit, Twitter deployed the fix within a few hours of them finding out), check for the existence of the interface on the global first, then do the rest as usual.

this.getNotificationPermission = function() {
    return window.Notification && window.Notification.permission
}

(Note that they get this right in the "PushManager" in window feature detect in isSupported.)

otsukare by Karl Dubost at

webcompat life

webcompat issues

  • webc-4481. Firefox really needs to have these viewport issues fixed.
  • webc-4510. Slow twitter and emojis.
  • webc-4534. Boxes with different heights in Chrome/Safari and Firefox.

webcompat.com dev

Miscellaneous

Otsukare!

otsukare by Karl Dubost at

Can I travel to a work week meeting without any data on my laptop, aka a clean install?

It has been quite a couple of years that I have the same running question. And this week, international news led me to rethink about it. Mobile phone for me is easy, I have been living without it for years (since 2001 exactly). Social media accounts? I don't have a twitter account anymore, never had a facebook account, killed Flickr years ago when they were bought by Yahoo!

If I'm traveling anywhere in the world for work, do I need to have data on my laptop. When I say no data, I really mean it. It means you erase the laptop and makes it like if it was coming out of the factory. No login, no password, no mail configuration.

So I'm thinking about having a laptop specifically for traveling with a clean install and wondering what would be the consequences for working. Be for myself and my team mates.

The great thing about working on opensource projects and archiving everything online is that I could still work on some things without having to carry a single ssh passphrase or passwords with me. I can still do git clone or hg pull. I can still prepare work. I can do local commits on a laptop. I can write documents or email drafts. I can take notes during discussions. I can read old threads and documentation on wiki.

Some of the issues that needs buffering and delay:

  • Commenting on bugs
  • Sending emails
  • Pushing code
  • Probably other things

Once the work week is finished, I can come back to my home location with the work produced during the week on this laptop but still having no personal data. Just the work produced during the week. And then send all the work and push the commits once I'm back home.

It seems doable and a minor disturbance compared to the risks of uncertainties of privacy breach of your laptop searched against your will.

Otsukare!

otsukare by Karl Dubost at

webcompat life

webcompat issues

  • webc-4305: site with larger content than the viewport not a Web compatibility issue for the larger content, but two other issues that might be interesting to dive in: the known fact that we can't scroll horizontally for this type of rendering AND the default left alignment on RTL content for content larger than the viewport.
  • webc-4309: server side sniffing for this Paskitanese website. Firefox Android receives the desktop version.
  • webc-4310: Old framesets. This type of issues is hard, because it relates to very old behavior of the rendering engines and it is unlikely there is high benefits of changing the code of the rendering with the risk of breaking other old sites. :/ wontfix? Let's open a new bug
  • webc-4311 : position:absolute. Not a web compatibility issue, just a web site with weak resilience to window width and font size.

webcompat.com dev

Miscellaneous

Otsukare!

otsukare by Karl Dubost at

Ok, Houston, Mozilla, we've had a problem here. We (Dennis, Eric and Mike from the webcompat team) recently released a new button in Firefox Nightly: Report Site Issue.

report site issue button

The button who was previously available in Firefox Nightly Android is now available on Firefox Nightly Desktop. The button intent is

  • for the users: help them report Web compatibility issues.
  • for the Webcompat team: to be aware of what issues users have with Web sites they would not have in another browser and comes up with a remedy be on the side of the browser or on the side of the Web site.

Once you click the button, it sends a report to webcompat.com with a screenshot, the URL and the details of the user agent. The button is not in one's face. It is hidden in the three stripes menu on the top right.

Perfect Storm

So the button was released in a Firefox Nightly version of the week-end. On Monday morning, the first two persons to triage the bug are Eric Tsai (Taiwan) and me (Japan). We welcomed a flood of crashing issues related to video on Windows 10. It's a perfect storm. The combination of a bogus code in Nightly (which is the purpose of Nightly) and the release of the new button made our cursing during the day on IRC.

We can't do a lot of things about crashing issues without clear steps to reproduce and/or a trace.

A UI Step Back

While we were processing the flow of incoming bugs, a new one every 10 to 20 minutes, we started to discuss with Eric about what was wrong and what could be done.

Some thoughts:

Button Label

The button says Report Site Issue This is a very generic label, which covers indeed all type of issues. And indeed a crash, a security issue, a certificate issue can all be felt as something interesting to report.

Reporting Form Wording

The form of webcompat.com tries to reduce the scope of this report, but still it doesn't say anything specific about web compatibility such as for example does it work in another browser? (We want to fix this).

Crash Tab UI Next Actions

The crash tab UI is leaving the user with two choices:

  • Close this tab
  • Restore this tab

report site issue button

Given what happened on Monday, it seems that users want to report that there was an issue. They went through all the trouble of trying to find a place where they could report it with a button they didn't know it existed (because the button had just been released).

Firefox Help Menu

Firefox has another piece calling for actions from the user in the Help menu.

Firefox help menu

More specifically, we can find:

  • Troubleshooting Information: It redirects to the about:support page giving information about the configuration of the current browser, which contains a link to support (here for example Firefox 52 on mac). You can then report an issue with more details if you head to "Fix slowness, crashing, error messages and other problems", but that's a long way to give precise feedback for an issue the user has right now.
  • Submit Feedback: It sends the user to a choice of smiley faces and once selected one of the faces gives a form to give an opinion with a free text area. There is not really a way to leave a contact information if it's a specific issue.
  • Report Deceptive Website: This one leds to a google Web site asking people to report on sites which might try to steal information and so on. I have the feeling that most people would not understand deceptive. I wonder about the number of people it requires at Google to process those.

SSL Issues

There is also another screen asking users for feedback about wrong unsecure connection. At least this one is automatic, and has a checkmark for automation, but also an advanced button for letting people give more information.

Firefox help menu

What Do We Do?

So it seems that the Report Site Issue button is the most direct choice that users have when they are having an issue, but it also means that all sort of issues might land on webcompat.com with the double effects of

  1. being out of scope for the webcompat team
  2. being missed out by other teams at mozilla where it would be valuable for them.

So we need to find a better to gather feedback maybe in both reducing and atomizing. Maybe the report site issue is larger than webcompat.com and it should have an intermediate screen asking what kind of issues the person is reporting and redirecting to the right place. Hard to know. It needs UX and user testing. It's an interesting problem to have.

For now, we will continue to monitor on webcompat.com what this button generates.

Otsukare!

Mike Taylor's Web Log by Mike Taylor at

It's been about a year since the last quiz. Please direct yourself to the nearest whiteboard.

Given the following block of JS from Bug 1328542 (don't look yet, cheaters. Ugh), how many new Images are preloaded?

function FP_preloadImgs() {//v1.0
 var d=document,a=arguments;
 if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i  ) {
   d.FP_imgs[i]=new Image;
   d.FP_imgs[i].src=a[i];
 }
}

FP_preloadImgs(/*url*/'images/button6.jpg',/*url*/'images/button5.jpg');

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

If you guessed "as many as it takes until the browser hits a OOM (out of money) or crashes", congratulations. To bad you just spent all your browser money, you should probably buy that FP_preloadImgs v2.0 upgrade license.

The good news is that the DIY patch is much cheaper: just be sure to increment your, uh, expression thingies (i in this case) in for loops when pre-loading images (and generally everywhere else).

otsukare by Karl Dubost at

webcompat issues

  • Keeping the light on. Triage, filtering, looking for contacts.
  • Came back to this issue with Huffington post and it seems it could be a Firefox issue.
  • it's not the first time that some sites are using display: -moz-box which doesn't really mean anything in a CSS context, but still get applied. If I understood clearly it is coming from XUL. Anyway it gets applied but not render as expected (aka flexbox) and create issues such as gmail on Firefox Tablet.
  • Report Site Issue button is coming to Nightly Desktop… brace for impact. We might have a lot more than in the past.

webcompat.com dev

Miscellaneous

Otsukare!

otsukare by Karl Dubost at

This was written in the spirit of sharing and self-instropecting the way I prefer working.

I had a simple conversation (edited for expressing a general idea and not focusing on a specific case) about participation (after a request of a 1-1 meeting). I replied:

About the off-discussions, I will encourage you to do everything on record. It is a lot better and more inclusive and helps to keep history of the discussions. So use the issues tracker, the mailing-list, etc. :) but let's make it in public, not 1 to 1. ;)

which the person replied:

yes on the documentation part. but I want to gather information first, so a 1:1 would be great. Just to get a feeling in which direction the project should head.

I was about to send an email as an answer, but thought it would be better for a wider audience, and it would also probably help clarify my own ideas about it.

The thing which makes me uncomfortable is, I guess, this part: yes on the documentation part. but I want to gather information first. The gather information part, the process in which we assemble ideas to come up with a draft is essential to me in terms of understanding the path as a group we take, because the voyage is more important than the destination. There's not that much difference for me in between the gather information and the documentation part. This is probably due to two things in my life:

The more inclusive we are when drafting things, exploring ideas, recording them, the better it is for the community as large. Community doesn't necessary mean the world. It could be the community of interests. It's all about the context. Even if only two persons are discussing the issue, the fact that it is on record and archived will/might help, even the silent readers.

  • some might confirm their own opinions.
  • or they might be encouraged to make their own point because they have a slight disagreement.
  • or they might bring to the table a point that the two persons in the 1:1 had not thought about.
  • And quite important to me, it automatically describes the past, and leaves a trail of data making it easier to connect the dots in 10 to 20 years from now.

I understand that I surprise people by my own determination (stubbornness) to work this way. We are imperfect souls. We do mistakes. And we are afraid to do them in public. The typical example for me is my JavaScript skills, but on the long term, it helped me a lot more to do my naive mistakes and acknowledged them in recorded environment than to get stucked. People want to help. Our own mistakes help others. It's also why the amazing work—86 episodes already!—done my Mike Conley, The Joy of Coding, is essential to an healthy community and encouragement to the rest of the people. If you had to watch one, just start with the first one. See how Mike is stumbling, hesitating, going back and forth, how he is documenting is thoughts process. This is liberating for others who are less comfortable with this type of code.

So when you think you are ashamed, struggling with imperfect thoughts, if you need a push in the back to encourage you to go on records, just think about all the people you will help doing that. The people less knowledgeable than you. Yes they exist. That's the altruistic part. And think about all the things you will learn in the process with people more knowledgeable than you. That's the amazing self-development part.

Comments

Thinking in The Open

A post by Akshay S Dinesh on January 18, 2017 - Thinking in The Open

… how cool it would be if every idea that every person has is documented and permanently stored on the internet.

Slightly related to this comment from Akshay: Paper trail

Otsukare!

otsukare by Karl Dubost at

Monday was a day off in Japan.

webcompat issues

  • Do you remember last week the issues related to the implementation of global. Well, we are not the only one it seems. Apple announced that they released the same feature for Safari Tech Preview 21, but they had to revert it immediately because it broke their Polymer tests.

webcompat.com dev

  • After rehacking on the two size images after a mistake I had done in one JavaScript. My manual testing are allright, but the intern tests using selenium are not even starting. I tried a couple of hours to solve it but ran in a dead end. Spent already two much time on this. At least I'm not the only one. It led to the need to update Intern, the functional testing tool we use.
  • Discussions around labels is going on with interesting ideas.
  • We also restarted the discussion about closing non strictly webcompat issues. Your opinion is welcome.
  • How to deal with a flash message on a URI just at the creation of a new issue.
  • Spent a bit of time reading and hacking on mock testing. Trying to rewrite parts of the upload images tests section using mocking, but was yet not successful reaching a working state. The exercise was kind of beneficial in some ways, because to do it we have to be better at the way we coded the uploads module.

Miscellaneous

  • Medium is in trouble.

    I’ll start with the hard part: As of today, we are reducing our team by about one third — eliminating 50 jobs, mostly in sales, support, and other business functions. We are also changing our business model to more directly drive the mission we set out on originally.

    Each time, I have read an article published on the—yes slick but not original—Medium platform, a little voice inside me told me: "If you like this article, you should save it locally. This might disappear one day." If you publish content, you need to own and liberate your content. That seems contradictory. Ownership: You need to publish the content on your blog so you are responsible for its future. Liberation: You need to use a permissive licence (Creative Commons CC0, Public Domain, etc.), so people can disseminate it and make it this way more resilient. Culture propagates because we share.

  • Dietrich on Elephant Trail This reminds me of our walk on the same trail with webcompat team in Taipei last October.

Otsukare!

Mike Taylor's Web Log by Mike Taylor at

In Bug 1324062 we're landing a new button to the default hamburger menu panel in Firefox Nightly, like we did in Firefox for Android Nightly and Aurora. For now, the plan is for this feature to be Nightly-only, maybe one day graduating up to Beta.

If you click it, Firefox will take a screenshot of the page you're on and open the new issue form on webcompat.com (you can remove the screenshot before submitting if you prefer). You can then report an issue with your GitHub account, if you have one (they're free!), or anonymously.

screeshot of the Report Site Issue button in Firefox

What this does is allow our Nightly population to more easily report compatibility issues, which in turn helps us discover regressions in Firefox, find bugs in sites or libraries, and understand what APIs and features the web relies on (standard and non-standard).

What's a compat issue? In a nutshell, when a site works in one browser, but not another. You can read more about that on the Mozilla Compat wiki page if you're interested.

If you find bugs related to this new button, or have meaningful feedback please file a bug!

(Also if you would prefer it to live somewhere else in your UI, you can click the Customize button in the menu panel and go wild, or hide it from sight.)

otsukare by Karl Dubost at

Welcoming a new webcompat team member, Ola on our webcompat teleconf.

The Japanese engineering team has moved to a new office near Tokyo station. A lot less fancy than the beautiful space near National Arts Center, but a new space for discovery and exploration.

webcompat issues

webcompat.com dev

Miscellaneous

Reading about OKR and laughing hard:

The Objective is designed to get people jumping out of bed in the morning with excitement. And while CEOs and VCs might jump out of bed in the morning with joy over a three percent‐ gain in conversion, most mere mortals get excited by a sense of meaning and progress. Use the language of your team. If they want to use slang and say “pwn it” or “kill it,” use that wording.

Where is the humanity? Where is the individual accomplishment? And the collective realization of good? The thing which worries most is not the OKR method (it might be pretty good), but more the pseudo-intellectual mush given to managers. Instead, if you are a manager, go read Citadelle de Saint-Exupéry for example or go on a long hike in the mountains with another person. Anything which builds your understanding of humankind.

Otsukare!

otsukare by Karl Dubost at

The setup

Last week, I went to the conference Tech in Asia Jakarta 2016. Digressing… This URL will not be relevant for the 2016 content next year. It is a weak URL, already rusty from the start. A good way to fix this is to set a temporary redirection from http://events.techinasia.com/jakarta/ to http://events.techinasia.com/jakarta/2016/ so people have the right link in their bookmarks. Once the conference is finished, you can start redirecting to 2017.

I have been put in touch with David Corbin by Sandra Persing and Dietrich Ayala for talking about Web Compatibility on the Developer stage. The conference has a strong marketing and product placement agenda. This is not the usual crowd I venture to, but it's always interesting to have a different view on how people conceive and foresee the Web.

But we know for a long time Web Compatibility is about participating.

Jakarta

Jakarta is a vibrant city which is bustling to the sounds of motorbikes. Buildings are growing everywhere. The city is being modernized at a fast pace and like in many other cities going through these transformations, it is socially and ecologically violent. The Guardian has this week a full live coverage of Jakarta. The street food is amazing and quality coffee places are not hard to find. The population is young. This participates to the dynamism of the city and the startup ecosystem.

Web Compatibility talk

First talk of the morning, I was not expecting that much, but wow what a crowd. Ratri Chibi introduced me and I tried to gave an overview about Web compatibility in 25 minutes.

The context

techinasia slide

For my talk I usually try to connect to something the audience can relate to. This time I have used in most of my slides the Indonesian masks culture (topeng). Barong is a good spirit (on the left), while Rangda is a demon (on the right). The Web compatibility work is very much a battle in between the good and evil ways of doing things. But we all have to remember that like in the world of spirits, the daily reality is a lot more complex than just being right or wrong. Rangda is an evil force and… a protective force at the same time.

techinasia slide

What do we mean when we talk about the Web? The Web is a space where a person should be able to use whatever device and browser of their choice to access and interact with the content. The Web has been instrumental in making information cheaply accessible anywhere at anytime everywhere on earth. It enlarged the ability of individuals to publish content.

techinasia slide

A couple of years ago, at Mozilla, we tested the top 1000 Web sites in Japan and China on Firefox for Android. We quickly realized that around 20% of these sites were broken in some ways to the point of being completely unusable. The common issues were related to WebKit properties (CSS and DOM) such as old flexbox, gradient, transition, background-size, etc. Sometimes sites were relying on old non-standard properties implemented by other browsers but not Firefox such as innerText (the standard keyword is textContent). In this image of the Mobage site, we clearly the sign of flexbox first generation.

techinasia slide

It leads to the fragmentation of the Web and condemn people to use specific devices when they can afford it. It is also a vicious circle. Any reasonable Web agencies or IT departments before fixing a bug look at their browser market shares. If a specific browser is not visible in their analytics, they decide it's not important to support it and not worth spending time on fixing the issues. Contacting the companies for outreach to get the sites fixed becomes a seduction game. In cases where the site is totally unusable by design leads to an obvious zero marketshare. It also becomes very difficult to convince the company that they will get customers if they fix the bug. And last but not least, if too many sites are broken, it becomes a lot harder to make distribution deals with devices companies, which in return entrenches the low marketshare.

techinasia slide

How do we escape from this ouroboros? When the effort on HTML restarted, some design principles have been established including the priority of constituencies

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors; which should be given more weight than costs to authors of the spec itself, which should be given more weight than those proposing changes for theoretical reasons alone. Of course, it is preferred to make things better for multiple constituencies at once.

It says that the people using the Web for reading and publishing are the most important in the ecosystem. Everything should be done so they have a smooth Web experience. Sometimes as a Web developer, you might want to choose a less fancy solution so more people can use the service. As a browser implementor, you need to implement non-standard properties so the sites will be working on people's browsers.

Some Web Compatibility issues

HTTP

techinasia slide

Web compatibility issues are not only about CSS and DOM. Sometimes they are deep into the user experience and the way we use the protocols. A couple of years most Web sites had dedicated domain names for desktop computers and mobile devices. To help the user get the right experience, they used user agent sniffing (user agent detection mechanism). Each browser sports a HTTP User-Agent string which is sent with every request and identifies the browser. So sites are redirecting the device based on the user agent string to the www. or m. domains. Algorithms and databases of user agent strings help Web developers to make the right choice but for one issue: only the past is known. A new user agent string on the market will be unknown and then will not be recognized by these algorithms, sending the user to the wrong site. It's why I often say that user agent sniffing is a future fail strategy. It works only if you intend to keep a very high maintenance of every possible browser/device coming into the market before it actually hits the market. Mission impossible.

HTTP Ping Pong is happening when different detection logics are applied for the mobile and desktop site. One is saying, I know your user-agent string and you are a mobile device, I'm sending you to m. and the mobile site in return says I don't know you user agent string, you must be a desktop computer, I'm sending you to www. which in return… etc. If everything is done through HTTP, the browser gives up after 10 hops. The user is punished and not able to read the content. If there's HTTP on one side, and JavaScript on the other side, here we can enter in very interesting scenario of infinite redirection loops. Nightmares ensue.

CSS

techinasia slide

 elm.style.webkitTransform
 elm.style.WebkitTransform
 elm.style['-webkit-transform']
 elm.style['transform']

which one of these four properties is implemented in Edge (Microsoft) and Firefox (Mozilla). Our natural instinct would say the 4th one, which is the standard way to assign a transform to an element elm.style['transform']. But because of the wide spread of broken javascript and bogus libraries, the needs to be compatible with the Web forced us the others. It's the story of broken things on the Web, the story of our own failures to do the right things. So we patch our stories with ways so people can continue to follow along with us.

techinasia slide

This kind of things led the core team of Firefox (working on Gecko) pushed by the web compatibility team to implement many aliases of WebKit. Some properties really need just an alias, but some are slightly more subtle, such as flexbox. The first implementation of flexbox is very different from the current one and websites using the first version only (aka for WebKit safari) breaks if we were just simply converting to modern flexbox.

techinasia slide

You might think that we are rewarding the bad developers. That we should strive for quality and take a stand for doing the right (technical) thing. But what is right technical is not necessary right for the users. The screenshot in Firefox Android of the mobage website (above) is symptomatic of what we can see on the mobile Web in Japan. In 2014/2015, we identified that 20% of the Japanese sites were broken because of using -webkit- only CSS properties and WebKit JavaScript. We spent months, sometimes years contacting web sites without having them to change their site. So we had to bend our technical righteous side and implement some -webkit-. Previous RIP Opera Presto did the same. And Microsoft Edge. In the end the version on the right side in the screenshot is far more usable for the end users.

JavaScript and Legacy

techinasia slide

Issues with Web compatibility comes in many forms. They sometimes are just an exposure of the history and success of some JavaScript libraries. During the development of ES6, a new keyword has been proposed to finally be able to search a substring inside a string. contains was the most logical thing to do.

str.contains(searchString[, position])

techinasia slide

until… (you know there is a recurrent joke here and that there will be an issue, but let's continue with it) Mozilla deployed the new feature in Firefox Nightly and broke many Web sites using Mootools 1.2. This well-known library had a similar keyword but not with the same exact semantics. Firefox had to back out this and remove the regression. Luckily enough this happened before productions releases.

techinasia slide

The ES6 crew had to propose a new keyword: includes instead of contains. Sometimes we will discover Web compatibility issues only once we deploy a new feature and we realize that a well-known site or a successful libraries is relying on either a bug in the browser, or a similar feature.

Contacting Web sites

techinasia slide

Why these issues happen in the first place? Why can't people just code according to the standards. It's a very hard question. The Web is not only a technical object. It's not just code out of a compiler. The Web exists because of a social-economical structure. It's a deeply social object. Asking why some sites are broken is like wondering why there is pollution and why people can't just individually do the right thing. If you have worked or are working in a Web agency as a Web developer. You know you have a boss (or a project manager) and that there are clients. You know that the taboo Friday deployment is still happening. That the budget is undervalued. That the timeline for delivering the project is too tight. That the browsers themselves have their own set of issues. So people make choices, cut corners and test only for a certain number of scenarios.

Usually we try to contact Web sites. We make an attempt at discovering who is in charge, but here again boss, client, Fridays, legacy Web sites, maintenance budget in oblivion.

techinasia slide

Sometimes the issue are deeper and comes directly from the specification. When you read in a specification "Left to implementations" runs away from the feature. It means that the specification doesn't explain clearly the behavior of the feature and implementers will have to decide what they should do with the gap in description. That often leads to interoperability issues. Sometimes it's because web developers are using some features in "creative" ways that implementers would have never thought about. Any systems contain in itself ways of being exploited in unfathomable directions.

How To Do A Better Job?

techinasia slide

There are ways to mitigating the issues. On webcompat.com, we developed the tool cssfixme, it is not perfect but it's a good way to understand how to fix your webkit only CSS. Better is to use tools such as postcss. They will take care for you of the incompatibilities and prefixing strategy. It helps you to focus on what matters. They do the hard work of salting for the browsers with appropriate prefixes.

techinasia slide

Prefixes were a well intended idea—remember what I said about systems—but because of the socio-economical structure of the Web, they became a Achilles' heel for some browsers. A browser with very large market share can deploy a feature with a prefix and because Web developers don't want to wait before using it in production. It becomes a de-facto standard. That's really unfortunate, but a reality.

So browsers have decided a new policy and put new features behind settings to flip on and off. Most users do not change or even have access to these type of settings. So Web developers can't rely on them for the new production release of their site. At the same time, they can easily test the features by activating them. The caveat is that there will be less chances to discover issues, but it's a lot better for the browser ecosystem.

techinasia slide

MDN is a treasures trove. This set of documentation hosted by Mozilla and written by the large Web developer community gives a lot of information about the Web features, including Web compatibility tables. And if an information is missing, just contribute. I would also specially recommend caniuse.com

techinasia slide

If you find a bug in a browser you need to report it to browser vendors. This is essential. Too few Web developers report issues about Web browsers, and still they are the core of their daily usage. By reporting issues and bugs, you help browsers become better for your future work. The bugs you encounter in developing your own site are unique. Browser implementers can't imagine them or make them up.

techinasia slide

techinasia slide

Finally if you notice a Web site as a user or a Web developer with different rendering or behavior in different browsers. Do not hesitate to report it to webcompat.com. Make sure to test in multiple browsers. Be careful about your addons, they often create differences in between browsers (such as adblockers).

techinasia slide

If you have questions you can ask @webcompat or @mozwebcompat on twitter. You can also communicate on the publicly archived webcompat mailing list.

Otsukare!

otsukare by Karl Dubost at

Let's restart with a simpler worklog a bit more freestyle and less structured, before exploring a new format next year. 2016 had plenty of good things for Mozilla Webcompat team. Let's focus more on "this is what I'm doing" than "what I will do". The "will do" have a tendency to make you drift and create a burden you are dragging into the other tasks.

  • Published the incomplete worklog pseudo-drafts of the last two months. It's ugly but it's better than nothing. I need to simplify my worklog and automate some of the things.

webcompat.com dev

webcompat issues

Miscellaneous

Otsukare!

otsukare by Karl Dubost at

I have summaries for the previous week that I should probably published at least for my own record. Travels in November and December, in addition to moving to a new house and family events made the end of the year unusually very busy. So let's see very simple logs.

Bugs:

Python - webcompat.com:

Mailing-List:

Reading:

  • BBC and Cache-Control > (With Firefox and Cache-Control: immutable on the BBC Web site) we're now seeing ~31% fewer 304's served from our CDN edge on a subset of our static assets (which have immutable enabled)
  • The Analytics Fallacy. A good article by Anselm which reminds us about the bias of websites analytics. The browsers market share on a site reflects what the site allows. If the start of the discussion is we will support this browser X when it reaches 2% in our website marketshare and the website is currently unusable by the browser X, then it will indeed never have a chance to break through the 2% limit.

Otsukare

otsukare by Karl Dubost at

This is a very rough notebook of all the things in Hawaii, related to webcompat and other things.

Moz Hawaii 2016

  • Martian landscape, or what I imagine would be a martian landscape. There's nothing around.
  • Waikoloa resort is like a No ManSoul Land. This kind of place always give me the creep.
  • Test Pilot can help us test interaction ideas with users.
  • Don't settle - Evolve.
  • Web compat Notifications for users giving them context about that they might experience a broken Web site. It becomes a service to users if something is not working well. (Additionally it might put pressure on the sites to fix their own Web site.)
  • If you go to a conference, try to coordinate with Mozilla local community for giving another talk directly to the community. Pure love. My experience in Jakarta was a bliss more for the talk/discussion I had about the rusty Web than the Tech in Asia official conference.
  • Screencast for webcompat
  • Tantek wants to discuss Webcompat and Banks (we missed the opportunity). My first initial thought… "That will be hard. Our experiences in getting banks web site fixed is near zero. And somehow it's understandable. They don't want to trust a random contact online."
  • Meeting face to face with people is wonderful. You also learn plenty of small things about Mozilla's life (for someone who's working remotely).
  • Kona's airport is an open space, quite wonderful. Kona "city" is… depressing.

Webcompat.com

  • Deepthi issues.db. We need to move forward with this. On my plate.
  • HTTP Perf. Some resources are not cached correctly.
  • Ola working on UX will help us.
  • Issue layout. Ship it.
  • Images thumbnails. On my plate to finish.
  • Adam working on metrics. Response time workflow metrics (how long do we take time triage, diagnosis, sitewait, etc.)
  • Probably there is work to do on the Webcompat form so we help the user to send a good bug report. Employees and Community contributors
    • Consumers of bug reports: triage, diagnosis, triage
    • Developers of the Web site: python, JS, CSS
    • Add-ons related. Supporting code.
  • Talking about localizing. Still the same issue about the manpower to be able to deal with the language. Maybe we could try a test.
  • Wonderful discussion with Alex Mayorga about closing invalid issues and what is a webcompatibility issue.

Next week is a week-off.

Otsukare.

otsukare by Karl Dubost at

Most of the week in Jakarta and preparing two talks. More to talk about this, hopefully soon.

Webcompat Life

  • Discovered that message.app in macOS Sierra is using the og:title and og:image to create the link preview when pasting a link.
    <meta property="og:title" content="Mifune: The Last Samurai - Movie Trailers - iTunes">
    <meta property="og:image" content="https://trailers.apple.com/trailers/independent/mifune-the-last-samurai/images/poster-large.jpg?lastmod=1">

You are welcome to participate

Otsukare!

Subscriptions