Web development Blog

All major browsers except Firefox (coming soon!) support the @property at-rule. It enables you to do things you previously couldn't, like animating custom properties.

Design trends like Glassmorphism use translucent backgrounds to create a specific visual effect, resulting in underlying background colors or elements shimmering through the background of the overlaying element. That may be visually appealing, but it can distract some people and impair legibility.

I am always pleasantly surprised when I find useful skip links. That's why I decided to collect examples here on my blog.

I was on the train home from Hamburg when I decided to finally migrate my website from Netlify and 11ty to Kirby on my friend's server. I got most of the work done on the train and made some final changes on Monday.

I specialize in HTML and CSS, but I also write JS. Especially in the last year or so, I wrote quite a lot of JavaScript because we decided to port the front end of one of my clients to web components.

When I first learned about web components, I had a lot of questions, especially regarding accessibility. While I found answers to many of them, I didn’t know everything I would’ve wanted to know. I wish I had a catalog of all the essential questions and answers when I started. That’s why I decided to design this post in a Q&A format. I’ll ask a question regarding the accessibility of web components, and then I’ll answer it.

In my newest workshop I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

There are different ways of selecting the scoping root inside a @scope rule.

When I started to work with web components, I compared different options and decided to go with lit. I knew the extra performance cost would pay off quickly, and it fit into my performance budget. I’m still happy with my decision.

I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute. I wanted to know how that manifests used on a button.

If you have used a visually-hidden class in the past, you might have noticed that the width and height is set to 1px and not 0. I’ve always wondered why.