Today’s Readings

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

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

Continuing an earlier conversation about a possible HTML tab element, 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, 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 and his FLIP!

Defensive CSS by 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.

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

A very nice write-up from 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 . 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 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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.