Friday Frontend: Re-imagining CSS Approaches Edition
Hope your week was amazing! What stood out to me this week was a few articles that really took different ways of looking at what CSS is and how we can use it. One on combining SASS and CSS variables that really opened my eyes to new synergies between my old favorite tool (SASS) and the new powerful CSS we’re getting. Another on applying the concept of algorithms to CSS. And then some mindblowing graphical stuff with compositing and gradients.
KBall from ZenDev
CSS & SCSS
This is a very nice article laying out a technique for using CSS variables to build robust, internally consistent layouts.
I’ve seen a number of articles recently asking questions about replacing SASS with modern CSS, but what I like about this one is how it very much looks at synergies between the two. Utilizing sass functions for ergonomics and CSS variables for live updating and cleanliness of final CSS, this is a very very nice approach.
I like the way this author is thinking about CSS. Rather than try to utilize completely different language for CSS as compared to other programming languages, they advocate reusing the word “algorithm” to describe a well-defined declaration or set of declarations aimed at achieving a specific outcome. Given the broad definition of algorithm as “a step-by-step procedure for solving a problem or accomplishing some end”, this totally works. The author then takes this further & describes an approach for developing “CSS algorithms”.
This kinda blew my mind. I can’t say I fully understood it, it’s really long, and the final code requires all sorts of browser-hacky workarounds to go cross browser, but OMG I’m blown away by the power of css-based masks. The examples are mostly images, but there’s no reason these techniques shouldn’t work to mask anything in the DOM letting you create super cool effects.
Fun exploration of CSS gradients and their limitations, all within the framework of recreating the “gradient bubbles” effect recently introduced by Facebook Messenger.
A solid set of recommendations for how to get started writing accessible React applications. Ends with a great list of additional recommended resources.
So many of our learning resources are structured as ‘from-scratch’ tutorials. Build an app from scratch. Try this thing from scratch. Rewrite your app from scratch. It’s rare to see someone writing about the lessons learned maintaining an existing (and large) application for years. This post does, and I think these are some very valuable lessons indeed.
This is a great article, not just for understanding React hooks but for really wrapping your head around closures. It’s not short, and not super simple, but I enjoyed it a lot and learned throughout.
If the previous article felt a bit too hard to follow, this one might be a better try. It’s tightly scoped and relatively short, giving you a great explanation of closures and how they work.
An interesting and broad look at the tech ecosystem and the role Design is playing in it. Multimedia depending on what you want - just reading through the desktop slides version was fascinating but felt a little fragmented. The video of the author presenting it at SXSW gave a lot more context.
Great article on one of the biggest simple ways to improve network performance - better caching. Becomes even more useful if you’re employing a CDN. If you’re in a big company that has dedicated operational folks this probably is outside the scope of what you’re doing as a frontend engineer, but regardless if you care about frontend performance you should understand this stuff and check to make sure your assets are being cached appropriately.
GraphQL is one of my top topics to learn this year, and it seems like there’s more resources coming out every week. If you’re looking for some of the best ones for beginners this is a super useful roundup post.