Publishing Explorations
Animating variable fonts # Don't be Afraid Of Large Font Sizes # https://trail-of-thoughts.beehiiv.com/p/mastering-type-scale https://typescale.com/ Creating Grid-Based Components # Font Stacks: To...
Looping Through Nested JSON Objects
Looping through a flat JSON file is easy, doing the same through a nested JSON object, is not so easy. There is no built-in way to loop through nested arrays of JSON properties so we have to develop...
Creating A CSS Reset
CSS Resets have been around for a while and they have evolved along with CSS and browser support. The notion of a CSS reset first came around with undoHTML.css by Tantek Celik in 2004 and it does what...
When To Use @property
Custom properties are awesome. They provide modularity and a central place to store variables that we'll use throughout a stylesheet. But they are not perfect. This post will discuss two ways to...
Design Brainstorm: Moments
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...
Multipage View Transitions
When initially introduced, view transitions would only work with single-page applications. This is awesome but it doesn't work with regular web pages like what I normally work with. During I/O 2024,...
Exclusive Accordions
Accordions present an interesting way to display content using one or more details elements. There is a specific type of accordion that, until recently, was impossible to do without scripting, the...
Playing with Relative Color Syntax
Now that relative colors are supported across browsers it's time to revisit the syntax and see what we can do with it and how it changes what we can natively do with colors. Basic Syntax # The most...
The Anchor Positioning API
A complementary API to Popovers is the anchor positioning API Where the popover attribute controls the popover behavior, the anchor positioning allows us to control where will the popover...
Responsive Videos ftw
Ever since we've had responsive images we've been able to add media queries to control the conditions that will trigger a match for a specific child element. But we haven't been able to do the same...