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 - so I wrote my own library.
color-utilities
Color Utilities is a lightweight library for simple color manipulation and multicolor, data-driven linear gradient creation.
Functionality
color-utilities 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 and Prettier for code formatting
Testing
Unit tests are written in Jest
Documentation
The docs are generated using VuePress and deployed using Vercel
Getting Started
Installation
$ npm install @philipbaker4/color-utilities
Example Usage
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
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 have 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 (and more recently about 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 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.
Top comments (0)