I haven't used this blog in a few years. To get back in the groove, I'm starting with a weekly post.

WebPageTest contributions

I've done a few contributions to that project recently:

  • Docs #27: The table of contents shows more headings. This makes it easier to scan the content of a page and share anchor links. Before/After screenshots.
  • Docs #29: WebPageTest supported a few variable substitutions for quite a while but they were undocumented. No more!
  • WebPageTest #1498: Add labels to form inputs in Custom Waterfall. Bigger targets to customise faster than ever.

No, Utility Classes Aren't the Same As Inline Styles

Utility-first is a trend in the front-end world. I think it's a powerful tool and I've seen positive outcomes in terms of maintenance and performance for the projects where I've used this approach. Many people dismiss this approach. One of the common criticism is that it's just like inline styles. Sarah explains why it is not.

My highlights:

  • Utility can affect more than one element. Inline cannot (besides inheritance).
  • Utility can use pseudo-classes, pseudo-elements and media queries. Inline styles cannot.
  • Utility can be processed by tools like PostCSS or Sass. Inline styles, so far, cannot.
  • Utility can be cached much longer than inline styles.
  • Utility can declare several properties with one declaration. Inline styles cannot.
  • Utility fits in a strategy and architecture. You can limit a project to a set of colours, spacings, font stacks, text sizes, etc. Inline styles have no such restrictions.
  • It's better to say "I have not dug into that topic yet" rather than make snap judgements.

And if you want to go further, read or watch her advocate for this approach.

Teaching DOM Events visually

I've added this to my toolbox straight away. DOM Events have a lot of subtle parts and it can be tricky to explain them. With this tool, you can configure an event (What's the target? Does it bubble? Is it cancelable?) and some listeners. Then you can dispatch the event and see how it propagates. Maybe drop that in your next code design session or review?

Here's an exemple to showcase the difference between stopImmediatePropagation and stopPropagation.

Chrome is experimenting with RSS feeds

A few years ago, you could subscribe to RSS feeds in any browser. Safari 2, released in 2005, was even marketed as "Safari RSS". But it went away (Firefox removed support in December 2018)

As often in life, the pendulum is swinging back and we might see feeds make a come back. I'd welcome that since this is giving some control back to publishers and take it away from social networks. Notice the experiment is using the codes of social networks by calling this feature "Follow".

Why the sad face?

I really like very opinionated code formatters. In this post, Łukasz Langa (creator of Black) highlights how the formatting of closing parentheses is useful.

Simplifying macOS System Preferences

(via Karl)

I had no idea this was possible. I've disabled all panes for now and will re-enable as I go.

A Twitter quote

Someone on tv just said, “when we want to incentivize rich people we give them money but when we want to incentivize poor people we take away money,” and holy fuck that’s so true.