Arpit's Blog

Wed, 02 Sep 2026 10:26:00 GMT

tabindex="-1" (or any negative value) makes an element focusable if it isn’t already, and removes it from the tab order. It can still receive focus programmatically or by click, but not via the Tab key.

Wed, 02 Sep 2026 05:14:00 GMT

Today I learned that modal <dialog>s opened with showModal() can have their own <h1>.

I discovered this while reading Modern Web Guidance’s HTML guide. I was skeptical at first because it’s bad practice to have multiple <h1>s on a single web page.

But this exception for modal dialogs made sense when I learned what showModal() does. It makes the rest of the page inert and as mentioned on MDN, inert HTML elements and their flat tree descendants are hidden from assistive technologies as they are excluded from the accessibility tree. So while the modal dialog is open there is no other <h1> to compete with.

I’m not sure if there is consensus on this because I have seen many examples where an <h2> was used instead.

Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS | utilitybend

Mon, 31 Aug 2026 11:31:00 GMT

Excellent article by Brecht De Ruyte on Modern Web Guidance: specifically what it is, how it works and how he pairs it with his own skills.

Sun, 30 Aug 2026 04:48:00 GMT

Hemant Mohapatra on X:

The curse of discipline is that every day looks the same. The curse of indiscipline is that every year does.

CSS value resolution process

Thu, 27 Aug 2026 09:25:00 GMT

Once the browser has parsed a document and built the DOM tree, it has to assign a value to every property for every element in the flat tree ¹, and in turn for every box those elements generate.

The final value of a CSS property for a given element is the result of a multi-step calculation:

1. Filtering:: Collect all declarations that apply to a given element; → Output: declared values (zero or many per property)
2. Cascading:: For each property, sort by precedence and resolve competing declarations; → Output: cascaded value (at most one; may be none)
3. Defaulting:: Supply a value where the cascade produced none (inheritance or initial value), and resolve the CSS-wide keywords ² when they are the cascaded value of a property; → Output: specified value

This results in exactly one specified value for every property (including custom properties) on every element. The remaining stages work out how those styles interact and what actually gets painted.

4. Resolving:: Absolutise the specified values as far as possible without layout ³; → Output: computed values (this is what inherits to children)
5. Formatting:: Complete the remaining calculations, which require laying out the document; → Output: used values ⁴
6. Constraining:: Adjust the used values based on what the rendering environment can actually do; → Output: actual values

The DOM tree with any shadow trees flattened in ↩
initial, inherit, unset, revert ↩
For e.g. width: auto computes to auto, because you can’t resolve it without knowing the ancestors’ layout; the used value is a real length like 100px. ↩
Used values only exist for properties that apply to that element or box type. For e.g. flex has no used value on an element that isn’t a flex item. ↩

Pseudo-elements are not valid inside :is(), :where(), and &

Thu, 20 Aug 2026 13:59:00 GMT

A pseudo-element is not a valid selector inside :is() or :where(). As per the Selectors Level 4 spec:

Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is().

The nesting selector & behaves the same way. It desugars to the parent rule’s selector list wrapped in :is().

However, neither of them fails loudly. :is() and :where() take a forgiving selector list, so an invalid argument is dropped and the rest of the rule carries on. Similarly, nesting inside a pseudo-element rule parses fine. The nested style rule just never matches anything, unless the parent list also contains non-pseudo-element selectors.

/* exmaple 1 */
.card::before {
	content: '';

	.dark & {
		color: red; /* `&` can't represent `.card::before`, so this matches nothing */
	}
}

Either hoist the element out to the top level.

/* exmaple 2 */
.card::before {
	content: '';
}

.dark .card::before {
	color: red;
}

Or restructure so & refers to the element and the pseudo-element is nested in it.

/* exmaple 3 */
.card {
	&::before {
		content: '';
	}

	.dark &::before {
		color: red;
	}
}

A pseudo-element in the parent selector list doesn’t poison the whole list. & drops just that entry and still represents the rest.

/* exmaple 4 */
.card,
.card::before {
	color: black;

	.dark & {
		color: red; /* matches `.card`, but not `.card::before` */
	}
}

