<![CDATA[Who Needs Actions]]> 2012-05-09T08:51:53+01:00 http://mrjamesriley.github.com/ Octopress <![CDATA[Simple Google Maps Example with Coffeescript and jQuery]]> 2012-05-08T07:51:00+01:00 http://mrjamesriley.github.com/blog/2012/05/08/simple-maps-example-with-coffeescript-and-jquery I’m working with the latest version of the Google Maps API (V3) and the demo in the developers guide guide screams out for a dose of Coffeescript and jQuery. The three Javascript requirements here are:

  1. Include the Google Maps API
  2. Define the initialize() function
  3. Call the initialize() function onload (one the page has finished loading)

Here’s a before and after for the Coffeescript/jQuery makeover:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  // Javascript
  function initialize() {
    var myOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

  // Coffeescript
  initialize = ->
    myOptions =
      center: new google.maps.LatLng -34.397, 150.644
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    map = new google.maps.Map $('#map_canvas')[0], myOptions

Variables scoped locally by default, curly braces made redundant, semi-colons unecessary, readability increased and number of lines reduced. Of course, this only scratches the surface of what Coffeescript offers. Notice also the use of jQuery to select the ‘map_canvas’ div, remembering that the selector returns an array and we want the actual DOM element.

Body Onload

Adding an onload to the body tag can be a pain, especially if you want it conditional, it’s likely you’re layout is shared amongst other pages. Thankfully we can take advantage of how jQuery can run once the page has loaded, moving this out of the body tag and into your external Javascript file like so:

1
2
3
4
5
6

  // this
  <body onload="initialize()">

  // becomes
  $ ->
    initialize()

Including the Maps API

As I mentioned it above, it’d be rude not to elaborate - here’s a quick Rails example of how it can be done. We don’t want to simply place a javascript_include_tag in our layout if the only want the map on a single page. A clean method here is to pass the javascript include in a call to content_for which is then rendered in your layout with use of the yield method. Hopefully this makes it clear:

1
2
3
4
5
6

  # application layout
  yield :js

  # the view
  - content_for :js do
    = javascript_include_tag 'http://maps.googleapis.com/maps/api/js?key=API_KEY=false'

The :js symbol can be anything, it’s simply an identifier but it helps to keep it somewhat generic so the yield can be used by other views.

]]> <![CDATA[Easy toggle fade with fadeToggle()]]> 2012-05-03T17:52:00+01:00 http://mrjamesriley.github.com/blog/2012/05/03/easy-toggle-fade-with-fadetoggle The jQuery toggle() function is great for easily switching an element to hidden or not. Today I was working on something where I wanted to toggle with a fade out, and I stumbled across the fadeToggle() function. Simple and easy to use, typical of jQuery.

]]> <![CDATA[Pow Server for Rails Applications]]> 2012-05-02T19:44:00+01:00 http://mrjamesriley.github.com/blog/2012/05/02/pow-server-for-rails-applications Many Rails developers have many apps and think nothing of switching between them as necessary with the trusty rails server command. Each morning cosists of the familiar routine: open terminal, start auto-running tests, and boot the dev server. The Pow server makes this final step unecessary.

Pow is a super simple to set-up solution for serving Rails apps on your dev machine. By simple, we’re talking a single command, and by Rails, we’re talking Rack apps which extends to any Rack solution you muster up. The Pow Screencast will get you up to speed in no time. Watch the video, symlink your Rack apps and hit {folder}.dev in your browser, where {folder} is the name of the newly created symlink that should be within ~/.pow/ by default.

Tip: As mentioned above, by default Pow is set up to use .dev, which Google Chrome doesn’t recognise and will ‘helpfully’ treat it as a search query. The solution here? End the call with a forward slash / e.g hamster.dev/. Finally, a solution for using debugger with a Rails app served through Pow can be found here.

]]> <![CDATA[Ruby Koans Scoring Project]]> 2012-05-01T17:05:00+01:00 http://mrjamesriley.github.com/blog/2012/05/01/ruby-koans-scoring-project Ruby Koans has sat on my todo list for almost as long as I’ve been a Ruby developer and this week I’ve finally taken it upon myself to tackle it. Expectedly, there’s little new to be expected for anyone who has served their time as a developer, but there’s plenty of helpful tricks and Ruby intricacies to be reminded of. I’ve enjoyed looking at how others have tackled the problem, so assuming you’ve already given the question a good attempt, here’s my solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

