New Rating System Demo

I am currently working on a side project where users will be able to rate individual tracks on an album. This project gave me the opportunity to re-think how we rate things online. I wanted to make a simple "rate on a scale of 1-10" system (no halvsies!), but I wanted to come up with something better than radio buttons, or a text field. After a lot of tinkering, tweaking, and meddling, I came up with what I think is a pretty slick little system.

The overarching metaphor of this app will be that of a graphic equalizer. The rating system builds off of this metaphor and lets the user feel like they are adjusting a graphic equalizer when they rate each song. It looks nice, it consistently fits in with the design language of the site, but most importantly, it is fun! Let me walk you through the code real quick as I show you what I did.

I have created a demo site, showing off the rating system and it can be found here

The entire system works off of a hidden form field that gets submitted once the form is submitted. The user interacts with this hidden form field by activating the different rating boxes with the mouse.

in this example, there is the aforementioned hidden field at the top, an empty div called "your-rating" that will provide feedback to the user, and a "clear" button to reset the rating. Each empty rating box in the "rater" is given a data attribute of the number that it will submit into the empty form field.

This is where the real magic happens. I am using javaScript to detect hover on each rating box. On hover, the div's opacity is set to 1 (otherwise it's default opacity is 0) as well as every rating div that has a rating attribute that is lower than the current one the user is hovering over. That way the user is given feedback that they have "filled" the rating bar up to this point. At this point no rating is submitted and the hidden field's value has not been altered. This can be seen when the user exits the rating bar with their mouse, the javaScript detects this and returns the opacity of each rating div back to 0. It is not until the user clicks on a rating box that anything happens. Once the user clicks on a box, the hidden fields's value is replaced with that rating box's data attribute, and the "your rating" text is updated to reflect this new rating. The click event also fixes the current rating box and all lower boxes to remain fully visible to provide good feedback to the user that they have "filled" this much of the rating bar.

The CSS for this is crucial for this to function properly. I needed to give each rating box a different color, I added a transition to give it a nice fade-in animation, and I have positioned each of the boxes appropriately. The "triggered" class is applied to hold the state of the visibility of that box.

I was pretty pleased with myself after building this, so I came up with an alternative. You may notice in the demo that the second and third rating bars behave a bit differently. For these, I am changing the color of the entire bar based off of what rating box the user is currently selecting or hovering over. For this, I added a "color" data attribute to the markup so that I would always know what the original color of that div was supposed to be (because I would be changing it all the time). In the javaScript, I am looking to see if this attribute is present and if so, I am using it to set the color of all the divs lower than the current div (as well, as making them visible). I REALLY like this effect, but in the end, for my purposes, it didn't not fit as well with the graphic equalizer metaphor I had set up. Therefore, I went with the simpler approach. Furthermore, there is no reason why this couldn't be abstracted into a jQuery plugin, or modified to handle any shape or color, in fact, I think I should get on that...

Creating a Simple JavaScript Router

When I set out to build this very site, I wanted it to be a simple, fast, site without any page refreshes. The obvious choice for this kind of behavior was JavaScript. This site began its life as a Rails App so there is still the Rails stack in place (and I will eventually replace that with something lighter and thinner like Middleman or Sinatra), so within that framework, this site runs with just a single controller with a single index action.

All of the content and markup on this site exists on the index template. Showing and hiding the different sections of the site depending on user actions and navigation routes needed a thin, light JavaScript "Router" that would be smart enough to handle two different use cases:

• The Router needed to be able to parse the address bar and show the correct part of the index page when the user reaches the site from a link.
• The Router needed to be able to show and hide different parts of the index template when the user clicks on different navigation links on the site.

For this Site I needed to handle 3 different sections: the homepage, the blog index, and a particular article's show page. The first step I needed to take was to create a catch-all route in the routes file so that every request, no matter what the address, would be directed to the root page.

