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.

I really like this explanation of what happens in between the user entering a web address into the browser and the browser displaying the result.

1. The web browser requests the resource you want to access from the web server it is stored on.
2. If the request is successful, the web server sends a response back to the web browser containing the requested resource.
3. In some cases, the requested resource will then fire off more requests, which will result in more responses.
4. When all of the resources have been requested, the web browser parses and renders them as required, before displaying the result to the user.

Just like a word document can be displayed in a word processing application, a web page is simply an HTML document that can be displayed in a web browser. The only difference is that a web page can embed a variety of different types of resources such as styles, fonts, images, scripts, and so on.

Ana Tudor wrote on Mastodon:

Stupid #CSS question because I’m losing my mind here: why isn’t calc(.5*a) working? What am I missing? It doesn’t seem to be working in any browser.

Ana is trying to use calc(.5 * a) as a part of the relative color syntax, presumably to create semi transparent outlines. But it is not working because calc(.5 * a) is an invalid property value. As Valtteri Laitinen replied, it should actually be alpha in there instead of a.

.class {
	outline-color: rgb(from currentcolor r g b / calc(0.5 * a)); /* ❌ invalid */
	outline-color: rgb(
		from currentcolor r g b / calc(0.5 * alpha)
	); /* ✅ valid */
}

I re-read Heydon Pickering’s post on the HTML article element in the middle of writing the markup for a new website.

Heydon’s writing is so sharp and funny. Unmistakably theirs. No one else writes quite like them, and I’m here for it.

I was reading Manuel Matuzovic’s article on meta theme color and came across this snippet:

<style>
	:root {
		--theme: blue;
	}
</style>
<meta name="theme-color" content="var(--theme)" />

I wish it was possible to access custom properties outside the <style> tag in the <head>. It would keep things DRY.

In JavaScript, things get interesting when you need to sort strings that contain numbers in a way that matches human expectations.

const files = ['IMG_2.png', 'IMG_1.png', 'IMG_10.png', 'IMG_20.png'];
files.sort();
// Output: ['IMG_1.png', 'IMG_10.png', 'IMG_2.png', 'IMG_20.png']

This happens because, by default, when no compare function is provided, JavaScript’s array sort() method converts the elements into strings, then compares their sequences of UTF-16 code unit values.

This behaviour is well documented on MDN.

So, how do we sort arrays like the ones above in a more accurate, human-friendly order?

This is where the compare() method of the Intl.Collator API with the numeric: true option shines. It provides the natural sorting behaviour that correctly handles numbers alongside other characters.

When numeric: true is set, the collator detects numeric substrings inside the strings and parses those substrings as actual numbers, not as sequences of digits. And then it compares the numbers numerically, not character by character.

const naturalOrder = new Intl.Collator(undefined, {
	numeric: true,
}).compare;

const files = ['IMG_2.png', 'IMG_1.png', 'IMG_10.png', 'IMG_20.png'];
files.sort((a, b) => naturalOrder(a, b));
// Output: ['IMG_1.png', 'IMG_2.png', 'IMG_10.png', 'IMG_20.png']

Hat tip to Jan Miksovsky, whose zero dependencies SSG project led me to discover this.

Jim Nielsen on the personal connections formed on the internet.

You could search the world and find someone who saw what you see, felt what you feel, went through what you’re going through.

And how these connections are increasingly being lost when we prompt an impersonal LLM instead.

Today I learned, grid-auto-columns and grid-auto-rows size implicit tracks as well as any explicit tracks that are not explicitly sized by by grid-template-rows or grid-template-columns.

Until now, I was under the impression that grid-auto-rows and grid-auto-columns size only implicit grid tracks.

The grid-row grid-placement property is shorthand for grid-row-start and grid-row-end.

.grid-item {
	grid-row: 1/-1;
	/* is equivalent to */
	grid-row-start: 1;
	grid-row-end: -1;
}

In the above declaration, we use integers to position and size the grid item by line numbers.

As per the spec:

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

The important bit is the explicit grid. This begs the question …

What is the explicit grid?

As per the spec:

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container by specifying its explicit grid tracks.

Simply put, the explicit grid consists of manually defined rows and columns.

The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows/grid-auto-columns properties. If these properties don’t define any explicit tracks the explicit grid still contains one grid line in each axis.

That last bit is what leads to line -1 being the same line as 1 because the explicit grid still contains one grid line in each axis.

What is the implicit grid?

As Manuel Matuzovic puts it:

If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.

Conclusion

Paraphrasing Jen Simmons:

• -1 is the last line of the explicit grid
• If you haven’t defined any explicit rows, then all your rows are implicit
• For implicit rows, -1 is the same line as 1
• Define explicit rows and grid-row: 1/-1 will work as expected

Further Reading

• How does grid-row: 1 / -1 actually work?
• What defines an explicit grid?

I love this bit from the video where Jason quotes Enrique Peñalosa, the former mayor of Bogotá, Colombia:

A developed country is not where the poor have cars. It’s where the rich use public transportation.

But why is it important that wealthy people take public transportation? Because, as Jason mentions,

[…] for better or for worse, these people are likely to have the power and political influence to demand efficient service.

Karthik Srinivasan discusses how to use curation to build a personal brand and shares some steps to get started.

Karthik Srinivasan uses his experience with running as an analogy to emphasize the importance of consistently showing up in the context of personal branding.

I found the analogy effective and relatable, as I had a similar experience when I started running.

Jim Nielsen uses his experience with golf as a metaphor to explain that the key to success in web development comes from actual practice — building websites — rather than obsessing over what tools, frameworks and technologies others are using.