Don't forget that CSS animations are hardware accelerated. If you're doing trig in JS for animations, you're probably also manipulating the DOM to update the UI every millisecond, which is very expensive
Most CSS animations aren't hardware accelerated. Only a few values like opacity and transform.
Updating the DOM (as in innerHTML) is always expensive because it triggers layout. This is true whether you're doing it from JS or a CSS trick like on this page.
Finally this approach is using CSS custom properties. These are slow - slower than JS for most things.
If you stop all animations on this page and profile it via Chrome you can see this in effect. The root node is animating a CSS variable. 117 elements have their style recalculated. Every frame - yet no animations are running. There's also a tiny paint triggered too, obviously there's been no changes so it is tiny in this instance, but a paint is always triggered when a CSS variable updates.
This is why animating x and y separately via CSS and a style like `translate(var(--x) var(--y))` would be worse than animating them via JS ala Framer Motion/GSAP.
We shouldn't diminish the power of transform here. It's not just one property like opacity. You can animate quite a bit on the compositor with transform
Just one nitpick: the DOM is not updated by CSS here, only the value of the CSS variable is. (It will indeed cause style recalc and paint though, and result in poor performance as we can see with the demos.)
> (also don’t ask why justify-content became justify-items)
It didn't. `justify-content` works with grid too, and will bunch all the grid cells into the center. `justify-items` is if you want the contents of each grid cell to be centered.
Also, `place-content` or `place-items` for grid does both the horizontal & vertical at the same time.
I admit that CSS isn't always obvious how it works, but it seems like the author didn't care to check
I genuinely expected more of your writing and research (I’ve read your blog before) than regurgitating ChatGPT output without thorough verification and then using that as a defense when the error is brought to your attention. I expected you to understand ChatGPT cannot be blindly trusted.
This undermines trust in all technical parts of your writing.
I second this. I also have a web background, and last year I started with this video, and the Gameboy is a great place to start with this sort of thing.
Start making a game, and you'll soon realise how the CPU works, and making a simple emulator will start to seem very possible.
I started this just before midnight, and once I got to the wordle question it didn't work. Possibly because the wordle had changed since starting the password game
I did figure out how to do it at one point. I think you had to remove some default config from a JSON file to stop it connecting to their cloud. You still had to query Google directly for the STT though
- Limit to 1 creative thing per month (music one month, programming the next, etc.) I find it helps to get deep into 1 thing for a while rather than skimming the surface on multiple
- Waking up early, and doing the creative things first (less interruptions in the morning, you have your energy)
I'd argue that `place-content: center` is better than `place-items: center` as it would handle multiple child elements in a way most people would expect from a simple centering snippet.
place-content will position all the children to the center, which is generally what's desired here.
place-items, would make each child element center itself within its own grid square