def score(dice)
  score = 0

  1.upto(6).each do |num|
    amount = dice.count(num)
    if amount >= 3
      score += num == 1 ? 1000 : num * 100
      amount -= 3
    end

    score += 100 * amount if num == 1
    score += 50 * amount if num == 5
  end

  score
end
]]> <![CDATA[Settle for excellence]]> 2012-04-30T17:48:00+01:00 http://mrjamesriley.github.com/blog/2012/04/30/settle-for-excellence Today was spent away from my desk, but I was reminded of a great quote by George S. Patton, an American officer during World War 2. Now, I can’t vouch for his programming chops but the quote very much applies to web projects:

“A good plan violently executed today is better than the perfect plan tomorrow.”

Start now.

]]> <![CDATA[Haml helpers Succeed and Preceed]]> 2012-04-27T16:59:00+01:00 http://mrjamesriley.github.com/blog/2012/04/27/haml-helpers-succeed-and-preceed With Haml, placing a full-stop or comma immediately after a link, for example, can be confusing. Sure, we have the whitespace removal functionaliy removal that gives us the ability to place < or > to remove the space before before and after a tag. The issue is, it’s ugly, unclear and I’m come across instances where it simply doesn’t do as advertised.

The haml helpers page helpfully offers the succeed and preceed helpers that can be used as follows:

1
2
3

= succeed '.' do
  %a{ href: 'example.com' } Example
# => <a href="example.com">Example</a>.

If it isn’t clear, the succeed helper takes a block which it’ll evaluate and place the passed string directly after, without white space. In this case, a full-stop is placed directly after the generated link. preceed works the same, but places the given string before the output.

Writing out my own example was motivated purely by my strong preference for the Ruby 1.9 hash syntax. As far as programming tidbits go, this is a good candidate. Small and tasty. Till Monday!

]]> <![CDATA[Geolocation for Amazon Link Localising]]> 2012-04-26T17:57:00+01:00 http://mrjamesriley.github.com/blog/2012/04/26/geolocation-for-amazon-link-localising This post starts a 30 days experiment. I’m not alone in starting a blog with every intention of keeping consistent, only to find weeks fly past without so much as a grunt. So for 30 days, this blog takes on a new format: each day I will end my ‘working day’ with something I learnt that day. However small, however insignificant, someone somewhere will stumble where I fell or ponder thoughts I’ve processed.

A purpose of today’s post is to make you aware of FreeGeoIP, a solution for those wanting to look up a visitors country by IP. In my case, I’ve started a site where I hope to teach portuguese and wanted a way to link to a mentioned book to the appropriate Amazon website.

The FreeGEOIP websites offers a simple web service that receives your chosen format (csv, xml or json) and an ipaddress, quickly hitting you back with a bunch of location data. The only downside here, is that the service is limited to 1000 hits a day, so if you have a large site, you could consider setting up a local instance yourself as the project is open source. Using Rails 3, and the great HTTParty gem, which makes consuming web services a walk in the park, using the service couldn’t be simpler:

1
2
3
4

ip_address = request.remote_ip
res = HTTParty.get("http://freegeoip.net/json/#{ip_address}")
JSON.parse(res.body)
# => { 'country_name' => 'United Kingdom', 'country_code' => 'GB' ... }

