My first Open Source project

#javascript #opensource #npm #webdev

I have always wanted to start an open source project, a library that would grant other developers the rights to use, study, change, and distribute the software for any purpose. I always believed that no matter the outcome, launching your own project is a great way to learn how open source works.

It will feel scary to share your work with the world, you might get nervous about what people might say about you, but the only way to get better is to practice, and showing it to the rest of the world is a great way to get a feedback.

I soon found out that one of my the most rewarding experience, comes from the relationships that I build with other developers facing up against the same issues as me.

How it started

Not to long ago, while I was working on one of my projects on Upwork, I came across a interesting task, I had to programmatically generate an array of color gradients by providing start and finish colors, as well as the required number of midpoints.

Initially, I started to look for solutions on the web, I found one library which was exactly what I was looking for, but as it was published 7 years ago, with no recent updates, I decided to create one myself.

The project I was working on was a React web application, I could create the open source project using the same library, which would help me save some time, but I thought about other developers who could potentially be facing the same issue, I decided to stick to plain JavaScript and as a result, make my solution more accessible.

Publishing the library

As my client was okay with me open sourcing this snippet of a code from the project, I quickly rushed to npm Docs, to see how I could set up and publish my first ever library.

Feedback

The project was a success, on the very first week it reached over 800 weekly downloads, developers were using it in all sorts of web applications.

Shortly after, I got my new issues from the users, and as it weird as it sounds, I was very exited to solve the errors that were connected to my library and further improve it.

About the project

You can view the live preview on Codesandbox or check the source code.

Top comments (6)

Rich Winter • Nov 27 '20

Cool stuff - but where's the link to your github repo? ;-)

I might suggest making the setting arguments to be part of the constructor: Instead of colorGradient.setGradient(clr1,clr2);, it could be argued that this is cleaner:

const gradient = new Gradient(clr1, clr2);

const colorsSpread = new Gradient(clr1,clr2).getArray() // looks more 'functional' to me.

cubiclesocial • Nov 24 '20

There's a game for Android and iOS called "I Love Hue" that's basically a 2D color gradient generator.

For the most part, gradients involve converting to a compatible color space (HSB is a good first choice), picking scaled values along the continuum between the two hue, saturation, and brightness values, and then converting the result back to the display format (RGB).

Suggestion for an improvement: Add the ability to set an array of objects where each object defines a color and a percentage position for that color rather than assume equidistant colors. The human eye is more sensitive to certain colors than others. Color selection and compatibility is an interesting topic that I've written about.