1. Apply a subtle background gradient
2. Add some rounded corners
3. Add text shadows – optionally
4. Add a thin border – optionally
5. Add a box shadow – optionally
6. Repeat this process for active and hover states

For sure, making good buttons means doing these steps well. But programmatically, this is pretty damn simple. The difficultly lies in design not code.

With that in mind, let’s look at how we might use a CSS abstraction language, like LESS, to boil these steps down and make our button code super flexible. But first, let’s take a look at CSS abstraction languages more generally.

What’s a CSS abstraction language?

An abstraction language is a wrapper that adds powerful functionally to the standard CSS language. Have you ever wanted to set a variable in your stylesheet or do some math? Abstraction languages make this possible.

Now, if you’re like me, you might be thinking: “If I need to do multiplication in a stylesheet something’s gone terribly wrong.” Keep reading. Maybe you’ll change your mind.

How do I use a CSS abstraction language?

Normally, abstraction languages require a supporting back-end language. This supporting language parses your abstracted code and generates normal, static stylesheets at runtime. Ruby, for example, does exactly this to turn SASS into CSS.

That’s cool, but for most projects we don’t need a powerful back-end framework. And there’s certainly no reason start using one just to make your stylesheets more dynamic. This means, by and large, abstraction languages just aren’t viable except in large, complicated projects.

But LESS is about to change all that. Alexis Sellier has recently developed a pure JavaScript implementation. This means no back-end language is required. Just follow these simple steps:

1. Give your stylesheet a mime type of .less rather than .css
2. Add an attribute of rel="stylesheet/less" rather than rel="stylesheet"
3. Include the less.js script below all stylesheets in your header.

With that finished, your header should include something like:

        <link rel="stylesheet/less" href="buttons.less" type="text/css" charset="utf-8" >
        <script src="less-1.0.30.min.js" type="text/javascript" charset="utf-8"></script>
    

And now we have access to some pretty awesome features. Like setting variables and performing operations:

        @pagewrap_width: 970px
        @accent_color: #2BBF26;        

        section {
          @pagewrap_width - 300px
          color: @accent_color - #f0f0f0;
        }
    

And that’s just a few of the awesome features. I encourage you to checkout the details and documentation.

How can we use this to make better buttons?

1 Get a nice looking button.

Making a nice button can be tricky, so I recommend using the code posted in one of these excellent tutorials. But if you’d rather roll your own, I suggest this dead simple button making tool.

Whatever your method, just get some CSS and paste it into your LESS equipped stylesheet. In this example, I’ll be using this code:

        /* styles for button color */
        .button {
          color: #fef4e9;
          border: solid 1px #da7c0c;
          background: #f78d1d;
          background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
          background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        }
        .button:hover {
          background: #f47c20;
          background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
          background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        }
        .button:active {
          background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
          background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
        }

        /* basic styles for button size, padding, etc. */
        .button {
          display: inline-block;
          outline: none;
          cursor: pointer;
          text-align: center;
          text-decoration: none;
          font-size: @font_size;
          line-height: 100%;
          font-family: Helvetica, Verdana, Arial, sans-serif;
          padding: .55em 2em .55em;
          text-shadow: 0 1px 1px rgba(0,0,0,.3);
          -webkit-border-radius: 0.5em;
          -moz-border-radius: 0.5em;
          border-radius: 0.5em;
          -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
          -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
          box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }
        .button:hover {
          text-decoration: none;
        }
        .button:active {
          position: relative;
          top: 1px;
        }
    

And our buttons will look like:

2 Extract the important stuff into variables.

That’s a lot of CSS but let’s focus on what actually matters: font color, border radius, border color, padding, and background gradients.

