Posts tagged code - Entropy and Ecstasy

Animations with requestAnimationFrame

Wed, 19 Nov 2014 16:28:53 GMT

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) {
                el.style[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) {
            requestAnimationFrame(step);
        } else {
            done();
        }
    });
}

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

Fri, 06 May 2011 22:00:41 GMT

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

Thu, 05 May 2011 23:44:09 GMT

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

Wed, 04 May 2011 18:25:28 GMT

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

Tue, 03 May 2011 21:42:36 GMT

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[@csv.headers.zip(fields)]
        end

        def method_missing(key)
            @map[key.to_s]
        end
    end

    def self.included(base)
        base.extend ClassMethods
    end

    module ClassMethods
        def acts_as_csv
            include InstanceMethods
        end
    end

    module InstanceMethods
        include Enumerable

        attr_accessor :headers, :csv_contents

        def initialize
            read
        end

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

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

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

            file.each do |row|
                fields = parse(row)
                @csv_contents << CsvRow.new(self, fields)
            end
        end
    end
end

Given a CSV file like this:

msg, response
Hello!, Hi!

... we could read it like this:

class Example
    include ActsAsCsv
    acts_as_csv
end

Example.new.each do |row|
    puts row.msg, row.response
end

Seven Languages in Seven Weeks: Day 2

Mon, 02 May 2011 21:02:22 GMT

A grep work-a-like which despite being much shorter then the previous exercise actually has the possibility of being useful:

pattern = Regexp.new(ARGV[0])
path = ARGV[1]

File.open(path, "r").each_with_index do |line, i|
    puts "#{path}:#{i + 1}\t#{line}" if line.index(pattern)
end

Seven Languages in Seven Weeks: Day 1

Sun, 01 May 2011 22:27:02 GMT

I picked up Seven Languages in Seven Weeks after Martin Fowler recommended it. After half an hour of reading I wrote one whole Ruby program!

i = rand(10)

puts "I'm thinking of a number x ∈ [0,9]. Can you guess it?"

while true do
    print ">> "
    guess = gets.to_i

    break if guess == i
    puts "Too low." if guess < i
    puts "Too high." if guess > i
end
puts "Good job :-)"

(I may have known a little bit of Ruby before I started ;-).

Eventlet is Awesome!

Tue, 01 Feb 2011 21:22:54 GMT

Eventlet is an asynchronous networking library for Python which uses coroutines to allow you to write non-blocking code without needing to perform the normal mental gymnastics that usually go along with asynchronous programming. There are a bunch of async/event-driven networking framworks (eventmachine, node.js, tornado, and twisted to name a few), and their defining characteristic is that they use select/epolll/kqueue/etc. to do I/O asynchronously. Asynchronous I/O is cool because when done correctly it allows your server to handle a much greater number of concurrent clients than the one-OS-thread-per-connection approach. Furthermore, since you're using co-operative rather than preemptive multitasking, you can safely update shared data structures without locks, which makes it a lot easier to write correct code.

Anyway, eventlet is pretty cool. If you like Python and you're interested in async programming, you should check it out. After all, anything that reduces the incidence of Heisenbugs is worth a look ;)

Proxymachine in 55 Lines

Since they're so specialized, playing with this kind of library requires a specific kind of project. Consequently, I decided to put together a "Hello Word!" version of Proxymachine. Proxymachine is a proxy built on eventmachine that lets you configure it's routing logic using Ruby. Don't get me wrong, Proxymachine is awesome and way more production ready than this. That being said, it's still friggin' cool that I could put togther a pale imitation of Proxymachine in less than 100 lines thanks to eventlet:

import functools
import eventlet

CHUNK_SIZE = 32384

class Router(object):
    def route(self, addr, data):
        raise NotImplemented

def merge(*dicts):
    result = {}
    for d in dicts:
        result.update(d)
    return result

def forward(source, dest):
    while True:
        d = source.recv(CHUNK_SIZE)
        if d == '':
            break
        dest.sendall(d)

def route(router, client, addr):
    blocks = []
    while True:
        block = client.recv(CHUNK_SIZE)
        if block == '':
            raise Exception('Failed to route request: "{0}"'.format("".join(blocks)))

        blocks.append(block)

        route = router.route(addr, "".join(blocks))
        if route is not None:
            print "Forwarded connection from {0} to {1}".format(addr, route)

            server = eventlet.connect(route)
            for block in blocks:
                server.sendall(block)

            eventlet.spawn_n(forward, server, client)
            forward(client, server)
            return


def start(router, **kwargs):
    defaults = {
        "listen": ('localhost', 8080),
    }

    config = merge(defaults, kwargs)
    print "Listening on:", config['listen']

    eventlet.serve(
        eventlet.listen(config['listen']),
            functools.partial(route, router())
    )

Roulette: A router in ten lines

The logic here is laughable, route inbound connections to either localhost:9998 or localhost:9999 depending on whether the remote port is divisible by two, but the point is that the routing logic could be anything. We're writing Python here. We could look stuff up in a database, or check the phase of the moon or y'know, do something useful.

import roulette

class Router(roulette.Router):
    def route(self, addr, data):
        if addr[1] % 2 == 0:
            return ("localhost", 9999)
        return ("localhost", 9998)

