Web development Blog

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.

Here’s a job interview question for you: When you click a button and call the showModal() method to open a modal <dialog>, where does the focus go by default, and how can you move it elsewhere?

I wanted to know how and if common screen readers expose the <article> element.
Here are my results: