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
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 => 'http://rubygems.org'

Then run:

rake gems:install
rake gems:unpack

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

source 'http://rubygems.org'
gem 'paperclip'


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

ruby script/plugin install git://github.com/thoughtbot/paperclip.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>"
    }
end

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
  end
  def self.down
    remove_column :author, :avatar_file_name
    remove_column :author, :avatar_content_type
    remove_column :author, :avatar_file_size
  end
end

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 %>
<% 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) %>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var display_timeout = 0;
$(".orb_space").hover(function () {
 
		if(display_timeout != 0) {
				clearTimeout(display_timeout);
		}
 
                // 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')) {
					performRollinMagic();
				}
			}, 500);
 
	},
		function () {
			if(display_timeout != 0) {
				clearTimeout(display_timeout);
			}
			performRolloutStuff();
		}
);

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.

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.