Revisiting CSS Custom Properties
CSS variables are awesome, particularly when implemented using the @property at-rule but we need to remember that there can be too much of a good thing. This post will talk about how to define custom...
Centering things with CSS
Centering content, particularly vertical centering, has always been very challenging to me. The old way # These are some techniques to center content using CSS before Flexbox. Aligning text # Aligning...
Improving performance of a WordPress site (2): Optimizations
Now that we've set up the baseline, let's see how much we can improve it. Enable a cache plugin # We will first install a Cache Plugin to make easier to cache different portions of the website. I will...
Loading fonts on the web
It surprising to me that we still need to discuss font loading on the web after how long we've been able to load fonts using @font-face. Before we jump in let's do a brief trip down font loading...
Brotli compression streams
In a previous posts, I discussed the basic of streams and how to use them,how to use them in service workers, and how to build custom streams. This post will cover an additional area of interest:...
Be mindful of ch units
I think ch units in typography are cool, but there was something about them that I hadn't thought about and is something that may impact your site's performance metrics. This post will explore ch...
Scopped CSS
Scopped CSS has been a hot topic in front-end development. It is designed to give you tighter control over your styles and how they interact with each other. The @scope at-rule # The @scope root...
Improving performance of a WordPress site (1): Getting ready
Performance is important. Performance will keep people coming back to your site. Performance is very hard to get right, specially for mobile devices. I'm particularly interested in seeing how my blog...
Creating color palettes with color-mix()
Since color-mix() is now available in all browsers we can revisit what it is, how it works and one possible use in creating a customizable color palette. What is color-mix() # The color-mix() function...
Using cascade layers
The @layer at-rule manages CSS cascade layers, a way for authors to control specificity and order of appearance. This is important because those are two determining factors a browser considers when...