Performance optimizations for the interaction to next paint metric and sharing the learning along the way

While the latency numbers may seem low by themselves, they compound quickly. For example, a network waterfall of depth 3 on a 300ms link leads to a total latency of 900ms.

How much HTML, CSS, and JavaScript can we really afford? More than in years past, but much less than front-end developers are burdening experiences with.

A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.

A creative coding lesson. How the SVG ViewBox works

Recently I made a wall calendar with 12 request waterfalls for a conference, highlighting different web performance issues. This article goes through these waterfalls one by one and explains what they show.

Essentially, there are multiple different ways in which we can attribute a certain task to other tasks or to the party that initiated it.

Those different ways are not always obvious, because for the straightforward case, they all kinda give you the same answer. As a result, it took me a while to wrap my head around their differences, and I’m hoping to save someone some time by outlining them.

A tool for drawing sassy UML diagrams based on syntax. Provides instant feedback and has a customizable styling.

Submagic is an AI for content creators that generates amazing captions with emojis for short-form content in under 2 minutes. Create your captions and skyrocket your video engagement.

HAR files are JSON-formatted archive files used to log web browser interactions. Developers and IT professionals often use the performance data in HAR files to troubleshoot issues. We want to make it possible to troubleshoot with HAR files without the threat of a stolen session. The HAR File Sanitzer will remove sensitive data using “clientside” logic.

It depends.

[…] I filed an issue on the WhatWG's HTML working standard asking the WhatWG to reinstate the feature in the HTML spec, which received some nice discussion from the community.

[…] What happens now is the change has made its way into the respective browsers' backlogs, which is awesome, but there's no indication of a timeline or priority for when the changes will be made.

[…] That is, if you're able to use streaming video protocols, by all means, do that!

Great explanation on how to generate and use as a background the smallest possible legitimate LCP image placeholder while waiting for our full-resolution image to arrive. While I admire the thoroughness of the article, I'm overcome by a feeling of sadness: I absolutely believe that this should be the role of a progressive image format, and not the shenanigans of front-end developers.

Read JavaScript for Web Designers by Mat Marquis online. A detailed yet approachable tour around this essential language: pick up syntax rules, the fundamentals of scripting, and much more.

Find people to follow on Mastodon by expanding your follow graph.

Saying no is hard, but it's also essential for your sanity. Here are some templates for how to say no - so you can take back your life.

In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty 0 characters all lined up in a row).

But the width of the 0 character differs from font to font. So when our web font was swapped, the width of 1ch changed, which impacted our layout

Découvrez la science et les techniques pour réussir la mousse au chocolat

There’s an tendency at times for organizations to treat performance as a checklist of sorts, particularly as we’ve seen the core web vitals metrics bring more attention to performance than ever before. You try to tick the box on those metrics to get them green, then call it a day. (This organization, to their great credit, did not do that.)

But none of that matters if those metrics aren’t painting a complete picture of how users interact with our sites.

Performance, like accessibility, is not about conformance.

It’s not about a checklist.

It’s not even about simply making things fast.

It’s about providing a better experience for the people using our sites and applications to make sure they can efficiently accomplish their goals. Doing that requires that we pay close attention to what those goals are, how they are trying to achieve them, and then making sure that the way we measure performance matches up.