Baseline is an interesting initiative The Web Platform Developer Experience group created the baseline-status web component to display data regarding the baseline status of a given feature. This could...

Warning: These components are under development and they may change without notice. If the current version of the components meets your needs you may want to pin to the specific version you're...

What browsers should we support? This is an interesting question: What browsers should we support? This is a deceptively simple question to ask and even harder to answer. This post will try to address...

We can control the color schemes for light and dark modes through CSS using the prefers-color-scheme media query. These media queries will match the system's color scheme and will allow us to select...

This is a follow-up to Web Components, FTW (which was getting too long) and adds more areas of interest and further research. Accessibility And elementInternals() # The Guide to Accessible Web...

Web Components have come a long way since they were introduced and the original Polymer library made them useful for non-experts. Since the landscape has changed so much, we'll look at some of the new...

One of my current projects is to create a journaling system similar to Hi did. The idea is described in Full stack writing (and publishing): Welcome to Hi. The Idea # The idea of this application is...

Duotone is a graphic design technique that makes for contrasting graphics that can be combined with text and other CSS effects. This post will look at what are duotone colors and how to create duotone...

Rather than using media queries to control the dimensions of an element, we can use the clamp to accomplish the same task with less code. According to MDN: The clamp() CSS function clamps a middle...

There is an interesting discussion going on about masonry layouts and how they should be added to the web platform. This post will analyze the different proposals and then express an opinion as to...

The picture element was added to the HTML specification as part of the responsive images effort. This post will dive into the picture, source and img elements along with the srcset property and...

Sometimes it's nice to put some sort of emphasis on our text to highlight elements or because we just want it to look different. One way to create these highlights is to use the text-emphasis...

When I see figures, this is what I think about and what I see the most often, maybe with srcset and sizes attributes to handle responsive images. See the Pen figure and image by Carlos Araya...

The Writing Modes specification reached full recommendation status almost 5 years ago. I've written about it before but I think it's time to revisit them again and see how they could be applied to...

One way of thinking about HTML and web content is to think about boxes, multiple boxes surrounding your content. You can see these nested boxes in your browser's Dev Tools as shown in figure 1. CSS...

CSS Shapes have been around for a long time and allow developers to wrap text around the shape of the image. According to MDN: The CSS shapes module describes geometric shapes that can be in CSS. For...

In the last post, we looked at building and configuring an Eleventy website. This post will look at creating content for the site including: Migrating old content from WordPress, creating additional...

I used WordPress until 2023 when I became disappointed as to the direction the project was going and how much harder blocks make it to create bespoke designs the way I'm used to. So I decided to move...

Jeremy Keith recently published Declarative design on his blog. The premise of the post is that there are two divergent ways to think about web design and building web content, encapsulated by these...