Today I was told my Son has no bowel left to save. They have never seen a case this bad and there is nothing they can do for him at this point. I have to learn to accept that it is likely I will lose my beautiful Son or watch him have a very tough life if he can survive on a drip. There is no more hope all there is left is to love him. I want to make sure he knows he was loved no matter how long he will be on this planet.

I’m not going to try to turn their grief into a message of inspiration and hope; I don’t have to. From the beginning, when they first suspected something was wrong, Tom’s unfailing hope, love and enlightened acceptance of life has touched everybody they know.

I am not a victim. I am a creator and I will find a way to make something good of this. I don’t know what yet but I will find it.

Tom posted the following message in reply to the outpouring of support and sympathy from friends and family – I’m going to read it every time I feel sorry for myself about anything, no matter how seemingly unfair or disastrous. All the inspirational shit people read couldn’t come close:

Thanks for the offers of help. The best way you can help me is to not waste your life and dare to live your dreams. Life is short and fragile so don’t take time for granted but use every minute to live your dream. My Son don’t have that chance but you do so honour him and don’t waste your life. I know it is scary because I have done it and am doing it every day but know that when other people are laughing and telling you, you are wrong listen for my voice because I will be there cheering for you.

Stop making excuses. Everything is energy, pain, joy, laughter, fear. It is nothing more, just energy and your choice is how you use that energy. Depression is just unused energy. Fear is our friend that never had much education or wisdom so his advice is often very bad but well meaning. Use all your emotions to drive you to do everything you dream about and you will have helped me, because that is my mission with the time I have on this planet.

Don’t be sad for me because I am lucky. My circumstances are very bad and painful at the moment but my mind is full of love so I am lucky and from pain and tears I will grow in time. Vikings never surrender.

So this is just a really small tribute to one hell of a guy and his beautiful family. A spiritual teacher, masquerading as a tall, ginger Viking, leading the way for all of us, refusing to feel sorry for himself.

If you’re not sure about pushState and the HTML5 History API, here’s a solid starter. If you just want the .htaccess code, you can skip the explanation.

So we’ve reached this point now where every half-decent JavaScripter knows their way around the pushState / replaceState History API and the related wrappers/plugins, and has a decent idea of browser support and cross-browser polyfills for HTML5 History. I think.

But at the same time, the very people who want to be using it are faced with a blight that, for love nor money, they can’t fix: HTML5 History URLs screw up Apache. And there are just no damn guides anywhere about how to make it work (until now!)

The Apache web server was designed long before the first murmurings of rewriting URLs without a page refresh were heard, and a certain amount of tomfoolery is required to make dynamically-updating URLs work seamlessly.

So without further ado, I present the problem and the starter-pack solution.

Apache doesn’t like you with your damn pushState

