Amir Maghami | Blogs

Blogs

A collection of my thoughts, tutorials, and insights on web development.

CSS Blob Recipes

Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!

Poking at the CSS if() Function a Little More: Conditional Color Theming

The CSS if() function enables us to use values conditionally, but what exactly does if() do? Let's look at a possible real-world use case.

Lightly Poking at the CSS if() Function in Chrome 137

The CSS if() function was recently implemented in Chrome 137, making it the first instance where we have it supported by a mainstream browser. Let's poke at it a bit at a very high level.

A Better API for the Intersection and Mutation Observers

Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.

Color Everything in CSS

An introduction to "Color spaces", "Color models", "Color gamuts," and basically all of the "Color somethings" in CSS.

How to Keep Up With New CSS Features

How do you stay informed of new CSS features when the language evolves quickly and information is spread all around the web? Sacha Greif has some tips from his work running an annual survey focused on new CSS features.

A Better API for the Resize Observer

ResizeObserver, MutationObserver, and IntersectionObserver enhance performance over their predecessors. Zell discusses their API similarities, usage steps, refactoring strategies, and advantages with practical examples.

Breaking Boundaries: Building a Tangram Puzzle With (S)CSS

We put it to the test and it turns out Sass can replace JavaScript, at least when it comes to low-level logic and puzzle behavior. With nothing but maps, mixins, functions, and a whole lot of math, we managed to bring our Tangram puzzle to life, no JavaScript required.

Creating an Auto-Closing Notification With an HTML Popover

The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Popovers can be dismissed a number of ways, but there is no option to auto-close them. Preethi has a technique you can use.