The nested rule desugars to .dark :is(.card, .card::before), and the forgiving list throws out the pseudo-element, leaving .dark :is(.card). So the element turns red while its ::before stays black.

From Chrome 130 / Safari 18.2 / Firefox 132 and onwards, bare declarations nested inside an at-rule are the exception. They do apply to the pseudo-element.

/* exmaple 5 */
.card::before {
	content: '';
	color: black;

	@media (prefers-color-scheme: dark) {
		color: white; /* applies to `.card::before` */
	}
}

Wrap those same declarations in & { ... } and they stop applying.

/* exmaple 6 */
.card::before {
	content: '';
	color: black;

	@media (prefers-color-scheme: dark) {
		& {
			color: white; /* matches nothing */
		}
	}
}

So why does example 6 not work?

The reason is that declarations can’t sit loose inside a nested at-rule as far as the CSSOM is concerned. A CSSMediaRule exposes rules, and declarations only live on a style rule, so the parser has to wrap them in something. Examples 5 and 6 differ in what that something is.

Example 5 wraps them in a nested declarations rule:

It matches the exact same elements and pseudo-elements as its parent style rule, with the same specificity behavior.

Whereas example 6 wraps them in & { ... } and & obeys selector rules: it desugars to :is(.card::before), which can’t represent the pseudo-element, so nothing matches.

Make It Work vs. Make It Good - Jim Nielsen’s Blog

Wed, 19 Aug 2026 17:16:00 GMT

I love how Jim Nielsen articulates the difference between making it work and making it good. “Does it work?” is exactly the kind of signal an LLM can be trained against: the tests pass or they don’t. There’s no equivalent for “Is it good?”, is there?

“Make it work” is the first 90% of the work. “Make it good” is the other 90%.

How To Use an Emoji as a Favicon Easily | CSS-Tricks

Tue, 18 Aug 2026 04:41:00 GMT

Here’s the one-liner Chris Coyier uses:

<link
	rel="icon"
	href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>"
/>

Accidental anonymity - macwright.com

Sat, 15 Aug 2026 15:01:00 GMT

Tom MacWright on putting yourself out there and the fear of being found out for being imperfect:

putting your art, writing, expression out to be judged by others is an act of bravery as much as talent, and a lot of people lack bravery. Sorry to say it but if you need your work to be polished and beyond reproach, that’s a determination and character problem, not a skill problem.

Thu, 13 Aug 2026 11:53:00 GMT

Just watched Adam Argyle’s CSS Day talk on Contextualism. Excellent as usual.

Adam shared a mega list of things a component could and should respond to. He was so mad that most of our components (including his own) do almost none of it.

Slides

Mon, 10 Aug 2026 06:53:00 GMT

Today I learned, through Sara Soueidan’s course, Practical Accessibility, that spectacles/eyeglasses are a form of assistive technology.

I’ve worn glasses for most of my life, but I’ve never really thought of myself as someone who uses assistive technology.

It made me realize how easily we can think of assistive technology as something that exists for “people with disabilities,” rather than something many of us may rely on ourselves.

Don't be a meat proxy

Tue, 04 Aug 2026 06:02:00 GMT

Niklas Gruhn, on relaying AI output verbatim:

By all means, prompt AI. But don’t just relay the output. Read it, understand it, validate it, and then write a response in your own words (a decent certificate that you’ve done the prior steps). Making that effort is value you can add.

This reminds me of Simon Willison’s rule, I will not publish anything that takes someone else longer to read than it took me to write.

Among friends I’ll sometimes skip the rewrite and share a link with the prompt in it instead. As Dave Rupert mentioned, he wants the prompt because it shows the context you gave the machine and your understanding of the problem: I’d rather have the original prompt so I can just ask the machine myself. It’s the least bad way to relay, not an alternative to doing the work.

Should You Use AI for a Task? Here’s a Simple Way to Decide - Schneier on Security

Fri, 31 Jul 2026 10:10:00 GMT

At work, if your job is to move a bunch of heavy things from one side of the room to another, you should use whatever assistive tech you have on hand: a wagon, a forklift… even an AI-powered robot. But at the gym, it makes no sense for that robot to lift weights for you. The point of weightlifting isn’t to move heavy things across the room; it’s to actually lift those heavy things.

