Animations with requestAnimationFrame

Recently I deceided to explore requestAnimationFrame as a way to peer behind the jQuery.animate veil. While you should absolutely use jQuery.animate (or similar) when working on a "real" project, the results were pretty interesting:

function animate(el, properties, duration, done) {
    function map(obj, transform){
        var result = {};
        Object.keys(obj).forEach(function (key) {
            result[key] = transform(key, obj[key]);
        return result;

    function accessor(property) {
        return {
            get: function (el) {
                var value = styles[property]
                if (value === 'auto') {
                    return 0;

                return parseInt(value, 10);
            set: function (el, value) {
      [property] = value + "px";

    var start,
        styles = getComputedStyle(el),
        startingValues = map(properties, function(key, value) {
            return accessor(key).get(el);

    requestAnimationFrame(function step(timestamp) {
        done = done || function () {};
        start = start || timestamp;

        var elapsed = timestamp - start;

        Object.keys(properties).forEach(function (property) {
            var goal = properties[property],
                startingValue = startingValues[property],
                delta = goal - startingValue,
                progress = elapsed / duration,
                bound = (delta > 0 ? Math.min : Math.max),
                value = bound(delta * progress + startingValue, goal);

                accessor(property).set(el, value);

        if (elapsed < duration) {
        } else {

Interestingly enough, the actual animation code is almost dwarfed by the code providing the API and fiddling with css properties to make sure they're in the right format.

Enough chit-chat, where's the bouncing ball?

I'm so glad you asked, I've even implemented the obligatory bouncing ball. Go take a look!

Seven Languages in Seven Weeks: Day 6

Last day of Io and what do we have? A small snippet that adds [1, 2, 3] style array literals to the language. Kind of neat that you can do it... also the kind of thing that can almost certainly get you in trouble.

squareBrackets := method(
    lst := List clone
    call evalArgs foreach(arg,
        lst append(arg)
    return lst

... and here's a Builder that lets you create XML documents by dynamically translating messages into XML elements.

Builder := Object clone
Builder forward := method(
    node := Element new(call message name)
    call message arguments foreach(arg,
        content := self doMessage(arg)
        if(content type == "Sequence",
            node addChild(TextNode new(content)),
            node addChild(content)
    return node

Node := Object clone
Node indent := method(depth,
    return "\t" repeated(depth)

TextNode := Node clone
TextNode new := method(text,
    node := TextNode clone
    node text := text
    return node

TextNode render := method(depth,
    writeln(self indent(depth), self text)

Element := Node clone
Element new := method(name,
    other := self clone
    other attrs := Map clone
    other name := name
    other children := List clone
    return other

Element addChild := method(child,
    self children append(child)

Element attr := method(k, v,
    self attrs atPut(k, v)
    return self

Element fmtAttrs := method(
    if(self attrs isEmpty,
        return "",
        return " " with(self attrs map(k, v,
            k with("=\"", v, "\"")
        ) join(" "))

Element render := method(depth,
    writeln(indent(depth), "<", self name, self fmtAttrs, ">")
    self children foreach(child,
        child render(depth + 1)
    writeln(indent(depth), "</", self name, ">")

... and a Builder document ends up looking like this:

Builder ul(
    li("some text") attr("class", "first"),
    li("some more text"),
    li("even more text") attr("class", "last")
) attr("class", "fancy") attr("id", "menu") render(0)

Seven Languages in Seven Weeks: Day 5

Have you ever wanted some bastard to redefine division on you? I haven't either, but if it ever comes up, you can totally do it in Io:

Number trueDiv := Number getSlot("/")
Number / = method(n,
    if(n == 0,
        return 0,
        return self trueDiv(n)

... and here's something that approaches useful: A two-dimensional matrix class that's backed by a one-dimentional list. It includes getter, setter and iterator methods. Yay!

Matrix := Object
Matrix dim := method(x, y,
    self width := x
    self height := y
    self buffer := list()
    self buffer setSize(x * y)

Matrix checkBounds := method (x, y,
    if(x >= width or y >= height,
        Exception raise("index out of bounds")

Matrix get := method(x, y,
    checkBounds(x, y)
    return self buffer at(x + y * width)

Matrix set := method(x, y, value,
    checkBounds(x, y)
    self buffer atPut(x + y * width, value)

Matrix forEach := method(f,
    for(y, 0, height - 1,
        for(x, 0, width - 1,
            f call(x, y, self get(x, y))

Seven Languages in Seven Weeks: Day 4

Io is the second language covered in Seven Languages in Seven Weeks and it is substantially further off the beaten path than Ruby was. The first day's worth of exercises didn't really have anything code snippet worthy, so here's recursive Fibonnaci to prove that I got the VM running ;-)

Fib := Object clone
Fib fib := method(n,
    if(n < 2, return 1)
    return self fib(n - 1) + self fib(n - 2)
Io> Fib fib(6)
==> 13

Seven Languages in Seven Weeks: Day 3

The emphasis for the final day of Ruby was on metaprogramming using open classes and mixins. So without further ado, here's a CSV reader that provides a mixin that lets you access the values of a CSV file using dynamic properties (Whee!):

module ActsAsCsv
    class CsvRow
        def initialize(csv, fields)
            @fields = fields
            @csv = csv
            @map = Hash[]

        def method_missing(key)

    def self.included(base)
        base.extend ClassMethods

    module ClassMethods
        def acts_as_csv
            include InstanceMethods

    module InstanceMethods
        include Enumerable

        attr_accessor :headers, :csv_contents

        def initialize

        def each
            @csv_contents.each do |row|
                yield row

        def parse(s)
            s.chomp.split(', ')

        def read
            @csv_contents = []
            filename = self.class.to_s.downcase + ".csv"
            file =
            @headers = parse(file.gets)

            file.each do |row|
                fields = parse(row)
                @csv_contents <<, fields)

Given a CSV file like this:

msg, response
Hello!, Hi!

... we could read it like this:

class Example
    include ActsAsCsv
end do |row|
    puts row.msg, row.response