planet.webcompat.com

Mike Taylor's Web Log by Mike Taylor at

7 years ago I tweeted my only good tweet:

please kill the text-shadow in ::selection. obsessive compulsive text highlighters like myself go blind

screenshot of text selection ugliness

(apologies for hideous screenshot, 2010 was a weird time for web design, I guess)

Some internet hipsters agreed, so they put a default text-shadow: none rule for ::selection in html5 boilerplate's main.css.

Anyways, we recently got a bug about nearly same exact issue: if you have a white background and set a white text-shadow on the copy (wat), things can get weird when someone makes a selection:

#wrapper {
  background-color: #fff;
}
.post-meta {
  text-shadow: 2px 0px 1px #fff;
}

So don't do that?

Anyways. The most important takeaway (for me) is that the devs over at thegunmag.com don't follow me on twitter, which is super rude when you think about it.

otsukare by Karl Dubost at

webcompat life

  • Often tracking protection is confusing for people. I always wonder if it's because people are put in front of it in failure situation. Basically you discover something is not working because the site breaks, and you are later on told it is because of tracking protection. It's a negative feeling feature which doesn't show itself when everything is fine. I wonder if there would be a way to reverse that feeling. Something like, an individual site report on the blocking and a daily or weekly stats dashboard explaining what has been blocked. "Congratulations, Tracking Protection has blocked this week X of this, Y of that."
  • Webcompat Minutes published

webcompat issues

webcompat.com dev

Interesting read

Otsukare!

otsukare by Karl Dubost at

webcompat life

  • Jetlag and fatigue. Last week, a part of the Webcompat team had an intense work week in Berlin to discuss the precise parts of developing webcompat.com and the strategies around it.
  • it's my 3rd time in Berlin. À la Sei Shonagon, some pillow book notes:
    • Broken glasses in many streets.
    • People drink in the streets. Sometimes beer. Sometimes in the morning.
    • Organic shops or sections everywhere.
    • April is cold.
    • Graffiti and artsy life very active.
    • Mozilla office is in an area a bit dead.
    • The subway is based on a trust system. Free access to the platforms, punch your card to validate your ticket.
    • Children ride bikes as much as adults. Plenty of bike trailers too.
  • Developer tools and web compatibility

webcompat issues

webcompat.com dev

Interesting read

Otsukare!

otsukare by Karl Dubost at

webcompat life

  • Some issues takes a lot longer to analyze understand than what it seems at the start.

webcompat issues

webcompat.com dev

Otsukare!

When Can I Use updates by Alexis Deveria at

Two new developments to the Can I use site:

1. caniuse.com is now available over HTTPS! There's still a few kinks to work out before that becomes the new default but it's available today.

2. New Patreon account to enable an ad-free experience! When you support the site for as little as $1 USD/month and link your account, ads will no longer be loaded on the page. Once you're a patron just click the log in button at the bottom of the site to link your account. Your contributions are highly appreciated and help keep the site running!

otsukare by Karl Dubost at

webcompat life

  • Working on a replacement for our minutes script.
  • Booking flights to June meeting in San Francisco and thinking about my strategy with regards to data. Each time I book flights I can't help thinking about the absurdity of airlines and booking strategy.
  • My server for this site and a couple of others have changed place. For the last 15 years, my 1U Dell was hosted at W3C MIT. Thank you. I moved to Gandi in the meantime, but I'm exploring also something else.

webcompat issues

webcompat.com dev

Otsukare!

otsukare by Karl Dubost at

webcompat life

webcompat issues

webcompat.com dev

To read

Otsukare!

otsukare by Karl Dubost at

I have seen clever, thoughtful and hardworking people trying to be right about the CSS is not broken and CSS is broken. PopCorn. I will not attempt to be right on anything in this post. I'm just sharing a feeling.

Let me steal the image from this provocative tweet/thread. You can also read the thread in these tweets.

CSS in JS

I guess looking at the image I understood how/why the discussions would never have any resolutions. Just let clarify a few things.

A Bit Of An Introduction

CSS means Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.. Words have meanings. It is 20 years old spec wise. But the idea came from a proposal on www-talk on October 10, 1994. Fast forward, there is an ongoing effort to formalize CSS Object Model aka CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and of course CSS itself.

Let's look at the very recent CSS Grid, currently in Candidate Recommendation phase and starting to be well deployed in browsers. Look carefully at the prose. The word DOM is cited only twice in an example. CSS is a language for describing styling rules.