The same analysis holds for any task an AI can do for you. If it’s work—if the task has to be done and no one cares how—then it’s fine to use AI assistance. But if the task is more like the gym, and howthe task is done is at least as important, then it probably doesn’t make sense to use AI.

htmx ~ Vendoring

Fri, 17 Jul 2026 05:03:00 GMT

Today I learned, that copying and pasting other people’s code in your project is called vendoring. Carson Gross goes on to explain how vendoring can get pretty difficult to deal with and how that is actually its strength:

Because dealing with large numbers of dependencies is difficult, vendoring encourages a culture of independence.

You get more of what you make easy, and if you make dependencies easy, you get more of them.

Wed, 08 Jul 2026 22:16:00 GMT

I’ve put hours into learning CSS over the years and continue to do so happily. Building things with HTML and CSS is the part of the work I enjoy the most.

But it always felt like there were gaps in my knowledge. So I just enrolled in Poetic CSS to finally understand it from the inside out.

Our CSS isn't opinionated enough - craigabbott.co.uk

Mon, 06 Jul 2026 05:14:00 GMT

I think the way we currently write CSS subtly shapes the way we think about components. By having the visual styles completely decoupled from the semantic meaning, accessibility is easy to forget, because we can’t physically see missing attributes. When the styling hook is anchored to semantics, you can’t get the visual styles without also getting the parts that make it accessible.

If You are Asking for Human Attention, Demonstrate Human Effort | Tom Bedor's Blog

Thu, 18 Jun 2026 08:10:00 GMT

Tom Bedor, on forwarding AI output to a colleague:

If you are requesting human attention, demonstrate human effort.

This reminded me of a line from Don’t ask to ask, if you’re not willing to do the work to solve your problem, why should we?

Mon, 25 May 2026 03:17:00 GMT

Today I learned via Paweł Grzybek’s post on Mastodon, where Temani Afif pointed out that text decorations propagate to their descendants, they aren’t inherited.

The difference between propagation and inheritance is that the descendants don’t get their own text-decoration property. So, the line, color, style and thickness are all determined by the ancestor where text-decoration was declared.

A descendant can still declare its own text-decoration, but that creates an additional decoration on top, it doesn’t modify or remove the ancestor’s.

Thu, 21 May 2026 09:31:00 GMT

Today I learned, adding tabindex="-1" to skip link targets is likely no longer necessary in modern browsers.

Manuel Matuzović tested skip links without tabindex="-1" on targets across major browsers and screen readers on macOS, Windows and Android, concluding it is safe to remove in most setups, thanks to sequential focus navigation starting point.

Furthermore, adding tabindex="-1" to skip link targets also introduces a regression in usability. With tabindex="-1" on main, clicking on any non-interactive area inside main makes main itself the focus starting point. So, the next tab press sends focus to the first focusable element in main, not the next one after where the user clicked. The gov.uk team removed tabindex from main for this reason.

Reminder: You Can Stitch Together Lots of Little HTML Pages With Navigations For Interactions - Jim Nielsen’s Blog

Mon, 18 May 2026 05:30:00 GMT

Turns out, if you have a website and you think of the browser as a way to navigate documents — rather than a runtime to execute arbitrary code and fetch, compile, and present them — things can be a lot simpler than our tools often prime us to make them.

Nobody Gets Promoted for Simplicity – Terrible Software

Mon, 18 May 2026 04:45:00 GMT

You can’t write a compelling narrative about the thing you didn’t build. Nobody gets promoted for the complexity they avoided.

Complexity looks smart. Not because it is, but because our systems are set up to reward it.

Wed, 13 May 2026 12:06:00 GMT

Today, while working through an exercise in Eloquent JavaScript, I learned about the concept of parity in maths.

The parity of an integer is its attribute of being even or odd. Thus, it can be said that 6 and 14 have the same parity (since both are even), whereas 7 and 12 have opposite parity (since 7 is odd and 12 is even).

– Weisstein, Eric W, Parity

Initially, I had assumed “same parity” meant “same value”, which is roughly what it means in English. However, in maths it’s narrower. It just means both numbers are even or both are odd.

