Jordan Elver

It's the little things

2011-07-30T15:56:23+01:00

I've been thinking about the little things that can be changed to make a web page easier to use. Seemingly small changes can add up to have a big impact on the way people will interact with the page.

On one particular site, I have a pretty standard widget used to select the amount of products to show per page. I'm sure you've seen something similar to that of below on many other websites.

The way this is currently implemented, it takes three clicks to complete the intended operation. This could be reduced to two clicks by adding some JavaScript to trigger the page change (and removing the button), but there is a problem with this method: The options at not all visible at once. You have to click to see what the options are.

Rethinking the implementation

I decided to change the way this was implemented, moving to a horizontal list of links.

The advantages of this approach are:

You can see all options at once. Please, don't make me think.
It's only a single click to select an option.
It's better for accessibility because you don't have to fiddle with a dropdown (and who wants to?).

I think this is a fairly good example of how changing small things, perhaps even those that seem inconsequential, can contribute to improving the overall experience of the page, and delight the user.

Rails Footnotes problem

2011-07-24T11:40:23+01:00

I recently had a head-scratching time trying to figure out why code that integrates with a 3rd party payment processor had suddenly stopped working. The code in question simply returns a text only response to the 3rd party, who then read, parse and act on it. Within my Rails controller:

render :text => "Status=OK,Detail=Some details here"

I found the culprit by going through my git log to see what had changed recently. Turns out it was the recent addition of Rails Footnotes causing the problem. Rails Footnotes is an awesome gem that adds various information about your app to the bottom of every page including clickable links to controllers, views and partials. Clicking these links opens the file in your text editor of choice.

Rails Footnotes was appending its debugging HTML (as designed) to my text-only response, breaking the payment processors parsing. After an inspection of the source I noticed that Footnotes are only output if the content type includes "html", such as "text/html".

The fix

In my case the whole controller could (and probably should) be returned as "text/plain". I hooked up a before_filter to add the Content-Type header to the response and that fixed it.

class NotificationController < ApplicationController

  # Set the content type to text/plain so footnotes don't show
  before_filter :set_content_type

  def set_content_type
    headers['Content-Type'] = 'text/plain'
  end
end

For versions of Rails Footnotes greater than 3.7.0 (which is Rails 3 only) you can actually configure if Footnotes are added to the page using an initializer (or similar). Unfortunately, I'm still using Rails 2 on this project so I currently can't take advantage of that.

In conclusion

Rails Footnotes is a must-have, you really should check it out.

Automatically attaching to a tmux session via SSH

2010-11-27T01:48:23+00:00

I've been using tmux as a screen replacement for a while now. I find it easier to use and configure than screen. I tend to leave a tmux session running on servers that I administer so that everything is just as it was when I last connected. It's very handy.

To make this even more convenient, I wanted to be able to automatically attach to a running tmux session when connecting to servers using SSH. The SSH client already comes with the ability to run a command when connecting. It works like this:

ssh <hostname> <command>

Unfortunately, this didn't work when I tried attaching to a tmux session.

ssh <hostname> tmux a
not a terminal

After a bit of Googling, it turns out that you need to supply the -t option to the ssh command. The ssh man page describes the option as such:

-t Force pseudo-tty allocation. This can be used to execute
   arbitrary screen-based programs on a remote machine, 
   which can be very useful, e.g., when implementing menu
   services.

If we do that, we're in business:

ssh <hostname> -t tmux a

To make the command even shorter, I've been adding bash aliases to my ~/.bash_profile for each server I connect to, like so:

alias servername="ssh servername -t tmux a"

Now, I can just type servername and get a SSH connection to servername with tmux automatically attached. Issuing a <ctrl> + b + d will detach the tmux session and disconnect the SSH connection.

Command line magic!

How to upgrade Phusion Passenger for nginx

2009-11-27T16:47:00+00:00

I keep forgetting the procedure to upgrade Passenger and nginx, so thought I’d note them down here in case anyone finds it useful. These instructions assume that:

You already have Phusion Passenger installed and configured for nginx
You’re using Ruby Enterprise Edition

