Skip to content

Creating A High-Contrast Design System With CSS Custom Properties

Smashing Magazine

Design should never be a trade-off when it comes to creating an accessible web. There are many features coming to the web that will make creating contrast a lot easier. But even though CSS functions such as color-contrast() are only available in Safari behind a flag, we can already do a lot to create contrast in an easy way by using custom properties.

Read more about Creating A High-Contrast Design System With CSS Custom Properties (Smashing Magazine)

Recap of the year, some thanks and best wishes for 2023

X-mas tree

As we’re slowly entering the end of the year, it’s the perfect time for a little recap. I started this blog somewhere near the end of 2021 and continued this journey in writing about the web in 2022. Some important lessons learned, goals achieved and ideas for the future made.

Read moreabout Recap of the year, some thanks and best wishes for 2023

Age 35: slowly becoming an "old developer"

Cake built with CSS with a candle

I’ve turned 35 years old and that gives me the excuse of playing the old geezer for a bit…, just for a day… maybe? Not a technical topic this time, just me reminiscing of what I miss of my early days of development, what I’m worried about, and how I see the future. Before I bore you with too many blasts from the past, let’s get those away right now.

Read moreabout Age 35: slowly becoming an "old developer"

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

CSS-Tricks

The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It's often referred to it as “the parent selector” — as in, we can select style a parent element from a child selector — but there is so much more that :has() can help us solve. One of those things is re-inventing the clickable card pattern many of us love to use from time to time.

Read more about Creating Animated, Clickable Cards With the :has() Relational Pseudo Class (CSS-Tricks)

Practical uses of the :has() relational pseudo class

text that contains :has()

The :has() relational pseudo class has landed in Chrome and Safari and even though it gets less hype than for instance container queries, I believe this little pseudo class contains a lot of improvements to the way we write CSS today.

Read moreabout Practical uses of the :has() relational pseudo class

Easy Fluid Typography With clamp() Using Sass Functions

Smashing Magazine

Fluid typography is getting a lot more popular, especially since the clamp() math function is available in every evergreen browser. But if we’re honest, it’s still a lot of mathematics to achieve this. You can use tools such as utopia.fyi, which are fantastic. But in large projects, it can get messy pretty fast. So let's make this easy with Sass.

Read more about Easy Fluid Typography With clamp() Using Sass Functions (Smashing Magazine)

Coding on a Chromebook - part 2

2 Dinos with heart in html

I purchased a Chromebook for my little coding projects. In the first part I wrote about the basic development setup. In this post, we're taking a bit of a deeper dive: installing git, node, filezilla, some browsers, Docker and updating the terminal on ChromeOS. So let's open the terminal and dive right into it.

Read moreabout Coding on a Chromebook - part 2

Coding on a Chromebook - part 1

Dino with heart

A few months ago, I purchased a Chromebook for my little side projects. I'm used to working on a Macbook, but I wanted to work with something that has a different feel, to make my little creations on the side feel more relaxing, and less like work. I have gained a lot of love for ChromeOS. This will be an article in two parts. In the first part, I want to talk about the first experiences, my basic ChromeOS setup and enabling developer mode.

Read moreabout Coding on a Chromebook - part 1