Sass Color Calculator

April 12, 2018 - posted by Josh Smith

I almost forgot about this little one-page application that I made in college. It’s called the Sass Color Calculator. It’s an application that helps a developer find the sass function between two colors. This little guy is not only useful to me, but it has greater meaning to me than just a simple application. It was part of a greater experience of the class. College wasn’t all that fun, but the boredom was punctuated by real excitement.

The class was an elective, but I thought it looked like fun. I don’t remember the class number, but it was a 400. We met on the first day and the professor told us all that we’d meet three times in the classroom. The rest of our meetings would be in office hours. He went on to tell us that we’d pick a problem and a technology. We’d solve our problem with our technology. Simple.

Some of my classmates set out to solve enormously complex problems with Python and what would normally take teams of engineers with years of experience to achieve. I had a simple problem that I’ll outline here.

Small Solutions

I used SASS/SCSS every day at the time. One of my favorite features and one that I think future proofs a design is the ability of SCSS to change colors based on a formula. If you know what your starting color is you can lighten it or darken it or change the hue or completely change the color to get an ending color. You just need to know what the function is to change the color. Well, SCSS doesn’t give you that. You can pick and choose until you eventually get it right, but that could take a really long time. Colors are identified by hexadecimal, so that means there are 16,777,216 colors on the web. It’s not infinity but it would take you a while to find that perfect combination. There had to be an easier way to find the formula that would change a starting color to an ending color.

Enter Angular

Angular was just hitting the scene. I wanted to use it. I had seen the demos of the “two-way data binding” and I was in love. I barely knew what it meant, but it was sweet. I knew I could make this work for my calculator.

Add some NPM modules and a little bit of Stack Overflown’ and I created the application. I was proud of what I made during that class. I still am. I learned more than just Angular and two-way data binding though.

The Final

The class was about project management. We had to learn to manage estimates, abilities, and workloads. We had to motivate the team (ourselves) and deliver on time. We had to present our success and our failures in front of our peers. We had to hit a precise time of 25m for the presentation. Almost everything in that class represented what the real-world life would be about in few short months. I learned that fancy sounding applications can be nothing more than a pipe-dream if one is not careful in expectations. I learned that the tiny little application that does one thing, but one thing well offers the most value, especially over time.

© 2019 All Rights Reserved

Designed by Josh at Efficiency of Movement