2021: Year in Review

A review of 2021

4 tools to help you version your component library

As I've been wandering around the internet during quarantine, I've noticed a lot of people asking about how to version a component library. It seems like devs who are starting to work on component libraries understand that they should version their libraries, but they're not sure where to start.

How to configure canary builds for your component library

Learn how to use canary builds to validate the quality of your component library's components.

Designing Component Interfaces: Composition vs. Configuration

Design systems teams need to agree on the API they will offer to their consumers, and they generally have two choices: configuration or composition.

Custom hooks in TypeScript

What to do when TypeScript complains about the return type of your custom hook.

Design System Team Models: The First Engineering Hires

Companies are buying into the promise of design systems in 2021. But what does a design systems team look like? And how do you make strategic engineering hires for that team?

Design System Team Models: How to Hire a Frontend-of-the-Frontend Engineer

The five questions that you should be able to answer about a frontend-of-the-frontend engineer after an interview.

Design System Team Models: How to Hire a Frontend Infrastructure Engineer

The five questions that you should be able to answer about a frontend infrastructure engineer after an interview.

Design Tokens

Design tokens are an approach to storing style attributes like color, typography, and spacing in a pre-determined structure. They are an alternative to directly hard-coding style data that allow designers and developers to build consistent, pleasing layouts, quickly accomplish redesigns, and add a theming layer to their applications.

Do you need to version your component library?

Why you should almost always version your component library.

Either/Or types in TypeScript

How to enforce that a function expects 'one property or the other' in TypeScript.

How to emulate vision deficiencies in Chrome Developer Tools

Chrome Dev tools now offers a feature that lets you emulate different vision deficiencies.

How I audit components for accessibility

Over the past few years working on design systems, I've picked up some tips and tricks that can help me ensure a higher level of accessibility in the components I build. This blog post is for you if you want to build more accessible components, and you're not sure where to start.

How to Handle Customization in a Multibrand Design System

How to make a multi-brand design system flexible

How to locally test an npm package

If you're working on an npm package, you need to test it locally before you publish it to the registry. This post talks about three approaches, npm link, npm pack, and yalc.

Before You Build A Component Library: Monorepo Versioning

We can use Lerna with Yarn Workspaces develop across multiple components without having to publish them to a registry or rely on `yarn link`.

Before You Build A Component Library: Versioning

Versioning is one of the most challenging aspects to building and maintaining any library. It's also one of the most crucial. If you want people to use your library, you need to worry about versioning.

Should my component library be a monorepo?

tldr; Your component library should be a monorepo.

Building a multi-brand design system in layers

A blog post to accompany my talk for Figma on using the concept of progressive disclosure of complexity to guide multi-brand design system architecture

How to Recover an Overwritten Commit After a --force-push

Have you ever accidentally overwritten a colleague's work with a force push? Here's an easy way to recover without anyone ever having to know.

Using Theme UI to structure design tokens

Theme UI is a library that helps you to manage your design tokens in an opinionated way. It's based on a Theme Specification that is specifically designed to allow you to theme different applications. While it can be used inside of an application, it's also possible to use it as part of a component library.

What are Conventional Commits?

Conventional commits are a powerful specification that makes it possible to automate some of the more annoying parts of your versioning and publishing workflow.

What is a design system?

A design system is a set of rules, documentation, processes, and encoded decisions that guide the creation of one or more applications.

© 2022 Mae Capozzi