Hello, friends. We’re your usability consultants.

Is your web app tired? Run down? Listless? Does it poop out at diggings? Is it unpopular on del.icio.us?

The answer to all of your problems is in this little bottle consulting package. Hyphenated People Prix Fixe. Yes, Hyphenated People Prix Fixe contains vitamins, meat, vegetables, and minerals and 150% of your daily dosage of usability expertise.

Yes, with Hyphenated People Prix Fixe you can buy your way to web application health. All you do is take a big dose after every meal once. It’s so tasty, too. Tastes just like candy. So why don’t you join the thousands of happy peppy people and order your Hyphenated People Prix Fixe today. That’s Hyphenated People Prix Fixe.

Hyphenated People Prix Fixe

Over at Hyphenated People, we’ve been spending the summer cooking up something new: a fixed-price deal. Fun and challenging for us, and affordable for you.

For a flat rate, you can choose either:

• The Inspector. In which we explore and analyze your entire application¹ and deliver to you a fancy report including a written analysis (including callouts and sketches) and suggestions for improvement. Topics considered include application structure, flow, individual screens’ usability and layout, insights about targeted users, and aesthetics (aka “the pretty”).
• The Drive-By Design. In which we explore your application, and thence, with that knowledge, take any single, full page of your choosing and redesign it from the ground up to be more effective. In this case we deliver to you a fully-realized design, original design source files (PSDs) and a written explanation of our recommendations for that page and its situation in the entire application.

Either package is ideal for smaller companies and startups, and anyone who is having a difficult time loosening the purse strings for hiring usability consultants for a long-term project.

There’s no further obligation. Our reports and advice are yours. We will happily make ourselves available for further assistance (availability permitting), but you can implement our suggestions any way you want, and with whomever you want.

That Price, Which is Fixed

The price for either package is just $3,500 USD. If you’d like further details, drop us a line at yo@hyphenateme.com with your preferred method of contact and we’ll give you a prompt return call or email.

Write us now. You know you want to.

Nota bene: We’re only budgeting the time for a few of these projects this summer. It’d be a clever marketing tactic to make that up and then urge you to contact us now if not sooner, but it’s actually true. This is something we’ll be doing in addition to our normal, larger jobs. We will of course deliver our very best (as we always do), but this is an experiment for us from a business standpoint.

[1] This assumes a fairly typically sized application: similar to or bigger than Basecamp, smaller than Salesforce.

This past week, my business partner, Amy Hoy and her fianceé, Thomas Fuchs, created something so simple and so damn cool based on the twitter API and some great javascript. It’s called Twistori

They built it and launched it in one day and announced it solely with one post on twitter each.

Check it out. You’ll be hooked.

The talk that Amy Hoy and I gave at SXSW this year is now online at behyphenated.com. Check it out!

Our talk pitch: Zen masters taught it. Isaac Newton knew it. Scott Adams writes about it. Now you can know it, too. We’re talking, of course, about the manifold benefits of being a n00b (at something). And, of course, about all the good stuff that happens post-n00bishness: the excellent side effects of being good at multiple things, even if they’re not related – heck, especially if they’re not related. So many of humanity’s important discoveries, innovations and beautiful leaps of logic have been made by people whose brains were leveled up by the cross-fertilization of multiple interests and disciplines. Nano-thin specialization is out, a broad understanding of life, the universe, and everything is in. It’s time to synergize, baby. So, reach outside your comfort zone, be a beginner again, and you’ll be smarter, sexier, better at your job… even more valuable. With the wisdom of the ages (and a little bit from modern pundits), we’ll talk about how, why, when, and where you can go about it. You won’t regret it.

Amy and I have been accepted to a new thing at SXSWi coming up in March in Austin, TX. It’s called a “Core Conversation” and we’ll be holding one on our concept deemed “Career Rev 342: Dabble Dabble, Toil and Kick Ass”. The basic premise revolves around a lot of what Amy and I have been through: broad, multi-faceted learning, generally out of the classroom, and lots of nose to the grindstone. It’s also a discussion about how mutliple facets improve team interactions (as opposed to specialists who don’t understand each other’s specialties).

