Get Vim

First, download/install your flavor of Vim: http://www.vim.org/download.php

Create a vimrc file

Now, before you start editing any files, you’ll probably want to do some customizations first.

Create a vimrc file: http://vim.wikia.com/wiki/Open_vimrc_file

In your vimrc you’ll want to add some basic settings such as the ones below:

" The set nocompatible setting makes vim behave in a more useful way
set nocompatible
 
" Enable filetype-specific indenting and plugins
filetype plugin indent on
 
" Turn syntax highlighting on
syntax on
 
" Highlight search results
set hlsearch
 
" Turn on line numbering
set number
 
" Make backspce behave more normally
set backspace=indent,eol,start
 
" Turn on automatic indenting
set smartindent
 
" Insert space characters whenever the tab key is pressed
set expandtab
 
" Set tabs
set tabstop=2
set shiftwidth=2

Create Vim sub-folders

Inside your .vim (vimfiles on Windows) folder, create some sub-folders for plug-ins and color schemes:

mkdir -p ~/.vim/autoload
mkdir -p  ~/.vim/bundle
mkdir -p  ~/.vim/colors

Set a default color scheme and font

After you have your vimrc file, you can customize the look-and-feel of Vim by picking a default color scheme and font.

Here are some good color themes I have found:

• jellybeans: http://www.vim.org/scripts/script.php?script_id=2555
• railscasts: http://www.vim.org/scripts/script.php?script_id=2175
• vividchalk: http://www.vim.org/scripts/script.php?script_id=1891

The color theme files go in ~/.vim/colors or ~\vimfiles\colors if you’re on Windows. Then you in your vimrc file you can set your default color scheme:

" Set default color scheme
colorscheme jellybeans

It’s also nice to have a good programming font in Vim. Here’s a list of preferred fonts and also how to set a default font in your vimrc file:

http://stackoverflow.com/questions/485174/programming-fonts
http://vim.wikia.com/wiki/Change_font

Install plug-ins

Next, it’s time to install some plug-ins. Here are some good ones that I have found:

• https://github.com/tpope/vim-pathogen
• https://github.com/tpope/vim-rails
• https://github.com/tpope/vim-endwise
• https://github.com/tpope/vim-fugitive
• https://github.com/scrooloose/nerdtree

I’m using pathogen to manage my Vim plug-ins, so after that’s installed, to install a new plug-in, you just navigate to your: ~/.vim/bundle (~\vimfiles\bundle on Windows) directory and run git clone commands to install the new plug-ins:

git clone git://github.com/tpope/vim-rails.git
git clone git://github.com/tpope/vim-endwise.git
git clone https://github.com/scrooloose/nerdtree.git
git clone git://github.com/tpope/vim-fugitive.git

Summary

That’s my rough guide on setting up Vim for Ruby on Rails development. Like I said I just got start using Vim for Ruby on Rails myself, so I know there’s a lot of plug-ins and settings I haven’t discovered yet.

Here are some links to the resources I used to setup Vim for Ruby on Rails and also how I’ve been learning how to learn Git:

• http://www.derekwyatt.org/vim/vim-tutorial-videos/vim-novice-tutorial-videos/
• http://oldwiki.rubyonrails.org/rails/pages/HowtoUseVimWithRails
• http://net.tutsplus.com/sessions/vim-essential-plugins/
• http://vimcasts.org/
• http://blog.interlinked.org/tutorials/vim_tutorial.html

Also, the vimtutor command line program and O’Reilly Vim book came in handy.

I’ve learned that keeping your Ruby methods well named, short and focused makes them easier to read and also easier to test.

This fix applies if you’re using cucumber on Windows.

It turns out the error message is related to the json gem that cucumber depends on. The details and solution are buried in this thread.

To fix it, you just have to run:

gem uninstall json

followed by:

gem install json --platform=ruby

Notes:
You need to have DevKit installed for this fix: https://github.com/oneclick/rubyinstaller/wiki/Development-Kit

If you get an error when installing the new json gem, make sure a rails server or console isn't running in the background.

The offending version of json for me was 1.4.6-x86-mingw32, so you need to uninstall and install that version: gem install json --version=1.4.6 --platform=ruby

If you install new gems after you make this fix, the error message will pop-up again, so you'll have to uninstall/install the json gem again. If anyone knows a way around this, please let me know.