So, as you hopefully know by now, to navigate between different sections, screens or pages of a client-side JavaScript application, you’d traditionally use hash (#) or hash-bang (#!) fragments (e.g. .com/#shopping-cart or .com/#!/profile/yourmum/). The JS code picks up the hashchange event (either natively or via a custom listener/event in older browsers) and fires off a function in your app to switch out the content, or perform some killer action.

When you use HTML5 History, you don’t use hash fragments; instead, your JS app or website uses .pushState(), or you use your library/wrapper of choice, to navigate (update the URL and create an entry in the window history, enabling Back/Forward support) to e.g. .com/shopping-cart or .com/profile/yourmum/ – all without a page refresh.

Perfect. But… when you save/bookmark/send these URLs, then try to visit them a little later on, you may be disappointed to discover that they don’t exist. The horror!

Why don’t they exist?

Think about it – you’re trying to find a resource located at a specific URL. It has to be served through Apache. Apache is gonna look for that file, because it doesn’t have any idea that you’re looking for a dynamic resource, and even if it did, it wouldn’t know what to send back to help you find it!

Apache can handle HTML History/pushState with .htaccess

Apache was just being mean, earlier. It doesn’t have anything against pushState. In fact, it loves pushState: now every user, instead of requesting 20 pages in quick succession, requests only one page, with those 20 states being requested bit-by-bit (as smaller fragments, or however your site or JS app handles it.)

But it does choke a little bit.

As I mentioned before, it has to follow the rules: when a visitor requests a resource (or a location that looks like a resource) Apache has to look for it, first in the .htaccess file, if any, then in the filesystem to see if it can find a matching directory/file.

It won’t find it, so it throws a 404 error. “I wanted to help,” it mumbles, “I just couldn’t find the damn thing you wanted. Not my problem!”

So we gotta tell it where to look!

Where would it look? Well, where is the JavaScript app that’s going to check the URL and route the page/screen/section accordingly?

For most apps, it’s index.html, which would include in all the JavaScript required to handle this. For example, that’s the page containing your single-page app, in Backbone.js, or jQuery, or just (whoa) plain ol’ JavaScript.

And that’s what this solution assumes.

.htaccess rules for HTML5 pushState support:

So the solution: you add a few lines to your .htaccess file.

These lines check firstly whether the requested filename is NOT a static resource (such as an image, stylesheet, or other asset, so that they don’t all get redirected to index.html), then whether the requested resource is not already index.html (uh oh infinite loops!) and then finally redirects everything to – you guessed it – index.html.

# html5 pushstate (history) support:
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

There might even be a nicer way to write it. I’m no Apache warrior, so to speak, but this works for us.

What does this mean for the visitor?

Obviously, when on the site/single-page app, they don’t notice a thing. Everything works fine.

The kicker is that when they bookmark a page, or email a funny link to their friend, the next time that URL is opened (the one that was navigated to by pushState), Apache will simply direct the visitor to the homepage. At that point, the JavaScript app takes over. Boom.

This works for multiple-levels of nesting, too, which was a big pain-point when finding a solution. Thus the following URL redirects to index.html without a fuss:

.com/profiles/yourmum/images/?starttime=[stalkerishly long time ago]
  -> .com/index.html

At which point the JavaScript code would step in and do it’s nasty business.

Et voila. The .htaccess rules above may not work for everyone and YMMV, but it’s doing it for us.

Further reading:

• Inspired by: mod_rewriting an entire site – workingwith.me.uk. Inspiration also taken from WordPress’ .htaccess rules.
• Nice post: location.hash is dead. Long live HTML5 pushState! – badassJS

Any comments? Suggestions, improvements, errors? You know what to do!

PS. I know, I know. “Don’t use Apache blah blah nginx blah.” I know. But people still use Apache.

# edit: Updated .htaccess rules to be a bit better, based on WordPress permalinks’ .htaccess rules.

Fishing boats in the harbour

The guide book gives a suggested route – heading south and taking in as many of the touristy bits as possible. I suggest you go the opposite way, where you’ll get some fantastic views and be away from the crowds, then do the touristy route afterwards…

The island's main town and beach.

Old fishing boat through trees. Not a permanent fixture.

The town itself is tiny and charming, but with all the bustle of any other Hong Kong harbour village, which I love. I got some great photos of buildings, temples and people doing normal shit, but they couldn’t really capture what it’s like.

Hometown Teahouse sells these amazing red bean cakes for HK $4 (about 30p)

Rickshaw. I can imagine this in a Wes Anderson movie, with four people clinging to it

Signs. Before the neon billboards, I figure they all looked like this

While walking around and taking it all in, enjoying the solitude that’s so rare when you live and work in HK island, it occurred to me that this has been here all along – it just took me over a year to actually come find it.

In hindsight, it’s pretty stunning how easily you can lose that sense of curiosity and fascination that comes with moving somewhere completely new, and let everything become dulled by ‘real life’!

This one pretty much sums up the whole day's exploring, for me.

Watching the sun set over what I can only assume is the South China Sea – my camera having long since expired – I resolved to get out and explore more before I leave this crazy part of the world. And get some comfier boots.

I’m using it in our analytics application to let users compare the money values from assorted items (in different currencies) in a single currency of their choice. Every data table has an option to normalise currencies for all values.

Convert a table of values with money.js

Below you’ll find a table of Christmas-themed adult novelty products. All of the items are in different currencies for some reason (a realistic scenario, if you’ve been scraping data from various websites.)

What if you want to compare the unit price and gross revenue values for each product in a single currency? Try it!

Iframe not loading? You can also view the demo here. I wrote it before Christmas, in case you’re wondering why it’s Christmas-themed!

In this demo, I’m also using underscore.js for data manipulation and client-side templating, jQuery for DOM manipulation/events and accounting.js for number formatting.

The table is built using a very simple underscore.js template, from a matrix of values (array of arrays) representing table rows and individual cells. (If you’re unsure about building tables from data matrices, I wrote a post that deals with it some more, explaining how to format tables of numbers with accounting.js and underscore.js).

The code

The code that does the conversion is a little rough around the edges, but here’s how it breaks down:

• Define the data table as an array of columns (each an object, with title and metadata) and an array of table rows (each an array of table cells). In your application, this data would probably come from an API.
• Use the underscore.js template to draw the table and jQuery to render it.
• When the select box is changed, loop over the table rows (items), and for each one, get the item’s original currency, and use money.js’ fx.convert() to convert the value. Then redraw the table.

Here’s the underscore.js template, some funky syntax highlighting going on there:

<script type="text/template" id="tableTemplate">
    <table>
        <thead>
            <tr>
                <% _(tplColumns).each(function(col) { %>
                    <th data-column="<%= col.key %>"><%= col.title %></th>
                <% }); %>
            </tr>
        </thead>

        <tbody>
            <% _(tplRows).each(function(row) { %>
                <tr>
                    <% _(row).each(function(value, i) { %>
                        <td class="<%= tplColumns[i].type || '' %>">
                            <%= formatCell(value, tplColumns[i].type) %>
                        </td>
                    <% }); %>
                </tr>
            <% }); %>
        </tbody>
    </table>
</script>

So we gots a table header row, with the <th> cells templated from the tplColumns array, and then the table body, with each <th> representing a single item (an array in the tplRows array and each <td> representing a single value. The template relies on a handy formatCell() function, which uses accounting.js to format each table cell’s value, according to its type.

The JavaScript code itself is a little janky, but it works for our purposes:

// Handy callback function to run accounting.js formatting on cells:
function formatCell(value, type) {
    return type === 'number' ? accounting.formatNumber(value)
         : type === 'money' ? accounting.formatNumber(value, 2)
         : value;
}

// On ready:
jQuery(document).ready(function($) {

    // The columns in the table:
    var columns = [
        { title: 'Product',       key: 'name'      },
        { title: 'Units Sold',    key: 'sold',    type: 'number' },
        { title: 'Currency',      key: 'fx',      type: 'fx'     },
        { title: 'Unit Price',    key: 'price',   type: 'money'  },
        { title: 'Gross Revenue', key: 'revenue', type: 'money'  }
    ];

    // The rows of data (corresponding to columns):
    var rows = [
        [ 'His & Hers Prophylactics',         24965, 'USD', 12.99, 324295.35 ],
        [ 'Christmas Stockings, Fishnet',         12600, 'GBP', 16.8,  211680    ],
        [ 'Candy Underwear, Gummy',               8965,  'SEK', 80.5,  721682.5  ],
        [ 'Santa Hat and Santa Suit, Crotchless', 13543, 'EUR', 10.5,  142201.5  ],
        [ 'Vibrating Christmas Crackers x 6',     9954,  'HKD', 108,   1075032   ]
    ];

    // Handy underscore.js template that builds a table from data like the above:
    // (See script tag with template, above)
    var template = _.template( $('#tableTemplate').html() );

    // Template the table's HTML using our data:
    $('#table').html( template({
        tplColumns: columns,
        tplRows: rows
    }));

    // Convert the data:
    $('#currency').change(function() {
        var targetFx = $(this).find(':selected').val();
        var currentFx;

        if ( !targetFx ) return false;

        // Now we're gonna use underscore.js to confapulate the data:
        var newRows = _.map(rows, function(row) {
            // Keeps the original row intact:
            row = _.clone(row);

            // Get the 'from' currency:
            currentFx = row[2];

            // Update the row's currency with the 'target':
            row[2] = targetFx;

            // Convert the numbers yo:
            row[3] = fx.convert(row[3], { from: currentFx, to: targetFx });
            row[4] = fx.convert(row[4], { from: currentFx, to: targetFx });

            return row;
        });

        // Now template the data:
        $('#table').html(template({
            tplColumns: columns,
            tplRows: newRows
        }));

        return false;
    });

    // Reset to original data:
    $('#reset').click(function() {
        // Template the original data:
        $('#table').html( template({
            tplColumns: columns,
            tplRows: rows
        }));
    });
});

Note that the formatting part takes a shortcut and uses predefined indices to find values in the data array (in our app, it’s a little more complicated, as the index of the currency value is unpredictable – so there’s a method to find out which it is, which I’ve left out for brevity.)

This method relies on your using data arrays (e.g. vie AJAX) to build tables dynamically with JavaScript. If your tables are templated on the server-side and delivered as fully-rendered HTML, there are other ways to achieve this result, but I’ll save those for another day.

Any questions, hit me up in the comments!

Bonus points

PS. Here’s the code that loads the data from opeexchangerates.org into money.js, and also builds the drop-down currency select box:

// Get the latest exchange rates from openexchangerates.org:
$.ajax({
    url: 'http://openexchangerates.org/latest.json',
    dataType: 'jsonp',
    success: function(data) {
        fx.rates = data.rates;
        fx.base = data.base;
    }
});

// Get the list of currencies too, and create an extra group in the drop-down:
$.ajax({
    url: 'http://openexchangerates.org/currencies.json',
    dataType: 'jsonp',
    success: function(data) {
        var $optgroup = $('<optgroup label="All Currencies"/>');
        _.each(data, function(name, code) {
            $optgroup.append('<option value="' + code + '">' + name + ' (' + code +')</option>');
        });
        $optgroup.appendTo('#currency');
    }
});

Hope you’ve enjoyed reading this festive exploration of money exchanging extravagance!

Open Exchange Rates API

In a nutshell:

• We’ve added exchange rate data going back to 1999, thanks to the hard work of Sebastian Majstorovic and his epic 390,000-line pull request
• The data is now collected from the public Yahoo! Finance API, which seems to be more accurate and reliable.
• The proxy at openexchangerates.org now supports JSONP requests (like this) by adding a `callback` parameter to the URL. This works for historical files, too.
• The proxy also now downloads, caches and serves the API files statically instead of requesting them from github each time (should be 10x faster, no benchmarks yet though.)

This project has really taken on a life of its own, thanks to a bunch of great people and feedback and the ever-diligent Currency Bot. Check out the homepage if you’ve not seen it yet. The documentation still needs work in the coming weeks.

Oh, and the code is now under MIT license, but the data license we’re still trying to figure out. Anybody a lawyer?

money.js (JavaScript Currency Conversion library)

What’s new:

• Added a license (MIT) which it turns out is a really big deal for people wanting to use the library in commercial applications. Now everyone can do whatever they like, wherever they please.
• Added basic parsing, so you can write e.g. `fx("$1.99 HKD").to("EUR")` and have it work exactly as you’d expect.

Beyond a few fixes and extra comments, not much has changed. It’s still tiny (~1.2kb minified, probably around 0.6kb gzipped) and still does everything you need out of the box, with no dependencies, so give it a shot!

Mail ‘em in!

If you’re using money.js and/or the Open Exchange Rates API in any neat projects, please let me know so I can build a showcase!

By the way – I’m shooting for a post every few days until New Year to clear a several-month backlog of 90%-finished drafts and ideas.

The romantic image of an über-programmer is someone who fires up Emacs, types like a machine gun, and delivers a flawless final product from scratch. A more accurate image would be someone who stares quietly into space for a few minutes and then says “Hmm. I think I’ve seen something like this before.”

money.js – JavaScript currency conversion library

money.js - javascript currency conversion library

money.js is a tiny (1kb) JavaScript library for realtime currency conversion, in the browser and on the server, with zero dependencies. It features simple method chaining and can convert to / from any currency, provided you have the exchange rates for them.

You only need exchange rates relative to one single currency (eg. USD) to be able to convert between any others – money.js does it all for you.

No longer will you need to go wading through shit-heaps of messy, 10-year-old “FREE currency converter javascripts!!1″ code just to add basic conversion to your web-app or online store!

More info, demo, download and docs at the money.js homepage

“But where do we get these exchange rates?” (“Maybe there’s some in that truck!!..”)

The biggest issue with currency conversion has to be sourcing reliable exchange rates without having to sell your mum to pay for the API access. I’ve been wanting to take a stab at that for a long time, and here it is:

The Open Source Exchange Rates API project

The Open Source Exchange Rates API, powered by the lovable (and deadly) Currency Bot

While working on money.js, I realised very quickly that finding a free, reliable source of JSON-formatted, regularly updated data (with no access limits or hidden catches) is, well, impossible. It just doesn’t exist.

Until now!

The Open Source Exchange Rates API provides up-to-date, flexible and portable currency conversion data that can be used in any application, framework or language (not just JavaScript).

It was originally designed for integration with money.js, and hacked together in an afternoon. It’s powered by a simple nodeJS scraper and a list of currencies: every hour, Currency Bot collects all the exchange rates from the Google Calculator API (one by one), then pushes them in JSON format to a public GitHub code repository for everybody to use.

The rates are available historically for any day since the project started, and could soon be extended to provide data going back several years.

Also, it’s mirrored on openexchangerates.org, which sends files with friendly Access-Control HTTP headers for cross-origin resource sharing (CORS) – so that they can be loaded into an app or page via AJAX.

I would write more, but I’m shattered after waking up at 6am to get Currency Bot out of his can’t-scrape-won’t-scrape funk (he had a few teething problems.) He’s back on form and collecting data like a boss – you can see it at the currencybot/open-exchange-rates GitHub repository.

Learn more about using the free service at the Open Source Exchange Rates API homepage!

The next step

Wow. I’ve wanted to get these two done for a long time, and now I’m left scrambling to find something else to do – lucky for me, there’s plenty. Here’s the future plans for these two projects (if you feel you can contribute, please get in touch!)

• Find a way to do a once-off retrospective crawl of historical exchange rates going back as far as possible. This will almost certainly involve abusing another free but non-user-friendly or rate-limited service. Open to suggestions.
• Package up money.js into a npm module so that you can go npm install moneyjs.
• Write documentation for how to use the Open Source Exchange Rates API in the most popular languages and frameworks
• Write a full test suite for money.js
• And a bunch more – all I can say is, hit ‘watch’ on the GitHub repositories (here and here) and follow me on twitter here if you’re interested and want to keep up to date.

Thanks for reading!

Early attempts at recursion caused a RangeError, so I limited myself to 2 levels of depth #boom

(Click for full size)

Actually, I just thought it would look cool, although some sobering but expected family news later that night made me realise that perhaps there’s something meaningful in it, or some reason I painted it – it’s kinda like I cant really see myself. One thing’s for sure: I’m no Picasso.

Still, I think it’s important for people who spend all day writing code (and/or pushing pixels) to occasionally get away from the screen and throw some paint around, or create some art that requires tactile sensations, so we’ll definitely be doing this again.

As an aside – mixing paint is nothing like in PhotoShop, and the colours never seem to resemble hex colours. I couldn’t get my favourite colour, #BADA55, no matter how hard I tried. Luckily they had a shade of blue that matched my shirt exactly!

It seemed like a cool enough concept to warrant taking a break from that project and indulging in an all-night coding marathon to get it finished. Work the next day was painful, but I’m pretty pleased with how version 0.1 came out.

Introducing the javascript sandbox console

The 0.1 release features a pretty design, up/down command history (with localStorage saving), basic syntax highlighting for output and some other cool features.

javascript sandbox console demo • github repository

It’s seriously easy to style with CSS (I’ll add some extra skins soon) and to install on your library/plugin’s homepage. Do it! Your users will thank you.

What’s more, it’s entirely programmable through the global sandbox object, so you can manually feed it commands for the user to try (as on the demo.)

Oh, and it’s not tested in IE, as of publishing, because I don’t have my windows laptop with me.

Enjoy!

The js sandbox console is a javascript playground designed to enhance demos and homepages for javascript libraries, plugins and scripts, giving visitors an easy and chilled-out way to test-drive the functionality – without whacking open their Firebug / Dev Tools console.

The idea is inspired by jsconsole.com and was built with Backbone.js and jQuery, in a strange and terrible all-night code-off. Then tidied up a bit the next day.

PS:

Make sure to hit ‘watch’ on the repository, as it will be getting a bunch of fixes and improvements in the next few months. Please make issues if you find any bugs or have suggestions, and feel free to contribute code.

You can pass this method the ‘slug’ of any screen (module) in the app, plus any number of arguments and it builds a URL for them. Each of the args is separated by a ‘/‘.

Arrays are joined with commas, functions are executed, objects are strigified via jQuery’s $.param, and strings/numbers are just given as-is.

// Build URL for any screen:
urlify: function(slug) {
	slug = slug || "";

	// Create array of strings from arguments:
	var args = _.map(Array.prototype.slice.call(arguments, 1), function(arg) {
		// Join arrays, evaluate functions, stringify objects, leave strings/numbers:
		return _.isArray(arg) ? arg.join(',') : _.isFunction(arg) ? arg() : _.isObject(arg) ? $.param(arg) : arg;
	});
	return (!Backbone.history.options.pushState ? '#' : '') + slug + '/' + ( args.length > 0 ? args.join('/') + '/' : '' );
}

// for example:
Model.urlify('screen-name', 1253431, ["a","b","c"], {a:1});
// => "#screen-name/1253431/a,b,c/a%5Bb%5D=1/"

What the hash?

Note the (!Backbone.history.options.pushState ? '#' : '') ?

When supporting pushState in Backbone.history, some browsers will use e.g. app.com/#page, while others will use simply app.com/page.

But what about when you need to template in links to other sections of your app, but you’re not sure if the user’s browser supports pushState?

I got your back, bro. What this function does is inserts a hash # when pushState is not supported, so that inter-linking modules still get routed to the correct place.

Not sure if any of this makes sense, as currently a little tipsy – will update tomorrow with better info and examples.