We don’t have any details yet, but we’ll update you as we move towards March.

DHH posted about the new version of Ruby on Rails that is currently a preview release. The exciting things are just the simplification of a lot of things, especially Migrations. Also, a lot of the acts_as functionality is being extracted to plugins. Lighter, faster, and more streamlined.

Also, one of the elements of RESTful that was implemented with the semicolon functions has been changed back to slashes, which seems much more logical and proper anyway.

Looking forward to the final release.

The incomparable Amy Hoy and I are pitching a panel for SXSW this year about being a dabbler. We’re both pretty much ADD dabblers, but this is actually a prepared presentation, not a five person Q&A session gone wrong.

We’ll be chatting about things like

• constant learning,
• why it’s good to have a guitar next to your desk,
• pushing your team members into renaissance-man land,
• and some good “Now Everyone Hug” motivation.

Amy will be recording and I will then spend four weeks “EQing and Mastering” it in ProTools, by which time she will have just put it out anyway, forcing me to resort to releasing the Criterion Collection edition. Of course, no one will notice any significant difference. :D

So, yeah, vote early. Vote Often.

Our client, Gary Vaynerchuk is going to be on Late Night with Conan O’Brien tonight. For those of you who haven’t seen Gary’s Wine Library TV webcast, you are missing out. We’ll be launching a new project with him soon and then moving on to more world domination with the man.

For those of you who missed it, Gary was also recently profiled in TIME magazine by Joel Stein.

UPDATE Here’s the full video from Conan (the NBC site cuts the beginning and end) and Gary was recently featured in Slate as well!

(This article is part two in a multi-part series on design process, which started with my article on Why?!)

For those of you who have seen Chasing Amy you’re aware of the famous line delivered by Jason Lee: “Tracer? Your Mother’s a tracer!!!” This follows taunting by a comic book fan that he’s not really doing anything creative.

The taunter was totally wrong.

Towards A New Paradigm

I went to Architecture school. Not information architecture, but the “we make buildings and stuff” variety. One of the big tenets of the program I attended was that one should not be using a computer unless they already knew how to do the traditional technique. The computer is simply a digital version of the drawing tool or a different tool that needs to be integrated into a set of traditional tools. How can you draw in a computer if you don’t know how to draw in the first place?

The rationale behind this is easy. Computers are finite, sketching is representational. When in CAD, it’s a very precise line length, angle, color, etc. Paper can be as simple as a parti diagram (just showing the basic line strokes of a design) or can be super shaded and detailed. But regardless, at the end of the day, it is not finite. It is a representation of an idea.

Take this story from my college interning days. I was working for a small design/build shop in Newport News and I had the opportunity to design sketch a small addition. I came up with two different ideas and the owner asked me to present them to the client. So I drove over and sat down at the table with them in their house and showed them what we had come up with. They weren’t sold on either completely and did a typical client move: “We like this from A and that from B.” Okay. I whipped out a role of trace and drew that with them right there and asked “something like this?” They were ecstatic and joined into the creative process and I left the house with a finalized design.

This works very well for web work, whether it is within a team or with a client, this rapid sketch process gets everyone to a shared understanding (and buy-in) very quickly.

Sketching for Web

Currently, when one starts designing a product (web app) or web site, most will start with either a database model in Visio or OmniGraffle (if they are a programmer) or a look/feel comp in Photoshop, Fireworks, or Illustrator (if they tend to the design mentality). These are far too detailed approaches when you know not what you are trying to accomplish. So let’s go with that age old addage of everything you need to know you learned in Kindergarten.

