Barefoot Development

Barefoot is hiring developers again

2008-02-08T11:48:00.000-08:00

Take a look at our website for these two job openings and how to apply.

DRY Up Your SWF SEO

2008-02-01T10:48:00.001-08:00

We've talked about search engine optimization with Flash before, and for large database-driven sites the methodology still applies. But for smaller Flash sites that still have great content there may be a simpler, DRYer (Don't Repeat Yourself) solution.

This technique, just like unobtrusive javascript, works best when the page is first designed for the lowest common denominator (in this case search bots or folks without Flash) and then progrssively enhanced with a richer experience when supported. With that in mind, let's start with the navigation.

<div id="nav">
 <ul>
  <li><a href="/" class="selected">Home</a></li>
  <li><a href="/about/">About Us</a></li>
  <li><a href="/contact/">Contact Us</a></li>
 </ul>
</div>

Next, our page needs some content. It may have images, paragraphs, bulleted lists and some formatting. It's not XML, so we'll want to keep the tags that lend the formatting.

<div id="content">
 <p>Hello <b>World</b></p>
</div>

This basic HTML has created a great foundation for our site. Screen readers, search engines, and iPhone users will all be able to enjoy our content. But for folks with Flash, we can make the experience even better. If we place the nav and content divs inside a wrapper div, SWFObject can replace the contents of the wrapper with our nifty Flash movie.

Getting started, that unordered list nav looks very familiar as HTML, but it also looks like something else — XML. So why don't we load this XML into our Flash movie? It even tells us which page we're on (via class="selected"). That will allow great flexibility with the design of the nav in Flash. Using SWFObject, it's as simple as this:

so.addVariable("xml_input", escape(document.getElementById("nav").innerHTML));

Now we should feed the content into Flash the same way as the faux XML nav:

so.addVariable("html_input", escape(document.getElementById("content").innerHTML));

All that's left is to parse the XML for the nav and render the HTML from the content. Executions will vary, but this should get us started:

// Parse the xml content
XML.prototype.ignoreWhite = true;
var myXML:XML = new XML();
myXML.parseXML(_level0.xml_input);
var rootNode:XMLNode = myXML.firstChild;
...
// Set the html content
_root.content_txt.htmlText = _level0.html_input;

This method allows the developer to spend more time building a sound, accessible site and less time creating XML schemas to load in duplicate content for two presentations. Flash supports a good subset of HTML tags as well as custom CSS, so you should be able to match most of the usual content formatting.

Bobby Uhlenbrock, Application Developer, Barefoot

NetBeans Ruby Debugger Doesn't Like Symbolic Links

2007-12-04T15:35:00.000-08:00

Let me say that the new NetBeans 6 IDE, released in its final version just yesterday, is an amazing Ruby on Rails development environment. I love the intellisense features, quick-switching between controller, view, and test files, and so many other things. But the biggest thing I was looking forward to was the integrated debugger.

Unfortunately, on my Mac OSX Tiger system I couldn't get breakpoints to work. NetBeans just ignored them. I spent several hours trying to debug it, unfortunately led astray by a red herring. Since I'm using Rails 2.0 RC2 on my current project, and a new empty app based on Rails 1.2.5 worked great in the NetBeans debugger, I though it must be some problem in Rails 2.0. However, after eliminating everything different between the two apps, I found the real culprit.

I keep all of my production working directories in a main directory, and have a symbolic link in my home directory to provide quick access. Unfortunately, when the NetBeans project includes a symbolic link, breakpoints in the debugger don't fire. When I changed my reference to use the absolute path (sans symlink), the breakpoints work great.

Now NetBeans and I are getting along great. I highly recommend it for any Ruby or Java development.

Doug Smith, Senior Developer, Barefoot

Processing Remote Files with Attachment Fu

2007-11-27T12:36:00.001-08:00

I've used Rick Olson's attachment_fu on a few projects now, and it's become one of the first plugins I import into my rails directory. But for my current task I need to not only upload photos but also import external images from a data service and run them through the usual cropping and scaling. I think it is ideal for all images, regardless of source, to be run through the same model where they are subjected to the same operations and validations. So that's what we'll do.

Currently, when you post a multi-part form with a file input box named uploaded_data, attachment_fu will grab that TempFile with a setter of the same name and do its magic. I have followed the same process with a new method. It can go right in the model that has_attachment:


    # Takes input of a remote file via an absolute URL,
    # reads it and passes it to attachment_fu for processing   
    def remote_data=(file_url)
      return nil if file_url.nil?  
      open(file_url) do |data|
        # extract the filename and extension from the url
        temp_filename = URI.split(file_url)[5][/[^\/]+\Z/]
        # pass details to attachment_fu
        self.filename     = temp_filename
        self.temp_data    = data.read
        self.content_type = data.content_type           
      end    
    end

This opens the attachment and places the contents in a TempFile just as if it had been uploaded. Keep in mind that while my input data is quite reliable, you may need to add a few checks to ensure you have a valid extension and mime type. You can use the new method thusly:


    photo = Photo.new
    photo.remote_data = "http://www.somewhere.com/an_image.jpg"
    photo.save

Bobby Uhlenbrock, Application Developer, Barefoot

A Fix for a WordPress Paging Problem

2007-11-09T10:12:00.000-08:00

I recently discovered a problem in the next/previous paging links of a custom WordPress 2.2.1 site we created for Fractional Jets Focus. When viewing a list of articles by category, the previous posts link generated a 404 error.

After digging for too long through WordPress code and Google search results, I found that the problem was related to an apparent bug or conflict between the paging feature and custom permalinks.

Our custom permalink setting in Options -> Permalinks is this:

/%category%/%year%/%monthnum%/%postname%/

When you want to view all the posts for a certain category, an example URL is /blog/2007/9/. The problem is that the URL generated by next_posts_link() was misinterpreted by WordPress because of the permalink. The link was: /blog/2007/9/page/2/. Unfortunately, the string "page" in this URL was interpreted as a post name, instead of a token for the page index.

There is probably some voodoo I could have done in the .htaccess file with mod_rewrite to fix the issue, but I feared breaking something else. So, I wrote the following plugin. It's so short that I'm publishing the whole thing inline.


<?php
/*
Plugin Name: Fix Paging in Category Listings 
Plugin URI: http://www.thinkbarefoot.com
Description: Fixes a bug where next/previous links are broken in category by year/month listings
Version: 0.5
Author: Doug Smith
Author URI: http://www.thinkbarefoot.com

Copyright 2007  Doug Smith  (email: dsmith@thinkbarefoot.com)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

*/

/**
 * Function to fix problem where next/previous buttons are broken on list
 * of posts in a category when the custom permalink string is:
 * /%category%/%year%/%monthnum%/%postname%/ 
 * The problem is that with a url like this:
 * 
 * /category/2007/10/page/2
 * 
 * the 'page' looks like a post name, not the keyword "page"
 */
function remove_page_from_query_string($query_string)
{ 
    if ($query_string['name'] == 'page' && isset($query_string['page'])) {
        unset($query_string['name']);
        // 'page' in the query_string looks like '/2', so split it out
        list($delim, $page_index) = split('/', $query_string['page']);
        $query_string['paged'] = $page_index;
    }      
    return $query_string;
}

add_filter('request', 'remove_page_from_query_string');

?>

This plugin simply checks to see whether the post name is 'page', and if there is a 'page' parameter too. If so, it removes the 'name', and assigns the page index to the magic 'paged' parameter. Paging restored.

Doug Smith, Senior Developer, Barefoot

I'm Glad Rails Loves SQL

2007-11-01T11:08:00.000-07:00

It's a good thing that the core team for Ruby on Rails has chosen to embrace SQL, and easily expose it to developers. Other object-relational mapping layers often try to hide SQL as 'evil'. However, there are times when nothing will substitute for being able to talk directly to the database, in its own language.

Yesterday was such a time. I have an application that displays articles divided into hierarchies of categories. Articles are rendered differently on the site depending on their category.