Upgrade

Download the latest nginx source and uncompress to a temporary directory.

   1  cd ~/sources
   2  wget http://sysoev.ru/nginx/nginx-0.7.64.tar.gz
   3  tar xzvf nginx-0.7.64.tar.gz

Install the latest Passenger gem

   1  sudo /opt/ruby-enterprise-1.8.6-20090520/bin/gem install passenger

Run the Passenger installer

   1  sudo /opt/ruby-enterprise-1.8.6-20090520/bin/passenger-install-nginx-module

Follow the onscreen instructions, choose option 2 to use your own sources. Specify the location of the nginx sources when prompted.

If you want to use any other optional nginx modules, enable them when prompted. I want to use the SSL and Status modules, so I enable them like this:

   1  --with-http_ssl_module --with-http_stub_status_module

The full configure line will look something like this:

   1  ./configure --prefix='/opt/nginx' --with-pcre='/tmp/pcre-7.8' --add-module='/opt/ruby-enterprise-1.8.6-20090520/lib/ruby/gems/1.8/gems/passenger-2.2.5/ext/nginx' --with-http_ssl_module --with-http_stub_status_module

After the installer has finished, the new version will be installed in /opt/nginx and the old version will be renamed to nginx.old.

Configure

Update the nginx.conf with the correct paths, you should only need to change the path to the passenger_root directive.

   1  http {
   2      ...
   3      passenger_root /opt/ruby-enterprise-1.8.6-20090520/lib/ruby/gems/1.8/gems/passenger-2.2.5;
   4      ...
   5  }

Restart

I like to do a config file syntax check before I restart nginx, just in case of typos and the like.

   1  sudo /opt/nginx/sbin/nginx -t -c /opt/nginx/conf/nginx.conf

If the check is successful, restart nginx.

   1  sudo /etc/init.d/nginx restart

You should now be running the latest version of Passenger and nginx.

Google Analytics Ecommerce Tracking

2008-08-07T15:46:41+01:00

So you’ve installed Google Analytics, the superb free web analytics software and it’s telling you all sorts of things about your site, most of which you don’t even understand. You’re learning what a Bounce Rate is and realising how powerful this thing really is.

Well, it gets even better. I’ve recently discovered its’ Ecommerce tracking feature. It allows you to capture Ecommerce related statistics alongside your normal web related statistics. Once you have it correctly setup for your site you can see how much money you’ve taken in sales, how many transactions have taken place, how many products have been purchased, and your Ecommerce conversion rate. Very nice.

Make it so

In order to activate Ecommerce tracking, you need to firstly turn on the feature within Google Analytics, and secondly add some extra JavaScript code to your receipt or thanks page.

To turn on the feature, go to the Profile Settings for your site, click Edit (top right) and under E-Commerce Website, select “Yes, an E-Commerce Site”.

Here’s the extra code you need to add to the receipt page straight from Google’s help page.

   1  <script type="text/javascript">
   2  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
   3  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
   4  </script>
   5  
   6  <script type="text/javascript">
   7  var pageTracker = _gat._getTracker("UA-XXXXX-1");
   8  pageTracker._trackPageview();
   9  
  10  pageTracker._addTrans(
  11    "1234",                                     // Order ID
  12    "Mountain View",                            // Affiliation
  13    "11.99",                                    // Total
  14    "1.29",                                     // Tax
  15    "5",                                        // Shipping
  16    "San Jose",                                 // City
  17    "California",                               // State
  18    "USA"                                       // Country
  19  );
  20  
  21  pageTracker._addItem(
  22    "1234",                                     // Order ID
  23    "DD44",                                     // SKU
  24    "T-Shirt",                                  // Product Name
  25    "Green Medium",                             // Category
  26    "11.99",                                    // Price
  27    "1"                                         // Quantity
  28  );
  29  
  30  pageTracker._trackTrans();
  31  </script>

