Working with the flash hash

1 comment

The flash hash is what Rails uses to display messages (both notices and errors). Since it's a Hash, you can assign any key/value pair that you want, but I tend to stick with flash[:notice] for a success message, and flash[:error] for an error message.

In my opinion, using the flash hash is a little confusing. I haven't come across a book or tutorial that fully explains how to control it properly. So, here are the options for using the flash hash in Rails.

flash[:key] and flash.now[:key]

The following method shows how to best use the flash hash:

            def create
              @user = User.new(params[:user])
              respond_to do |format|
                if @user.save
                  flash[:notice] = 'User was successfully created.'
                  format.html { redirect_to admin_users_path }
                else
                  flash.now[:error] = 'The user could not be created'
                  format.html { render :action => 'new' }
                end
              end
            rescue Exception => ex
              logger.warn('ERROR: ' + ex.message)
              flash.now[:error] = 'There was an error creating the user.'
              render :action => 'new'
            end
            

Notice that I use the flash hash in two different ways: flash[:key] and flash.now[:key]. The way I use it depends on when I want it displayed. The flash[:key] usage should only be used before redirection, because it makes the object available for the current action and the next action. The flash.now[:key] usage should be used when you only want the flash object to be available to the current action.

Here's an example why you shouldn't use flash[:key] without redirection. Let's say this is your controller:

            class MainController < ApplicationController
              def index
                flash[:notice] = 'Welcome to the site!'
              end
              
              def profile
              end
            end
            

When you visit the index page, you'll see the message 'Welcome to the site!.' If you then click a link from the index page that takes you to the profile page, you'll still see the message 'Welcome to the site!' because the flash[:key] is available to the current action and the next action.

Displaying the flash

Here is a really helpful method to display the contents of the flash hash that I modified from one of Ryan Bates' awesome Railscasts:

            <%- flash.each do |key, msg| -%>
            	<div id="<%= key %>">
            		<p style="float:right;"><%= link_to_function 'X', "Effect.Fade('#{key}')" %></p>
            		<p><%= msg %></p>
            		<div class="clear"></div>
            	</div>
            <%- end -%>
            

This method will loop through each key in your flash hash and create a div with the name of the key, then put the contents inside with a link to close the message div.

I put this method in a partial called _notice_div.html.erb and include it at the top of my application layout. Here are the styles I use for notices and errors:

            #notice { background-color: #A4E7A0; border: 1px solid #26722D; }
            #error { background-color: #F0A8A8; border: 1px solid #900; }
            #notice, #error { width: 90%; margin: 0 auto 10px auto; padding: 5px; }
            #notice p, #error p { margin-left: 20px; padding: 0; font-size: .75em; color: #000; }
            #notice a, #error a { text-decoration: none; padding: 0 3px; }
            #notice a { border: 1px solid #26722D; color: #26722D; }
            #error a { border: 1px solid #900; color: #900; }
            #notice a:hover, #error a:hover { color: #333; border: 1px solid #333; }
            

Tagged: css, rails, flash

Ruby compressor for JavaScript and CSS files

0 comments

On Friday, Adam and I were talking about the different JavaScript libraries that are available and how bloated they are. They can easily double the page weight of your site. But, if you want to use the pre-canned goodness of Prototype or Scriptaculous, then that's the price you pay. We were trying to find ways to decrease the amount of files a user downloads when they visit our company Web site. One idea was to compress the CSS file and all of the large JavaScript files that we use. Well, I found a cool online service to compress and combine JavaScript files, but there were no readily available sources for shrinking any other kind of file that I could easily find. So, Adam told me to use sed via the command line and use the power of regular expressions to strip line breaks, tabs, and spaces out of the given file. Well, I don't know anything about regular expressions, and Adam couldn't recall the exact syntax off the top of his head. So, he retired to his corner and whipped up a nice little Ruby program to do it for us.

Enter the Shrinker!

You can download the Ruby file below. If you're on a Mac, just copy it to /usr/local/bin then CHMOD 777 it. After that, you can simply run sudo shrinker path/to/file and it will spit out a new file with the extension .shrunk that you can now name anything you want. Windows users can dump the file anywhere they want and then run, from the command line: ruby path/to/shrinker.rb path/to/file to get the same thing.

