planet.webcompat.com

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!

otsukare by Karl Dubost at

Webcompat Life

An instant feel good about the project. Probably the best message of the week on a webcompat.com issue.

Hi everyone! I'm the creator 👋 I've known about this bug but I didn't know how to solve it until I stumbled across this thread. You are the best! Thank you for finding a fix. I'm updating the site today!

Webcompat issues

(a selection of some of the bugs worked on this week).

Otsukare!

otsukare by Karl Dubost at

Last week, the Web compat team met in Taipei to work together on webcompat.com and gofaster add-on. This week, the work has a more special human feeling. Work week meetings are good for creating a better sense of community. Tune of the week: Empire State of Minds

Webcompat Life

Progress this week:

Today: 2016-10-31T07:47:33.647004
341 open issues
----------------------
needsinfo       17
needsdiagnosis  71
needscontact    2
contactready    30
sitewait        181
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

Reading List

I often joke that I don’t want to hire a code ninja. Ninjas come in the middle of the night and leave a bloody mess. I want a code janitor. Someone who walks the hallways of code, cleaning up pieces, dusting up neglected parts, shinning up others, tossing unnecessary bits. I prefer this gentler, more accurate analogy. This is the person you want on your team. This is a person you want in your code reviews. On Style Maintenance

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

This is a very short summary of a couple of things we did during the work week. There is more to come in the following weeks.

  • Done triage on webcompat.com and refocus on some of the milestones.
  • Hacking on some of the issues for webcompat.com
  • Collaborative debugging
    • Dennis, Adam: qemu-system emulator
    • Adam: VPN for international testing
    • We showed our different ways of debugging and process.
    • Debugging process can take a lot of time.
    • jsnice.org very useful for deminifying
  • We need to investigate viewport in Firefox and different browsers. Good stuff here. I will do it.
  • Site Patching Policy
  • Triage First steps (discussion with Adam). How do we empower the community? How do we do ourselves. Our criteria for advancing an issue to the next stage.
  • Planning Q4 and Topics list for H1 2017
    • Time for us to commit on things we need to achieve before the end of the year and things we want to move on in 2017.
  • Ligthning Talk
    • Mike explains webcompat
    • Karl talked about why is hard to get a Web site fixed. Social, economic and technical dynamics.
    • Dennis talked about MITM for hot testing a Web site.
    • Adam talked about Screenshot diffing https://github.com/yahoo/blink-diff
    • Eric talked about the situation of Web compat in China and Taiwan.

Otsukare!

otsukare by Karl Dubost at

Family with cold, just before the work week. Rain. Administrative Chores .On and on. Tune of the week: Erika Badu - On and on

Webcompat Life

You are welcome to participate Monday was a day off in Japan: Sports day

Webcompat issues

(a selection of some of the bugs worked on this week).

Webcompat.com development

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

When Can I Use updates by Alexis Deveria at

In addition to the existing "current aligned" & "usage relative" modes, caniuse now has a "date relative" mode for support data.

This mode, toggled via the button above the support table, organizes the support data relative to when each browser version was released. As a result, you can get an idea how support for a feature changed over time.

The tooltip information seen when hovering over versions now also includes the browser's release date, which appears in all three visualization modes.

otsukare by Karl Dubost at

Being born in France, lived/ing in Canada and Japan, The international news pages are usually my preferred source of information about the world. But when I read the non-comical farce and quite disheartening run for the USA presidential 2016, I'm dumbfounded. Quick, poetry and imagination! Tune of the week: Ol' Man River - William Warfield

Webcompat Life

Progress this week:

Today: 2016-10-11T07:15:20.170216
363 open issues
----------------------
needsinfo       19
needsdiagnosis  123
needscontact    12
contactready    20
sitewait        170
----------------------

You are welcome to participate

I'll be speaking in Jakarta, Indonesia for Tech in Asia 2016 on November 16.

Preparing a brownbag for Taipei's office.

Webcompat issues

(a selection of some of the bugs worked on this week).

Webcompat.com development

Reading List

  • will-change used too often. The thing I found interesting in this article is that it is written entirely from the prospective of Chrome without any tests in other browsers. This is one of the issues of the way some people think about the Web. Firefox is sending a warning in the console when people over-use will-change. fwiw the code provided in the article works very well in Firefox/Gecko and Safari/WebKit (testing in Edge would be cool too) and indeed shows bluriness in Blink (Opera and Chrome).

    The will-change spec doesn't really specify implementation details which means that Chrome's new behavior may be completely unique; Firefox might do something different, and then there's Edge, Safari, Opera, Android, etc. Perhaps Chrome requires that developers toggle back-and-forth to maintain clarity, but what if Firefox interprets that differently, or imposes a big performance penalty when doing the same thing? What if developers must resort to various [potentially conflicting] hacks for each browser, bloating their code and causing all sorts of headaches. We may have to resort to user agent sniffing again (did you just throw up a little in your mouth?). This will-change property that was intended to SOLVE problems for animators may end up doing the opposite.

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

otsukare by Karl Dubost at

Reading The GDS blog post on how to prototype in the browser, I realized that it's always good to explain little tips for the benefits of others. Their technique is something I use on a daily basis for modifying content, evolving a design, etc.

When diagnosing on webcompat.com, I often use a trick for having a better understanding of the way the elements flow with regards to each other.

Using CSS outline for visualizing

David Lorente reported an issue about the menu of Universia. Basically two items where missing in the main navigation bar of the Web site.

Hovering the menu with the mouse and doing ctrl+click to get the contextual menu, I can choose inspect.

Inspect Contextual Menu

It opens the developer tools and place the cursor on the right element and displays its associated CSS.

Inspector

For this particular issue because the elements were not immediately visible. I decided to add a higher z-index in case there were hidden by another layer, but more specifically. I selected the wrapper element for the navigation bar <div class="header-nav"> and headed to the + sign on the right side.

Add new rule

Clicking on it will help you to add a new rule for this selected node (element) in the inspector. In this case, it will add .header-nav.

header nav selector

which I usually edit for adding all the children of this node with .header-nav *. Then I proceed to add an outline CSS property with a color which will give an acceptable contrast, helping me to understand what is happening. In this case outline: 1px solid pink

outline css rule

The result helps to visualize all the children boxes of the div.

Visualization

It is now a lot easier to understand what is going on.

Why CSS outline?

The reason I use CSS outline is that they do not participate to the intrinsic sizes of boxes and does not destroy the flow of boxes. It just makes them visible for the purpose of the diagnosis.

What are the tricks you are using which seems obvious to you? Share them with others.

Oh and the site has been fixed since.

Otsukare!

otsukare by Karl Dubost at

I managed to break a bit of my python installation. I will need to figure out next week. Taipei is coming quickly, then seems I will be speaking at another event in November. Tune of the Week: Jardin d'hiver

Webcompat Life

Progress this week:

Today: 2016-10-03T11:13:33.042445
347 open issues
----------------------
needsinfo       14
needsdiagnosis  109
needscontact    12
contactready    23
sitewait        166
----------------------

You are welcome to participate

Webcompat issues

(a selection of some of the bugs worked on this week).

Webcompat.com development

Reading List

Follow Your Nose

TODO

  • Document how to write tests on webcompat.com using test fixtures.
  • ToWrite: Amazon prefetching resources with <object> for Firefox only.

Otsukare!

Subscriptions