Thanks to everyone who came out to the NovaRUG presentation of my HTML/CSS/Rails Views talk. Here’s my slides from the event:

Beautiful Markup (10.7MB PDF)

Thanks to Gregg Pollack a video of my RailsConf 2010 Talk, Curing DIV-itis with Semantic HTML, CSS and Presenters is now online at the EnvyLabs site. I’ll be expanding and giving this talk again on June 29th at NovaRUG.

Thanks to everyone who came to the talk at the conference and for those of you who watch it online!

The kind people at NovaRUG have invited me to deliver my RailsConf talk on June 29th at NearInfinity in Reston, Virginia. I’ll be updating and greatly expanding the coverage of the talk, since we have a lot more time. I’ll get a decent presenter example worked up for you all as well.

If there are any things you’d like to see in the talk that I didn’t cover before or tools you think I should cover, feel free to email me or leave a comment here.

My RailsConf talk Curing DIV-itis with Semantic HTML, CSS and Presenters went off great, with a standing room only attendance and some great questions. I apologize for not having a decent presenter example in the slide deck. I was concerned about hitting my time limit with the slide count (but ended up coming in around 30 minutes instead).

You can get the slides from either the link above or here (9.7MB PDF)

Chad Fowler asked me to put together a quick site for the RubyConf 5k that will occur during Ruby Conf in San Francisco in November. If you’re there, please think about running, as it benefits Leukaemia and Lymphoma research. Need to get up to 5k from walking up the stairs making you winded? Look at Chad’s link that he sent me: Couch to 5k

The website for RubyConf has gone live. I did the design for my friends at InfoEther. I’ll be down in Florida for the event (baring unforeseen circumstances) but will not be talking. I’m not the Ruby programmer you may think me to be. I make pretty pictures for Ruby programmers. And dabble a bit when i have time with archaeopteryx and MaxMSP.

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.

Sometimes things just happen in a way that is exactly what you asked for, with just really odd timing. You might get a white Christmas on Dec 26th (happened two years ago). You might ask yourself “where is my beautiful house?” You might get… uh… Well, you know what I mean.

So things just started kicking like Bruce Lee. Honor by August’s schedule is taking off, we’re going to be playing the Viper Room in LA in September, and we’re on the road pretty heavy this fall. We’re also doing some showcases for various labels. And I can’t be on the road as much as I am and really run a creative department at a physical location.

So I’m going to be going back to the world of working for the self. I’ve teamed up with Amy Hoy to rock the world of UI and User Experience. And we’re doing it in snarky style as Hyphenated People. You could say we’re dabblers, or ADD or just confused, but really, we just love learning.

Amy rocked out a sexy site complete with Easter Egg heaven:

Oh yeah!

So, we’re doing some really cool stuff for a guy that was just on Conan O’Brien amongst other people. Lots of exciting cool projects and I get to sink my teeth back into Ruby while working from the van and rocking out.

So, last year on my birthday, I joined a band. This year I quit my job and got a food processor. It’s a quarter-life crisis people. Watch out!

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.

(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 adage 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)

So some of you may have seen Amy’s quasi-announcement about our new SupaSecretProject™ on which we have been working a little bit lately. In building the logo, I realized that some of the simple things in Photoshop are not so easy to find for people who haven’t been using it as a tool of mass procrastination since 1996. So I figured it was time for a step-by-step tutorial on how I built the Pimp My Rails logo.

We’re going to create something like this:

Fonts

First thing anyone needs is some good fonts. Since “Pimp My Rails” is an obvious play on MTV’s Pimp My Ride television program, some mild semblance in a visual sense was desired. Xzibit was unavailable as a spokesperson, so the graphic elements were going to have to do.

I had a few fonts I had purchased for various projects, one of which was Letterhead Fonts Ballpark Script which has some awesome swashes too. We had purchased it for use at OnTap a few years back. This would be perfect for the “Rails” word. Then something fun but not too cartoony was needed for the “Pimp My”, as I didn’t want so much scripty that it just didn’t work well. So bring in House Industries Holiday Sans. We’re ready to rock.

Don’t you love these highly technical terms? “Cartoony” and “Scripty” and what not? Yeah. Precision in visual communication, that’s right! Enough babling. Let’s start Photochoping!

Photoshop Magic

So we start with a nice simple screen, in this case, 500×375 pixels. You don’t need a screen grab of a blank Photoshop screen. You can imagine that one. So let’s start with the Ballpark Script and write “Rails”.

Okay, we’re on our way. Let’s get a sexy swash going underneath it. I used the “i” character for this particular swash.

And we say in Kool-Aid Man style: “OH YEAH!” But we have miles to go before we sleep young padawan. The Logo is missing half the words. So we’ll add them and give them a little curvature with the arc text tool. +22% vertical should do it. And let’s drop it in House Holiday Sans.

Sexy. So now we need to make this “pop,” as the obnoxious client would say. In order to do that we’re going to start playing with layer effects. Let’s get a colored background so we can see what we’re doing. You can achieve this by creating a new solid color layer or using the paint bucket on the background. I prefer the former method because it’s easier to change later on in the process.

Excellent. Now let’s give this a mega stroke. Since we have three text layers, let’s simplify things. Group them together, duplicate the folder, and flatten the two layers that make up “Rails” into one layer. We will now apply styles to “Pimp My” and “Rails” with a swoosh independently. Put a stroke on each layer and size to taste:

Now let’s add a gradient overlay as well. On this I had the “Pimp My” overlay stay close to the main red that is the darkest part of the “Rails” gradient.

Hmm. Still looks kind of flat. Let’s fake some depth with a bevel.

gives us…

We could call it a day here. But this needs some more excitement doesn’t it? So what can we do? Starbursts! Everyone loves starbursts! Now these aren’t too difficult to make in Photoshop. Create a new image, let’s say roughly 1000px x 375px. Make a vertical 20px black stripe on one edge of it. Duplicate it and set it next to the other one and then invert it to white. You should have something like this:

Now with snap involved, we can use the drag and copy (Apple – Option – Click) to rapidly fill up the whole thing. Make sure you end on the opposite of what you started with. Crop to taste.

Now it has come the time that we make this a rockin radial explosion of pixel sexiness. Filter -> Distort -> Polar Coordinates is going to be the tool that accomplishes this.

So hit “Rectangular to Polar” and watch it go! You can try this with regular pictures, but you typically end up in a somewhat Alice in Wonderland kind of world. And that’s not always good.

Now you can adjust your settings to get various feelings of compression on certain axes, etc. That’s your call. But we’re going to take this back to the main file and paste it in there.

That’s a little stark. We also know that we want to create some illusion of depth, so let’s make a radial gradient to help with that.

Okay, so here’s the trickery. Select the layer of the starburst and apply a layer mask. Paste the radial gradient into the layer mask (you might need to invert it for the proper effect). Finally, set the layer transfer mode to “Overlay” and the opacity down to about 10%. Make sure it’s behind the text, but over the red background.

Lookin good. On the original screen capture on Amy’s site, I had used a photoshop brush and basically dirtied it up a lot to make it look a little vintage. This version removes that.

Let’s reinforce the depth aspect and add a drop shadow to the text. Duplicate the text group and rasterize the whole group to one layer. Apply a drop shadow.

Add cheesy tag line to taste:

There you go. Your Rails, Pimped.

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.