This is what is so great about this approach. EVERYONE on the team: Designer, programmer, client, business owner, investor, heck, even your accountant, can all be part of this process. It can happen on a white board, post-it notes, an easel, printer paper, a sketchbook, and even pen tablet systems (but again, computer wants things precise).

This isn’t a new idea. Jakob Neilsen sang the praises of paper prototyping in 2003:

With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn’t work.

Ryan Singer, of 37Signals, also uses an extremely high-level paper prototyping system (which he discusses in Getting Real). They even scribble the text and then jump straight into HTML, using a graphics program only to create needed graphics. This obviously doesn’t work for everyone, but the core concept is simple: get the idea of the interaction that occurs designed very simply. Then start plugging and chugging it into your framework.

So, we have a theoretical system, paper prototyping, that allows us to get ideas developed quickly. But why should you use trace paper?

Why Trace?

When an architect is designing a building, trace comes in handy. First off, revisions. Floor plans change. Secondly, repetition. There are core elements that stay the same, such as the exterior walls and stairwells, but individual floors have different elements. Trace facilitates rapid copying of elements from other already completed layouts.

Now let’s apply that to a website.

The global elements, such as a header, a footer, navigation, and the basic framework (e.g. two vs three column) typically stay the same. The body content changes.

In real world practice, we used the trace process on two sites recently: CityCliq’s redesign and the initial design for Gourmet Library. In both cases, a large amount of high level design was accomplished very quickly by using trace paper. Once we kicked into a flow, a new page could be completed in 15 to 30 minutes. With CityCliq, we were doing product design/redesign and finished 24 wireframes in two relatively relaxed days at their offices in Jacksonville, FL.

Scan and upload to our Basecamp account? Bam.

“But I Can Do That in [Visio|OmniGraffle|Illustrator|Indesign] Faster!”

Well, in a production sense of making edits, etc. sure you could. But it’s the wrong tool. You’re trying to imply pixel perfection to an idea. You are spending time on the wrong thing (how things exactly line up) versus the important idea of what that page or that piece of interaction is. You get the important user experience information on paper and discuss how things flow. Then you can start dialing down into other tools. I personally go from paper to Photoshop. Ryan Singer at 37Signals goes from paper to HTML (or so he did when I attended the Getting Real workshop in Chicago in 2005).

So break out an index card, a post-it note, a roll of trace, a sketchbook, or a sketch-a-doodle even. As Michael Buffington twittered as I finished this article: paper prototyping turns out to be a lot like Kindergarten.

Let’s break out the finger paints.

Further Reading

Jakob Nielsen’s Alertbox on Paper Prototyping
Paper Prototyping (The website to accompany the book)

Supplies

12" x 150ft. Creme Trace paper
Staedtler Lumocolor Pens (I prefer the 318-9 Black Fine point)

Here’s a bunch of links that came through from the guys at EightShapes in regards to some of the Ajaxification we’re about to being on our storefront at Wirefly / InPhonic.

Yahoo Graded Browser Support | This is Yahoo’s assessment of which browsers are capable of more advanced features. A good way to plan what you are going to support.

AJAX SEO and Accessibility Considerations | If you’re like me, the idealist in you thinks everything should be usable and accessible. Here’s some notes on issues with advanced web applications.

AJAX and SEO | What to do about SEO on your AJAX site?

Adobe Flash Player Version Penetration | Eh, numbers from the horses mouth, but pretty interesting never the less.

Unobtrusive Javascript | Write better code, now!

Progressive Enhancement | What it is and Steve Champeon and Nick Finck’s SXSW03 Presenation

Now most of you are probably reading the title of this post saying “what in the hell is Athayde talking about?” Well, it’s complicated. But it’s an error that Justin and I have both hit and I keep forgetting to write down how to fix it. So I’m writing it down.

It was a relatively quiet Saturday night, and I was working on cleaning and recovering with some nice Knob Creek and Code Coke when suddenly, a shot rang out, a door slammed, the maid screamed! Suddenly, a pirate ship appeared on the horizon! Justin posted to Twitter that he was fighting with rMagick on Athena (our main production server). So I offered to help. Diving in we hit this error:

Fatal error 'Spinlock called when not threaded.' at line 83 in file /usr/src/lib/libpthread/thread/thr_spinlock.c (errno = 2)

Hmm. Looked familiar. Hit this before, we have. So I began to dig around. Upgraded ImageMagick to 6.3.3. Nope. rMagick from source! Nope. “But yay for new software,” I said jovially. Hankins was not amused. He found some google fu that started to point us in the right direction. Eventually we found out what it was.

Libraries compiled against other libraries that conflicted with each other and refused to play nice. For those of you who are looking for the fix, here it is. You need to create and hack /etc/libmap.conf to say this:

# /etc/libmap.conf
#
# candidate     mapping
#
libpthread.so.1         libpthread.so.1 # everything uses 'libpthread'
libpthread.so           libpthread.so

libc_r.so.5             libpthread.so.1 # everything that uses libc_r
libc_r.so               libpthread.so   # now uses libpthread too!

And then the rmagick make and make install commands ran perfectly fine. And everyone was happy.

The young intern sat by himself in one corner of the coffee shop. he had learned about medicine, but more importantly, he had learned something about life.

Here’s some stuff I’ve found or re-read in the last few weeks that I just want to put out there.

Understanding the Rails Initialization Process: Part I | Rick’s write up lets you see how things load up, which can help identify where some of those hiccups occur in your Rails app.

Understanding Ruby Symbols | Moving into Ruby from PHP is a bit of a jump, and took me some getting used to Ruby’s symbols and how they are used in the grand scheme of things. Kevin Clark’s article on this is great.

Using the Sphinx Search Engine in Ruby on Rails | Sphinx is a full-text search engine that integrates with SQL databases. And it appears to be the bomb.

MySQL Proxy | Jan Kneschke put out this new tool that allows you to make requests via a proxy (and therefore alter or inject the query or fix bugs on the fly). Eventually he will be building in load balancing to the proxy.

Chad Fowler’s Talk on Quick & Clean | Chad’s talk from the UK on Quick & Clean, or “well-factored Rails” code.

Meticulous has numerous servers online. This site happens to reside on our rails development server named “Cuba”. It’s on the development server because I can try things out without taking down our main production boxen (Athena & Hercules). Athena’s been around for a while and was stuck on Apache 1.3.x. We had some rails apps we had recently deployed that were just not cutting it with mod_fastcgi on the server, and we decided to upgrade the server in one fell swoop to give us the new hotness.

• Apache 2.2.4
• PHP5
• PHP5 Extentions
• mod_fastcgi
• smarty
• Subversion
• Ruby 1.8.5
• Ruby Gems, Rails, Mongrel, Mongrel_cluster, Capistrano, etc etc.

The install process was simple enough but the depencies bug hit us hard.

root@athena# cd www/apache22
root@athena# make install clean
===>  Installing for apache-2.2.4

===>  apache-2.2.4 conflicts with installed package(s): 
      apache-1.3.33_1

      They install files into the same place.
      Please remove them first with pkg_delete(1).
*** Error code 1

Stop in /usr/ports/www/apache22.
root@athena# pkg_delete
pkg_delete: missing package name(s)
usage: pkg_delete [-dDfGinrvxX] [-p prefix] pkg-name ...
       pkg_delete -a [flags]
root@athena# apachectl stop
/usr/local/sbin/apachectl stop: httpd stopped
root@athena# pkg_delete apache-1.3.33_1
pkg_delete: package 'apache-1.3.33_1' is required by these other packages
and may not be deinstalled:
mod_gzip-1.3.26.1a
smarty-2.6.7
php4-bz2-4.3.10_2
php4-ctype-4.3.10_2
php4-gd-4.3.10_2
php4-gettext-4.3.10_2
pecl-imagick-0.9.11_1
php4-mysql-4.3.10_2
php4-overload-4.3.10_2
php4-pcre-4.3.10_2
php4-posix-4.3.10_2
php4-session-4.3.10_2
php4-tokenizer-4.3.10_2
php4-xml-4.3.10_2
php4-zlib-4.3.10_2
php4-extensions-1.0
mod_php4-4.3.10_2,1
mod_ruby-1.2.4