After directing all requests to the root page, I then needed to parse the address bar and fire the correct function. I first check to see if the user is on the root page, if not, I check to see if the user is trying to get to the blog, and finally, if they are on the blog page, I check to see if the user looking for a specific article. I even have a "no_article" div that is displayed if no article title matches the address parameters. If none of these conditions are met, the "home page" portion of the index is shown.

Each condition calls a corresponding render function that simply hides certain sections of the markup so that the correct content is shown to the user. These functions do the following:

There is no real magic here. Each render function pushes everything else off of the page, and it fills the screen with the correct content. In addition, each function makes sure that the correct address is pushed to the address bar using HTML5 pushState. I admit that the code could use some drying up and that pushState is not supported by all browsers, but this solution suited my needs well enough. I will continue to refactor the code and improve its performance but for a first try, this router meets both of my needs and I am happy with this solution.

Some limitations to this approach are obviously browser compatibility. This will only work in "modern" browsers with JavaScript enabled. For a lot of use-cases this is a deal breaker, but since this is a personal site where I get to have fun and experiment, it works just fine for me. The second drawback is error response codes. If a user tries to access an article that does not exists, they are not given a 404, rather, they are just shown a message telling them that no such article exists. This is not a terrible solution as far as the user is concerned, but could be handled better.

There is also currently no support for the browser back button, although I hope to remedy this soon.

Animated Logo Using CSS Transitions

Websites are becoming less and less static these days, usually (like in the case of this site) with a little help from our friend javaScript. One aspect of sites, however, that still remains pretty static is the site or company logo, and for good reason, logos are the anchor that identifies a company or site and if I know anything about anchors, I think it is better if they stay fixed. That being said, I think there is an argument for giving subtle animations to logos to give a site some character. For some brands and sites, this would not really make sense. But I think more than a few brands could benefit from some jazzed-up logos that use small animations in a responsible way. What is a responsible way? Well, unlike the notorious <BLINK> tag or the hideous animated GIFs that pollute the internet, an animated logo should be restrained and logical for the brand. It should also only animate on hover. After all, it is almost universal that a site logo is used as a link to the homepage and other anchor tags on a site usually give the user a clue that something will happen if they click this thing when they hover over it, why not the logo?

Like I said, this should not be abused (you don't want your site looking like it was a geocities page transported forward through time). Give careful thought to what your site is and what your logo looks like and think about logical animations that would suit the feel and content of your brand. In the case of my Music Blog, Mixtape, that I maintain, I wanted a logo that conveyed the essence that this was a music blog and after toying with a few ideas, it hit me that a digital graphical equalizer would be a simple way to blend the idea of a cool looking logo that is appropriate for the purpose of the site, a music blog, with some fun CSS transitions.

Once I settled on the content, building up the logo was pretty easy. The logo is built entirely in HTML and animated with only CSS3 transitions. I also added an image meta-tag so that Facebook and RSS readers would be able to parse an image of the logo for their purposes. Below is the markup (written in HAML, for those not familiar and think this looks a little strange):

The logo's markup is pretty simple. It consists of the main text and a <div> containing the 10 equalizer bars that all inherit the same properties of the class .logo_bar but are each given there own appended class so that I can target each one individually with CSS.

I styled each of the empty .logo_bar elements with a different height and color. I then styled the height of each of the bars to be different on hover. I played around with different heights before hover and after hover until I came up with a look that I liked in both states. From there, adding the animation was as simple as adding a css transition for the "height" property of the .logo_bar element, no javaScript required. I prefer doing all of my styling in SASS and I use a simple but great mixin library called Bourbon. Here is the code for that below:

In the end, I was really happy with how everything turned out with this logo. It is bold, simple, but stylish, and the subtle animation enhances the site's purpose and is appropriate for the content. Go ahead, hover over the logo below, it won't bite!

Well, that is all I have to say on this matter. You will have to decide what is appropriate for your brand and/or site, but I hope you consider adding a little touch of animation to your logo. But remember, with great power, comes great responsibility!