Happy Friday! This week was one of reflection for me, and one thing I’m grateful for is all of your continued readership and support. Don’t ever hesitate to send me a note, question, or feedback (positive or negative), I always appreciate it.

This week what really stood out to me was a slate of articles focused on design systems, and particularly the human/interpersonal aspects of those systems in addition to the technical tools. You’ll find those down in the ‘other awesome’ section. There’s also a super exciting Sass announcement, some great CSS Grid and Custom Properties articles, and a couple great JavaScript tutorials. Enjoy!

Best,

KBall from ZenDev

P.S. If the idea of tackling the human/interpersonal questions around technology is interesting to you, you might like a new project I recently launched called SpeakWriteListen. If there’s one thing that I can point to that has contributed most to my career success, it’s been my relentless focus on improving my abilities to speak in public, write coherently, and listen carefully. This project is focused on those skills. There’s a free newsletter, just like this one (but a daily tip instead of a weekly digest), and I’ll be adding additional free and paid resources very soon. Check it out at speakwritelisten.com.

CSS & SCSS

Patterns for Practical CSS Custom Properties Use

Great summary of the different ways in which people tend to be using CSS Custom Properties. While all are useful, I think some of the most interesting usecases involve cascading values and mixins. Native CSS Mixins are pretty darn cool, gotta say. :)

Introducing Sass Modules

OMG I wanted this so many times back when I was working on ZURB Foundation. A proper, first-class module system with scoping and namespacing. YES! This is a huge step forward for CSS authors everywhere.

Editorial Design Patterns With CSS Grid And Named Columns

Great article. Shows a super powerful way to use CSS Grid to create areas out of named columns, and then shows how this technique will get even more powerful as subgrid makes its way into browsers.

Feeling Sassy Again

A nice look into tradeoffs between using PostCSS vs Sass. Really a nice look at the tradeoffs between a compilation framework used for essentially polyfills (how most folks use babel also), as compared to a fully-featured language that happens to compile to CSS.

Clipping, Clipping, and More Clipping!

We’ve had a lot of clip-path articles recently, but that’s because it is sooooo powerful, and usable in over 90% of browsers today.

JavaScript

When to Use Map instead of Plain JavaScript Object

I definitely have a tendency to over-use plain JavaScript objects when I intend to use maps. This is a great look at what the benefits are of maps over JS Objects.

Understanding This, Bind, Call, and Apply in JavaScript

Dealing with this in JavaScript is a perpetual challenge for folks new to the language… and even sometimes if you’ve been coding JS for a long time. :) It’s confusing, there’s a lot there, and this is a solid article digging into it.

Vue 3 – A roundup of infos about the new version of Vue.js

This is an updating resource (first released in July) that just got a lot more interesting with the pre-alpha release of Vue 3. If you’re super excited to start exploring Vue 3, even though it’s not quite ready yet, this does a great job of collecting together a set of resources for you.

Popular React Hook libraries

This article does 2 things. First it introduces React Hooks, and second it highlights a set of common and powerful hooks. I wish it only did the second. Frankly, the React Hook documentation does a better job of introducing how they work. But I include the article anyway because the second half highlighting popular libraries is super helpful.

Other Awesomeness

Design Systems Are About Relationships

I love this article. I love the way the author highlights that the “artifacts” of a design system - the code, designs, and documentation - are not the heart of the design systems. The heart is really about creating a shared language and set of concepts across a range of people in different teams with different perceptions and priorities. Yes!

What I learned from 6 months leading a design system for a leading e-commerce company

Another look at best practices for creating a design system. Looks into a lot of the technical details, but also digs deep into many of the same issues as the article about design systems and relationships.

Design Systems are More than Their Components

A set of takeaways from the recent Clarity 2019 conference focused on design systems. Echoes (with reinforcement) the importance of interpersonal questions, but also raises a really interesting point about creating motion standards. I haven’t seen that very often, but it 100% makes sense - so often interactions aren’t included in design systems and end up being “de facto” designed by front-end engineers.

Space, Grids, and Layouts

Great, great dive into the thinking behind laying things out spacially. A nice combination of high level design thinking and nuts and bolts of why particular values work better than others.

Dark mode

Fascinating case-study of building a dark-mode for an existing site. The most interesting thing to me was how he dealt with the images. I love that CSS has gotten powerful enough that we can take effects that used to have to be baked into images and now apply them via CSS, which lets us then change them simply by theme.

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html