The solution I considered was placing a method in the ApplicationController, with a before_filter set to perform an IP lookup and save the country code to a cookie, unless such a cookie for the visitor already existed. From here, I was to have a helper that would show a default Amazon link unless a matching country cookie was set. The helper would take an Amazon product ID and be used as the second arguement of a call to a link_to call:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  # If country cookie is set, show relevant Amazon link or default to UK
  def amazon_link(product)
    countries = {
      'GB'  => { tld: 'co.uk', id: '{UK_ASSOCIATES_ID}' },
      'US' =>  { tld: 'com',   id: '{US_ASSOCIATES_ID}' }
    }

    if cookies['country'] && countries.has_key?(cookies['country'])
      amazon = countries[cookies['country']]
    else
      amazon = countries['GB']
    end

    "http://www.amazon.#{amazon[:tld]}/#{product}/?tag=#{amazon[:id]}"
  end

In the end I scrapped the idea, mainly because I don’t like the overhead of hitting an API for every new user, but also for privacy issues. It’s a topic that’s difficult to find information on, but what is and what isn’t allowed regarding a users IP? And what alternatives are there to obtaining the country of a site visitor?

Well, there’s HTML5 Geolocation, but this requires rightfully requires permission and could be considered overkill for this simple scenario. There are also services like Cloudfare, that stand between your domain registar and your web application, passing along a header with country code, among many other benefits.

Ultimately, I feel it’s a flaw with Amazon’s Associates program - not only do you have to sign up for each of the numerous websites indepedently, an automatic redirection system could be offered that would greatly simplify the process for publishers, and encourage it’s use, thus increasing their income. What gives?

Well that was more wordy than I expected, perhaps that’s why the post rate drops off everytime. Hah, check back for more tomorrow! Have you a good solution for simple geo-location? Hit me up on Twitter

]]> <![CDATA[Easy HTML Table Pagination and Sorting with DataTables]]> 2011-12-23T23:53:00+00:00 http://mrjamesriley.github.com/blog/2011/12/23/easy-jquery-table-pagination DataTables is a powerful jQuery plugin that easily turns a standard HTML table into one that is sortable, paginatable, searchable and highly customisable. Having used the plugin on multiple occasions over the past few months, I deem it a huge time saver and if it’s interactive tables you’re after – I wouldn’t look elsewhere. The basic example usage makes its immediate power clear and there’s a wealth of options, an API and plenty of examples to satisfy most cases. Here’s a few tips on how to handle a few of the requirements I commonly had. I love and use CoffeeScript but for your convenience, the examples below make use of the compiled Javascript, simplified in places.

Custom pagination controls and info

Via the sDom property on DataTable initialisation, it’s possible to customise the positioning of the pagination information and controls. Aside from finding the resulting code hard to read, I also wanted more flexibility. First up, the pagination info (eg. Showing 1-10 of 25). Upon DataTables creation, you can pass in a function for the ‘fnInfoCallback’ which is triggered when the related status changes, as a result of a page change or filter being applied. Here I simply form a string using the available parameters then update the text for the element with the id ‘#paginationInfo’ on the page.

1
2
3
4
5

