Happy Thanksgiving for those of you in the US. I have mixed feelings about this holiday, but won’t say no to excuses for time off and time with my family. Hope you had a good holiday without too much arguing with the family you try to stay away from!

We’re a little light on links this week because I’m rushing to put this together in between family obligations, but still some great stuff to check out. I particularly like the article on Orthogonal React components, and the one on Adaptive Loading.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Playing Sounds with CSS

In the “cool party trick” rather than “use this for production” category, but this is pretty cool! The demos seem pretty fragile though - They’re supposed to be chrome/chromium only, but for me only worked in Brave (not even in Chrome). Your mileage may vary.


Using CSS custom properties to reduce the size of your CSS

I like this because it highlights the way your thinking can change as you start to incorporate CSS custom properties, and how you can use that to clean up and shrink the size of an existing CSS codebase.


💪 Train your CSS skills with online games 👾

Nice collection of games you can use to level up on a range of different CSS skills. Varies between very specific (flexbox froggy!) and very generic (CSS Battle)

The Thought Process Behind a Flexbox Layout

Train-of-thought style post taking you through what you can do with Flexbox, exploring various behaviors both from their defaults and what you can do with them. Great if you don’t feel 100% comfortable with Flexbox and want to ride along as someone explores it.



JavaScript

15 JAMstack Resources You Need as a Web Developer

I’m pretty excited about the JAMStack as a way forward for fast, secure web applications that can be build largely by front-end developers. If you’re intrigued, but not sure where to start, this is a great set of resources to get you going.


The Benefits of Orthogonal React Components

This is a nice look at how you can apply separation of concerns within React components, separating across different dimensions than we might have traditionally thought of for the front end. I appreciate that the author also highlights not over-applying the principle. I think you can apply similar logic to knowing when to refactor code - if it’s not changing, or easy to understand, leave it alone, but if the code is both complex and changing frequently, it’s time to refactor (or in this case, orthogonalize).


Other Awesomeness

Smarter Design Systems Tools

A look through some of the ways we’re starting to do a better job as an industry in “closing the gap” between design and development. 


Protecting and syncing secret keys

This isn’t really a front-end topic per se, but it’s a very key concept in building and deploying software that talks to other services (which is increasingly front-end folks are doing with stuff like JAMStack), and an area that I’ve seen new developers struggle. The details of approach vary slightly as you adopt different deployment platforms, but the core idea - keeping secrets in environment variables rather than code - stays consistent.


Adaptive Loading - Improving Web Performance on low-end devices

Super interesting look into a new concept/approach for progressive enhancement, in this case specifically choosing what JavaScript (and other assets) are served based on information about the device loading your website. Very cool!