With this new traffic, came some new requests for features. The first was a request for a Google Gadget. I didn’t know much about what I needed to create a Gadget, but after looking it up I realized I could use the CatechizeMe API that came automatically when I built the app. With just a few lines of code, the Daily Question service was created and returning JSON data. You gotta love it when things are this easy.

BEFORE:

  def daily_question
    @question = @catechism.daily_question
    render :template => '/questions/show'
  end

AFTER:

  def daily_question
    @question = @catechism.daily_question
    respond_to do |wants|
      wants.html { render :template => '/questions/show' }
      wants.js { render_json @question.to_json }
    end
  end

So now I get a daily catechism question from the CatechizeMe website or via the Google Gadget using JSON:

You can find the project, Basejumper, at: http://github.com/gdagley/basejumper

What is included?

Blueprint CSS (http://www.bluprintcss.org)

Say what you will about CSS frameworks, but they make my life a lot easier. From the website, it “gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.” There are official plugins for the framework, like “buttons” and “link-icons”, and other user created ones, like silksprite (http://www.ajaxbestiary.com/Labs/SilkSprite).

Authlogic (http://github.com/binarylogic/authlogic)

The way I think authentication should be done. Instead of copying a lot of authentication logic (encrypting passwords, remember tokens, etc.) into your user model, it is kept in the gem and is easily updatable. It has lots of configuration options to fit with your authentication needs and some really good tutorials.

In app/models/user.rb

class User < ActiveRecord::Base
  acts_as_authentic
end

Configatron (http://github.com/markbates/configatron)

This is great way to store application wide configuration and settings. By adding an initializer to load the config.yml, you can access configuration anywhere in the app.

In config/initializers/load_config.rb:

configatron.configure_from_yaml("config/config.yml", :hash => Rails.env)

And in config/config.yml

development: &local
    property1: value1
    property2: value2

test:
  <<: *local
  value2: test_value2

production:
  <<: *local
  value2: prod_value2

Searchlogic (http://github.com/binarylogic/searchlogic)

From the same folks who brought you Authlogic, there is Searchlogic. You will always need pagination. You may not think so now, but believe me, you will. So just start out with it enabled. What I really, really like about Searchlogic, is not just the pagination support, but how easy it makes building advanced search forms (including searching nested objects). And again, there is a great tutorial

log-buddy (http://github.com/relevance/log_buddy)

For the lazy debugger in all of us. How many times have you typed:

some_var = 'some_value'
logger.debug "some_var = #{some_var}" 

Now try this

some_var = 'some_value'
d { some_var }

which will log

some_var = 'some_value'  

micronaut and micronaut-rails (http://github.com/spicycode/micronaut and http://github.com/spicycode/micronaut-rails)

It just makes more sense to me. Like RSpec, only fewer calories. micronaut is a BDD framework similar to RSpec. In fact it uses all the same RSpec matchers, so there is not a new syntax to learn. And it adds metadata to the loaded examples that is useful for deciding which tests to run, exclude, document, etc. or building additional tools for your example suite.

The application currently has examples (a.k.a. specs) for most of the existing code. Adding new examples, should be quick and easy. To see it all, start with rake examples

beholder treasure map (http://github.com/spicycode/beholder)

I like continuous integration. I work for a company that likes continuous integration. Having continuous testing locally let’s me as soon as I break something.

beholder watches for files to change and then reruns the appropriate tests/specs/examples. Now I don’t have an excuse for not running the example suite, because it is always running for me.

active_form (http://github.com/nesquena/active_form)

Easy ActiveRecord validations for non-AR models (for those Contact Us forms).

comatose (http://github.com/darthapo/comatose)

Inevitably, every project wants to be able to manage the “static” content on the site. Comatose is a very simple CMS plugin. Nothing fancy, but that is great for these small projects. You can even style the admin interface to look more like your application (which I did), but the default styles could work just fine. It is possible to use the content in Comatose as an entire page or a partial across many pages. The app has a migration that creates some default pages and an example partial.

active_scaffold (http://github.com/activescaffold/active_scaffold)

Fastest way to build a super simple admin interface. Or you could use it to build more complex admin. It is really quite flexible with its search, CRUD, and the ability to customize.

display_flash_helper (http://github.com/gdagley/display_flash_helper)

Shameless use of my own plugin to display flash messages. Nothing too fancy.

exception_notification (http://github.com/rails/exception_notification)

Because they happen and I want to know about them.

pretty_buttons (http://github.com/relevance/pretty_buttons)

HTML buttons shouldn’t have to look so bad. This plugin plays nicely with Blueprint CSS buttons plugin, too

semantic_form_builder (http://github.com/nesquena/semantic_form_builder)

HTML forms made easier and semantic. Also makes the forms easier to style.

seo_helper (http://github.com/relevance/seo_helper)

A few useful helpers for SEO purposes. Create page titles (h1) that match the html title (title), support for meta tags and easily add some breadcrumbs to each page.

Conclusion

Like I said before, it is tailored to they way I like things to start out. You can fork it and change it. I may not roll you changes back in, but that’s ok because now you have an starter app just the way you like it.

Finding Shops, Clubs, and Shows on your iPhone

When I built StagingTracks a few years ago, I did it because I was traveling and wanted to easily find the model railroading community wherever I was. As it has grown over the past few years, so has technology. While it was possible to navigate the StagingTracks website using a browser on the phone, it was not optimal. Since this is my little sandbox for experimenting, I wanted to see how difficult it would be to add an optimized iPhone interface.

Native app or Web app?

I spend my daylight hours developing web applications for others, so it made sense that I should reuse the infrastructure that I already had in place. I didn’t want to learn iPhone SDK and all that is involved with that right now and I had recently come across the iUi javascript and css framework. iUI can give web applications a native iPhone application feel, so I just needed to see how to incorporate it into my “legacy” Rails application.

Resources

A quick Google search for iUI and Rails turned up Ben Smith’s excellent iPhone on Rails article.

iPhoney

Reading through the article, I downloaded iPhoney for quick testing without an iPhone. Be sure to use the iPhone User Agent in the iPhoney menu.

Local Subdomain for Testing

I was going to serve the iPhone version from the subdomain iphone.stagingtracks.com, so I needed to setup something similar in my local development environment. Fortunately, this was very easy with the Ruby Ghost gem found via Robby Russell’s Get to know a gem: Ghost.

sudo ghost add iphone.localhost.com

We needed to add the .com so that the call to the request.subdomains will pick out the iphone portion.

iUI Framework

After downloading the iUI framework from the project site, I moved everything into its rightful place.

public
  - stylesheets
    - iui.css
  - javascripts
    - iui.js
  - images
    - iui
      - copy all of the .gif and .png files into here

Because I moved the images into the /images/iui folder, I needed to update the image locations in the iUI css. A quick find/replace and I was ready to go.

Application changes

I won’t go into all the details since Ben’s article hit most of the high points. Here are the few additional bits that I came across as I was adding my iPhone interface.

Basic approach

The basic approach to adding the iphone interface is to update the controller to render the iphone partial without the layout (since everything is AJAX) and then create an iphone template.

In posts_controller.rb change from:

def show
  @post = Post.find(params[:id])
end  

to

UPDATE:: format.html should come before format.iphone. For some reason it was working for browsers that were not IE. Weird.

def show
  @post = Post.find(params[:id])
  respond_to do |format|
    format.html
    format.iphone { render :layout => false }
  end
end  

iphone template posts/show.iphone.erb:

<div class="panel" title="<%= @post.title %>" selected="true">
  <h3><%= @post.title %></h3>
  <%= render :partial => 'post.html.erb', :locals => {:post => @post} %>
</div>  

Search Button

Since one of the more interesing features of StagingTracks is the ability to search for organizations near you, I wanted that to be prominent. By adding a “button” link to the toolbar, it now shows up on every page.

In application.iphone.erb:

<div class="toolbar">
  <h1 id="pageTitle"></h1>
  
  <%= link_to "Search", search_path, :class => 'button' %>
</div>

Dynamically Growing Lists (a.k.a pagination)

Since I already had paging in place for the blog posts, I wanted to be able to reuse that, if possible. Turns out that was pretty easy to add as well. I needed to separate the post_items into a separate partial so that I could return the next page of <li>'s to replace the “More news…” link (notice the target for the “More news…” link is “_replace”).

In posts/index.iphone.erb

<ul title="News" selected="true">
  <%= render :partial => 'post_items', :locals => {:posts => @posts} %>
</ul>

In posts/_post_items.iphone.erb

<% posts.each do |post| %>
  <li><%= link_to post.title, post %></li>
<% end %>
<%= content_tag :li, link_to("More news...", posts_path(:page => posts.next_page), :target => "_replace") if posts.next_page %>

A quick change in the posts_controller.rb from:

def index
  @posts = Post.latest.published.paginate :page => page, :order => 'published_at desc'
end

to:

UPDATE:: Same change to the ordering of format.html and format.iphone.

def index
  @posts = Post.latest.published.paginate :page => page, :order => 'published_at desc'
  respond_to do |format|
    format.html
    format.iphone do
      if page == 1
          render :layout => false
        else
          render :layout => false, :partial => "post_items", :locals => {:posts => @posts}
      end
    end
  end
end

Styling Form Select Inputs

My search form has a dropdown for choosing the country that you want to search. By default, this did not look very nice. Since it didn’t need a label, I just left it out in the form and added some additional CSS.

In search/index.iphone.erb

<% form_tag(search_path, :class => 'panel', :title => 'Search')  do %>
  <h2>Find Local Shops, Clubs, and Shows</h2>

  <%= content_tag :p, flash[:error], :class => 'error' if flash[:error] %>

  <fieldset>
    <div class="row">
      <%= country_select :search, :country, ['United States', 'Canada'], {} %>
    </div>  

    <div class="row">
      <label for='search_city'>City</label>
      <input type="text" value="" name="search[city]" id="search_city"/>
    </div>

    <div class="row">
      <label for='search_state'>State</label>
      <input type="text" value="" name="search[state]" id="search_state"/>
    </div>
  </fieldset>
  <%= link_to "Submit", "#", :class => 'whiteButton', :type => "submit" %>
<% end %>

And in my extra iphone.css (anything else that I needed to add to iui.css)

.row > select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    border: none;
    padding: 0;
    height: 42px;
    background: none;
    font-size: 16px;
    width: 100%;
}

.error {
  font-weight: bold;
  color: #8a1f11;
  margin-left: 14px;
}

Conclusion

All told, I probably spent less than eight hours over a couple of nights adding a simple iPhone interface to my existing application. I still want to look in to modifying the CSS more to have it look more like the regular StagingTracks website, but that can come later. This was a fun little experiment.

Hopefully this gives a little insight into what I do.

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

First, about the monitor and setup. It is a great monitor, nice and bright! My friend, Matt, encouraged me to spend a little more and get the Ultrasharp. I am glad I did (although I didn’t pay much more, see below). I REALLY love the portrait mode. In the picture I have Mailplane, Pyro, Skype, and Twitterific all stacked nicely. And it doesn’t feel crowded. I use VirtueDesktops and keep all my work on the another virtual desktop. On the “work” desktop I put Textmate and can see lots of lines of code. Plus I still have room to keep open console windows at the bottom to see autotest results, server logs, etc. My browser can stay open on the laptop for easy inspection of whatever I am developing.

Now about BINalert.com. (Disclosure: I built this site with a friend and I do make money with it.) BINalert lets you setup up alerts so you can get notifications on new Buy-It-Now auctions on eBay. There are lots of items listed with Buy-It-Now prices that are REALLY good deals. For example, this monitor. I setup an alert to watch for Dell 2007WFP Ultrasharp monitors with a Buy-It-Now price of $250 or less. As soon as this one was listed, I got an email letting me know. I went and checked it out (it was used but in great condition), and a week later I have my new monitor (or at least it’s new to me). And I saved about $150 in the process.

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.

After my last post, I thought I would share what I use for developing on Ubuntu.

Editor

I have always been a hands-on kinda guy, so I don’t use any of the fancy IDEs. Right now, I am using SciTE for two reasons. It feels lightweight and it is available for Linux and Windows. Since my laptop does not have a lot of memory, a lightweight editor is a must. I tried Eclipse, but it chewed up all my memory and slowed things to a crawl. So SciTE with some additional plugins (and information on getting them going) powers the development at McKinney Station.

Ruby and Rails

I am using the latest Ruby and Rails for all new development. For testing I am using RSpec, which seems a lot more intuitive to me. Other gems I have installed include:

• FasterCSV – parsing CSV files
• starfish – simple Ruby Map/Reduce
• mongrel – lightweight Ruby web server
• hpricot – Ruby HTML parser

Database

I love starting all of my development projects with SQLite. It is so easy to get up and running. As the project matures, I am able to quickly switch development over to a MySQL database with a change in the application’s database configuration and a quick rake db:migrate.

Version Control

All source code versioning is done with Subversion. With this quick little script, I can get a Rails project committed and started in minutes.

Conclusion

I am always looking for ways to speed up my development process, but so far this is working for me. And it is very enjoyable.

Last week, my laptop started acting funny. Not that unusual since I run Ubuntu on my laptop. It’s not one of the super computers all my buddies have, but it does let me get the job done.

So last week when things finally got to a tipping point, I decided to try an upgrade to the latest Ubuntu release. Needless to say, it didn’t go as planned. With a planned trip coming up, I needed to get things back in order quickly. I made sure I had a current backup of my /home directory, and did a brand new install. Things went mostly well (remember this is a laptop) and within a day I was back up and going.

For my own reference later, these are the things I had to do to get Ubuntu working on my Averatec.

• Add boot setting to enable wired network.
• Download Broadcom 43xx drivers for wireless network.
• Use ndiswrapper and blacklist broadcom drivers (see last post by codyjack)
• Unlock the keyring automatically when logging in to quickly connect to wireless networks.
• Restore backup
• Get back to work