"fnInfoCallback": function(oSettings, iStart, iEnd, iMax, iTotal, sPre) {
  info = "Showing " + iStart + "-" + iEnd + " of " + iTotal;
  $('#paginationInfo).text(info);
  return info;
}

Next I wanted the freedom to position my ‘next’ and ‘previous’ pagination buttons anywhere, having assigned the DataTable initialisation to a variable (eg. userList = $('table#userList').dataTables()), making use of the public API, specifically the fnPageChange function of the plugin makes this easy…

1
2
3
4
5
6

$('#nextPage').click(function() {
  return userList.fnPageChange('next');
});
$('#prevPage').click(function() {
  return userList.fnPageChange('previous');
});

Multi filters and being able to clear all

The DataTables API makes filtering pretty simple with use of the fnFilter function, passing a string to filter on and optionally, a specific column to limit filtering to. With multiple columns having filters applied, the easy way to clear all filters is to simply call fnFilter('') - with an empty string and no column int arguement.

For the search field (which filters the table based on the entered text), I’m using the search input, part of HTML5 <input id="players-search" placeholder="Search by name..." type="search"> hooked up to filter the table on keyup. If you’re using Webkit, you’ll see the search box includes a button on the right to clear the contents of the text field. To have the table filter cleared when clicking the ‘X’: set a ‘click’ event on the search input which then takes its value and filters accordingly. In this case, the value will now be blank after having clicked the ‘X’ which effectively clears filtering on the table.

Using images according to the row data

It’s not long untill you’ll find yourself wanting to add buttons or images to the table, whether it be a users avatar, or perhaps a ‘Buy’ button for each product in the table. The fnRowCallback allows you to modify each row on draw and it’s here you have access to the data for each column and able to modify the output. Say you have a table of forum users with the following data, what if you wanted to show an image as a label for those who are admins?

1
2
3
4
5
6
7
8
9
10

<tr>
  <td>John</td>
  <td>Admin</td>
  <td>London</td>
</tr>
<tr>
  <td>Paul</td>
  <td>Moderator</td>
  <td>New York</td>
</tr>

When creating the DataTable, use the ‘aoColumns’ table (or the aoColumnDefs alternative) to give classes to the columns to allow us to easily target each:

1
2
3
4
5

'aoColumns': [
  { "sClass": "name", },
  { "sClass": "role" },
  { "sClass": "city" }
]

The nRow parameter of the fnRowCallback function refers to the HTML row currently being drawn. In this case, if the column text happens to be ‘admin’, replace the cells content with the jQuery generated img element:

1
2
3
4
5
6
7
8

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
  role = $('.role', nRow).text();
  if (role == 'admin') {
    adminLabel = $('<img/>', { "class": "admin-icon" })
    $('.role', nRow).html(adminLabel);
  }
  return nRow;
}

If you wanted to be able to filter on this column too, one solution is to use the ‘text-indent’ property to visually hide text, leaving the image all that’s visible while still giving DataTables something to work with.

So the purpose of this post was to bring DataTables to your attention and to demonstrate how I’ve approached implementing the functionality I desired. For many of your uses, the plugin will be plug and play – and you no longer have an excuse not to provide these useful table interaction controls for your users.

]]> <![CDATA[Solution for osx lions wi-fi problems]]> 2011-08-20T17:23:00+01:00 http://mrjamesriley.github.com/blog/2011/08/20/solution-for-osx-lions-wi-fi-problems My story is like many others out there: Having purchased a new Mac in the last few weeks, arriving pre-installed with Lion, I had a few days of bliss before the problems began. Failing to connect to my wireless router, incredibly slow speeds when it did and unresponsive the majority of the time. Steve Jobs had ripped my heart out using nothing but a spoon.

I tried clearing various ram caches, recreating the wireless connection in network preferences, setting custom DNS, manual IP address, rebooting the router, performing dance rituals to the wireless dities etc and I was beginning to lose hope. Mention of an upcoming 10.7.1 update had me hopeful, but upon installation I had a few minutes of joy before the problems returned with all it’s troublesome tendencies. So what did work for me? Changing my wireless routers channel, specifically to channel 4 (avoid anything over 11 for the BT HomeHub router).

Now many have reported various fixes having worked but I’ve felt compelled to post this as not only have I got wireless working flawlessly on the Lion installed Mac Mini, but I’ve noticed a huge stability and performance increase. So regardless of whether you continue to have issues or not, switching up the wireless channel may work wizardry for you. Everything is sharper, more responsive and as a broadband speed test has shown me, more consistent, with the speed chart not varying over the course of the test. If you have BT Broadband, and in particular, you’re using an older HomeHub, give this a go and you may be surprised. The automatic channel selection works incorrectly in versions of the HomeHub prior to the latest version 3 from what I’ve read. Now, go forth and get back on that information super highway…

]]> <![CDATA[Nginx Error: no such file to load -- rack/commonlogger]]> 2011-03-20T06:07:00+00:00 http://mrjamesriley.github.com/blog/2011/03/20/nginx-error-no-such-file-to-load-rack-slash-commonlogger Despite a lack of experience with server administration, I jumped in the deep end this week by grabbing a VPS from slicehost. With it, you start from scratch, with not even the firewall iptables setup to allow port 80. You’re given root access to ssh and sent on your way, which is one level above being given a screw driver and then directed to a pile of hardware components. But with frustration and confusion comes learning and knowledge… got me feeling pretty powerful over here.

