Free “Jumpstart Credit Card Processing” guide ebook

The cheat sheet we extracted from freckle time tracking for Ruby Advent is now growing into a real ebook, so we’ve put it up on it’s own domain. Head over to http://jumpstartcc.com/ to grab your copy of our free guide.

P.S. We’re also planning some updates to it, so if you like to stay informed about new releases of it, sign up for our email announce list.

Little JavaScript hints, episode 3: force redraw

If you ever did some advanced DOM manipulation stuff, especially CSS-based animations, you might have run into situations where the browser just wouldn’t redraw an element correctly.

Here’s a little snippet for Prototype I use to force redraw in such situations:

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

The defer() call is interesting, as I needed to add it to fix some really weird redraw issues with WebKit nightlies. Obviously the rendering optimization in browsers have come a long way, so there might be even more tricky “force redraw” schemes necessary, depending on the browser and situation.

$('element_id').redraw();

I’d love to hear feedback from you if you have to use any such contraptions in your code.

Using input values as hints, the easy way

An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.

Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.

$('element_id').defaultValueActsAsHint();

This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.

In freckle, we’ve extended this basic implementation a bit with some options (you can change the hint dynamically and pause this functionality)—i think these are pretty application-specific addition though, and I want to keep it simple, so it’s not in the open-source version (if there’s enough interest, I can go ahead and post the code).

Grab the source at my GitHub repository at http://github.com/madrobby/prototype_helpers. There’s also a functional test/demo file included there.

There are many more of these user interface patterns, and I plan to have really good support for these in scripty 2.

Credit card validation

We all know that payment processing can be very painful. At least, everyone who’s ever tried to do it knows. To help ease the pain, Amy came up with a Jump Start Credit Card Processing cheat sheet for Ruby Advent 2008, based on our experiences when implementing freckle time tracking.

The cheat sheet does explaining-in-layman-terms of how this whole barely understandable mess works (need I say “merchant account”?), and an overview of how to use ActiveMerchant (and if you use Ruby on the backend, you should use ActiveMerchant!).

My contribution is an extraction from the freckle billing forms, a JavaScript library for doing client-side checking of credit card numbers, that does a couple of tricks:

• Checks the number with the luhn algorithm (prevents typos)
• Determines the type of the credit card from the number (you can use this to check the “type” checkboxes that you might have on your billing form automatically, as a convenience for your users)
• Checks if the number is one of several test numbers (this prevents users from abusing/gaming your billing form)

This is valuable to both your users and you—Your users will have are more comfortable and responsive data input form, while you’re saving on transaction costs (most credit cards gateways also charge fees for false/bogus numbers!).

The credit card library can of course be used independent of what you use to acccess your gateway, so it’s not bound to Ruby or ActiveMerchant.

Download the Jump Start Credit Card Processing cheat sheet now for the details and download instructions for the JavaScript library!

Little JavaScript hints, episode 2: stay DRY

Here’s a technique you can use to DRY (Don’t repeat yourself) up your code, if you have very similiar methods that just do the “opposite”.

An example of this are controls that do scrolling or paging, and often include a forward/back button.

I often see code like this:

function nextPage(){ 
   // do something 
}
function previousPage(){
  // do something
}

The “do something” part in methods like these is almost identical, except for the direction. Basically, it all resolves around incrementing or decrementing a “position” variable, checking bounds, and then rendering the result.

I find it more convenient to merge this into one function, with a direction parameter, that gets +1 or -1. Here’s an example:

// pages are numbered from 1 to 10
var currentPage = 1, pageCount = 10; 

function turnPage(dir){
  currentPage += dir || 0;

  currentPage = 
    (currentPage == 0) ? pageCount :
    (currentPage == pageCount+1) ? 1 : currentPage;
 
  // here we would do whatever is necessary to render
}

Of course it’s not nice to write

turnPage(-1);

everytime you want to page to the previous page, so here’s where Prototype comes to the rescue (and yes, I’m pimping Prototype here):

var nextPage = turnPage.curry(1), 
  previousPage = turnPage.curry(-1);

With curry, you get instant next and previous functions, which you can call like any ol’ function:

nextPage(); // same as turnPage(1);
previousPage(); // same as turnPage(-1);

// or maybe in an event handler
$('previous_button').observe('click',previousPage);

How sweet is that!

Little JavaScript hints, episode 1: prevent console.log breakage

Here’s something I’ve tripped over in the past, and it hit me again while developing some JavaScript for freckle.

Firebug’s console.log is of great value. But don’t dare you forget it in your code before you deploy…

Here’s a quick snippet that saves your code from exploding (this is for peeps that use Prototype):

1
2

if(window['console'] === undefined)
  window.console = { log: Prototype.emptyFunction };

This should prevent the worst, but of course always check your code when you deploy. D’oh!

Weekend Bookmarklet diversion

For Webkit-based browsers.

Drag rotatorize to your bookmark bar, and click on it when on a site with lots of images, say your twitter stream.

Happy weekend!

script.aculo.us 1.8.2 service release

I’ve just pushed script.aculo.us 1.8.2, which most importantly contains the latest and greatest Prototype 1.6.0.3 bugfix release.

If you’d like to know more about this update, please see the CHANGELOG.

Get it through Github or download a convenient package at the scriptaculous site.

Prototype Developer Day

The first ever Prototype Developer Day will be held during The Ajax Experience conference in Boston, MA on September 29, 2008.

The best thing is: it’s completely free, and you get to hang out with some of the peeps from the Prototype core team.

Read more about this exciting opportunity, and see the preliminary agenda over at the Prototype blog!

And then sign up (again, for free) over at the special signup form.

Practical Prototype and script.aculo.us book hot off the presses

Prototype Core team member Andrew Dupont’s new book Practical Prototype and script.aculo.us is now available, and it’s a super no-nonsense guide to getting up to speed with the libraries, fast.

Andrew, being a UI developer by heart, doesn’t mess around and gives you hands-on examples for just about everything you can do with the “fraternal twins” Prototype and script.aculo.us.

You’ll learn how to really use all those fancy Prototype collection helpers (like each, detect, select, reject, partition, etc.), master the cool new custom events system, and seriously mess with the DOM; and how’ll see how Prototype can help you with everyday programming tasks with its extensions to functional programming and OOP. Plus of course how to make the most of Ajax and JSON. Last but not least, visual effects are explained, and also how they work by taking advantage of the DOM and how web browsers render websites.

The very interesting closing chapter shows you why things are as they are in Prototype, and will help you read the source code—and write JavaScript, Prototype-style.