James Shore: You Need AI That Reduces Maintenance Costs

Tue, 12 May 2026 04:50:00 GMT

Your AI coding agent, the one you use to write code, needs to reduce your maintenance costs. Not by a little bit, either. You write code twice as quick now? Better hope you’ve halved your maintenance costs. Three times as productive? One third the maintenance costs. Otherwise, you’re screwed. You’re trading a temporary speed boost for permanent indenture.

[…] The math only works if the LLM decreases your maintenance costs, and by exactly the inverse of the rate it adds code. If you double your output and your cost of maintaining that output, two times two means you’ve quadrupled your maintenance costs. If you double your output and hold your maintenance costs steady, two times one means you’ve still doubled your maintenance costs.

Getting Developers to Care about Accessibility: Carrots and Sticks - Sheri Byrne-Haber's Blog

Wed, 06 May 2026 04:08:00 GMT

A developer who builds accessible interfaces is more skilled. Say this out loud. Repeat it often. A developer who creates accessible interfaces isn’t doing extra work; they’re doing the work the right way.

Do I belong in tech anymore? · Ky Decker

Mon, 27 Apr 2026 04:31:00 GMT

No matter how rapidly technology changes, I am coalescing around some core beliefs:

Things that are worth doing are worth doing well.

Things that are done well require time and effort.

You make meaning through the doing.

Ideas are common; effort is not.

There are no shortcuts.

Fri, 17 Apr 2026 22:48:00 GMT

I just read Dave Rupert’s post on Inverted themes with light-dark(). It’s great.

I wish light-dark() accepted any value and not just colors. I have a use case where I use lighter font weights in dark mode.

Bramus wrote about a custom --light-dark() function using @function, if() and color-scheme() that would solve this in the future.

Thu, 09 Apr 2026 19:48:00 GMT

Just watched the latest Whiskey Web and Whatnot episode with Chris Coyier and Dave Rupert. No one would’ve guessed that I was watching a web dev podcast from how much I was laughing.

At one point in the episode Adam mentions, “holy crap, my job is now leftover tokens in a burn window”. If Adam can feel like AI is making his work redundant then what hope do I have? 🙈

What Is CSS Containment and How Can I Use It? – CSS Wizardry

Mon, 06 Apr 2026 07:39:00 GMT

Harry Roberts on what CSS containment actually is, what each contain value does, and how to use it confidently on real projects without creating hard-to-debug side effects.

Sat, 04 Apr 2026 10:24:00 GMT

Last week, I built a visual explainer of the CSS Cascade.

I used anchor positioning with chained anchors to stack the cascade steps. It worked, but Safari 26.4 and earlier had a bug with chained anchors, so I had to exclude Safari entirely via an @supports hack.

I wasn’t entirely happy with that, so I refactored the layout to use a subgrid based approach with grid-template-areas. Since subgrid became Baseline Widely Available recently, the timing also worked out.

While I was at it, I also restructured the HTML such that each cascade step is now a list item inside an ordered list, which gives better semantics.

Sun, 29 Mar 2026 12:06:00 GMT

I built a visual explainer of the CSS Cascade, the algorithm that determines the “winning value” from a list of competing declarations.

After Web Day Out 2026, I was checking out Manuel Matuzović’s UA+ stylesheet. Manuel mentioned that he wraps all rules in an anonymous layer to avoid specificity issues. I realised I didn’t actually understand how anonymous layers worked, so I went back and re-read Miriam Suzanne’s cascade layers guide on CSS-Tricks. I really liked the way Miriam presented the cascade and specifically the order of precedence within each step.

Recently, while learning @scope, I had come across a diagram of the cascade in Bramus’ article on @scope. I had seen it before in his CSS Day 2022 talk as well but this time it stuck with me. The layout just made the cascade click visually.

I wondered if I could combine Bramus’ cascade diagram layout with the order of precedence information from Miriam’s article. The early CodePen prototype turned out well enough that I decided to polish and publish it.

There are still some things to be done. The website currently fails WCAG Success Criterion 1.4.4: Resize Text (Level AA) under certain conditions. I haven’t landed on a fix that works for the design yet. Hit me up if you have any ideas.