The Controversy

What people are argueing about and not discussing or dialoguing about is not about CSS, but how to apply the style rules to a document.

  • Some developers prefers to use style elements and files using the properties of the cascade and specificity (which are useful), aka CSS.
  • Some developers wants to apply the style on each individual node in the DOM using JavaScript to constraint (remove) the cascade and the specificity because they consider it annoying for their use case.

devtools screenshot

I do not have a clear cut opinion about it. I don't think CSS is broken. I think it is perfectly usable. But I also completely understand what the developers who wants to use JavaScript to set style on elements are doing. It makes me uncomfortable the same way that Flash (circa 2000s) or frame (circa 1995) was making me uncomfortable. It is something related with la rouille du Web (The Rusty Web). The perennity of what we create on the Web. I guess in this discussion there are sub-discussions about craft and its love, the Web perennity and the notion of Web industrialization.

There is one thing which rubs me in the wrong direction is when people talk about HTML and CSS with the "in JS" term associated. When we manipulate the DOM, create new nodes and associate style to it, we are not doing anymore HTML and CSS. We are basically modifying the DOM, which is a complete different layer. It's easy to see how the concerns are different. When we open a web site made with React for example, the HTML semantics is often gone. You could use only div and span and it would be exactly the same.

To better express my feeling, let's rephrase this:

You could use only div and span and it would be exactly the same.

It would become.

pronoun verb verb adverb noun conjunction noun conjunction pronoun verb verb adverb determiner noun.

then we would apply some JavaScript to convey meaning on it.

So…

As I said I don't think I'm adding anything useful to the debates. I'm not a big fan of everything apps through JavaScript, maybe because I'm old or maybe because I value time.

I also would be curious for the advocates of applying styles to nodes in the DOM, if they made the experiment of generating (programmatically) a hierachical CSS from the DOM. Basically the salmon ladder in the river to go back to the source. I'm not talking about creating a snapshot with plenty of style attributes, but reverse engineering the cascade. At least just as an experiment to understand the two paths and what we could learn about it. It would minimize the CSS selectors, take advantage of the cascade, avoid as much as possible !important, etc.

Otsukare!

otsukare by Karl Dubost at

Let's clear something out print in the code is bad. But sometimes it is useful when you need to quickly debug or understand what is happening. Just do not forget to remove them before committing.

On webcompat.com development, we use unittest and nose for testing the code. Running one set of tests is as easy as

nosetests tests/test_http_caching.py

and the result is:

...
----------------------------------------------------------------------
Ran 3 tests in 0.175s

OK

Though usually I prefer to run:

nosetests -v tests/test_http_caching.py

which reveals our inconsistency in naming. Probably my own mistake.

Check Cache-Control for issues. ... ok
Check ETAG for issues. ... ok
Checks if we receive a 304 Not Modified. ... ok

----------------------------------------------------------------------
Ran 3 tests in 0.173s

OK

But there is something which was bothering me for a long time. Let's say I put a print statement in the code anywhere, be in the test or in the application code. Even when tests are valid, I want to know the content of some variables. I want to make double sure I'm testing the right thing.

    def test_cache_control(self):
        '''Check Cache-Control for issues.'''
        rv = self.app.get('/issues/100', environ_base=html_headers)
        print '\n\n{what}:\n{this}\n'.format(what="Headers", this=rv.headers)
        self.assertIn('cache-control', rv.headers)
        self.assertTrue(rv.cache_control.must_revalidate)
        self.assertTrue(rv.cache_control.private)
        self.assertEqual(rv.cache_control.max_age, 0)

