Tip of the week #021: Use the description list element
Need to display a list where you have a key (or title) and a value? The description list element is perfect for this.
Writing
Occasionally I write about web things. And when I do it's mostly about CSS. Some of my writing has also been published to the likes of UX Design Collective and CSS-tricks.
-
-
Tip of the week #020: Simple progressive enhancements in CSS
CSS has changed a lot in the last couple of years. It feels like we're getting new features monthly now. New features are well and all, but it's hard to keep up with what's fully supported or safe to use.
-
Tip of the week #019: Think of CSS selectors as queries
Ever struggle with CSS selectors and specificity? Here's a weird analogy for how to deal with selectors.
-
Books of 2024
I've so far read 27 books this year. Here's a recap of my favorites.
-
Tip of the week #018: Create modals and dialogs with the <dialog> element
A native way to create modals and dialogs, accessible and keyboard-friendly, using only HTML and a tiny bit of Javascript.
-
Tip of the week #017: Stop using the terms "mobile" and "tablet"
Responsive design is more than just creating a mobile or tablet version of your site.
-
My issues with shorthand properties
The removal of CSS shorthand properties would benefit us all.
-
Tip of the week #016: Go-to class names
Naming things is hard, but when I create components I usually go for the same class names.
-
Tip of the week #015: The :where selector
CSS has gotten a lot of new selectors in the last couple of years. Here's how the :where selector works, and why you should use it.
-
Tip of the week #014: Why sticky headers can be bad
Sticky menus and headers look cool, but it's often violating a WCAG criteria and should be avoided.
-
Tip of the week #013: Use logical properties
When you want to define something directional, like padding-left or margin-top, it can be take into consideration what languages your website should support.
-
Tip of the week #012: How to style CMS-generated rich text
Styling is easy when you control the markup. You can add classes to your liking, and style them accordingly. Dealing with CMS-generated HTML however is another thing, having no control over the markup and attributes.
-
Tip of the week #011: Nesting in SCSS
In SCSS it's possible to nest your CSS. It speeds up your workflow, but it also invites you to overdo it. Here's my two cents when it comes to when and how you should nest your code.
-
I've rebuilt my site in Astro
11ty (Eleventy) has served me well, but I wanted to try something new. Over the last week I've converted this website from 11ty to Astro.
-
Tip of the week #010: Embrace simplicity
Building for the web has never been easier, but it's also never been easier to over-engineer the simplest of things.
-
Tip of the week #009: color variable names in CSS
Naming and using color variables is hard, but here's one way to do it.
-
Tip of the week #008: Use REM for everything, not only font size
You've probably been told to use REM instead of pixels for font sizes, but I think you should use it for everything. Here's why.
-
Tip of the week #007: Become better at CSS using Codepen
Learning is best by doing, and Codepen is a great tool to help you do just that.
-
Tip of the week #006: A good way to structure your SCSS files
There's no correct architecture for SCSS files and the management of them, but here's how I do it and why it works for me.
-
Tip of the week #005: Responsive Youtube videos using aspect ratio
Ever embedded a video from Youtube, but struggled to make them behave the way you'd like? Here's how you can make the embeds full-width and responsive.
-
Tip of the week #004: Replace media queries with container queries
Container queries are here, and it’s possible to use them instead of width-based media queries
-
Tip of the week #003: Icons with inline SVG
Adding icons to a website can be done in many different ways, but my favorite approach is to use SVGs inline in my HTML. Here's how.
-
Tip of the week #002: Self-aware components in container queries
CSS container queries gives us the power to alter components based on the context they are used in. But what if we don't know where they're being used?
-
Tip of the week #001: Pill buttons
Tips on how to create pill shaped buttons with CSS.
-
A new way to remove list-styles in Safari without compromising accessibility
Earlier I've written about the implications that follow in Safari if you use list-style: none on lists. Here's an updated version of that.
-
My key takeaways from CSSDay 2024
A quick rundown of some of the things I learned at this year's conference.
-
Embracing the Platform
The web platform is good enough as it is
-
The struggles of BEM
Naming CSS classes is hard. The naming convention BEM is suppose to ease the pain, but if you're still struggling chances are you're not using it right.
-
Removing list-style on lists and the accessibility implications that follow
Safari ruins a well-known CSS snippet for everybody, but here's how you can fix it.
Published at medium.com
-
My CSS reset
A quick breakdown of how I reset the browser's default styling before I start writing my first lines of CSS.
-
I've rebuilt my site!
My previous iteration of this site has served me well for the last three years, but now I've finally rebuilt it.
-
On Reaching 1 Million Views on Codepen
I created a Codepen profile to experiment with different snippets of code for a school project. Now, 8 years later it has reached 3500 followers and the pens have generated over 1 million views combined.
-
How to Create a Shrinking Header on Scroll Without JavaScript
A write-up of how you can create a JS-like scroll-effect with only CSS and the magic of sticky positioning.
Published at css-tricks.com
-
Creativity is Only Impressive When There's Restrictions
Why “form follows function” is a valid design principle in today’s web design landscape.
Published at uxdesign.cc
-
Users will break your design — and it’s not their fault
Enter the uncomfortable zone of designing for variable “x”.
Published at uxdesign.cc