Writing code is cheap now - Agentic Engineering Patterns - Simon Willison's Weblog

Tue, 24 Mar 2026 04:35:00 GMT

Simon Willison on what they mean by “good code”:

The code works. It does what it’s meant to do, without bugs.

We know the code works. We’ve taken steps to confirm to ourselves and to others that the code is fit for purpose.

It solves the right problem.

It handles error cases gracefully and predictably: it doesn’t just consider the happy path. Errors should provide enough information to help future maintainers understand what went wrong.

It’s simple and minimal - it does only what’s needed, in a way that both humans and machines can understand now and maintain in the future.

It’s protected by tests. The tests show that it works now and act as a regression suite to avoid it quietly breaking in the future.

It’s documented at an appropriate level, and that documentation reflects the current state of the system - if the code changes an existing behavior the existing documentation needs to be updated to match.

The design affords future changes. It’s important to maintain YAGNI - code with added complexity to anticipate future changes that may never come is often bad code - but it’s also important not to write code that makes future changes much harder than they should be.

All of the other relevant “ilities” - accessibility, testability, reliability, security, maintainability, observability, scalability, usability - the non-functional quality measures that are appropriate for the particular class of software being developed.

Adactio: Journal—Magic

Tue, 24 Mar 2026 04:26:00 GMT

Libraries are bits of other people’s code that I call from my code. Frameworks are other people’s code that call bits of my code.

What is agentic engineering? - Agentic Engineering Patterns - Simon Willison's Weblog

Tue, 24 Mar 2026 04:17:00 GMT

Writing code has never been the sole activity of a software engineer. The craft has always been figuring out what code to write. Any given software problem has dozens of potential solutions, each with their own tradeoffs. Our job is to navigate those options and find the ones that are the best fit for our unique set of circumstances and requirements.

You Might Debate It — If You Could See It - Jim Nielsen’s Blog

Mon, 23 Mar 2026 03:26:00 GMT

When you offload your thinking, you might be on-loading someone else’s you’d never agree to — personally or collectively.

Wed, 18 Mar 2026 06:06:00 GMT

I couldn’t make it to Web Day Out 2026. Thankfully, Jeremy wrote about it and linked to a bunch of online talk about it. Special shout out to Josh Tumath who live-blogged each talk.

By all accounts, it was an excellent event. The regret at missing out (RAMO) is real. I remotely attended State of the Browser 2026 and I’d love it if more events offered a remote option.

Many of the speakers were kind enough to share a link to their slides. I haven’t checked out all of them yet, but I liked Manuel Matuzović’s talk ‘Breaking with habits’. So much so that I feel the urge to redesign my portfolio based on the approach he showed. For now, I’ll dive deep into his UA+ stylesheet and oli.css project to get a deeper understanding.

Inherited properties leak through the donut scope

Sat, 14 Mar 2026 10:50:00 GMT

Today I learned about a potential pitfall with @scope.

Via MDN [emphasis mine]:

It is important to understand that, while @scope allows you to isolate the application of selectors to specific DOM subtrees, it does not completely isolate the applied styles to within those subtrees. This is most noticeable with inheritance — properties that are inherited by children (for example color or font-family) will still be inherited, beyond any set scope limit.

In other words, @scope isolates your selectors, not your styles. Here’s what that looks like in practice.

<article class="card">
	<p>In scope</p>
	<div class="content">
		<p>Outside the scope limit</p>
	</div>
</article>

@scope (.card) to (.content) {
	:scope {
		color: red;
		font-family: Georgia, serif;
	}

	p {
		padding: 1lh;
		outline: 1px solid;
	}
}

The second <p>, the one inside .content, won’t get the padding or outline because those are non-inherited properties in the scope limit. That part works exactly as you’d expect.

But it will still turn red and render in Georgia because color and font-family are inherited properties set on .card (via :scope). And as we just learned from MDN, inheritance flows through the DOM regardless of where @scope sets the scope limit.

As Miriam mentioned in the Winging It episode on CSS Scope & Mixins, it has to work this way because if @scope blocked inheritance at the scope limit, every element beyond the scope limit would receive the initial value for each inherited property.

