Consider the form below:

Here's a real quick tip which fixes a problem I've come across time and time again.

Consider the form below:

Here's a snippet of what the code looks like to create 3 of those fields:

	<%= f.label(:vintage) %>
	<%= f.text_field :vintage, :size => 5 %> Optional - e.g. 1990


	<%= f.label(:alcohol) %>
	<%= f.text_field :alcohol, :size => 5 %>% e.g. 5.6 or 10.25 


	<%= f.label(:residual_sugar) %>
	<%= f.text_field :residual_sugar, :size => 5 %> g/L e.g. 45 

You can see I've added a few little side notes next to each field using the small tag. The problem with adding a note inline next to a field in Rails is when the form is submitted and the data isn't valid. The form returned looks like this:

As you can see, the little notes get pushed over onto the next line. That's because Rails puts a div around the fields that are invalid. These divs are assigned a "fieldWithErrors" class. Now this can be useful for highlighting fields that have errors. For example, I like to highlight the label for the field with an error in red text. So I add this to my CSS:

div.fieldWithErrors label {
	color: #933; /* mid to dark red */
}

And that works great, but we still have this problem with the field notes jumping down. The reason for that is because the element Rails uses to put around the invalid field is a div and by default a div is displayed as a block element. We can fix this problem by forcing the browser to render it as an inline element by using the following CSS:

div.fieldWithErrors {
	display: inline;
}

Now it looks like this:

So there you have it. A simple little tip some of you out there might find useful.

Acts_as_attachment really kicks arse when it comes to handling files and images in your Rails application but one thing the file_column plugin has over acts_as_attachment is cropping support. Time and time again at work we have a space in the design for an image which has to be a certain size. By that I mean it must have a set width and height. But the client needs to be able to put any image they want into that space. But what if they upload a bigger image? Or, what if it's different aspect ratio?

Example

Imagine you've got a client that trains dogs. They're revising their home page and the designer has come up with a design that has space for 3 images that are exactly the same size. The designer thinks this looks great, but now you're stuck with the problem of how can you let the client upload any image of any size or aspect ratio and have them perfectly fit into those 3 boxes.

Acts_as_attachment allows you to resize images which is useful when you can have a fixed width or height, but the other is variable. But in this case the designer wants 3 images which are all the same size, both in height and width. This is what would happen if we used acts_as_attachment to resize the images using a fixed width, but variable height.

Out of the box, this is actually your best option. But I've taken acts_as_attachment one step further and added cropping support. This will allow us to resize, then crop the image so that it's scaled down, and then the left over bits are cropped off so that we can fit any image in these 3 boxes of fixed height and width. This is the results of using resizing and cropping:

Now the client can be confident they can upload any image they like and it's going to look nice on the site.

Patching Acts_as_Attachment to Support Cropping

Once you've installed the acts_as_attachment plugin, find the thumbnail_for_image method which is in /vendor/plugins/acts_as_attachment/lib/technoweenie/acts_as_attachment.rb

For me the thumbnail_for_image method begins on line 242. This might be different for you. The method should look like this:

def thumbnail_for_image(img, size)
  size = size.first if size.is_a?(Array) && size.length == 1 && !size.first.is_a?(Fixnum)
  if size.is_a?(Fixnum) || (size.is_a?(Array) && size.first.is_a?(Fixnum))
    size = [size, size] if size.is_a?(Fixnum)
    img.thumbnail(size.first, size[1])
  else
    img.change_geometry(size.to_s) { |cols, rows, image| image.resize(cols, rows) }
  end
end

def thumbnail_for_image(img, size)
  size = size.first if size.is_a?(Array) && size.length == 1 && !size.first.is_a?(Fixnum)
  if size.is_a?(Fixnum) || (size.is_a?(Array) && size.first.is_a?(Fixnum))
    size = [size, size] if size.is_a?(Fixnum)
    img.thumbnail(size.first, size[1])
  elsif size.is_a?(String) && size =~ /^c.*$/ # Patch to enable cropping
    dimensions = size[1..size.size].split("x")
    img.crop_resized!(dimensions[0].to_i, dimensions[1].to_i)
  else
    img.change_geometry(size.to_s) { |cols, rows, image| image.resize(cols, rows) }
  end