File: shrinker.rb (UPDATE: This file is no longer available, sorry.)

Tagged: ruby, javascript, script, css

Using a background image on a table row

2 comments

How many times have you had the need to apply a background image to a table row? Chances are, not very often. Before a week or two ago, I'd never even thought about it. I was living in blissful ignorance of the problems that can occur when trying to achieve this. But, of course, things don't go perfectly forever. Recently, Buck handed me a design for a client that incorporated complicated styling for a table that presented information. After the requisite belly-aching, I did what was asked of me. Very simple CSS:

            tr.bar { background: url(/images/tr_background.gif) no-repeat 0 0; }
            

As you'd probably guess, it works perfectly in Firefox, but not Internet Explorer. But surprisingly, it doesn't work in Safari either. So, there must be more to this than just IE and their non-compliance. Having moved on to another project, I didn't have time to research the bug or find a solution. So, I handed it off to Colin, who, after a little experimentation, was able to find an excellent workaround.

The problem with IE and Safari is that they don't allow a background image to be applied to a <tr>. What do they do when you try this? The <td>'s inherit the background. This might not be a huge problem normally, but the reason the <tr> needed the background to begin with is because it had rounded corners on the top-right and top-left. So with the bug, each <td> had a rounded corner on the top-left, which looked a little funny.

Colin found a fix for this, which entailed making a class for the first and last <td>'s and having a separate image for them than the center <td>'s. This would work, but why not use the same image? Colin used the idea of having a class for the first and last <td>, but instead of making new images, he just fiddled with the background-position.

Here's what he came up with:

            td.first { background: url(/images/tr_background.gif) no-repeat 0 0; }
            td { background: url(/images/tr_background.gif) no-repeat 50% 0; }
            td.last { background: url(/images/tr_background.gif) no-repeat 100% 0; }
            

This way, we use the same image. The first <td> starts the image in the top-right, showing the rounded corner, the middle <td>'s center the image, so you don't see either corner, and the last <td> starts the image in the top-left so you can again see the intended rounded corner. Perfect.

Tagged: xhtml, css

Multiple CSS classes on a single element

0 comments

Do you worry about repeating styles in your CSS? If a lot of your CSS classes use a common style like text-align: center; or color: #CCC:, you can actually create a single class for each of these styles and save a ton (well, not really, maybe one or two KB) of bandwidth on page load. A lot of people don't know about assigning multiple CSS classes to a single element.

Let's say you have a <p> tag that you want to add specific styles such as margin and padding, plus some pretty common(throughout your Web site) styles like text-align: center; and color: #666;. Instead of writing each of these styles for every element that they appear on, you can write a single class for each style, or group of styles that usually appear together, and just add it to the class application on the desired element.

Your stylesheet might look like this:

            .specific_style {
              margin: 5px 10px;
              padding: 2px;
            }
            
            .center_text { text-align: center; }
            
            .dark_gray { color: #666; }
            

And then you can add multiple classes to any element by separating them with a space, like so:

            <p class="specific_style center_text dark_gray">Lorem ipsum dolor sit amet.</p>
            

This will apply the specific_style class as well as centering the text and coloring it dark gray. This is a wonderful way to keep your CSS DRY. Be careful though. Don't overuse this method or your elements will have classes a mile long. Very handy when used properly!

Tagged: xhtml, css

IE double margin float bug

0 comments

I'm sure most people have come across this bug once or twice (or a hundred times). You have a div with a set width and it's floated left or right. You also give it a margin on the same side that it's floated to push it away from the edge of the containing area. Works great everywhere . . . EXCEPT IE! Of course. Your CSS might look something like this:

            #box {
              width: 200px;
              float: left;
              margin-left: 20px;
            }
            

The problem with IE/Win is that it doubles the margin that's on the same side as the float. Why does it do this, you ask? Because it's IE. If it behaved the way it was supposed to, it would be Firefox.

There's actually a really simply fix for this. All you have to do is add the magical display:inline to your div, so your final code would be:

            #box {
              width: 200px;
              float: left;
              margin-left: 20px;
              display: inline;
            }
            

You can find this hack and many more at this great CSS resource Web site.

Tagged: css, xhtml, ie sucks