Friday Frontend: Optional Chaining Edition
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.
Have a great weekend! Enjoy!
KBall from ZenDev
CSS & SCSS
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.
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’.
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.
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.
A solid and in-depth introduction to testing with Jest.
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.
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.
A fun look through some of the history of HTML and why some elements have “optional” closing elements. Oh how far we’ve come...
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!