Let’s move these values into variables. It’s a good convention to place them at the top of your stylesheet like so:

        /* basic button variables */
        @background_color: #f78d1d;
        @hover_background_color: #f47c20;
        @border_radius: 0.5em;
        @font_size: 14px;
        @font_color: #fef4e9;
        @button_padding: 0.55em 2em;
        @border_color: #da7c0c;

        /* background color gradients for each state */
        @normal_background_top: #faa51a;
        @normal_background_bottom: #f47a20; 

        @hover_background_top: #f88e11;
        @hover_background_bottom: #f06015; 

        @active_background_top: #f47a20;
        @active_background_bottom: #faa51a;

        /* ...previous css with original values substituted for variables... */
    

Now, already that’s a nice improvement. We can easily make changes to our button styles without having to wade through all that CSS. Want rounder corners? Just increase @border_radius.

3 Make a good thing better with high school math.

While we’ve made an improvement, that still feels like too many configuration options for a simple button. Wouldn’t it be nice, for example, if we didn’t have to worry with all those color variations (i.e. border color, background colors, gradients, etc). It would be much better if we could consolidate all those values into a single variable (e.g. @button_color).

Let’s do just that. First, let’s change @background_color to @button_color. We’ll hold this value constant and set all of our other color-related values relative to @button_color. This means we’ll be able to alter one variable — @button_color — and changes will automatically cascade through related variables.

In case you’re confused, I’ll break it down a bit so you can see what’s going on. We’re just doing some simple math with hexcodes:

        /* we've already set these variables */
        @background_color: #f78d1d;
        @border_color: #da7c0c;

        /* if we know that: */
            @button_color - @border_color = #1D1111
        /* then high school algebra says: */
            @border_color = @button_color - #1D1111
    

So we can use this concept to set all our color values relative @button_color. Now our configuration options are looking much leaner:

        /* button configuration options */
        @button_color: #f78d1d;
        @border_radius: 0.5em;
        @font_size: 14px;
        @font_color: #fef4e9;
        @button_padding: 0.55em 2em;

        /* color variables set relative to @button_color.
        You probably don't need to change these. */
        @hover_background_color: @button_color - #031100;
        @border_color: @button_color - #1D1111;

        @normal_background_top: @button_color + #031800;
        @normal_background_bottom: @normal_background_top - #062B00; 

        @hover_background_top: @button_color + #010100;
        @hover_background_bottom: @hover_background_top - #082E08; 

        @active_background_top: @normal_background_bottom;
        @active_background_bottom: @normal_background_top;   

        /* ...previous css with original values substituted for variables... */
    

So now we only need to concern ourselves with five clearly named variables. And we can easily change our style to suit different themes. Change the value of @button_color to #ffb515 and you get yellow buttons complete with CCS3 gradients:

Or change @button_color to #2daebf and @font_size to 22px:

You get the idea. Changing styles couldn’t be easier.

But this is about more than just buttons.

This is just a trivial example of how LESS can make our stylesheets more dynamic. Imagine, for example, WordPress themes where non-developers could alter the entire color scheme by changing a single variable. Or tweak the layout through something like @sidebar_width.

When done well, layouts could even feel a bit like jQuery plugins. Just download the files, change a few configuration options, and you’re ready to roll. This would be especially useful for stylesheets that aren’t too application specific — like wireframe layouts or admin/cms interfaces.

Maybe designers will even start open-sourcing layouts the way developers share plugins? Maybe.

Download the project from GitHub

How to make it work.

Just add a swap_value attribute to your element specifying the value you’d like shown in the field:

       <input type="text" name="username" swap_value="username" />
    

And call the plugin like this:

        $("input[swap_value], textarea[swap_value]").swap_value();
    

You can also change the default text colors by passing arguments to the function:

        $("input[swap_value], textarea[swap_value]").swap_value({
			normal_color: '#3E474D',
			default_color: '#BCBCBD'
        });
    

Don’t forget about accessibility.

For accessibility reasons, you should always include labels for each of your form elements. If you don’t want labels cluttering up your view, I suggest you hide them:

        First Name
        
    

Some more powerful alternatives.

There are some similar, although much more powerful, plugins available for swapping form values. If you’re looking something more fully-featured, I suggest you checkout jquery watermark. Also the in-field labels plugin seems pretty awesome.

