Arpit's Blog

Mon, 09 Mar 2026 16:04:00 GMT

I liked Kevin Powell’s video on the slide-in nav. In the video, Kevin demonstrates how to create a sticky header that initially scrolls away (when the user scrolls the page), then slides back into view as a sticky top bar once the user has scrolled past a certain threshold.

He achieves the slide-in effect using scroll state queries and a negative inset-block-start on the sticky positioned element.

He also recreates the effect using scroll driven animations. But it’s not an ideal solution, since as he puts it speaking about the header, “if I stop at the wrong spot, it’s like halfway there”. That is definitely a usability issue.

I remembered Bramus sharing his post on scroll triggered animations. As Bramus mentions, scroll triggered animations “trigger when crossing a specific scroll offset”. This is exactly what’s required to avoid the problem Kevin mentioned above.

Here’s my CodePen demo achieving the slide-in effect using scroll triggered animations.

I tested it on Chrome Canary v147. No other browser seems to support it yet, not even Chrome v145 even though Bramus’ article says it ships with v145. On browsers that don’t support scroll triggered animations, there is no slide-in effect but the header remains sticky.

Underlining Links With CSS | Always Twisted

Wed, 25 Feb 2026 11:45:00 GMT

Today I learned about the CSS property text-underline-position. As Stuart mentions, the under value forces the underline to sit below all the descenders, giving you a consistent baseline.

a {
	text-underline-position: under;
}

Modular: The Claude C Compiler: What It Reveals About the Future of Software

Wed, 25 Feb 2026 08:29:00 GMT

Good software depends on judgment, communication, and clear abstraction. AI has amplified this.

AI coding is automation of implementation, so design and stewardship become more important.

Wed, 25 Feb 2026 04:40:00 GMT

I keep forgetting how each of the following CSS values rolls back a declaration to a different point in the cascade. It was about time I jotted it down for my future self before it slips my mind again for the 1000th time.

initial: Applies the initial value as defined in the CSS spec
unset: Inherits or falls back to the initial value
revert: Reverts to the user agent's default value
revert-layer: Rolls back to the value in a previous cascade layer

Mon, 23 Feb 2026 05:52:00 GMT

I’ll be attending State of the Browser for the first time, remotely! 💃🏻

Really looking forward to Bramus’ talk on CSS Anchor Positioning and Zach’s talk on reducing the JS footprint.

zachleat’s Twitter Archive—№ 20,184

Tue, 10 Feb 2026 22:33:00 GMT

Zach Leatherman on frontend architecture and building for longevity amid framework churn:

👏 Hire someone that’s good at HTML and CSS to build components independent of JS frameworks 👏

Plug components into a JS framework and layer on behavior later

Pay HTML/CSS devs what they deserve for giving part of your codebase longer shelf life than unpasteurized milk

Mon, 09 Feb 2026 09:55:00 GMT

Today I learned that setting type="reset" on a <button> element in HTML creates a reset button that, when activated, immediately clears all form data, resetting it to its initial state.

This could have been useful in the context of a search form. But <input type="search"> already provides a native clear button for that single field.

Saying “No” In an Age of Abundance - Jim Nielsen’s Blog

Wed, 04 Feb 2026 05:05:00 GMT

It’s never been a good idea to ship everything you think of. Every addition accretes complexity and comes with a cognitive cost.

Maybe we need to reframe the concept of scarcity from us, the makers of software, to them, the users of software. Their resources are what matter most:

Attention (too many features and they can’t all be used, or even tried)

Stability (too much frequent change is an impediment to learning a product)

Clarity (too many options creates confusion and paralysis)

Coherence (too many plots and subplots cannot tell a unified story)

Singing the gospel of collective efficacy (Interconnected)

Mon, 02 Feb 2026 00:45:00 GMT

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.

Pedagogy Recommendations

Fri, 30 Jan 2026 05:23:00 GMT

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.

Web development tip: disable pointer events on link images

Thu, 29 Jan 2026 13:54:00 GMT

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.

Fri, 23 Jan 2026 03:46:00 GMT

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.

Easy Measures Doing, Simple Measures Understanding - Jim Nielsen’s Blog

Thu, 22 Jan 2026 11:12:00 GMT

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.

Tue, 13 Jan 2026 15:25:00 GMT

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.

Reckoning: Frontend's Lost Decade | Alex Russell | performance.now() 2024 - YouTube

