Links

In this excellent, data-driven talk, Alex Russell explains:

• What “winning” means for the web and why it’s a vital cause
• How the web is losing the competition today on mobile, despite its success on desktop
• The path forward: Getting things out of frameworks and using the web platform

Jeremy Wagner and Rachel Andrew explain how to use analytics to select a Baseline target and what to do when you don’t have any real user data.

In cases where there isn’t any real user data:

[…] you can get a general idea of support for different Baseline targets through RUM Archive Insights, even allowing you to filter down to the country level.

They also address a practical follow-up question: what to do about features that don’t meet your chosen Baseline target.

Baseline doesn’t prescribe a specific path here, but the authors suggest a useful framework for categorizing features based on their “failure mode”:

• Enhancement: If the feature is used in an unsupported browser, the experience is not broken. The experience could possibly be degraded, but may not likely be noticeable to the user. Example: loading="lazy".
• Additive: The feature provides some additive benefits that may be noticeable—such as changes in page styling or some functionality. The difference may not be noticeable to users if the feature is unsupported, barring comparison in a browser that does support it. Example: Subgrid
• Critical: If the feature is unsupported, the user will have a negative user experience—possibly even one that’s broken altogether. Example: File System Access API used as a central and necessary feature.

They also highlight Clearleft’s browser support policy, where they target Baseline Widely available while still evaluating whether newer features can be used as progressive enhancements before ruling them out entirely.

I just saw Jason Pamental’s excellent talk on ‘The Life of <p>’. In this talk, Jason traces the evolution of paragraph design in print and shows how those typographic ideas can be applied using CSS.

There’s one moment during the Q&A where Jason mentions:

[…] you see the page gets small, but they don’t change the scale of the headers. So you end up with like an <h1> with one word per line. It’s a really awkward break. So I think proportion with varying screen size is probably the most overlooked thing right now that I’d want to see people think about more.

I wasn’t a web developer 10 years ago when Jason gave this talk, but with over five years of experience now, it’s striking that I only became aware of proportional type scaling as an idea in the last couple of years. Nowadays, I use utopia.fyi to create fluid type (and space) scales across viewport ranges, which helps address the problem Jason mentioned.

Underlying our browser support policy are two foundational principles:

1. Website content and core functionality should be accessible to everyone.
2. It’s okay for websites to look different in different browsers.

If content is unreadable in some browsers, that’s a bug that we will fix.

If content is displayed slightly differently in some browsers, we consider that to be a facet of the web, not a bug. This means that there will sometimes be subtle visual and functional differences from browser to browser. We deem this acceptable provided content and core functionality are unaffected.

Great talk by Andy Allen on how software designers can learn from game designers.

It reminded me of the Wheel by Adam Argyle, inspired by the arcade game Black Emperor. The game feel is so strong that I find myself scrolling up and down again and again just to play with it and experience that delightful bounce effect.

Jason Lengstorf on how to get hired as a developer:

• Document what you learn publicly — consistency matters more than polish.
• Show your work — CodePen demos, personal projects or tutorials all count.
• Participate in communities — Bluesky, Mastodon, Discord.

Instead of seeing us as people who brought valuable knowledge and expertise to the project, they saw us as the hands that would execute their vision.

The above bit from Nic captures a dynamic I want to address upfront with clients, so they never treat me as just a pair of hands.

Then there’s the this bit, which really resonated with me (because I’ve been there too and it sucks):

While I personally believe in the value of good design, I also believe there are a lot of smoke-and-mirrors in the industry, and I hated the thought that I might have inadvertently contributed to it. Even if the client is happy, it didn’t meet my internal bar for a quality product worth sticking my name on, and I feel like I’ve let down both the client and the end-users.

Nic mentions how they hope to avoid similar situations in the future by blogging:

By blogging, I’m putting a body of work out there that communicates my values and ethos. While much of the details of my client work has to remain private, these posts can be public, and hopefully they can help me find people who resonate with what I have to offer. Or you know, just be bold enough to communicate ‘Fuck off’ to those who don’t!

Roman Komarov on how they use an IIFE (Immediately Invoked Function Expression) to handle complex conditional rendering in .astro components.

---
const { linkText, isDiv = false } = Astro.props;
---

{
	(() => {
		const someContent = <a href="#hello">{linkText}</a>;
		return (
			<div class="wrapper">
				{isDiv ? (
					<div class="inner">{someContent}</div>
				) : (
					<span class="inner">{someContent}</span>
				)}
			</div>
		);
	})()
}

Loved this bit from Rahul Desai’s review of ‘Dhurandhar’:

[…] the term “fictional film inspired by real events” means that historical authenticity will be cited if the film-making is questioned, and fiction will be cited if the historical authenticity is questioned.

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 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" />

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.