Random Titles

Titles are hard, giving something a name demands thinking about it and making a decision. Unless of course you know some javascript. And... I do. So I can't come up with a title, I'll let the code choose a random(ish) one for us.

This is done with an array of nouns, an array of adjectives and a prefix to the title. The basic idea is to randomly concatenate those terms together. Since the prefix would become repetitive, I've set it to only show up 50% of the times.

Here is the code wrote.

    // for convenience, return a number within the range. Pass the noFloor for a float.
    function rrange(min, max, noFloor) {
        var result = Math.random() * (max - min) + min;
        return noFloor ? result : Math.floor(result);
    }
    // generate the title.
    function randomTitle() {
        // some nouns and adjectives...
        var nouns = [ 'Functions', 'Loops', 'Bugs', 'Monkeys', 'Duck', 'String', 'Integers' ],
            adjs = [ 'Flying', 'Sleeping', 'Typing', 'Parsing', 'Lost', 'Delicious', 'Forgotten' ],
            // random ints
            x = rrange(1, nouns.length) - 1,
            y = rrange(1, adjs.length) - 1,
            // coin flip for the prefix
            prefix = Math.random() > 0.5 ? 'The ' : '',
            // concat it all
            title = prefix + adjs[y] + ' ' + nouns[x];
        // set the title
        $('#random-title').text(title);
    }
    $(function () { randomTitle() })

There is more that can be done, like adding more nouns and adjectives and different title constructs. If you decide to extend this, or have done something like it, please share your nouns and adjectives.

An example Chrome app

I've been using Backbone.js and after a few hours of reading the source in the browser my eyes demanded some syntax highlight. I assumed someone would've done this by now, but I could only find apps that provide much more than a nicer reading environment (I'm not looking to edit code on the browser). Great!, I tough to myself, I get to roll my own! Because I read mostly javascript source code, I focused on that, maybe if the need arises I'll beef it up with html and css highlight.

So to get started I looked around for highlighting libraries, and found a couple of heavyweights and then I saw hijs.js by cloudhead and I grabbed it!

After having a good grasp on what happens inside Hijs I was happy to see that it fits the bill perfectly because it will invoque itself when loaded. At that point all I needed was to actually create the app.

I googled for some tutorials and ended up in the official docs where I found everything I needed. It wasn't much, all I was missing was a manifest file.

And... here it is:

    {
       "name": "Hijs",
       "version": "0.0.1",
       "description": "Raw javascript file highlighter.",
       "permissions" : [
          "http://*/*.js",
          "https://*/*.js"
       ],
       "content_scripts": [
          {
             "matches": ["http://*/*.js", "https://*/*.js"],
             "js": ["hijs.js"],
             "css": ["highlight.css"]
          }
       ]
    }

It is very simple, but i'm sure it can get much more complicated. Just read the docs!

So if you'd like to try it out before I have it done, head on to the github repo

Binary Searchy in less than 140 characters.

function f(a,v,l,h){var m;return h<l ? !-1: a[(m=~~(l+(h-l)/2))]>v ? f(a,v,l, m-1): a[m] < v ? f(a,v,m+1,h): m; }

And it works too!

Using the binary operator ~~ I'm able to ditch Math.floor() and I replaced false with !-1. After that, it will fit in 140 chars, with room to spare!

Here's the clean implementation:

    function fn (a, v, l, h) {
        var m;
        if (h < l) {
            return false;
        }

        m = Math.floor(l + (h - l) / 2);

        if (a[m] > v) {
            return fn(a, v, l, m-1);
        } else if (a[m] < v) {
            return fn(a, v, m+1, h);
        } else {
            return m;
        }
    }

UPDATE: It was pointed out to me that I could have saved another character by using !1 instead of using !-1

Fractal Tree

Credits go to Christian Heilmann for making the original. I made this to learn how he did the tree, and to play around with Twitter Bootstrap and smoke.js.

CreativeJS - Three.js Tutorial

I completed this tutorial. At the end of the tutorial Seb challenges everyone to do some exercises (homework): change the direction, shape, color and angle of the particles.

For a deeper look on what is going on there, check out the Github repo. The evolution of the code is neatly organized with (git) tags.