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

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.

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.

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.

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.

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.

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.

Further reading:

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.

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.

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.

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.

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.

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.

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.

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