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.

There’s also some truly excellent JavaScript articles this week - I appreciated finding a writeup on best practices for large & long-lived applications, and really enjoyed the deep dive into React hooks.

Finally down in other awesome, make sure you take a look at the javascript-free frontend piece, as it challenges a lot of modern assumptions while still creating a powerful modern result.

Best,
KBall from ZenDev

CSS & SCSS

Building Robust Layouts With Container Units

This is a very nice article laying out a technique for using CSS variables to build robust, internally consistent layouts.


How to combine SASS color functions and CSS Variables

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.


Writing CSS Algorithms

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”.


Mask Compositing: The Crash Course

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.


Recreating the Facebook Messenger Gradient Effect with CSS

Fun exploration of CSS gradients and their limitations, all within the framework of recreating the “gradient bubbles” effect recently introduced by Facebook Messenger.


JavaScript

Accessibility is not a “React Problem”

A solid set of recommendations for how to get started writing accessible React applications. Ends with a great list of additional recommended resources.


JavaScript naming conventions: do’s and don’ts

More useful for folks who are beginners or new to JavaScript, but this encapsulates a lot of common/best practices in a way that is easy to digest and absorb.


Maintaining large JavaScript applications

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.


Deep dive: How do React hooks really work?

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.


Understanding Closures in JavaScript

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.


Other Awesome

A JavaScript-Free Frontend

This is a very cool look at building out a “modern” front-end while eschewing (for the most part) JavaScript. I played around with the application - it’s barebones and “slim” but works well, feels wicked fast, and while minimalist did not feel super out of place from a visual/design perspective.


Design in Tech Report 2019

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.


Cache-Control for Civilians

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 Resources: top tools, extensions & tutorials for beginners

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.