A blog about web development, HTML, CSS, JavaScript, and web accessibility.

Never lose a z-index battle again

Recently, I learned about numeric keywords. Since I was terrible in school, I didn't know what to do with them, but when I saw infinity, I immediately thought of a great use case.

Breaking up with my X

About 2.5 years ago, I was banned from Twitter for no apparent reason. I wrote about it on this blog and described the events and personal consequences.

Close requests, close watchers, and the dialog element

The latest version of Chrome (134) comes with a new light-dismiss behavior for the dialog element, which enables a native click-outside feature. That's fantastic! Reading the announcement, I wondered how many ways there are to close a dialog element.

How to make LibreWolf your default browser on macOS

I recently switched to LibreWolf as my default browser, and I also wanted links to open by default inside it, but there isn't an option in LibreWolf like in other browsers.

Maybe don't use custom properties in shorthand properties

I've already written about how the fact that the initial value of a custom property is a guaranteed-invalid value can lead to unexpected results. Today, I realized how that can be problematic when you use custom properties in shorthand properties.

#unplugtrump

Since Trump took office on Jan. 20 this year, he and his henchman have done many things that bewildered me. I assume that most of you are following the news, so you know what I’m talking about, but here are some things I found especially cruel and disgusting.

Is the button focusable?

Let’s play a game. I’ll hide a button using different techniques in HTML and CSS, and you have to guess whether it’s still focusable.

NVDA bug: anchor links broken if they point to a parent element

In my last blog post, I explained how to create a back-to-top button that visually indicates the scroll position. I tested it in different browsers to see if the CSS works. I didn't test with screen readers because the HTML was basic and straightforward. There wasn't anything that could go wrong, or at least I thought so.

Building a progress-indicating scroll-to-top button in HTML and CSS

I noticed a nice detail on theneedledrop.com. They have a square scroll-to-top button with an arrow pointing right. The button's border is black, and the background color is white. When you scroll, the arrow points up, and the background color turns gradually yellow as you scroll. That's nothing too special, but it caught my attention because it looks nice and I realized we can build this without JS. Let's try.

Debugging a Craft CMS installation on macOS

The other day, I tried to install Craft CMS 5 on my Macbook, and I had some issues with my setup.