Fri, 09 Jan 2026 13:19:00 GMT

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

How to choose your Baseline target | Articles | web.dev

Mon, 05 Jan 2026 08:22:00 GMT

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.

Jason Pamental - The Life of p - YouTube

Thu, 01 Jan 2026 16:33:00 GMT

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.

Browser support at Clearleft

Tue, 30 Dec 2025 09:57:00 GMT

Underlying our browser support policy are two foundational principles:

Website content and core functionality should be accessible to everyone.

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.

Mon, 29 Dec 2025 04:22:00 GMT

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.

Config 2024: Serious play (Andy Allen, Software Designer, !Boring) | Figma - YouTube

Mon, 22 Dec 2025 16:33:00 GMT

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.

do THIS to get a developer job in 2024 - YouTube

Fri, 19 Dec 2025 10:58:00 GMT

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.

Thu, 18 Dec 2025 15:37:00 GMT

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.

The f*** off contact page - Nic Chan

Mon, 08 Dec 2025 10:51:00 GMT

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!

Conditional JSX in Astro — Roma’s Unpolished Posts

Mon, 08 Dec 2025 07:21:00 GMT

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>
		);
	})()
}

'Dhurandhar' Movie Review: No Love Lost or Found In Ranveer Singh's Spy Thriller

Sat, 06 Dec 2025 13:23:00 GMT

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.

Selector scoping in element.querySelector() and element.querySelectorAll()

Tue, 02 Dec 2025 09:27:00 GMT

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.

Sun, 30 Nov 2025 17:05:00 GMT

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.

Fri, 28 Nov 2025 04:44:00 GMT

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.

HTML and Typescript.

Thu, 20 Nov 2025 05:52:00 GMT

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.

Using responsive images in HTML - HTML | MDN

Mon, 17 Nov 2025 09:04:00 GMT

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.

The difference between @ts-ignore and @ts-expect-error | Stefan Judis Web Development

Fri, 14 Nov 2025 12:48:00 GMT

@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.

Safari drops support for the theme-color meta tag

Sun, 09 Nov 2025 11:00:00 GMT

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).

Every site needs a Links Page / Why linking matters | Melon's Thoughts

Fri, 07 Nov 2025 13:05:00 GMT

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.

A cartoonist's review of AI art - The Oatmeal

Tue, 04 Nov 2025 16:34:00 GMT

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.

View transitions: Handling aspect ratio changes

Thu, 30 Oct 2025 03:50:00 GMT

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: Why buses represent democracy in action - YouTube

Wed, 29 Oct 2025 11:16:00 GMT

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.

How I used 11ty to power a world-class museum's digital infrastructure with Nic Chan | 11ty Meetup - YouTube

Mon, 27 Oct 2025 14:00:00 GMT

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

Thu, 23 Oct 2025 13:13:00 GMT

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.

Mon, 20 Oct 2025 23:09:00 GMT

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.

The Simple Algorithm That Ants Use to Build Bridges | Quanta Magazine

Thu, 16 Oct 2025 13:05:00 GMT

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.

Astro RSS MDX

Wed, 15 Oct 2025 04:18:00 GMT

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.

An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

Mon, 13 Oct 2025 14:27:00 GMT

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

Mon, 13 Oct 2025 05:02:00 GMT

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.

Sun, 12 Oct 2025 12:55:00 GMT

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.

While you’re fixing the fun stuff, fix the important stuff too - Piccalilli

Wed, 01 Oct 2025 12:57:00 GMT

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.

Adactio: Journal—Mind set

Wed, 01 Oct 2025 09:21:00 GMT

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:

If we still disagree, now we’re a mile away from each other, and

I’ve got their shoes.

Wed, 01 Oct 2025 05:18:00 GMT

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.

Jimmy Kimmel & the FCC: Last Week Tonight with John Oliver (HBO) - YouTube

Mon, 22 Sep 2025 12:55:00 GMT

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.

Browsing the web - Learn web development | MDN

Mon, 22 Sep 2025 06:05:00 GMT

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.

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

Mon, 22 Sep 2025 05:48:00 GMT

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.

Wed, 17 Sep 2025 03:01:00 GMT

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 */
}

Thu, 14 Aug 2025 02:42:00 GMT

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.

Wed, 13 Aug 2025 05:03:00 GMT

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.

Natural sorting of strings that contain numbers in JavaScript

