Friday Frontend: Design Systems are Human Systems Edition
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.
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
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. :)
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.