Basically, we had to delete those packages in reverse-dependency order and then do Apache, PHP5, the PHP5 extensions, etc. following.

Virtual Host Love

One of the biggest benefits of Apache 2 is the Includes directory in /usr/local/etc/apache2. This directory has individual files setup for each Virtual host on the system. We have something over 160 virtual hosts on our main production box, and they were all listed in the Apache 1.3 httpd.conf file.

Justin flexed his ruby muscles and came up with a script that took the Virtual Hosts area of the httpd.conf file and parsed them into individual files.

# Parsing code at the bottom.
data = '

{Your VirtualHost config here}

'

WRITE_DIR = "/full/path/to/where/you/want/these/saved" 

ary = data.split("</VirtualHost>")

# TESTING
#=begin
ary.each do |x|
  site_name = x.match(/(ServerName)(\s)(\w.*)/)
  site_name = site_name.to_s.gsub(/(ServerName)(\s)(\w.*)$/, '\3') + ".conf" 
  site_name = site_name.gsub(" ", "").gsub("\t","")   # Strip out whitespaces
  puts site_name
end
#=end

ary.each do |x|
  # Strip out the multiple line breaks
  site_conf = x.gsub("\n\n", "")  

  # Add back in the </virtualhost> closer (which gets omitted with strip)
  site_conf += "\</VirtualHost>" 

  # Find the ServerName ... line
  site_name = x.match(/(ServerName)(\s)(\w.*)/)

  # Remove apache ServerName ... code, leaving domain name. Append .conf to the name for writing.
  site_name = site_name.to_s.gsub(/(ServerName)(\s)(\w.*)$/, '\3') + ".conf" 

  # Strip out any whitespaces in the name
  filename = site_name.gsub(" ", "").gsub("\t","")

#  puts filename    # testing
#  puts site_conf   # testing

  if File.exists?(WRITE_DIR + filename)
    puts "\nEXISTS: " + site_name
  end

  the_file = File.new(WRITE_DIR + filename, "w")
    the_file << site_conf
  the_file.close

end

This created 164 files with domainname.ext.conf as the file name. There were a few places where extra white space caused lines to jump onto other lines, but in general it was quite efficient and saved us hours of manual labor copying and pasting the config.

So now it’s time to get mongrel proxies running for all the rails sites. And deal with the nancies.org boards issues that are sure to come up. And get mod_deflate running. The fun never ends!

UPDATE Looks like it’s all happy. A few “best practices” cleanup things we need to do on various sites, but all in all, not bad. Now, to migrate the DNS and email servers.

In the long arc of web design, sites change. Over the years, they are redesigned, reimplemented, ripped apart, and reassembled. In doing this, content, typically, can be lost to the ether. We all know that missing content is simply “not a good thing” and should be avoided.

Inbound links to a site generally come from two main places:

1. Google/Yahoo/MSN/Search Engines
2. Links on other pages (e.g. blogs, articles, directories).

The search engines crawl regularly and keep themselves up to date. If they can find your content they will. If you tell them it’s moved permanently, they’ll update their records. Articles and other sites, however, usually won’t. I haven’t checked old outbound links on this site and I doubt many other people do either. In order to keep the end user searching through google and clicking on links from external sites happy, we need to employ some URL redirection to keep the old links pointing to the content with which they are associated.

We want to use 301 redirects.

What is a 301 redirect?

A 301 redirect refers to the HTTP protocol status code delivered by the web server. A 301 is similar to the most famous status code: 404. A 404 is “page not found”. A 301 says “this resource has been permanently moved and here is the new address. Simple.

