A Ratings UI Done Easy (Thanks to Open Table)

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!

See the Pen OpenTable-Style Ratings Icons by Matt Fehskens (@gonzofish) on CodePen.

How I Use Angular 2 with Webpack: Sample Application

Reading time: 5 minutes

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).

The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

Now with all those pieces laid out, I just wanted to throw together a very small sample app to show how it all runs.

The project is on GitHub at https://github.com/gonzofish/ng2-tutorial-webpack. There you’ll also see my versions of the rest of the files talked about in this series. 

Continue reading →

How I Use Angular 2 with Webpack: Webpack Configuration

Reading time: 5 minutes

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!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at the trio of Webpack configurations, in the tsconfig.json file.

Continue reading →

How I Use Angular 2 with Webpack: Karma Files

Reading time: 3 minutes

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!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at the two Karma files needed to effectively run unit tests.

Continue reading →

How I Use Angular 2 with Webpack: TypeScript Compiler

Reading time: 2 minutes

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!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at how to set up the TypeScript compiler configuration, in the tsconfig.json file.

Continue reading →

How I Use Angular 2 with Webpack: Linting

Reading time: 2 minutes

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!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at how to set up the linting configuration, in the tslint.json file.

Continue reading →

How I Use Angular 2 with Webpack: Type Definitions

Reading time: 1 minute

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!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at how to get a hold of the the necessary TypeScript definition files and save them as part of the project configuration in typings.json.

Continue reading →

How I Use Angular 2 with Webpack: Node Modules and NPM Scripts

Reading time: 4 minutes

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!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at what Node modules to install and how to set up the NPM package.json file.

Continue reading →

How I Use Angular 2 with Webpack: Directory Structure

Reading time: 2 minutes

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.

Here’s the run-down of what I’ll be talking about in the series:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this post, we’ll just look at how I setup the structure of the project.

Continue reading →

Write Your Test Code First – Part 2: Running Tests

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.

Continue reading →