The aim was to set up a Sinatra app, running with Nginx and Passenger. The installation of all was easy enough, up till the final step of pointing Nginx to my Sinatra app and seeing the following error: Exception LoadError in application (no such file to load -- rack/commonlogger)

Searches online suggest the issue could be down to file permissions, a poorly configured config.ru, or incorrect file paths. My config.ru correctly required rubygems and Sinatra (which depends on rack and thus includes it) and I tried everything from switching ruby versions to creating new users/groups. Frustratingly, the issue was none of these, and the error never helped lead me to the solution. Passenger is smart enough to know if your app is a rack app by the existence of config.ru in the folder above the ‘public’ folder specified in the Nginx config settings. It’s almost smart enough to call Bundler.setup() if you happen to have a Gemfile.

I had a Gemfile in my app, yet had removed Bundler and so wasn’t including the gem anywhere. The solution? remove the Gemfile.

This post does more to show my lack of passenger skills than it does for my community giving efforts but hopefully this’ll help someone even if that person is me, stumbling across this post in 6 months time.

]]> <![CDATA[Mac hanging at grey screen after deleting lib files]]> 2011-01-23T06:29:00+00:00 http://mrjamesriley.github.com/blog/2011/01/23/mac-hanging-at-grey-screen-after-deleting-lib-files Is your Mac failing to boot past the grey screen, thanks to deleting some important system files? The example below is specific, but the general method to resolve should be the same in many cases: boot into single user mode and re-install the missing program.

Having switched to a Mac after years of being solely a Windows user (and you think you had a tough time growing up?!), every day is very much a learning curve. Today was no different, while trying to get libxml2 working nicely with the Nokogiri rubygem, I installed a newer version of the toolkit to a different location. My Mac stubbornly insisted on using the current 2.6.16 version so I bravely strolled into terminal and ran: sudo rm /usr/lib/libxml*.

It turns out libxml2 is pretty fundamental to Mac and without it I was stuck. Helpfully, I had no access to the Leopard installer and the CD drive on this MacBook happens to be broken. Still, equiped with a bit of time, a Windows PC nearby and a USB stick, here’s the steps I took:

  1. Found out the exact software version I needed. As I am using version 10.5.8 of OSX10, this webpage told me it’s libxml2 version 2.6.16 that’s built in, so this was what I went on the hunt for.
  2. Grabbed the source code from the directory of old libxml2 versions versions, before unpacking and copying the libxml2-2.6.16 to the USB stick.
  3. Booted the Mac in Single user mode, by holding Command+S from the second you hit the power button. This sends you to a terminal prompt from where the fun begins.
  4. Mounting the USB drive had to be done before making use of the contents. This was done by simply following the steps detailed in this blog article. This left me with my USB contents available within/Volumes/usb.

From here, it was a simple case of installing the software with use of the standard linux program installation steps:

1
2
3

./configure  
make  
make install

Once complete, a reboot finally took me past the grey loading screen and back to where I was. Once the overwhelming emotion of being reunited with a loved one passed, I was back to developing. Lesson learnt: don’t be an idiot. Never sticks with me.

]]> <![CDATA[Capistrano ignoring ssh public key]]> 2010-11-30T05:42:00+00:00 http://mrjamesriley.github.com/blog/2010/11/30/capistrano-ignoring-ssh-public-key An issue that had me stumbled a while back and one of which I was reminded of this morning: the initially frustrating issue of capistrano repeatedly asking for my server ssh password. Now connecting to the deployment server via keyless ssh works without fail, the deploy config file seems fine and you can connect to your source code server via keyless ssh – so what gives?