If you’re already using Analytics, the first few lines will be familier to you. They’re just the standard page tracking calls. The bits we’re interested in are the pageTacker._addTrans(), pageTracker._addItem() and pageTracker._trackTrans() methods. You’ll need to fill in the relevant details, and more importantly repeat the _addItem call for each item within the order. The method for doing this will obviously differ depending on your server side choices, but for Rails I’ve got something similar to this.

   1  <% @order.items.each do |item| %>
   2  
   3    pageTracker._addItem(
   4      <%= @order.order_id %>,                     // Order ID
   5      <%= @order.sku %>,                          // SKU
   6      <%= item.product.name %>,                   // Product Name
   7      <%= item.product.category %>,               // Category
   8      <%= item.unit_price %>,                     // Price
   9      <%= item.qauntity %>                        // Quantity
  10    );
  11  
  12  <% end %>

You should now start to get E-Commerce stats showing up under the Ecommerce section of Google Analytics.

References

jQuery Event Delegation

2009-06-03T23:48:00+01:00

Recently, I’ve been working on adding some extra features to a shopping cart page using jQuery. The idea is that you select your country from a dropdown and an AJAX request is performed, which updates a list of radio buttons on the page. If you select one of these radio buttons, it triggers another AJAX request, which updates the postage prices for the given items in the basket.

Each of the radio buttons has an event like this bound to it.

   1  $('#options input').click(function() {
   2    // lookup postage prices via ajax
   3  });

This triggers the AJAX request which looks up the postage prices from the database. It works fine with the default set of radio buttons that are present on the page when it loads. The problem comes when new radio buttons are added to the page via AJAX. When a new radio button is added to the list, it doesn’t automatically have a click event (like the one above) bound to it like the existing items do. The events are not automatically carried across to the new item you’ve added.

We can get around this problem by re-binding the events each time a new radio button is added to the page. But this can be messy and there is a much cleaner way of solving the problem.

Event delegation to the rescue

This is where event delegation comes in. Event delegation takes advantage of the fact that browsers “bubble” events up the DOM when they are triggered on a page. For example, given the HTML below, when clicking the radio button the browser will generate a click event which will “bubble” upwards so that first the <input> element receives the event, followed by the <p>, then the <div>, and so on.

   1  <div id="options">
   2    <p>
   3      <input type="radio" value="1" id="postage_method_1" />
   4    </p>
   5    <p>
   6      <input type="radio" value="2" id="postage_method_2" />
   7    </p>
   8  </div>

We can take advantage of this “event bubbling”. Instead of binding the event to each individual input, we’ll bind it to a parent element instead and let the click events from the inputs bubble up to the parent element. In this case, the div called options.

   1  $('#options').click(function(event) {
   2    if ($(event.target).is('input')){
   3      // do ajax request
   4    });
   5  });

Now, each time we add an additional input to the page, it will automatically respond to the same event as the rest of the inputs.

It’s worth noting that this event will get triggered whenever any element under the #options div is clicked, so inside the event we check that the target of the event was an input element. This will restrict the code inside the event so that it only executes when it’s an input that’s been clicked.

Conclusion

Event delegation greatly improves the readability of the code. It sounds scary, but really isn’t. It also has the added benefit of speeding up the processing of the page because you’re not spending time looping through many DOM elements (which takes time) in order to add your event handlers.

Check out the references below for a much better explanation of how event delegation and binding of event handlers work.

References

Event Delegation versus Event Handling
Event Delegation with jQuery
Event Delegation Made Easy
Learning jQuery – Working with Events, part 1, and part 2

htop - a prettier top

2008-12-31T02:25:00+00:00

You use top right? No? Well, that’s probably because top is not the friendliest program in the world. Yes, it gets the job done, but it could be prettier. As I was using top more and more for monitoring my VPS, I looked for something a bit nicer.

This is where htop comes in. It’s top, but with colours, progress bars, and a process tree view. Much better. Try it, you might like it.

Changing Recent Commits with Git

2008-12-16T20:00:25+00:00

Have you ever committed to your repo and realised you’ve done something a bit silly? I just did that. I moved to a new machine and forgot to setup my .gitconfig with the correct username and email, so when I committed, the commit had the wrong user against it. Not a big problem, but it just looks a bit…well, untidy.

