[Ed note: I got behind on republishing to dev.to, so this is coming out here a couple weeks late. Sorry!]

Hope you’ve had a great week! I got derailed towards the end of the week with a small family emergency, so we’re a little short on articles this week, but still some great stuff.

I particularly recommend 2 CSS articles: the one on custom properties and animations, and the one on CSS architecture. In the JavaScript section the optional chaining article shows off a very exciting addition to the language. And the dive into how different web practices impact power use in the last section is fascinating!

Have a great weekend! Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Using Custom Properties to Wrangle Variations in Keyframe Animations

An excellent example of using CSS custom properties to make something simpler. Looks at using scoping of properties to influence characteristics of a CSS Keyframe Animation that previously would have required multiple animations.

Under-Engineered Text Boxen

Fun look at how to use the most minimalistic CSS possible to style text boxes. With CSS getting so much more powerful and with so many more options, it’s interesting to see someone looking not at ‘how much can I do’ but ‘how can I do enough with a little as possible’.

Ghost Buttons with Directional Awareness in CSS

This is a great example on the other side of “how much can I do with CSS” - creating ‘ghost buttons’ (with no fill) that fill in on hover, but making that hover come from the side your mouse did. A takes combo of clip path and multiple elements, but it is truly impressive what you can do here with just HTML and CSS.

Keeping it simple with CSS that scales

Great long-form look at CSS practices and architectural approaches to keep your CSS maintainable and effective as you scale up your project. Highly recommend a read through.

JavaScript

😲🤯The most outstanding new feature in Javascript you need to know about: Optional Chaining

Optional chaining is amazing, this is a great quick read to learn about what it is and how it works. And because this is JavaScript™ there is of course a babel plugin you can use to start using it right away.

4 Ways to Safely Access Nested Objects in Vanilla Javascript

If you’re in an environment where you don’t want to or can’t use the babel plugin above, and you don’t want to wait for optional chaining, check out this article for some great ways to safely deal with nested objects in just Vanilla JavaScript.

How to test JavaScript with Jest

A solid and in-depth introduction to testing with Jest.

RxJS Patterns: Efficiency and Performance

RxJS is one of those libraries and approaches that feels like overkill until it doesn’t, and then it’s amazing. It’s a toolkit for handling and composing asynchronicity in a far more robust manner than hand managing promises and async/await, but one of the challenges is the surface area of the API is large enough it’s hard to get a handle on. If you’re not already a little familiar RxJS, I’d start at the docs intro, but if you’ve played with it and want to get a sense of more of the API space and potential, this is a great article.

Other Awesomeness

How Web Content Can Affect Power Usage

The webkit team digs into what impacts power usage, and thus that all important factor of battery life. As more and more consumption moves to mobile, this is a bigger and bigger area of concern. They do a nice job of explaining both what uses more power and what tools you can use to trace down issues.

5G Will Definitely Make the Web Slower, Maybe

A call to arms to resist the trend of countering every improvement in hardware technology by sending more complex software. Bangs the drum for reducing the amount of JavaScript we’re sending to clients.

Inconsistent behavior among browsers when clicking on buttons

I hadn’t realized this, but apparently browsers vary widely in how they handle focus after button click. Check this out! A nice bit of research, plus some recommended JavaScript for making the situation more consistent.

(Why) Some HTML is "optional"

A fun look through some of the history of HTML and why some elements have “optional” closing elements. Oh how far we’ve come...

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html