Friday Frontend: Design Systems are Human Systems Edition
Tags: fridayfrontend, css, javascript, webdev
Published: 2019-10-11 16:52:35

---
title: Friday Frontend: Design Systems are Human Systems Edition
published: true
date: 2019-10-11 07:00:00 UTC
tags: friday-frontend, css, javascript, webdev
canonical_url: https://zendev.com/2019/10/11/design-systems-are-human-systems-edition.html
---

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](https://www.speakwritelisten.com/). 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](https://www.speakwritelisten.com/).

#### CSS & SCSS

##### [Patterns for Practical CSS Custom Properties Use](https://css-tricks.com/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](https://css-tricks.com/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](https://www.smashingmagazine.com/2019/10/editorial-design-patterns-css-grid-subgrid-naming/)

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](https://cloudfour.com/thinks/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!](https://css-tricks.com/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](https://caniuse.com/#feat=css-clip-path) today.

  
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&amp;placement=zendevcom" id="_carbonads_js"></script>
#### JavaScript

##### [When to Use Map instead of Plain JavaScript Object](https://dmitripavlutin.com/maps-vs-plain-objects-javascript/)

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](https://www.digitalocean.com/community/conceptual_articles/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](https://madewithvuejs.com/blog/vue-3-roundup)

This is an updating resource (first released in July) that just got a lot more interesting with the [pre-alpha release](https://github.com/vuejs/vue-next?ref=madewithvuejs.com) 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](https://dev.to/bnevilleoneill/popular-react-hook-libraries-1ih3)

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](https://reactjs.org/docs/hooks-intro.html) 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](https://www.smashingmagazine.com/2019/10/design-systems-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](https://medium.com/bukalapakproductdesign/what-i-learned-from-6-months-leading-a-design-system-for-a-leading-e-commerce-company-cdd3ce9c7156)

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](https://medium.com/indeed-design/design-systems-are-more-than-their-components-9a8771e0634e)

A set of takeaways from the recent [Clarity 2019 conference](https://www.clarityconf.com/2019) 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](https://www.designsystems.com/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](https://adactio.com/journal/15941)

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](https://twitter.com/kbal11) 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](https://zendev.com/friday-frontend.html)