I needed to change a list of articles from one top-level category (let's call it food) so that some articles in one of its sub-categories (call it expert reviews) only appeared one time per sub-category. So, while articles from other sub-categories of food would all appear in the list, only the latest article from any expert reviewer would appear in that same list.

I wanted to handle this in the model using a custom finder so that controllers could just call something like Category.published_article_list(options) and the details would be irrelevant.

Ok, enough background, here's the method I added to the Category model:


def published_article_list(options = {})
 if (food?)
   # Special query that returns only the latest article for each 'reviewer' category
   sql  = "mid_category_id != #{REVIEW_CAT} OR articles.id IN ( "
   sql += "SELECT SUBSTRING( MAX( CONCAT( published_on, id ) ), 11 ) AS ra_id "
   sql += "FROM articles "
   sql += "WHERE mid_category_id = #{REVIEW_CAT} AND "
   sql += "      #{Article.conditions_published} "
   sql += "GROUP BY category_id ) ) "
   options[:conditions] = sql
 end
 self.published_root_articles.find(:all, options)
end

That SQL is a little serious, so here's what it does in English. It starts by removing any articles that have a mid-level category of "review". It then adds the articles from that category that we want using a subquery.

The meat of the subquery is in this part of the SELECT clause: SUBSTRING( MAX( CONCAT( published_on, id ) ), 11 ) AS ra_id. I needed to get the ID of the latest article, grouped by category_id (the individual reviewer). So, this code concatenates the published_on date to the article ID, finds the max of all those values, then uses SUBSTRING to chop the concatenated date off, leaving only the id of the latest article. So, for a list of articles with IDs and dates like this:


id    date         category_id
101   2007-10-01   1
102   2007-09-30   1
103   2007-10-02   2
104   2007-10-01   2

When the concatenated dates and IDs are sorted, they end up like this:


2007-10-02103
2007-10-01104
2007-10-01101
2007-09-30102

Using this method, the subquery accurately adds the IDs of articles 101 and 103 to the IN clause above.

The only downside to this method is that the CONCAT function requires a full table scan, so indexes won't be used in the subquery. Since this page is cached, it wasn't a problem for this application, but if performance becomes an issue other optimization could be done while still using this strategy.

Thanks for loving SQL, Rails!

Doug Smith, Senior Developer, Barefoot

classic_pagination is not my friend

2007-10-19T14:49:00.000-07:00

I recently upgraded a nearly completed Ruby on Rails project to version 1.2.4, then to version 1.2.5. I worked through the deprecation warnings and everything seemed good to go.

Then, I ran into a snag with pagination -- something I didn't have covered in my functional tests. Because I'm caching this site, I have routes that include the :page property for the paginator in the URL. Otherwise, pages 2-n don't get cached.

After installing the classic_pagination plugin, I'd get an error when viewing pages with pagination code like this in the view:


  <%= link_to('« Previous', :page => @article_pages.current.previous) if @article_pages.current.previous %>
  <%= link_to('Next »', :page => @article_pages.current.next) if @article_pages.current.next %>

This is the standard, recommended method for creating the Next and Previous links. The error said: undefined method `paginator' for "2":String. The top-most offending line of the stack trace was: vendor/plugins/classic_pagination/lib/pagination.rb:307:in `=='.

The confusing part was that when I removed the :page from the route and added ?page=2 back as a query string parameter, the error went away. In theory, the :page should be the :page whether it is on the query string or embedded in the URL, right?

Well, long story short, here's the fix. Unfortunately, I can't explain exactly why this is necessary, and don't have the time now to dig into the innards of classic_pagination and the supporting Rails infrastructure to find out. I just hope this post helps somebody.

Oh, the fix? Add the "number" method to the previous or next Page object reference, like so:


  <%= link_to('« Previous', :page => @article_pages.current.previous.number) if @article_pages.current.previous %>
  <%= link_to('Next »', :page => @article_pages.current.next.number) if @article_pages.current.next %>

I'll probably consider classic_pagination my friend again once I get over being grumpy about this ... or, I may consider one of the other pagination contenders for a future application.

Doug Smith, Senior Developer, Barefoot

Attorneys on Rails

2007-10-04T08:13:00.000-07:00

Cross-posting this link to our main Barefoot blog, where we describe a significant Rails site we recently completed, and show at a high level how we accomplished it. Let us know if you'd like more details.

Doug Smith, Senior Developer, Barefoot

Disable items in Flash ComboBox component

2007-09-19T13:11:00.000-07:00

Recently, Barefoot built a new promotional site for Miller Lite–millerpregame.com. The site is a cross promotion with Wal-Mart. The main attraction allows users to vote on their favorite NFL city to tailgate at. We built a small voting widget in Flash and utilize Flash Remoting. It is a simple form really, just a ComboBox that lists the 32 NFL teams and a textfield so users can add comments as to why the city submitted is really the "best."

Each week the votes are tallied and a city is declared a winner. We then compile tidbits about the city, the atmosphere the fans create, and any pregame rituals that have been submitted. Once a city wins they are then taken out of the list of eligible cities going forward throughout the season.

To avoid confusion, we wanted to grey out the previous weeks winners in the ComboBox. Disabling options in the ComboBox Component should be as easy as setting a property in the dataprovider right? Wrong.

Luckily, the ComboBox uses the List Component and the List Component can utilize the CellRenderer API. The CellRenderer API is a way of styling and manipulating the individual items (aka "cells") in a List Component.

To implement your own extended CellRenderer Class, you simply define the class with a few required methods and properties. Similar to an Interface structure in Java, etc...

You then create a MovieClip in your library and define it's linkage properties using the Class you have created to be your CellRenderer.

Next, you designate the cellrenderer property of the List inside the ComboBox to point at your new Class.


// define cellRenderer class
comboBox.dropdown.cellRenderer = "MyCell";

MyCell is the name given to the identifier in the MovieClip linkage properties mentioned above.

OK, so now we have more control over "cell" rendering. We now use the setValue method required in our new MyCell class.

We decided to set a property in our dataprovider array that would identify which items in the ComboBox we wanted to disable.

// for example
cities.push({label: 'Cincinnati', data: 7, selectable: 'false'});
comboBox.dataProvider =  cities;

We then check for this property in the setValue method.

// define the item index
var cellIndex:Number = getCellIndex().itemIndex;

// Apply text formatting
if (listOwner.dataProvider.getItemAt(cellIndex).selectable == 'false') {
// code goes here
}

If that if statement is true we set the cell textfield to html so we can easily style it using a font tag and setting a color like grey to indicate to the user the option is disabled. We also need to remove the default rollover action and onpress action for the cell.

_tLabel.html = true;
_tLabel.htmlText = '<font style="color:#DDDDDD;">' + sLabel + '</font>';
// define row
var row = this._parent;
// remove the highlight
row.highlight = row.background;
// add a fake onPress event
row.onPress = null;
// don't show the hand cursor
row.useHandCursor = false;

That is it! Items we designate are now disabled and appear greyed out. Some times Flash is better than HTML and other times HTML is just easier.

JRuby on Rails -- Performance

2007-07-16T16:24:00.001-07:00

I have been spending some time evaluating JRuby 1.0 as a possible Ruby on Rails deployment platform. Following RailsConf 2007, I was very excited by the potential of JRuby as a vehicle for deploying Rails apps that would have the advantages of robust J2EE application servers, including multi-threaded load management, database connection pools, and wide-ranging enterprise support.

JRuby Install

We typically deploy Rails apps using mongrel clusters behind an Apache 2 webserver. So, I started with a pretty straightforward Rails app I'm building, and deployed it as normal on the mongrels.

(By the way, unless otherwise mentioned, software versions used are native Ruby 1.8.6, Rails 1.2.3, JRuby 1.0, Tomcat 6.0.13, Java 1.5.0_07 on OSX, Java 1.6.0 on RedHat Linux, Apache web server 2.2.3.)

The next step was to get JRuby and setup a .war file to deploy. I found this blog post to be a very helpful start. I already had the latest Java from Apple installed, so I installed JRuby to /usr/local/jruby-1.0. I edited /etc/profile to include the following:

export JRUBY_HOME="/usr/local/jruby-1.0"
export PATH="/usr/local/bin:/usr/local/sbin:/bin:/sbin:/usr/bin:/usr/sbin:$JRUBY_HOME/bin"
export JAVA_HOME="/System/Library/Frameworks/JavaVM.framework/Home"
export ANT_HOME="/Developer/Java/Ant"

I decided to deploy the .war into Tomcat since I'm more familiar with it than the recommended Glassfish and I knew how to connect it well with Apache. So, I created a JDBC connection pool to the MySQL database by adding a META-INF directory to the Rails app, with the following context.xml file:

<Context path="/myapp" reloadable="true" crossContext="true">
  <!-- Database Connection Pool -->
    <Resource name="jdbc/myapp" 
           auth="Container" 
           type="javax.sql.DataSource"
           factory="org.apache.tomcat.dbcp.dbcp.BasicDataSourceFactory"
           maxWait="1000"
           removeAbandoned="true"
           maxActive="30"
           maxIdle="10"
           removeAbandonedTimeout="60"
           logAbandoned="true"
           username="myuser" 
           password="mypass" 
           driverClassName="com.mysql.jdbc.Driver"
           url="jdbc:mysql://127.0.0.1:3306/myapp_development?autoReconnect=true" />
</Context>

This is the corresponding database.yml file that tells Rails where to find the connection pool data source:

development:
  adapter: jdbc
  jndi: java:comp/env/jdbc/myapp
  
production:
  adapter: jdbc
  jndi: java:comp/env/jdbc/myapp

With these configuration files, I went through the JRuby process for creating the .war file. I setup Tomcat and deployed the app, which worked after I put the MySQL driver into Tomcat's /lib directory. I connected the Tomcat app to Apache with mod_proxy_ajp. I can post more details about these configs if there is interest.

One important optimization that I added was to include JAVA_OPTS that launched Tomcat with enhanced memory heap limits for the JVM, and with a couple other parameters I found while searching for JRuby optimizations online. So, I added this line to my /etc/profile:

export JAVA_OPTS="-Xms128m -Xmx512m -Djruby.objectspace.enabled=false -Djruby.jit.enabled=true"

Performance

After configuring and setting everything up on my MacBook Pro (2GHz Intel Core Duo, 1.5GB RAM), I was excited by the performance of JRuby. Using simple comparison of wget spiders between the native Ruby on Rails (using 3 mongrels behind Apache) and JRuby versions, I was seeing over a 2x improvement in JRuby. The spider of around 24 URLs was taking about 10 seconds on native Ruby, while only about 4 seconds on JRuby/Tomcat.

I then moved to deploying on our RedHat Linux-based staging server, where the 24 URL spider was running in about 1.5 seconds with native Ruby (same 3 mongrel cluster behind Apache 2). With repeated tweaking, I couldn't get the JRuby/Tomcat to run faster than 4 seconds, even swapping out JVMs of Java 5 and Java 6.

I then considered that JRuby might have an advantage under load, so I setup Grinder, an open-source Java-based load testing tool, to "grind" both versions. The test simulated 10 simultaneous threads from three users, with each test repeated three times. Here are some comparison numbers of a couple URLs (times in milliseconds):

Run #	Native A	Java A	Native B	Java B
1	554	1070	586	378
2	861	928	519	885
3	719	1450	496	680
4	833	800	484	507
5	863	827	701	414
Average	766	1015	557	572

On average, JRuby is either slower or nearly equal in performance under load. It's still respectable considering JRuby's 1.0 status. The main downside was the significant disparity in CPU and RAM usage between JRuby and native Ruby. JRuby pegged the dual core CPUs under load, using upwards of 250MB of RAM, while the mongrels maintained under 30% CPU with about 40MB per mongrel.

I remain excited about JRuby, but can't use it for production work quite yet. I'm sure the JRuby team will continue with optimization -- and I'll be keeping a close eye on its progress for sure.

Doug Smith, Senior Developer, Barefoot

Barefoot is adding a developer

2007-06-25T06:46:00.001-07:00

Barefoot has an immediate opening for a Web Application Developer. We’d like you to have 3+ years experience developing database-driven, dynamic web sites. We’re strong in a number of technologies, the primary ones being Ruby on Rails, C#.NET, and PHP. You need to be very strong in one of them, and if you’ve got experience in a second, bonus points. You’ve also got to be at least comfortable with client-side Web development (JavaScript, CSS, XHTML), although that won’t be the main part of your job. You’ll receive excellent benefits and a salary commensurate with your experience. To submit your resume, go here.

RESTful Rails Naming Conventions with Nested Controllers

2007-05-31T15:16:00.000-07:00

I recently spent some time learning how to name everything in Rails' new RESTful map.resources world, given that I like to group my controllers into subdirectories. For typical content managed sites, I keep the main site in a directory /site, and the content management tools in a directory /admin.

So, how do you get your syntactically-sugar-coated paths when you have a controller in a directory like this:

/app/controllers/admin/users_controller.rb

The map.resources line that worked for me is:

map.resources :users, :controller => 'admin/users', :name_prefix => 'admin_', :path_prefix => '/admin'

Some of the URLs of the resources that are automatically by that line include:

/admin/users: list all users (index action)
/admin/user/1: show one user's details (show action)
/admin/user/new: create a new user (new action)

When you want to use the *_path or *_url shortcuts for these nested controllers, these work:

admin_users_path: renders /admin/users
admin_edit_user_path(@user): renders /admin/user/1;edit

Rails is opinionated, but once you figure out how to agree with its opinion of how things should be named, it makes the rest of the development process a lot easier.

Doug Smith, Senior Developer, Barefoot

Ruby, mongrel_cluster, ferret and Linux PATHs

2007-04-23T06:26:00.000-07:00

I have less hair. There's no two ways about it. In a fit of self-pity this weekend, I considered getting some of that great spray paint to solve the issue, but instead, I've decided to swear off various un*x distributions. Can't we all just get along? I digress.

While preparing a recent Rails application for production, I came across some odd issues with various ruby-powered applications and gems. I struggled to understand why these apps failed to launch on startup, but would work without a hitch when run "by hand" at the command prompt. After tearing through boot logs, application logs and a good portion of my hair, I finally figured it out: it's a PATH issue. On each of the boxes in question (a few Fedora Core and two RHE4 machines), ruby was installed in /usr/local/bin, and that, my friends, is not in the default PATH for root. So, I thought, "Easy fix. Simply add /usr/local/bin to the PATH in a system wide script like /etc/profile." Alas, t'was not to be. These newer incarnations of RedHat linux have the added security of SELinux, which, among many positive things, sets and unsets root's PATH multiple times during the boot sequence. In the end, we had to add /usr/local/bin directly within each component's startup script. The Rails (and gems) components we are using are mongrel, mongrel_cluster, and ferret (using the DRb server). For those keeping score at home, that's a 9.7 on the new technology in production (NTIP) scale. So you can keep your hair in tact, here are the startup scripts we're using.

Mongrel cluster:

#!/bin/bash
#
# Copyright (c) 2006 Bradley Taylor, bradley@railsmachine.com
#
# mongrel_cluster       Startup script for Mongrel clusters.
#
# chkconfig: - 85 15
# description: mongrel_cluster manages multiple Mongrel processes for use \
#              behind a load balancer.
#

CONF_DIR=/etc/mongrel_cluster
RETVAL=0
PATH=/usr/local/bin:$PATH

# Gracefully exit if the controller is missing.
which mongrel_cluster_ctl >/dev/null || exit 0

# Go no further if config directory is missing.
[ -d "$CONF_DIR" ] || exit 0

case "$1" in
  start)
    mongrel_cluster_ctl start -c $CONF_DIR
    RETVAL=$?
