Similarly we all love when the swifts visit (beautiful birds), so somebody started a group to get swift nest boxes made and installed collectively, then applied for subsidy funding, then got everyone to chip in such that people who couldn’t afford it could have their boxes paid for, and now suddenly we’re all writing to MPs and following the legislation to include swift nesting sites in new build houses. Etc.

It’s called collective efficacy, the belief that you can make a difference by acting together.

Every time you are inclined to use the word “teach”, replace it with “learn”. That is, instead of saying, “I teach”, say “They learn”. It’s very easy to determine what you teach; you can just fill slides with text and claim to have taught. Shift your focus to determining how you know whether they learned what you claim to have taught (or indeed anything at all!). That is much harder, but that is also the real objective of any educator.

The problem is that Live Text, “Select text in images to copy or take action,” is enabled by default on iOS devices (Settings → General → Language & Region), which can interfere with the contextual menu in Safari. Pressing down on the above link may select the text inside the image instead of selecting the link URL.

Just spent some time playing with OKpalette, a color extraction tool by David Aerne, and I’m in awe.

The 3D spinning text pulled me in immediately. I assumed it was done using JavaScript because it reminded me of the Space Type Generator. Finding out it’s done using CSS genuinely blew my mind. David was kind enough to share a CodePen demo.

I loved the animations and the subtle use of audio while interacting with the UI. Then I watched David’s walkthrough / demo and realized the functionality is just as beautiful as the visuals, if not more.

Excellent framing from Jim Nielsen, building on Jake Nations’ talk about shipping code we don’t fully understand.

Easy means you can do with little effort.

Simple means you can understand what you do with little effort.

The reasonable man adapts himself to the world; the unreasonable man persists in trying to adapt the world to himself. Therefore, all progress depends on the unreasonable man.

I learned about this quote by George Bernard Shaw from Veritasium’s video on The World’s Most Important Machine

It instantly reminded me of the Kaun Hai Tu scene from Gully Boy, where Murad embodies Shaw’s “unreasonable man.” In this scene, Murad is confronted by his father after quitting his job to pursue his dream. The father tries to convince Murad that his dreams need to match his reality. Murad then answers that he will change his reality to match his dreams.

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.

Earlier this month, I noted down Jason’s advice on how to get hired as a developer. I’d also like to add the following point from @brandon:

use the product

this is one of the first questions i ask in the interview anyways, ship and share something you’ve built on top of cloudflare. this alone will set you apart from most of the candidates, and it will show you are genuinely interested.

This complements Jason’s advice well, because it turns “show your work” into something concrete and product-specific.

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.

Today I learned that on macOS, with the default scrollbar setting enabled, classic scrollbars are shown automatically when a mouse is connected. I used to believe that, mouse or not, users needed to explicitly change the scrollbar appearance to get the classic scrollbars.

This is relevant for everyone who builds websites because when classic scrollbars are shown, the value of 100vw includes the scrollbar width. This can cause an unexpected horizontal overflow if the layout relies on 100vw for full-width elements. Additionally, they affect media queries, which assume scrollbars don’t exist when evaluating viewport width.

Having said that, these aren’t new issues. Classic scrollbars are shown by default on Windows, where the same behaviours apply.

Further reading:

• The large, small, and dynamic viewport units | Blog | web.dev
• New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine
• Get the scrollbar width using only CSS
• Full-Bleed Layout with Modern CSS – Frontend Masters Blog

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.

I was reading the MDN docs for element.querySelector() and learnt something totally unexpected about selector scope when this method is called on an element.

Let’s say I have the following HTML:

<div>
	<p>This is a paragraph and it has a <span>span inside</span> it.</p>
</div>

<script>
	const baseElement = document.querySelector('p');
	// Note: We are querying relative to the <p> element, not the document
	const matchedSpan = baseElement.querySelector('div span');
	console.log(matchedSpan);
</script>

Once the above JavaScript is executed, what do you expect to happen?

I expected it to log null to the console. My reasoning was simple: I am calling the method on baseElement (the <p> tag), and that paragraph clearly does not contain a <div> inside it.

But here’s what actually gets logged to the console:

<span>span inside</span>

This surprisingly returns the <span> from inside the <p>.

Why does this happen? MDN explains it like this:

[…] selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement.

Note: element.querySelectorAll() also applies selector scoping in the same manner.

If we want to restrict the selector to the element on which it is called then we should use the :scope pseudo-class.

const scopedQuery = baseElement.querySelector(':scope div span');
console.log(scopedQuery); // Returns null, as expected

As mentioned in the MDN docs for :scope, this works because:

When used within a DOM API call — such as querySelector(), querySelectorAll(), matches(), or Element.closest() — :scope matches the element on which the method was called.

I just watched Homebound, Neeraj Ghaywan’s second feature film. And it left me devastated.

The film is based on Basharat Peer’s article ‘Taking Amrit Home’ (which has since been retitled ‘A Friendship, a Pandemic and a Death Beside the Highway’).

I highly recommend this film. But if you can’t watch it for whatever reason you must read the article.

I’m a web designer-developer who has mostly designed and built marketing websites for small to medium-sized businesses. I started designing because my clients didn’t have a designer and expected me to handle everything. But I’ve always felt like an imposter. It’s not a nice feeling.

I’m really determined to change that, which is why I just bought Scott Riley’s course, Mindful Design. Piccalilli is running a Black Friday sale on all their courses, including Mindful Design, and I can wholeheartedly recommend them.