A step-by-step guide to setting up Chromatic and using it to publish Storybook and run visual regression testing

Books on library shelves
Books on library shelves
Photo by on .

is a UI tool to streamline component buildout for development, testing, and documentation. is a cloud-based toolchain for Storybook. It streamlines the process of shipping UI components with higher quality.

In a , we explained how to set up Storybook. Today, we will go through the steps to set up Chromatic and explore the following key features:

  • Execute one simple command to publish Storybook.
  • Enable visual regression testing.
  • Empower UX designers to review visual diffs.
  • Maintain a documented, versioned, and searchable library.
  • Integrate with GitHub and continuous integration (CI) services.

Set Up a Chromatic Account

In order to use Chromatic, it is…


Exploring new features since Storybook 6.0

Photo by on

is a tool for UI development. It makes development faster and easier by isolating components. This allows us to work on one component at a time. It streamlines UI development, testing, and documentation.

Storybook 6.3 was released in June 2021. Besides , , , and support, the followings features have been supported since Storybook 6.0:

  • Zero-configuration setup
  • Dynamic component editing
  • Multiple Storybook Composition
  • Documentation improvement

In this article, we dive into the details of these features.

Zero-Configuration Setup

Storybook is complicated. It gets more difficult when there are more knobs to set up a complicated piece…


A walkthrough of HTTP/0.9, HTTP/1.0, HTTP/1.1, HTTP/2, and HTTP/3

Phone on desk
Phone on desk
Photo by on .

“The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems.” —

HTTP allows browsers and servers to communicate. It forms the basis of what a web server must do to perform the most basic operations. HTTP has gone through a number of stages. The latest draft of (HTTP/3) was published on May 27, 2021.

Let’s walk through HTTP’s history and explore the…


A living document of the new React features

Open book
Open book
Photo by on .

On June 8, 2021, React 18 Alpha was released. It is exciting to see .

The has been formed to provide information and support to the community through the release. React 18 Alpha can be installed with the following command:

npm i react@alpha react-dom@alpha

React 18 is a major release that brings changes on both the client side and server side. These are the new features:

  • Replacing render with createRoot.
  • Adding strict effects to StrictMode.
  • Automatic batching for fewer renders.
  • startTransition keeping UI responsive.
  • useDeferredValue generating a deferred value.
  • Concurrent Suspense


A learning experience on how to recover a Mac from a battery drain and how to use computer battery optimally.

Photo by on

I once left my Mac in sleep state on battery, went away for a week, and the battery was completely drained after I came back. I plugged the Mac into an AC line, and the computer was powered on. I was asked to input the login password. With the correct password, the progress bar showed up and reached 100%. Then, it was stuck at 100%. There was no further progress, regardless of how long the waiting period was.


A step-by-step guide to testing React components using Jest/Enzyme

A scene at Guilin Longji Terraces in China
A scene at Guilin Longji Terraces in China
Image credit: Ruyun Xu

is a JavaScript utility to test React components. It provides built-in ways to manipulate and traverse the as well as to simulate actions and events. It allows us to assert that the rendered components work as expected.

Enzyme, , and are three popular testing frameworks that work with Jest. Enzyme and React Testing Library are focused on , while Cypress specializes in end-to-end testing.


OpenAPI Specification is a standard for both server and client.

A scene in San Jose Municipal Rose Garden
A scene in San Jose Municipal Rose Garden
Image credit: Author

The (OAS) is a specification for machine-readable interface files for describing, producing, consuming, and visualizing RESTful web services. It is a standard for both server and client. Developers do not need to write, maintain, or worry about the consistency of code that will be generated automatically. In addition, Swagger UI generates beautiful documentation and acts as a test environment for API endpoints.

In addition to , Swagger Codegen performs the following two actions:

  • Generate server stubs.
  • Generate client SDKs.

In this…


Design first or code first, its your call

A scene at Nola’s Iris Garden
A scene at Nola’s Iris Garden
Image credit: Author

We have . Let’s look further into Swagger Codegen and Swagger Plugins.

Swagger Codegen starts with the OpenAPI Specification (OAS), and performs two actions:

  • Generate server stubs.
  • Generate client SDKs.

In this article, we focus on how to generate server stubs. We will talk about how to generate client SDKs in .

Generating server stubs is the design first approach, which starts with the OpenAPI Specification, or JSON defined APIs on resources, operations, and data models. Once the design is complete, the business logic is implemented based on the generated…


An introduction to OpenAPI specification, Swagger Editor, and Swagger UI

A scene in Nola’s Iris Garden
A scene in Nola’s Iris Garden
Image credit: Author

Have you heard of APIs that are developed and documented by Swagger?

Yes, Swagger is hot these days. This novel approach uses the OpenAPI Specification, formerly called the Swagger Specification. After many years of API freedom, there is finally an industry standard to design, build, test, document, and use RESTful APIs.

Here is the definition from .

“Simplify API development for users, teams, and enterprises with the Swagger open source and professional toolset. Find out how Swagger can help you design and document your APIs at scale.”

Swagger is all about the APIs. UI developers are the consumers of APIs…


Compare XML, JSON, and YAML to see the trends for data formatting

A scene in San Mateo Arboretum Society
A scene in San Mateo Arboretum Society
Image credit: Author

What is the world’s most popular programming language?

. After analyzing millions of open source GitHub projects, Datree.io found 60 million YAML files. In addition, it discovered at least one YAML file in more than 10,000 private repositories.

What is YAML?

, a recursive acronym for “YAML Ain’t Markup Language”, is a human-readable data-serialization language. It is commonly used for configuration files and in applications where data is being stored or transmitted. For example, YAML has been used by , a toolset for OpenAPI that is a standard for both server and client. …

Jennifer Fu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store