photo by woodleywonderworks

I recently upgraded StagingTracks.com to use Rails 2.0. I was excited about so many of the newest features that it seemed the logical thing to do. I even decided to upgrade RSpec in the process so I would be able to play with some of the new features there too.

Unfortunately, despite extensive local spec’ing, when I deployed the app to Dreamhost, things did not go as planned. I was using piston to manage my Rails in the app and all of my plugins, so I didn’t need to worry about which gems were installed on the server. What I found was that when users tried to submit new information using the forms on the site, nothing would happen. Let me correct that: It would look like something happened, but no data was submitted.

So what was the problem?

I first started by watching the production.log to see if the data was even getting submitted. As expected, nothing was coming through. I then used the Tamper Data plugin for Firefox to see if I if the data was getting out of the browser. It was, but something interesting appeared. I saw a 301 Redirect when the page was submitted. Odd. Especially since the application wasn’t seeing the data and there were no redirects in the production.log.

So I started looking in the http access.log to see why the data wasn’t coming through to the app. What I saw was surprising:

- - [16/Dec/2007:19:24:30 -0800] "POST /shops HTTP/1.1" 301 591 "http://www.stagingtracks.com/shops/new" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11"
- - [16/Dec/2007:19:24:30 -0800] "GET /shops/ HTTP/1.1" 200 319 "http://www.stagingtracks.com/shops/new" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11"

It looked like the POST (which goes to the ‘create’ method using Rails RESTful approach) was being redirected to ‘/shops/’. The browser would then call ‘/shops/ ‘ with a GET (which is the ‘index’ action). And the form submission never got through. Now I was perplexed. Why would the web server being sending the 301 Redirect?

It became a little clearer when I saw this in the logs as well:

- - [16/Dec/2007:19:15:11 -0800] "GET /shops HTTP/1.1" 301 591 "http://www.stagingtracks.com/" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11"
- - [16/Dec/2007:19:15:11 -0800] "GET /shops/ HTTP/1.1" 200 89174 "http://www.stagingtracks.com/" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11"

For some reason, the web server was causing 301 Redirects when the trailing slash was missing! Now I had heard of the trailing slash problem, but couldn’t find a suitable solution that would be easy to implement.

So How Do You Fix It?

I am so glad I am surrounded by lots of smart people. A quick conversation with my friend Rob Sanheim turned up the solution.

I added the following to my .htaccess file:

DirectorySlash Off

I added it after the Options +FollowSymLinks +ExecCGI and before the RewriteEngine On

Now things are back to normal again. I am now able to get back to connecting model railroaders.

My friend, Chris Gay, is a finalist in the Amazon Web Services Startup Challenge with his company, MileMeter. I love the concept of only paying for the auto insurance I am going to use. Both my wife and I work out of the home and therefore our cars sit in the garage alot. But I still have to pay the same rates as my neighbors who drive to downtown Dallas everyday. For both cars!

So now I urge you to go and vote for Chris and MileMeter.

photo by anyoungkevin

We are doing lightning talks at this month’s dallas.rb meeting. I decided to give the group some choice of what I would present.

I will do a short one on “Why Firefox Makes Me Look Good” or “Better Web App Development using Firefox and a Buttload of Extensions”

I can also do one “JQuery: I Don’t Know Much, But I Know I Love You ”

And since neither of those are Ruby related, I will throw another one out there: “Tighter Abs: XML Situps Made Easy With Ruby”

I’ll let everyone decide which ones you want to hear more about.

Update

I only did the JQuery presentation and here are the slides (although they were much more interesting in person).

photo by alangbrf

I will give a presentation on RSpec and Behaviour Driven Development at the Dallas.rb tonight (August 8). Stop by and find out more.

photo by tifotter

I came across the Yahoo! Developer Network: Design Pattern Library recently and was impressed with the number of patterns they had. It has been out for a while now, but I am just now getting back to checking it out. Definitely a useful resource.

photo by texas_mustang

One of the things I like about taking a project from start to finish is the first few rounds of development where we hammer out what the application is supposed to do. After reading Kathy Sierra’s article “Don’t Make the Demo Look Done“, I wanted to see if I could come up with something similar to the Napkin Look and Feel for my web applications.

Why is it important? I have found out the hard way, what Joel Spolsky points out in The Iceberg Secret, Revealed. As soon I start putting the colors, graphics, and drop shadows in place for the finished product, the attention is no longer on the functionality of the application and now turns to “could you move that button over 5 pixels?” And this is still while half the application remains unfinished!

So this is my interpretation of making the demo look like a demo. It is completely driven with a separate CSS stylesheet that can be removed and replaced with the finished stylesheet. I make use of the Yahoo CSS and some paper background images. I have even contemplated making use of the Tongue In Cheek icons to make it even more authentic. I would have used a handwriting font, but there is not a good cross browser way to deliver fonts, so Comic Sans will have to satisfy the prototype font requirement.

Here are what the initial screens look like for a new application:

• Home Page
• Sample Page
• Sample Page

Does it work?

So far it has worked great. And as soon as we switch stylesheets, we lose focus on the functionality. Every time. So I will keep using this and keep pushing this as far as a project will let me.

Because my friend Matt was so impressed with a Firefox extension I showed him, I thought I would share some of my other favorites.

photo by longhorndave

