Chris’ Corner: Trends, Beziers, and the Free Betterment of Subgrid

Posted on by

Cubic-bezier easings are part of what set apart really nicely done animations. I usually leave off the easing, which defaults to ease. Then I feel weird about it and try out keywords like ease-in or ease-in-out and they generally look weird or worse and stick with the default. But any really classy animation always seems to have a custom cubic-bezier() easing that makes it sing. Sometimes easings are even part of a brand guideline, which I find especially cool. Doesn’t it just make sense that how something moves is just as much a part of a brand feel as, say, what color it is? Maybe even more so? You can change the color of a BMW and it’s still a BMW, but you can’t change how it corners.

Really grokking cubic-bezier (I’m quite sure I haven’t) seems to unlock some interesting possibilities. For instance, Yosra Emad in How To Create Advanced Animations With CSS manages to move an object along a path using “stacked” animations, that is, multiple keyframe animations that move the object along different axes at different easings. I might argue an offset-path animation would be a heck of a lot easier, but I appreciate the mathematical prowess, and to be fair, offset-path isn’t easily made responsive so I can see a use-case.

Speaking of grokking, have you gotten CSS subgrid to sink in yet? Maybe this will help: when you use the subgrid keyword, you’re telling the template columns, rows, or both, to inherit the grid lines from the parent element. It’s extraordinarily useful. It’s also weird to see Chrome seemingly dragging its feet on it, with support shipping in Firefox and Safari but nothing but interest so far from Chrome.

I’m quite sure we’ll have it in all major stable browsers in 2023 though, as it’s been knighted as an “interop 2023” item. So let Rachel Andrew catch you up on it. She puts it similarly, noting that it’s easy to learn because there really isn’t much to learn at all:

There are no new properties or values to learn, just a decision to make—do you want your nested grid to have its own row and/or column definition, or to use the one from the parent?

Just one of those things you need to know is possible so that your brain reaches for it when it needs to.

You’d think AI would help us forecast trends, yeah? I’m learning more and more about that world, but I don’t have a good sense of what kind of insight you can extract from custom data sets. Like if I give a fancy machine 20,000 images of logos created in 2022, could I say “what were the vibes this year?”. I dunno, but humans with a good eye for it can. Bill Gardner did that in his 2022 Logo Trend Report and I think did a great job of it. For example, “loopers” were a thing:

Likewise, Monotypes 2022 Type Trends report is well done and fun to look through. It even echoes some of Bill’s findings. Loopers! Loopers everywhere!

Learning Web Components on your learning checklist this year?

Check out Dave Rupert’s course HTML with Superpowers to get you up to speed.

The phrasing “custom, reusuable, encapsulated” should sound familiar if you’ve been following web design or development trends in the last ten years. Web Components – as the name suggests – are about building component systems. LEGO™ bricks, but for the Web.

Web Components are akin to modern-day JS frameworks like React, Svelte, and Vue, but with one key differentiator… Web Components are a set of Web Standards.

And not mutually exclusive with JS frameworks.