HTTP Accept headers for PhoneGap and Rails

Building a PhoneGap mobile application with a Rails backend? You should know about HTTP Accept headers and Rails. The important thing to understand is that best practice in Rails is NOT to use the Accept headers. There is a nice writeup here that explains why in glorious detail. Summary: browser implementation of HTTP Accept headers is broken. Rails best practice is to set the :format parameter in the request. However, if you like the accept headers they are supported but the rules around what is a valid accept header in rails can be tricky. For example: if your accept header matches the following regex:

BROWSER_LIKE_ACCEPTS = /,\s*\*\/\*|\*\/\*\s*,/

Then rails throws it away and defaults to text/html mime type. I know, right? We had a problem with backbone and JQuery. Our application was sending the following accept headers:

application/json, text/javascript, */*; q=0.01

Looking at that you would expect that because we ask for a json response we should get one. Rails returns text/html in this case because our accept headers looks like the kind of thing the browser would send along, thus broken and unreliable. You might be thinking: hey, every other rails app I've built hasn't had this problem. Well, the reason most people don't have this problem is that rails "fixes" the default jquery behavior in the rails jquery-ujs gem. They set a ajaxSetup beforeSend callback in JQuery that puts the */* at the beginning of the header, which is what the magic rails regex wants to see. Here is how I fixed my accept header in JQuery.

$(function() {
  $.ajaxSetup({
    'beforeSend': function(xhr) {
    xhr.setRequestHeader("accept", "appplication/json");
    }
  });
});

Creating a new Rails app Segmentation Fault on Ruby 1.9.3

Ran across this one today. I was trying to create a new rails app on Ruby 1.9.3.

/Users/oldjosh/.rvm/rubies/ruby-1.9.3-p0/lib/ruby/1.9.1/net/http.rb:799: [BUG] Segmentation fault
ruby 1.9.3p0 (2011-10-30 revision 33570) [x86_64-darwin11.2.0]

It turns out that if you don't compile 1.9.3 against openSSL from macports or some other non-apple source, you end up with a ruby that segfaults when it tries to do ssl. Thus bundler fails to fetch gems when you create a rails app. My fix was to reinstall 1.9.3 and specify where my macports openssl installation was.

$ rvm reinstall 1.9.3 --with-openssl-dir=/opt/local

RVM has another option to get around this if you don't have macports or some other alternative. See their docs for more info. And see the bug that helped me solve my problem.

Vimeo's White Screen of Death in IE

Recently I noticed my embedded Vimeo players were all broken in IE. I was getting just a blank white screen. It turns out Vimeo requires you to have Flash version >= 10. That is fine, but unfortunately their player doesn't fail gracefully if you have an older flash version. My VM had Flash 6. It is simple to check for a particular version of flash in JS. That allows us to fail gracefully on behalf of Vimeo. Here is a snippet that can check if the client browser is good enough for vimeo.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
  function goodEnufForVimeo(){
    var playerVersion = swfobject.getFlashPlayerVersion();
    return (playerVersion.major >= 10); 
  }
</script>

Tips for First Time Braintree Integrators

I just finished building CollegeSet. A web application for helping students pay for college (It's nonprofit. It's fun. go make a donation!). We use Braintree Payments for our gateway. I had a great experience building against their API and I'll definitely use them again! Here are a few tips to anyone else who is just starting to integrate with Braintree.

Read the examples

Their github profile has sample applications in many different languages. Don't start yours without spending some serious time with theirs!

TDD it

This part of your application is too important not to test. Unfortunately, it is one of the more difficult parts to test. I found that a good mocking library was enough to let me test most of the controller logic around my payments. I fell short of doing end to end testing like this person describes.

Give yourself time

It took us 3 weeks to get our application approved for use with Braintree. (The holdup wasn't Braintree.) They audit your site and require the terms of service, so we ended up waiting for lawyers and clients to hash out those details before we could get approval. You do get instant access to their sandbox though, which means you can do development in parallel with the approval process. Don't wait until the last minute!

Room for Improvement

Overall Braintree was the best of all the solutions I researched. Their "transparent redirect" helps you minimize your PCI compliance exposure while maintaining a great user experience (no IFrame), and their API's are great. Of course nobody's perfect... Here is my wishlist for three things that I would like to see from Braintree in the future.

• A braintree test-proxy gem for easier integration testing.


• Sample controller and integration tests in the sample applications.


• A developer console in the sandbox for examining requests and responses.

Edit: ThoughtBot has created Fake Braintree as a way to do braintree integration testing. I'm going to give it a shot.

Renaming Attributes the Sneaky Way

The names of your models and their attributes are profoundly important to a Rails application. They become the namesakes to everything else: controllers, views, routes, tests. Users of your application are going to see these names in urls, form fields and validation messages. A few minutes early on can save you hours of find/replace, file renames and broken tests down the road. Sometimes you don't have the luxury of a rename. The shortcut is localization! Let's say your application has a User model with an attribute 'sex'. Those 'Sex can't be blank' validation messages are causing your users existential crises. Let's rename sex to gender. Edit en.yml and add the following:

en:
  activerecord:
    attributes:
      user:
        sex: Gender

All your validation and form fields are magically renamed. Voila!

Publishing in the Chrome Web Store

My sourdough hydration calculator is now freely available via Google's Chrome Web Store. The app is just HTML and JS so converting it to be a Chrome app is as simple as adding a manifest file and zipping everything up! No real work involved. It felt pretty cool to throw my app out there and to see it in the search results immediately. It is the only app out there for makers of pain au levain. #FirstToMarket The Chrome web store is great! I love that if you buy an app you can cancel your purchase within the first 30 minutes. Apple should adopt that consumer friendly policy instead of their lemmings approach. It keeps you from getting scammed by vendors of broken, half-assed apps. I'd like them to develop their Developer dashboard a bit more. The dual purpose "Publish" link is confusing. It took me an hour to figure out I needed to click publish (the go live button) in order to make it available to test users. And as with everything Google if their documentation doesn't have it you are stuck begging in a Google group for answers. No such thing as real live customer support at the G.

Dynamic Tweet Button Text and Counting Tweets

I deployed a new version of Hydration = which adds a little tweet button to the footer. One thing I wanted to do was make the text of the tweet different depending on what the user has done on the site. Since the site is just javascript and one static page I wanted to find a simple way to update the value that twitter sends for the tweet text. Unfortunately Twitter uses an iframe for this. The trick is to realize that the src attribute of the iframe contains the tweet message. So you can just update that with jQuery. That works pretty well. There is a slight annoyance because changing the src of the iframe causes the iframe to reload.

On a totally separate note. Another thing I bumped up against was getting the tweet count to increment. Beware URL's with a trailing slash. Twitter must strip that out of the URL before they use it as a key and so if your data-url attribute has a trailing slash the tweet count doesn't work.