Articles by ‘Ryan Florence’

A Magical Journey into the Base Fx Class

Written By Ryan Florence, on Tuesday, May 18th 2010, 11:46am

Fx is not just for animating elements

In a recent project I worked on with Thomas Aylott the page did some calculations and displayed the result after the user pulled some sliders around. Rather than just change the text from one number to another, the element would increment the number before the user’s very eyes. With a fun interface like that, they had no choice but to apply for a new credit card right then.

Admittedly, I may not have thought to extend Fx to do something like that. After all, the first line of the docs for Fx is: “This Class will rarely be used on its own, …” My first thought would be to use a periodical with a counter and then set the text until the counter was done. But Thomas extended Fx instead. Though it’s the base class for all animations (tween, morph, scroller, etc.) its methods can be used for all sorts of abstract “animations.”

For this article I’ve just come up with a few potentially useful extensions of Fx to get the idea across that you can use it for more than just element animations.

How Fx Works

Essentially Fx just calculates a sequence of values between two numbers. The options kick in to make those values more interesting. This class, Fx.Log, simply updates the text of an element every step of the effect. Notice that this class is essentially the base Fx class except for the tiny set method.

Here’s another demo that visualizes all the visible options of Fx. After you draw the effect, hover the dots to see the exact value calculated (or view source and see them all together.) Playing around with this demo might tell you more about how Fx works than anything else out there.

Fx.Diff

By default, Fx uses 50 fps. So every second it’ll kick out 50 different values and fire the set method 50 different times. For the next few demos I only wanted to do something if the rounded value is different than the last rounded value, so I came up with Fx.Diff. If the value is different, it’ll call the render method.

Fx.Diff = new Class({

    Extends: Fx,
    count: 0,
    render: $empty,

    set: function(now){
        now = now.round();
        var diff = now - this.count;
        if (diff) {
            this.render(diff, now);
            this.count += diff;
        }
        return this;
    }

});

Fx.Count

Since this appears to be no different than the very first demo, we’ll just look at the code. Note, the difference is that the first counting demo would change the text in the element every single frame (50 times a second), but this code would only change it if the new rounded value is different from the last.

Fx.Count = new Class({

    Extends: Fx.Diff,

    initialize: function(element, options){
        this.element = document.id(element);
        this.parent(options);
    },

    render: function(){
        this.element.set('text', this.count);
        return this;
    }

});

Fx.Typewriter

I can actually see myself using this one somewhere:

Notice that Fx.Typewriter overwrites the start method of Fx. The Fx start method takes two arguments, from and to. The usage for Fx.Typewriter is to simply pass in a string of text like so: myFx.start('A whole bunch of text'). This new method knows the from argument is always 0, splits up the text into an array (one item per character) and then uses that length as the to argument. After that logic is done, it simply calls the parent start method. Then the render method takes over by figuring out how many characters to display, filtering out the tail end of the array, joining what matters, and finally setting the text of our element.

Fx.Text

There’s a very creative effect called Fx.Text on the forge. It’s an animated text replacement effect. I think it’s really cool and does a great job of extending Fx.

Fx.Cornify

This next script is far too magical to simply show you the code. You’ll need to view the source for this beauty.

How many? (caution, start with low numbers)

Duration:

Ryan Florence is a MooTools enthusiast and contributor. He maintains his JavaScript focused blog, MooDocs.net, and moo4q. Follow him on twitter or checkout his plugins on the Forge.

Object Oriented jQuery with MooTools @ jQuery Conference

Written By Ryan Florence, on Tuesday, April 27th 2010, 8:12am

Hey there MooToolers. I just returned from speaking at jQuery Conference 2010 in San Francisco on “Object Oriented jQuery with MooTools” and thought I’d share some notes on the experience.

My Talk

If you ask me how I did I’d say I missed a few connecting ideas but got the concept out there and got some people thinking. Several people came up to me afterward asking how to actually give this a shot on their web apps. Also, if you are reading this on a Mac, do this: command + option + control + 8 (⌃⌥⌘8). I think for the first time in the history of OSX this keyboard shortcut was useful. The projector had a hard time with my bright colored code on a black background so I inverted the the whole presentation!

