Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Freckle Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

MacWorld Twistori Stream

January 6th, 2009

For your viewing enjoyment, I’ve put up a MacWorld San Francisco Twistori Stream—point your browsers to http://macworld.twistori.com/.

Best enjoyed on a big screen.

Digg this story!

Credit card validation

December 22nd, 2008

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

December 20th, 2008

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

December 19th, 2008

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!

Mustache photo and some JavaScript tips coming soon…

December 9th, 2008

I promise! :)

freckle is live!

December 3rd, 2008

In case you haven’t read it on our twitter account, first, follow us already, and then head over to http://letsfreckle.com/ to sign up for a test or free account! :)

freckle

The fruit of our hard labor, freckle time tracking, is now live and it works just great. This is in part due to the awesome infrastructure that is now available for hosted applications, in particular two services for Ruby on Rails: Exceptional, and XXXX. Plus good ol’ (well not so) Github.

Besides having a cute name, freckle also stars the latest and greatest scriptaculous 2 and I promise some announcement on that in the near future.

Besides, be sure to subscribe to the freckle blog—we not only will post product-related announcements there but much more (like the article on Ecommerce Stuff Nobody Tells You).

Our journey through the wonderful world of software-as-a-service has just begun… :)

And now, going for some Gl├╝hwein at one of Vienna’s awesome christmas markets.

Weekend Bookmarklet diversion

November 21st, 2008

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

November 18th, 2008

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.

Growing a moustache for good, and good JavaScript

November 3rd, 2008

In November I’ll grow a moustache, not for fun, but for a good cause. Help fight prostate cancer, donate here.

For each $20 raised, I’ll post a JavaScript tip here on the blog! I’ll be posting photos of my progress, too! :)

Read more on movember.com.

(Pre-) Meet freckle

September 15th, 2008

My wife, some friends and I have been really busy lately working on a new product we’re gonna launch soon—it’s time tracking done right (we like to call it ‘rethought’).

Signup for the email announcement at the teaser page, over at letsfreckle.com.

The app is made with Rails, and of course with the latest and greatest script.aculo.us 2 beta version. Oh, and we’re letting people join our beta test group in batches—so shoot us a mail at [email protected] if you want to be on the edge of time tracking… :)