Mathias Bynens's Avatar

Mathias Bynens

@mths.be

♥ JavaScript, HTML, CSS, HTTP, performance, security, Bash, Unicode, i18n, macOS. https://mths.be/

3,245
Followers
785
Following
368
Posts
01.05.2023
Joined
Posts Following

Latest posts by Mathias Bynens @mths.be

Preview
Wes Cook and the Centralia McDonald's Mural A personal story about discovering a mural in a McDonald's, an unknown artist named Wes Cook, saving the mural, and a conference talk about the whole thing.

over a year ago, i gave a talk at the xoxo conference about a mural, a mcdonald’s, and a man. (but it was also secretly about life, and legacy, and meaning.)

finally, i’m blogging the full story, with behind-the-scenes details, and a video of the talk.

enjoy. cabel.com/wes-cook-and...

11.02.2026 19:04 👍 375 🔁 106 💬 24 📌 27

Hi Emelia, which issues in particular are blocking you? Happy to take a look.

01.12.2025 13:46 👍 1 🔁 0 💬 1 📌 0

Woah, such a cool idea!

12.10.2025 09:40 👍 3 🔁 0 💬 0 📌 0
Video thumbnail

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent→ goo.gle/4pDE6Tk

With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

23.09.2025 15:00 👍 37 🔁 22 💬 0 📌 2

The HTML Standard is unlikely to add more HTML entities so the current version is probably close to final anyhow. As you noted, I’m not actively maintaining `he` right now, but the code that’s out there is tested and works (modulo the open issues).

01.09.2025 11:03 👍 1 🔁 0 💬 0 📌 0

I saw that, but the example I gave uses Array.prototype.entries (not Object.entries).

24.08.2025 12:37 👍 0 🔁 0 💬 1 📌 0

Loving the interactive demos!

In the `buildList` example, there’s no need to stop using `for-of` just to get access to the index. Try:

for (const [index, item] of items.entries()) {
output.push(`Item ${index + 1}: ${items[index]}`);
}

Smaller diff, might be easier to follow. WDYT?

24.08.2025 09:07 👍 3 🔁 0 💬 1 📌 0

That sucks :( I’m really sorry to hear

26.07.2025 12:06 👍 0 🔁 0 💬 0 📌 0

Cheers!

25.06.2025 20:53 👍 0 🔁 0 💬 0 📌 0

Cool project! What do you think about enabling the RegExp `v` flag for the `stylepattern`, to more closely match the `pattern` attribute? github.com/keithclark/r...

23.06.2025 20:57 👍 4 🔁 0 💬 2 📌 0
Preview
Animating zooming using CSS: transform order is important… sometimes How to get the right transform animation.

CSS uses a complex algorithm to decide how to animate transforms. If you get it wrong, as many folks do, you end up with an unnatural animation.

Here's how it works, and how to avoid the pitfalls.

jakearchibald.com/2025/animati...

17.06.2025 11:20 👍 269 🔁 55 💬 13 📌 2

This makes no sense whatsoever. I’m really sorry, Ron.

14.05.2025 04:41 👍 6 🔁 0 💬 0 📌 0
http.badssl.com

http.badssl.com 4 lyfe!

07.05.2025 17:41 👍 7 🔁 0 💬 0 📌 0

Woah, blast from the past! Bedankt om te laten weten, made my day :)

16.04.2025 16:05 👍 2 🔁 0 💬 0 📌 0

This is devastating. I’m so sorry, dude

11.04.2025 21:42 👍 1 🔁 0 💬 0 📌 0

We miss you already, Jecelyn! Thanks for everything you’ve done for the Web! ❤️

31.03.2025 18:36 👍 3 🔁 0 💬 0 📌 0

Woah, this is so dope! Congratulations!

04.03.2025 13:56 👍 2 🔁 0 💬 0 📌 0

Another reason `pattern` should not be used *just* to replace `step` is keyboard accessibility. Try pressing the up/down arrow on the step=0.01 example.

13.02.2025 17:11 👍 1 🔁 0 💬 1 📌 0

yes and yes!

08.02.2025 08:51 👍 1 🔁 0 💬 0 📌 0
Drawing of expanded view of the GPU and CPU, with explanations for both and a brief description of how they coordinate

Drawing of expanded view of the GPU and CPU, with explanations for both and a brief description of how they coordinate

✍️ I did an explainer on the CPU and GPU and how they coordinate tasks between them.

Going to a series on rendering💥

26.01.2025 18:01 👍 328 🔁 30 💬 12 📌 2

The extra options appear when DevTools is opened. Works on right-click too.

21.01.2025 05:59 👍 4 🔁 0 💬 1 📌 0
Preview
DevTools: use SI units (based on 1000, not 1024) for file sizes Use SI units (based on 1000, not 1024) for file/memory sizes Attention: Externally visible, non-confidential Author: wolfi@chromium.org Status: Inception | Draft | Accepted | Done Created: 2020-02-25 ...

Only Windows does. Linux and macOS use 1000-based units. goo.gle/devtools-si has an overview of some more software.

18.01.2025 14:43 👍 2 🔁 0 💬 1 📌 0

Agreed.

17.01.2025 15:09 👍 1 🔁 0 💬 0 📌 0
Post image

Personally, I consistently use “MB” and the like to refer to SI units (based on powers of 10), and “MiB” & friends for units based on powers of 2.

You seem to want “100 MiB”, which is unambiguous.

17.01.2025 13:17 👍 61 🔁 0 💬 2 📌 0
Preview
Remove UA style for h1-h6 in section (et. al.) and hgroup · Issue #7867 · whatwg/html If/when #7829 is merged, the following UA style doesn't make sense. Can it be removed? In the following CSS block, x is shorthand for the following selector: :is(article, aside, nav, section) @name...

Here's the new 2025 reset.css:

h1 { margin-block: 0.67em; font-size: 2em; }

Thank you for adopting this on all your sites!

See github.com/whatwg/html/...

16.01.2025 15:21 👍 9 🔁 2 💬 1 📌 1

I’m so sorry 😔

20.12.2024 21:43 👍 1 🔁 0 💬 0 📌 0

I think this might be the eventual solution: bsky.app/profile/mths...

11.12.2024 06:00 👍 3 🔁 0 💬 0 📌 0
Proposed Draft UTS #58: Unicode Linkification

www.unicode.org/reports/tr58... aims to standardize a solution for minimally escaping a URL for text consumption while taking into account security considerations. Once that happens, it would be nice to amend the URL Standard with a new URL#toText method or similar that implements this algorithm.

11.12.2024 05:59 👍 7 🔁 1 💬 0 📌 1
CSS character escape sequences · Mathias Bynens

In case helpful, I wrote about this a while back: mathiasbynens.be/notes/css-es... and built a tool showing how to escape any character for use in different CSS-like contexts: mothereff.in/css-escapes

18.11.2024 06:14 👍 7 🔁 0 💬 0 📌 0

pop pop

13.11.2024 22:56 👍 1 🔁 0 💬 0 📌 0