Some of you have read my post Pigs take flight about using the Class module from MooTools to write modular code in a way we all love but use jQuery for DOM manipulation, effects, AJAX, etc. That was the basis of my talk. You can find the slides and a demo at my blog here.

The Demo is especially awesome.

Thoughts

It was very well attended, said to be the largest JavaScript conference ever. There were a lot of really talented people there and all of the speakers did great. I am humbled by the ability of the jQuery team to put together great events and market their library, I’d even say a bit jealous!

It seems at the user level people see frameworks as rivals or something, but at the framework developer level they generally feel like we’re on the same team, working to make the web better.

There was a lot of talk about organizing code, which is a problem that jQuery doesn’t try to solve. I don’t think any other framework can step in quite like MooTools to do it and yet keep the jQuery API in tact when writing an application’s code (thanks to mutators). Another testament that -core is rock solid and ridiculously versatile for JavaScript generally, not just the DOM. I also found that a lot of people didn’t know that you can create custom builds of MooTools to solve all sorts of JavaScript problems.

So, thanks jQuery for a great weekend!

Get friendly with the Natives

Written By Ryan Florence, on Tuesday, March 23rd 2010, 9:48pm

Have you extended a Native lately? It’s an incredibly helpful thing. Often people write ugly functions that take a string or whatever as an argument and return some manipulation of the string. Extending natives is a great way to do the same thing, but it is much prettier (aka: explicit, readable, easier-to-debug.)

The Difference:

I’ve seen stuff like this:

fn1(fn2(10, fn3('house')));

Hard to figure out what’s happening. Instead you can write code like:

fn3('house').fn2(10).fn1();    

A Useful, Real Example, zeroPad

I’ve used this in a couple scripts, it takes a number and returns a string with zeros padded in front: 123 becomes ‘000123’. Really handy for filenames and the like. Here’s the ugly version:

Functionally Based Example

function zeroPad(num, zeros){
  zeros = zeros || 3;
  var str = '' + num;
  zeros.times(function(){ str = '0'+str; });
  return str;
};

// usage
doSomething(zeroPad(document.getElementById('myInput').value, 3));

Native Extentions Based Example

Number.implement({
  zeroPad: function(zeros){
    var str = '' + this;
    zeros.times(function(){ str = '0'+str; });
    return str;
  }
});

// so that it works on both numbers and strings
String.implement({
  zeroPad: function(zeros){
    return this.toInt().zeroPad(zeros);
  }
});

// usage
$('myInput').get('value').zeroPad(3).doSomething();

Side by Side:

doSomething(zeroPad(document.getElementById('myInput').value, 3));
// vs
$('myInput').get('value').zeroPad(3).doSomething();

Awesome? Yes. You can do the same thing to:

Some say extending natives is a bad idea. Personally, I think it’s awesome—but this topic is a sore spot for some. Extending natives is a feature of javascript itself that any general application framework like MooTools is entitled to use. There could be an entire article dedicated to this topic but this article isn’t it. This article is simply here to show how to use this handy feature.

Flippin’ Sweet Array methods

Arian Stolwijk created this amazing gem: Array.Math. Code samples often tell the story faster:

[2,5,1,6].sum(); // 14
[2,5,6,2].product(3); // [6,15,18,6]
[9,12,15].quotient(3) // [3,4,5]

This is all made possible by extending the Array native, see?

    Array.implement({

        sum: function(start,length){
            var sum = 0, 
                start = start ? start : 0,
                length = length ? length : this.count()-start;
            length = start ? length + 2 : length;
            for(var i=start;i<length;i++) sum += this[i];
            return sum;
        },

        product: function(p){
            var arr = $type(p) == 'array';
            return this.map(function(entity,i){
                return arr ? (entity * p[i]) : (entity * p);
            });
        },

        quotient: function(q){
            var arr = $type(q) == 'array';
            return this.map(function(entity,i){
                return arr ? (entity / q[i]) : (entity / q);
            });
        },

        // and a whole lot more awesome ...

    });

Quick Tips

  • this is the number or string, or whatever, when inside the method.
  • Return something that makes sense (usually this).
  • You can implement several methods all in the same code block.

This is just one more great tool to help keep your code organized and readable.