Redirects are achieved by using the mod_rewrite Apache extention. The semantics of writing rewrite directives can be quite mind boggling to the novice user as evident by the documentation for mod_rewrite

Why 301 redirects?

When you redeploy a project with a new framework, a lot of old links that have google-fu disappear. People clicking on said links will get a 404 error and end up confused believing the content to have been destroyed. Sad web surfer. So, as a good web designer, you want to ensure that all of your old URLs point to their new counterparts.

“But what about meta header redirects?” you say.

Sure, that would work on a small scale, but they have been so abused by spammers in recent years that they will decimate your search engine ranking. Also, when you have over 1900 redirects (as I did when porting this site to Mephisto) you want to make sure that you can set something up that is

1. Easy to manage
2. Centralized
3. Seamless and immediate to the end user.

And that’s what we’re going to setup here.

Why .htaccess doesn’t work properly

In setting up capistrano based on Coda Hale’s instructions you are actually telling Apache to send everything to the mongrel_cluster to handle requests before you reach .htaccess. For some reason, this allows certain requests to be handled (e.g. ones that were related to /feed worked, but /feed has a route associated with it), but it ignores others.

# Redirect all non-static requests to cluster
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
RewriteRule ^/(.*)$ balancer://mongrel_cluster%{REQUEST_URI} [P,QSA,L]

That basically says “when the condition equals the site with any trailing URL, send that stringto the mongrel_cluster load balancer and let it deal with it.”

The Setup

First off, we need to turn on mod_rewrite for this site. It should be on in your .conf file since Rails uses rewrite to achieve basic routing, so look for the line that says

RewriteEngine On

If it is not present, your site probably doesn’t work at all and you have far larger problems than I can address here.

Second, we know we have a lot of these redirects, so we don’t want to muddy up our very nice apache config file with them inline. So let’s use the Include directive to tell Apache to pull the file wholesale and parse it at that point. Place this line immediately after the RewriteEngine On directive.

Include etc/apache22/Includes/boboroshi_rewrite.conf

I placed mine in the same directory as my main domain conf file. On Apache versions before 2, you will not see an Includes directory in /usr/local/etc/apache* so you would need to do this differently.

In this file, I placed a series of redirects that I typed up in an external text editor and uploaded to the server. Did you think I would type 1900 lines in nano or vi? Crazy! I digress…

The file looks something like this:

RewriteRule ^/log/index\.xml$ http://feeds.feedburner.com/boboroshi [R=301,L]
RewriteRule ^/index\.xml$ http://feeds.feedburner.com/boboroshi [R=301,L]
RewriteRule ^/index\.rdf$ http://feeds.feedburner.com/boboroshi [R=301,L]
RewriteRule ^/atom\.xml$ http://feeds.feedburner.com/boboroshi [R=301,L]
RewriteRule ^/rsd\.xml$ http://feeds.feedburner.com/boboroshi [R=301,L]

RewriteRule ^/bloggertrue\.mov$ http://versionsix.boboroshi.com/media/video/bloggertrue.mov [R=301,L]

RewriteRule ^/travel/vh1awards/$ http://versionsix.boboroshi.com/viewpoint/travelogue/vh1awards/ [R=301,L]
RewriteRule ^/travel/calinevada62001/$ http://versionsix.boboroshi.com/viewpoint/travelogue/calinevada62001/ [R=301,L]

