In these cases, the trick is to use ontouchstart instead of onclick.

In most programming languages, for example C, pointers are symbolized with an asterisk. JavaScript relies on the developer to know which vars are references and which aren’t. Why is this important? To put it succinctly, it is the difference between a variable being immutable or dynamic.

An example may be in order. Here’s a simple script you can paste into Firebug to see how pointers work.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBrosPointer.push('Zeppo');
console.log(marxBros); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']
console.log(marxBrosPointer); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']

As you can see, marxBros and marxBrosPointer are identical. Anything you do to marxBrosPointer will change marxBros and vice versa. You can think of them like aliases which both reference the same thing.

There is actually no difference now. marxBros is the original and marxBrosPointer is the pointer. But, for all intents and purposes, they are identical. One thing to note is that if you reassign one of them to something else, it does not affect the other.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBros = null;
console.log(marxBrosPointer); //  ["Chico", "Harpo", "Groucho"]

Now let’s look at a case where we are not dealing with pointers. Let’s do the same thing as our first example, but instead of using an array, we’ll use strings. Yes, this makes a big difference.

var marxBros = 'Chico, Harpo, Groucho';
var marxBrosCopy = marxBros;
marxBrosCopy += ', Zeppo';
console.log(marxBros); // 'Chico, Harpo, Groucho'
console.log(marxBrosCopy); // 'Chico, Harpo, Groucho, Zeppo'

When using strings instead of arrays, we find that changes to one do not change the other. Whether you change the original or the copy, they are not linked in the same way arrays and objects are. In the first example, changing either the original or the pointer resulted in changes to both variables. In this case, because strings are immutable in JavaScript, the var keyword copies a string instead of referencing it.

The same is true of numbers:

var numberOfMarxBros = 3;
var numberOfMarxBrosCopy = numberOfMarxBros;
++numberOfMarxBrosCopy;
console.log(numberOfMarxBros); // 3
console.log(numberOfMarxBrosCopy); // 4

Compare this to properties and functions, which use pointers:

// First let's make a cleanHouse function which has an action property
var cleanHouse = function() {
 console.log(arguments.callee.action);
}
cleanHouse.action = 'Doing your dishes...';

// Let's test and make sure it works as expected.
cleanHouse(); // 'Doing your dishes'

// So far so good. Now let's make a pointer to this function.
var actionToTake = cleanHouse;
actionToTake(); // 'Doing your dishes...'

// Now actionToTake is identical to cleanHouse. Any changes to one affect the other.
cleanHouse.action = 'Vacauuming the rug...';
actionToTake(); // 'Vacauuming the rug...'

actionToTake.action = 'Watering the plants...';
cleanHouse(); // 'Watering the plants...';

Here’s an example where the reference is lost and it does not achieve the goal:

var cleanHouse = function() {
    console.log('Doing your dishes...');
}

var actionToTake = cleanHouse;

actionToTake(); // 'Doing your dishes...'

// Off to a good start, but here's where it goes wrong:

cleanHouse = function() {
    console.log('Vacauuming the rug...');
};

// Now the reference has been broken and actionToTake no longer refers to cleanHouse.
// Instead, actionToTake refers to, literally, the anonymous function that cleanHouse previously referred to.

actionToTake(); // 'Doing your dishes...'

// cleanHouse now refers to a new separate function.
cleanHouse(); // 'Vacuuming the rug...'

As you can see, it’s important to know how to use pointers. It will help you decide when you need a copy or something, or when you need a reference to it.

Feel free to post clarifications or other explanations. This topic is certainly important to becoming an advanced JavaScript developer, yet it is not addressed too often. I think we could all benefit from more clarity on the subject, myself included.

I hope this article has helped shine some light on this issue. Happy coding!

If you’re a Rails developer looking to tap into Amazon’s massive warehouse of product data, you’re in luck. Pluit Solutions has released the amazon-ecs gem exactly for this purpose. It’s as easy to install as:

