What is colorify?
For an answer to that question, I redirect you to the website’s about page. Everything is explained in great detail there.
Now, that is not explained on the about page, just because it’s outside its scope.
The idea was actually a funny coincidence; I made a nice list of all the parts that converged:
- Spring break started, which means I had lots of free time on my hands to work on useless projects.
- There were a few things I wanted to experiment with, including EcmaScript6, Babel, NPM as a replacement for Grunt…
- I watched a video made by Numberphile a while ago (watch in on YouTube)
So, I got the idea to make a fun little website that would transform text into several hex colors, like the video above explains. 1 day later, colorify was finished, and this is what it looks like:
This is the main input field; type some text, hit enter and be amazed!
This is the colors view; this is (obviously) the heart of it all. Click any color to see its hex code.
Just the about page. Nothing fancy here.
As I wrote above, this project was partly meant as a playground to mess around with some interesting technologies. Let’s talk about that.
9007199254740992; beyond that, freaky shit starts to happen.
That is why I couldn’t just use
All I had to do, was putting the code in a file,
export the relevant functions an
import it in my code.
Distribution of color planes
As you may have noticed, the color planes are not always distributed the same: depending on the amount of colors and the aspect ratio of your screen, more rows or columns are used. The code for this I wrote myself.
Here’s what is basically does: first, it divides the number of colors into primes; then, it sorts the primes (biggest first) into two groups (rows and columns), as close as possible to the given ratio. I have no idea if this is mathematically correct (it seems to work great, though), or if there is any better way of doing this (I did some research, but couldn’t find anything).
EcmaScript6 + Babel
EcmaScript6 is cool. Like there’s-a-new-candy-shop-in-town cool. The modules are cool (so readable!). Arrow functions are cool (who likes to type, right?). Generator functions are cool (endless primes!). Template strings are cool (bye-bye, quote hell!).
Fortunately, Babel is cool also, because some browsers are not.
NPM instead of Grunt
I use Grunt in most of my projects to transform source code into optimized, ready-to-serve front-end code. A few months back, though, I read an article about how NPM can be used instead, thanks to the
scripts field in
package.json. I was interested and decided to try it out on this project.
Turns out, NPM is great. The configuration is way easier than with Grunt (it couldn’t possibly be worse, right?), you don’t have to install grunt (yet another dependency), there’s one less file in the repo and I use NPM already anyways. All this makes it slightly easier for me, but probably a whole lot easier for people who are new to the project: just do the simple
npm install you have to do anyway, then run
npm run build and you’re good. No need to mess around with Grunt. And everyone knows how to write simple shell commands, don’t they?