rssed

Self-modifying variables: the inherit() workaround 🔗

In a previous article I wrote about a method to get a --depth value based on alternating classes. But Roman Komarov found a better method to achieve a [...]

Reference architecture for SPA front-ends 🔗

In my day job I focus a lot less directly on CSS and the "front-of-the-front-end". In reality, I build a lot of B2B applications, or back-office appli [...]

Using recursive CSS to change styles based on depth 🔗

Yesterday I saw an interesting question posted on Reddit. Someone was interested to see if you can, recursively, create a bull’s eye where the colors [...]

Combining :has and :only-child to change tab containers 🔗

Two of the quirkiest and most fun CSS tricks I have discovered have to do with counting. Or more specifically, changing styles based on the number of [...]

Combining :placeholder-shown and :has 🔗

Yesterday my wife (also a front-end developer) came to ask for my help with something. She read something about a :placeholder-shown selector and was [...]

I was wrong about service workers 🔗

For years I have seen services workers as this magical concept for making progressive web apps. Or, you would use them to run very heavy operations pa [...]

Going back to CSS-only after years of SCSS 🔗

All these years I was telling people I was doing CSS, and enjoying CSS, I was lying. Kind off. I was doing SCSS for the vast majority of the last year [...]

Old man yelling at a cloud 🔗

More often I feel like an ‘old man yelling at a cloud’ when it comes to front-end development. When I look at my peers (back-end developers) I sometim [...]

Different approaches to fluid typography and layouts 🔗

With the support of the CSS clamp() function, a whole new range of fluid layout possibilities are available to us. Most notable is Utopia.fyi. This is [...]

Hiding side content in responsive design 🔗

I always love solutions that allow me to achieve the same results where others choose for media queries. I am not opposed to media queries. But, in li [...]

Use the child-element count in CSS 🔗

Recently I shared a nice CSS trick allowing you to use a CSS custom property indicating the index of an element. Now I want to share with you a trick [...]

Engineering, UX design and the value stream 🔗

Update August 2023: When archiving older articles, like this, I have decided to combine some findings from that article into this one. It has always b [...]

A nth-child CSS trick 🔗

Sometimes you figure out a cool trick that just feels so powerful. It opens you up to a range of new possibilities. That you, quite frankly, rarely us [...]

Creating a stacked bar chart using only CSS 🔗

In various projects, I always seem to struggle with responsive charts. These libraries generate charts in SVGs, often with fixed dimensions or ratios. [...]

Updating my graph layout algorithm 🔗

In July 2021 I wrote an article about an auto-layout algorithm I needed for the visual state machine editor. I published the implementation as a packa [...]

The case for state machines in client-side applications 🔗

Recently I had to implement a very simple feature for the HR application Humaps. Within the product, we want to be able to show a dialog with release [...]

An ode to the CSS owl selector 🔗

In the beginning of 2022 I've updated this article with the sections 'Owls v.s. flex-boxes' and 'What about performance'. It is not a secret that I lo [...]

Scalable CSS architecture 🔗

For years I have used ITCSS as my goto CSS architecture for large projects. It helped me to keep my CSS maintainable with a small team. But in the las [...]

SWR-like data fetching in Svelte 🔗

I am a big fan of the SWR package of Vercel when working with React. It handles a lot of complex implementation around data fetching and caching, redu [...]

State machines and state management 🔗

::info Update June 2023: added a section outlining what my current approach is. ::: State management is one of the most complicated, and opinionated t [...]

Authentication token management 🔗

In several large projects (React-based SPA applications) managing authentication tokens is a challenge. These solutions implement an OAuth flow using [...]

Interdependencies and code stability 🔗

As engineers, we have the tendency to over-engineer our solutions, make our code as reusable as possible. We make our code DRY (don't repeat yourself) [...]

Horizontal centering in CSS 🔗

In a previous article I wrote about modern CSS layout solutions. As horizontal centering is a common layout pattern, the grid-based solution was a pri [...]