For the design-minded in the audience, Mary Lou offers her latest roundup of UI interactions & animations. For anyone needing a little… inspiration…

Anybody designing in SVG? Didn’t think so. But Yuan Chuan‘s article Flip, Invert, Reverse just might make you want to start… Seems mesmerizing…

Continuing an earlier conversation about a possible HTML tab element, Chris Coyier demonstrates a possible solution: using a web component with varying breakpoints…

Sticking with Chris for a sec, he just posted a collection of WP-related articles. Nice cache, but finish reading this list first… ;-P

And speaking of WP, I have struggled many-o-times while packing for a trip whether to drag along my laptop “just in case something goes haywire” or whether I should only bring my iPad and “hope nothing will go wrong”… Maybe I don’t need to struggle anymore…

Have to admit, the term “Toasts”, when not referring to what my peanut butter gets applied to, was new to me. But I have certainly seen them! Those brief “floaty” UI messages that pop onto the screen to tell you something, then gently fade away, sort of like WAY better alerts. In the video Thinking on ways to solve TOASTS, Adam Argyle digs into Toasts with live code (give it 24s to get past the computer voice, almost scared me away completely!). Pretty sweet tech, and special shoutout to Paul Lewis and his FLIP!

Defensive CSS by Ahmad Shadeed is actually about CSS best practices to make sure “you will have fewer issues in the future”… Good stuff! But why isn’t it a new framework/library yet??? ;-P

10 useful JavaScript tricks you didn’t know in 10 minutes. Yeah, titles like that usually translate to something more like “2-3 useful JavaScript tricks, 3-4 semi-useful JavaScript tricks, and a couple things you will never find a use for…” But I think you will like these!

A trio of performance suggestions from Planet Performance:

• HTTP compression – A brief history, current options, and possible future options?
• Content Separation – Applying different cache strategies for different content types. “Every type of content was not created equal. Nor should it be served the same way. [Each type should] be treated differently from cache strategy perspective… [and] treated differently when serving them from origin.”
• Optimizing state management in React applications – Choosing Feature, Application or Server State. “What we should remember at the end is that state management is more about figuring out the type of the state. It’s less about the tools we use.”

One more performance bit: a 3-parter on how BuzzFeed improved CLS.

Slava Shestopalov offers a very thorough set of guidelines for creating meaningful links.

A very nice write-up from Bruce Lawson regarding Component libraries, accessibility and transparency. Really solid guidelines for evaluating products for accessibility (read: how Bruce would be evaluating your product, so things to be careful of).

Quick note on using !important with CSS custom properties from Stefan Judis. Tricky, that one…
TL;DR
HTML

<div id="id" class="class">
  Hello world!
</div>

CSS

div {
  --color: red !important;
  color: var(--color); /* H1 is red */
}
.class {
  --color: blue; /* H1 is red */
}
#id {
  --color: yellow; /* H1 is red */
}
div {
  color: green; /* H1 is green */
}

Even though !important is removed by the CSS parser, it is still honored with regards to re-assignments of the custom property, but is not honored when a new, seemingly weaker declaration is made…

For anyone that simply cannot wait for CSS Container Queries, now there’s a polyfill for that…

Did you know you can visualize CSS transforms in Firefox’s DevTools? (It’s cute that the article that opens from the link at the bottom, titled “Learn more about it here”, contains next-to-nothing in the way of any additional information; the link should read “Learn more about it, stay here”… ;-P)

The Modern fluid typography editor by Adrian Bece is just bad-ass… Adjust a few variable points, graphically see how your font will adjust on varying screen-sizes, and when you hit that sweet-spot, copy the CSS clamp value and paste it into your code… Bad-ass!

And finally, as the holiday season draws nearer, how about a couple adventy thingies? First, a blogger’s curated advent of bloggers, and next a Norwegian advent of blog posts covering topics such as design, dev, UX, security and more (Notes: Some articles are in Norwegian; The bottom of the page links to their 2020, 2019, 2018 and 2017 advents…). And if those don’t fill your holiday mug with cheer, well Smashing Magazine has a bunch more for you…

Happy reading,
Atg

Top⇪