Blog

reactaccessibility

How to make a multi-brand design system flexible

design systemssystems thinking

Donella Meadows, the author of Thinking in Systems: A Primer defines a system as “an interconnected set of elements that is coherently organized in a way that achieves something.” All systems consist of three parts: elements, interconnections, and a function or purpose. Elements Elements are…

design systemscomponent library

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

Want frequent design systems tips, articles, and jobs sent right to your inbox?

Sign up for the Design Systems Newsletter today!

If you're unable to sign up, please turn off your ad blocker and try again.

team structurehiring

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

team structurehiring

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

team structurehiring

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?

lerna

Before tagging a new version, lerna scans your codebase for changed files. If it finds a changed file, it’ll recommend a new version. This is really useful most of the time, but you only want to bump to a new version when some library functionality changes. You certainly don’t want to introduce a…

component librariesdesign systemslerna

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

reactaccessibility

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.

component library

Why you should almost always version your component library.

accessibility

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

design systemscomponent libraries

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.

component libraries

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.

design systemscomponent libraries

If you’ve been researching design systems, you’ve probably come across the term “design tokens.” (If you haven’t, no worries! You can read about them here.) Even if you’ve heard the term, you might not really understand what they are or where to start. Design tokens are an approach to storing style…

design systemscomponent libraries

The other day I tweeted: “What is a design system? Wrong answers only.” My favorite response came from my friend Carl Vitullo, who wrote: “The simplest and easiest way to speed up development on a small team.” He’s totally right. If you’re on a small team, and you’re trying to ship your initial…

What is a design system?

September 30, 2020

design systems

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

Custom hooks in TypeScript

September 25, 2020

typescriptreact

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

typescript

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

design systems

Picture a fully-fledged design system. You can bootstrap a new project, pull a bunch of components from the system, and have a page in minutes instead of days. When you’re first starting to build your own, it seems too good to be true. You might be asking yourself, “how do I get from nothing to a…

pro tips

What is a registry? I like to think of a registry like a brick-and-mortar library. When you go to the library, you can check out books that you’d like to take home. Some libraries are public while others are private. If you’d like to check out a book from a private library, you need special…

component libraries

Semantic versioning is a way for library authors to communicate to consumers that you’ve released a new version and information about the kind of version you’ve published. I’ve written about this in more depth before, but here’s the gist: If you start at version 1.0.0 and you just published a small…

pro tips

Early on in my career, I found myself at a total loss about the command to start a new project’s development server. At my first job, we used the script to run the app. I tried to run on this new project, but it just wouldn’t work. I felt embarrassed that I couldn’t figure out how to run the app…

component libraries

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

component librarieslerna

tldr; Your component library should be a monorepo.

What is Lerna?

July 10, 2020

component librarieslerna

Imagine that you’ve been doing a bunch of research, and you’ve decided to structure your team’s component library as a monorepo. You’re probably feeling excited — you’ve finally made a decision! And then it hits you — now you have to make another decision: Do you write custom scripts to manage…

component libraries

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.

component librarieslerna

Are you struggling to make sense of whether you should version your components as a unified system, like Babel or to version them separately, like Gatsby? Well, you’re certainly not alone. It can seem like there really is no right answer, and you might even start wondering why you need to version…

design systems

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

pro tips

If you’re anything like me, there are few things as frustrating as when you need to customize a third-party component’s styles and you just cant. Now that I’m actually working on building a component library myself, I want to share with you how you can build components that can be overridden and how…

component libraries

When you’re working on a component library for your organization, you want your teammates to contribute. If your teammates aren’t contributing to your efforts, it could mean a couple of different things. They don’t believe in the initiative or don’t understand the value of component libraries It’s…

Design Tokens

April 03, 2020

component librariesdesign systems

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.

component librarieslerna

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

pro tips

When leveraging the npm ecosystem, you inevitably add dependencies to your codebase. That’s great –– we’re lucky to have a robust open-source culture. Strangers have solved many problems you might run into! But there’s a catch…all the libraries you depend on are bound to evolve, which means you need…

git

In this post, I’m using vim. But you can use a different editor if you want! You’ll need to figure out how to use your editor as your machine’s default git commit/diff tool. You can find instructions for configuring this with VS Code here. Developers have different opinions about whether to rebase…