Fri, 18 Apr 2025 00:00:00 GMT

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.

Missed Connections - Jim Nielsen’s Blog

Tue, 18 Feb 2025 00:00:00 GMT

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.

Wed, 05 Feb 2025 00:00:00 GMT

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.

Why is `grid-row: 1/-1` not working?

Wed, 05 Feb 2025 00:00:00 GMT

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

Why Swiss Trains are the Best in Europe - YouTube

Thu, 29 Aug 2024 00:00:00 GMT

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.

An idea to power your personal brand’s content game | beastoftraal.com

Mon, 26 Aug 2024 00:00:00 GMT

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

An underrated tip for personal branding | beastoftraal.com

Mon, 26 Aug 2024 00:00:00 GMT

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.

Just Build Websites - Jim Nielsen’s Blog

Tue, 20 Aug 2024 00:00:00 GMT

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.

Personal branding is like your credit score

Tue, 20 Aug 2024 00:00:00 GMT

Personal branding is about bringing focus to your touchpoints with the world (of strangers) so that the right kinds of people can find you and remember you. You make use of the attention when you really need it. But it is good to be in the consideration set.

Redesigning Piccalilli: the first part of the design process

Mon, 29 Jul 2024 00:00:00 GMT

As a freelancer, I’m always eager to learn how other folks work. Piccalilli’s behind-the-scenes look at their redesign is extremely useful.

Crowdstruck (Windows Outage) - Computerphile - YouTube

Wed, 24 Jul 2024 00:00:00 GMT

Dr. Steve Bagley explains in layman’s terms what an operating system is:

[…] Imagine the difference between a house and a hotel. If you own a house, you can decide how to use the rooms, what color to paint the walls. But if that house becomes a hotel, you might give people the option to change the air conditioning temperature, but you wouldn’t let them fit air conditioning into their room without permission from the building owner. And it’s a bit the same with a computer. The operating system is a bit like the people who run the hotel in that it’s controlling all the resources for the system. So if Microsoft Word crashes, these days it’s not going to take down your computer because the operating system is set up in such a way that it can access resources that have been assigned to it and clean that up, and everything else continues hunky-dory.

And what happens if the operating system crashes and you get the blue screen of death (BSoD):

At that point, the thing that’s in charge of controlling everything has gone wrong, is corrupted, and can no longer run. So there’s pretty much no option at that point other than to halt the machine, say something’s gone wrong, and let the user reboot and restart.

Mon, 22 Jul 2024 00:00:00 GMT

I got the opportunity to proofread Ahmad Shadeed’s latest article on CSS Grid Areas before its release. It inspired me to refactor the code on my site to use grid-template-areas.

Testing HTML With Modern CSS

Sat, 20 Jul 2024 00:00:00 GMT

Wow! Who knew you could use modern CSS to test HTML? Well, Heydon certainly did!

Styling Tables the Modern CSS Way - Piccalilli

Fri, 19 Jul 2024 00:00:00 GMT

This article by Michelle Barker for Piccalilli is a great read. I learned about a bunch of new CSS properties that I didn’t know existed.

Blinded By the Light DOM – Eric’s Archived Thoughts

Tue, 25 Jun 2024 00:00:00 GMT

Eric Meyer describes his journey of learning about and implementing fully-Light-DOM web components.

You just take some normal HTML markup, wrap it with a custom element, and then write some JS to add capabilities which you can then style with regular CSS! Everything’s of the Light Side of the Web. No need to pierce the Vale of Shadows or whatever.

Adactio: Journal—HTML web components

Tue, 25 Jun 2024 00:00:00 GMT

Jeremy Keith discusses what makes a custom element an HTML web component.

If your custom element is empty, it’s not an HTML web component. But if you’re using a custom element to extend existing markup, that’s an HTML web component.

React encouraged a mindset of replacement: “forgot [sic] what browsers can do; do everything in a React component instead, even if you’re reinventing the wheel.”

HTML web components encourage a mindset of augmentation instead.

What questions to ask in an interview with a PM | Hindustan Times

Sun, 26 May 2024 00:00:00 GMT

In this piece, Karan Thapar emphasizes that:

Interviewers must remember they are asking questions on behalf of the public.
Questions must be relevant, significant, and timely to demand accountability.
The interviewer must persistently push for answers instead of allowing monologues or tangents.
The interview should not serve as a platform to attack critics, but rather an occasion to make the PM respond to valid criticisms.
The interviewer and PM must interact as equals, with the former feeling empowered to challenge evasions or dubious claims.

