Forem: Vlad Shilov

👑 Colord — tiny yet powerful tool for high-performance color manipulations and conversions

Vlad Shilov — Wed, 12 May 2021 15:33:58 +0000

The Story

It's been a year since we introduced react-colorful, the fastest and smallest color picker component for React and Preact apps. Developers love how fast it works and how small its bundle is, so the package has become quite popular (about 1 million downloads weekly).

During the maintenance of react-colorful, we examined the color processing and discovered that all popular color manipulation libraries (such as color and tinycolor2) are quite heavy and slow. For instance, importing all 14 components including their styles from the react-colorful package would be less expensive than importing a constructor from tinycolor2.

That is why react-colorful is not dependent on any of these libraries and has its own color conversion logic built from scratch.

A couple of months ago we noticed that the color conversion code we wrote appeared to be quite performant, so we decided to reuse our experience and created a new modern color manipulation library called Colord 👑

Meet Colord 👑

A tiny yet powerful tool for high-performance color manipulations and conversions.

📦 Small: Just 1.5 KB gzipped (3x+ lighter than color and tinycolor2)
🚀 Fast: 3x+ faster than color and tinycolor2
😍 Simple: Chainable API and familiar patterns
💪 Immutable: No need to worry about data mutations
🛡 Bulletproof: Written in strict TypeScript and has 100% test coverage
🗂 Typed: Ships with types included
🏗 Extendable: Built-in plugin system to add new functionality
👫 Works everywhere: Supports all browsers and Node.js
💨 Dependency-free

Benchmarks

We have performed a bunch of benchmarks against popular color manipulation libraries, and Colord currently beats them all.

API

Colord has an immutable chainable API and follows familiar patterns.

import { colord } from "colord";

colord("#ff0000").grayscale().alpha(0.25).toRgbString(); // "rgba(128, 128, 128, 0.25)"
colord("rgb(200, 200, 200)").isLight(); // true
colord("hsl(0deg, 50%, 50%)").darken(0.25).toHex(); // "#602020"

Supported Color Models

Hexadecimal strings (including 3, 4 and 8 digit notations)
RGB strings and objects
HSL strings and objects
HSV objects
Color names (via plugin)
HWB objects and strings (via plugin)
LCH objects and strings (via plugin)
LAB objects (via plugin)
XYZ objects (via plugin)
CMYK and more are coming...

Plugin System

You probably noticed we used the word "plugin" in the section above. That is actually one of the best things about Colord that other libraries don't have.

By default, Colord includes the most popular color models and functions. The library doesn't add unnecessary expensive features to keep your bundle lightweight, but ships with a powerful plugin system that enables developers to add the methods and color models their applications might require.

import { colord, extend } from "colord";

// 1. import plugins
import a11yPlugin from "colord/plugins/a11y";
import lchPlugin from "colord/plugins/lch";

// 2. enable them
extend([a11yPlugin, lchPlugin]);

// 3. use new methods and parsers
colord("#FFF").isReadable('#DDD'); // false
colord("lch(48.25% 30.07 196.38)").toHex(); // "#008080"

Official plugins are continually being added. These are the ones available right now:

a11y (Accessibility tools)
hwb (HWB color model)
lab (CIE LAB color space)
lch (CIE LCH color space)
mix (Color mixing)
names (CSS color keywords)
xyz (CIE XYZ color space)

❤️ Thanks for reading

Colord cares about bundle size, application performance, and interface accessibility. I hope that the community shares our values and will find the library useful for further projects.

It will help us a lot if you star the repo on GitHub or share the link to this article with your friends 🙏

omgovich / colord

👑 A tiny yet powerful tool for high-performance color manipulations and conversions

The tiniest CSS-in-JS solution for your open-source React components

Vlad Shilov — Thu, 18 Feb 2021 08:29:34 +0000

Hey there! My name is Vlad and I'm fascinated by the development of JavaScript micro-libraries. My primary projects at the moment are:

react-colorful — the tiniest and fastest color picker component for React and Preact apps (14 times lighter than react-color)
wouter — a minimalist-friendly 1.3KB routing solution for React and Preact
omgopass — a tiny 0.3 KB and ultra-fast memorable password generator (600 times faster than password-generator)

react-colorful is the only project that ships both JS and CSS. I want to share with you the challenges we encountered while developing it. You might find our experience useful in making your open-source React components lighter.

📦 Problem

Since its first release, react-colorful has included a CSS file that developers have to import:

import { HexColorPicker } from "react-colorful";
import "react-colorful/dist/index.css"; // 👈 this one

In terms of bundle size, everything was super cool because we wrote all styles as CSS files that were then compressed and minified by a bundling tool.

It seemed like a good solution, but we've started receiving complaints from many developers that were unable to use the styles. It is quite common in the React ecosystem to use libraries like Emotion, Styled-Components, or other CSS-in-JS libraries exclusively and to entirely forgo the inclusion of a style loader. As such, usage of react-colorful would necessitate the alteration of build configurations for these users to be able to access the default styling.

