2023 December
People don’t need call-to-action buttons. Interface elements made to get attention and herd people towards clicks increase cognitive effort because they obscure themselves and reduce interfaces to clickable surfaces.
The
implied web is based on the idea that people read interfaces through
the …
2023 July
In Making components with CSS nesting, we looked at different ways to make a keyword list component with and without links. If we want to make that even more reusable, there are also multiple ways to make variants.
With BEM, we have the modifier class. With JS components, we can set a prop and …
2023 July
CSS nesting can help us write better frontends by moving our approach towards thinking more about the bigger picture. It also makes working with fewer class names easier, but does it make BEM and other naming conventions obsolete?
One of the areas I have overused classes in the past is lists …
2023 July
Write CSS as CSS in CSS. It is the best way to learn, and it gives us the best code quality because it leans on language and platform.
Anything else tends to turn out not to be CSS at all, maybe fast to write at first but it makes us fall behind on the language and its evolution.
We are …
2023 June
Getting fast at building frontend means going beyond trying to make something work as quickly as possible. Aiming for speed instead of efficiency makes learning CSS more difficult today than it was twenty years ago. It’s not because the language evolved but because the many shortcuts get us stuck in …
2023 June
The key to understanding CSS is to get past the notion that frontend development is about producing visuals. Visuals are one aspect, but we never make them directly. We make it easier for ourselves when we stop thinking about the interface as significantly related to the image. Two different …
2023 January
Using CSS has() to write complex selectors is fun, especially when we compare the logic to JavaScript and can see how different the two languages are at doing the same.
A colleague and I recently made two buttons to expand and collapse all the levels in a documentation schema, and we didn’t want to …
2022 July
Most interfaces, design systems and UI frameworks seem to be made by someone who has only heard stories of interfaces.
It’s what we get when imitating each other. It’s what we get when bad practices become expectations. It’s what we get when making decisions without reasoning.
We know what …
2022 February
When we work as if interfaces can reach completion, our fixes and new features tend to turn into redesign projects. We set out to make things right this time around; we might improve them but also change them to a degree where we introduce new issues.
This form of redesign not only makes testing …
2021 November
Successfully designing web interfaces requires the intentional picking of HTML elements. As interfaces aren’t clickable visuals, we can’t avoid code and we can’t hand things off to be "translated" into code.
Knowing HTML doesn’t mean knowing each element by heart. Knowing HTML means having a …