The Original Jelani Harris The one and only


Strip Whitespace on save with Aptana

So recently I had a coworker get slightly annoyed with me and my trailing whitespaces at the end of lines. I'm using Aptana and not anything crazy like vim to do my programming work, I don't actually see the whitespace I'm leaving around.

However, they do show up in the git commits.

Because I don't want to turn on those annoying characters that show my line breaks and whitespace I tried to find an automated solution. My first thought was that maybe Aptana would have an option to remove all of the whitespace before I save. Alas, no option exists (at least with Aptana 3).

Then I found an Eclipse plugin called AnyEdit that solved my problem. AnyEdit can be found at .

Installing AnyEdit

So the first thing you'll want to do is to load up Aptana, go to Help -> Install New Software. You'll want to use as the "Work With:" URL.

Explore the drop downs and check the AnyEditTools plugin and then hit next. Go through the license agreement pages and Aptana will install the plugin. You'll be prompted to restart Aptana, which I always recommend.

The best part, is that the strip whitespace feature is turned on by default across all of your projects. In the case where you don't want to have that functionality, you can go to the properties of a project, and go to the AnyEdit Tools section and turn on Enable Project Specific Settings and then Remove Trailing Whitespace.

And .. it's that easy. Enjoy having cleaner code and even cleaner git commits.

Tagged as: , No Comments

How to install Paperclip in Rails 3

The thoughtbot logo

Paperclip is a plugin/gem created by the talented folks at ThoughtBot. It will make using attachments and uploads in your rails application ridiculously easy to implement. Let's get started!

Things you'll need installed 

Before we start there is only one thing that you will need to have installed on your system before we can proceed.

ImageMagik is a software suite that is used to edit and create images. Paperclip uses it to resize and modify images. The easiest way to install this is to first make sure that you have MacPorts installed, and then running:

sudo port install ImageMagick

This is a massive library and it will take a little while to install.

Installing Paperclip

So you can install Paperclip as a plugin, or you can install it as a gem.

Install as a Gem
This is the recommended way of installing Paperclip. All you need to do is to add to your config/environment.rb

config.gem 'paperclip', :source => ''

Then run:

rake gems:install
rake gems:unpack

Or you can add it directly to your Gemfile if you have Bundler:

source ''
gem 'paperclip'

Install as a Plugin
To install it as a plugin you use:

ruby script/plugin install git://

Using Paperclip in Your Application

Lets add the 'has_attached_file' attributes to the model we want to be able to attach files to:

class Author > ActiveRecord::Base
  has_attached_file :avatar,
    :styles => {
      :thumb => "75x75#",
      :small => "100x100#",
      :medium => "150x150>"

Thankfully attached files do not need to have a separate model. Your attachments are essentially treated like another attribute. The image is not saved until your model is saved (if you desire, there are ways of forcing attachment creation/updates without model involvement - but that's another tutorial)

Now that we have our model paperclip enabled we need to add some database columns to provide full support for it.

class AddAvatarToAuthor > ActiveRecord::Migration
  def self.up
    add_column :author, :avatar_file_name, :string
    add_column :author, :avatar_content_type, :string
    add_column :author, :avatar_file_size, :integer
  def self.down
    remove_column :author, :avatar_file_name
    remove_column :author, :avatar_content_type
    remove_column :author, :avatar_file_size

So the first part of the column name is the same as what we called our attachment attribute in our model. In this case that's photo. Now to update our database we use:

rake db:migrate

Now that we have our database and our model taken care of, we can start working on our content. So in our view we can add a file field:

<% form_for :author, :html => {:multipart => true} do |f| %>
  <%= f.label :avatar %><br />
  <%= f.file_field :avatar %>
  <%= f.submit %>
<% end %>

Displaying Attachments
Now when you want to display your model's attachments all you need to do is use:

<%= image_tag @author.avatar.url %>
<%= image_tag @author.avatar.url(:thumb) %>
Tagged as: , 5 Comments

JQuery is the best javascript library out there

I officially declare JQuery to be the best javascript library out there. So much documentation, so many plugins, so many interesting things you can DO with that library. I just lost 7-8 hours, implementing a prototype of a feature for my discussion site, Apparatus Complex. In particular it's a meta-game that I'm developing so that users can compete with each other in a role-playing game  while they wait for the site to update itself with content from other people.

So I had a crazy idea of using jquery and ajax to let people drag and drop equipment into slots, and then dynamically update what that piece of equipment would do to their statistics. Doing this in flash is really easy, I first got the drag and drop implemented (so easy with the Jquery UI), then I set the restrictions on which column each orb could belong in, and then I added the automatic update of the statistics just moments later. It was simply brilliant and it was pretty darn efficient. If you want to play around with this, it's located right here. The equipment orbs are generated randomly and so are the names.

By the way, MooTools and Prototype and Scriptalicious are okay as well. I'm just really impressed with JQuery right now.


Adding a delay to JQuery Functions

Recently I was working on a few functions that I didn't want to have activated immediately after hovered over a div. I neededthe functions to activate after a half a second of hovering by the user. To do this I created this this piece of code.

var display_timeout = 0;
$(".orb_space").hover(function () {
		if(display_timeout != 0) {
                // save a reference to 'this' so we can use it in timeout function
		var this_element = this;
                display_timeout = setTimeout(function() {
				display_timeout = 0;
				// perform things with this_element here buy referencing it like $(this_element)
				if (!$(this_element).hasClass('magic')) {
			}, 500);
		function () {
			if(display_timeout != 0) {

Let's go through line by line to see what's happening here.

Lines 2: The JQuery hover function has two parameters. The first parameter is for the function to call when the user hovers onto the element, and the second one is for when the user hovers out. Lines 4-16 consist of the first function and lines 19-24 consist of the second.

Lines 4-6: So if we happen to flash our mouse over the element very fast twice, this will make sure that we only have one timeout function happening.

Line 9: When we in the setTimeout function we need to remember a reference to our current element so that we don't have to do some tricky DOM navigation to get the hover activated element with the setTimeout event. It's just easier to just make a variable to remember the element.

Lines 11-15: First we reset the display_timeout variable, and then we can perform our necessary hover actions in this setTimeout function. The 500 indicates that we want this function to occur after 500ms.

Lines 20-23: This looks very familiar doesn't it? It's the same thing from lines 4-6. This is so that if the user rolls out of the hover element, the timer countdown will immediately stop and the hoverin functions will not occur.

Tagged as: 8 Comments

Middleware is your friend

There's nothing wrong with reinventing the wheel. In fact, sometimes that's the best way to learn how something works. But if you just want to get something done, middleware is your best answer. Here is some that I personally recommend.

Blogging Software

WordPress - With thousands of plugins and full customization, why would you install anything else? Perhaps if you're the kind of person that sits around wearing black turtle necks and hates something because it's popular. But you're not one of those kind of people? Right? Expression Engine isn't bad either - but you pay for that kind of quality.

3d Engines

Ogre for C++, Python, and C#. A great 3d engine that my friend and I are using to create our games. Ogre has a great community, with a very helpful wiki to get newbies started. However, some of it assumes that you know a little bit about 3d graphics before the intermediate ones seem to be truly helpful.

Tagged as: , No Comments