Of course, the right choice depends on the needs of your application. Better to go with something simple, if that’s all you need.

Download the project from GitHub

        def twitter_url(resource, tweet_text="Check out this article from my-site.com:")
          tweet_url = root_url.chop + url_for(resource)
          "http://twitter.com/home?status=#{tweet_text} #{tweet_url}"
        end
    

This method just builds a url to twitter and supplies some default text which you may optionally override by passing a second argument. Call it in your view like this:

        <%= link_to "Retweet this post!", twitter_url(@post) %>
    

Now, this method works but it would be much better if we could use shortened urls. So let’s change things a bit in order to use bit.ly — twitter’s preferred url shortening service. Before we write any code…

1. You’ll need to sign up for bit.ly.
2. And grap your api key.

With that info on hand, we’re ready to interface with the bit.ly api. Let’s make another helper method also located in app/helpers/application_helper.rb:

        def shorten_with_bitly(url)
          # build url to bitly api
          user = "insert-your-username"
          apikey = "insert-your-api-key"
          version = "2.0.1"
          bitly_url = "http://api.bit.ly/shorten?version=#{version}&longUrl=#{url}&login=#{user}&apiKey=#{apikey}"

          # parse result and return shortened url
          buffer = open(bitly_url, "UserAgent" => "Ruby-ExpandLink").read
          result = JSON.parse(buffer)
          short_url = result['results'][url]['shortUrl']
        end
    

This method uses your credentials to build a url to interface with the bit.ly api. Bitly receives our request and returns a JSON object containing a shortened url. We’ll parse this object, grab the shortened url, and return it.

Finally, we need to change our initial twitter_url method to include url shortening:

        def twitter_url(resource, tweet_text="Check out this article from my-site.com:")
          tweet_url = root_url.chop + url_for(resource)
          tweet_url = shorten_with_bitly(tweet_url) if Rails.env.production?

          "http://twitter.com/home?status=#{tweet_text} #{tweet_url}"
        end
    

This is identical to our original method except we’ve added a new line which calls shorten_with_bitly. This line overwrites the tweet_url variable — replacing the long url with a shortened version. Finally, we’ll include a condition to ensure this only happens in production. This saves us from creating a bunch of useless bit.ly links that point to localhost urls.

Some final points.

• The shorten_with_bitly method borrows heavily form a ruby snippet posted by Puneet Pandey. Pandey definitely deserves some credit here.
• If you’re looking for a more robust way to interface with the bit.ly api, checkout this url shortening gem by Nasir Jamal. I’ve never used it but appears to be fully featured and well documented.

What is processing.js?

Processing is an easy-to-learn, open-source programming language for making images, animation, and interactions. Think of it like Flash but without all the nonsense. John Resig recently ported the language over to javascript for use on the web. The result — processing.js — uses javascript to draw shapes and manipulate images on the HTML5 Canvas element.

How does it work?

1 Download the latest version of processing.js.

You can download the latest stable release here. The package will contain a few files. First, the processing library which you’ll need to include in your header like any other javascript library:

        <script src="processing-0.4.js"></script>
    

Next, an example.pjs file. This is where you’ll write your actual processing code. You’ll need need to reference this file somewhere in the body of your webpage:

        <canvas datasrc="example.pjs"></canvas>
    

2 Create a setup() block to hold your basic configuration logic.

A setup() block holds your basic configuration logic (i.e. the stuff you want to happen one time when the file is loaded). A simple setup() block might look like this:

        void setup() {
        	size(255,255);
        	background(224); // light gray
        }
    

3 And create a draw() block to manage your animation.

You place your animation code inside a draw() block. This code will run as a continuous loop. This means it can be response to interactions, such as mouse position. This little block, for example, will draw a thin black line based on mouse position:

        void draw() {
        	// set line color to black
        	stroke(0);
        	// draw line between previous and new mouse coordinates
        	line(pmouseX,pmouseY, mouseX,mouseY);
        }
    