;;
  stop)
    mongrel_cluster_ctl stop -c $CONF_DIR
    RETVAL=$?
;;
  restart)
    mongrel_cluster_ctl restart -c $CONF_DIR
    RETVAL=$?
;;
  *)
    echo "Usage: mongrel_cluster {start|stop|restart}"
    exit 1
;;
esac

Ferret DRb server:

#!/bin/bash
#
# This script starts and stops the ferret DRb server
# chkconfig: 2345 89 36
# description: Ferret search engine for ruby apps.
#
# Sean Brown, Partner at Barefoot, Inc.
#
# save the current directory
CURDIR=`pwd`
PATH=/usr/local/bin:$PATH

RORPATH="/path/to/ror_root"

case "$1" in
 start)
    cd $RORPATH
    echo "Starting ferret DRb server."
    FERRET_USE_LOCAL_INDEX=1 \
               script/runner -e production \
               vendor/plugins/acts_as_ferret/script/ferret_start
    ;;
 stop)
    cd $RORPATH
    echo "Stopping ferret DRb server."
    FERRET_USE_LOCAL_INDEX=1 \
               script/runner -e production \
               vendor/plugins/acts_as_ferret/script/ferret_stop
    ;;
 *)
    echo $"Usage: $0 {start, stop}"
    exit 1
    ;;
esac

We're hiring a UI Developer (XHTML/CSS)

2007-04-12T14:42:00.000-07:00

We have just posted a position on 37Signals job board for an experience UI Developer.

--
Barefoot has an immediate opening for an experienced User Interface developer. Strong skills in XHMTL and CSS is a must. Significant experience in Javascript is a big plus. To be considered as a candidate, please submit at least 5 URLs for which you were either the only UI developer or at least the principal developer. No phone calls please.
--

