Sheldon Conaty

Javascript is essential in allowing developers to tailor an intuitive and accessible experience for users. Web sites are becoming a lot more dynamic and javascript is key to this progression (side note: I’m not a fan of Flash, it makes my Mac work too hard). However, as usual developers encounter lots of browser interop issues – most of them with Internet Explorer.

Recently I was using javascript to dynamically add extra data to an unordered list item. This worked fine in FireFox and Safari. However, it turns out Internet Explorer 6 & 7 are very intolerant of content being added, or removed, from <li> elements. The problem is they don’t recognize the list item has resized and therefore don’t redraw it.

Luckily it is possible to give IE a nudge, so that it redraws the list. To do this you need to dynamically add a new child element to the list… and then remove it again. Here is an example javascript function, based on Prototype, which does exactly this. This function is now part of my toolbox and I call it after I add extra content to a list item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* IE 6 & 7 are very intolerant of extra content being
 * added/removed to <li> elements so a redraw needs to be
 * forced.
 */
function forceListRedraw(listItem) {
  if (Prototype.Browser.IE) {
    try {
      var n = document.createTextNode(' ');
 
      listItem.appendChild(n);
      listItem.removeChild(n);
 
      list = listItem.up('ul');
      list.appendChild(n);
      list.removeChild(n);
    } catch(e) { }
  }
}

Normally I use a very old Mac program called IcoMaker to create favicons. The problem with IcoMaker is it can’t generate alpha transparent ico files. I recently had to design a favicon for StatusHub which was round, so the standard gif level of transparency wasn’t going to cut it. Time to roll up my sleeves and find some new, hopefully free, software…

Given that favicons are based on the Windows ico format there aren’t a huge number of options available to create them on the humble Mac. Most programs claiming to support the ico format don’t support alpha transparency. For completeness, here are the set of options which don’t work:

• Fireworks CS4 (my standard tool of choice): it doesn’t support ico files at all.
• Pixen: can read/write ico files but can’t save them with alpha transparency.
• Pixelmator: can open but not save ico files.
• png2ico: unix command line tool which unfortunately doesn’t compile on Mac OS X.

I also tried several online tools like Dynamic Drives Generator and the favicon.cc generator but they all had problems.

Eventually Gimp came to the rescue. Normally I steer clear of Gimp since I don’t like the interface but in this area it excelled. If you already have your alpha transparent png file all you need to is open it in Gimp then:

• Select File > Save As…
• Click on “Select File Type (By Extension)”
• And select “Microsoft Windows Icon” – ico, its about half way down the list

If you are looking for more complete instructions on building a multi-resolution favicon, from scratch in Gimp, then check David Lane’s article.

When testing your favicons in Firefox don’t forget to clear the cache to see your new designs. Note, Firefox is also the best browser to confirm your ico file’s alpha transparency is working correctly. Safari displays them on a white background while Firefox uses a faded grey background.

Surprisingly there are very few decent, open source HTML WYSIWYG editor controls. There are a whole collection of them but most are out of date or way too feature rich and heavy.

I recently required a HTML WYSIWYG editor control for a project I was working on and so spent a couple of hours reviewing and testing the available options. Here are the few which are actually worth considering.

1) tinymce, version 3.2.4.1 (website)

“Tiny”mce weights in at a hefty 176K compressed. It is one of the most popular HTML editor controls around and is quite flexible with plenty of themes and plugins. It also quite active with a new release out every 2-4 months. It was easy enough to get up and running but I found the plug-ins fairly limited and styling it was just too much work. 

2) FCKEditor, version 2.6.4 (website)

The file size of FCKEditor depends on the browser used to render it. In my tests it came in at about 72K compressed. This is one of the granddaddy HTML editors. It has lots of features and a large web following. Unfortunately I found it just too heavy to work with. The docs weren’t great and the download, all 1.5MB of it, was so cluttered with features, plugins and skins that it was too difficult to just get something simple going. It has gathered too many features in its life to suit my needs. The team are hard at work on a total rewrite (version 3.0) which may address this.

3) NicEdit, version 0.9 r23 (website)

A nice fairly light framework. Depending on which features you want to use it weights in between 25 – 32K. It uses the famfam icon set for its tool bar buttons (I’m a huge fan of famfam) and so has a nice clean look. As with the FCKEditor and tinymce editors, NicEdit has problems generating semantically clean XHTML. There is an experimental nicXHTML plugin which addresses this. It has known problems but so far it seems to be working fine for my needs.

It has some lovely behavior built right in such as auto-expanding the text area to ensure all the content is displayed. No more grippies! Overall I thought NicEdit was well put together.

4) wysihat, version 0.2 (website)

Built on Prototype this library weighs in at 53K (before compression). At the time of writing wysihat is at version 0.2. I had previously worked with 0.1 and the new version does fix a lot of problems. However, it still isn’t ready for prime time. On Firefox and Safari it works well but IE support lets it down. Having said this wysihat is, in my opinion, the future. It is small, lite and easy to extend. A project I’m rooting for and definitely one to keep an eye on.

And the winner is…

