Skip to main content
CSS is fun and cool and I like it.
Link

Jamstack Conf

Article

Accessible Web Animation: The WCAG on Animation Explained

It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to make sure our animations have a positive impact on accessibility, like planning how they contribute to the overall UX and ease of use of our site. There are also more tactical considerations for making sure the animations on our site are accessible, and that’s where the Web Content Accessibility Guidelines (WCAG)Read article “Accessible Web Animation: The WCAG on Animation Explained”

Link

ztext.js

Article

Thinking About Power Usage and Websites

Gerry McGovern asked if I had any insight into energy consumption and websites. He has a book, after all, about the digital costs on the planet. He was wondering about the specifics of web tech, like…

If you do this in HTML it will consume 3× energy but if you do it in JavaScript it will consume 10×.

I would think if you really looked, and knew exactly how to measure it, you could find examples like … Read article “Thinking About Power Usage and Websites”

Article

Nova

Nova is a new (vehemently macOS-only) code editor from Panic, the folks behind Coda. It’s like “Coda 3” except this was such a major re-write that they gave it a whole new name.

I played with some of the betas as they were building it. I got a little discount as it went live, so I bought it and am using it here and there. Here’s my thought dump!… Read article “Nova”

Article

Pre-Caching Image with React Suspense

Suspense is an exciting, upcoming feature of React that will enable developers to easily allow their components to delay rendering until they’re “ready,” leading to a much smoother user experience. “Ready,” in this context, can mean a number of things. For example, your data loading utility can tie into Suspense, allowing for consistent loading states to be displayed when any data are in flight, without needing to manually track loading state per query. Then, when your data are available, and … Read article “Pre-Caching Image with React Suspense”

Article

Vue 3

It’s out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

I like it’s still a priority that Vue can be used with just a <script tag with no build process at all. But it’s ready for build processes too.

Vue 3.0 core can still be used via a simple <script tag, but its internals has been re-written from the ground up

Read article “Vue 3”
Almanac

paint-order

The CSS paint-order property sets the order that SVG shapes and text are drawn, including the fill, stroke, and any markers that might be in use. By default, those attributes are drawn in that very order: fill, stroke, and markers. This property allows us to switch it up so we have more control over the resulting appearance.… Read article “paint-order”

Article

Enforcing performance budgets with webpack

As you probably know, a single monolithic JavaScript bundle — once a best practice — is no longer the way to go for modern web applications. Research has shown that larger bundles increase memory usage and CPU costs, especially on mid-range and low-end mobile devices.

webpack has a lot of features to help you achieve smaller bundles and control the loading priority of resources. The most compelling of them is code splitting, which provides a way to split your … Read article “Enforcing performance budgets with webpack”

Almanac

counter-set

The counter-set CSS property, true to its name, sets the starting value for a CSS counter. You know how ordered lists start at 1 and then increment up from there? The counter-set property allows us to set that starting value to something else, say, -1. Or 2. Or 200! Except that it is applied to CSS counters instead of ordered lists.… Read article “counter-set”