So, all you CSS wizards, this is your dream job. Cool agency. Hip modern design. And you get to bring it to life. Not to mention the development staff is cool too (I'm a little biased). If you understand server-side programming, that is a bonus. If you know some Flash/Actionscript that is a big bonus as well. The big chunk is XHTML/CSS. We're talking about browser compatibility, W3C standards, etc... We want to implement standards and if you know them and know how to code them, then we want you. We work with some amazing clients, including Miller Brewing Company, KnowledgeWorks Foundation, and many many other large and small companies. This is a cool position.

Send your resume to recruiting@thinkbarefoot.com

Michael Krisher, Senior Developer, Barefoot

Regex to display X words in Rails

2007-03-09T11:22:00.000-08:00

I just created a useful combination of regex's in Ruby on Rails and wanted to share (and remember). I needed to display a summary of an article, as the first group of words from a string that might contain HTML, start with garbage, or otherwise not be pretty.

So, I stripped the HTML, removed non-printable stuff from the beginning, and came up with this to show the first 40 words of the article's body:

article.body.gsub(/<\/?[^>]*>/, "").gsub(/^\W*/, "")[/([\S]*[\W]*){40}/]

Enjoy! (Or, leave a comment with a better way to do it.)

Doug Smith, Senior Developer, Barefoot

The Joy of Rails Automated Testing

2007-03-01T09:58:00.000-08:00

Many developers are not in the habit of adding unit and functional tests to their projects. With many frameworks, testing is a tedious addition that can get pushed aside because of time constraints. However, with Ruby on Rails, automated testing is baked right in, so there's no excuse for not using it. And, once you start using unit & functional tests, you will sleep better, have less stress, exercise more, lose weight, improve your marriage, and have more money to save for retirement. Well, all of those benefits may not come directly from automated testing, but you'll certainly build a much more high-quality application, and that can't hurt the rest of your life!

I'm not going to go in-depth on the basics of unit/functional testing here ... many other resources do a great job of that, such as the excellent Agile Web Development with Rails. However, I wanted to show a simple & quick way to add functional tests in response to daily development problems.

It happens all the time during development: you build a controller with a page and see "Action Controller: Exception caught" when you view it in your browser. You immediately move to the task of fixing whatever problem is revealed.

However, it only takes an extra minute to add a new functional test that will give you the added assurance that once you fix the problem, you'll never be surprised by it again because your test will automatically tell you if it happens again.

They key is in the very nice display that Rails renders when an exception is caught. Immediately following the error trace, Rails displays the current Request parameters. For example, I just received an error on a seach page with parameters like this:

Request

Parameters: {"commit"=>"Search", "office_id"=>"0", "school_name"=>nil, "first_name"=>nil, "last_name"=>nil}

The parameters are in a hash that is in the exact form needed by the get or post methods you use within a Rails functional test. So here's what you do:

1. Create a new method within the functional test file for your controller, something like this:


def test_search_empty_params
 # Use all empty fields
 get :search
 assert_response :success
 assert_template 'search'
 assert_not_nil assigns(:search_params)
 assert_not_nil assigns(:results)
end

2. Copy & paste the list of request parameters from the error page in your browser to the second parameter of the get method (this also works with the post method), so your test method ends up like this:


def test_search_empty_params
 # Use all empty fields
 get :search, {"commit"=>"Search", "office_id"=>"0", "school_name"=>nil, "first_name"=>nil, "last_name"=>nil}
 assert_response :success
 assert_template 'search'
 assert_not_nil assigns(:search_params)
 assert_not_nil assigns(:results)
end

Now, go on to fix whatever caused the problem in the first place, and run your functional test to not only make sure your problem is fixed, but that your fix didn't break anything else. Now, you'll be sure that the problem will never show up again, at least, not without a message from your test. Doesn't that bring you joy?

Doug Smith, Senior Developer, Barefoot

Flash: Classes and Packages

2007-02-14T12:10:00.000-08:00

At Barefoot we have many different kinds of developers. Some come from a Java background. Some have been using Flash since Macromedia purchased it and released it as Flash Version 3. In addition, we work with developers from other agencies or from our clients and that requires project portability.

In this case, portability means the ability to package up a project with all of its pieces and deliver it to someone else in a way that they can begin working on the project without problems caused by missing dependencies.

We also use Subversion as a version control system. One way we use Subversion is to deliver project packages. Because of the way Subversion works, we have to be concious of file system restraints. The majority of the time, this means all of our project files need to live under a main parent directory.

This brings us to the organization of files that make up our projects, in this case Flash projects.

At Barefoot, we borrow a practice from the Java paradigm called Classes and Packages. For in-depth information about using Classes and Packages in Flash, check out Collin Moock's O'Reilly book–Essential Actionscript 2.0 - http://moock.org/eas2/.

In simple terms, Classes are external Actionscript files. Classes are how logic for your Flash application is separated and stored.

Packages are simply a set or group of interrelated classes in a file structure.

So for example, say Barefoot has created a custom Video Player to play FLV files.

We would have a Flash directory to hold all of our files related to the project. This includes any Classes. Default Macromedia Classes can stay in their default directory since we assume anyone else working on this project has Flash, including those core Classes. We also don't add Classes to the default Macromedia directory, all of our custom Classes stay with the project–including our FLA file.

Inside our Flash directory we'll store our FLA(s). We'll also want to store our Packages, remembering that they are just groups of our Classes that are interrelated.

This is where we borrow from Java and other mature language paradigms. We don't want our Packages, and the Classes inside them, to interfere with code from other developers. So, we store them in unique namespaces. The standard is to start this namespace with our company's domain name.

Inside the Flash directory with our FLA is a "Classes" directory. This becomes the root directory of the classpath, or the place where we tell Flash to look for any classes it needs to find. In "Classes", we add a "com" directory. And inside that is a "thinkbarefoot" subdirectory. Get it, thinkbarefoot.com? Now going back to the example, we'll create a "videoplayer" subdirectory inside "thinkbarefoot." Again, this is all covered in Moock's book.


\flash
 |
 +--\Classes
 |     |
 |     ---\com
 |          |
 |          ---\thinkbarefoot
 |                |
 |                ---\videoplayer
 |                      |
 |                      +--Player.as
 |                      +--Loader.as
 |
 +---video_player.fla

Inside the "videoplayer" directory will be all of our Classes (*.as), along with maybe some other subdirectories if we break things out further.

Organizing our files like this has two advantages. First, a check-in to Subversion only has to contain one parent directory. Then, if we deliver the project to someone else, all we have to do is zip the Flash directory and they'll have everything they need. That portability is essential when you are working with multiple developers or sending your code to another company.

Without this level of file organization, you may deliver an FLA and some of your logic, but forget one key Class that prevents a future developer from compiling a quick text fix. Adobe has made Actionscript 2.0+ very friendly for use with Classes and Packages. Give them a try, you'll be happy you did.

Mike Krisher, Senior Developer, Barefoot
Doug Smith, Senior Developer, Barefoot

SlideShowPro - XML attributes

2007-01-18T08:47:00.000-08:00

I am using the SlideShowPro component in a Flash piece I am working on and so far it has been a great experience. This is a pretty solid as Sears component.

However, I have the need to extend the XML schema and include additional attributes on my image nodes. It can be done no problem, as discussed here on the SlideShowPro forums. BUT, I noticed that the component converts all attribute names to lowercase.

So, say you want to add an attribute containing the path to download the image, call it "downloadPath." Notice the uppercase P. When retrieving that attribute via the data Object created by SlideShowPro (eventObject.data) the name has to be all lowercase (i.e. eventObject.data.downloadpath). I'm going to stick to just using all lowercase attribute names in the XML to thwart off confusion.

I was going to add this as a reply in the forums, however, they seem to be closed to new registrations?

Michael Krisher, Senior Developer, Barefoot
cross posted here

Custom Sorting in Ruby

2007-01-17T08:45:00.000-08:00

I have been an expert Java developer for many years, but over the past year I've had the opportunity to use Ruby on Rails for a couple real projects. I'm really enjoying Ruby and hope to to use it more often in the future.

My current RoR project has several models with bi-directional has_many :through relationships where two models link to a third join model that has one or more additional property fields. For example, Users link to Albums through a Selections join model. The selections table includes fields for user_id and album_id, with an additional field that contains the rating each user gives to each album. (This example uses different entity names to protect the client.)

These relationships are illustrated (with simplication) here:


class User < ActiveRecord::Base
  has_many :selections, :dependent => :destroy
  has_many :albums, :through => :selections  
end

class Album < ActiveRecord::Base
  has_many :selections, :dependent => :destroy
  has_many :users, :through => :selections  
end

class Selection < ActiveRecord::Base
  belongs_to :user
  belongs_to :album  
end

I needed to be able to list all the albums chosen by a user, sorted by album name. I tried this:


@user.selections.each do |selection|
  # ...
end

but the album names were not sorted. I thought that the nifty option :order => 'name' would work on the has_many :through, but alas, it didn't. Then, my Java experience reminded me of the Comparable interface. It turns out that Ruby includes a very similar pattern, but it comes complete with Ruby nice-ness.

When you sort an Array (or anything Enumerable), you can override the <=> method of the Object class to provide your own custom sorting code. (Just like the equals() method in Java.) The <=> method returns -1, 0, or 1 to indicate whether the instance is smaller, equal, or greater than the other object. Here's the method I added to the Selection model to tell it how to sort:


  def <=>(o)  
   # Compare album name
   album_name_cmp = self.album.name <=> o.album.name
   return album_name_cmp unless album_name_cmp == 0
    
   # Compare user last name
   user_ln_cmp = self.user.last_name <=> o.user.last_name
   return user_ln_cmp unless user_ln_cmp == 0
    
   # Compare user first name
   user_fn_cmp = self.user.first_name <=> o.user.first_name
   return user_fn_cmp unless user_fn_cmp == 0
    
   # Otherwise, compare IDs
   return self.id <=> o.id
  end

Then, just change the block slightly to use the sorted version:


@user.selections.sort.each do |selection|
  # ...
end

If the model you're trying to sort is not already Comparable, you should add the line include Comparable to include the Comparable mixin. ActiveRecord objects are already Comparable.

Have fun writing your own custom sorting rules in Ruby! Leave a comment if you need more details.

Doug Smith, Senior Developer, Barefoot

Popups a Spider Can Follow

2006-10-27T13:57:00.000-07:00

While talking with our team about SEO best practices, we discovered that the way Rails handles popups makes them not only more user-friendly (like allowing the ability to open the popup in a new full window or in a tab), but also allows a search engine spider to see the link and follow it to index the content of the popup.

Here is an example of what you may be used to seeing from a WYSIWYG editor when popping a new window:


 <script type="text/JavaScript">
 <!--
 function MM_openBrWindow(theURL,winName,features) { //v2.0
   window.open(theURL,winName,features);
 }
 //-->
 </script>
 <a href="#"><img src="path/to/a.gif" width="124" height="45" border="0" onClick="MM_openBrWindow('path/to/page','','width=900,height=570')"></a>

And this is how we are popping new windows (with the help of Rails):


<a href="/path/to/page" onclick="window.open(this.href,'event_detail','height=450,width=700');return false;">

Since the HREF is intact, spiders are able to follow the links. Easy, peasy.

Bobby Uhlenbrock, Application Developer, Barefoot

Flash sortOn coolness ...

2006-08-10T09:16:00.000-07:00

It's always fun to discover nice little surprises in function lists. I had such an experience when I recently found the sortOn() function within Flash's Array class.

I come from a Java background, and Java's Collections API includes very sophisticated hooks to sort objects in any number of ways. I didn't expect to find that in ActionScript. So, when I had a list of objects that I needed to sort, I was pleasantly surprised to find sortOn(), which sorts an Array of objects.

I frequently create value objects to represent things in Flash applications. In one application, I'm placing a number of animals on the stage. The environment is kinda 3D, so animals that have a lower Y axis value are farther away in the distance, while higher Y values are closer to the viewer. The Y axis value is randomly determined, so the order is not pre-determined.

Here's a simplified version of the Animal value object with only the properties relevant to this post:


class Animal 
{
   var initX:Number;
   var initY:Number;
   var initScale:Number;
   var animalType:String;
   var animalName:String;
   // more props

   function init():Void 
   { 
      // Init stuff ...
   }
}

The application reads user-defined animals from the server, and randomly places these animals on the stage. I keep all the Animal objects in an array for later use.

So, I knew that in Java I could sort these Animal objects by implementing the Comparable interface. I was pretty sure I couldn't write a Comparator in ActionScript. But, I decided to check out the Array object just in case.

Then, I found the sortOn() function. Its whole purpose is to let you sort arrays of objects. It has several flavors which you can read about at the link above, but the one relevant to this lets you pass in one or more fields (object properties), and an optional sort type parameter.

Here's an example:


var animals:Array = loadAnimals();
animals.sortOn(["initY"], Array.NUMERIC);

Since initY is a property of every object in the animals array, the sortOn() function sorts the objects on that field. By default, sortOn() sorts in ASCII order, which is fine for strings, but bad for numbers since 100 would be sorted before 99. So, ActionScript offers options like the Array.NUMERIC constant shown above, which tells sortOn() to sort the properties as numbers.

So, thanks ActionScript team for putting that in there -- it was a nice surprise!

Doug Smith, Senior Developer, Barefoot

Automating Rails deployment without Capistrano

2006-07-11T19:52:00.000-07:00

Certainly Capostrano is the most elegant way to deploy your Rails apps, but here's an easy way to automate Rails deployment using just rync and rake. And the best part is that it borrows from a previous blog entry.

This first step is optional, but boy will it make your life easier. Start by setting up public key authentication between your local development machine and your server. We've covered this ground before, so just make sure you're doing it for the account on your server that you'd normally use to FTP to your Rails application.

The second, and final, step: using rync with rake. To see full coverge of this topic (or how to do it if you're developing on a Windows machine, see the HOWTO.

Add the following block to the Rakefile in your local application directory:


desc "Deploy basic application directories"
task :deploy => :environment do
dirs = %w{ app lib test public config}
onserver = "login@remotehost:/home/rails-app-directory/"
dirs.each do | dir|
 `rsync -avz -e ssh "#{RAILS_ROOT}/#{dir}" "#{onserver}" --exclude ".svn"`
end
end

You'll need to change the onserver line to use your actual username and hostname. Then at the command line, change to your Rails application directory and run:


$ rake deploy

That's it. Enoy your new found productivity.

Sean Brown, Partner, Technology at Barefoot

Concerning Media Components and Cue Points

2006-07-06T09:28:00.000-07:00

On a recent Flash project (version 7) with talking characters, it became necessary to start and stop animations at specific points during the playback of a sound file. We decided that the most efficient way to manage the calls was via CuePoints which are available in MX 2004 Pro through the Media components.

I placed an instance of the MediaDisplay component on the stage and initialized it thusly:


var myMedia = _root.my_media_component;
myMedia.autoPlay = false;

// Load some sound into the component
// which has been preloaded
myMedia.setMedia("some.mp3", MP3);

// Add CuePoints to the component
myMedia.addCuePoint("start", 7);
myMedia.addCuePoint("stop", 19);

// Create a Cue Point Listener object
var cuePointListener:Object = new Object();

// Call this method when a CuePoint is "heard"
cuePointListener.cuePoint = function(eventObject):Void {
 // call the function with the CuePoint's name
 handleCuePoint(eventObject.target.mostRecentCuePointName);
}

// Call this method when the sound is complete
cuePointListener.complete = function(eventObject):Void {
 trace("I'm all done.");
 // do some stuff
}

// Associate/attach the listers to the component
myMedia.addEventListener("cuePoint",cuePointListener);
myMedia.addEventListener("complete", cuePointListener);

// Method to handle each CuePoint
// @param myCue: The name of the "heard" CuePoint
function handleCuePoint(myCue:String):Void {
 switch (myCue) {
  case "start" :
   trace("Start me up.");
   // start some stuff
   break;
  case "stop" :
   trace("Stop it, now.");
   // stop some stuff
   break;
 }
}

// Now that everything is ready to go, let's play!
myMedia.play();
trace("The beginning.");

Okay, that was pretty simple -- the sound is playing great and the CuePoints are called in time. But wait, what was that? The sound finished and my CuePoints just fired again. Let's take a look at the output:


The beginning
Start me up.
Stop it, now.
Start me up.
Stop it, now.
I'm all done.

So, something is amiss between the completion of the sound and our listener "hearing" the complete. If we trace myMedia.playheadTime in the complete function, it returns 0. The Media component is automatically rewinding the sound when it finishes but before triggering the complete listener. Blockbuster would be proud. This wouldn't be so bad, but the act of rewinding fires the CuePoints as the sound scrubs back to 0. Luckily, the solution is simple. After a CuePoint is heard, just remove it:


 // Call this method when a CuePoint is "heard"
 cuePointListener.cuePoint = function(eventObject):Void {
  // call the function with the CuePoint's name
  handleCuePoint(eventObject.target.mostRecentCuePointName);
  // now that the function above has been called, remove the CuePoint
  myMedia.removeCuePoint(mediaStreamer.getCuePoint(eventObject.target.mostRecentCuePointName));
 }

Not much to it, but the behavior of the MediaDisplay component is so odd that I just had to share.

Bobby Uhlenbrock, Application Developer, Barefoot

Custom Class Casting in Flash

2006-06-30T10:13:00.000-07:00

While developing a Flash 8 project using ActionScript 2 classes, I recently created a Tile class that extended MovieClip. The Tile is a custom scrolling background element that tiles itself for a seamless, endless horizontal scrolling.

I created a couple variables, typed as Tile, in my AppState class, the class I use to keep the current state of the Flash application. They are like so:


// Background movie clip tile references
var tile1:Tile = null;
var tile2:Tile = null;

Now, since we're not yet using ActionScript 3, the only way to place new Tile instances onto the stage is with a call to attachMovie(). However, the following call won't compile in AS2:


app.tile1 = _root.attachMovie(bgndMcName, "bgnd1_mc", app.depth++);

Why does it fail? Well, the compiler says this:


Type mismatch in assignment statement: found MovieClip where com.barefoot.ui.comp.Tile is required.

So, I thought to myself, I wonder if you can cast objects like you can with the String() and Number() functions? It turns out you can! This works:


app.tile1 = Tile(_root.attachMovie(bgndMcName, "bgnd1_mc", app.depth++));

I'm looking forward to ActionScript 3, where we will be able to instantiate objects to be placed on the stage like you can for any other object:


app.tile1 = new Tile();
addChild(app.tile1);

But until then, I'll use this casting method. It's not rocket science, but I thought it was cool nonetheless.

Doug Smith, Senior Developer, Barefoot

HTML e-mails

2006-06-16T20:52:00.000-07:00

OK, so we don't have all of the best ideas. Here's a great article with some do's and don'ts for HTML e-mail, which e-mail clients support CSS, and techniques to handle image blocking.

HTML Emails - Taming the Beast by David Greiner

Flash & SEO, A Home Run for Barefoot - Part 2

2006-06-14T15:26:00.000-07:00

This post will describe more details about how Barefoot accomplished a high level of search engine optimization (SEO) with a recent all-Flash web site, Pitch In For Baseball. (The previous article is here.) One unique aspect of this site is not only that the content is indexed in search engines, but that the links that are returned by search engines take you into subsections within the all-Flash web site. Typical all-Flash web sites don't provide this level of access into the content.

To start, each "page" or sub-section of content is stored in HTML in a content manager. In our case, we're using a custom solution we developed using MySQL and JSP. This HTML includes CSS to format the text, along with links that can navigate within the site and external to the site.

Each "page" within the site is indexed using a section & subsection reference. The structure is _, so "1_2" points to the content for section 1, subsection 2.

The site is architected in a Model-View-Controller pattern. So, all content is accessed by passing data to a single controller.

The controller can interpret URLs to view pages in two forms:

Notice, the first URL above passes a section ID and subsection ID directly, while the second URL uses an easily readable, SEO-friendly path.

The controller parses URLs in either of these two forms so it can locate the correct HTML content from the database.

To match the SEO-friendly URLs with the section/subsection scheme, all of the possible paths are stored in multi-dimensional arrays. The controller searches the arrays to find the position of the section and subsection within the arrays. In the above example, it would locate "step_up_to_the_plate" as the third item in the SECTIONS array, and "pitch_in_some_green" as the third item in the SUB_SECTION array for the chosen section. (That's where we get is=2, iss=2, zero-based indexing).

Once the section & subsection IDs are determined, the controller retrieves the HTML content from the database. We then move to rendering the retrieved content inside the Flash, and in HTML for indexing by search engines.

To understand how we achieve this, it's important to understand SWFObject at a high level. SWFObject is the premier method of embedding Flash applications into web pages. It is a very well-crafted Javascript library that optimizes process of determining the Flash Player version of the current browser, and hiding all that complexity from Flash developers.

To use SWFObject, you place a <DIV> block on the HTML page where you'd like the Flash to display. If the user has the correct version of Flash Player and all is well, the Flash application will replace any content you put into the <DIV>. Otherwise, content in the <DIV> will display and the user will not see the Flash. This includes "users" of the web page like search engine spiders and other automated processes.

Now, back to our application. Once the controller has retrieved the HTML content, it puts it into the <DIV> block where the Flash will display if the user has the right version of the player installed. It also passes the input section and subsectionID as flashVars to the SWFObject instance which will render the Flash if all is well. The Flash application will then append the section and subsection IDs to a URL that reads the HTML from the content manager into an HTML text field within the Flash.

With this content in the <DIV> of each unique URL, we create a site map that includes every possible link, and embed that into the <DIV> block of the home page URL. Search engines start there, and can find and index every other page. You can see all of this if you view http://www.pitchinforbaseball.com with Javascript turned off -- Firefox makes that very easy.

Another detail is that links within the HTML content need to work correctly whether clicked inside the Flash or in the HTML-only version. To accomplish this, all links to other sections within the site use full URL structure above, like /pifbweb/ui/step_up_to_the_plate/pitch_in_some_green/. If the content is being retrieved from Flash, we append a parameter &switchLinksToFlash=true to the URL which tells the controller to change all these URLS from standard links to an asfunction call. In this way, all links inside the Flash call an internal function that animates the section/subsection change without reloading the whole Flash application.

Doug Smith, Senior Developer, Barefoot

Designing emails for the inbox

2006-05-26T11:13:00.000-07:00

At Barefoot, we help our clients with email marketing strategies and in doing so need to know the successes and pitfalls of HTML email practices. HTML email is arguably more difficult than HTML standards compliance in a browser. There are more email clients out there than browsers, and very few of the clients are held to any sort of standards compliance benchmarking.

For example, Lotus Notes may be great in some of the features it offers and corporations may really benefit from them. However it is absolutely terrible at rendering HTML email. Tables do not display correctly, especially when nested. However some email clients are starting to use the HTML rendering engines that their counterpart browsers are using. For example, Apple Mail uses the Webkit rendering engine that Apple's browser, Safari, uses. There may be small differences, but overall we know that HTML in the Mail client will look similar to what it looks like in Safari. The same could be said about Outlook and Internet Explorer to a degree.

However Mail clients don't support everything that browsers do, such as full JavaScript implementation, full CSS implementation, and most don't support full plug-in implementation.

Because of these things, designing an HTML email is not like designing an HTML file to be used on a Web site. We'll discuss some of the differences and key points below:

Use: Maximum width of whole message: 500 - 640 pixel wide table
Use: HTML Title in heading
Avoid: Hot red and blue colors
Avoid: Large font sizes
Avoid: Borders around tables
Avoid: Background color other than white. Some email clients ignore background color. If background color must be set change it in a <table>, not the <body>
Don't use Javascript
Don't use style sheets
Use absolute references to all web content: start with http://
Use only standard web fonts (Arial, Verdana, Times New Roman, etc.)
No DHTML Layers, use Tables instead
No image maps, use complete links on images instead

More technically specific points:

HTML should be written in HTML 3.2 and include the DOCTYPE declaration.
Include a charset in the header.
Keep in mind that HTML Headers get stripped when viewed in Web based email clients like GMail.

design + development = flash workflow

2006-05-23T11:52:00.000-07:00

At Barefoot, we do a lot of Flash application development, everything from interactive Web sites with video to Flash based games. Flash projects typically take more time than traditional Web projects, simply because of the robust nature of the medium. Flash introduces motion and statelessness. Flash can certainly be more engaging than "page" based sites. However, because Flash adds more complexity, and usually time, it also adds more need for a solid workflow amongst team members.

No workflow process is ever complete. They seem to be constantly evolving, partially due to the fact that the technology is constantly evovling. Our workflows revolve around the team members and who starts the project files off. We have experimented with designers starting the project or developers starting the project. Let me explain further. One approach is to let the designers create the FLA and all of it parts, including layout, animation, and some interactivity, then handing off to the developer to tie everything together. The other approach has the developer architecting the application, creating the setup, pieces, and logic, and then handing off to the designer to work their magic on the individual pieces.

A couple of factors are key to the decision. Is your application going to practice Object Oriented Programming theory or more specifically a design pattern like MVC? Or is your application going to use procedural code where you could easily add logic along the timeline during key events, matching up with any motion or animation?

Here are some common scenarios and reasons why you would choose one workflow over another. If you were building a game, you would probably decide to practice OOP. Because of this reason, it would make sense for the developer to start with the project, architect the solution, set up the Classes, and any corresponding symbols. The designer could then work with the library symbols and add any graphics and motion to the piece. A key factor in the ability to do this is specifying the Class for any given symbol in the library, using either the "linkage" property and assigning the ActionScript 2.0 Class or through a process known as registering the object with a class.

However, say you were creating an online product demo. This demo, doesn't really have a lot of interactivity, more like events will need to fire during certain times throughout the demo. Because of this, procedural code can certainly fit the bill and may make development of the application easier. This scenario may lend itself to the designer initiating the project and identifying where logic needs to be added. Our designers know to create an actions layer and identify the first frame where all code will be added so hand off to a developer is very straight forward and logic can be added to this frame in functions and simply called throughout the movie.

Team members and their understanding of Flash is also very important. At Barefoot we are very lucky to have designers that also know a very good amount of ActionScript. Because of this we can be flexible in the workflow we choose.

Choosing one workflow for all projects may very well be impossible, so narrowing down the choices to just two may make agency life a whole lot easier. The more familiar your workflow becomes the faster you can deliver for your clients, bring new team members into the fold, and minimize the debugging in the middle.

Michael Krisher, Senior Developer, Barefoot

Automating Development Website Setup

2006-05-22T10:33:00.000-07:00

Over the years, setting up development and staging environments for our websites had become a tiresome chore, filled with "opportunities" for typos. So one Saturday evening, I sat down, brushed the dust off my bash scripting skills and wrote a handy little tool for Barefoot. I know that there are other tools out there, but I found none that acomplished all of our goals:

The tool should be interactive, rather than configuration-driven.
The tool should enforce naming policies our company had put in place.
The tool should integrate with Subversion, our chosen source control system.
To help cut down on misconfiguration caused by typos, some sane defaults should be presented.
The tool should automate the setup of both PHP-based and Rails-based applications.
The tool should make developers' lives easier by pre-populating dev sites with Barefoot standard code libraries. Once the site has been prepopulated, a new Subversion entry is created for the new site.

I think that's probably enough to ask of any tool. The script is far too long to go through every line, so I'll just give an overview here, and then make the entire script available for download. It's pretty well commented.

Overview of what the script does, in the order it does it:

Ask the user to enter a new hostname, check it against or naming policies using regular expressions. Fail with useful error if needed.
Ask the user to enter the domain name, give the user a sane default (thinkbarefoot.com), and check it using regular expressions. We separate the hostname and the domain name becuase Barefoot's standard directory structure for Apache-based sites is /www/domainname/host.domainname. Whenever we say we're giving a "sane default" we mean that the user can simply hit the enter key to select it.
Choose an FTP username and password for the dev site. GSD, FWUEIN (give sane default, fail with useful error if needed).
Choose a Subversion repository name. Check it against our naming convention. GSD, FWUEIN.
Choose either a Rails-based project or PHP-based.
We have a "skeleton" directory for each of the two development types. Depending which one is chosen, we create a new user, make that user's home directory be the result of #2 above, and populate that home directory with the contents of the correct skeleton directory.
Add a new virtual host to the Apache configuration. The correct entries are put in place for each of the two project types. This is done using sed to take a template file we've created for each and replacing the info gathered above.
Next, we check out our standard librabries from Subversion and place them in appropriate places in the new directory structure.
Now that the new site is put together, we wrap it all up into the Barefoot standard directory structure for Subversion, and check the new module into our Subversion server. Keen observers will note that we use the password-less authentication for SSH discussed in our blog here.
Finally, we set the correct ownership on the files and clean up some extraneous directories made simply to make a nice Subversion module.
As the script exits, it reminds the user to add the new host to our internal DNS and spits out the login information for easy copy and paste into your preferred login notes.

While this hasn't revolutionized our lives, it has certainly cut down on the time spent setting up new development sites. By using a couple of choice templates, skeleton directories, and Subversion we've been able to keep our setup much more consistent.

Debugging J2EE Technology apps on JRun and Eclipse

2006-05-15T14:23:00.000-07:00

I'm currently using Eclipse 3.1.1 on Adobe (formerly Macromedia) JRun 4.0 for a database-intensive project update. In order to debug some complex Java class business logic, I wanted to run the JRun app inside Eclipse's debugger. Here's how you can set it up in a similar way:

1. Choose the project in Eclipse that contains the class files to debug
2. Make sure that the jrun.jar file is on your project's classpath
3. Choose Run -> Run...
4. Click the Java Application configuration, then the New button.
5. In the main class, enter "jrunx.kernel.JRun".
6. In the Arguments tab, enter "-start ", so for a jrun server named "default" you'd enter "-start default".
7. Enter any JVM arguments you have in Jrun's jvm.config file into the VM arguments field: "-Xms32m -Xmx128m -Dsun.io.useCanonCaches=false".

You can then set breakpoints in your Java classes, and run JRun in Debug mode from within Eclipse during development.

One downside is that you can't debug JSP pages, only Java classes that you use. This application is a Flash Rich Internet Application that uses Flash Remoting to access a J2EE middleware backend, so I don't have to debug JSP for this one. I may review alternative debug methods that include JSP debugging later.

Doug Smith, Senior Developer, Barefoot

Flash & SEO, A Home Run for Barefoot, Part 1

2006-05-08T09:22:00.000-07:00

Barefoot recently completed Flash site for Pitch In For Baseball, a non-profit organization dedicated to providing baseball equipment to communities around the world who couldn't afford to purchase it otherwise.

We created a site that targeted Flash 8 so we could take advantage of great new features like high quality font rendering and improved transition effects. The client also wanted the ability to update content about current news, projects, and donor recognition. So, we stored all of the content in a MySQL database using a custom J2EE based content manager deployed on Apache Tomcat.

One of the typical drawbacks developers face when creating an all-Flash site is the issue of Search Engine Optimization, or SEO. Most search engines just ignore .swf files altogether. While Google does index .swf files, the results are very poor because they don't link into a specific navigation point with an all-Flash site.

For example, a Flash site may have a FAQ page with the word "FAQ" on it. Within the Flash, the user clicks the FAQ button and is able to see the FAQ content. However, if a user finds the FAQ content in a search engine that indexed the .swf itself, the link from the search engine to the site will likely take the user to the home page, or directly to the .swf file outside of its HTML container. Either way, the user doesn't see the FAQ content from the search engine, even if that content can be found.

Most solutions to this problem involve creating a completely separate HTML site. The HTML is indexed by search engines, and the content can be found. However, this typically requires developers or clients to maintain completely separate content bases, and prevents users who find the content via search engines from seeing the content in its Flash-enabled glory.

For Pitch In For Baseball, we used a very innovative combination of technology strategies to support search engine links that when clicked, tell the Flash application to go to the page found by the searcher. I'll detail the high-level strategy here, and write upcoming articles to show the details of each phase.

The major components of the strategy are:

Store the content in a database. This provides one place for everyone to update the content, while allowing developers to render that content in multiple ways.

Read the content dynamically into a Flash HTML field.

Code the Flash app so that it can read URLs in order to open sub-content areas. Here are a couple example links:

http://www.pitchinforbaseball.org/pifbweb/ui/our_dugout/game_plan/
http://www.pitchinforbaseball.org/pifbweb/ui/where_we_help/faq/

Use SWFObject to embed the Flash app on the page.

Populate the SWFObject <div> block with the same dynamic content that is read into each Flash page. If the user doesn't have Flash 6 or higher, or doesn't have Javascript turned on, they will see this content. Since search engines fall into this category, they index this content. Try out the links in the previous point with JavaScript turned off, and you'll see the flat content.

Dynamically change the links within the content so that they navigate correctly whether inside the Flash, or on Flash HTML.

The result of this design is that the site is completely indexed correctly by Google. Check out this search to see how well it is indexed, and how the Flash automatically goes to the right page.

More details to come!

by Doug Smith, Senior Developer, Barefoot

Installing Ruby on Rails with mod_fcgi for Apache 2

2006-05-03T09:29:00.000-07:00

After a few hours of trial and error using advice from many different sites/posts, this is the process that I found successful in getting Ruby on Rails working with the Apache 2 fcgi module on linux. I hope this helps someone hang onto a few more hair follicles.

Before we begin, I can say that this was only successful when I did the setup in this order. Perhaps others have done it in a different way, but this worked for me. BTW, we're using Redhat Enterprise 3.

First, we'll install ruby.

curl -O ftp://ftp.ruby-lang.org/pub/ruby/1.8/ruby-1.8.4.tar.gz
tar xvfz ruby-1.8.4.tar.gz
cd ruby-1.8.4
./configure --prefix=/usr/local
make
make install
cd ..

Just to make sure everything installed properly try this:

ruby --version

It should return something like this:

ruby 1.8.4 (2005-12-24) [i686-linux]

Now let's install ruby gems.

curl -O http://rubyforge.org/frs/download.php/5207/rubygems-0.8.11.tgz
tar xvfz rubygems-0.8.11.tgz
cd rubygems-0.8.11
ruby setup.rb
cd ..

Now we need to install the FastCGI development kit.

curl -O http://www.fastcgi.com/dist/fcgi-2.4.0.tar.gz
tar xvfz fcgi-2.4.0.tar.gz
cd fcgi-2.4.0
./configure --prefix=/usr/local
make
make install
cd ..

Allrighty then. We're moving now.

Install the bindings between Ruby and FastCGI

curl -O http://sugi.nemui.org/pub/ruby/fcgi/ruby-fcgi-0.8.6.tar.gz
tar xvfz ruby-fcgi-0.8.6.tar.gz
cd ruby-fcgi-0.8.6
ruby install.rb config
ruby install.rb setup
ruby install.rb install
cd ..

Next, install the mod_fcgi Apache 2 module.

curl -O http://fastcgi.coremail.cn/mod_fcgid.1.09.tar.gz
tar xvfz mod_fcgid.1.09.tar.gz
cd mod_fcgid.1.09

Check the Makefile to make sure top_dir points to the right directory. Edit if it doesn't.

make
make install
cd ..

It's finally time to install Rails.

gem install rails --include-dependencies

This will take a few minutes. Grab a refreshing beverage. If you really want to be entertained while improving your ruby skills, read why's (poignant) guide to ruby.

Time to get back to work. Before we go nuts trying to see if Rails and Apache are on speaking terms, let's make sure Rails' built in server, WEBrick works. We'll make a quick dummy application to try it out.

rails dummyapp
cd dummyapp
ruby script/server

You should see output similar to this:

=> Booting WEBrick...
=> Rails application started on http://0.0.0.0:3000
=> Ctrl-C to shutdown server; call with --help for options
[2006-05-03 11:56:50] INFO  WEBrick 1.3.1
[2006-05-03 11:56:50] INFO  ruby 1.8.4 (2005-12-24) [i686-linux]
[2006-05-03 11:56:50] INFO  WEBrick::HTTPServer#start: pid=8747 port=3000

Now, let's see what the application shows us. I usually do this in a new terminal window.

lynx http://localhost:3000

Hopefully, you can see a page that has "Welcome aboard, You're riding the Rails!" on it, along with links to documentation and other goodies. If you're not, begin abusing hair follicles. Assuming you did see it, quit out of lynx, then shutdown WEBrick in the other terminal by hitting ctrl-c on your keyboard.

Rails and Apache. Joanie and Chachi. ~~Nick and Jessica~~. Peas and Carrots.

Let's make a super couple. To test Rails and Apache, we need to enter the appropriate lines into our Apache configuration file. I was doing this as an additional virtual host, so mine looks like so:


<VirtualHost 10.10.10.10:80>
   ServerAdmin me@gmail.com
   ServerName website.com
   UseCanonicalName Off

   # Set to development, test, or production
   DefaultInitEnv RAILS_ENV production
   # set to the "public" directory of your app
   DocumentRoot /root/dummyapp/public  

   <Directory "/root/dummyapp/public">
       RewriteEngine On
       RewriteRule ^$ index.html [QSA]
       RewriteRule ^([^.]+)$ $1.html [QSA]
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteRule ^(.*)$ dispatch.fcgi [QSA,L]
       Options Indexes ExecCGI FollowSymLinks
       AllowOverride None
       Order allow,deny
       Allow from all
       AddHandler fcgid-script .fcgi
   </Directory>
</VirtualHost>

Now that you've added the block to your Apache config, restart Apache and browse to you site. You should once again see the familiar "Welcome aboard, You're riding the Rails!"

And there was much rejoicing.

Sean Brown, Partner, Technology at Barefoot

Flash ExpressInstall Challenge

2006-05-03T08:57:00.000-07:00

We have standardized on using the SWFObject method of embedding Flash applications onto web pages. It has a whole host of advantages -- most recently it has proven to overcome the new IE "Activate an ActiveX Control" issue, where users must click to activate any ActiveX control that is embedded with an applet, embed, or object tag.

SWFObject also interfaces with Adobe's ExpressInstall feature very nicely. You can embed ExpressInstall code into a Flash app and if the user doesn't have the required version of Flash (but they have at least Flash v6.0.65), the user can automatically update the Flash plugin.

I ran into a challenge while adding the ExpressInstall to a recent app. I was publishing a .swf as a Flash 8 file, with a text message that appeared if the user didn't have Flash 8 that explained the ExpressInstall process. The problem was that when I tested on Flash Player 6 or 7, the text message was invisible. I even tested using the so_tester file provided with (previously named) FlashObject, and when published as Flash 8, the upgrade message and button were also invisible.

Fortunately, the latest version of SWFObject (1.4) alerts us to the solution I discovered before its release: you must use Device Fonts for any text that could be displayed by a Flash Player < version 8, if you are publishing to Flash 8. Once I changed my text message to using Device Fonts, I could see the text in Flash Player 6 or 7 and all was well.

Doug Smith, Senior Developer at Barefoot.

Add properties to already existing Classes in Flash

2006-05-02T15:12:00.000-07:00

This is a simple way to store a property in the Sound Class of Flash for use in the onSoundComplete method (or any built-in method with any built-in class). The theory is called casting:


var my_sound: Object = new Sound();
my_sound.id = this.id;
my_sound.attachSound("someSound");
my_sound.start();
my_sound.onSoundComplete = function()
{
// stop the animation
_root["person" + id].stop();
}

Notice the declaration of Object, in the first line. Should my_sound be defined as Sound, the second line would fail because id is not a predefined property of the Sound class. By declaring my_sound as a generic Object, adding properties is allowed. All Sound properties and methods are still available even with the generic Object definition, hence the use of the onSoundComplete method on line 5. Notice the use of the id property to dynamically define an object on the _root.

More can be read about casting in Flash in Colin Moock's latest book from O'Reilly called "Essential Actionscript 2.0."

Michael Krisher, Senior Developer at Barefoot.

Public Key SSH Authentication

2006-05-02T09:32:00.000-07:00

This implementation will give you "passwordless SSH authentication." This can be set up between two machines on which you already have an SSH account. This example uses DSA encryption, but it works the same for RSA.

On the local machine (i.e., your laptop):

ssh-keygen -t dsa

You'll get three prompts. To all three, simply hit enter.

Enter file in which to save the key(/home/youraccount/.ssh/id_dsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

This creates two files in your local home directory's .ssh folder, id_dsa and id_dsa.pub. id_dsa is your private key file. Guard it closely. id_dsa.pub is your public key file; you'll use this in a moment.

Change into the .ssh folder in your home directory. For me, that meant

cd /home/sbrown/.ssh

Still on your local machine, we want to put a copy your id_dsa.pub file onto your server. I am using secure copy to do it, but you can substitute FTP if you like:

scp id_dsa.pub remote_user@remote_server.com:id_dsa.pub

Obviously, substitute your actual username and machine name into the code above. Now ssh into your account on the remote machine.

Now we're on your remote machine (in remote_user's home directory).

A copy of your local machine's id_dsa.pub file should be in your home directory. We need to copy its contents into a file called authorized_keys in the .ssh directory on your remote account. This assumes the .ssh folder already exists. If not create it first (mkdir .ssh).

cat id_dsa.pub >> .ssh/authorized_keys

Now, set the permissions on your files and folders properly:

chmod 700 .ssh
chmod 600 .ssh/authorized_keys

And don't forget to remove the copy of id_dsa.pub in your home directory.

rm id_dsa.pub

And that's it. Log out of your remote machine, then back on your local machine, ssh back into your remote machine and you should get in with no password.

Sean Brown, Partner, Technology at Barefoot

SQL to find missing linked records

2006-05-01T15:51:00.000-07:00

I'm working on a database project that has two tables. One table contains document information, with one record per document. Another table contains parties, the people/companies linked to the documents. There can be many parties for each document. There are two kinds of parties -- party 1 and party 2.

I needed to find all of the documents of a certain type that didn't have any party 1's. To start, I created SQL like this:


SELECT d.document_id
FROM documents d
LEFT OUTER JOIN parties p 
  on d.document_id = p.document_id 
WHERE p.party_id is null;

This query simply returns all of the document IDs where there is no party linked to each document. This only gets me 1/2 way to my goal, however, because I only want to see the documents that have no linked party 1's. This returns documents that have any parties linked to them, whether party 1 or 2.

To find only those that are missing party 1's, I used the following SQL:


SELECT d.document_id
FROM documents d
LEFT OUTER JOIN parties p 
  on d.document_id = p.document_id AND p.party_num = 1
WHERE p.party_id is null

The interesting thing here is that I added conditions you'd normally think to put in the WHERE clause to the condition of the LEFT OUTER JOIN clause. By doing this, the database only tries to link records between the two tables from the type of party I'm looking for -- party_num = 1.

Doug Smith, Senior Developer at Barefoot.