RewriteRule ^/backlog/2006/11/just_like_starting_over\.php$ http://www.boboroshi.com/2006/11/28/just-like-starting-over [R=301,L]
RewriteRule ^/backlog/2006/10/myspace_data_modeling\.php$ http://www.boboroshi.com/2006/10/31/myspace-data-modeling [R=301,L]
RewriteRule ^/backlog/2006/10/the_killers_sams_town_springsteen_queen_and_deadwood\.php$ http://www.boboroshi.com/2006/10/8/the-killers-sams-town-springsteen-queen-and-deadwood [R=301,L]
RewriteRule ^/backlog/2006/10/photos_soft_complex_monopoli_cedars_at_the_black_cat\.php$ http://www.boboroshi.com/2006/10/7/photos-soft-complex-monopoli-cedars-at-the-black-cat [R=301,L]
RewriteRule ^/backlog/2006/10/the_periodic_spiral\.php$ http://www.boboroshi.com/2006/10/4/the-periodic-spiral [R=301,L]

[......]

What does that mean? Well looking at the mod_rewrite documentation we’re looking at some basic regular expressions. the ^ starts the string and the $ ends the string. Since a period is used to represent any character, you want to slash escape it by placing a backslash character (\) before any period that should be in the URL.

[R=301,L] the R says “force redirect” and apply a 301 status code. The “L” says “stop running through the rules now and load the page. This is good when we have 1900 entries. Once it finds the entry, it stops and gets the content to the client.

So, once you’ve got it written up, toss that file in the directory, restart apache, run cap restart from your deployment workstation, and you should be in business. And your old users will be very very happy that they don’t have to look at a cache page in Google.

In re-launching this site, I decided to use Capistrano to deploy. First off, I wanted to try it out. Second, I wanted to learn how to do proxy balancing with Mongrel and Mongrel_cluster. I followed the nifty instructions by Coda Hale and then hit a few bumps.

On FreeBSD, I had to change a line in the capistrano gem on my workstation because it was not recognizing [[ as test. I changed line 34 of base.rb to

if test ! -d #{configuration.release_path} ; then

Also, ensure that your user is part of the wheel group and wheel is allowed in the sudoers file in /usr/local/etc/sudoers

Anyhow. Another thing checked off. Time to move on to the next item on the never ending GSD™ list.

In migrating out of MovableType I had to leave the [dark miserable depressing] world of PHP behind. So I had to rewrite some scripts in Ruby. One of said scripts is a piece of code that selects an entry from an array and returns it to the body of the code so that you can have an area that updates pretty quickly.

This was one of the first things I learned to do in PHP (thanks to Waldo patience and direction). That code was pretty simple, but not very readable or elegant:

<?php

// called by
// <?php echo $contents[$random_key]["text"]; ?>
// <?php echo $contents[$random_key]["image"]; ?>

// Gimme a number, any number

srand ((float) microtime() * 10000000);

// Define the array

$contents[0][image] = '...';
$contents[0][text] = '...';
...

// Choose your poison

$random_key = array_rand($contents);

?>

Not very elegant. It works, but it’s just nasty. In Ruby it’s pretty straight forward and I figured someone else learning ruby might be able to learn from this:

#! /usr/bin/env ruby

class RandomImage

  PHOTOS = [ # Define the array of photos. Maybe eventually do this with YAML
    #  Image Name                  Caption
    [ '930lights.jpg',             'Caption' ],
    [ 'arlingtonclouds.jpg',       'Caption' ],
        ... # Repeat 24 times
    ]

  def show_random_image
    # Select the array entry
    @photo = PHOTOS[rand(24)]

    # Give some local variables
    filename = @photo[0]
    caption = @photo[1]

    # Echo statement definitions
    random_image_call = "<img src=\"media/images/design/masthead/#{filename}\" alt=\"masthead image\" height=\"250\" width=\"725\" border=\"0\" />" 
    random_image_caption = "#{caption}" 
  end
end

You have an array defined. To get to an entry in the array you would type @photo[n] to get to the filename or caption you’d add the second level of access @photo[n][0]. Since we want the caption to match the photo, we only want to run rand once. Put that into a variable, and then operate on that variable.

Muy sexy.

Things to do in the future

1. Make this a Mephisto plugin
2. Use YAML instead of an inline array
3. Get rich off the proceeds

Okay, so two out of three wouldn’t be bad.