In the end I went with NicEdit. Its just so much better than the existing heavy weights and wysihat needs some more love before its ready for production. I’m sure there will be some problems with NicEdit but I feel I’m starting from a good base. I’ll keep you updated on how NicEdit holds up as development continues.

Actually this is incredibly easy, assuming you have the gem manager installed (see here if you want instructions).

The phusion installer is excellent. All you need do is open a terminal and enter…

sudo gem install passenger

sudo passenger-install-apache2-module

Then just follow the on-screen instructions with the following caveats…

Caveat 1: Adding Phusion to Apache

The install suggests you add the following lines to you apache config (which can be found in /etc/apache2/httpd.conf )

LoadModule passenger_module /opt/local/lib/ruby/gems/1.8/gems/passenger-2.1.3/ext/apache2/mod_passenger.so
PassengerRoot /opt/local/lib/ruby/gems/1.8/gems/passenger-2.1.3
PassengerRuby /opt/local/bin/ruby

However, I suggest you add these to a new file in a separate conf file. Create a file with the following name and apache will load it automatically on startup.

/private/etc/apache2/other/phusion.conf

Tip: Restarting Apache

The phusion install asks that you restart Apache. This can be done using:

sudo apachectl -k restart

Caveat 2: Deploying your Application

Again the install program is very clear. It says you should add the following to your Apache config

<VirtualHost *:80>
  ServerName www.yourhost.com
  DocumentRoot /somewhere/public    # <-- be sure to point to 'public'!
</VirtualHost>

But remember to remove the comment “# <– be sure to point to ‘public’!” or Apache will display the following error on restarted:

DocumentRoot takes one argument, Root directory of the document tree

Also, you should add the following after the virtualhost definition.

<Directory "/somewhere/public">
  Options ExecCGI FollowSymLinks
  AllowOverride all
  Allow from all
</Directory>

This gives Apache access to your Rail app’s directory, getting rid of any annoying 403 ‘access denied’ errors.

That’s pretty much it. Remember, by default phusion will run your application in production mode. So ensure your database.yml file has a production database configured.

Working on a migration recently I noticed the same set of operations being done repeatedly. My first reaction was to DRY up the code by creating a utility method, within the migration. But I was sure I’d end up needing this method in future migrations. But the question was, where should I put it?

The answer was to create a migration helper!

First, I created lib/migration_help.rb containing the following:

1
2
3
4
5
6
7
8
9

module MigrationHelper
  def do_good_stuff()
    say "boy, this method will be useful..."
  end
 
  def undo_good_stuff()
    say "actually on second thoughts it was stupid..."
  end
end

Then in my migration I added ‘require’ and ‘extend’ to import the MigrationHelper module.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

require "migration_helper"
 
class AddNewFeatureColumns < ActiveRecord::Migration
  extend MigrationHelper
 
  def self.up
    do_good_stuff
  end
 
  def self.down
    undo_good_stuff
  end
 
end

And that was it! The helper method names have been changed, to protect the innocent, but you get the idea. Not exactly rocket science but usefully if you need to condense your migrations.

For more information I suggest you check out the excellent discussion on migrations, in the RailsGuides; after reading it I changed all my migration helper ‘puts’ statements to ’say’ statements. It nice to get those little details right.

For source control management I’m currently using git, actually my repository is hosted on GitHub (a fantastic service and highly recommended). Git can take a little getting used to but it has several great features that subversion just doesn’t have. My current favorite is the ability to ’stash’ work-in-progress.

We’ve all been there; you’re happily working on the code, halfway through a big change, when someone asks you to quickly fix a bug. Traditionally your only option was to checkout the repository head into another directory so you could make your change there – without being forced to commit or revert the current changes you were working on. But no longer, ‘git stash’ to the rescue!

Now, you can quickly park the work you are doing using…

git stash

This will record the current state of the working directory, saving your modifications and reverting the working directory so that it matches the head of the repository. Now you can make the small tweak to fix the bug without losing your changes. The ‘git commit’ and ‘git push’ the fix as normal. When you are happy the patch is complete type…

git stash apply

Now your saved modifications are restored and you can continue adding that great feature you were working on.

Of course if losing your changes wasn’t a concern you could have used…

git reset --hard HEAD

And all your local changes would have been lost, reverting your working copy to the latest repository head.

Useful Git Resources

• Authur Koziel has some great git configuration hints. I love the bash shortcuts, color coding and textmate integration.
• GitHub have a handy git cheatsheet and if you want to dig deeper there’s alway the git user’s manual.

TextMate is my development environment of choice these days. It supports the concept of bundles as an extension mechanism. Several great bundles are shipped with TextMate and I find they cover most of my needs.

Additional ones can be installed and there are several ones which aid Rails development. For a while I ran RubyAMP but I found TextMate’s memory usage went through the roof. So currently I just run the vanilla set.

Hiding Unwanted Bundles

I stripped down the bundles which are available in TextMate. It ships with a wide range of bundles which just get in the way when you just want to work with HTML, CSS and Ruby/Rails.

If you want to do the same go to the bundle editor, via the ‘Show Bundles’ option in the ‘Bundles’ menu and press the ‘filter’ button. For full details refer to the bundles manual.