gem install amazon-ecs

If that doesn’t work for you, you can always  download it from GitHub then install it locally. Or you can clone it at this URL: git://github.com/jugend/amazon-ecs.git

It’s pretty straightforward to set up. The first thing you’ll need to do is get an Amazon Web Services account if you don’t already have one. You can sign up for AWS here.

You’ll need to know your developer token to connect to AWS. They recently made it so you need to specify a secret token as well. It would be something like this in your /config/environment.rb file:

# Be sure to restart your server when you modify this file

# Specifies gem version of Rails to use when vendor/rails is not present
RAILS_GEM_VERSION = '2.3.2' unless defined? RAILS_GEM_VERSION

# Bootstrap the Rails environment, frameworks, and default configuration
require File.join(File.dirname(__FILE__), 'boot')

Rails::Initializer.run do |config|
  config.gem "amazon-ecs", :lib => "amazon/ecs"
  config.time_zone = 'UTC'
  config.frameworks -= [ :active_record ]
end

require 'rubygems'
require 'amazon/ecs'
Amazon::Ecs.options = {:aWS_access_key_id => '************************', :aWS_secret_key => '**********************'}

Just replace the asterisks with your actual AWS public and private keys and you’re set!

Say you want to run a search at the /amazon/ controller’s index action. Let’s generate the controller now:

ruby script/generate controller Amazon

Now in the /app/controllers/amazon_controller.rb file you can define the index action like so:

class AmazonController < ApplicationController
  def index
  end
end

This is where we’ll be putting the service call to AWS to get our data back.

The next step is to add in a hard coded search query. You can make this based on user input later, but for now, let’s just search for ‘Ghostbusters’ and see what we get back.

class AmazonController < ApplicationController
  def index
    query = params[:q]
    page = params[:p]
    @results = Amazon::Ecs.item_search('Ghostbusters', :response_group => 'Medium', :search_index => 'DVD', :item_page => page).items
   end
end

To display the data, we’ll need to make a view for it. Let’s create a new file in /views/amazon called index.html.erb.

The view can look like this:

  (
    {
    results:
      [
        <% @results.each_with_index do |result, i| %>
          {
            title: "<%=h result.get('title') %>",
            detailpageurl: "<%=h result.get('detailpageurl') %>",
            imageurl: "<%=h result.get('mediumimage/url') %>",
            largeimageurl: "<%=h result.get('largeimage/url') %>"
          }<% if i != @results.length%>,<% end %>
        <% end %>
      ]
    }
  )

What’s that, you might ask? It’s just simple JSON actually. We get the data back as pure Ruby objects but for Ajax applications it’s much easier to work with as JSON. You can just as easily make it HTML, but I thought you might want to see the data displayed in JSON first.

Fire up the Ruby server with a ruby script/server call and hit up localhost:3000/Amazon in a browser. You should see a JSON response with a bunch of data pertaining to our query, namely, the movie Ghostbusters.

If you were to display this data as images and links on a page, you could do something like this:

<% @results.each_with_index do |result, i| %>
	<%= content_tag :li, link_to(image_tag(result.get('mediumimage/url'), {:alt => result.get('title')}), result.get('detailpageurl')) %>
<% end %>

If you change the view to be HTML it should render all of the images inside of li elements in the page. The thing is, it’s still always displaying Ghostbusters data. Now we can make it pull in from a query string so it dynamically displays data instead:

class AmazonController < ApplicationController
  def index
    query = params[:q]
    @results = Amazon::Ecs.item_search(query, :response_group => 'Medium', :search_index => 'DVD', :item_page => page).items
   end
end

Now if you go to localhost:3000/amazon?q=2001+a+space+odyssey you should see results pertaining to that masterpiece instead.

And next we can even add a page specification:

class AmazonController < ApplicationController
  def index
    query = params[:q]
    page = params[:p]
    @results = Amazon::Ecs.item_search(query, :response_group => 'Medium', :search_index => 'DVD', :item_page => page).items
   end