Anyway, I hope this fix is helpful, that error was driving me nuts!

Here’s how to map a directory so you can access it via Apache without it being in the webroot.

Add this to your httpd.conf file:

<IfModule alias_module>
  Alias /myphpsite/ "D:/websites/myphpsite/"

  <Directory "D:/websites/myphpsite/">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride all
    Order allow,deny
    Allow from all
  </Directory>
</IfModule>

Just update “myphpsite” with your own alias and update “D:/websites/myphpsite/” with the drive/directory of the actual site. I tested this using Apache2.2.

First, I downloaded the latest SQlite3 DLL. (I grabbed the DLL of the SQLite library without the TCL bindings.)

Then, I exracted the .dll and .def files to my C:\ruby\bin directory and that fixed my issue. (You’ll might have to restart your console session.)

These steps will also fix this error message:
“The procedure entry point sqlite3_column_database_name could not be located in the dynamic link library sqlite3.dll.”

Hope this helps someone else running into the same issue.

def self.up
  if RAILS_ENV == 'development'
    # set all of your test data for development...
  end
end

$("#box1").fadeTo(1000, 0).fadeTo(3000, 0).fadeTo(1000, 1);

This will fade out an element in 1 second, then it will “pause” by setting another animation for 3 seconds that doesn’t change anything, then it will change it back to 100% opacity. It’s kind of an awkward way to do it.

But now with jQuery 1.4, things are a lot easier. You just need to just need to use the delay() function. Like so…

$("#box2").fadeTo(1000, 0).delay(3000).fadeTo(1000, 1);

Click on the box and notice there is a 3 second delay after the box fades out, before it reappears. Visually, the effect looks exactly the same before the delay() function was introduced, but the code is nicer now.

To set the delay before an animation fires, do this…

$("#box3").delay(3000).fadeTo(1000, .1);

Now there will be a 3 second delay before the box fades:

Or if you want to set the delay after an animation fires. Like a delay before your next lines of code are fired, do something like this… (I’m not sure if this is the best way, but it’ll work.)

$("#box4").fadeTo(1000, .1).delay(3000).fadeTo(1, .1);

And that’s all there is too it. To read more about the delay() function, check out the jQuery documentation.

After you have Ant installed, you’ll need a SVN command line client. You can download a program like Slik SVN for this functionality. After you have both Ant and SVN working. You can do something like this…

<?xml version="1.0" encoding="UTF-8"?>
<project name="MyProject" basedir=".">
  <description>
    This build file will check out your code from a SVN repository.
  </description>

  <exec executable="svn">
    <arg line="checkout http://www.example.com/svn/project/
       --username test --password password"/>
  </exec>
</project>

That’s all there is to it. Check out the Subversion Complete Reference for all the SVN commmands.

You want the user to preform an action and “Login” is not an action, it’s a noun. “Login” can be used to reference the “login interface.” But for the action of logging in, use the phrase “Log In” instead.

Ok, first, to add content using Prototype, I recommend that you already know or have the content you want to add to the DOM. For example, I wanted to add that red beetle to the DOM using Prototype. I already had the HTML coded up and here’s what it looked like…

<a href="#" onclick="beetles(); return false;">
  <img src="/images/beetle1.png" alt="" id="beetle1" border="0" />
</a>

It’s a lot easier if you know and have the HTML code you’re trying to duplicate in Prototype. So, to add this content to the DOM after the page has loaded, we use the following Prototype functions: Element constructor, Element.insert, Element.update and document.observe. And here’s what the Prototype code looks like…

document.observe('dom:loaded', function() {
var linkBeetle1 = new Element('a', {
  href: '#',
  onclick: 'beetles(); return false;'
});

var beetle1 = new Element('img', {
  src: '/images/beetle1.png',
  id: 'beetle1',
  alt: '',
  border: '0',
});

linkBeetle1.update(beetle1);
$('header').insert(linkBeetle1);
};

new Element – creates a new HTML element with the provided attributes.

.update – updates/replaces the content of the element with the provided content. In this case, we’re attaching the <img> to the <a href> tag.

.insert – attaches the newly created element into the document to the element you specify.

document.observe(‘dom:loaded’… – this will make it so that the content is loaded after the page has been loaded (but before the images are loaded).

And that’s all there is to it!