pretzelhands

#pretzel2018

Going from zero to fifty dollars per month.

Current earnings: 0 USD per month

Day 21

Building my personal rainbow: .colors()

Hey everyone,

since I wasn’t able to get that much done on TaskZen recently, I decided to do a quick project to solve my own problem and now it is finished. I lovingly call it .colors() (speak: dot colors)!

What it does is essentially accept an array of color values. Whether that be CSS color names, hex colors, RGB(A) colors or HSL(A) colors and it spits them out in a pleasant-to-look-at way! You can also drag and drop the colors to re-arrange them and the change in order will be reflected in the code.

You can check it out right now at dotcolors.co!

Any feedback you may have is vastly appreciated and can be sent either via the feedback form or via Twitter. Whichever you prefer! The rest of this article deals with the build process of the app.

The idea

.colors() stems from my need of working with color arrays. This happens more often than I realized and whenever I do, I end up googling color codes just to check my colors on by one so I know what I’m dealing with and if the colors are in the order I need them to be in.

Enough I said!

So I decided to build a tool that I can feed my colors and it spits them out in a similar way to how Coolors does it. I’ve always liked their way of displaying color palettes, so the interface is inspired in a big way by how they do things.

The tech stack

I built the whole app with Vue.js; I’m usually a React guy, but I thought this would be an ideal chance to deepen my knowledge of the other big player in the front-end framework space. And it was.. pleasant! Vue is really quick to work with and very organized.

When it comes to differences between the frameworks it’s mostly just a preferential thing, in my opinion. Vue feels a lot more based on traditional web standards of dealing with HTML, CSS and JavaScript seperately, whereas React pushes a more JavaScript based approach. I’m honestly okay with either, but I do generally like Vue’s approach of being easily adopted in existing static pages.

The drag and drop functionality is based on Dragula, which is a very cool library for building such! The only thing that gave me a major headache was updating the code based on the sort order. The vue-dragula adapter is supposed to update your models automatically, but that didn’t work out in my favor.

In the end I settled for manually iterating over the DOM manually and setting my models by hand. It’s not elegant, but it works fine.

Build time

The whole app was built over the course of this weekend. It was really a very fun distraction, especially given that this past week has been pretty bad due to bureaucracy. I think in total I invested about 10 hours of work into everything? It’s really not that bad.

I hope you enjoyed this little overview of the build process and have fun playing with the app. If you like it you can also send me a tip via the page itself. I’ve attached no price tag to this one. :)

See you soon,
Richard