Mandy Michael uses a brilliant analogy to explain why developers must get to know the HTML elements available to them and use the appropriate one for their content.

In TypeScript, we have the concept of an any type. When you assign a type of any it means the content can be anything. […] But if everything is typed as any then you lose the benefits of the language.

This is the same with HTML. If you use the <div> everywhere, you aren’t making the most of language. Because of this it’s important that you actively choose what the right element is and don’t just use the default <div>.

This reminded me of the following quote by Jen Simmons from their HTML course:

HTML syntax itself is fairly simple. The trickier part is knowing which tags to use when.

Images on the web are hard. After trying and failing so many times before, now I finally understand how to configure srcset and sizes attributes to serve differently sized images for different viewports.

Also worth checking out: Image Display Elements by Stephanie Eckles.

@ts-expect-error will let you know when there’s no TypeScript error to silence and when it has become useless. @ts-ignore will stay put and sit silently wherever you placed it.

Not only did I not know the difference between @ts-ignore and @ts-expect-error, I was totally unaware there was such a directive as @ts-expect-error.

The <meta name="theme-color"> tag is no longer supported in Safari 26 on macOS and iOS.

If a fixed or sticky element touches the top or bottom edge of the window, then and only then, Safari extends that element’s background color into the corresponding top or bottom bar. Otherwise, on iOS, the bars remain translucent and have no solid color background.

As Wenson Hseih explained on WebKit Bugzilla:

A solid background color extension (“top bar tint”) is only needed in cases where there’s a viewport-constrained (fixed or sticky) element near one of the edges of the viewport that borders an obscured content inset (such as the top toolbar on macOS, or compact tab bar on iOS), in order to avoid a gap above or below fixed elements in the page that would otherwise appear when scrolling. This color extension behaviour is more critical on iPhone, where there’s a much “softer” blur effect underneath the browser UI (and so more of the page underneath is otherwise directly visible).

The goal of linking is about building community and creating networks that truly exist to support you and those around you; those networks will persist when social media lets you down.

When I consume AI art, it also evokes a feeling. Good, bad, neutral—whatever. Until I find out that it’s AI art. Then I feel deflated, grossed out, and maybe a little bit bored.

To be honest, I had a tough time understanding this article completely. But that is a me problem because I think I don’t have the right mental model for view transitions yet. Nevertheless, I’m sure this article will be super helpful someday in the future.

Enrique Peñalosa on how to build cities that prioritise human beings over cars and guarantee a citizen’s right to safe mobility.

In my opinion, the following bit at the start of the video certainly holds true for India:

The great inequality in developing countries makes it difficult to see, for example, that in terms of transport, an advanced city is not one where even the poor use cars, but rather one where even the rich use public transport or bicycles.

Nic Chan on how they overcame the hurdle of getting the signs to refresh on a page in a signage browser with no JavaScript. The solution was using a <meta> tag that tells the browser to refresh the page after the given number of seconds.

<meta http-equiv="refresh" content="3600" />

Today I learned, :root (0-1-0) has a higher specificity than html (0-0-1).

In hindsight, it’s obvious. :root is a CSS pseudo-class selector and, like most pseudo-class selectors, it has the same specificity as a class selector or an attribute selector.

Hot take: Padel is to tennis what bowling with bumpers on is to bowling. Its design choices lead to fewer mistakes and a lower barrier to entry.

To see how this unfolds, take the perspective of an ant on the march. When it comes to a gap in its path, it slows down. The rest of the colony, still barreling along at 12 centimeters per second, comes trampling over its back. At this point, two simple rules kick in.

The first tells the ant that when it feels other ants walking on its back, it should freeze. “As long as someone walks over you, you stay put,” Garnier said.

This same process repeats in the other ants: They step over the first ant, but — uh-oh — the gap is still there, so the next ant in line slows, gets trampled and freezes in place. In this way, the ants build a bridge long enough to span whatever gap is in front of them. The trailing ants in the colony then walk over it.

I love Astro. But for the life of me, I couldn’t figure out how to render the entire post content in my RSS feeds correctly. This article by Donnie D’Amato has been a lifesaver in this regard.

A great resource to understand how to use the alt attribute in various situations.

I keep forgetting, but the alt attribute of the <img> element is not just useful for users who are visually impaired. It is also useful when the image is not displayed in the browser for whatever reason. For example: the src attribute does not contain a valid path to an image.

John Mayer on how trying and not doing it well enough is a wonderful technique for being yourself:

Failing to sound exactly like the person you want to sound like is a wonderful way to sound like yourself. So I’m not necessarily thinking this thing from scratch, going, Okay, I’m gonna, like, do Jerry-esque things, but I’m still gonna sound like me. No, it’s more like, I want to sound just like Jerry, and then the way I naturally, obviously don’t — that’s your personality. Music doesn’t let you lie. […] You try to sound like who you want to sound like, and you just will always end up sounding like you.

I like this advice. It is an interesting take on the learning by copying method.

Initially, I thought this was just an article on how to fix the janky hover state of a card component. But it also goes over the HTML markup for a typical card component in the context of semantics and accessibility.

Ah! Good old Jeremy Keith, insightful and funny.

If I really want to change someone’s mind, then I need to make the effort to first understand their mind. That’s going to be far more productive than declaring that my own mind is made up. After all, if I show no willingness to consider alternative viewpoints, why should they?

There’s an old saying that before criticising someone, you should walk a mile in their shoes. I’m going to try to put that into practice, and not for the two obvious reasons:

1. If we still disagree, now we’re a mile away from each other, and
2. I’ve got their shoes.

I just purchased Josh Comeau’s new course, Whimsical Animations. The course page itself has some delightful animations.

PS: I also discovered Gochi Hand, a cute handwritten font, on the course page.

John Oliver on drawing the line:

Giving the bully your lunch money doesn’t make him go away. It just makes him come back hungrier each time.