DEV Community: Dean Tarisai

Starting afresh 🌱: Getting to know the community.

Dean Tarisai — Thu, 08 Feb 2024 09:49:00 +0000

Hey, devs 🚀

I'm Dean Tarisai, a freelance software developer from Zimbabwe with an enthusiasm for open source software (because I believe the best things should remain free and accessible to everyone).

I have a keen interest for color science, algorithmic art and the JavaScript ecosystem and would love to share my 2cents while learning from the community as well.

My current open source project is a color manipulation library written in Typescript.

I'm transitioning to backend development with PowerShell and Go as my dialects of choice. I have zero experience with backend development and would love to receive mentorship from the community🚀. I'm interested in getting involved with the robotics and IoT fields.

Grateful to be a part of this family of driven technicians 💙

Update on huetiful-js v1.5

Dean Tarisai — Tue, 12 Sep 2023 12:23:24 +0000

The way software evolves is a matter worth pondering. Over the past few weeks I've seen my package evolve and its API morph over time. I have witnessed the number of downloads of the npm rise and fall like waves in the sea. What I fail to understand so far is why my project has not gathered much attraction on GitHub so far (6 stars so far, not bad for a first project but I was expecting more for the coding hours spent lol).

Today I released minor version 1.5 of the project and I'm hoping to see changes since I have addressed a lot of hidden bugs, some of which were so critical that they compromised the actual functionality of autility.

### Added features

Well, for starters, I added a 2 new factors for the sortBy and filterBy module.

sortByContrast
sortByDistance
filterByDistance
filterByContrast

These utilities apply the respective base functionality based on contrast and Euclidean distance. Of course, the functions make use of Culori under the hood to perform the computations necessary needed for the functionalities to work.

The minor version also comes along with utilities for fetching data of statistical importance such as the smallest hue in a collection of colors.

### Bugs addressed

Open source software is always a work in progress and sometimes the lack of an active user base makes it take longer to address certain issues in a project.

The filterByTemp and sortByTemp utilities were not working as intended because of a bug that was caused by precision loss when I had refactored the rgb2temp and temp2rgb modules to use lodash utilities under the hood for arithmetic operations. The functions responsible for determining the factors needed to sort/filter the colors from collections were throwing only a single value which caused the utilities to hang and not return a value. I addressed the issue by using the simple arithmetic operators on the values necessary for generating the filtering/sorting values. I've learned that over engineering can cause the total opposite of what a developer intended.

I also extended expression parsing to other core utilities which can mutate colors such as alpha , darken/brighten

I'm grateful for the support that is coming from the open source community as we work towards making color science in code accessible and easy to use with as low a learning curve as possible.

### Conclusion

For more information on the changes you can visit the project repository on GitHub or download the package on NPM . Contributions of any kind are welcome!

May the FOSS be with you👽🛸

Working with color programmatically.

Dean Tarisai — Wed, 30 Aug 2023 18:59:37 +0000

tl;dr
🎨

It's been nearly two years now since I nurtured a keen interest on color and its mathematical nature. I'm not a math nerd (don't get me wrong) but I was amazed by the way one could get colors of a certain look by applying a specific range of values to the channels responsible for achieving the desired effects.

Most of this effort has been inspired by material I scraped from the open source community. I stand on the shoulders of giants.

Color has a set of attributes or properties that we can use to describe to the computer how a certain color is supposed to look like. These properties (in this scenario) are hue,saturation,lightness and opacity . We'll refer to them as channels when we're dealing with them in code.

These properties achieve different effects if we apply deliberate changes to their values. For example a color with a low value on the lightness channel will appear darker (no surprise on that of course). By keeping the lightness channel clamped whilst tweaking the values of the hue and saturation channels we achieve colors with a certain look. For example pastels have high saturation and low value and are easily reproduced in the HSV color space.

In huetiful-js there's a pastel() utility that returns the pastel version of a color from a randomised range in the responsible channels in which we can obtain pastel colors:

 import { pastel } from "huetiful-js" 

 let myPastelBlue = pastel("blue") 

 console.log(myPastelBlue) 

 // "#030361ff"

You can even pass it to Array.map and iterate it over a collection of colors and get an array of the pastel versions:


 let sample = [ 
 "#00ffdc", 
 "#00ff78", 
 "#00c000", 
 "#007e00", 
 "#164100", 
 "#ffff00", 
 "#310000", 
 "#3e0000", 
 "#4e0000", 
 "#600000", 
 "#720000", 
 ]; 

 let samplePastels = sample.map(pastel)

Okay, but what if we wanted colors from a certain hue range ?

 import { filterByHue } from "huetiful-js" 

 let sample = [ 
 "#00ffdc", 
 "#00ff78", 
 "#00c000", 
 "#007e00", 
 "#164100", 
 "#ffff00", 
 "#310000", 
 "#3e0000", 
 "#4e0000", 
 "#600000", 
 "#720000", 
 ]; 


 let filteredColors = filterByHue(sample,30,120)

But our customer is picky and wants the colors sorted according to hue in ascending order:


 import { sortByHue,filterByHue } from "huetiful-js" 

 let sample = [ 
 "#00ffdc", 
 "#00ff78", 
 "#00c000", 
 "#007e00", 
 "#164100", 
 "#ffff00", 
 "#310000", 
 "#3e0000", 
 "#4e0000", 
 "#600000", 
 "#720000", 
 ]; 


 let filteredColors = filterByHue(sample,30,120) 

 let sortedColors = sortByHue(filteredColors) 
 //

What about lightness,luminance,saturation and (even) temperature ? Yeah you can use those and more as filtering and sorting criterion too

i think you can see where I'm going with this (hopefully). By encapsulating properties of colors inside functions we can create flexible palettes that we can fine tune using utilities.

There's even a function that can tell if a color is grayscale or not (go test it out if you think I'm lying. If it fails do a PR).

You can check out the repository on GitHub here or as a package on npm

Or just drop an email and let me know what you think. Or even a simple hello.

May the FOSS be with you👽🛸.