typescript

I’m building a Gatsby app that consumes data from a GraphQL service with the help of apollo-client and TypeScript. Because Gatsby creates static assets at build time, I needed a data-fetching tool that would work on the client-side and the server-side. apollo-client recommends using node-fetch for…

component libraries

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.

useBreakpoints: a hook

February 15, 2019

react

I built my first hook a few months ago, and figured I should get it up on the blog. It’s a replacement for a Higher Order Component that exists in a codebase I’m working on. That HoC passes a breakpoint to a component that dictates how the component renders across different breakpoints. If you want…

lerna

When you’re configuring a monorepo with lerna, you might consider writing your build scripts like this: It makes sense, initially! You’re probably thinking, why wouldn’t I want to build all my scripts concurrently, rather than running each build one-by-one? The above build script actually works…

How to use React.Lazy

October 29, 2018

react

React 16.6.0 introduced , which allows you to code-split using the new Suspense API. Siddharth Kshetrapal came out with a great video showing how this works in 60 seconds. I’d recommend watching it –– it’s really well-done. I’ve built a Github clone based off of Siddharth’s example. Hopefully this…

react

The React ecosystem offers multiple ways to pass data and manage state in a client-side application. A developer might choose between prop drilling, redux, MobX, and the new Context API introduced in React 16 depending on the size and complexity of the application they are developing. A developer…

component libraries

Modular frontends are all the rage these days, especially with the rise of React.js. Large companies have begun open-sourcing their frameworks,. Google has Material UI, Shopify has Polaris, and Palantir has Blueprint. You, (or your boss), might be thinking that it’s time for your company to get in…

Developers tend to have opinions on style. If you’ve been in the industry for more than 15 minutes, you’ve at least heard about the arguments over spaces or tabs. And don’t even get me started on whether JavaScript needs semi-colons or not. That’s where automatic code formatting comes in. Sure, when…

react

React 16 has better error handling than previous React versions. If an error occurred inside of a component, it would “corrupt React’s internal state.” Then, we would end up with “cryptic” error messages, or just a blank screen. React lacked a way to expressively and eloquently handle these errors…

javascript

I built the same program 4 different ways. I started with callbacks, moved on to Promises, used generators, and finished up with async/await. The program: Makes a request to Github’s users endpoint Pulls back my Github profile Logs the response Here’s what I came up with. Callbacks I struggled to…

react

You can find part 2 here, and part 3 here. This series will walk you through how to make HTTP requests to the Github REST API in React.js. I’ve chosen the Github API because it is well-organized and doesn’t require us to do any sort of authentication. Part 1 will focus on setting up a React…

react

If you haven’t completed part 1 and part 2 of this tutorial, please do so before starting part 3. Now we’re getting to the good part! So far, we’ve set up a new React application using , and we’ve wired up our component to log ‘Success!’ when we click the button. Now, we need to make the actual HTTP…

react

If you haven’t completed part 1 of this tutorial, do so before starting part 2. Now that we’ve set up our project using create-react-app, we can start writing some code. Open your project into your editor of choice, and let’s start removing some of the boilerplate that create-react-app adds for you…

javascript

Hoisting remains one of the quirkier aspects of JavaScript. When a developer declares a variable in JavaScript, that variable *behaves *as if it’s been lifted to the top of it’s available scope. This article isn’t going to concern itself with what actually happens behind the scenes to cause this…

javascript

Eric Elliot, in his Medium article Master the JavaScript Interview: What is a Closure?, explains that when he interviews candidates for JavaScript jobs, he always asks questions about closures. He writes: “I don’t care if a candidate knows the word “closure” or the technical definition. I want to…

Before you begin, make sure you have node and npm installed. Use a node version higher than 6. Also, note that all terminal commands are for Mac. Please use the equivalent commands for your OS. The repository for this tutorial lives here The other day I was setting up a D3.js project when I ran into…

Want frequent design systems tips, articles, and jobs sent right to your inbox?

Sign up for the Design Systems Newsletter today!

If you're unable to sign up, please turn off your ad blocker and try again.

© Mae Capozzi's Website 2021