nose will swallow everything except when the test fails. I finally discover the right parameter (and it's probably obvious to others): --nocapture. This will make it possible to get the print messages.

nosetests -v --nocapture tests/test_http_caching.py
('secrets', '/Users/karl/code/webcompat.com')
Check Cache-Control for issues. ... 

Headers:
Content-Type: text/html; charset=utf-8
Content-Length: 9981
Cache-Control: must-revalidate, private, max-age=0
ETag: "39a3c7d6fda546253a02927272a360db"
Date: Wed, 29 Mar 2017 07:49:19 GMT
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
X-Frame-Options: DENY
Content-Security-Policy-Report-Only: default-src 'none'; connect-src 'self'; font-src 'self'; img-src 'self' https://www.google-analytics.com https://*.githubusercontent.com; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://www.google-analytics.com; style-src 'self' 'unsafe-inline'; report-uri /csp-report



ok
Check ETAG for issues. ... ok
Checks if we receive a 304 Not Modified. ... ok

----------------------------------------------------------------------
Ran 3 tests in 0.190s

OK

Hope it is useful for someone else. It was in the documentation but was not obvious to me when I read it a couple of times.

Don’t capture stdout (any stdout output will be printed immediately) [NOSE_NOCAPTURE]

And yes I'm removing this print right away before I forget.

Otsukare!

otsukare by Karl Dubost at

I ran into this issue recently with httpie (The python code for doing http requests)

http --verbose GET  https://ti.to/home

I was getting:

http: error: SSLError: [SSL: SSLV3_ALERT_HANDSHAKE_FAILURE] sslv3 alert handshake failure (_ssl.c:590) while doing GET request to URL: https://ti.to/home

Huh? Then tried curl

curl -v https://ti.to/home

We get.

*   Trying 54.75.248.133...
* TCP_NODELAY set
* Connected to ti.to (54.75.248.133) port 443 (#0)
* TLS 1.2 connection using TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256
* Server certificate: ti.to
* Server certificate: DigiCert ECC Extended Validation Server CA
* Server certificate: DigiCert High Assurance EV Root CA
GET /home HTTP/1.1
Host: ti.to
User-Agent: curl/7.51.0
Accept: */*

< HTTP/1.1 200 OK
< Server: Cowboy
< Date: Sat, 25 Mar 2017 06:20:39 GMT
< X-Frame-Options: SAMEORIGIN
< X-Xss-Protection: 1; mode=block
< X-Content-Type-Options: nosniff
< Content-Type: text/html; charset=utf-8
< Etag: W/"730ab400103d08252b84003a4e7862ff"
< Cache-Control: max-age=0, private, must-revalidate
< Set-Cookie: _marketing-tito_session=S3NERVovbjJmcEYvTGhkSktzVkQyZ3I0TXBOQ1lxTCs5LzhVMlhBN2ZKL0pTSjZCTi94VUo4b3N5RDNweGt2ZWNZTHc4MitNeGdtbjUvZXQ0RjVic1lCMlE3NVk2V21GNGFnYVpXZzVBMnM1bHg3bXpUOW1MZ1R5MlR5UnY3cVB3bzhzZER1eGRNTlNXTFlUVVMxWEhnPT0tLUZCNWQrcE9JcmU0OXJOeUY4YXJ0QXc9PQ%3D%3D--e96126ac335694d135c6a13b2effb22b486380b3; path=/; HttpOnly; Secure
< X-Request-Id: ce6a6522-1780-4b85-8ff5-4eeea24f8fa4
< X-Runtime: 0.007563
< Transfer-Encoding: chunked
< Via: 1.1 vegur
< Strict-Transport-Security: max-age=15768000
< 
<!doctype html>
<html lang="en">

So I searched a bit. And I needed to upgrade a couple of things.

http uninstall httpie 

Then install the security update of requests. If you are wondering about --user, I do that all the time. It installs the 3rd party libraries in your own repo. It makes it safe when Apple upgrades python on your machine destroying all previous libraries installs.

pip install --user --upgrade requests[security]

This install a lot of stuff. Once done. You should get something like:

Successfully installed appdirs-1.4.3 asn1crypto-0.22.0 cffi-1.10.0 cryptography-1.8.1 idna-2.5 ipaddress-1.0.18 packaging-16.8 pyOpenSSL-16.2.0 pycparser-2.17 pyparsing-2.2.0 setuptools-34.3.2

Then

pip install --user httpie

Which gives

Successfully installed httpie-0.9.9

Once done, you can check the state of things with

http --debug

This will spill out

HTTPie 0.9.9
Requests 2.13.0
Pygments 2.2.0
Python 2.7.10 (default, Jul 30 2016, 19:40:32) 
[GCC 4.2.1 Compatible Apple LLVM 8.0.0 (clang-800.0.34)]
/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
Darwin 16.4.0

<Environment {  … cut for Brevity… }>

And now retrying the request

http --traceback --print h GET  https://ti.to/home

We get the right thing

HTTP/1.1 200 OK
Cache-Control: max-age=0, private, must-revalidate
Content-Type: text/html; charset=utf-8
Date: Sat, 25 Mar 2017 06:33:23 GMT
Etag: W/"ecdab4c883db75bc7e811a4360f62700"
Server: Cowboy
Set-Cookie: _marketing-tito_session=YVlLeFBWMXhwNml2cW54dC8xMk9DV1ZocWxQZ3BhVUlLUmlNK25SNHVyMHVsVnFGR1FYNGQ5SFRTZUNvMDRUU1VKbkR4Y2J3VStoZUJ0TWpteGIrcTMrYk9PQ21wTk1YRlU3cjVibC9NeEdXUUNlWFNoMHJjT3NWbnllUVMrVDMwZWJOZlZPWWQwSElUcG44WE5rWkhnPT0tLTZQNVZxVTYxYVhGUGNUV1htc1Jqb2c9PQ%3D%3D--d457a62be9a95ddf7ed17c19e2e006ed0a185be2; path=/; HttpOnly; Secure
Strict-Transport-Security: max-age=15768000
Transfer-Encoding: chunked
Via: 1.1 vegur
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Request-Id: 7abb2983-4eee-46e0-8461-2d0b14f24056
X-Runtime: 0.008374
X-Xss-Protection: 1; mode=block

Otsukare!

otsukare by Karl Dubost at

webcompat life

More people in the team, and we seem to have increased the number of meetings, maybe just a perception. But I liked the non verbal one that Sergiu did last week. Giving plenty of discussion points and the rest of us going to it for replying during the next couple of days.

webcompat issues

webcompat.com dev

To read

Google says it can’t trust our self-hosted AMP pages enough to pre-render them. But they ask for a lot of trust from us. We’re supposed to trust Google to cache and host copies of our pages. We’re supposed to trust Google to provide some mechanism to users to get at the original canonical URL. I’d like to see trust work both ways.

I would add that the difference of power makes this trust unbalanced. And so when a power is asking for trust, we need very strong guarantee and counter-system once the trust has been breached.

Otsukare!

otsukare by Karl Dubost at

webcompat life

I spent a big chunk of my time trying to figure out how to modify g in flask.

webcompat issues

webcompat.com dev

  • Title choice for webcompat.com home page. Duckduckgo, google and Bing are giving very different results. In itself, this is interesting.
  • We have two sources of tests. Some in JavaScript that we call functional. And some in python which are unittests. It's sometimes a bit difficult to figure out where they should be. In this pull request, the contributor proposed to do it on the JavaScript side. But personally I have the feeling it should be on the python side. I'm not yet entirely convinced. My rationale is based on this is not involving user interaction at all, but this is generated by the application.
  • Needs to redefine a bit the SVG icons

Otsukare!

otsukare by Karl Dubost at

webcompat life

webcompat issues

webcompat.com dev

  • By introducing HTTP Caching to our HTML resources, I also introduced an issue. The bug report says that people can't login, logout. In fact they can. The issue is what the page looks like, it doesn't display that the user is logged-in. It's normal I initial put a max-age of one day in addition to the etag value. In browser speak, it means that if the browser has a cached copy it will not even try a conditional requests with If-None-Match. Because during the login process we are hitting the same resource. Users are receiving the previous cached copy and don't see that they have actually logged in. A force reload solves that. So instead of putting a max-age I can solve this with a no-cache. Unfortunately, browsers didn't respect the HTTP semantics of no-cache and decided to make it a no-store. Back to the departure case. must-revalidate, max-age=0 will solve it and force the conditional request.
  • Opened quick issue about our current twitter link based on the UX research currently done.
  • Discussions about issues with dependencies and how do we handle them?
  • Discussing about the Contact page friendliness
  • We currently have some outreachy participants. Time for review and help: review
  • Our issues title are… pretty poor for now.

Otsukare!

otsukare by Karl Dubost at

Dennis recently shared his concerns on knowing what others are working on in the Web compatibility team. Working in a entirely distributed and growing team comes with its shares of benefits when handled well. What Dennis is voicing as a concern is a room for improvement.

Distributed Team

How distributed is the Web Compatibility team? The places by time zones:

  • Fujisawa (Japan)
  • Taipei (Taiwan)
  • Stuggart (Germany)
  • Berlin (Germany)
  • Ottawa, Ontario (Canada)
  • Hamilton, Ontario (Canada)
  • Austin, Texas (USA)

None of us share a unique location. And we meet altogether or some of us during Mozilla All-Hands or work week meetings. I haven't met yet, for example, Ola who is working from Berlin, Germany. This blog post probably relates to the one a couple of weeks ago on working in the open.

Working Remotely and W3C

I have been working since 1994 and remotely since 2001 (except for two years in Montreal in a Web agency), so basically around 14 years on 23 years of work. W3C, Opera and Mozilla. It works very well when everyone is participating into a shared culture. The best shared culture I have met so far is still W3C. The W3C staff (around 70 persons at my time 2000-2008) had mainly three big weekly staff meeting. One in Japan, one in USA, one in Europe. You could choose the one you wish to attend weekly. The agenda was built around the local issues. People could join physically on site or by phone. Meetings where directly scribed on IRC, with a bot helping for minutes taking and agenda management. For each meeting, a chair is in charge of managing the agenda and a scribe of taking minutes. The scribe is being rotated on the basis of the oldest note takers. Others can help take notes and fix directly (s/old_comment/new_comment/ syntax) on IRC the notes when misundertood, missing, etc. The bot was then directly generating minutes on the Web site at a unique URI. Those who participated to W3C working group meetings are used to this. Example W3C TAG: Agenda and Minutes. The script for generating the minutes is a perl script called scribe.

W3C Two Minutes (of Work)

Back to Dennis' comment on knowing what others are doing. Before the W3C staff weekly meeting, everyone was encouraged to send their 2 minutes. It is a very rough summary of things you have done during the week and you think are worth sharing with the rest of the team. Sometimes, some people are also sharing personal items (museum, trip, books, cinema, etc.). I tried to dig an old email not containing anything W3C-staff private.

2 minutes email

The way it was working.

  1. Every individual is sending an email to the local site mailing-list
  2. The bot script is parsing the mailing-list for the emails arrived the last week with a subject ^Subject:.*((2|two) ?mi?n) aka a variation of two minutes, 2 min, 2 minutes, etc.
  3. The script is then extracting each email content and generates a single file with everything after converting to HTML.
  4. This file is then added to the weekly meeting minutes.
  5. During the meeting, people could choose to spend a couple of seconds to share an item of their 2 minutes.

Sometimes reading a two minutes email was helpful for creating a new agenda item on the meeting for asking clarifications or for proposing help. The two minutes have never been really a burden, except remembering what you did during the week.

Mozilla Web Compatibility Team Minutes

At Mozilla in the Web Compatibility Team, we do a couple of things:

  • We have an optional weekly meeting. The time is fixed, but if the agenda is empty, we do not hold the meeting.
  • The agenda is built on the proposals made on the etherpad. Anyone can propose an agenda item.
  • We hold the meeting through Vidyo, a video teleconferencing system.
  • We take notes directly during the meeting. Mostly adam, mike and I having the roles of scribe. The chosen syntax is very simple and follows somehow a simplified version of the W3C IRC minutes-taking style.
  • I generate the minutes on the wiki every time there is a meeting. I'm using some home made scripts that can be improved. I should probably move that to its own repo with a better documentation.

For the two minutes, we tried in the past to use the statusupdates created by Benjamin Smedbergs but he stopped it. We were not successful doing it. Basically mostly Hallvord and I were making the effort. And there's no point to try to enforce something that people are unwilling to do. We need to find a more natural process.

One of the reasons I started my weekly worklog on this blog is because I wanted to keep track on what I was doing. Some weeks I do well. Some others less so.

Dennis shared with me, the other place that people use for sharing their work at Mozilla. It seems to work on an atomic message basis.

So Dennis had a good question and we probably need to improve by finding a solution which works for us. His suggestion is an oral report. I like written form. The reason is that the written form makes it possible for people who are not attending because of time zone issues, travels, etc. can still have a sense of what is happening. The oral form could still be done if it's not too long like we were doing at W3C.

Otsukare!

otsukare by Karl Dubost at

webcompat life

webcompat issues

webcompat.com dev

Otsukare!

otsukare by Karl Dubost at

webcompat life

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

webcompat issues

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

webcompat.com dev

Otsukare!

otsukare by Karl Dubost at

webcompat life

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

webcompat issues

webcompat.com dev

Otsukare!

otsukare by Karl Dubost at

webcompat life

webcompat issues

webcompat.com dev

Miscellaneous

Otsukare!

Subscriptions