Where can I learn more?

There are not many processing.js specific resources. But don’t worry. Both processing.js and the standard processing language use the same java-like syntax. This means you can freely mix-n-match resources from either project.

With that in mind, here’s a few leads:

• The processing.js homepage has an excellent learning section as well as a fairly extensive reference library.
• Casey Reas and Ben Fry, the creators of processing were nice enough to write a book. It’s available from the MIT press: Processing: A Programming Handbook for Visual Designers and Artists
• You might also checkout Learning Processing. It’s a little easier to work through — especially if you’re new to programming.

What do you mean by deeply nested selectors?

Most of us learn to write CSS using shallow selectors. Essentially, you give an element a hook (class or id) and use it to write some style:

        #our_team { height: 230px; margin: 60px 0 0 0; }
        .employee { float: left; margin: 0 0 0 10px; }
        .name { text-decoration: underline; }
        .position { color: #add036; font-size: 10px; }
    

But you can also trace each selector back to its common ancestor element:

        #our_team { height: 230px; margin: 60px 0 0 0; }
        #our_team .employee { width: 230px; height: 65px; float: left; }
        #our_team .employee a img { float: left; border: thin solid #5F6568; }
        #our_team .employee p { float: left; margin: 0 0 0 10px;  }
        #our_team .employee p span { display: block; margin: 0; }
        #our_team .employee p a span.name { line-height: 16px; font-size: 14px; }
        #our_team .employee p a:hover span.name { text-decoration: underline; }
        #our_team .employee p span.position { color: #add036; font-size: 10px; }
    

And why is this better?

1 It’s easy to quickly trace a given selector back to its parent element.

In the above example, we know at a glance that .position refers to an employee’s position and not something else (e.g. a utility class that adjusts an element’s position). This keeps things more explicit and thus less confusing.

2 It divides your code into distinctive visual blocks.

Take the above example, not only can you quickly identify all the selectors that belong to #our_team but you can also see how the style cascades through the element. This is especially useful when your stylesheet grows past a few hundred lines.

3 Your rules won’t inadvertently override each other.

Because all selectors trace back to a unique ancestor element, you can be sure that everything nested within that selector will only effect its intended target. This means you can use common class names (e.g. .first, .title, .column, etc.) with confidence that you won’t be breaking the styling elsewhere on your site.

4 You get the benefits of cascading without the headaches.

When using shallow selectors, you often rely on the order that selectors appear in your stylesheet. For example, if you have two selectors of the same value, priority will be given to whichever selector appears last in your stylesheet. That’s fine except when rules start cascading in unintended ways. Then rules become unresponsive because some other selector, four hundred lines lower, is running the show.

But deeply nested selectors don’t have this problem. Because everything traces back to a unique selector, you can be sure your rules will stick no matter where they appear in the stylesheet. And, of course, you can still enjoy the benefits of cascading within the scope of a unique ancestor.

5 You can safely use @import to organize your stylesheets.

Stylesheets can get really long and most of us have devised clever means of trying to keep things organized (e.g. headers, sub-sections, comments, etc.). But the best strategy is to divide your stylesheet into logical chunks, save those chunks as separate files, and include everything (as needed) into a few master stylesheets using the @import directive. This is easier on your server (since you’re only linking to a few stylesheets) and on your brain (since you’re not scanning through a stylesheet that’s 3000 lines long).

But this strategy is problematic since all @import directives must be placed at the very top of your stylesheet. And, because the normal rules of cascading still apply, you can run into inheritance problems pretty quickly if you try to do something like this:

        @import url("reset.css");
        @import url("header.css");
        @import url("footer.css");

        /* ...a bunch of selectors that will likely over-
        ride what you're trying to do in footer.css... */
    

But if your selectors are deeply nested you can use @import with impunity. So long as your selectors trace back to a unique ancestor the order of inclusion makes no difference. You can import footer.css before reset.css and it’s not going to do any harm.

This means you can use @import the way would a php include() statement or a rails :partial in a template. In other words, you can really break things up and keep your stylesheets super organized:

        @import url("reset.css");
        @import url("utilities.css");
        @import url("typography.css");
        @import url("page_structure.css");
        @import url("header.css");
        @import url("main_nav.css");
        @import url("footer.css");

        /* ...the specific style for each individual page
        with all the shared styles neatly partitioned into
        separate files... */
    

Hope this helps get those stylesheets under control.

Here’s an example using blockquotes and citations:

• Lorem ipsum dolor sit amet elit!

  — Alabama

• Excepteur sint occaecat cupidatat non proident!

  — Georgia

• Duis aute irure dolor in reprehenderit?

  — Illinois

• Excepteur sint mollit anim id est laborum.

  — West Virginia

How to make it work.

Drop these scripts in your header:

Call the function to any list element:

        $(document).ready(function() {
            $('ul#quotes').quote_rotator();
        });
    

And some configuration options:

        $('ul#quotes').quote_rotator({
             rotation_speed: 7000,    // defaults to 5000
             pause_on_hover: false   // defaults to true
        });
    

I’ve also built in a default to pause rotation on mouse hover. This is nice if you’re rotating through links or other elements that you might not want fading away from the user.

Download the project from github

If you’ve ever used DreamWeaver to create an image map, then you’ll be pretty familiar with image-mapper’s interface. It’s three dead simple steps:

1. Upload your image
2. Map your image
3. Copy your code

It all happens on a single page so it’s pretty hard to get confused.

It’s made with Ruby on Rails and jQuery. And best of all, no more having to deal with DreamWeaver! Have a look for yourself.

Visit Image Mapper.

Just add these lines to config/environments/test.rb:

		config.gem 'rspec-rails' , :lib => false
		config.gem 'rspec' , :lib => false
		config.gem 'cucumber'
		config.gem 'webrat'
	

Next, make sure these gems are installed by typing:

		RAILS_ENV=test sudo rake gems:install
	

Finally, you’ll need to bootstrap your rails application for development with Cucumber and RSpec. Simply type:

		script/generate rspec
		script/generate cucumber
	

That’s it. Now you’re set up for behavior driven development in your rails app.

How to make it work.

1. Drop these scripts in your header:

2. Call the plugin function on your images:

		$(document).ready(function() {
			$('img').hover_caption();
		});
    

3. Add this tiny bit of CSS somewhere:

		.hover_caption {
			background-image: url(hover_caption_bg.png);
			/* NOTE: if you're img elements have paddings
			or margins you'll need to match them here
			to get things lined up properly. */
		}
    

And here’s some configuration options:

		$('img').hover_caption({
			caption_font_size: '18px',
			caption_color: 'white',
			caption_bold: true,
			caption_default: "Click for screenshots."
		});
	

And the captions are pretty smart.

If your image has a title attribute, the plugin will use that as the caption. Otherwise it will default to Click for screenshots. You can change the default if you like, of course.

A few gotchas.

• Be sure the path to hover_caption_bg.png is correct.
• Don’t forget to add hover_caption_bg.png to your project.
• Be sure the path to hover_caption.js is correct.
• Make sure you’ve referenced jQuery first in your header.

Download the project from github

But it’s easy to overlook a little bit of repetition. You’re in a hurry or dealing with an existing code base or whatever. But this is never a good idea as I learned…

We have an app where users pay a subscription fee through paypal. There are two separate actions – subscribe and renew – which send the user to paypal along with the necessary parameters (price, subscription type, etc.).

Two actions doing pretty much the same thing? Yep, that means repetition.

So, we were running some tests on the payment process and, to do so, had set the subscription fee to a penny. We got everything sorted, reset the subscription fees, and deployed our changes. Of course, we forget to reset the fees in the renew action.

The very next day, a customer renewed their subscription for the low, low price of one cent. So annoying. Anyway, can’t stress it enough – don’t repeat yourself.