While experimenting with CSS, you sometimes discover a technique you want to do more of. This is one of those discoveries for me... I love how we can now animate clip paths on scroll with CSS. From animating an image into a star to creating Polaroid-like images on scroll. In this article, I’d like to demo some techniques we can use to create these interesting effects using clip paths, @property, and even container units to create visually pleasing scroll-driven animations.

Read moreabout Animating clip paths on scroll with @property in CSS

While learning about web components a few months ago, I wanted to create my first (useless) little component as a package on NPM. In this article a little tutorial on how I created my first basic web component with LIT, Typescript, using an easy setup with Vite. I will be sharing how to do the setup, some of the ideas behind it, and some of the gotchas.

Read moreabout A Valentine's Day special: A web component to show hearts on your website

The year 2024 might be a big one for web components and I for one am excited about this. Truth be told - a few months ago - I barely knew anything about them as I thought they were just this niche thing floating around on the web. But a lot of buzz is being created. So I wanted to learn more about them. I can now proudly say I published my first (useless) web component on npm - a Valentines special - for-love element.

Read moreabout Getting into web components - an intro

There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. In this mini-series I will be going around all the current length units in CSS with practical examples.

Read more about Going beyond pixels and (r)ems in CSS (iO tech_hub)

Browser support for @property nears completion, a great time to delve into some technical aspects of this CSS feature. While I've experimented with @property in demo settings before, I’ve never used it in a production environment. With the upcoming full browser support, let’s take a look at the inner workings and uncover some of the benefits.

Read moreabout Taking a closer look at @property in CSS

This year has been a crazy ride, from my first appearances in public speaking to becoming a Google Developer Expert and speaking in Berlin. It’s time to reflect a little on the past year, write a little recap and have some time with family and friends to kick-start the year of 2024.

Read moreabout Happy holidays and a popping start of 2024!

Have you run into a situation where you need the padding of one element to align with the padding of another element? It’s a common debacle, especially when a page layout is set with global padding? In this article I demonstrate that issue with a full-width slider component that breaks out of the main page container using a couple of techniques to keep it visually aligned with other elements on the page.

Read more about CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study (Smashing Magazine)

From layers and specificity to nesting, from HD color to (scroll) animations. If there is one thing that makes me keep using Chrome as my default browser while developing, it has to be the DevTools and the information we can find about them. As we’re slowly entering the last part of the year, I thought a cool roundup of new CSS debugging tools would be a great article. Let’s dive into it.

Read moreabout Elevate your CSS debugging skills with these Chrome DevTools tricks in 2024

One of the frustrating things when animating elements was not being able to transition to and from display none. Related to that, it also wasn’t an easy feat to use transitions for elements entering the DOM. In Chrome 117 we have the release of @starting-style, which will make animating or transitioning those cases a lot more convenient.

Read moreabout Animations and transitions from and to display none with @starting-style

I'm extremely happy to announce that today, I've officially joined the Google Developer Expert program. I'm looking forward to the opportunities it has to offer such as expanding my own horizons as well as providing some support for other developers. An interesting step to take for the future of helping out the developer community.

Read moreabout I'm officially a Google Developer Expert