Subscribe via RSS


My guiding principles for 2020, or rather life going forward in general:

Be more kind to myself.
Done is better than perfect.
It is happening. Enjoy it.

The inert attribute and property polyfill

The inert attribute/property allows web authors to mark parts of the DOM tree as inert:

When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as “find in page”), and may prevent the user from selecting text in that node.

Furthermore, a node which is inert should also be hidden from assistive technology.

I just recently learned about the forthcoming inert attribute and it’s really interesting. I highly recommend you read the Explainer.

Frontend Design, React, and a Bridge over the Great Divide

Brad Frost:

Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products’ user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development.
Whatever the label is, these people specialize in crafting the code that powers the UIs of websites.

If you’d substitute every instance of “React” with “Vue” than this article could be written by me or about me. The parallels are astounding. Next time somebody asks what exactly it is that I (like) to do, I can just point them to this article. Thank you Brad!

The New Wilderness

Maciej Cegłowski:

The large tech companies point to our willing use of their services as proof that people don’t really care about their privacy. But this is like arguing that inmates are happy to be in jail because they use the prison library. Confronted with the reality of a monitored world, people make the rational decision to make the best of it.
That is not consent.

Maciej is on point, as always.

The Dark Forest Theory of the Internet

Yancey Strickler:

I went dark on the internet a few years ago. I took social apps off my phone, unfollowed everyone, the whole shebang. This was without a doubt a good decision. I’ve been happier and have had better control over my time since. Many others have done this and are doing this. A generation of modern wannabe monks.
But even as my personal wellness grows, I see a risk in this change.

I’m currently on a, for the lack of a better word, digital detox, inspired by the book Digital Minimalism by Cal Newport. (Yes, I’m still allowed to use my blog. My detox, my rules.) Over the past years I have deleted social apps on multiple occasions but never for long. This time it’s at least for this month. While I’m enyoing the more quite and focused time so far I also wonder what negative sides it could bring with it. It’s not only the fear of missing out on something, but also the question what will happen if everyone pulls back and hides away from public spaces. On the other hand, my blog is a public space and everyone is welcome here. The digital detox is also not only about eliminating social media from my life. Anyway, there’s a lot to think about here and I thought this article was interesting.

Inside Microsoft’s surprise decision to work with Google on its Edge browser

Tom Warren:

It’s clearly early days for Microsoft’s Chromium adventures, and engineers from Microsoft and Google seem to be collaborating well toward similar goals. But Microsoft and Google are still fierce competitors, and we’ve yet to see how that will play out in the browser space.

Interesting article on The Verge on how the Microsoft Edge switch to Chromium came about and how Google and Microsoft are now working together.

Sunday, May 5th, 2019

#shotoniphone #nofilter

font-weight: 1000

Today I had to add a new font face to a website, it was called “fat” and was even bolder than “black”. The common font-weight for black is 900, so I went above that and chose font-weight: 1000 for the fat font face but that brought me into trouble with the font not loading in Safari. So I started reading up on the topic, because before I never used such a high value or thought much about it.

The MDN web docs say about font-weight values:

A value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the Common weight name mapping section below.

but then it continues:

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900. CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000. This enables variable fonts to provide a much finer-grained range of font weights. Note that this is not yet supported by all browsers.

The CSS Fonts Level 4 are only a W3C Working Draft at this point. It got updated last on September 20th 2018. font-weight values over 900 or generally values other than 100, 200, 300, 400, 500, 600, 700, 800, 900 are not allowed/working. CSS Fonts Level 4 will update that so you can use any number between 1 and 1000, including 1000, mostly because of variable fonts. But Chrome and Firefox seem to accept different values like 980 or even 1000 already for normal fonts just fine, but not Safari.

What got me confused today was only that the MDN web docs flip flop between what values are allowed. I think the page should only list the CSS Fonts Module Level 3 values in the general sections.

Don’t get me wrong, I love the docs and use them all the time, I just wanted to share my journey from today. And I should probably find out how to propose and update for the font-weight page.


Okay, so you can just connect your Github account to MDN and edited pages. I just published an update to the font-weight page according to my research. I also requested for technical review. Let’s see how this goes. How exciting!

ShopTalkShow 356: Blocks and Browsers

Dave Rupert:

I have a giant tin foil hat over here, it’s just the biggest tin foil hat, it’s a samurai helmet made out of tin foil.

I burst out in laughter hearing this. 🤣
Besides that funny moment it’s also a very good and important episode about browser diversity and the future of the web.

Are nested grids like nested tables?

Rachel Andrew:

It is not. This is why.

And then an easy and quick explanation follows.
Oh I’m looking forward to subgrids so so so much!