end

At this point you can get more than one page of results by specifying the q parameter, e.g.: localhost:3000/amazon?q=2001+a+space+odyssey&p=2 returns results 11-20.

It’s hard coded to searching in ‘DVD’ right now. If we change it like so we can search everything:

class AmazonController < ApplicationController
  def index
    query = params[:q]
    page = params[:p]
    @results = Amazon::Ecs.item_search(query, :response_group => 'Medium', :item_page => page).items
   end
end

I just removed the :search_index specification in the service call. It’s the same thing as specifying :search_index => 'All' so you can do that instead if you wish.

Valid search indexes are:

 	%w[ All Apparel Automotive Baby Beauty Blended Books Classical DigitalMusic DVD Electronics ForeignBooks GourmetFood Grocery HealthPersonalCare Hobbies HomeGarden HomeImprovement Industrial Jewelry KindleStore Kitchen Magazines Merchants Miscellaneous MP3Downloads Music MusicalInstruments MusicTracks OfficeProducts OutdoorLiving PCHardware PetSupplies Photo Shoes SilverMerchants Software SoftwareVideoGames SportingGoods Tools Toys UnboxVideo VHS Video VideoGames Watches Wireless WirelessAccessories ]

Enjoy and best of luck with your Amazon app!

Thanks to the popularity of high profile websites that use Rails such as Hulu and Twitter, it is now considered a viable option for large sites. This kind of exposure means a lot of new development and movement. Rails seems to have outgrown many of the scaling woes of yesteryear. Now that it’s recognized in the mainstream as a stable and feature-rich platform for making websites, adoption has taken off, which means more tutorials, more resources, less bugs, lower barrier to entry and an overall better experience all around.

Another great development occurred quite recently in the Rails community. Two days before Christmas, on December 23, 2009, it was announced that Merb would be merged into Rails 3. This is another huge development which will end the duplication of efforts and fracturing of the developer community that occurred due to competition between Merb and Rails.

In the spirit of celebrating this current Rails renaissance, here are some of the best Rails resources we’ve come across in the past year. We hope you find these as useful as we did!

Less CSS

Less is an extension for CSS that allows you to use variables, perform operations such as mathematical calculations  and other neat features. It uses a Ruby script to read the .less file and generate a .css file to serve up to the browser.

Having variables is hugely helpful and it seems like an oversight in the CSS spec that it wasn’t included to begin with. Also, being able to add modifiers is nice. You can add, subtract, multiply, divide and even change colors. For instance, #FF0 + #00F would equal #FFF.

They also have mix-ins, which are classes that you can include in selectors, and it will include all of the properties from that class. This is the same thing functionally as adding that class to the elements matched by the selector, but without going into the HTML code. Mix-ins aren’t allowing us to do anything new that we couldn’t do already by adding the classes in HTML, but now it allows us to do this in CSS, without even touching the HTML. Some people will like this feature, others will deplore it– after all, we have a perfectly functional system where we can add multiple classes to a given element to achieve the same effect. But, I for one feel that this is a very useful feature to have. This is great for its reuse of code, and I love making modular CSS classes (for example, “rounded-corners”) that can be mixed into other CSS selectors.

Git and GitHub, Social Coding

These are two of the most useful tools of the year, hands down. Git caused a paradigm shift in distributed development. GitHub has become the de facto standard for Git hosting. If you’re unfamiliar with Git, read up on the Wikipedia page. To summarize, it’s a code versioning system that is well-suited for distributed development groups and open source software. It encourages users to make a fork of the repository so that any useful bug fixes, additions and changes can be easily merged back in, should the developers so desire.

I don’t see the advantage of using Git for personal projects or small in-house projects, but it is wonderful for open source efforts like Rails. It’s certainly a fine choice for any project, though I don’t see a big advantage over, say, Subversion, until you get into large scale distributed development situations like open source projects. Once you’re looking at open source projects, like those hosted on GitHub, we’re talking about a paradigm shift in efficiency.

