Creating Typescript Packages

Philip Baker — Mon, 20 Jul 2020 21:28:52 +0000

After using this tutorial (thanks Carl-Johan!) to create a few different npm packages, I decided to create a template repository to speed up the process in the future. If you're interested, you can clone the repository from here. Enjoy!

Publishing a Lightweight, Vanilla JS Color Gradient Utility

Philip Baker — Wed, 15 Jul 2020 03:03:59 +0000

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.

DEV Community: Philip Baker