You Want border-color: transparent, Not border: none – Frontend Masters Blog

Tue, 21 May 2024 00:00:00 GMT

In this article, Dave Rupert explains how testing in forced colors mode improves accessibility for users and reveals design flaws, such as excessive reliance on color cues.

Digging Into The Display Property: The Two Values Of Display — Smashing Magazine

Mon, 13 May 2024 00:00:00 GMT

In Level 3 of the Display specification, the value of display is defined as two keywords. These keywords define the outer value of display, which will be inline or block and therefore define how the element behaves in the layout alongside other elements. They also define the inner value of the element — or how the direct children of that element behave.

This means that when you say display: grid, what you are really saying is display: block grid. You are asking for a block level grid container. An element that will have all of the block attributes — you can give it height and width, margin and padding, and it will stretch to fill the container. The children of that container, however, have been given the inner value of grid so they become grid items. How those grid items behave is defined in the CSS Grid Specification: the display spec gives us a way to tell the browser that this is the layout method we want to use.

As simply put by Rachel:

When you define layout on a box in CSS, you are defining what happens to this box in terms of how it behaves in relation to all of the other boxes in the layout. You are also defining how the children of that box behave.

Transparent borders

Sun, 12 May 2024 00:00:00 GMT

In web development, small design decisions can have a significant impact on accessibility and user experience. One such decision is how we handle borders on interactive elements.

The problem with border: none

When styling interactive elements like buttons, it’s common practice to remove default borders using border: none. However, this approach can lead to accessibility issues, especially in high contrast mode. As demonstrated in the image below, removing the border entirely can cause buttons to appear as floating text on the page, making it difficult for users with low vision to distinguish interactive elements.

Dave Rupert explains the importance of the default border and why it exists:

In the case of interactive form controls (inputs, textareas, buttons, etc.), those pesky borders were put there because they have an accessibility benefit when using High Contrast Mode, a feature used by 30.6% of low-vision users.

The transparent border solution

To address this issue, Dave recommends making the border or outline transparent instead of removing it entirely. This can be achieved with the following CSS:

button {
	border-color: transparent;
}

As demonstrated in the image below, this approach is effective for several reasons. First, sighted users will not notice the difference. Second, as Kilian Valkhof explains, in forced color mode, the border color or outline color “will be overwritten with the current text color, making it nicely visible again without needing any special adaption or re-styling for forced color mode.”

User experience benefits

Using transparent borders offers additional benefits for user experience. Consider hover effects, for example.

button {
	border: none;
}

button:hover {
	border: 2px solid navy;
}

In such situations, applying a visible border on hover can inadvertently change the element’s dimensions. This change in size can result in a jarring visual effect.

By setting a transparent border in the default state, we ensure smooth transitions and consistent element sizes across different states.

<div>
	<button class="no-border-btn">Button with no border</button>
	<button class="transparent-border-btn">Button with transparent border</button>
</div>

.no-border-btn {
	border: none;

	&:hover {
		border: 2px solid navy;
	}
}

.transparent-border-btn {
	border: 2px solid transparent;

	&:hover {
		border-color: navy;
	}
}

Implications for design systems

Transparent borders are also valuable in the context of themeable design systems. Brad Frost elaborates:

When supporting multiple theme, it can be common for some themes to use borders while others don’t. This flexibility is great! Each brand is able to express themselves how they see fit. But if implemented using different border widths, shifts in the box model happen.

By using border-color: transparent for themes without visible borders, designers and developers can maintain consistent element sizes across different variants and themes. This approach provides the flexibility to adapt the visual design while preserving the underlying structure and layout of the components.

Conclusion

Implementing transparent borders in your CSS addresses crucial accessibility concerns, enhances user experience across different display modes, and provides the flexibility needed for robust, adaptable design systems.

Embrace the Platform – Bram.us

Thu, 09 May 2024 00:00:00 GMT

If there’s one thing you can do to make your websites better, it is to embrace what the web platform gives you: HTML, CSS, and JavaScript — in that order. Apply the Rule of Least Power. Build with progressive enhancement in mind. You’ll be a happier developer. Your visitors will be happier, too, as things work as expected.

The Case For Design Engineers, Pt. II - Jim Nielsen’s Blog