Moreover, many component libraries and UI kits are CSS-in-JS exclusive, so the CSS-only approach makes it difficult for the picker to be compatible.

👩‍🎤 Why not just use an existing CSS-in-JS solution?

In my last post, I mentioned that react-colorful aims to be a zero-dependency package and we didn't want to change that by adding a CSS-in-JS framework, such as Emotion.

The entirety of react-colorful costs about 2 KB, but installing emotion would make the size of the package almost 7 times bigger. Of course, there are tiny CSS-in-JS libraries like goober that cost about 1KB, but we didn't feel like we need the entire library since our styles are not dynamic.

Installing an extra dependency on other developers' projects does not seem justified to us.

🗜 The tiniest solution

In order to achieve our goals, we decided to find a simple way of injecting styles into the page just like how CSS-in-JS libraries do that.

I use Microbundle to build my open-source projects and love it a lot. It's a zero-configuration bundler for tiny modules, powered by Rollup.

Most bundlers, Microbundle included, save processed styles to the disk as a CSS file. Because we wanted to have the styles in JS, we asked Jason Miller, the author of Microbundle (amongst many other notable projects), to provide us with a way to import processed CSS as a string into JavaScript and he generously added a new option to Microbundle:

// with the default external CSS:
import "./foo.css";  // generates a minified .css file in the output directory

// with `microbundle --css inline`:
import css from "./foo.css";
console.log(css);  // the generated minified stylesheet string

It is not necessary to use Microbundle; you can use any build tool that you'd like, just make sure to read up on the docs to configure it properly.

Then we created a simple hook that creates a <style> tag containing the styles for our component. As soon as the component renders the first time, this hook appends the tag to <head>.

import { useLayoutEffect } from "react"
import styles from "../css/styles.css";

let styleElement;

const useStyleSheet = () => {
  useLayoutEffect(() => {
    if (typeof document !== "undefined" && !styleElement) {
      styleElement = document.head.appendChild(document.createElement("style"));
      styleElement.innerHTML = styles;
    }
  }, []);
};

👍 Results

Since it no longer requires importing CSS separately, the usage of the react-colorful became much simpler. Now the component can be used with any CSS-in-JS project or component library.

The hook's gzipped size is about 150 bytes, and I suspect it's one of the smallest ways of shipping CSS for a React component.

❤️ Thanks for reading

We care about size, performance, and accessibility. I hope that the React community shares our values and will find react-colorful useful for further projects.

It will help us a lot if you star the repo on GitHub or share the link to this article with your friends 🙏

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps

react-colorful is a tiny color picker component for React and Preact apps

Features

🗜 Small: Just 2,8 KB gzipped (13x lighter than react-color).
🌳 Tree-shakeable: Only the parts you use will be imported into your app's bundle.
🚀 Fast: Built with hooks and functional components only.
🛡 Bulletproof: Written in strict TypeScript and has 100% test coverage.
🗂 Typed: Ships with types included
😍 Simple: The interface is straightforward and easy to use.
👫 Cross-browser: Works out-of-the-box for most browsers, regardless of version.
📲 Mobile-friendly: Supports mobile devices and touch screens.
💬 Accessible: Follows the WAI-ARIA guidelines to support users of assistive technologies.
💨 No dependencies

Live demos

View on GitHub

🎨 react-colorful — 1,8 KB color picker for React. Fast, dependency-free, customizable, and accessible

Vlad Shilov — Tue, 13 Oct 2020 08:27:09 +0000

📆 The Story

Several months ago I was searching for an open-source color picker component to use in my React project.

I spent a lot of time looking for a good package and noticed that the most popular React color picker, react-color, is 140 KB (far larger than the entirety of react-dom), is not tree-shakeable, is not accessible, does not support keyboard navigation, pulls in 11 dependencies, and is not as fast as it could be.

Despite this, react-color is super popular and has 1,7 million downloads weekly. One of the largest reasons for this is there were no lighter alternatives aligned with modern requirements.

So we decided to create one. The primary goal was to create a modern color picker component that would be 10+ times lighter than react-color.

Ryan Christian, Alex Taktarov, and I had been working hard since July to create the tiniest and fastest color picker for the React community.

🎉 That's how `react-colorful` was born!

Demo:
https://omgovich.github.io/react-colorful

Docs:
https://github.com/omgovich/react-colorful

The current version of react-colorful (v4.1) is 18 times lighter than react-color. It's just 1,8 KB!

🗜 How is `react-colorful` so small and fast?

1. No dependencies

While most of the popular pickers import entire color manipulation libraries that cost more than 10 KB, react-colorful ships only a minimal amount of manually optimized color conversion algorithms.

For example, react-color pulls in 11 dependencies including tinycolor2 that costs 14,4 KB and doesn't support tree-shaking at all.