Fear not. Git is all-powerful and allows you to change your mistake even though you’ve already committed it. Thanks to Tekkub on the GitHub Google Group for the nudge in the right direction.

How does I dos it?

Like this.

   1  git reset --soft HEAD^

This will reset your working copy to the state before you committed and remove the commit so you can make changes to your working copy (if needed) and re-commit.

Re-commit the changes.

   1  git commit -m "Changed something"

If you’ve already pushed to GitHub or another external repo, you can re-push, but you’ll need to add --force because we have removed a commit locally and Git doesn’t like that.

   1  git push origin --force

I’m not sure whether this would be a good idea if someone else has cloned your repo, but I’m ok because I am the only person who pushes to this one.

Git is great, but powerful, so be careful. I’m sure it would be easy to completely trash your repo with the wrong series of commands.

Git Patching Flexibility

2008-08-04T15:33:26+01:00

I don’t know about you, but when I’m coding I’ll often need to make a change that’s unrelated to the current feature or bug I am working on. I’ll notice a spelling mistake, a typo, or some other small code change. You don’t want to commit the unrelated change as part of your overall commit because, well, it’s unrelated. It should be its own commit with its own commit message. This will make it much easier to read the commit log and cuts down on confusion. People won’t have to ask “Why did they change that? It has nothing to do with the change”

When I used Subversion, you had to remove the unrelated change, commit, then add it back in and commit again. Maybe there was a nicer way, but I didn’t know it. Git is much nicer.

When you stage a file ready for committing, Git allows you to only stage a certain part or parts of the file, which it calls hunks.

So, run:

   1  git add --patch <filename>

Git will show you a diff of the first difference that it wants to stage and will ask if you’d like to stage the current hunk, like this:

   1  Stage this hunk [y/n/a/d/s/?]?

The options in this example are:

y - stage this hunk
n - do not stage this hunk
a - stage this and all the remaining hunks in the file
d - do not stage this hunk nor any of the remaining hunks in the file
s - split the current hunk into smaller hunks

Choose what you’d like to do with the current hunk. Git will continue to go through the rest of the hunks in the file, asking you what to do with each one.

When you’ve decided which hunks should be staged, commit as normal and only those changes will form part of the commit. You can then add the rest of your changes and commit again.

It’s the flexibility that’s great. It works with you, not against you.

For a much more in depth look at the capabilities of git add --patch, see the following article.

The Thing About Git by Ryan Tomayko

How to generate / request an SSL certificate

2008-07-24T14:28:04+01:00

Generating an SSL certificate can be confusing if you’ve never done it before. Actually, it’s confusing if you have done it before. Hopefully this should remind me how to do it in the future!

PLEASE NOTE: I am no expert on SSL, but this does the job for me.

I recently had to do this after the Debian security vulnerability affected one of my SSL certificates.

I currently get my SSL cerficiates through NameCheap for $10. They are re-sellers of RapidSSL and GeoTrust certificates. Mine is a RapidSSL.

Generate a private key and Certificate Signing Request

We need to generate an OpenSSL keypair and a Certificate Signing Request.

The keypair consists of two cryptographic keys. A public and private. The public key is included with the CSR along with other applicant information such as name, company, etc. The private key is used to sign the CSR request.

A CSR is what you send to your chosen Certificate Authority (CA) to request that they supply you with an SSL certificate. It includes your identifying information and the public key for your server/site.

Generate it like this.

   1  openssl req -new -newkey rsa:1024 -nodes -keyout example.key -out example.csr

You’ll be prompted to enter information such as Common Name, Organisation, Country etc.

It should be fairly straight forward, but your CA will let you know if you’ve done it wrong, I’m sure.

This will create example.key (the private key) and example.csr (the CSR).

Requesting your certificate

This part should be easy. Normally your CA will have a form on their website which allows you to paste in your CSR. This obviously varies from company to company. Once you have given them your CSR, they will first ask you for money, and then generate your CRT file. Yay!

I’m only scratching the surface of SSL here. OpenSSL has a massive amount of options. There is much to learn.

References

More information on OpenSSL commands