Tue, 02 Apr 2024 00:00:00 GMT

Jim Nielsen makes the case for design engineers as professionals who do design work with code. He also emphasizes the limitations of traditional design tools, which often produce static images that don’t fully capture the dynamic nature of web interactions, and advocates for designing in the browser instead.

You need someone who can do design work with code.

That’s right: design work with code.

Pixels of an interface from a GUI tool are a static representations of a dynamic form. It’s the difference between a picture of me and the living, breathing, moving me.

Design engineers don’t just push pixels around in a GUI tool, they do it in a web browser — the medium of delivery — designing not just the visuals but the interactions that make sense for a living, breathing, moving interface.

Why I am an atheist: Bhagat Singh's essay

Sat, 20 Jan 2024 00:00:00 GMT

This is one essay I re-read every year. In it, amongst other things, Bhagat Singh challenges blind faith and advocates for reason and critical thinking.

Bhagat Singh on the importance of critical thinking and the dangers of blind faith:

Criticism and independent thinking are the two indispensable qualities of a revolutionary. Because Mahatamaji is great, therefore none should criticise him. Because he has risen above, therefore everything he says —may be in the field of Politics or Religion, Economics or Ethics— is right. Whether you are convinced or not you must say: “Yes, that’s true”. This mentality does not lead towards progress. It is rather too obviously reactionary.

[…] Any man who stands for progress has to criticise, disbelieve and challenge every item of the old faith. Item by item he has to reason out every nook and corner of the prevailing faith. If after considerable reasoning one is led to believe in any theory or philosophy, his faith is welcomed. His reasoning can be mistaken, wrong, misled, and sometimes fallacious. But he is liable to correction because reason is the guiding star of his life. But mere faith and blind faith is dangerous: it dulls the brain and makes a man reactionary. A man who claims to be a realist has to challenge the whole of the ancient faith. If it does not stand the onslaught of reason it crumbles down.

Bhagat Singh on the Hindu concept of sufferings as a divine punishment for sins committed in the previous life:

Poverty is a sin, it is a punishment. I ask you how far would you appreciate a criminologist, a jurist or a legislator who proposes such measures of punishment which shall inevitably force men to commit more offences. Had not your God thought of this, or he also had to learn these things by experience, but at the cost of untold sufferings to be borne by humanity?

Bhagat Singh on divine inaction:

I ask why your omnipotent God does not stop every man when he is committing any sin or offence? He can do it quite easily. Why did he not kill warlords or kill the fury of war in them and thus avoid the catastrophe hurled down on the head of humanity by the Great War? Why does he not just produce a certain sentiment in the mind of the British people to liberate India? Why does he not infuse the altruistic enthusiasm in the hearts of all capitalists to forego their rights of personal possessions of means of production and thus redeem the whole labouring community —nay, the whole human society, from the bondage of capitalism? You want to reason out the practicability of socialist theory; I leave it for your almighty to enforce it. People recognise the merits of socialism in as much as the general welfare is concerned. They oppose it under the pretext of its being impracticable. Let the Almighty step in and arrange everything in an orderly fashion. Now don’t try to advance round about arguments, they are out of order. Let me tell you, British rule is here not because God wills it, but because they possess power and we do not dare to oppose them. Not that it is with the help of God that they are keeping us under their subjection, but it is with the help of guns and rifles, bomb and bullets, police and militia, and our apathy, that they are successfully committing the most deplorable sin against society —the outrageous exploitation of one nation by another. Where is God? What is he doing? Is he enjoying all these woes of human race? A Nero; a Changez!! Down with him!

Bhagat Singh on the belief in God:

If no God existed, how did the people come to believe in him? My answer is clear and brief. As they came to believe in ghosts and evil spirits; the only difference is that belief in God is almost universal and the philosophy well developed. Unlike certain of the radicals I would not attribute its origin to the ingenuity of the exploiters who wanted to keep the people under their subjection by preaching the existence of a supreme being and then claiming an authority and sanction from him for their privileged positions, though I do not differ with them on the essential point that all faiths, religions, creeds and such other institutions became in turn the mere supporters of the tyrannical and exploiting institutions, men and classes. Rebellion against king is always a sin, according to every religion.