initial applies the value as defined in the CSS spec. And that would be far more destructive than letting inheritance flow through.

If you’re coming from JavaScript, you might expect custom properties to work like scoped variables work in JavaScript. But in CSS, custom properties are inherited properties just like color or font-family.

@scope (.card) to (.content) {
	:scope {
		--text-color: red;
		font-family: Georgia, serif;
	}

	p {
		color: var(--text-color);
		padding: 1lh;
		outline: 1px solid;
	}
}

/* This rule exists to show that the inherited value is available beyond the scope limit */
.content p {
	color: var(--text-color);
}

With the same HTML, the second <p> again loses the padding and outline. But --text-color inherits down from .card into .content p. So the second <p> also turns red because its color property references var(--text-color) which resolves to red.

For custom properties, if inheritance were blocked at the scope limit and no ancestor outside the scope had also defined it, any var(--text-color) beyond the scope limit would be undefined and that would just trigger the fallback in the var() function, or if there’s no fallback, the property using it would behave as unset.

There’s more to what happens when a custom property is undefined, involving the guaranteed-invalid value and invalid at computed-value time (IACVT). I wrote a note on what happens when the CSS function var() references an undefined custom property.

Sat, 14 Mar 2026 09:13:00 GMT

What happens when the var() CSS function references a custom property that is undefined or explicitly set to initial?

In both cases the custom property’s value is the guaranteed-invalid value. That’s the initial value of every custom property as defined in the spec. When var() encounters this value during substitution, here’s what happens:

If a fallback was provided, the fallback value is used.
If no fallback was provided, the referencing property becomes invalid at computed-value time (IACVT). The property then behaves as if its value had been specified as the unset keyword.

Wed, 11 Mar 2026 13:22:00 GMT

I just read the latest issue of Chris’ Corner on CodePen. I then read the following articles, all of which Chris links to:

Chris’ article on The Big Gotcha of Anchor Positioning
Temani Afif’s article on Why is Anchor Positioning not working?
James Stuckey Weber’s article on CSS Anchor Positioning in Practice

Oh boy! My mind is completely fried. I had no idea anchor positioning was this complicated. I would be afraid to touch CSS anchor positioning if not for this recommendation from James to make it work reliably.

Make the anchor and the positioned element siblings.

Put the anchor first in the DOM.

I also saw the Winging It episode on ‘Debugging CSS Anchor Positioning‘. It really helped me develop a mental model of how anchor positioning works and why the gotchas exist.

Also, I totally agree with Tab Atkins-Bittner that dev tools really need a way to show the containing block for elements, especially absPos/fixedPos elements.

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.

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

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.

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.

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.

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

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.

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.

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

Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS | utilitybend

CSS value resolution process

Footnotes

Pseudo-elements are not valid inside :is(), :where(), and &

Make It Work vs. Make It Good - Jim Nielsen’s Blog

How To Use an Emoji as a Favicon Easily | CSS-Tricks

Accidental anonymity - macwright.com

Don't be a meat proxy

Should You Use AI for a Task? Here’s a Simple Way to Decide - Schneier on Security

htmx ~ Vendoring

Our CSS isn't opinionated enough - craigabbott.co.uk

If You are Asking for Human Attention, Demonstrate Human Effort | Tom Bedor's Blog

Reminder: You Can Stitch Together Lots of Little HTML Pages With Navigations For Interactions - Jim Nielsen’s Blog

Nobody Gets Promoted for Simplicity – Terrible Software

James Shore: You Need AI That Reduces Maintenance Costs

Getting Developers to Care about Accessibility: Carrots and Sticks - Sheri Byrne-Haber's Blog

Do I belong in tech anymore? · Ky Decker

What Is CSS Containment and How Can I Use It? – CSS Wizardry

Writing code is cheap now - Agentic Engineering Patterns - Simon Willison's Weblog

Adactio: Journal—Magic

What is agentic engineering? - Agentic Engineering Patterns - Simon Willison's Weblog

You Might Debate It — If You Could See It - Jim Nielsen’s Blog

Inherited properties leak through the donut scope

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

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

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

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

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