Historically, most people would download zipped packages of code. Git encourages forking the repository instead. Let’s look at a quick example of how this works with Rails plugins.

Typically you could install a plugin by downloading some files somewhere and installing them, either with a script or by decompressing them directly to your vendor directory. This works fine but is unidirectional — you can only get the file from the developer, there is never an opportunity to submit code back, say, if you fix a bug.

The paradigm shift in efficiency that Git brings about is closing the loop: it allows you to easily submit code back to the trunk, thus capturing all those useful improvements to the code that would otherwise be lost on so many hard drives.

With GitHub, instead of downloading the Rails plugin, you fork the Git repositor to your vendor directory. Then, if you have to make changes to the plugin (which I almost always have to do, despite my best efforts to avoid it), you still retain the ability to update the code without losing your fixes. The old way was that if I wanted to upgrade a plugin that I had customized, I would have to download the new one and then manually go through and make whatever customizations I’d done. This way, you can automate the merging process and only have to go in if there are conflicts. That’s a big win to me. Then, if I actually do something with a plugin that others might find useful, I can offer up my own fork on GitHub, or submit it to the trunk if I think it’s useful enough to be included there.

Although Git was released in 2005 and GitHub in 2008, I included them on the 2009 list here because I think they have really broken through to the mainstream in a big way this past year. GitHub achieved meteoric rise during 2009. In January alone 17,000 new repositories were made, according to a talk given by GitHub founders at Yahoo in February of that year. In July of 2009 they had 90,000 unique repositories, double the previous year– and 45,000 forks of those repositories.

So, get on the bandwagon! Head over to GitHub and see what they have to offer. Or, if you don’t know where to start, check out this next useful resource for pointers …

The Ruby Toolbox

The Ruby Toolbox is a wonderful resource for finding out what is popular. It uses metrics such as SVN commits and GitHub forks to determine which Ruby scripts are most popular. You can find out about a lot of great tools this way. I’ve discovered plenty of useful Rails gems and plugins here. There are also some useful standalone Ruby scripts for a variety of development tasks, such as Less, which doesn’t depend on Rails to do it’s thing.

Prawn, PDF Generation Made Easy

Prawn is a gem for generating PDFs. Let me tell you, working with PDFs is never easy, but Prawn greatly reduces the pain.

Check out this tutorial at RailsTips for more info.

jRails

I think it’s pretty obvious that jQuery has hit the big time in popularity. Endorsements by Microsoft, Amazon.com and other major players have led it to become the go-to JavaScript library of 2009. While Prototype still hangs in there, and MooTools has a great offering, an article I read recently summed it up perfectly when they said ‘jQuery is the guitar.’ It had a screen grab of Google search results for guitar versus banjo, along with similar numbers for jquery versus mootools. You get the idea. If you aren’t using jQuery, you’re playing the banjo. If you want to really rock out, get on the bandwagon!

I am being facetious here but there is certainly some truth to the fact that a web developer in 2010 must be well-versed in jQuery. It’s also a viable alternative to Prototype in Ruby on Rails. In fact, I’ve heard that Rails 3 will be JavaScript framework agnostic, but don’t quote me on that.

In any case, you don’t have to wait until Rails 3 to start using jQuery in your Rails app. Simply install the jRails gem and you can go along using all those nifty Rails helpers, completely unaware that they are now implemented in jQuery instead of Prototype. Isn’t encapsulation great?

HAML

HAML (pronounced like Mark “Luke Skywalker” Hamill’s last name) is a great alternative to HTML. You write clean, concise HAML and the parser generates verbose and ugly HTML to serve up to the browser. Thus you can avoid typing those obnoxious closing tags that markup languages are so fond of. Keep your code simple, clean and pure. Or that’s the idea.

