Friday Frontend: Reactivity in 2020
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.
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.
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
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.
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.