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 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.
You can think of a design token as a…
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…
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.
The first step is to make sure that I conform to the general guidelines outlined in the WCAG 2.1 specification. (By the way, the WCAG 3.0 draft was just released if you want to check it out).
WCAG stands for web content accessibility guidelines. The spec outlines four…
I’ve heard a lot of horror stories about teams that don’t version their component library. I’ve only heard one success story. Not great odds for team no versioning.
Sometimes teams don’t version their library because they want to automatically propagate newly-available changes across all subscribing applications. It would be great if teams that own individual repos didn’t have to upgrade their codebases to work with new components?
Sadly, this dream is too risky for most teams.
Other teams don’t configure versioning because they want to ship components right away. They don’t want to “waste time” with infrastructure and automation. I…
Web developers used to hard-code all of their style data. If a button needed a background color of blue, they’d assign the background color right at the source:
.button {
background-color: blue;
}That worked for smaller systems that didn’t need a theming layer and weren’t undergoing frequent redesign. But if you needed a large-scale redesign, this was a painful approach.
Invented by Jina Anne for the Salesforce Lightning Design System, design tokens are an approach to storing style attributes like color, typography, and spacing in a pre-determined structure. …
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 system that supports multiple teams and hundreds of happy engineers?”
There’s a lot to consider, but in this post we’re going to talk about design system architecture, and specifically the concept of component hierarchies.
We can use the metaphor of a wedding cake to…
Written by Tim Brown and Mae Capozzi.
This article was originally published on Design Systems.
Most component libraries share an origin story. A growing company offers a new product or service; engineers write new code to support the new products; someone notices that the engineers keep rebuilding the same (or similar) features. Eventually, the company realizes that if it wants to scale its engineering team, applications across its architecture need to start sharing code.
Until recently at Harry’s, we were following that same general trajectory. We had no scalable way to share code between applications and found ourselves rebuilding features…
Flamingo has landed! Harry’s, Flamingo’s parent company, serves over one million female customers. We believe that women deserve high-quality, reasonably priced, and simple body care products too.
As an engineering team, we are committed to providing women with a body care experience tailored to their specific needs. It’s important to us that our customers enjoy their interactions with us not only while they’re in the shower, but also when they shop for their blades, wax kits, or razor handles online too.
To simplify shopping for razors we built a performant, visually-appealing, and secure site. Our architecture performs well across browsers…
React 16.6.0 introduced React.lazy, 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 will help people who prefer reading to watching videos, or who to be walked through it step by step!
Why would I use React.lazy?
React.lazy allows developers to block UI from rendering until a pre-determined condition is met. …
Rumors are flying! Could Context replace redux? Does it make prop drilling extinct? Even if Context !== world peace, the React team has introduced a fantastic tool to simplify one of the most difficult problems frontend developers deal with daily: state management.
Over the past six months, there has been plenty of hype about the new Context. At the end of this post, you’ll know what it is, whether and when you should use it, and how to implement it in your applications.