end

Save and restart your web app and you should be up and running with cropping support!

How to Indicate you Want Cropping

In your model all you need to do is put a "c" infront of the dimensions on the thumbnail you want to resize and crop. The "c" indicates to acts_as_attachment that cropping should occur.

acts_as_attachment :storage => :file_system,
                   :file_system_path => 'public/system', # Using Capistrano conventions
                   :max_size => 4.megabytes,
                   :content_type => :image, # only allow png, gif and jpg
                   :resize_to => "1000x1000",
                   :thumbnails => {:home => "c100x80",
                                            :something_else => "500>"}

Extending this Idea Further

If you take a look at the modifcations to acts_as_attachment to support cropping, you could easily modify it to support anything you like. Perhaps on a certain thumbnail you want a drop shadow to appear. You could make acts_as_attachment recognise "s" (for 'shadow') infront of the deminsions.

If you do anything cool like that please comment below and let us know!

Images used in example taken from here, here and here.

If you need to test something that changes, then assert_differnce() is perfect. Below is a typical example of something changing. We have a user class and we want to test the destroy method to make sure the user really does get destroyed.

The Rails core team have really been kicking out some cool stuff recently. One addition I've been taking full advantage of is the assert_differnce() method (changeset here). This method is only available to those of you who are using Edge Rails.

If you need to test something that changes, then assert_differnce() is perfect. Below is a typical example of something changing. We have a user class and we want to test the destroy method to make sure the user really does get destroyed.

Let's take a step back for a moment. What changes when this user is deleted? User.count does, because there is now one less user to count. So we need to ensure that there is a difference in the count of users after deleting a user.

Before

class UserTest < Test::Unit::TestCase

  fixtures :users

  def test_should_delete_first_user
    # Record current user count
    old_count = User.count  

    # Delete the first user we find
    User.find(:first).destroy

    # Make sure the count is now 1 less than it was before
    assert_equal old_count -1, User.count  
  end

end

After (using assert_difference)

class UserTest < Test::Unit::TestCase

  fixtures :users

  def test_should_delete_first_user
    assert_difference('User.count', -1) do
      User.find(:first).destroy
    end
  end

end

Ah yes, much nicer.

Here are some guidelines I follow...

It's important to keep a consistant style when writing CSS. When you have a team of developers you might want to consider writing a guideline that everyone follows.

Here are some guidelines I follow...

1. Always combine statements that can be combined. One line is shorter and sweeter. It groups all statements of the same type together which is useful and easier to access. For example:

   /* Better */
   background: url(background.png) #00FF00 no-repeat;
   
   /* Bad */
   background-image: url(background.png);
   background-color: #00FF00;
   background-repeat: no-repeat;
   

2. Always use words for colours where possible. If you're dealing with a basic developer they're far more likely to recognise the word of the colour than the hex value.

   /* Better */
   color: white;
   
   /* Bad */
   color: #FFFFFF;
   

3. Shorten hex colours where possible. Short and sweet.

   /* Better */
   color: #F0F;
   
   /* Bad */
   color: #FF00FF;
   

4. Hex values are easier to spot and read when in capitals.

   /* Better */
   color: #F0F;
   
   /* Bad */
   color: #f0f;
   

5. All hacks should be linked to documentation in a comment. Hacks can be pretty confusing looking to many CSS developers, so why not do them a favour and link them to some relevant documentation so they can go read up about it!

   /* Clearfix hack, see http://www.positioniseverything.net/easyclearing.html */
   .clearfix:after {
       content: "."; 
       display: block; 
       height: 0; 
       clear: both; 
       visibility: hidden;
   }
   /* ... snip ... */
   

6. Be careful not to duplicate CSS or forget to remove redudant CSS. We've all done this, written some CSS and then removed the HTML it was styling but never removed the CSS. CSS redundancy checker to the rescue! This Ruby script will run through your CSS and find and remove redundant CSS for you.

These are just 6 guidlines I follow. Comment if you have one of your own to add...