In practice, HAML can be a bit complex. Check out the HAML Wikipedia page to see what I mean — look at all those obscure symbols. But once you learn what they all mean, it is a very concise, some might say beautiful language.

Paperclip

What can I say? Paperclip rocks. It is the standard for attachments in Rails and with good reason. It has been consistently updated, bug-fixed, and best of all, it is simple with not a bit of bloat. It requires the bare minimum of information from you, the developer, and does all the heavy lifting– even light lifting like database migrations– for you.

The next time you need to allow for file uploads in your Rails app, look no further than Paperclip.

Acts_As_Taggable_On, a Gem For Tagging

Originally forked from Acts As Taggable On Steroids, the truncated form, has a number of improvements and goodies. Here is an excerpt from the Readme:

This plugin was originally based on Acts as Taggable on Steroids by Jonathan Viney. It has evolved substantially since that point, but all credit goes to him for the initial tagging functionality that so many people have used.

For instance, in a social network, a user might have tags that are called skills, interests, sports, and more. There is no real way to differentiate between tags and so an implementation of this type is not possible with acts as taggable on steroids.

Enter Acts as Taggable On. Rather than tying functionality to a specific keyword (namely “tags”), acts as taggable on allows you to specify an arbitrary number of tag “contexts” that can be used locally or in combination in the same way steroids was used.

Read more at Github.

Thinking Sphinx, Front End to Sphinx Search Engine

Thinking Sphinx is a great Ruby client to the Sphinx search engine that allows your Rails application to seamlessly integrate with Sphinx. This means you can get blazing-fast search results that are so fast because they’ve been optimized with filesystem-based indices, and even delta indices which only track changes to those indices, meaning they can avoid database calls when possible. Sounds fancy, huh? In practice, it’s a relatively painless set up that gets you professional quality search results. Sure, it can’t beat Google Mini, and feature for feature, heavy hitters like Java’s SOLR may win out, but for every project I’ve worked on, this has been sufficient. I like it a lot better than Ultrasphinx, the other Sphinx front end I’ve worked with.

All right, that’s all I have for now.  I’m sure I missed tons of great resources.

Please add your own favorite Ruby on Rails gems, plugins and resources in the comments!

Organic

Razorfish

Ogilvy & Mather

akqa

pop

Tribal DDB

Publicis Modem

Sapient

Critical Mass*

LBi Icon Nicholson

Atmosphere BBDO

Nurun

Blast Radius

One to One Interactive

Genex

Arnold

dna

*Has Music

console.log('The Beatles:');
['john','george','ringo','paul'].forEach(function(beatle, i) {
   console.log("name: " + beatle + "\n" + i);
});

// Result:
/*
 * The Beatles:
 * name: john 0
 * name: george 1
 * name: ringo 2
 * name: paul 3
*/

This is a great technique when creating iPhone web apps. Since the iPhone sports a modern Webkit browser, we can use forEach.

Compare the traditional for with forEach:

// Oldschool way using for
var beatles = ['john','george','ringo','paul'];
for (var i = 0, l = beatles.length; i < l; i++) {
    console.log("name: " + beatles[i] + "\n" + i);
}

// Newschool JavaScript 1.8 forEach
['john','george','ringo','paul'].forEach(function(beatle, i) {
    console.log("name: " + beatle + "\n" + i);
});

They are functionally the same, but as you can see, the newschool way is much cleaner.

function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}

if ($("videoplayer").viewportOffset()[1] < 0) {
 Effect.ScrollTo('videoplayer', {duration: 0.2});
}

Requires both prototype and effects.js in scriptaculous.

Here’s an example of doing something in all instances EXCEPT the last one. Reversing this is obvious:

Often times you want a horizontal rule in all instances except the last item. You can also use this method for adding a class name to the last item:

 
  last
 

action_mailer_tls

There are a lot of solutions out there so it can be hard to know which to choose. I have tried many and found this to be dead simple. Takes 5 minutes to setup.