Publishing a Lightweight, Vanilla JS Color Gradient Utility 
Published: 2020-07-15 03:03:59

# Backstory

I am a Front-End Developer for the Cleveland Indians where I work to develop internal Baseball systems. (I actually function as more of a Full-Stack Developer, but you get the idea) I work mainly with our Player Development team, building tools for analysts, coaches, and players to help assess talent and help players within our organization to improve. Recently, I was working to replicate and expand functionality of existing R visualizations (created with GGPlot2) using vanilla JS. In the process of doing so, I struggled to find an easy way to match the built-in gradients of [GGPlot2](https://ggplot2.tidyverse.org/reference/scale_gradient.html?q=gradient) - so I wrote my own library.

# color-utilities

[Color Utilities](https://www.npmjs.com/package/@philipbaker4/color-utilities) is a lightweight library for simple color manipulation and multicolor, data-driven linear gradient creation. 

## Functionality 

[color-utilities](https://color-utilities-doc.vercel.app/) currently supports the following functions:

- getHex
- getRGBString
- getRGBArray
- changeSaturation
- getLinearGradient
- getDataGradient
- getMultiColorDataGradient
- getColorFromDataGradient
- getColorFromMultiColorDataGradient

## The Tech
 
### Language
The library itself is written in Typescript and thus can be used out of the box in both TS and JS projects 
### Tooling
The repository is equipped with [TSLint](https://palantir.github.io/tslint/) and [Prettier](https://prettier.io/) for code formatting
### Testing
Unit tests are written in [Jest](https://jestjs.io/en/)
### Documentation 
The docs are generated using [VuePress](https://vuepress.vuejs.org/) and deployed using [Vercel](https://vercel.com/)

## Getting Started

### Installation
```sh
$ npm install @philipbaker4/color-utilities
```

### Example Usage
```js
import { 
    getHex, getRGBArray, getRGBString,
    getMultiColorLinearGradient, 
    getColorFromMultiColorDataGradient 
} from '@philipbaker4/color-utilities'

const red = getHex([255, 0, 0])
const blue = getRGBString('#0000ff')
const yellow = getRGBArray('yellow')

// MultiColor gradient with customizable color step sizes
const multiColorGradientDefinition = [
  {
    minVal: 0,
    minColor: red,
    maxVal: 1,
    maxColor: blue,
  },
  {
    minVal: 1,
    minColor: blue,
    maxVal: 3,
    maxColor: yellow,
  },
];
getMultiColorDataGradient(multiColorGradientDefinition, 12, 'RGB_ARRAY')
---
[
    { color: [204, 0, 51], minVal: 0, maxVal: 0.25 },
    { color: [153, 0, 102], minVal: 0.25, maxVal: 0.5 },
    { color: [102, 0, 153], minVal: 0.5, maxVal: 0.75 },
    { color: [51, 0, 204], minVal: 0.75, maxVal: 1 },
    { color: [28, 28, 227], minVal: 1, maxVal: 1.25 },
    { color: [57, 57, 198], minVal: 1.25, maxVal: 1.5 },
    { color: [85, 85, 170], minVal: 1.5, maxVal: 1.75 },
    { color: [113, 113, 142], minVal: 1.75, maxVal: 2 },
    { color: [142, 142, 113], minVal: 2, maxVal: 2.25 },
    { color: [170, 170, 85], minVal: 2.25, maxVal: 2.5 },
    { color: [198, 198, 57], minVal: 2.5, maxVal: 2.75 },
    { color: [227, 227, 28], minVal: 2.75, maxVal: 3 },
]
---
getColorFromMultiColorDataGradient(multiColorGradientDefinition, 12, 0.5, 'RGB_ARRAY', true)
---
[102, 0, 153]
---
```

### [Complete Documentation](https://color-utilities-doc.vercel.app/)

## Retrospective

This article represents a few firsts for me - contributing to open source, publishing an npm package, creating documentation using a static site generator, writing an article about code. I want to walk through each of this in a bit more depth.

### Contributing to Open Source 

Although this library is currently very small and the ceiling for increasing functionality - at least in a way that would be useful for my application - is relatively low, this project is open source. That feels good.

I am constantly consuming, looking for new ways to learn. The voices saying to get involved in open source projects are constant and, in a way, deafening. I have found it so hard to find a project that I am both passionate about and have the time to legitimately contribute to - though maybe that reflects on my attempts to be involved more than it does the actual difficulty of finding the right project to contribute to. At times I have felt like I <i>have</i> to contribute to open source projects to be a real part of the software community. I should note that I don't agree with this sentiment, but I still feel a bit of pressure nonetheless. This was my first contribution to the open source world (albeit small and maybe meaningless) and certainly won't be my last. 

### Publishing an npm Package

I have done a lot of work with the Cleveland Indians in the direction of creating a design system and internal component library which has led me all the way to the - previously unknown - world of creating JS packages. This project wasn't only a way to satisfy my desire to contribute to open source, but also a way to work with npm package creation, versioning, and publishing a bit more.

### Using a Static Site Generator

As I said, I am constantly consuming more info. I have heard a decent amount about [VuePress](https://vuepress.vuejs.org/) (and more recently about [VitePress](https://github.com/vuejs/vitepress), for which I am excited), and I wanted to see what all the hype was about. After taking a far too aggressive approach to using a new technology - as I frequently do - and struggling, I read the docs a bit and found it incredibly easy to work with. Obviously the [documentation](https://color-utilities-doc.vercel.app/) that I created doesn't change much from the out of the box VuePress app, but I found the process of getting the project setup and deployed to be simple, pain free, and fun.


### Writing an Article About Code

I never enjoyed writing in high school. I didn't enjoy it in college either. I can't say that I'm enjoying it now, but I can say that I certainly like writing about code more than anything else. This is my first article about code and I have to say it doesn't feel like it will be my last.