Useful Keyboard Shortcuts

Key Modifer Legend:⌘ = Command, ⌥ = Option, ^ = Ctrl, ⇧ = Shift, ⎋ = Esc, ␣ = Space, ↩ = Return/Enter, ⇥ = Tab

Global Shortcuts (work on most types of files)

• ^h    Brings up help on the current word. For example W3C reference help for HTML or Rails Doc for rb files.
• ⌥ ⎋    Auto complete. Suggests possible attributes, etc. For example type <img ⌥ ⎋ and a popup with possible attributes appears.
• ⇥    Expand snippet. For example in an ruby file, type : and then press tab. This expands to :label => value.

HTML Specific Shortcuts

• ⌘&    Pop-up entity/escaping commands menu.
• ⌥⌘.    Insert close tag.
• ⌃<    Make closing/opening tags for word to left of cursor.
• ^␣    Non breaking space.

These are the general steps I use when setting up a new, clean development environment. This assumes you are using Mac OS X 10.5. If you are on Windows then I’m very, very sorry (windows isn’t covered here). Follow all the steps below and you should end up wth:

• MacPorts, version 1.600
• Ruby, version 1.8.6
• Ruby Gems, version 1.2.0
• Rails Gem, version 2.2.2
• mySQL, version 5
• rspec and rcov for testing… you are doing TDD right?

Rails moves fast. Version 2.3 is due out very shortly so this post is going to get out of date quick. Update: 2.3.2 is out now, these instructions are still good.

Installing Ruby

What do you know! Nothing is required here. Version 1.8.6 is installed by default on Mac OSX 10.5.

Installing MacPorts & mySQL

Follow the instructions on Denis’s blog. You definitely need to install MacPorts. MySQL is only required if that’s what you will be using. Personally the biggest pain in the neck I have with mySQL is logging in after it has been installed. As a result I change it so that no password is required for root, not matter which localhost alias the login is from. To do this open a terminal window and type the following:

mysql -u root
use mysql;
update user set password=PASSWORD("") where user='root';
flush privileges;
quit;

This will set localhost, YourMachine.local and 127.0.0.1 to all require no password.

Installing FreeImage Port

Almost all the web applications I’ve worked on have required some form of image manipulation. Generally to resize images, to do this we need access to the OS level freeimage port. This can be installed using the following:

sudo port install freeimage

Installing Ruby Gems Port

Using MacPorts you can install the ruby gems package manager:

sudo port install rb-rubygems

If you encounter problems, such as:

Error: Target org.macports.activate returned: Image error: /opt/local/bin/gem already exists and does not belong to a registered port.  Unable to activate port rb-rubygems.

Then you can force the install:

sudo port -f install rb-rubygems

Patching rspec

For automated tests I prefer using rspec instead of the standard unit test framework built into rails. I also like rcov to give me an idea of how good my code coverage is. There is a known problem with rspec on Ruby 1.8.6 when run in rcov mode. This results in an ugly rb_gc_mark() error. The solution is to install a patched version of rpec

sudo gem sources -a http://gems.github.com
sudo gem install mergulhao-rcov

Rails

Now that the gem system has been installed you can use it to install the rails gem:

sudo gem install rails
sudo gem install memcache-client
sudo gem install rcov
sudo gem install ruby-debug

You will then need to install a gem to access the database server. 

For SQLite….

sudo gem install sqlite3-ruby

For MySQL….

sudo gem install mysql -- --with-mysql-config=/opt/local/bin/mysql_config5

Now your machine is all setup for rails development!

Okay But I have a Project Already

If you have an existing project you can check it out from github (you are using github right?). Now you should have enough system gems installed to let rails install the remaining gems required by the project (see the project’s environment.rb file for the list). To install the gems automatically:

sudo rake gems:install

Create Project’s Databases

If you are using mySQL you will need to create production, test and development databases. In the terminal type:

export RAILS_ENV=test
rake db:drop db:create db:migrate
export RAILS_ENV=development
rake db:drop db:create db:migrate
export RAILS_ENV=

Testing Your Installation

Once all the above has been completed you should be at a stage where you can run the development webrick server and the rspec tests. Try the following:

rake db:create:all        # Creates the mysql databases for development, production & test envs
rake db:migrate:reset     # Destroys any existing data and recreates the database structure
rake spec                 # Runs the tests
./script/server           # Starts the web server on port 3000

The spec command should run the tests and return zero failures. When the server is running you should be able to access the site at http://localhost:3000/.

So, why am I creating yet another blog? In truth this is more for myself than anyone else. Think of it as a nice handy clipboard of code snippets and thoughts, which I can access from anywhere. If they aid others then all the better.

By profession I’m a web designer. Web design is very important to me. I’m always trying to look at the web experience I create from the user’s perspective. As web designers we now have a great collection of tools, which we can use to make the user’s experience even better. My current tools of choice are Ruby on Rails, Prototype & Script.aculo.us. In the past they’ve been Java, ASP.net and C++ but the goal has always been the same, to create a sublime user experience.

In this blog I’ll be pointing out where sites can benefit from a nip & tuck, laying down some code and giving my opinion on web design generally. I hope you enjoy the ride…