CSS image-set
CSS provides its own syntax for working with responsive images where it is appropriate. This works in a smiliar way to the srcset attribute in HTML. It lets authors specify images either by resolution...
Building a fuller Starter Kit
I've built a Gulp system to generate HTML and PDF files. It works really well for that purpose. I saw Adam Argyle's Shortstack starter project and it made me think it might be time to revisit bundling...
Why I love @property in CSS
CSS Custom Properties (also known as CSS Variables) rock but they are not without drawbacks. Since you can put any value and change the values, the browser will treat the value as a string and force...
::before and ::after pseudo elements
::before and ::after are interesting but, to me, they are hard to understand and use correctly. These pseudo-elements are primarily used to insert content before and after an element. We can create...
Calculating font overrides
As a follow-up to the prior post on converting JSON/JSON5 to CSS, we will look at providing font override metrics for fallback fonts and how to use them. Katie Hempenius provides a spreadsheet with...
Using JSON5 instead of JSON
The more I work with JSON in WordPress theme blocks, the more frustrated I become even though I understand why things are the way they are. JSON has become the default data interchange program for the...
Working with local servers
When doing web development, one of the biggest pains is to have a local server where we can run the code without having to manually reload the page. This post will explore both third-party packages...
Using data attributes
data attributes give developers a very powerful tool to create custom code on both CSS and Javascript. This post will look at three things: What are data attributes How to use data attributes in...
Designing with grids
I've been working on learning more about Grids used in book design and publishing and how it may be possible to apply them to web layouts. Grids are not without challenges when working on the web....
Deep Dive into color-mix()
One of the most interesting new CSS features coming into browsers is color-mix(). We will look at two uses of color-mix(): Mixing colors Lightening and darkening a color We will also discuss some of...