What if we could make certain actions not just successful, but celebrations? That’s what Aaron Iker’s buttons bring to the web. Today we’re demystifying some fantastically fun buttons he’s made with different GSAP techniques. In particular, we’ll be learning about GSAP’s powerful plugins. We’ll see how Aaron uses the Draggable, MorphSVG, and Physics2D plugins to make some delightful interactions.
Lately I have discovered more and more utility classes are sneaking into my codebases. So why not draw the logical conclusion and use utility classes for everything from the beginning? It often doesn’t feel right to use some of these utility classes and can lead to problems in the long run. In this article, we will try to find rules for when we should and should not use utility classes in a traditional CSS codebase.
Did you know that we have media queries for JavaScript too? It’s true! We’ll explore how matchMedia() allows us to define media conditions and examine the MediaQueryList object that lets us do one-time matches and persistent checks against those conditions so that we can respond to changes by invoking functions.
So my little mashup, which was supposed to be just 3 technologies ended up exposing me to ~20 different technologies and had me digging into nth-level dependency source code after midnight. If there’s an allegory for what I don’t like about modern day web development, this is it. You want to use three tools, but you have to know how to use twenty tools instead. If modules and components are like LEGO, then this is dumping out the entire bin on the floor just to find one tiny piece you need.
This is a case study about my experience of learning how to design accessible web components, then scale their impact through a design system. Rather than everyone individually fixing the same accessibility problems, a design system enables an organisation to propagate accessible components at scale. Fixes are multiplied outwards saving time and money for product teams using the system.
Today we’re talking about color contrast! We’ll go over what the A, AA, and AAA conformance levels mean and how to ensure proper accessibility compliance for your own site. We’ll go over how to use Chrome Developer Tools and preference media queries, such as prefers-color-scheme, to make the right choices for your applications and design systems.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share