colorfi

TL;DR

Prior to starting work on colorfi, I had just begun using tailwindcss and was drawn to the appeal of the color-100, color-200, etc. method of naming color shades. In my research, admittedly brief as it was, I could not find a useful tool that would take a given hex value and would return a full list of tints and shades that could easily be copied over into code. At the time my workflow consisted of using coolors.co and manually selecting and copying shade values for each color. While there very well may be an excellent tool that I did not look hard enough to find, I decided to use this opportunity to learn how to use React as well as create a tool that would improve my workflow on future projects.

Constantly learning new tools and improving my own workflow is something I am very passionate about. Sometimes that involves using a preexisting tool, either using it as intended or bending its usage to what I need it for, or in the case of colorfi, creating a new tool all my own. Tackling colorfi allowed me to pursue both of these passions.

Note: Given that this project served as an exploration of a new technology and improving my own workflow, the criteria used to develop colorfi were based on my personal needs and research was not conducted with other users in mind.

In the past I had been warned that React was very different from writing plain HTML and coupled with advice to introduce only one or two new things in each of my school projects to avoid overwhelming myself and my teammates, React never got introduced to that stack. I was pleasantly surprised how easy it was, though, to pickup and start using React. Granted this may be because I jumped on the react train in a hook filled world that from what I have been able to gather makes writing applications significantly easier and straightforward.

React itself I found to be relatively easy to get up and running with. Its documentation was easy to follow and a lot of what got me up and running I learned from The Beginner's Guide to React course by Kent C. Dodds.

The component nature of React allowed me to easily break up my application as it grew. Individual components were very easy to setup and manage and the actual layout of the application came to life very quickly. However, I found the learning curve of application state management and Redux to be more difficult to jump into. In my previous projects I had not worked with immutable data or necessarily needed to use spread syntax, both of which took me some time to get used to. My inexperience showed when I was beginning to implement undo/redo functionality into the application. Until that point I had believed everything was working properly as everything was updating as intended. However, I quickly learned I was not correctly working with the immutable state of the application when I was updating individual colors as the undo/redo functionality did work as intended to restore previous states of the application.

My mistake was simple, small, and admittedly took me far too long to spot. In my Redux reducer function I had written:

let color = state[action.payload.id];

This line effectively made it so that Redux was updating all instances of a particular color regardless if it was in the past, present, or future state. Applying spread syntax to this line fixed the issues I had been experiencing.

let color = { ...state[action.payload.id] };

While this particular bug was annoying to locate and squash, the process was overall rewarding as I was able to learn much more about the Redux lifecycle that has ultimately feel much more comfortable using the framework going forward.

Conclusion

Developing colofi was an engaging challenge that forced me to expand my toolkit and understanding of the languages I develop with. It also proved to be a rewarding exercise in analyzing my workflow and identifying potential areas that I could improve upon. In doing so I have developed a tool that should prove quite useful in my future projects by removing the tedious and repetitive nature of setting up custom color themes in code.