We have spent a lot of time making react-colorful dependency-free to ensure it is the lightest of the competition. Not to mention that this thoroughly reduces the surface for vulnerability issues to arise.

2. No classes

ES6 classes are good when you need to encapsulate something, but if you want to create a tiny JS library then class declarations will be one of your worst enemies. Current minifiers cannot minify ES6 class fields and member functions because they are not able to track the class when a method is called on an object.

That's why react-colorful is built with functions, functional components, and hooks only.

It's also one of the reasons why our picker is so fast.

3. No polyfills and extra code transforms

We aim to support not only modern browsers but legacy ones as well. So we have Babel configured to make our code compatible even with IE11.

Writing a library using modern language features such as async/await often trades end user experience for source developer experience. While these modern features may be nicer and more terse to write, they often result in much larger statements when transpiled for use in older browsers.

That's why our source code is so humble in terms of modern ECMAScript features. For example, we use Object.assign({}, color, { alpha }) instead of { ...color, alpha }. While yes, the source uses the older and more verbose API, this results in the bundle size being ~150 bytes lighter due to the lack of the polyfill.

4. Manually optimized

We have installed size-limit and tried many, many different things to find the smallest (in terms of bundle size) variation for each part of the library.

It's pretty hard to put into words, so I just share an example with you:

We have a simple function that clamps a value between an upper and lower bound. That's the first version of this function:

export const clamp = (number, min = 0, max = 1) => {
  return Math.min(Math.max(number, min), max);
};

But after a few experiments we have replaced it with:

export const clamp = (number, min = 0, max = 1) => {
  return number > max ? max : number < min ? min : number;
};

Your eyes do not deceive you: we chose the option that is longer. Why? Because the minification makes the second code almost 2 times shorter. See:

Math.min(Math.max(n,i),a)
n>a?a:n<i?i:n

❤️ Thanks for reading

react-colorful cares about size, performance, and accessibility. I hope that the React community shares our values and will find it useful for further projects.

It will help us a lot if you star the repo on GitHub or share the link to this article with your friends 🙏

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps

react-colorful is a tiny color picker component for React and Preact apps

Features

🗜 Small: Just 2,8 KB gzipped (13x lighter than react-color).
🌳 Tree-shakeable: Only the parts you use will be imported into your app's bundle.
🚀 Fast: Built with hooks and functional components only.
🛡 Bulletproof: Written in strict TypeScript and has 100% test coverage.
🗂 Typed: Ships with types included
😍 Simple: The interface is straightforward and easy to use.
👫 Cross-browser: Works out-of-the-box for most browsers, regardless of version.
📲 Mobile-friendly: Supports mobile devices and touch screens.
💬 Accessible: Follows the WAI-ARIA guidelines to support users of assistive technologies.
💨 No dependencies

Live demos

View on GitHub

Forem: Vlad Shilov

👑 Colord — tiny yet powerful tool for high-performance color manipulations and conversions

The Story

Meet Colord 👑

Benchmarks

API

Supported Color Models

Plugin System

❤️ Thanks for reading

omgovich / colord

👑 A tiny yet powerful tool for high-performance color manipulations and conversions

The tiniest CSS-in-JS solution for your open-source React components

📦 Problem

👩‍🎤 Why not just use an existing CSS-in-JS solution?

🗜 The tiniest solution

👍 Results

❤️ Thanks for reading

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps

Features

Live demos

Table of Contents

🎨 react-colorful — 1,8 KB color picker for React. Fast, dependency-free, customizable, and accessible

📆 The Story

🎉 That's how `react-colorful` was born!

🗜 How is `react-colorful` so small and fast?

1. No dependencies

2. No classes

3. No polyfills and extra code transforms

4. Manually optimized

❤️ Thanks for reading

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps

Features

Live demos

Table of Contents

Forem: Vlad Shilov

👑 Colord — tiny yet powerful tool for high-performance color manipulations and conversions

The Story

Meet Colord 👑

Benchmarks

API

Supported Color Models

Plugin System

❤️ Thanks for reading

omgovich / colord

👑 A tiny yet powerful tool for high-performance color manipulations and conversions

The tiniest CSS-in-JS solution for your open-source React components

📦 Problem

👩‍🎤 Why not just use an existing CSS-in-JS solution?

🗜 The tiniest solution

👍 Results

❤️ Thanks for reading

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps

Features

Live demos

Table of Contents

🎨 react-colorful — 1,8 KB color picker for React. Fast, dependency-free, customizable, and accessible

📆 The Story

🎉 That's how react-colorful was born!

🗜 How is react-colorful so small and fast?

1. No dependencies

2. No classes

3. No polyfills and extra code transforms

4. Manually optimized

❤️ Thanks for reading

omgovich / react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps

Features

Live demos

Table of Contents

🎉 That's how `react-colorful` was born!

🗜 How is `react-colorful` so small and fast?