Stuff I write about
-
The mythical magical button
How to create a minimal stylesheet with modern CSS that allows you to create a whole new range of buttons with just a single custom property.
-
Slightly enhanced sticky revealing footer
Andy Bell showed a nice little UI effect with his “sticky revealing footer”. However, on some pages, the experience was mediocre. A quest was started to improve it.
-
A modern picture showcase using CSS
My newest favorite way to create adaptable and flexible layouts is by using grid template areas. Especially combined with other modern CSS solutions it becomes extremely powerful. In this article, I use it to create an adaptable picture showcase that can handle many different configurations.
-
I cannot wait for the CSS @function
In my quest to apply as much cool CSS tricks as possible, I encountered an issue that navigated me towards a new and exciting CSSWG draft.
-
The importance of shipping source code as a library maintainer
When library maintainers ship there source code can help application builders in debugging critical and weird issues.
-
MacOS-like dock effect with a “previous-sibling combinator”
A guide on using the “previous-sibling combinator” trick to recreate the magnifier effect of the MacOS dock.
-
Using recursive CSS to change styles based on depth
Can CSS be used recursively to change styles based on the depth of an element in a container? Well it can, but it is a little tricky.
-
Combining :has and :only-child to change tab containers
For a styling implementation detail, I set the challenge to come up with a CSS-only solution, instead of implementing the logic in a front-end framework.
-
Combining :placeholder-shown and :has
Yesterday my wife told me about this :placeholder-shown selector. I had visual question marks above my head because I never heard of it before. But it sparked curiosity about what it could give me.
-
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. But in this quest, we often create unstable code.
-
I was wrong about service workers
I was wrong about service workers. I wrongly assumed certain use cases for them. But I was missing out on them.
-
Going back to CSS-only after years of SCSS
When migrating my website to Eleventy, it ditched SCSS and went old school. I went removed a complexity layer to see if CSS-only is a viable option these days.
-
Old man yelling at a cloud
Front-end development really became a pop culture around big company frameworks. It has become an investor-focused industry.
-
Engineering, UX design and the value stream
Understanding how to make better technology, framework, and library decisions in front-end development
-
State machines and state management
State management is one of the most complicated, and opinionated topics in modern and JavaScript-focused front-end development. Let's make it easier.
-
Different approaches to fluid typography and layouts
Fluid web page design can be more user-friendly, because it adjusts to the user's set up. There are several approaches to achieving this.
-
Hiding side content in responsive design
A trick to hide content in specific responsive layout patterns without the need for media queries. But with a few gotchas.
-
Use the child-element count in CSS
A little CSS trick to get a count of child elements on your parent selector.
-
A nth-child CSS trick
A little CSS trick that allows you to use nth-child values in the CSS calc() function.
-
Creating a stacked bar chart using only CSS
How to make an interactive stacked bar chart using only CSS and HTML
-
Updating my graph layout algorithm
Updating my graph layout algorithm based on new requirements and requests from the community
-
The case for state machines in client-side applications
Features that seem simple can become unmaintainable due to unforeseen state management issues. State machines help avoid this.
-
An ode to the CSS owl selector
One off the most beautiful CSS selectors is the Lobotomized Owl Selector of Heydon Pickering
-
Scalable CSS architecture
In the last two years, I found that my CSS architecture was becoming too complex. But, utility-first frameworks were not doing it for me either. I needed a mix, I needed utility-enabled. Then came CUBE CSS and it all clicked.
-
SWR-like data fetching in Svelte
I am a big fan of the [SWR](https://swr.vercel.app/) package of Vercel. Let's see how to implement something similar in Svelte.
-
Authentication token management
Complex client-side applications require sophisticated solutions around authentication management and background refreshing.
-
Horizontal centering in CSS
Horizontal centering is an ancient problem in CSS. With CSS Grid we are able enhance this layout pattern. But, this gives us other issues. Let's find a better solution.
-
Creating an auto-layout algorithm for graphs
Trying to automatically lay out a visual graph (e.g. state machine) that is human understandable is one of the most fun challenges I have ever encountered. Let me explain how I did it.
-
Binding CSS and JavaScript with HTML data-attributes
HTML data-attributes allow you to bind CSS and JavaScript more closely to each other. By utilizing this type of attribute, you can reduce the amount of JavaScript required for styling, and move this responsibility back to CSS.
-
Modern CSS grid solutions to common layout problems
Responsive layouts are one of the more complicated problems in CSS. With the addition of CSS grids, we are now able to solve complex problems.
-
Demystifying the component architecture
Our little UI components do more for us than we give them credits for. Their internals are more complex than we know.