As regards the origin of God, my own idea is that having realised the limitation of man, his weaknesses and shortcoming having been taken into consideration, God was brought into imaginary existence to encourage man to face boldly all the trying circumstances, to meet all dangers manfully and to check and restrain his outbursts in prosperity and affluence. God, both will his private laws and parental generosity, was imagined and painted in greater details. He was to serve as a deterrent factor when his fury and private laws were discussed, so that man may not become a danger to society. He was to serve as a father, mother, sister and brother, friend and helper, when his parental qualifications were to be explained. So that when man be in great distress, having been betrayed and deserted by all friends, he may find consolation in the idea that an ever-true friend, was still there to help him, to support him and that he was almighty and could do anything. Really that was useful to the society in the primitive age. The idea of God is helpful to man in distress.

He wrote all this while in jail when he was just a 23 year old.

Fri, 19 Jan 2024 01:30:00 GMT

Thanks to Kevin Powell, today I learned that the text-underline-offset property is named so because it only applies to underlines and not other text-decoration-line values like overline and line-through.

<a href="https://example.com">Example</a>

a {
	text-decoration-line: underline overline; /* We can set multiple line-decoration properties at once */
	text-underline-offset: 16px; /* Only impacts underline */
}

Arpit's Blog

Underlining Links With CSS | Always Twisted

Modular: The Claude C Compiler: What It Reveals About the Future of Software

zachleat’s Twitter Archive—№ 20,184

Saying “No” In an Age of Abundance - Jim Nielsen’s Blog

Singing the gospel of collective efficacy (Interconnected)

Pedagogy Recommendations

Web development tip: disable pointer events on link images

Easy Measures Doing, Simple Measures Understanding - Jim Nielsen’s Blog

Reckoning: Frontend's Lost Decade | Alex Russell | performance.now() 2024 - YouTube

How to choose your Baseline target | Articles | web.dev

Jason Pamental - The Life of p - YouTube

Browser support at Clearleft

Config 2024: Serious play (Andy Allen, Software Designer, !Boring) | Figma - YouTube

do THIS to get a developer job in 2024 - YouTube

The f*** off contact page - Nic Chan

Conditional JSX in Astro — Roma’s Unpolished Posts

'Dhurandhar' Movie Review: No Love Lost or Found In Ranveer Singh's Spy Thriller

Selector scoping in element.querySelector() and element.querySelectorAll()

HTML and Typescript.

Using responsive images in HTML - HTML | MDN

The difference between @ts-ignore and @ts-expect-error | Stefan Judis Web Development

Safari drops support for the theme-color meta tag

Every site needs a Links Page / Why linking matters | Melon's Thoughts

A cartoonist's review of AI art - The Oatmeal

View transitions: Handling aspect ratio changes

Enrique Peñalosa: Why buses represent democracy in action - YouTube

How I used 11ty to power a world-class museum's digital infrastructure with Nic Chan | 11ty Meetup - YouTube

The Simple Algorithm That Ants Use to Build Bridges | Quanta Magazine

Astro RSS MDX

An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

While you’re fixing the fun stuff, fix the important stuff too - Piccalilli

Adactio: Journal—Mind set

Jimmy Kimmel & the FCC: Last Week Tonight with John Oliver (HBO) - YouTube

Browsing the web - Learn web development | MDN

Natural sorting of strings that contain numbers in JavaScript

Missed Connections - Jim Nielsen’s Blog

Why is `grid-row: 1/-1` not working?

What is the explicit grid?

What is the implicit grid?

Conclusion

Further Reading

Why Swiss Trains are the Best in Europe - YouTube

An idea to power your personal brand’s content game | beastoftraal.com

An underrated tip for personal branding | beastoftraal.com

Just Build Websites - Jim Nielsen’s Blog

Personal branding is like your credit score

Redesigning Piccalilli: the first part of the design process

Crowdstruck (Windows Outage) - Computerphile - YouTube

Testing HTML With Modern CSS

Styling Tables the Modern CSS Way - Piccalilli

Blinded By the Light DOM – Eric’s Archived Thoughts

Adactio: Journal—HTML web components

What questions to ask in an interview with a PM | Hindustan Times

You Want border-color: transparent, Not border: none – Frontend Masters Blog

Digging Into The Display Property: The Two Values Of Display — Smashing Magazine

Transparent borders

The problem with border: none

The transparent border solution

User experience benefits

Implications for design systems

Conclusion

Embrace the Platform – Bram.us

The Case For Design Engineers, Pt. II - Jim Nielsen’s Blog

Why I am an atheist: Bhagat Singh's essay