roulette.start(Router,
    listen = ("localhost", 80)
)

Scala Templates

Sat, 08 Jan 2011 12:47:54 GMT

I've recently been messing around with Scala and figured I'd tackle a problem I've already solved in other languages. Here is the template kata implemented using a regex to match the placeholders:

class Template(val tmpl: String) {
    def render(context: Map[String, Object]): String = {
        return """\$(\w+)""".r.replaceAllIn(tmpl, m => {
            context.getOrElse(m.group(1), "").toString()
        })
    }
}

Here's a couple things I like:

Scala's Maps have a getOrElse method, yay! It's a little more verbose than Python's get method, but at least I don't have to write it my self.
It's actually shorter than my first implementation in JavaScript, including the type annotations.
I actually really like the class parameter, implicit field, thing (val tmpl: String). It handles the "The constructor takes and argument and binds it to a field." use-case very nicely.
Scala's lambda expressions are very concise, and it's hard not to like that.

Here are the tests written in a BDD style using ScalaTest:

import org.scalatest.FlatSpec
import org.scalatest.matchers.ShouldMatchers

class TemplateSpec extends FlatSpec with ShouldMatchers {
    val EMPTY = Map[String, Object]()

    private def test(tmpl: String, expected: String, ctx: Map[String, Object] = EMPTY) {
        new Template(tmpl).render(ctx) should equal (expected)
    }

    "A template with no tokens" should "return a blank string if the given string is blank" in {
        test("", "")
    }

    it should "return a non-blank string unchanged" in {
        val identity = "hello, world"
        test(identity, identity)
    }

    "A template with one token" should "replace missing values with the empty string" in {
        test("$name", "")
    }

    it should "replace the token with value from the context" in {
        test("$name", "Aaron", Map("name" -> "Aaron"))
    }

    it should "leave the rest of the string unchanged" in {
        test("Hello $name!", "Hello Aaron!", Map("name" -> "Aaron"))
    }

    "A template with two tokens" should "replace each token its value from the context" in {
        test("Hello $name! It is a $attitude day.", "Hello Aaron! It is a wonderful day.", Map(
            "name" -> "Aaron", "attitude" -> "wonderful"
        ))
    }

    it should "replace each missing value with the empty string" in {
        test("Hello $name! It is a $attitude day.", "Hello Aaron! It is a  day.", Map(
            "name" -> "Aaron"
        ))
    }

    it should "replace adjacent tokens with their respective values" in {
        test("$me$you", "AaronJohn", Map("me" ->"Aaron", "you" -> "John"))
    }

    it should "replace every occurrance of each placeholder" in {
        test("$a-$b-$a-$b", "AAA--AAA-", Map("a" -> "AAA"))
    }
}

They're a little verbose, but as I mentioned in a previous post, you can extract documentation from tests like these:

TemplateSpec:
A template with no tokens
- should return a blank string if the given string is blank
- should return a non-blank string unchanged

A template with one token
- should replace missing values with the empty string
- should replace the token with value from the context
- should leave the rest of the string unchanged

A template with two tokens
- should replace each token its value from the context
- should replace each missing value with the empty string
- should replace adjacent tokens with their respective values
- should replace every occurrance of each placeholder

JavaScript Templates (redux)

Tue, 14 Dec 2010 20:22:19 GMT

In the spirit of code kata (the origional problem was a kata) here is an alternative solution to the JavaScript templating problem:

var template = (function(){
    var grammar = parsec.grammar([
        parsec.token("placeholder", "[$]\\w+"),
        parsec.token("literal", "[^$]+")
    ]);

    with(grammar){
        root("template", placeholder.or(literal).repeated().then(eof));
    }

    return {
        render: function render(source, context){
            var handlers = {
                literal: function(node){
                    return node.v;
                },

                placeholder: function(node){
                    var key = node.v.substring(1);
                    return context[key] || "";
                },

                template: function(node){
                    return $.map(node.children, evaluate).join("");
                }
            };

            function evaluate(node){
                return handlers[node.type](node);
            }

            var root = grammar.parse(source);
            return evaluate(root);
        }
    };
})(parsec.util);

It's a bunch longer. It's not quite ten time's longer, but it's kind of close... and it passes exactly the same test suite and has the same features, so what, if anything is good about it?

For one thing, it uses a completely different approach. It builds a recursive descent parser using a parsing library that I put together that's based on Parsec. The basic idea of Parsec, and other parser combinator libraries, is that you define simple parsers and then compose them into more complicated parsers using combinators. What this means is that, while it is not necessary here, this approach can handle much more complicated languages than the regex based approach.

Oh, and there was one little nugget of joy in there that deserves special mention. You, might have missed it, so I'll show it again:

with(grammar){
    root("template", placeholder.or(literal).repeated().then(eof));
}

That's right, a with statement. I bet you never though you would see somebody actually try to use one of those. Sure, with statements are widely reviled, they are not one of the good parts, and they're dead in EC5 strict mode... but embedded DSLs are one of the places where you're allowed to cheat like there's not tomorrow. 'sides, $.extend(window, grammar); is your other option for scope manipulation and that's just plain evil.