Friday Frontend: Reactivity in 2020 Edition

Hey there,

Hope you had a good week and are looking at a great weekend. I’m surely looking forward to a rest after working a lot of late nights on a deadline.

This week, if you read one article, read the article at the top of the JavaScript section on reactivity patterns in 2020. Fascinating look at one of the defining characteristics of modern front-end development.

Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

CSS :is() and :where() are coming to browsers

This is super cool, especially for those who are still writing traditional CSS (not in JS) where having additional control while maintaining low specificity will be super valuable.

Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis

Delightfully whimsical walk through creating inventive background patterns with CSS.

Colors in CSS

Super deep dive into the different ways of setting and manipulating color in CSS.

The complete guide to CSS media queries

Includes not only the standard size based queries but all sorts of fun ones based on functionality and aspect ratio.

Overlapping Header with CSS Grid

Short and sweet walkthrough of how to take a design and implement it using CSS grid. A useful pattern to add to your toolkit.

JavaScript

Exploring the state of reactivity patterns in 2020

Absolutely fascinating article looking at the patterns we’re using in modern front-end frameworks today. If you read one article in this newsletter, read this one.

Higher-Order Components In React

Long-form tutorial on higher order components (HOCs). Do note: this tutorial uses entirely the older class-based approach to React Components. Some of the use cases they describe for HOCs can now be better implemented with hooks. But HOCs are still a useful concept. See this post for a cogent breakdown of when you’d use one or the other.

One Cool Trick to Simplify Reducer Functions

Nice demonstration of a library (Immer) designed to make programming with immutable state easier in JavaScript, and how that tool then makes it simpler to write and reason about functional patterns like a Reducer.

A Deep Dive into @Injectable and providedIn in Ivy

Long-time readers know that I’m not a huge Angular fan. That said, the focus on dependency injection is one of the truly unique and powerful aspects of Angular that has not made its way into broader use in the front-end ecosystem. This is a deep dive into how it works.

Other Awesomeness

GraphQL directives are underrated

I didn’t even know directives were a thing in GraphQL. Very curious after reading this article to try them out. If you’ve used them before, can you shoot me a quick note back and let me know if you found them useful, and if so for what? Thanks!

Why using WebAssembly and Rust together improves Node.js performance

I’m hearing more and more examples of using WebAssembly as a way to plug in Rust-based blocks of high-performance libraries into various places. The amazing thing with WASM is you can plug them into Node, you can plug them into the web, it will just work everywhere! Love it!

Sharing UI components at an enterprise level

A nice look at how Paypal handles sharing UI components. What I like about this article is that they don’t treat this as purely a technical challenge, but dive into the core human challenges like discoverability.

Adding CSS to a Page via HTTP Headers

Interesting and bizarre. Every day I learn something new that is possible on the web. I’m not sure how practical this is likely to be for most people, but I imagine someone will come up with something.