A key aspect to remember is that the purpose of capistrano is to run commands on your remote deployment server as if you were running them locally on the server itself. So when we reach the task of grabbing the code from your chosen code repository (cloning from git for example), the command is being called from the deployment server and so it’s this connection that requires the ssh connection set up is order to avoid passwords.

The solution here is to set up the ssh key between your deployment server and your source code repository server to authorise the connection, and this is done in the usual way: running ssh-keygen on the deployment server, then copying the generated .ssh/id_rsa.pub into a new line of your source code servers .ssh/authorized_keys2 file. The details here may vary depending on your setup.

Done, no more pestering – capistrano is supposed to improve productivity after all right?

]]> <![CDATA[Thinking Sphinx on Rails setup issues]]> 2010-11-15T06:02:00+00:00 http://mrjamesriley.github.com/blog/2010/11/15/thinking-sphinx-on-rails-setup-issues Sphinx is a full-text search server, able to index data from sources such as a database and make up for what traditional databases like MySQL lack. With use of the Thinking Sphinx gem, setup and usage with Ruby on Rails is real easy – yet there is a hurdle or two I stumbled upon:

1) Searchd daemon cannot be found

This error occurred when attempting to deploy on production, and research on the internet yielded little in the way of solutions. The executable was present and included in the path, with the issue being down to running the thinking_sphinx:index rake task without specifying the rails environment.

Now this is not documented anywhere so there could be something I’ve missed during the configuration. The call:

1

  rake thinking_sphinx :index RAILS_ENV=production

will do as expected, creating the configuration file based on the ‘define_index’ block in your Rails models and indexing as defined. A similar problem has caught many out before, such as leaving out the RAILS_ENV when performing a db:migrate. A more helpful error message from Thinking Sphinx would certainly be helpful.

2) Partial word searching

The Thinking Sphinx documentation mentions ‘Automatic Wildcards’ within its searching page yet this fails to work for partial words. Say I have an article titled ‘never enough’, the document would be retrieved if the search was for ‘never’, but not for simply ‘nev’. In my case, I’m using Thinking Sphinx during an auto complete search and so would require such functionality.

The solution is present within the ‘Advanced Sphinx Configuration’ page and all that’s required is to include the following line within your sphinx.yml in the config directory of your Rails application:

1

min_prefix_len: 3

where 3 is the minimum number of letters till a search takes place. Note that this line can also be used within individual ‘define_index’ blocks if you do not want it to apply globally to all indexes within the same environment.

]]> <![CDATA[jQuery ajax with Rails respond_to format.js]]> 2010-10-24T08:50:00+01:00 http://mrjamesriley.github.com/blog/2010/10/24/jquery-ajax-with-rails-respond-to-format-dot-js This year has been quite a shift for me in every aspect of my life – especially with regard to web development and this blog will now reflect that. For most part, my full time job and side projects use Ruby on Rails and related technologies such as jQuery, mysql, memcache, redis and other web development aspects such as xhtml, css, usability and design. Future posts will announce projects of my own, document my discoveries and occasionally broadcast my opinions on all that is Web Development. Follow me. Let’s jump straight in:

There’s many resources out there that detail how to use jQuery with Ruby on Rails, specially how to handle the returning of data and the setting of javascript acceptance headers. Ryan Bates for example has a Railscast on the topic - yet in my case, I was not wanting to serialize and submit a form. If you simply want to post data to the server and insert the returned generated html into your page – simply use the jQuery.ajax with dataType set to script. From here, you can simply render the partial within the controllers format.js block and all should work without the need for any prior jQuery setup.

To demonstrate, here’s two code snippets copied straight from an application of mine:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  # the jquery
  $.ajax({
    url: '/polls/' + poll_id + '/vote?option_id=' + option_id,
    dataType: 'script',
    type: 'POST',
    success: function(data) { $('#poll').html(data); }
  });

  # the controller action
  respond_to do |format|
    format.html { redirect_to '/' }
    format.js {
      render :partial => 'widget', :locals => { :poll => @poll }
    }
  end

Till next time!

]]>