otsukare

Did you open a bug?

2025-09-05T17:50:00+09:00

If you are a webdev…

and you had an issue on the website you were working on, because of a web browser…

Why didn't you file a bug on a browser bug tracker? What are the frictions?

(not asking those who did, because they already do the right thing ❤️)

Or Webcompat.com. A cross-browsers bug tracker.

PS: do not hesitate to ask around you, your colleagues, mates, etc.

This was initially posted on mastodon, you can contact me there. Also on GitHub.

Otsukare!

Quick HTML test case

2025-06-13T15:30:00+09:00

For reporting a bug or an unexpected behavior, the simpler the test is, the better. You can create a very simple HTML file to demonstrate the issue or you can use an online code web app such as jsfiddle or codepen. (I have a preference for codepen but I don't know why.) But most of the time, I'm using data: URL to share a simple piece of code for a test.

Let's take this code.

<div class="test" style="opacity:clamp(50%,0%,70%)"></div>

The style attribute returns different values when we extract the value using getPropertyValue()

0.5 in Safari Technology Preview 18.4 (220) 20622.1.14.5
calc(0.5) in Firefox Nightly 141.0a1 14125.6.5
clamp(50%, 0%, 70%) in Google Chrome Canary 139.0.7233.0 7233.0

According to the WPT test, Firefox returns the right answer: calc(0.5)

To see the returned value, we coud do :

<!-- The code being tested. -->
<div class="test" style="opacity:clamp(50%,0%,70%)"></div>

<!-- Something that can hold the test result. -->
<div class="log"></div>

<!-- the script extracting the value and writing the test result. -->
<script>
  document.querySelector(".log").textContent=document.querySelector(".test").style.getPropertyValue("opacity");
</script>

This is very simple. I can put all of this on one line.

<div class="test" style="opacity:clamp(50%,0%,70%)"></div><div class="log"></div><script>document.querySelector(".log").textContent=document.querySelector(".test").style.getPropertyValue("opacity");</script>

Then I just need to add the right data URL in front of it. This is HTML, so we add data:text/html,. That's it. This will instruct the browser to parse the code in the URL bar to process it as HTML.

data:text/html,<div class="test" style="opacity:clamp(50%,0%,70%)"></div><div class="log"></div><script>document.querySelector(".log").textContent=document.querySelector(".test").style.getPropertyValue("opacity");</script>

Then you can copy/paste this code in the URL bar of your favorite browser or more exactly in multiple browsers.

Hope it helps! Yes, I opened a bug for the issue.

Note: For those, who are wondering why I didn't use id instead of class. The # sign in the querySelector() would require to escape #, because it would have unintended consequences on the parsing of the URL.

Otsukare!

Les Liaisons Dangereuses Or The Wrong Love For Proxy Detections

2025-06-06T15:15:00+09:00

The temptation is high. The desire for shortcuts is permanent. But the story is often full of painful moments without any winners. "Les liaisons dangereuses" of detecting browsers and devices are common.

ce n’est pas à l’illusion d’un moment à régler le choix de notre vie. — Les liaisons dangereuses. Choderlos de Laclos. 1782

which can be translated as "it is not for the illusion of a moment to govern the choice of a lifetime."

`window.installTrigger`

Firefox (Gecko) had the property window.installTrigger to signal that a web extension could be installed. This was a Firefox-only property. Soon enough, obviously, people started to use it as a signal that the browser accessing the website was Firefox.

if ("installTrigger" in window) {
    // do something for Firefox
} else {
    // do something for others
}

When the property was retired, because it was not standard and used for things which were completely different from its initial purpose, websites started to break. It had to be shimmed. Gecko had to imitate the property so that some websites would continue to work.

Another example `-webkit-touch-callout`

-webkit-touch-callout was implemented in 2013 in WebKit to give the possibility for Web developers to opt out of the contextual menu given on iPhone during a long press. The long press on a link makes it possible to also get a preview of the page behind the link.

-webkit-touch-callout: none permits web developers to cancel this behavior when, for example, developing a web app they need to be able to long-press user gestures such as a drag and drop.

But I discovered today that this was used as a proxy detection for iPhone in CSS. This is bad. Some CSS stylesheets contain a combination of @support and -webkit-touch-callout: none to have a specific behavior in their CSS.

@supports (-webkit-touch-callout: none) {
    body {
        /* DON'T DO THAT! */
    }
}

This has many implications for the future. Here are some examples of how it can become very sour.

One day, the CSS WG may decide to standardize touch-callout so that web developers can opt out of other browsers having contextual menus. Given the spread and the legacy of -webkit-touch-callout, some browsers might have to alias the -webkit version so it is working for websites not updated. Suddenly, the CSS targeting iPhone applies to all browsers.
Or the opposite story of this where because the term is so misused and it will break so much stuff that a new term needs to be coined, leaving plenty of CSS on the Web with a useless term which is not working exactly like the initial idea. It also means that it forces WebKit to maintain the code for the old property or to shim it like Firefox did with the risk to have confusion in between the place where it was used rightly and where it was wrong.

These are only a few examples of the complexity…

Do Not Misuse Terms

There are plenty of other examples of this type, such as the abuse of maxTouchPoints (this one will be (not) "funny" if touch screens on desktop computers become more prevalent) or window.standalone which created plenty of issues when web apps for desktop computers became a thing.

We all know the benefits of feature detection, we made a lot of progress as a community to go away as much as possible from User Agent detection. It's not perfect. There are always difficult trade-offs.

L’humanité n’est parfaite dans aucun genre, pas plus dans le mal que dans le bien. Le scélérat a ses vertus, comme l’honnête homme a ses faiblesses. — Les liaisons dangereuses. Choderlos de Laclos. 1782

Something along "Humanity is not perfect in any fashion; no more in the case of evil than in that of good. The criminal has his virtues, just as the honest man has his weaknesses."

Stay away from proxy detections, aka using a feature of the Web platform which seems a solution, at a point in time, to detect a specific browser or device. It clutters the Web platform. It makes it very hard to have a better Web without plenty of hacks here and there.

Use feature detections for what they are, detecting the feature to affect the behavior of this specific feature.

Fixing rowspan=0 on tables on WebKit.

2025-02-21T17:00:00+09:00

Last week, I mentioned there were easy ways to fix or help the WebKit project.

Find The Bug

In January, looking at the FIXME: mentions on the WebKit project, I found this piece of code:

unsigned HTMLTableCellElement::rowSpan() const
{
    // FIXME: a rowSpan equal to 0 should be allowed, and mean that the cell is to span all the remaining rows in the row group.
    return std::max(1u, rowSpanForBindings());
}

Searching on bugs.webkit.org, I found this bug opened by Simon Fraser on May 5, 2018: rowspan="0" results in different table layout than Firefox/Chrome. Would I be able to solve it?

Test The Bug

The first task is very simple. Understand what are the different renderings in between browsers.

Simon had already created a testcase and Ahmad had created a screenshot for it showing the results of the testcase in Safari, Firefox and Chrome. This work was already done. If they had been missing, that would have been my first step.

Read The Specification

For having a better understanding of the issue, it is useful to read the specification related to this bug. In this case, the relevant information was in the HTML specification, where rowspan attribute on td/th elements is described. This is the text we need:

The td and th elements may also have a rowspan content attribute specified, whose value must be a valid non-negative integer less than or equal to 65534. For this attribute, the value zero means that the cell is to span all the remaining rows in the row group.

Create More Tests

Let's take a normal simple table which is 3 by 3.

<table border="1">
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A3</td><td>B3</td><td>C3</td></tr>
</table>

We might want to make the first cell overlapping the 3 rows of the tables. A way to do that is to set rowspan="3" because there are 3 rows.

<table border="1">
  <tr><td rowspand="3">A1</td><td>B1</td><td>C1</td></tr>
  <tr>                        <td>B2</td><td>C2</td></tr>
  <tr>                        <td>B3</td><td>C3</td></tr>
</table>

This will create a table were the first column will overlap the 3 rows. This is already working as expected in all rendering engines : WebKit, Gecko and Blink. So far, so good.

Think About The Logic

I learned from reading the specification that rowspan had a maximum value: 65534.

My initial train of thoughts was:

compute the number of rows the table.
parse the value rowspan value
when the value is 0, replace it with the number of rows.

It seemed too convoluted. Would it be possible to use the maximum value for rowspan? The specification was saying "span all the remaining rows in the row group".

I experimented with a bigger rowspan value than the number of rows. For example, put the value 30 on a 3 rows table.

<table border="1">
  <tr><td rowspand="30">A1</td><td>B1</td><td>C1</td></tr>
  <tr>                         <td>B2</td><td>C2</td></tr>
  <tr>                         <td>B3</td><td>C3</td></tr>
</table>

I checked in Firefox, Chrome, and Safari. I got the same rendering. We were on the right track. Let's use the maximum value for rowspan.

I made a test case with additional examples to be able to check in different browsers the behavior:

Fixing The Code

We just had to try to change the C++ code. My patch was

diff --git a/Source/WebCore/html/HTMLTableCellElement.cpp b/Source/WebCore/html/HTMLTableCellElement.cpp
index 256c816acc37b..65450c01e369a 100644
--- a/Source/WebCore/html/HTMLTableCellElement.cpp
+++ b/Source/WebCore/html/HTMLTableCellElement.cpp
@@ -59,8 +59,14 @@ unsigned HTMLTableCellElement::colSpan() const

 unsigned HTMLTableCellElement::rowSpan() const
 {
-    // FIXME: a rowSpan equal to 0 should be allowed, and mean that the cell is to span all the remaining rows in the row group.
-    return std::max(1u, rowSpanForBindings());
+    unsigned rowSpanValue = rowSpanForBindings();
+    // when rowspan=0, the HTML spec says it should apply to the full remaining rows.
+    // In https://html.spec.whatwg.org/multipage/tables.html#attr-tdth-rowspan
+    // > For this attribute, the value zero means that the cell is
+    // > to span all the remaining rows in the row group.
+    if (!rowSpanValue)
+        return maxRowspan;
+    return std::max(1u, rowSpanValue);
 }

 unsigned HTMLTableCellElement::rowSpanForBindings() const

If rowspan was 0, just give the maximum value which is defined in HTMLTableCellElement.h.

I compiled the code change and verified the results:

(note for the careful reader the last table legend is wrong, it should be rowspan="3")

This was fixed! A couple of tests needed to be rebaselined. I was ready to send a Pull Request for this bug.

What Is Next?

The fix is not yet available on the current version of Safari, but you can experiment it with Safari Technology Preview (STP 213 Release Notes).

The biggest part of fixing the bugs is researching, testing different HTML scenario without even touching the C++ code, etc. I'm not a C++ programmer, but time to time I can find bugs that are easy enough to understand that I can fix them. I hope this makes it easier for you to understand and encourage you to look at other bugs.

Note also, that it is not always necessary to fix until modifying everything. Sometimes, just creating testscases, screenshots, pointing to the right places in the specifications, creating the WPT test cases covering this bug are all super useful.

PS: Doing all this work, I found also about the behavior of colspan which is interoperable (same behavior in all browsers), but which I find illogical comparing to the behavior of rowspan.

Otsukare!

Some Ways To Contribute To WebKit and Web Interoperability

2025-02-14T15:35:00+09:00

Someone asked me recently how to contribute to the WebKit project and more specifically how to find the low hanging fruits. While some of these are specific to WebKit, they can be easily applied to other browsers. Every browser engines projects have more bugs than they can handle with their teams.

In no specific orders, some ideas for contributing.

Curate Old Bugs on the bug tracker

Go through old bugs of bugs.webkit.org.
Try to understand what the bug is about.
Create simplified test case when there is none and add them as an attachment.
If they show differences in between the browsers, take a screenshot when it’s visual in Safari (WebKit), Firefox (Gecko), Chrome (Blink).
If there is no difference in between browsers, CC: me on the bug, and probably we will be able to close it.

This might help reveal some old fixable bug or make it easier to fix it for another engineer. Some of them might be easy enough that you can start fix them yourself.

Find Out About Broken Stuff On WPT.

Dive into all the bugs which fail in Safari, but pass in Firefox and/or Chrome. (You can do similar search for things failing in Chrome or failing in Firefox.)
Understand what the tests is doing. You can check this with the WPT.live links and/or the associated commit.
Check if the test is not broken and makes sense.
Check if there is an associated bug on bugs.webkit.org. If not, open a new one.

FIXME Hunt Inside WebKit Code

List all the FIXME which are flagged in the WebKit Source code.
Not all of them are easy to fix, but some might be low hanging fruit. That will require to dive in the source code and understand it.
Open a new bug on bugs.webkit.org if not yet existing.
Eventually propose a patch.

Tests WebKit Quirks

There are a number Quirks in the WebKit project. These are in place to hotfix websites not doing the right thing.
Sometimes these Quirks are not needed anymore. The site has made a silent fix. They didn't tell us about it.
They need to be retested and flagged when there are not necessary anymore. This can lead to patches on removing the quirk when it is not needed anymore.
Some of these quirks do not have the remove quirk bug counterpart. It would be good to create the bug for them. Example of a Remove Quirk Bug.

Triage Incoming Bugs On Webcompat.Com For Safari

Time to time there are bugs reported on webcompat.com for Safari.
They require to be analyzed and understood.
Sometimes, a new bug needs to be opened on bugs.webkit.org

Again, this is strongly explaining how to help from the side of WebKit. But these type of participation can be easily transposed for Gecko and Blink. If you have other ideas for fixing bugs, let me know.

Otsukare!

Molly

2023-09-06T17:51:00+09:00

Molly passed away at 60.

A blog post of this nature is never easy. She was so larger than life that she puts a print on each of us, who have discovered the Web early on.

My first discovery of Molly Holzschlag was through the WebTechniques magazine published from 1996 to 2002. This was a real magazine about the Web. You would recognize early writers like Laura Lemay, Lynda Weinman, etc. She had a column there called Integrated Design. She started writing it on Web Techniques. September 1999.

Style sheets are one of the most effective innovations for designers; they make it easier to manage style elements via a single, linked sheet. When the time comes for a minor style update, such as a change in the color of article headers, the change can be implemented throughout the site in a few seconds.

Then she was part of the WaSP (Web Standards Project), including Jeffrey Zeldmann and others, an effort to bring interop in between browsers and educate Web developers on using Web Standards.

A capture of Molly's site in 2000.

I was hired at W3C in July 2000 to work on improving the quality of W3C specifications. And I had a long time interest in also improving the knowledge of W3C specs for the French community.

On May 2002, I was attending the World Wide Web Conference in Hawaii and I met Molly there for the first time. We had a long discussion (seating on chairs near the pool) about evangelization efforts, the W3C, WasP and the role that each could play. Together with Olivier Théreaux (working at W3C at that time), we had also a strong desire to have a better relationship of W3C with the Web developers community and were discussing similar efforts.

We created the public-evangelist mailing-list at W3C. She introduced herself on the list.

Then I met her regurlaly in my professional career, on conferences, at meetings and we even worked together in the Opera Developer Relations Team in 2011.

Today on Mastodon and blogs, you will see a lot of messages on how important she had been in the life of people from many continents, many places, for people who praised the Web profession as a craft.

Thanks for all the magical memories and your unconditional love for the Web.

Otsukare!

The lucky day of me falling hard professionally

2023-08-31T08:05:00+09:00

Let me tell you a story…

In my first professional year (~1995/1996) as a ~~web developer~~, well webmaster at that time, I was working on the BNP website. Yes, the BNP French bank website, except at that time it was only a couple of hundreds static web pages (maybe around 300).

The client asked us to fix the footer on all these html files. The job was assigned to me.

I opened the local website FTP folder with all the files in it. I started to look at the HTML and noticed a simple search and replace would not do it.

Let's use Regex for parsing/fixing HTML. Haha.

Very proud of my regex, I executed it on all files. Sure I had done a good job! I dropped the folder in the FTP application and all files on the live site were replaced.

Oooops!

I had made a mistake in my regex. I replaced every characters in the HTML by character + space. The site was now displaying the raw ascii characters.

< H T M L >
< H E A D >
< T I T L E > B N P < / T I T L E >

and so on. The roughly 300 files. I had no backup. Cold sweat.

We were around 6 or 7 people working in this Web agency as webmasters. I asked everyone

to stop everything they were doing.
to not visit the BNP website.
to save locally every cached files in their browser history and/or their local backup if they had and send them to me.

On a couple of hours we have been able to recreate the site and with a bit of manual work too.

That was one of my most formative mistakes at the beginning of the Web.

Work on a backup.
Do not synchronize before checking locally.
Install a local web server on your computer.
Browser caching is cool!
Teams are awesome. You are not alone. You can reach out for help.
Create a better team process for working on sites.
Do not use Regex for parsing HTML

Mistakes will happen. Learn from them.

Otsukare!

Webcompat Outreach, Mon Amour…

2023-05-23T14:00:00+09:00

I was listening a podcast by Brian Kardell and Eric Meyer. Toward the end, they are mentioning the challenges of outreach in the context of broken Web sites.

Brian says:

It would have to be, enough people would have to complain. A browser wouldn't tell a lie if they could reach out and get you to update it.

I wrote in the past about the need for browsers to lie to websites and the consequences for both the websites.

Websites fails to support a browser A for a reason X. Sometimes not enough market share for them to care.
The browser A lies to be able to get the right code path.
The websites analytics show that browser A is not accessing the website.
Goto 1.

And if you wanted to update my website or your website, that would be relatively easy. They would just send us an email and we'd be like, 'Oh, crap, let me fix that right away.'

It's not that easy. It is still hard to contact individuals. It takes time. The person has sometimes no real control over their "personal website". And the Benefits/Cost Ratio is very low. (Note that Brian and Eric were talking about their actual personal websites and indeed this is easier to contact public tech savy people.)

But when it comes to Wells Fargo, or Yahoo, or some big site with lots and lots and lots of people who go there…

Here it depends on the category of websites. Yahoo! is a lot easier to contact, than certain types of websites:

Bank
Casino
Illegal streaming
certain Adult content
Governments
All sites which are flyers or one-off marketing stunts

Another parameter: culture!

The structure of business for creating websites and the relationships of the Web developers with their direct and indirect hierarchy is not the same depending on the regions of the world. For some Web developers it will be very hard to be able to challenge the decision making process with regards to a website. In some circumstances, the bottom-up approach of contacting will not work, and you would need to go to a top-down approach.

Brian continues:

CNN.com, right. And can we actually reach them? Can we get them to change it? Even worse, for ones that are under the covers, they're the same, but you don't know. They resell, effectively. It's a website's package and it gets very, very hard to know who to reach. They're unresponsive, because they've sort of outsourced their website, really. So there's not always a person you can reach out to. But in the meantime, everybody's going to complain, so they'll lie. And those are the sites really. Those sites are going to be included every time. You know what I mean?The things that we estimate usage on are estimated from looking at the HP requests to lots and lots and lots of websites. And then it's extrapolated from there. But the set of websites is which ones are popularly loaded. And in the grand scheme of things, our websites are not destinations.

So it's when I thought about the title of this post: Webcompat Outreach, Mon Amour. Last time, I used that reference, it put me in hot waters, because the person, reading this in a comment, thought I was literal and actually calling her "Mon Amour", while I was making a reference to Hiroshima Mon Amour, a movie by Alain Resnais, and written by Marguerite Duras. Culture differences as mentioned earlier. This poetic movie is subtly revealing our tensions at a global and personal level.

Hence webcompat outreach where the simple minimal code mistakes or choices affects a large number of people. Each decisions we make have consequences on the balance of the ecosystem. We pour love into our art craft and still be constrained by the machinery of the administration.

I have written about outreach multiple times. You do not need to work for a big company to be able to contact a website, and every invidual can help by communicating clearly to people handling the website presenting issues. This is not an impossible task. It just takes patience, courage and resilience.

In what do you need to do before doing outreach, my last section, mentioned all the reasons why the outreach might fail. There are techniques to try to find people online and to track down who to contact. On the webcompat.com website, I had written about different techniques to find a way to reach the right person and the attitudes you need to have:

Be tactful: People we are trying to reach have their own set of constraints, bosses, economic choices etc. "Your web site is bad" will not lead anywhere, except NOT getting the site fixed.

Be humble: We are no better, we also make mistakes in practice. Our own recommendations can become outdated as technical or economic circumstances change.

Let it go: Sometimes outreach just doesn't work. The person at the end of the other line may say "no" or worse, may not answer. It can be very frustrating. It's okay. Accept it and move on.

Be passionate: The passion is in being able to find the right contact in a company without harassing them. Every effort helps.

Share with consideration: Share any contact you attempted or made in the issue comments section. It helps everyone to know the status so they can pitch in or not repeat work. That said - be careful to not disclose private information such as names and emails. You may simply say: "I contacted someone at $COMPANY", "Someone from $COMPANY said this…"

Otsukare!

Web Inspector Search Regex

2023-05-09T10:20:00+09:00

Finding the right keyword in a search among thousand of lines of CSS, JavaScript, HTML code can be dreadful. There are solutions.

I was searching for navigator.userAgent on the NYTimes website. All developer tools have search features. In Safari Web Inspector, Command + Shift + F will start the search tab.

The matched results for userAgent are userAgent but also:

isInWebViewByUserAgent
userAgentData
getUserAgent
userAgentIndicatesApp
UserAgentClientHints

I wanted to be able to reduce the search space. Let's try regex.

So I searched for

\.userAgent to match only the strings starting with a dot. We can't match only navigator.userAgent because someone might have made a variable of it. But this is not enough. I also wanted to remove other references to an object with a trailing names, by avoiding any additional ASCII characters.

\.userAgent[^a-zA-Z]+

That's it.

To access this feature you need to go to Settings in Web Inspector, then General, then check Regular Expression in the search section.

Otsukare!

Blade Runner 2023

2023-02-03T16:30:00+09:00

Webcompat engineers will never be over their craft. I've seen things you people wouldn't believe. Large websites broken off the shoulder of developer tools. I watched Compat-beams glitter in the dark near the Interoperability Gate. All those moments will be lost in time, like tears in rain. Time to die.

In other news: Pushing Interop Forward in 2023

Now we are pleased to announce this year’s Interop 2023 project! Once again, we are joining with Bocoup, Google, Igalia, Microsoft, and Mozilla to move the interoperability of the web forward.

Otsukare!

Quirks, Site Interventions And Fixing Websites

2023-01-16T23:11:00+09:00

Jelmer recently asked : "What is Site Specific Hacks?" in the context of the Web Inspector.

Safari Technical Preview 161 shows a new button to be able to activate or deactivate Site Specific Hacks. But what are these?

Site Specific Hacks?

Site Specific Hacks are pieces of WebKit code (called Quirks internally) to change the behavior of the browser in order to repair for the user a broken behavior from a website.

When a site has a broken behavior and is then not usable by someone in a browser, there are a couple of choices:

If the broken behavior is wide spread across the Web, and some browsers work with it, the standard specification and the implementation need to be changed.
If the broken behavior is local to one or a small number of websites, there are two non-exclusive options
- Outreach
- Quirk (WebKit), Site Intervention (Gecko), Patch (Presto)

Outreach improves the Web, but it is costly in time and effort. Often it's very hard to reach the right person, and it doesn't lead necessary to the expected result. Websites have also their own business priorities.

A site specific hack or a quirk in WebKit lingo means a fix to help the browser cope with a way of coding of the Website which is failing in a specific context. They are definitely bandaid and not a strategy of development. They should be really here to give the possibility for someone using a browser to have a good and fluid experience. Ideally, outreach would be done in parallel and we would be able to remove the site specific hack after a while.

A Recent Example : FlightAware Webapp

I recently removed a quirk in WebKit, which was put in place in the past to solve an issue.

The bug was manifesting for a WebView on iOS applications with devices where window.devicePixelRatio is 3.

with this function

if (
(i && i.canvas.style.transform === e
    ? ((this.container = t),
    (this.context = i),
    (this.containerReused = !0))
    : this.containerReused &&
    ((this.container = null),
    (this.context = null),
    (this.containerReused = !1)),
!this.container)
) {
(n = document.createElement("div")).className = o;
var a = n.style;
(a.position = "absolute"), (a.width = "100%"), (a.height = "100%");
var s = (i = li()).canvas;
n.appendChild(s),
    ((a = s.style).position = "absolute"),
    (a.left = "0"),
    (a.transformOrigin = "top left"),
    (this.container = n),
    (this.context = i);
}

which is comparing the equivalence of two strings: i.canvas.style.transform with the value

(matrix(0.333333, 0, 0, 0.333333, 0, 0)

and e with the value

(matrix(0.3333333333333333, 0, 0, 0.3333333333333333, 0, 0)

The matrix string was computed by:

function Je(t) {
    return "matrix(" + t.join(", ") + ")"
}

So these two string clearly are different, then the code above was never executing.

in CSSOM specification for serialization, it is mentionned:

<number>

A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using "." to separate decimals (if any), rounding the value if necessary to not produce more than 6 decimals, preceded by "-" (U+002D) if it is negative.

It was not always like this, in the past. The specification got changed at a point the implementations changed, and the issue surfaced once WebKit became compliant with the specification.

The old code was like this:

e.prototype.renderFrame = function (t, e) {
  var r = t.pixelRatio,
    n = t.layerStatesArray[t.layerIndex];
  !(function (t, e, r) {
    We(t, e, 0, 0, r, 0, 0);
  })(this.pixelTransform, 1 / r, 1 / r),
    qe(this.inversePixelTransform, this.pixelTransform);
  var i = Je(this.pixelTransform);
  this.useContainer(e, i, n.opacity);

// cut for brevity

}

Specifically this line could be fixed like this.

  })(this.pixelTransform, (1/r).toFixed(6), (1/r).toFixed(6) ),

That would probably help a lot. Note that Firefox, and probably chrome may have had the same issue on devices where window.devicePixelRatio is 3.

Outreach worked and they changed the code, but in the meantime the quirk was here to help people have a good user experience.

Why Deactivating A Quirk In The Web Inspector?

Why does the Web Inspector give the possibility to deactivate the site specific hacks aka Quirks?

Web developers for the impacted websites need to know if their code fix solve the current. So it's necessary for them to be able to understand what would be the behavior of the browser without the quirk.
Browser implementers and QA need to know if a quirk is still needed for a specific website. Deactivating them gives a quick way to tests if the quirk needs to be removed.

Could You Help WebKit Having Less Quirks?

The main list of Quirks is visible in the source code of WebKit. If you are part of a site for which WebKit had to create a quirk, do not hesitate to contact me on GitHub or by mail or on mastodon, and we could find a solution together to remove the Quirk in question.

Otsukare!

"Thousand" Values of CSS

2022-10-25T12:00:00+09:00

W3C TPAC 2022 in Vancouver is over. It was strange to meet after these 3 years away. There would be a lot more to say about this. During the CSS WG meetings, participants are talking about all kind of CSS values. It's quickly confusing.

The processing order is explained in details in the Cascading and Inheritance Level 5

Actual Value

There is not really a definition for the actual value.

A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the font-size-adjust property. The actual value is the used value after any such adjustments have been made.

in 4.6. Actual Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022

if I had to rewrite this, I would probably say:

The actual value is the used value after any adjustments made depending for the computing environment context.

Think for example, about rounding adjustments when drawing on a screen for a certain resolution.

Used Value

The used value is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document.

in 4.5. Used Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022

Let's reuse the example of the specification.

For example, a declaration of width: auto can’t be resolved into a length without knowing the layout of the element’s ancestors, so the computed value is auto, while the used value is an absolute length, such as 100px.

Computed Value

The computed value is the result of resolving the specified value as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for inheritance.

in 4.4. Computed Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022

For example, when we specify the font-size of a paragraph, when the default font-size of the document is 16px.

p {font-size: 2em;}

The computed value will be 32px.

🚨 window.getComputedStyle(elt) doesn't return systematically the computed value. It returns the resolved value (see below)

  <p style="width:auto;">confusing?</p>
</div>

const para = document.querySelector('p');
const usedValue = window.getComputedStyle(para).width;

The computed value will be auto, but the the resolved value will be the current width of the parent element.

Specified Value

The specified value is the value of a given property that the style sheet authors intended for that element. It is the result of putting the cascaded value through the defaulting processes, guaranteeing that a specified value exists for every property on every element.

in 4.3. Specified Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022

<p class="a">falls</p>
<p>and streams</p>

with

p {color: green;}
p.a {color: red;}

To extract the specified value

document.styleSheets[0].cssRules[1].style.getPropertyValue('color')

will return red.

If you need access to the full declaration, use cssRule.cssText

document.styleSheets[0].cssRules[1].cssText

will return p.a { color: red; }

To not be confused with

document.querySelector('.a').style.cssText

which will return an empty string, because there is no style attribute on the element.

Cascaded Value

The cascaded value represents the result of the cascade: it is the declared value that wins the cascade (is sorted first in the output of the cascade). If the output of the cascade is an empty list, there is no cascaded value.

in 4.2. Cascaded Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022

<p class="a">falls</p>
<p>and streams</p>

with

p {color: green;}
p.a {color: red;}

The cascaded value for <p class="a"> is red. Note that the used value will be rgb(255, 0, 0).

Declared Value

Each property declaration applied to an element contributes a declared value for that property associated with the element.

in 4.1. Declared Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022

Initial Value

Each property has an initial value defined in the property’s definition table. If the property is not an inherited property and the cascade does not result in a value then the specified value of the property is its initial value.

in 7.1 Initial Values, CSS Cascading and Inheritance Level 5, Editor’s Draft, 21 October 2022

For example, the initial value on background-color is transparent. This is the color that you can find in the default CSS.

Resolved Value

This time, we changed specification.

getComputedStyle() was historically defined to return the "computed value" of an element or pseudo-element. However, the concept of "computed value" changed between revisions of CSS while the implementation of getComputedStyle() had to remain the same for compatibility with deployed scripts. To address this issue this specification introduces the concept of a resolved value.

in 9. Resolved Values, CSS Object Model (CSSOM), Editor’s Draft, 18 October 2022

The resolved value is either the computed value or the used value. This is dependent of each property.

Relative value

This is not really defined, but this is mentioned in computed value explanations.

A specified value can be either absolute (i.e., not relative to another value, as in red or 2mm) or relative (i.e., relative to another value, as in auto, 2em). Computing a relative value generally absolutizes it.

in the example 12 of the section about computed Value.

For example anything such as em, percentages, relative URLs, etc.

Absolute Value

Not defined but the term is used.The absolute value is a value which has no dependency on the environment, such as red or 3px.

If I have forgotten some. Let me know.

Otsukare!

Filter your mail in a dated space server side with Sieve

2022-06-20T15:15:00+09:00

When it comes to sort out your emails, there are many strategies. Since I have been working at W3C, I'm a fan of dated spaces. I apply this strategy to my emails using Sieve.

Dated Space?

A dated space is a way to organize the information by date folders. Here is an example on my folders.

and here the same type of organization for mails.

Why would you do that?

It creates a unique space. The arrow time is irreversible so there is no issue with creating new folders.
It limits the number of items by folders. When a folder has too many items, it becomes harder to find what you need.
It is actually helpful, because our memory has a lot of anchors in time and we can find easily stuff by remembering when we created it. (a location-based could be an interesting experiment and has useful applications in some circumstances such as photos for example, but that's for another blog post.)
OS search engines: Smart folders based on keywords, types, etc. will make it easier to find stuff. And the files can now belong in multiple contexts. Everything everywhere all at once.

Dated Space For Mail With Sieve

Sieve is a language for filtering e-mail messages. It resides on the server side. So it requires that your mail provider accepts that you can manage sieve rules for your own mail.

I filter all my incoming mails indifferently of their nature to a dated space. Everything is mixed. And I restructure my emails folders with smart mailboxes. Then I can suppress folders which are not valid anymore, create new ones, all of this without touching any emails.

Sieve Script

require ["fileinto", "date", "mailbox", "variables"];
# filter emails based on the date and move them to a folder.
# mail from June 2022, will be saved into /2022/06
# set values for month and year
if currentdate :matches "year" "*" { set "year" "${1}"; };
if currentdate :matches "month" "*" { set "month" "${1}"; };
# mv the message into the right mail folder
fileinto :create "${year}/${month}";
stop;

It's a very simple script and works like a charm. Sieve is a very powerful language. It's possible to do all kind of classifications.

Oh… and yes… my Inbox is obviously by the nature of the script always… 0.

Otsukare!

Get browsers version number on macOS (zsh)

2022-06-10T07:00:00+09:00

I'm not sure why I had not written this before, but it kind of hit me when doing testing this week, that I could optimize a bit more my time.

This is a shell (zsh) script and macOS only. It reads the version information of a list of browsers and spills them out in a nice and ready to be copied and pasted in a bug report.

#!/bin/zsh

APP_PATH="/Applications/"
INFO_PATH=".app/Contents/Info.plist"
browsers=("Safari Technology Preview" "Firefox Nightly" "Google Chrome Canary" "Safari" "Firefox" "Google Chrome" "Microsoft Edge Canary")

for browser_name in ${(@k)browsers}; do
  full_path="${APP_PATH}${browser_name}${INFO_PATH}" ;
  if test -f "$full_path"; then
    browser_version=$(defaults read "$full_path" CFBundleShortVersionString);
    echo "${browser_name} ${browser_version}";
  fi
done

What it looks like once rendered. I need to update a couple of things.

Safari Technology Preview 15.4
Firefox Nightly 103.0a1
Safari 15.5
Firefox 99.0
Microsoft Edge Canary 104.0.1285.0

Otsukare!

How to make « cidre » of Normandy

2022-05-16T21:00:00+09:00

While I'm living in Japan, I'm from the Normandy region in France. That's me as a child helping my grand father in an orchard.

This is a region which is traditionally known for cows and dairy products (milk, butter, cheese like Camembert, Pont-L'evêque, Livarot, Neufchâtel, etc.) and also a region which led to the production of cidre (French only). The origin is not that clear but probably, people from Normandy have started to make « cidre » in the 12th century. Some competing stories have been developed about the origin. But people were growing apples for a long time already and probably were fermenting them. And a craft emerged.

The Web is also rich of its individual crafts, developed along the way. Some techniques have been lost, some are thriving. A long series of errors and trials has been essential in perfecting the art of making Websites.

Fast forward a couple of centuries, and here an image on my great grand father, René. He is collecting the apples in a big bag from his field to prepare « cidre ».

The name of the apples is a long poetic list:

Blanc Mollet, Girard, Cimetière de Blangy, Argile nouvelle, Fréquin rouge, Gros matois rouge, Bon Henri, Médaille d'or, Petit amer, Binet rouge, Bouquet, Joly rouge, Longue, Bedan, Bouteille, Moulin à vent, Grise Dieppois, Gilet rouge, Doux Veret (petit), Rouge Bruyère, Reine des Pommes, Doux-Evêque précoce, Marin Onfroy, etc.

Each of them have their own qualities: sweetness, acidity, taste, … Once we have a good mix, we need to wash them carefully and then put them in the grinder.

My grand father, Jean, working at the grinder and we can see in the background the press in wood.

Once the apples have been grinded, we need to let them with the juice exposed to the air for around 8 to 12 hours in a deep container covered by a cloth. The oxydation work will start. The must will get a better color, will be sweeter. The yeast will develop more rapidly. Containers must be as clean as possible.

Then will start the work with the press.

The must is layered in 15 to 20 centimeters high layers, separated by layers of straws that will drain the juice.

Once the juice has been drawn, it is put in big barrels where the fermentation process starts. After a while, the juice will be put in bottle. My grand-father was used to go in the cave and to turn the bottles according to the moon phases. He had 3 types of « cidre » in his cave: Very sweet, rough, and something very rough that was basically impossible to drink. The colors were on the bottles: red, grey and blue, a simple spot of paint.

These techniques are getting lost with the new generations and the industrializations. I wish I had spent more time with him for having a better understanding of the craft.

Now, I probably have a better understanding of the Web than the process of making « cidre ». It's probably why today is my first day working for Apple on the WebKit project to continue my journey in making the Web awesome for everyone: Web Compatibility, standards and interoperability.

Engravings coming from Le cidre by Labounoux and Touchard

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Mozilla, Bye!

2022-05-04T21:00:00+09:00

This year, 2022, May the 4th was my last day at Mozilla.

Alors, l'arbre et son rêveur, ensemble, s'ordonnent, grandissent. Jamais l'arbre, dans le monde du songe, ne s'établit comme un être achevé. — Poétique de l'espace, Gaston Bachelard

in English

Then, together, the tree and its dreamer, take their places, grow tall. Never, in the dream world, does a tree appear as a completed being. — The poetics of space, Gaston Bachelard

I started on July 2, 2013 on a 6 months contract at Mozilla to work on Firefox OS on Web Compatibility issues. I was living in Montréal, Canada at the time.

Lawrence Mandel (now at Shopify) trusted and hired me. His first words on our Web Compatibility work at Mozilla were aligned with my ideas and stance for the open Web.

We are here to make the Web more open, not only for making the Web usable on Firefox products. — Lawrence Mandel

After these 6 months, I moved to Japan and I'm still living there. I'm currently in Tokyo. On the span of 8 years and 10 months, I focused my energy on this mission inside the Web Compatibility.

A person should be able to use the Web with any devices and any browsers.

I was not alone. The success of a project never relies on a single individual, but a full team of people dedicated to make this mission a reality. At the very beginning, we were three coming from Opera Software, we all had an experience on Web compatibility issues: Mike Taylor, Hallvord R.M. Steen and me. Then Adam Stevenson joined. None of the initial team is still at Mozilla. I miss working with Eric Tsai too. Some people (open contributors) have also participated to the project like Abdul Rauf, Alexa Roman, Kate Manning, Guillaume Demesy, Reinhart Previano.

webcompat.com was setup on purpose without Mozilla branding to invite the participation of all browser implementers (Apple, Google, Microsoft, Opera, etc.) on solving issues resulting from website mistakes or interoperability issues. Mozilla put the main effort into it and in return webcompat.com helped Mozilla and Firefox Core team to fix a lot of issues.

The current Web Compatibility team is composed of Dennis Schubert (Germany), James Graham (UK), Ksenia Berezina (Canada), Oana Arbuzov (Romania), Raul Bucata (Romania) and Thomas Wisniewski (Canada). This team was distributed across three continents (two since I left), working around the clock to help solving Web compatibility issues. All the work done was in public, shared with others, written down and tracked in the open. This leveraged autonomy and responsibility from everyone in the team. Apart of a lack of a resource, my departure doesn't put in peril the work of the team. Even as I became the team manager 18 months ago, I was not a gatekeeper.

There is the Webcompat team… then there is the amazing group of Core Engineers who have the open Web deep in their heart. Many left Mozilla, but some of them are still there and they were instrumental in solving interoperability issues.

Emilio Cobos Álvarez, Daniel Holbert, Jonathan Kew, Masayuki Nakano, Makoto Kato, Brian Birtles, Boris Zbarsky, Hiroyuki Hikezoe, Botond Ballo, Olli Pettay, Henri Sivonen, Anne van Kesteren, Ting-Yu Lin, Cameron McCormack. These lists are dangerous, I keep forgetting people.

I could talk about all the things which have been solved around text input, CSS flexbox, JavaScript features, DOM and SVG, … but this starts to be long.

And finally the diagnosis ability of the Webcompat team would be nothing without the dedication of the devtools and performance teams. They helped us to work better, they develop amazing tools which are useful for the webcompat team and the web developers. They always care about what we do. Nicolas Chevobbe, Julien Wajsberg, Daisuke Akatsuka, Jan Odvarko (Honza), and many others …

But as Bachelard said above:

Never, in the dream world, does a tree appear as a completed being.

The new chapter is starting on May 16, 2022. More information on that later apart of the lunar eclipse.

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Encyclopedia Of Broken UserAgent String Detections

2022-01-14T17:17:00+09:00

Did you detect the right user agent string?

This is not a comprehensive encyclopedia, but these are patterns we have met in the past for identifying user agent strings which are broken or future fail.

Do not use these ! and if your code is using one form of these, please change it. Tell me if you found new ones.

Comparing Strings Instead Of Numbers

This was explained in details in Slack is optimized for Firefox version 520

The version number of the userAgent is extracted as a string, not an integer.

var browser_version = "100";
var support_min_version = "90";
if (browser_version < support_min_version) {
  console.log("too old");
} else {
  console.log("supported");
}
// too old instead of supported as a result

A better pattern here is to use integer

var browser_version = parseInt("100", 10) // the "100" as a string came from a detection early on
var support_min_version = 90; // integer not a string;
if (browser_version < support_min_version) {
  console.log("too old");
} else {
  console.log("supported");
}
// goes to supported as expected

Substring Slicing According To Position

The assumption here is that the substring representing the number is two characters after the slash. The 8 is for Firefox/

ua = "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0"
start = ua.indexOf('Firefox')
// 67
version = ua.substring(start + 8, start + 10)
// "10"

A better pattern for this one is:

ua = "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0"
start = ua.indexOf('Firefox')
// 67
ua.substring(start + 'Firefox'.length + 1)
// "100.0"
parseFloat(ua.substring(start + 'Firefox'.length + 1))
// 100

Regex Matching Exactly Two Digits

This is a fairly common mistake, most of the detection algorithm have been fixed when browsers switched their versions from one digit to two digits, but there is still code out there relying on fixed lengths.

const ua_string = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:91.0) Gecko/20100101 Firefox/91.0";
const ua_100 = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:100.0) Gecko/20100101 Firefox/100.0";
ua_string.match(/Firefox\/(\d\d)/); //  ["Firefox/91", "91"]
ua_string.match(/Firefox\/(\d{2})/); // ["Firefox/91", "91"]
ua_string.match(/Firefox\/(\d\d)\./); //  ["Firefox/91.", "91"]
ua_100.match(/Firefox\/(\d\d)/); //  ["Firefox/10", "10"]
ua_100.match(/Firefox\/(\d{2})/); // ["Firefox/10", "10"]
ua_100.match(/Firefox\/(\d\d)\./); //  null

A better pattern would be

ua_string.match(/Firefox\/(\d+)/); //  ["Firefox/91", "91"]
ua_string.match(/Firefox\/(\d+)/); //  ["Firefox/100", "100"]

Detecting Firefox on iOS as Android.

Many sites have a grid for the minimum version number supported for each browsers. The current Firefox User Agent string on iOS has this pattern.

Mozilla/5.0 (iPhone; CPU OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/33.0 Mobile/15E148 Safari/605.1.15

Notice that FxiOS/33.0 means Firefox on iOS version 33. Web developers often used a up to date library that will return something like:

{
  "ua": "Mozilla/5.0 (iPhone; CPU OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/33.0 Mobile/15E148 Safari/605.1.15",
  "browser": {
    "name": "Firefox",
    "version": "33.0",
    "major": "33"
  },
  "engine": {
    "name": "WebKit",
    "version": "605.1.15"
  },
  "os": {
    "name": "iOS",
    "version": "14.4.2"
  },
  "device": {
    "vendor": "Apple",
    "model": "iPhone",
    "type": "mobile"
  },
  "cpu": {},
  "gpu": {}
}

So far so good. The issue starts when the site says: "Oh. It's Firefox on Mobile, so it means this is Android. We support Firefox on Android starting Firefox/78". Then they block the access to the full site, or the video, or asking the user to upgrade their browsers while they are on the latest version of Firefox iOS.

A better pattern is to detect the OS and/or the engine this browser is working on, and adjust your support matrix. An even better pattern is to have the site handling graceful degradation whichever the version of the browser.

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Browser regression and tools

2021-11-17T09:31:00+09:00

Sometimes a new release of a nightly version of a browser creates what we call a regression. How do we find out what exactly broke the code?

What is a regression?

In simplified terms, there is a regression when a code used to work and is not working properly after a specific release. For websites, a webpage would stop having the right behavior after updating to a new version of the browser.

Something was working with commit 𝑛 of the browser and it stopped working with commit 𝑛+1.

How do we try to catch regressions before production release?

All browsers have different versions. The production release is the one that most people are using. The one which is advertised for people to download on websites and stores. But there are also beta versions and nightly versions.

The nightly version is a fresh working build with the latest modifications of the day. It's not considered reliable for your main usage. Even if browser implementers try hard to keep them stable, they may break. They may even damage your browser profile. Use them only if you understand the consequences.

Chrome Canary (Blink) - No nightly release notes?
Firefox Nightly (Gecko) - Release Notes
Safari Nightly (WebKit) - Release Notes only for Safari Tech Preview

How do we find out the exact commit which has broken the browser?

You are now using commit 𝑛+𝑚 version which is broken. You want to find out the 𝑛+1 version which has broken the code.

You start bisecting the code. Let's say this is happening in between version 10 and 20 of the code.

Verify this is working with 10
Check this is not working with 20.
Split the group in two. Pick up 15. Does the bug reproduce? Yes. So the issue is in between 10 and 15 No. So the issue is in between 16 and 20
Take the new range and repeat and rinse, until you get a unique version.

That can become time consuming. There are tools to help with this task.The tool will download the nightly builds being tested and help figure out which specific commit in the code has broken the code.

Bisection tools

Chrome
Firefox. Probably the easiest to use of the 3. Well documented and even a version with a GUI
Safari

Your turn! When you find out a broken Web page next time (when previously, it was working), follow these steps:

open a bug
Run a regression tool
give the precise commit where it might have happened.

This will speed up a lot the potential fix.

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Webcompat issues and the bots!

2021-10-26T21:43:00+09:00

Some ideas and contexts around auto-discovering webcompat issues.

Recently Brian Grinstead asked me:

Are you familiar with this?

which I answered: Yes since 2018. And I remembered the challenges and so probably it's worth to do a bit of history on identifying webcompat issues. The objectives being often:

How to massively test websites and their different renderings across browsers?
How to reduce human time spent on manually testing the site?
Can we discover the type of issues?

I have been doing webcompat work since October 2010 (when I started working at Opera Software with the amazing Opera devrel team). There's no perfect technique, but there are a couple of things you can try.

Screenshots Comparison

We often associate webcompat issues with sites which are not looking the same in two different browsers. It's a simplistic approximation but can help in some type of webcompat issues.

Mobile versus desktop

Some websites will adjust their content depending on the user agent strings. They will either deliver a specific content, or redirect to a domain which is friendly for mobile or desktop. This can be directly detected with the homepage of the website. You could quickly identify if a site sends the same design/content to Firefox Android, Safari iOS or a blink browser on Android. This is less and less meaningful, as many websites in the last ten years have switched to responsive design where the content automatically adjusts depending on the size of the screen.
Rendering Issues

This is slightly more complex. There might be multiple issues with regards to rendering. I'll talk about the caveats later. This could potentially identify a wrong color, a wrong position of the boxes, a difference in details such as scrollbars or boxes radius, etc.

With a simple URLs list and using the webdriver API, it is possible to fetch websites for Gecko, WebKit and Blink and take a screenshot for each of them. It becomes very easy to test the top 1000 websites in a specific locale. You can discriminate visually quickly the screenshots which are different.

But we said we wanted to be more effective. We can use a bit of maths for this. Let's make 𝑠¹ and 𝑠², the screenshots we want to compare, then we can use a simple library like difflib in python to compute the similarity of the images.

def diff_ratio(s1, s2):
    s = difflib.SequenceMatcher(None, s1, s2)
    return s.quick_ratio()

Then it becomes easy to define the diff_ratio which is acceptable for the series of tests we run. After fixing a threshold this will identify the sites with potential issues. It will not identify the type of issues. It will not provide a diagnosis.

And the method has some limitations which are interesting to understand if we want to be effective in pre-filtering the issues.

Some Limitations Around Screenshots Comparison

The screenshots might be different but that doesn't necessary mean there is a webcompat issue. Here some cases:

Anti-Tracking Mechanisms

Every browser has its own strategy with regards to tracking protection. These are browsers breaking websites on purpose to reduce users fingerprinting. Hence a screenshot for the same site might create different results.
A/B Testing

Some sites test A/B scenario for a more profitable user experience. They will send two different versions of the site to different users. If one browser is one pool and the other browser in another pool at the moment of the tests, the screenshots will be different.
Android/iOS banner for apps

Testing the rendering in between a browser on iOS and a browser on Android will create different results, as the banner for apps will display and link to different stores.
Dynamic Content (News sites/Social Network)

There's a big category of websites where the content changes or offers rotations of the content in between each reload. Caroussels, ads, news article, user posts, etc. are all likely to modify the screenshots in between two queries in the same browser.
Tier 1

Some sites provide a different experience to different browsers. This one is more subtle to deal with. They rely more on a business decision. Compare for example the results of Google search on Firefox Android and Google Chrome. Google Chrome definitely receives the Tier 1. Other browsers receive different content. The diagnosis here is not technical, but business priorities.

Quick summary about autowebcompat.

autowebcompat, that Brian was mentionning, is a nice project from Marco Castelluccio to attempt to auto-detect web compatibility issues. Basically the code tries to learn if screenshots for a similar set of interactions in two different browsers create the same end result. The silverlining being that if there is a difference, there's probably something to better understand. The project used the issues already reported on webcompat.com. In that sense it's already biaised by the fact that the issues have already been identified as being different. But it make possible to train a model on learning on what creates a webcompat issue.

Training A Bot To Identify Valid Issues

Recently, Ksenia (Mozilla Webcompat team) adjusted BugBug to make it work on GitHub. It helped the webcompat team to move away from the old ML classifier to the BugBug infrastructure.

It identifies already reported issues and closes the ones which have similar features than previous invalid bugs. Invalid here means not a webcompat issue. Some sites are broken in all browsers, that doesn't create a webcompat issue.

Compatipede, Another Project For Auto Webcompat

Compatipede is a project which predates autowebcompat (started in October 2013!) with the intent to identify more parameters and extend the scope of tests.

Equal redirects
CSS style compatibility
Source code compatibility
Other custom tests

This was quite interesting as it was trying to explore the unseen issues and avoid the pitfalls of screenshots.

It had also a modular architecture providing a system of custom plugins to run probes on the payloads sent by the website.

SiteCompTester

With the same spirit than Compatipede, SiteCompTester was an extension which made possible to target some type of issues and would surface bugs associated with a specific list of known issues. This makes it easier to diagnose a website.

Template Extraction Mining

The variability of content may be avoided by using a mechanism such as templatemaker. This is a clever little tool which extracts the common features of a series of text and extract a template.

So let's say for a news website, we could imagine running template maker with one browser for a couple of days and extract its templates. And do the same in parallel with another browser. Then we would compare the templates instead of comparing two unique rendering of the websites. That would probably makes it possible to have a better understanding of certain features variability. This could be applied to markup, to JavaScript, to HTTP headers.

Webcompat Auto-Detection Caveats

The issue with auto-detection of webcompat issues is that we don't know what is broken before someone experience it in real life. The level of interactions it requires is really delicate.

And it's why the people working on triaging and diagnosis in the Mozilla webcompat team are top-notch. * Oana and Raul are triaging the issues after poor description by most users. * Ksenia, Dennis and Thomas are diagnosing relentlessly minified obfuscated code to decipher what is breaking in the current site.

Auto-Discovery Of Webcompat

The auto-discovery may work in very specific use cases when we know what we try to identify as an issue. Let's say we already identify a pattern in one bug and we want to understand to which extend this bug is affecting other websites. Then using a framework going through the sites and searching for this pattern might reveal potential webcompat issues.

Targeted surveys are the key to understand the priority of some issues.

Otsukare!

When iOS will allow other browsers

2021-09-27T09:20:00+09:00

User agent sniffing is doomed to fail. It has this thick layer of opacity and logic, where you are never sure that you will really get in the end.

This happens all the time and will happen again. It's often not only technical, but business related and just human. But let's focus on the detection of Firefox on iOS. Currently, on iOS, every browsers are using the same rendering engine. The one which is mandated by Apple. Be Chrome, Firefox, etc, they all use WKWebView.

One of the patterns of user agent detections goes like this:

Which browsers? Firefox, Chrome, Safari, etc.
Which device type? Mobile, Desktop, Tablet
Which browser version?

You have 30s to guess what is missing in this scenario?

⁞

Yes, the OS. Is it iOS or Android? The current logic for some developers is that

Safari + mobile = iOS
Firefox + mobile = Android

As of today, Firefox

on iOS is version 37
on Android is version 94

So if the site has minimum version support grid

function l() {
  var t = window.navigator.userAgent,
    e = {
      action: "none",
    },
    n = c.warn,
    o = c.block;
  Object.keys(s).forEach(function (n) {
    t.match(n) && (e = c[s[n]]);
  });
  var r = a.detect(t);
  return (r.msie && r.version <= 11) ||
    (r.safari && r.version <= 8) ||
    (r.firefox && r.version <= 49)
    ? o
    : (r.chrome && r.version <= 21) ||
      (r.firefox && r.version <= 26 && !r.mobile && !r.tablet) ||
      (r.safari && r.version <= 4 && r.mobile) ||
      (r.safari && r.version <= 6) ||
      (r.android && r.version <= 4)
    ? n
    : e;
}

Here the site sees Firefox… so it must be Android, so it must be Gecko. They have set their minimum support for version 49. Firefox is then considered outdated. Safari minimum version on their grid is 8. So Firefox iOS (WebKitView) would have no issues!

Fast Forward To The Future.

When Apple authorizes different rendering engines on iOS (yes, I'm on the optimistic side, because I'm patient), I already foresee a huge webcompat issue. The web developers (who are currently right) will infer in some ways that Firefox on iOS can only be WebKitWebView. So the day Gecko is authorized on iOS, we can expect more breakages and ironically some of the webcompat bugs, we currently have will go away.

Today is my Mozilla 8 years anniversary

2021-06-21T18:40:00+09:00

Eight years ago, I have started working at Mozilla.

Hiring, a long process

In my employment history, I have never tried to spread a large net to try to land a job, except probably for my first real job in 1995. I have always carefully chosen the company I wanted to work for. I probably applied ten times on the course of 10 years before landing a job at Mozilla.

When the Web Compatibility team was created, I applied to one of the positions available in 2013. In April 2013, from Montreal, I flew to Mountain View for a series of job interviews with different Mozilla employees. Most of the interviews were interesting but I remember one engineer was apparently not happy interviewing me and it didn't go very well. I don't remember who, but it left me with a bitter taste at the time. A couple of days later I was notified that I was not taken for the job. While disappointing, I was not surprised. I usually do not perform well during interviews, specifically when you have to demonstrate knowledge instead of articulating the way you work with knowledge. I find interviews a kind of theater.

But Mozilla came back to me and proposed me a 6 months contract, still in the Mozilla Web Compatibility team but for another role. It was not what I was initially interested by, but why not? It's when I met Lawrence Mandel, who would be my future manager if I landed the job. I liked the contact right away. I got an offer in June 2013. I signed.

Fast forward 8 years, I'm currently the manager of the Web Compatibility team.

Without people, no Web Compatibility!

The Web Compatibility team started with 3 persons: Mike Taylor, Hallvord R. M. Steen and myself and at its peak we were probably 10 persons, depending on how we count. We are currently 7 persons including myself. Talking about my 8 years anniversary doesn't make sense without mentioning the work of the team. My work is insignificant if we don't take the globability of what the team is achieving.

« Et par contre, si je communique à mes hommes l’amour de la marche sur la mer, et que chacun d’eux soit ainsi en pente à cause d’un poids dans le cœur, alors tu les verras bientôt se diversifier selon leurs mille qualités particulières. Celui-là tissera des toiles, l’autre dans la forêt par l’éclair de sa hache couchera l’arbre. L’autre, encore, forgera des clous, et il en sera quelque part qui observeront les étoiles afin d’apprendre à gouverner. Et tous cependant ne seront qu’un. Créer le navire ce n’est point tisser les toiles, forger les clous, lire les astres, mais bien donner le goût de la mer qui est un, et à la lumière duquel il n’est plus rien qui soit contradictoire mais communauté dans l’amour. »

Antoine de Saint-Exupéry. « Citadelle. »

Since the beginning of 2021,

Dennis has drastically reduced the number of old diagnosis that were on top (or at the bottom?) of our pile. He is also now the module owner for Site Interventions, which help Mozilla to hotfix websites. When a site is broken and the outreach is unlikely to be successful, this one of the ways we have to fix the website on the fly so the people can continue to enjoy using troubled websites.

James is the mind and the smooth operator behind Web Platform Tests at Mozilla. He is doing an amazing job at encouraging Mozilla engineers to develop more Web Platform tests. He makes sure that everything is synchronized with other vendors. Web Platform Tests are essential to be able to discover bugs in specifications and differences in implementations. He is also the core person for the work on BiDi at Mozilla. BiDi is another important part of the puzzle of Web Compatibility. Testing manually websites is costly. Webdriver comes here to make it possible for automating the tests of websites functionalities. If the cost is lower, web developers can test their websites in more than one browser and discover and fix their webcompatibility issues before we discover them.

Ksenia is the owner of webcompat.com and webcompat ML bot. The ML bot helps us to pre-filter the bug and determine if it's a valid webcompat issue. We receive around 700 and 800 bugs a week and that's a lot for our small team. We would not be able to manage without the bot. Tiredlessly she has improved the tools used for minimizing the boring part of the work we do and at the same time, found solutions for helping bug reporters to have a better experience.

Softvision team: Oana and Raul. I have a lot of respect for the people at Softvision helping Mozilla to do the triage of bugs. This task is sisyphean. Every week, 700 to 800 bugs come in. Luckily enough we have a bot for pre-triage, but when bugs are evaluated being valid. They decipher the old runes of bug reports to understand what the bug reporter suffered and they make it something more compelling for people who will be diagnosing. Previously, we had Ciprian and Sergiu.

Thomas is the architect of the Site Interventions. He is also making sure that sites continue to work when tracking protection is blocking things. He has implemented lately SmartBlock. Thomas is this giant person who can touch everything in the Webcompat team, but still super caregiver when we do not understand something. He explains what he does and this is gold. It means that people can grow, evolve and be a better part of themselves.

Contributors And Interns

The project would be nothing without the contributors and interns who worked with us on making the site, the tools, the process better:

Abdul, Alexa, Beatriz, Carol, Deepthi, Guillaume, Kate, Mariana, mesha, Reinhart, and more…

Those Who Were

And there are those who have been in the webcompat team and have been participants to its success: Mike, Adam, Eric, Hallvord, Ola. I could write a lot more about it.

« En ce qui concerne donc mon voisin, j’ai observé qu’il n’était point fertile d’examiner de son empire les faits, les états de choses, les institutions, les objets, mais exclusivement les pentes. Car si tu examines mon empire tu t’en iras voir les forgerons et les trouveras forgeant des clous et se passionnant pour les clous et te chantant les cantiques de la clouterie. Puis tu t’en iras voir les bûcherons et tu les trouveras abattant des arbres et se passionnant pour l’abattage d’arbres, et se remplissant d’une intense jubilation à l’heure de la fête du bûcheron, qui est du premier craquement, lorsque la majesté de l’arbre commence de se prosterner. Et si tu vas voir les astronomes, tu les verras se passionnant pour les étoiles et n’écoutant plus que leur silence. Et en effet chacun s’imagine être tel. Maintenant si je te demande : « Que se passe-t-il dans mon empire, que naîtra-t-il demain chez moi ? » tu me diras : « On forgera des clous, on abattra des arbres, on observera les étoiles et il y aura donc des réserves de clous, des réserves de bois et des observations d’étoiles. » Car myope et le nez contre, tu n’as point[…] »

Antoine de Saint-Exupéry. « Citadelle. »

Challenging The Comfort Of My Current Position

When working long enough at a company that you like, it becomes easy to feel comfortable. So every couple of years, I put myself in the position of looking for another job, even eventually having job interviews with some companies. I try to limit these interviews to the strict necessary by carefully selecting the companies I apply to.

I want to be in a position where I have to choose in between staying at Mozilla and discovering a new area with interesting people and interesting areas of work. Sometimes areas that I have probably poor knowledge of. This is slightly tricky because many companies have a tendency to recruit people ready to fit in the machinery instead of people with an ability to work and learn.

So far I have been 8 years at Mozilla, but I want to continue to make Mozilla a choice to stay instead of a place which is comfortable. So I will continue to explore new opportunities as I have always done.

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Browser Wish List - Tabs and bookmarks are the same thing

2021-05-10T11:28:00+09:00

My browser is my like an office room with desk and shelves, where the information is accessible. Information is stacked, accessible, sometimes open and browsable at glance and some deep on the shelves. But how would I want to have access it in the browser.

Currently we bury the information of tabs and bookmarks in a big bind of context without giving any help for managing apart of having to go through the list of pages one by one. No wonder why people feel overwhelmed and try to limit the number of tabs they have opened. Because big numbers rely on external tools (Tree Style Tabs, Sidebery, Containers, etc) which do not go far enough to manage the tabs.

Some contexts

It started with a message from Glandium sharing an article from Joseph Chee Chang with the title: When the Tab Comes Due. Tabs! Love Tabs. Reading the PDF brought some strong nodding.

Tabs should better reflect users’ complex task structures.

One potential design space is to bootstrap such mental model repre-sentations with minimal user effort by identifying their intentionsusing their navigation patterns. For example, a set of tabs openedfrom a search engine query is likely to support the same information needs; or, a set of tabs opened from a top-10 list article arelikely competing options under the same category. Capturing andorganizing tabs using such structures has the potential of betterorienting users and providing better support for task progressionand resumption.

Allow users to externalize their thoughts and synthesize information across tabs.

More directly, a recent survey showed thataround half of their participants (49.4%, N=89) use spreadsheets togather evidence and take notes across multiple online informationsources to compare options (e.g., products or destinations) to helpthem make decisions. However, current browsers treat tabs asindividual silos and provide little support for cross-referencing andcollecting information between webpages. Using external tools,such as word documents and spreadsheets, creates a disconnectin users’ workspace, and can incur high cognitive and interactioncosts when trying to copy and paste information to synthesize themin a separate document

Sketch

The article made me think about tabs and bookmarks, in our browsers UIs, these are separated. Probably it should not be. A bookmark is just a closed context, and a tab is just an opened context. But they are basically the same. The UI to access them is completely different, the information to filter them is also totally different. Why?

So I was thinking how could both world be mixed together.

Make the bookmarks more visual though thumbnails.
Make the tabs manageable through trees and categories and gives them the concept of dates (created and last opened) and show these dates.
Add on top of this full text search on the full set (or subcategory) of tabs/bookmarks (we need a new name).
- Search "Gardening" for tabs opened in between February 2021 and May 2021.
- Search "Curry" for tabs in my Thailand category
Give the notion of views
- By tree (the sketch below)
- By timeline (Year, month, days). Think photo management software. Sure I opened this tab after this date, during this trip, etc.
- By geolocation (tabs opened when I was at home or in this cafe) Sometimes we memorize the information through the external context we where in.
- By labels or keywords that you may have added.
- By automatic classification of content. Machine Learning is all the rage, why not using the capabilities that OS provides more and more for running Machine learning to classify the content or even embark one.

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Get Ready For Three Digits User Agent Strings

2021-04-20T17:20:00+09:00

In 2022, Firefox and Chrome will reach a version number with three digits: 100. It's time to get ready and extensively test your code, so your code doesn't return null or worse 10 instead of 100.

Some contexts

The browser user agent string is used in many circumstances, on the server side with the User-Agent HTTP header and on the client side with navigator.userAgent. Browsers lie about it. Web apps and websites detection do not cover all cases. So browsers have to modify the user agent string on a site by site case.

Browsers Release Calendar

According to the Firefox release calendar, during the first quarter of 2022 (probably March), Firefox Nightly will reach version 100. It will set Firefox stable release version around May 2022 (if it doesn't change until then).

And Chrome release calendar sets a current date of March 29, 2022.

What Mozilla Webcompat Team is doing?

Dennis Schubert started to test JavaScript Libraries, but this tests only the libraries which are up to date. And we know it, the Web is a legacy machine full of history.

The webcompat team will probably automatically test the top 1000 websites. But this is very rudimentary. It will not cover everything. Sites always break in strange ways.

What Can You Do To Help?

Browse the Web with a `100` UA string

Change the user agent string of your favorite browser. For example, if the string is Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0, change it to be Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:100.0) Gecko/20100101 Firefox/100.0
If you notice something that is breaking because of the UA string, file a report on webcompat. Do not forget to check that it is working with the normal UA string.

Automatic tests for your code

If your web app has a JavaScript Test suite, add a profile with a browser having 100 for its version number and check if it breaks. Test both Firefox and Chrome (mobile and desktop) because the libraries have different code paths depending on the user agent. Watch out for code like:

const ua_string = "Firefox/100.0";
ua_string.match(/Firefox\/(\d\d)/); //  ["Firefox/10", "10"]
ua_string.match(/Firefox\/(\d{2})/); // ["Firefox/10", "10"]
ua_string.match(/Firefox\/(\d\d)\./); //  null

Compare version numbers as integer not string

Compare integer, not string when you have decided to have a minimum version for supporting a browser, because

"80" < "99" // true
"80" < "100" // false
parseInt("80", 10) < parseInt("99", 10) // true
parseInt("80", 10) < parseInt("100", 10) // true

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Maximizing Possible Outcomes In Simple Interfaces

2021-03-29T12:00:00+09:00

Facing a complex system agency, designers (be graphics, software engineers, architects, etc.) will attempt to reduce the complexity by simplifying the interactions with the system. The percentage of interactions with the new design becomes the tool for measuring the efficacy of the new choices.

But what do we measure? Do we measure the success of the design or do we measure that we created only one way to do a task, and funnels a variety and diversity of interactions through the funnel of one way of doing things. We should be wary and careful of what we measure and the complexity of individuals in front of a system.

When we simplify a system of interactions to a certain minimalism, we often trade choices for reductionism. We maximize the simplicity to the point of dumbing everything down. But do we always help? Creativity, emergence of patterns often lie in the hackability of a system. When we reduce the options for someone to use the system in unexpected ways, we remove the possibility for people to own a craft, a skill. We make them serve the system, instead of the system serving them.

We should try to create simple interfaces that maximize the possibility for people to create (creative entropy), being empowered, being autonomous.

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

Working With A Remote Distributed Team (Mozilla Edition)

2021-03-16T17:35:00+09:00

The Mozilla Webcompat team has always been an internationally distributed team from the start (7+ years). I have been working this way for the last 20 years with episodes of in-office life.

Priorities Of Scope

When sending messages to talk about something, always choose the most open forum first.

Why?

It's always easier to restrict a part of a message to a more private discussion. Once a discussion starts in private, making its content available to a larger sphere extends the intimacy, privacy, secrecy. It becomes increasingly harder to know if we can share it more broadly.

Everything you say, write, think might be interesting for someone out there in another Mozilla team, someone in Mozilla contributors community, someone out there in the world. I can't count the number of times I have been happy to learn through people discussing in the open, sharing what they do internally. It's inspiring. It extends your community. It solidifies the existence of your organization.

When the scope is broad, the information becomes more resilient. More people know the information. You probably had to use a publishing system involving the persistence of the information.

Information Broadly Accessible

Give it a URI, so it exists! or in the famous words of Descartes: "URI, ergo sum".

Why?

URI is this thing which starts with http or https that you are currently using to read this content. Once you gave a URI to a piece of content, you access to plenty of features:

You can share through different medium (messages, mails, etc.)
You make the information easily searchable
You make the information more resilient with regards to time. Imagine someone joining your team later on. Or you have left and your email account which was cointaining all the interesting information is gone.

You may want to create a URI persistence policy at the organization level.

Messages How?

Context is everything!

This applies to basically all messaging style (chat, email, etc.)

Why?

If you send a message addressing someone, think about this:

Who? Use the person handle in a shared chat.
What? The topic you would like to discuss with enough context to make it possible for the person to answer. Share URIs to online documents.
When? If there is a deadline, give it. It's a lot easier to reply at the appropriate time and remove the stress on both ends of the message.

note: I have written, a long time ago, a special guide for working with emails in French and it has been translated in English

Mozilla is a distributed community with a lot of different cultures (social, country, education, beliefs) and across all timezones. At Flickr, Heather Champ had a good reminder for the community: "Don't be a creep."

You may (will probably) do terrible blunders with regards to someone else. Address them right away when the person is making a comment about them. And if necessary, apologize in the same context, you made the mistake. When you are on the receiving part of the offensive message, address them with the person who made them right away in private. Seek for clarification and explain how it can have been hurtful. If it repeats, bring it up to the hierarchy ladder and/or follow the community guidelines.

Chat (Matrix, IRC, Slack, …)

Prefer [Public] over [Team channels] over [one to one] messages.
Choose Matrix over Slack.
Reply in threads.

Why?

When sending messages to share things about your work at Mozilla, use matrix over slack. It will be more accessible to the community and it will allow more participation.

That said be mindful. These systems do not have built-in web archives. That's a strength and a weakness. The strength part is that it allows a more casual tone on discussing stuff without realizing that you are saying today could become embarassing in 10 years. The weakness part is that there is valuable work discussions going on sometimes in chat. So if you think a discussion on chat was important enough that it deserves a permanent record, publish it in a more permanent and open space. (Exactly this blog post which started by a discussion on slack about someone inquiring about Team communications at Mozilla.)

Reading Emails

Read Only Emails Sent To You.

Why?

Ah emails… the most loved hating subject. I understand that mail clients can be infuriating, but mails are really an easy task. Probably the issue with emails is not that much the emails themselves, but the way we treat them. Again see my guide for working with emails.

I end up all my working days with all messages marked as read. I don't understand what INBOX 0 means. So here my recipes:

Deactivate mail notifications from all services except if you intent to keep these notifications as archived helping you to work with (example: github issue messages are my offline database that I can search.)
Put all my mail for a month in a monthly folder. This month all my mails are going to /2021/03 mailbox.
Create virtual/smart mailboxes for each context where you need to access the emails. The benefit? The same email is then accessible from different contexts. Quick Tip to make the mailbox more performant, limit it to the last 6 weeks. smart mailboxes are easy to create, easy to destroy with changing contexts. Currently in Mail.app, I have around 50 to 100 smart mailboxes.
Create a virtual mailbox which catches the messages where you are in To: or Cc:. This is your real inbox. You will discover that you do not receive that many emails in fact. This is the thing you should reply to. Mark as read everything else.
Do not read the emails which are not directly addressed to you. This is difficult to understand for many people. But that's the good way of handling the volume. Think about your email as an archive of content which is searchable and the smart mailboxes as filter on what you might be interested in.
Use an online archived mailing-list. Do not send emails to a group of people with giant list of Cc:. This is bad. It encourages top replies to keep context. There is always someone missing who needs to be added later. It doesn't resist time at all. Information belongs to the organization/context you are working on, not the people. You will be leaving one day the organization. New people will join. The information needs to be accessible.

With these, you will greatly reduce your burden. And one last thing, probably which is conter-intuitive. For work, do not use emails on your mobile phone. Mail clients on mobile are not practical. Typing on a virtual keyboard on a small screen for emails is useless. Mails require space.

Meetings Organizations

Meetings are for discussions

Why?

If it's about information sharing, there are many ways of doing it in a better way. Publish a blog post, write it on a wiki, send it to the mailing-list of the context of your information. But do not create a meeting to just have one person talking all the time. Meetings are here for the interactions and picking ideas.

Here some recommendations for good meetings:

Have a regular non mandatory meeting time. What does it mean? The time is blocked, but if there is no agenda, there is no meeting.
Have a published agenda at a regular URI where people can contribute to the agenda. On the Webcompat team, everyone can add an agenda item to our public agenda, even contributors. Try to have the agenda, at least 24h before the time of the meeting.
Have a scribe and a chair. The chair is the person who will be charge of animating the discussion during the meeting. The scribe will be the person taking notes of what is being said. The minutes are being taken live on the system and everyone can see what is being taken, hence can fix them. We rotate scribes and chairs at every meeting.
Publish the meeting minutes online. This is important. it gives a regular URL that you can refer to in the future, that you can revisit or share with someone else in a different context. Webcompat has an archive of all minuted meetings on Mozilla wiki. Example: Minutes of March 2, 2021
Break out big groups. When there is a meeting with a lot of people in one room and a couple of people online, the meeting is unbalanced and the body language (we social beings) take over and people online may become excluded. Separate the big local group in smaller groups or really as individuals so that everyone is like a remote person.
Allow for people to participate once the meeting has finished. There are bug trackers, minutes, mailing-lists, etc. Give a deadline for commenting.

Meeting Times

In a distributed team, the shape of Earth comes to crash into the fixed time reality of a meeting. You will not be able to satisfy everyone, but there are things to avoid the usual grumpiness, frustrations.

If you organize a meeting from the US West Coast time, Fridays are forbidden. It's already Saturday in Asia-Pacific
If you organize a meeting from Asia-Pacific time, Mondays are forbidden. The US West Coast is still on Sunday.
Create a doodle to understand the distribution of time of people who can participate. Some people do not necessary work along the 9 to 5 schedule, some like to participate at night, some prefer very early meetings
If you can't fit everyone in one meeting because of time zones. Create two meetings or rotate the burden of meeting time.
Minutes the meeting, this will become handy for people who can't attend.

Wiki, Google Documents, Blog Post

Publish Online with a wide accessible scope if possible.

Why?

First rule at the start. If you create a Google docs, do not forget to set the viewing and sharing rights for the document. Think long term. For example, the wiki at Mozilla has been here for a longer time than Google Docs. Mozilla controls the URI space of the wiki, but not so much the one of Google Docs.

Having an URI for your information is key as said above.

Comments

If you have more questions, things I may have missed, different take on them. Feel free to comment…. Be mindful.

Otsukare!

otsukare

Did you open a bug?

Quick HTML test case

Les Liaisons Dangereuses Or The Wrong Love For Proxy Detections

window.installTrigger

Another example -webkit-touch-callout

Do Not Misuse Terms

See Also

Fixing rowspan=0 on tables on WebKit.

Find The Bug

Test The Bug

Read The Specification

Create More Tests

Think About The Logic

Fixing The Code

What Is Next?

Some Ways To Contribute To WebKit and Web Interoperability

Curate Old Bugs on the bug tracker

Find Out About Broken Stuff On WPT.

FIXME Hunt Inside WebKit Code

Tests WebKit Quirks

Triage Incoming Bugs On Webcompat.Com For Safari

Molly

The lucky day of me falling hard professionally

Webcompat Outreach, Mon Amour…

Web Inspector Search Regex

Blade Runner 2023

Quirks, Site Interventions And Fixing Websites

Site Specific Hacks?

A Recent Example : FlightAware Webapp

Why Deactivating A Quirk In The Web Inspector?

Could You Help WebKit Having Less Quirks?

"Thousand" Values of CSS

Actual Value

Used Value

Computed Value

Specified Value

Cascaded Value

Declared Value

Initial Value

Resolved Value

Relative value

Absolute Value

Filter your mail in a dated space server side with Sieve

Dated Space?

Why would you do that?

Dated Space For Mail With Sieve

Sieve Script

Get browsers version number on macOS (zsh)

How to make « cidre » of Normandy

Comments

Mozilla, Bye!

Comments

Encyclopedia Of Broken UserAgent String Detections

Comparing Strings Instead Of Numbers

Substring Slicing According To Position

Regex Matching Exactly Two Digits

Detecting Firefox on iOS as Android.

Comments

Browser regression and tools

What is a regression?

How do we try to catch regressions before production release?

How do we find out the exact commit which has broken the browser?

Bisection tools

Comments

Webcompat issues and the bots!

Screenshots Comparison

Some Limitations Around Screenshots Comparison

Quick summary about autowebcompat.

Training A Bot To Identify Valid Issues

Compatipede, Another Project For Auto Webcompat

SiteCompTester

Template Extraction Mining

Webcompat Auto-Detection Caveats

Auto-Discovery Of Webcompat

When iOS will allow other browsers

Fast Forward To The Future.

Today is my Mozilla 8 years anniversary

Hiring, a long process

Without people, no Web Compatibility!

`window.installTrigger`

Another example `-webkit-touch-callout`

Browse the Web with a `100` UA string