Good Artists Copy, Great Artists Steal

At work I was trying to figure out an easy way to do a ratings app but the icon had to be variable–it couldn’t just be stars or some other constant. I spent far too much time trying to make SVGs do the work but–maybe because I’m a novice with SVGs–that just didn’t work out.

So I did what any great programmer would do and came up with something by going through the CSS spec and figuring things out from the ground up…and if you believe that, I’ve got a bridge to sell you.

In truth, I looked at all of the sites I knew of that had ratings and saw what they were doing. Some sites used an image map (like Amazon & Yelp) but that’s just too static for my use case. Then, like a beacon of light cresting over the horizon, came the mighty OpenTable. They had a pretty easy, neat way of doing things. Additionally, it shows a percentage of the icons, as opposed to having an image of a whole, half, and quarter icon.

So I did what any great programmer would do and used it for my own needs. Don’t worry, everyone knows I wasn’t the genius who came up with it. Also, I don’t think I’m an artist, nor a great one at that (I’m just staying afloat as a programmer as it is).

The Goods

Just using the following HTML & CSS, you can see the simplicity of how these icons work. You just double the HTML markup for the icons, adding a filled class to the second set and add styling as necessary. The only catch is that the container around the two sets of icons has to have a specified width to adjust the filled set. That’s all there is!

A disclaimer: I’m not claiming to be an expert here and I’m open to any corrections or input from everyone; this is just what’s worked for me so far. Please enjoy!

In my previous posts, I showed how I’ve been setting up my Angular 2 projects with Webpack. I took you through each component starting with the dependencies and scripts to run through NPM, then moving to setting up things like typings, linting, and the compiler for TypeScript. I also showed how to set up Karma for testing with Jasmine before detailing how to configure Webpack for development, testing, and production (sort of).

A disclaimer: I’m not claiming to be an expert here and I’m open to any corrections or input from everyone; this is just what’s worked for me so far. Please enjoy!

The Angular 2 tutorials present SystemJS as the module-loading…uh…system of choice. I prefer Webpack to do my module-loading. I like that it focuses on a build-time versus run-time, but I’m not going to go into the merits of each. In this series, I just wanted to provide an insight of how Webpack can be used to setup an Angular project.

The previous post in this series showed how to write code by doing unit tests first. But that same article provided no way of running the tests. This article is going to show how to run those tests using Karma and Jasmine through Node.

Some very basic steps will be touched on, so if any step is familiar, feel free to skip ahead.