What Extensions I Am Using Right Now

• Web Developer Toolbar - Just about everything you could want to do HTML and CSS, plus I can edit AND save the CSS changes I was playing around with.
• Firebug - So much goodness. Especially debugging JavaScript and looking over AJAX requests and responses.
• View Source Chart - Makes looking at HTML source bearable.
• ColorZilla - a color picker for pulling colors off of web pages.
• HTMLValidator - because it is too easy to miss a closing tag somewhere that messes everything up.
• DummyLipsum - when you need some filler content.
• SeleniumIDE - great little utility for helping to write Selenium tests for functional testing.

photo by meshmar2

Not to mention

• Adblock - no more ads.
• Adblock Filterset.G - no more ads just got easier.
• GTDInbox - for when I think that I am Getting Things Done
• Foxmarks - because I have too many computers and too many bookmarks.

Got a favorite? I’d like to hear about it.

photo by monique72

With all of the talk these days of Web 2.0 and the fancy, shiny, draggable, refreshable, blinking, glowing components in web applications, I wonder how many of the will still work when JavaScript is turn off or not even present (yes, it still happens). And how is the usability and accessibility of the application affected when so much of the interaction happens through JavaScript that doesn’t degrade?

I have been taking a look at creating a fully functional application, without any fancy Javascipt or AJAX, and then adding the extra functionality unobtrusively. To force myself to learn how to do this, I stopped using Prototype, script.aculo.us, and the Ruby on Rails helpers with RJS, and I started using JQuery. Two things happened: 1. I started to better understand how AJAX works and can enhance my application. 2. I found out I really like JQuery.

More on my JQuery experiences later. Now back to adding cool features, unobtrusively.

photo by bjearwicke

I have come across a few situations recently where testing is a second class citizen in the development process. The latest was a job posting where the part of the development environment was described as “testing when possible.” A lot of the larger projects I have worked on have 1 or 2 weeks of testing tacked on to the end of the development cycle. More times than not, this “testing” time becomes padding for development schedules that overrun. Besides “you tested as you developed, right?” and “we can’t move the delivery date.”

I am becoming more and more an advocate of writing automated tests. This has become even more important when I am the sole developer on a project. Now you might say to yourself, “If there is no one else to mess up the code, shouldn’t everything work?” It does work. But as I come across areas of code that need to be refactored, because I am DRYing up my code, I want to be sure that my changes do not break existing functionality. Now I could make the changes and then manually try to test all of the possible scenarios, but I usually miss one or two, especially in more complex applications. This is where the automated tests come in very handy.

photo by mcconnell6

Maybe I am thick, but writing tests using JUnit or Test::Unit never seemed natural. It always seemed to go at the end of my development cycle. Maybe it was the vocabulary implying that something had to exist to be tested. Maybe it was the unnatural language of assertions: assertTrue, assertThis, assertThat. Who talks like that?

Then I came across something that encouraged me to write specifications for an application that could then be used after the development was complete to verify that the specifications were met. All of the sudden I was discussing how the application should behave, which does not imply that the application even exist yet. This makes sense to me. I saying things like “this should equal that” or “something should have 5 of these”. It is subtle, but powerful.

So I am now using RSpec, the Ruby implementation of Behaviour Driven Development, for all of my projects. My latest Rails project has only 6 models and 2 controllers, but has over 200 specs. I have a better understanding of how the application is supposed to behave. Combine that with a way to continously re-run the specifications when the code is changed and I am now a lot more confident that my changes aren’t breaking existing functionality.

Plus, it’s cooler, right?

I wanted to mention a simple little tool that has saved me hours. The Yahoo! UI CSS Foundation is actually three separate CSS files: Reset, Fonts, and Grids.

Reset removes all of the default styling from the browser. Even with out add a stylesheet to you website, the browser (Internet Explorer, Firefox, Opera, Safari) has already add some default styles. This is why headers are bigger and bolder than text in a paragraph. But, amazingly enough, the default styles vary from browser to browser. Reset CSS is great because it removes all of the default styling and let me, the developer/designer, go and set the style that I want. I can be sure that some default style won’t creep in and ruin a good design.

Where Reset removes all of the default styling, the Fonts CSS sets a level playing field and uniform approach to font sizing. With the various ways to size fonts (px, pt, em, %), it shouldn’t be any suprise that once again the various web browser handle these differently. The Fonts CSS gives you a uniform way of setting the base size of the document and adjusting all other font sizes as a percentage of the base size. It turns out that, while requiring a little bit of math, this is super easy and keeps things looking good.

While I start every project with the Reset and Fonts CSS, it is the Grids CSS that really is the time saver. Now that using tables for layouts is so 1990’s, coming up with cross-browser compatable grid layouts can be a challenge. When you combine it with the decisions of fixed-width or fluid layouts, sidebar positioning on the left or the right, semantic markup, and search engine optimization, grid layouts can make you scream and run. The Grids CSS gives you three tools in one: fixed-width or fluid layouts, sidebar size and positioning, and grids. I won’t get into all the details, but you can play with the Yahoo! Grid Builder or check out some of my latest projects to see it in action.

To top it all off, there is one combined file that is compressed and includes all three CSS components. All you have to do is add a link tag pointing to the latest version and you are off and running. Now you can focus on more important things, like making your application functional.