Editor's Pick
View transitions: Handling aspect ratio changes
When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's how to handle it.
CSS
High Definition CSS Color Guide
CSS Color 4 brings wide gamut color tools and capabilities to the web: more colors, manipulation functions, and better gradients.
For over 25 years, sRGB (standard red green blue) has been the only color gamut for CSS gradients and colors, with color space offerings within it like rgb(), hsl() and hex. It is the most common color gamut capability amongst displays; a common denominator.
From Chrome 111 is support for CSS Color 4 gamuts and color spaces, joining Safari who's had support for display-p3 since 2016. CSS can now support HD (high definition) displays, specifying colors from HD gamuts while also offering color spaces with specializations. This guide will explain how you can start to take advantage of this new world of color.
CSS-only DVD Screensaver animation
An in-depth look at how I created a DVD screensaver animation without any Javascript, presented with dynamic examples and code snippets.
CSS is Impossible and That's Okay
I have been a web developer for more than a decade, and yet, when it comes to CSS, I always feel a bit out of depth. Not only it’s enormously complex, its complexity is growing every year.
The complexity can be gauged by the fact that there were at least 25 units in CSS. And with container queries, six more were added. Now, imagine being aware of all those units, how to use them, and more importantly, the best time to use them.
There was a time when I wanted to catch up with everything CSS had to offer, but soon enough, I realized the enormity of my ambition—and also, how largely unnecessary it would be.
The New CSS Math: pow(), sqrt(), and exponential friends
CSS added many new Math functions to supplement the old favorites (such as calc()). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. As of February 2024, these CSS functions are available in the latest Edge, Chrome, Safari and Firefox browsers.
View transitions: Handling aspect ratio changes
When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's how to handle it.
HTML
htmz - a low power tool for html
htmz is a minimalist HTML microframework that gives you the power to create modular web user interfaces with the familiar simplicity of plain HTML.
Use straight up HTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No <custom-elements>. Just vanilla HTML.
In a nutshell, htmz lets you swap page fragments with HTML from the server using vanilla HTML code.
Imagine clicking a link, but instead of reloading the whole page, it only updates the relevant portion of the page.
JavaScript
On-Scroll Revealing WebGL Images
An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber.
Demo here.
Reactive Data Fetching and Updating in Nuxt 3: Automatically Refresh `useFetch()` When Deleting or Updating Data
Managing data across different components is a common challenge when working with modern web frameworks. Imagine a typical scenario where actions (e.g., deleting or updating data) in one component must reflect changes in another—for example, fetching a list of items, like products, and seamlessly reflecting updates like deletions across the app. Let’s dive into a solution that addresses this challenge effectively.
React, Svelte, Solid, etc. are EVs. HTMX, Alpine, Unpoly are MagLev Trains.
A commentary on both the absymal state of web development and the United States' crumbling infrastructure.
HTMX vs React: A Complete Comparison
This guide compares HTMX and React, covering origins, features, performance, community, and functionality differences.
Miscellaneous
Data Structures and Algorithms Visualizations
This page includes animated solutions and explanations for common coding interview questions, grouped by the algorithm pattern used to solve the question.
Free SVG generators, color tools & web design tools
A collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds.
How we optimise front-end component reuse at the ABC
Reusing components leads to visual consistency, higher quality code and faster development yet it's so tempting to building from scratch. Explore the benefits and decisions to increase component reusability at ABC.