Testing front-end code
While building the new blog, I started thinking about testing front-end code again. In this post I will revisit Playwright Test class, and look at the types of testing that we can do to ensure that...
Revisiting the display property
The display property has been around for a long time but its definition has evolved over the years. Formally, the display property sets an element's inner and outer display types. The outer type sets...
Animating Variable Fonts (2023)
One thing I particularly like about variable fonts is that it allows some interesting animation tricks. For example, since variable fonts have information about all possible variations of the font, we...
Coloring Text With Gradients
In addition to black and white or single, solid-color text, we can also use gradients to color the text. The process is slightly more complicated than just assigning color to the desired...
Creating Sane CSS defaults
Both Eric Meyer's Reset and Normalize.css are comprehensive solutions to provide a baseline for CSS development. Can I build a set of defaults that make sense for my projects on top of these resets?...
JS conditional (ternary) operator
Javascript provides a way to shortcircuit if/else statements with the conditional or ternary operator. the idea is that we consolidate the three parts of the if statement in one command, like shown...
An Interesting Image CSS Reset
I came accross reset from Harry Roberts (from Twitter/X) via (Kevin Powell's YouTube video). I've adapted the reset by eliminating the low quality image resource. I don't need the low quality images...
For when you know you will print
There are times when we know that users will print a page of web content. Maybe a set of directions for a recipe, a map with directions or a page of information that we want to preserve. While it's...
Defining multiple syntax in CSS variables
In Revisiting Custom Properties we looked at how to define custom properties using the @property at-rule. One aspect of @property that we didn't discuss are the syntax multipliers and...
Revisiting Critical CSS
Crtical CSS is simple in theory but not so much in execution. In this post we'll look at what critical CSS is, how does it work and whether it's still necessary for all use cases. What is Critical CSS...