Alex MacCaw

How to travel around the world for a year.

While my last post covered my previous year traveling, writing and programming, this article will go into the specifics of planning your own round the world trip, including flights, costs, activities and accommodation. I'll show you how affordable traveling actually is, and how to plan your own adventure.

"Travel is fatal to prejudice, bigotry, and narrow-mindedness." - Mark Twain

I think it's especially important for people to get out of the Silicon Valley echo chamber, to travel and get some perspective. Traveling opens your eyes to some of the real problems people face, and gives you the opportunity to come up with solutions to tackle those, rather than some of the more trivial ideas closer to home. You can't fail to come away from traveling inspired with a fresh perspective and new ideas.

Choosing where to go

Choosing where to go can be overwhelming at first, especially when you have no idea about the countries involved. I'd been to South Africa for three months the previous year, so I decided to start with some familiar territory to get into the rhythm of traveling.

For the subsequent countries, I visited Trey Ratcliff's HDR photography blog, stuckincustoms.com. In fact all the photos in this post are taken by Trey. The guy has travelled the world and been to some incredible places. I simply went through the countries he crossed, and added the most beautiful ones to a list. Ultimately that list ended up as:

South Africa, Hong Kong, Singapore, Malaysia, Thailand, Cambodia, Vietnam, Japan, Australia, New Zealand, Hawaii, NYC, SF, Costa Rica, Panama, Peru, Bolivia and Argentina.

My aim was to see as much as possible in that one year, and then revisit places properly in the future. If you don't have as much time, I'd recommend focusing on an area, perhaps Asia. For example, for my next trip I'm planning to:

Start in Beijing. Take the train to Tibet. Go down to Nepal. Travel overland to India. Make my way down to Mumbai. Fly to South East Asia and travel through northern Thailand, Cambodia, Vietnam and Laos.

So in other words, where you want to go depends on your time, budget and inclination.

Organizing flights

Round the world air tickets have made traveling a piece of cake compared to the hassle of the past. My grandpa had to fly with the Queen's Messenger to Bhutan in a decrepit plane, which lost one of its engines half-way through the flight, and had to perform an emergency crash landing. To top it off, after the necessary repairs were made, he was asked to continue his journey in the same plane! How times have changed.

You can either book your flights individually, which gives you the maximum flexibility, or book them all at once with a round the world plane ticket; the cheaper option. I chose the latter, as the amount of flights I needed wasn't going to make buying them separately economically viable.

Round the world ticket prices range from around ~$3k to ~$7.5k USD. I got 16 flights for about $7k, but it really depends on the time of year, the areas you're flying to and where you start your journey. One good tip is to start and end your journey in a less affluent country, as ticket prices are usually much cheaper.

I used oneworld for my ticket, and I'm pretty happy with them. They're a conglomerate of AA, BA, JA, CP and others, and offer a convenient online booking tool to plan your journey; no point giving commission to a travel-agent when you can plan it yourself. One advantage of oneworld is that they let you change the dates of your flights for free. Location changes aren't free, so make sure you get those right the first time.

RTW tickets have a number of restrictions, which differ from airline to airline. Some of them limit the amount of miles you can fly, others the actual number of flights. Most only let you fly in and out of a continent once, and require you to fly in a general direction (i.e. always east). You have to spend a minimum of 2 weeks in each place, and most tickets expire after a year. The reason behind the limitations is that they don't want people using them for commuting, so keep that in mind when buying them.

I advise you to use the round the intercontinental flights for the long continental flights, and then if necessary book short internal ones. Asia and South America are pretty easy to get around without having to take flights everywhere, whether it's by the local buses, coaches, buying a car or hitch hiking. I definitely recommend you to restrict air travel as much as possible, and instead travel by land; you'll see and experience much more.

Packing

Pack as lightly as possible as you'll need to carry everything you take with you on your back. This is especially important from a security standpoint too, as the more you take, the more you'll have to keep an eye on.

I just bought a 90 liter rucksack off ebay, and stuffed one weeks clothing into it, a towel and my camera setup. In Malaysia I actually sent back my tripod and wet suit, they were too unwieldy and heavy to take any further. Anything you don't take and find you need, you can buy locally. In fact, this minimalistic lifestyle has stuck with me, and is one of the things I most appreciate about traveling.

Budget & Accommodation

Accommodation is easy, especially when you travel through some of the cheaper places in Asia. I was on a bit of a budget, so generally ended up in hostels - except for the odd hotel in Asia and South America. Good hostels aren't hard to find, especially when you can do a bit of research online. Hostel World is a good start, along with the Lonely Planet and Wikitravel. Some places are really well set up for travelers, like New Zealand, while it can be trickier in others, such as Hawaii and Japan.

Hostels are also a great way of meeting people and getting advice on where to go. You'll always find interesting people; I've met semiconductor chip designers, professional divers and quantum encryption experts. I've met traveling companions and created friendships I'll have for life. This is half the fun of traveling.

As for the total budget, I planned for about $15k for the whole year, for both accommodation and food. It turned out that number was about right, and I wasn't living too cheaply either - eating out every night at local restaurants. It's always a good idea to have a buffer in the bank though, for the peace of mind.

Cash and Electronics

All the countries I went to had ready ATMs to hand, so getting cash wasn't an issue. My card was cancelled three times though by my bank, suspecting fraudulent activity. I advise you inform your bank of your travel plans, so as not to run into this problem. Take out a few credit cards, and stash them in different places to be on the safe side. Even better, try to find cards that don't charge your an international transaction charge, as this can quickly add up. A lot of places won't accept cards, so you'll need cash on hand.

I didn't bother with a mobile phone for the entire year, instead just using an iPod touch and Skype. This isn't as crazy as it sounds, and it's actually a good feeling to disconnect and go. People can get in touch with you when you choose. If you do take a mobile, get an international plan and keep an eye on it - they can get stolen pretty easily.

I took a Nikon SLR and Macbook everywhere, as well as a bunch of other electronics. Frankly the world isn't the wild west that some people seem to think it is, but you just have to use common sense and keep things close to hand. I may have just been lucky, but in my whole trip, I didn't have a single thing stolen.

Plugs (sockets) are something to research too. Whilst most of Asia has similar plugs, you can get caught out from time to time. Likewise none of the plugs in Latin America are grounded, so three pronged US plugs won't fit. Getting an international plug adapter is a good idea!

Wifi is available practically everywhere (Vietnam often has better internet than the US in my experience), and the only trouble I had finding it was some of the remotest parts of Africa. If you are going somewhere particularly remote then you might want to invest in a 3G dongle. Buying it locally is usually the cheapest option.

Activities and Planning

Don't, whatever you do, choose a package. I just booked the first two nights in the city I was flying into, and then took it from there. Sometimes I wouldn't even do that, and just fly in. You have to leave room for spontaneity in your plans, don't try and plan everything in minutia. Your plans will generally change anyway when you arrive and get advice from other travelers. Be flexible and adapt.

I personally didn't use guide books, but the staple guide is the Lonely Planet. Buy these in the countries when you arrive. If you buy them locally, or in the airport you'll overpay.

WikiTravel is a great resource, and one I used every day. However, the best resource is advice on the ground from fellow travelers and locals. I used to jot down all the great advice they gave in a little black notebook. And it doesn't have to be advice about the country you're currently in. I remember an Argentinian guy I met who drew a map of South America in my book, listing all the places he recommended in Peru and Chile.

Companions

Companions are down to you. I personally prefer traveling alone, forcing you to meet more people and make friends along the way. If you do travel with people, make sure you're good friends, as traveling for extended periods can get frustrating.

Visas

If you're lucky enough to be an American or European citizen, then visas are not an issue. The only country that wouldn't give me a visa at the border was Vietnam, and I just paid a guy at a Cambodian hostel to take my visa to the Vietnamese embassy and process it. It's worth doing a bit of research on this in advance, but it usually isn't a problem.

Health insurance

For health insurance I just used World Nomads. They've fairly competitive rates, and are one of the more dependable options.

That said, it's often a case of staying lucky and not doing anything stupid. All the insurance in the world won't help you if you have an emergency in a remote part of Africa.

Lifestyle

I'd usually stay in the same place for at least a few days, sometimes up to a week, before moving on. However, when you're moving so much it's sometimes nice to have a bit of grounding every now and again. Whenever I got this feeling I'd stop for a few weeks, and stay in one place. For example, I did this for two weeks in Ho Chi Minh, when I needed to make some progress on the book.

As for exercise, if I wasn't surfing I usually ran along the beach for at least half an hour. Having more time you can dedicate to your health is one of the major benefits of traveling. After a few months of surfing and running every day I was the fittest I think I'll ever be.

I found I needed some intellectual stimulus too, and writing the book was my way of achieving this. Without that I'd have to occupy my mind with other pursuits, such as reading and programming. It's important to keep this intellectual balance in mind, especially when you're traveling for an extended period.

When I finished the book, I started hacking on open source projects, and created Spine. In fact, the first version was written on a particularly long bus ride in New Zealand. It's amazing how you can plug in the earphones, zone out the distractions and focus wherever you are.

Whenever I was traveling to a new city, I pinged the Ruby mailing lists a couple of days before hand to see if anyone was interested in meeting up. More often than not it worked out, and I had people to hang out and ask for advice. In Tokyo and Hong Kong I gave tech talks, whilst in Sydney and Cape Town I ate out with the local Ruby teams.

Programming communities can give you an immediate link and base in a new city, they're an incredible resource.

Experience

Traveling round the world you will you see and experience more than you ever thought possible. You will eat like a king, from delicious fruits you've never heard of in Malaysia, to the best steak you've ever tasted in Argentina. You'll climb mountains in New Zealand and hike down Canyons in Peru. You'll surf incredible breaks in Costa Rica and party like there's no tomorrow. You'll meet some amazing people and have life changing experiences.

Quite simply, traveling the world will be one of the best decisions you'll ever make.

Total cost

So the net cost for the trip was about $22k. I paid for the vast majority of this with one month's consultancy beforehand. That's crazy when you think about it, one month's consultancy in return for a year traveling. And I certainly didn't hold back with the budget, I met a lot of people doing it for much cheaper. Where there's a will, there's a way.

It's also possible to turn this into a lifestyle by paying for it on the road. If you're a programmer, you can definitely contract remotely, even if it's only for part the year. Your clients don't care where you are, only that you get the work done. The process for getting yourself into this position is the same as becoming a successful contractor. Practice and networking.

The only other thing to consider is that quite frankly, time is running out. The older you get, the more baggage you'll get tied down with, and the harder it is to do something like this. You should be optimizing for experience in your life, rather than money.

Motivation consists of two things, increasing 'want' and increasing feasibility. In other words, to motivate you need to increase the desire for something, and increase the reality of attaining it. Hopefully I've done both with these posts. It'll be great to see more programmers traveling.

Traveling, Writing and Programming

In a nutshell, my year so far has consisted of:

Traveling for 10 months around the world through 17 countries covering Africa, South East Asia, Australasia and North, Central and South America. The trip was centered around surfing and photography
Presenting in Hong Kong, Japan, the US and London
Writing a book for O'Reilly as I went, titled JavaScript Web Applications
Writing another book on CoffeeScript, soon to be published by O'Reilly.
Doing a ton of open source libraries, such as Spine, Spine.Mobile, GFX, and Juggernaut.
Building a startup prototype
Presenting at FOWA
And finally, landing a job at Twitter

So, let me start a year ago, in September 2010. I had just left a startup I'd co-founded, and whilst the experience was useful, I was feeling bit burnt out from the incredibly long working hours involved. I was back in England and needed to make some decisions. A long held dream of mine was to move (if only for a few years) to the US, so I wrote the following in Google Notebook:

Choices in life:
  Do a bachelors at Columbia in NYC
    Downside - v expensive, not much to learn practically, boring?
    Upside - it's a uni in NYC!
  Write a book and apply for an O1 visa
    Downsides - very time consuming, risky
    Upsides - good for career, interesting
  Wait. Just go to NYC for a holiday (3 months). Wait for startup visa.
    Easy option - not very interesting

Maybe do 2, falling back to 3?

In the end I decided to do option 2, to write-up a book idea I'd been mulling over on JavaScript web applications, and what better way to write a book than traveling round the world, another dream of mine. I bought a round the world plane ticket through oneworld (cheaper than you'd expect) and set off the next week to my first destination, South Africa.

If you've never been to Africa, you should. Its scenery is raw and beautiful, hard to describe eloquently to those who haven't experienced it. I had fallen in love with South Africa the previous year, doing a surfing tour up the East coast for three months. This time I only had time for one month, traveling through the Transkei up from Cape Town to Durban. As I travelled North, I started writing, fleshing out some of the chapter ideas I'd proposed to O'Reilly earlier.

The Transkei is an extremely rural part of South Africa, consisting of rolling hills, small villages and mud huts. They still have a chieftain hierarchy and a king, and most locals survive off the land and by fishing. It takes about two days driving on a heavily potholed road to reach my favourite spot, a beautiful cove called Coffee Bay. From there I would charge up batteries and save some articles offline in preparation for further expeditions up the coast.

I vividly remember walking miles down the untouched beaches, traveling from village to village, alone apart for the sand and the waves. At one stage I came across a swollen river, and rucksack held aloft managed to swim across it without drenching my Nikon and iPod. Africa is a place to lose yourself, to free up your mind, and to work out what's really important in life.

The next stop was Hong Kong, where I had my 21st birthday, and then I traveled by land from Singapore to Hanoi. What most people don't realize is that Hong Kong is 70% national park, and I had a great time hiking some of the spectacular routes, such as the Dragon's Back. Some days I'd hang out at boot.hk, a co-working space, and teach a fellow traveler Ruby. Then, at night, I'd party with some couchsurfers in Soho till the early hours.

Traveling through Thailand, Cambodia and Vietnam was probably my favorite part of the trip, and if you have never been through Asia, you really should. The countries are beautiful, the weather fair, the food delicious and the people friendly. Angkor Wat is one of the wonders of the world, and should be on everyone's bucket list. It was Trey Ratcliff's photographs that inspired me to go there, and indeed many of my other destinations. That man was a catalyst for the trip in the first place.

On some obscure blog, I'd heard tell of a remote and beautiful island off the coast of Cambodia. It spoke of a bar in Sihanoukville, where I could organize a fishing boat out to the place. I, along with some really good friends, took the night bus to the town, and started looking for this legendary bar. The search lasted most of the day, each bar I'd inquire at sending me to another. Finally, I found the place, and organized a shuttle to take us the next morning.

The photo above is of the beach outside our $10 a night shack. Apart from the local inhabitants, our group was alone on the island, free to rein as we pleased. During the day we'd laze on the beach, eating incredible fruit salads the island's chef had prepared, then at night we'd swim in the sea amongst all the glowing plankton.

Next stop was Vietnam, and we traveled along the Mei Kong's tributes to reach a border town. There, we were the only westerners, and communicating was definitely an issue. Luckily we found what must have been the only English speaker in town, and he gave us a tour on his bicycle. His help was especially useful when my credit card got gobbled up by an ATM!

Our group parted ways, and by the time I'd reached Vietnam the book was well underway and coming along nicely. I stayed a few extra weeks in Saigon to really make some progress on the chapters, and was around for the Chinese New Year's celebrations, which were truly spectacular.

Next was Japan, Australia, New Zealand and Hawaii. I can't possibly cram into this post all the experiences I had, but suffice to say it was the time of my life. It's incredible that so much beauty can be packed into one country, but that's New Zealand for you. Some of my fondest memories are running at sunset around the lake at Wanaka, or hiking for days through the mountains along the Routeburn, carrying all my food and supplies. I made some lifelong friends traveling around that country; it's truly a piece of paradise.

By the time I'd circumnavigated New Zealand's South Island, the book was practically finished and submitted to the technical reviewers.

Next up were New York and San Francisco, two incredible cities containing some brilliant developers, some of whom I'm lucky enough to call my friends. Techcrunch Disrupt was awesome (I can highly recommend the hackathon), as was 'adopt a coder'.

During my stop-over in New York and San Francisco, I did a ton of interviewing at various companies and landed a job at Twitter where I'll be working on the front-end. I'm absolutely stoked to be working there with such an awesome team, and also by the move to San Francisco, a lifelong dream of mine.

Whilst the visa was being assembled, I traveled through Central and South America, hacking on my pet project as I went: a JavaScript MVC library called Spine. I traveled down Costa Rica, Panama, Peru, Bolvia and Argentina. Peru was easily my favourite, and although I had some trouble with the altitude, I had an incredible time exploring. The picture below is of one of the Colca Canyon's fabled Condors, taken whilst I was climbing down the canyon, the world's deepest.

When I was in Costa Rica, I got a tweet from a guy called Roberto, saying he'd read the book and was I interested in doing a surfing tour. Of course I readily agreed and took the bus to San Jose, meeting him a few days later. During the day we'd hack on Spine and Ruby projects at his beach-side condo, using the mobile dongle and car batteries to power our laptops. Then, when the power was low, we'd go out surfing as the solar panels did their work.

I can highly recommend writing a book, especially combining it with traveling. Indeed, if I didn't have my sights set on San Francisco, I have a feeling I'd still be traveling, consulting and making startups. Being an author won't make you much money directly, but it will definitely raise your profile and provide you with many more opportunities indirectly. In fact, what I most enjoyed about the process was being able to research and know a subject matter really deeply.

The last year has been the best year of my life, and I have a feeling the next will be better still. While I've settled down for the time being, I don't think I'll ever shake the lure of traveling; I still carry my passport in one pocket, and my wallet the other, ready to leave at a moments notice.

However, this post is not just about my travels, there's a message to it:

The peculiar thing about programmers is that they're the one profession that can easily work remotely and travel, and yet they're the one profession that doesn't. Of course there are exceptions, but on my travels I didn't meet another programmer doing anything similar; a sad state of affairs. My message to fellow programmers is stop making excuses, man up and do it. You only live once, and I guarantee that you will have the time of your life.

As for me, I feel incredibly fortunate to be in the position I'm in, to have found my passion and to be doing what I love every day. That said, much of my current situation is no accident or fluke, but rather the result of planning, goals and work.

The harder you work, the luckier you get

The point of this post isn't some self-aggrandizing narcissistic pontification, but rather to demonstrate that setting goals works, and to inspire people to do likewise. Work out where you are now, where you want to be in a year, and set-down a series of concrete steps that will get you there. Follow your dreams.

Asynchronous UIs - the future of web user interfaces

It's an interesting time to be working on the frontend now. We have new technologies such as HTML5, CSS3, Canvas and WebGL; all of which greatly increase the possibilities for web application development. The world is our oyster!

However, there's also another trend I've noticed. Web developers are still stuck in the request/response mindset. I call it the 'click and wait' approach - where every UI interaction results in a delay before another interaction can be performed. That's the process they've used their entire careers so it's no wonder most developers are blinkered to the alternatives.

Speed matters; a lot. Or to be precise, perceived speed matters a lot. Speed is a critical and often neglected part of UI design, but it can make a huge difference to user experience, engagement and revenue.

Amazon: 100 ms of extra load time caused a 1% drop in sales (source: Greg Linden, Amazon).
Google: 500 ms of extra load time caused 20% fewer searches (source: Marrissa Mayer, Google).
Yahoo!: 400 ms of extra load time caused a 5–9% increase in the number of people who clicked “back” before the page even loaded (source: Nicole Sullivan, Yahoo!).

Yet, despite all this evidence, developers still insist on using the request/response model. Even the introduction of Ajax hasn't improved the scene much, replacing blank loading states with spinners. There's no technical reason why we're still in this state of affairs, it's purely conceptual.

A good example of the problem is Gmail's 'sending' notification; how is this useful to people? What's the point of blocking? 99% of the time the email will be sent just fine.

As developers, we should optimize for the most likely scenario. Behavior like this reminds me of Window's balloon notifications, which were awesome for telling you about something you just did:

The solution

I've been working on this problem, specifically with a MVC JavaScript framework called Spine, and implementing what I've dubbed asynchronous user interfaces, or AUIs. The key to this is that interfaces should be completely non-blocking. Interactions should be resolved instantly; there should be no loading messages or spinners. Requests to the server should be decoupled from the interface.

The key thing to remember is that users don't care about Ajax. They don't give a damn if a request to the server is still pending. They don't want loading messages. Users would just like to use your application without any interruptions.

The result

AUIs result in a significantly better user experience, more akin to what people are used to on the desktop than the web. Here's an example of an AUI Spine application with a Rails backend.

Notice that any action you take, such as updating a page, is completely asynchronous and instant. Ajax REST calls are sent off to Rails in the background after the UI has updated. It's a much better user experience.

Compare it to the static version of the same application, which blocks and navigates to a new page on every interaction. The AUI experience is a big improvement, that will get even more noticeable in larger (and slower) applications.

Have a browse round the source to see what's going on, especially the main controller.

Not a silver bullet

It's worth mentioning here that I don't think this approach is a silver bullet for all web applications, and it won't be appropriate for all use cases. One example that springs to mind is credit-card transactions, something you'll always want to be synchronous and blocking. However, I do believe that AUIs are applicable the vast majority of the time.

The other point I'd like to make is that not all feedback is bad. Unobtrusive feedback that's actually useful to your users is completely fine; like a spinner indicating when files have synced, or network connections have finished. The key thing is that feedback is useful and doesn't block further interaction.

The implementation

So how do you achieve these AUIs? There are a number of key principles:

Move state & view rendering to the client side
Intelligently preload data
Asynchronous server communication

Now, these concepts turn the existing server-driven model on its head. It's often not possible to convert a conventional web application into a client side app; you need to set out from the get go with these concepts in mind as they involve a significantly different architecture.

Moving state to the client side is a huge subject and beyond the scope of this article. For more information on that, you might want to read my book: JavaScript Web Applications. Instead in this post I want to focus in on a specific part of AUIs; asynchronous server communication, or in other words: server interaction that's decoupled from the user interface.

The idea is that you update the client before you send an Ajax request to the server. For example, say a user updated a page name in a CMS. With an asynchronous UI, the name change would be immediately reflected in the application, without any loading or pending messages. The UI is available for further interaction instantly. The Ajax request specifying the name change would then be sent off separately in the background. At no point does the application depend on the Ajax request for further interaction.

For example, let's take a Spine Model called Page. Say we update it in a controller, changing its name:

page = Page.find(1)
page.name = "Hello World"
page.save()

As soon as you call save(), Spine will perform the following actions:

Run validation callbacks and persist the changes to memory
Fire the change event and update the user interface
Send an Ajax PUT to the server indicating the change

Notice that the Ajax request to the server has been sent after the UI has been updated, in other words what we've got here is an asynchronous interface.

Synchronizing state

Now this is all very well in principle, but I'm sure you're already thinking of scenarios where this breaks down. Since I've been working with these types of applications for a while, I can hopefully address some of these concerns. Feel free to skip the next few sections if you're not interested in the finer details.

Validation

What if server validation fails? The client thinks the action has already succeeded, so they'll be pretty surprised if subsequently told that the validation had failed.

There's a pretty simple solution to this: client-side validation. Replicate server-side validation on the client side, performing the same checks. You'll always ultimately need server-side validation, since you can't trust clients. But, by also validating on the client you can be confident a request will be successful. Server-side validation should only fail if there's a flaw in your client-side validation.

That said, not all validation is possible on the client-side, especially validating the uniqueness of an attribute (an operation which requires DB access). There's no easy solution to this, but there is a discussion covering various options in Spine's documentation.

Network failures & server errors

What happens if the user closes their browser before a request has completed? This is fairly simple to resolve, just listen to the window.onbeforeunload event, check to see if Ajax requests are still pending, and if appropriate notify the user. Spine's Ajax documentation contains a discussion about this.

window.onbeforeunload = ->
  if Spine.Ajax.pending
    '''Data is still being sent to the server; 
       you may lose unsaved changes if you close the page.'''

Alternatively, if the server returns an unsuccessful response code, say a 500, or the network request fails, we can catch that in a global error handler and notify the user. Again, this is an exceptional event, so it's not worth investing too much developer time into. We can just log the event, inform the user and perhaps refresh the page to re-sync state.

ID generation

IDs are useful to refer to client-side records, and are used extensively throughout JavaScript frameworks like Backbone and Spine. However, this throws up a bit of a dilemma - where are the IDs generated, the server or the client?

Generating IDs on the server has the advantage that IDs are guaranteed to be unique, but generating them on the client side has the advantage that they're available instantly. How do we resolve this situation?

Well, a solution that Backbone uses is generating an internal cid (or client id). You can use this cid temporarily before the server responds with the real identifier. Backbone has a separate record retrieval API, depending on whether you're using a cid, or a real id.

Users.getByCid(internalID)
Users.get(serverID)

I'm not such a fan of that solution, so I've taken a different tack with Spine. Spine generates pseudo GUIDs internally when creating records (unless you specify an ID yourself). It'll use that ID to identify records from then on. However, if the response from an Ajax create request to the server returns a new ID, Spine will switch to using the server specified ID. Both the new and old ID will still work, and the API to find records is still the same.

Synchronous requests

The last issue is with Ajax requests that get sent out in parallel. If a user creates a record, and then immediately updates the same record, two Ajax requests will be sent out at the same time, a POST and a PUT. However, if the server processes the 'update' request before the 'create' one, it'll freak out. It has no idea what record needs updating, as the record hasn't been created yet.

The solution to this is to pipeline Ajax requests, transmitting them serially. Spine does this by default, queuing up POST, PUT and DELETE Ajax requests so they're sent one at a time. The next request sent only after the previous one has returned successfully.

Next steps

So that's a pretty thorough introduction into asynchronous interfaces, and even if you glossed over the finer details, I hope you've been left with the impression that AUIs are a huge improvement over the status quo, and a valid option when building web applications.

If you're interested in building AUIs, you should definitely check out Spine, and Spine's Ajax guide.

HTML/XML Parsing with Node & jQuery

I had to do some HTML parsing recently to convert some markdown into the format required for Nettuts+ tutorials. It required moving various elements around, adding classes and appending some new elements.

Now normally I'd go with Ruby's de-facto solution to XML parsing, Nokogiri. However, I quickly ran into issues which, combined with the library's class based excuse for documentation, made me decide to take a different approach.

One thing I realized was that jQuery's API is perfect for this scenario, especially when it comes to traversing and manipulation. If only there was a Ruby equivalent with a similiar interface?

Then it struck me, forget Ruby, let's just use Node and jQuery. In fact, there's already a jQuery npm package to do this which includes a HTML parser and DOM emulator.

First, install the necessary npm dependencies (in the app's directory):

npm install -g coffee-script
npm install jquery node-markdown

Then create a CoffeeScript Cakefile:

fs = require('fs')
$  = require('jQuery')
md = require('node-markdown').Markdown

task 'build', 'Build index.html', ->
  # Read in file
  html = fs.readFileSync('./index.md', 'utf8')

  # Convert to markdown
  html = md(html)

  # Create jQuery object
  doc  = $('<body />').append(html)

  # Insert <hr /> before all <h2 /> elements
  doc.find('h2').before('<hr />')
  doc.find('hr:first').remove()

  # Correct pre syntax
  doc.find('pre code').each ->
    $(@).parent().html $(@).html()
  doc.find('pre').attr('name', 'code').addClass('cs')

  # Remove images from p tags, and wrap them correctly
  doc.find('p img').each ->
    parent = $(@).parent()
    parent.after $(@)
    parent.remove()
  doc.find('img').wrap('<div class="tutorial_image" />')

  # Add required class to blockquotes
  doc.find('blockquote').addClass('pullquote pqRight')

  # Write out file
  fs.writeFileSync('./index.html', doc.html())

Now tell me that syntax isn't concise and beautiful, a vast improvment over XML parsing with other libraries.

Our build task can be invoked by running cake build, generating the resultant index.html file.

Now, of course this approach won't be suitable for all use cases. For example, I've no idea of the script's performance. However for my needs, where it only needs to be run once, it's ideal. If needs be, we could even pipe the resultant HTML back to Ruby via STDOUT.

Sprockets Schmockets! CommonJS Is The Future For Rails JavaScript Packaging

Rails 3 has certainly had its detractors, but on the whole I think it's a huge improvement, with a brand new router, Action Mailer API and tons more. I'm also stoked that we're seeing some of Merb's influence when it comes to modularization and Rack.

One of these new features is the Asset Pipeline, a dependency management system using a integration version of Sprockets. This is one of the most heralded feature of the latest release, and the subject of DDH's latest keynote address.

Assets, such as JavaScript and CSS files, have been made first class citizens with their own app/assets folder, and Sprockets will now manage their dependencies intelligently using meta comments. This means that developers can structure their JavaScript and CSS files properly, so they don't end up in a huge slurry of unmaintainable and often redundant code.

# signal_id.js
//= require ./identity_validation
//= require ./toggle_credentials
//= require ./launchbar

This is an admirable aspiration, and indeed a great step forward. However, I can't help thinking that a huge opportunity was lost here, namely CommonJS modules. In my opinion, CommonJS modules are the best system for JavaScript dependency management. Here's a quote from my book JavaScript Web Applications explaining the benefits:

Not only have we split our code up into separate module components, the secret to good application design, but we've also got dependency management, scope isolation and namespacing.

If you've ever use Node or Python you've used CommonJS modules, whether you realize it or not. In a nutshell, CommonJS modules give you require and exports, letting you require other modules and expose variables to other modules. For example:

// example.js
exports.hello = function(){ return 'hello world'; };

// application.js
var example = require("example");
example.hello();

Although their syntax is simple, I can't emphasize enough how useful CommonJS modules are. They go a long way to solve conflicts and variable pollution problems in JavaScript - two absolutely critical pieces to JavaScript dependency management that Sprockets completely omits. Although Sprockets is arguably more compatible with existing JavaScript libraries, I think the Rails team should be pushing people towards a better solution, even if it has more of an initial learning curve.

However, I don't want to offer a lot of criticism without also offering a solution and so, dear reader, here it is: Stitch. Stitch is a Ruby port of the original Node library by Sam Stephenson, and brings CommonJS modules to your Rack and Rails programs.

Installation is simple, just specify the gem in your Gemfile, and include something like the following in your application's routes.rb:

match '/application.js' => Stitch::Server.new(:paths => ["app/assets/javascripts"])

Now if you browse to /applications.js, you'll see a bundled file of all the scripts present under app/assets/javascripts, wrapped in the CommonJS format. In other words you can start structuring your JavaScript files as CommonJS modules, and Stitch will make sure they'll all wrapped correctly.

Stitch will automatically compile any CoffeeScript files in the directory, and you can easily add additional compilers if required. Check out the documentation & source for more information.

In conclusion, CommonJS modules are an excellent way of managing JavaScript dependencies and using Stitch is an good way of integrating them with Rails.

Thanks to Peter Cooper for the title and advice, as well as Julio Ody and Elliot Kember.

My book and other news

Well, according to this blog I'm still in Cambodia. Unfortunately, that's way out of date, I've been through Cambodia, Vietnam, Australia, New Zealand and am now in Hawaii - I've just been really negligent in updating the blog. What's the ~~excuse~~ reason for all the radio silence? Well, I've just finished writing the first draft of that JavaScript Book for O'Reilly I mentioned a while back.

You can get the rough cuts version right now off O'Reilly's site. Here's a bit of blurb to explain it:

Stateful JavaScript Applications is a new book by Alex MacCaw, published by O'Reilly, written to help you build the next generation of rich internet applications. Building rich JavaScript applications that bring the desktop experience to the Web is now possible, thanks to powerful JavaScript engines and the CSS3 and HTML5 specifications. The key is moving state from the server to the client side; but that’s no simple task. This book takes you through all the steps necessary to create state-of-the-art JavaScript applications, including structure, templating, frameworks, communicating with the server, and many other issues.

The core of the book covers the MVC (Model, View, Controller) pattern, and how to best structure and manage dependencies inside your JavaScript applications. State management and routing is also covered, with a special emphasis on using hash fragments in the URL, and HTML5's history API. Learn about rendering views with client-side templates and data binding. New APIs, such as HTML5 drag/drop, WebSockets, file reading and Ajax file uploading are explained in detail, with practical real-world examples given at ever stage.

Penultimately the book covers the testing and deployment stage of building web applications. Finally, if you're keen to learn more about Backbone, JavaScriptMVC, or Spine, we have chapters in the appendix giving your a full introduction to each framework, as well as step by step tutorials for building example applications. If you want to see a full table of contents, see the pre-release site.

Traveling & writing

Traveling and writing wasn't as difficult as I first thought it might be; it beats working and writing, that's for sure. I just took an hour or two every evening for writing, and progressed slowly but steadily. Often I didn't have internet access for a few days, so I'd have to save certain articles and libraries offline to continue writing. At other times where were power issues, i.e. no electricity in some parts of Africa and Cambodia. Forward planning was the key in the latter case, making sure the laptop's batteries were charged. All in all it was a great experience, and kept the brain ticking over, instead of turning to mush as it often does when un-used.

Spine

Spine is a JavaScript library for building Web Applications I wrote in New Zealand. It has a similar approach to other libraries, like Backbone, but also some unique differences. Check it out. In addition, I've re-written Holla and created a lot of example applications for the library:

Todos is a very simple to-do application. Users can CRUD tasks, and mark them as complete. The source is available on GitHub. [Demo]

Spine contacts is a simple address book, allowing users to CRUD contacts. The full source is available on GitHub. WebKit only. [Demo]

Holla is the most advanced example, and can be found on GitHub. Holla is a group chat application, and uses a combination of Rails, Juggernaut and Spine to let users chat in realtime. WebKit only. [Demo]

Finally Addy Osmani has written a great tutorial on building Spine applications.

Next stop

Next destination is New York City! I'll be there for TechCrunch Disrupt and the Hackathon. See you all there!

Traveling - Cambodia Part One

Cambodia has to be one my favorite countries, up there with South Africa and Hong Kong. The countries beautiful, the people friendly and I was traveling with some really good friends. We packed in so much that I'm going to have to split this post into two. So, where did I leave you last? Ah yes, another border crossing between Thailand and Cambodia.

The border between Thailand and Cambodia is one of the more dodgy ones in the world. Before I embarked I read up a bit on it, so I was well prepared for the process and any eventual scams. Not many westerners take this route, so we were in for a bit of an adventure. We arrived at a border town by bus, and then took a Tuk-Tuk to the actual border. Getting our exit stamp was easy enough, but the process the other side in Cambodia is slightly more tricky. We spotted the first scam, 'special visas' from an non-governmental agent, and found the actual office. Then we walked over the bridge separating the two countries.

Immediately you can see a difference. Wooden wagons transporting food, tons of scooters, and a women eating cockroaches. To be honest, I had no idea what to expect. If I was a cambodian, wanting a laugh, I'd stand by the border eating lots of bugs too; just to see the look on foreigners faces. Apart from us, the people crossing were mainly Thais wanting to do a bit of gambling in Cambodia. The sun was quickly closing in, and I wondered if we'd get to Siem Reap by time.

I took a video, but am having trouble embedding it. You can find it on the Picasa Web Album.

We found an un-official taxi (a bit cheaper than the government ones), and, although our driver didn't speak any English, managed to convey we wanted to go to Siem Reap. The drive is a few hours, so we go out the iPod speakers, turned up the volume, and drank a few beers. Of course, half way there some of the party needed the loo. I tried to convey this to the driver, making all sorts of pshing sounds. He nodded his head, smiled and turned on the windscreen cleaner. With some slightly more physical explanations, he got the message and we turned off the road for a break.

Siem Reap is a lovely place. Fairly touristy, but nothing like Thailand. There were a bunch of good restaurants and cafes. I can recommend the Blue Pumpkin, my favorite bakery, and Central Cafe. The night life is pretty good too, with lots of cool bars and a few clubs. The drawback to the town is that every minute you're asked again and again if want a Tuk-Tuk. In fact, next time I go to Asia I'll going to make a T-shirt with "I don't want a Tuk-Tuk" stenciled over it. Throughout Siem Reap are fish tanks (Dr Fish), which you could put your feet in, and have fish nibble your toes - quite an odd feeling!

However, a big reason that Siem Reap exists is for Angkor Wat, a huge complex of nearby temples. With in mind, we found a driver (called Da) for the day, and zoomed off on a Tuk-Tuk. The first glimpse you get of the temples is mind blowing. Angkor Wat, probably the most well maintained temple, is accessed over a bridge. I'm afraid, most of the rest of this post will be photos, as it was such a stunning area.

Here's a movie I made when crossing over the bridge.

Some of the older temples were a bit more ruined, but just as spectacular.

The guy taking this photo seemed to think the camera would explode when he pressed the shutter. He would jump everytime he heard a click, which is why it's a bit blurry. On the left is Alvaro, then Marta, David and me.

I took this photo accidentally, but it gives you a good idea of their skill with masonry. Can you believe it, they didn't use cement. Instead they cut the stones so well they just hung together.

Just incredible cavings in the stone. I'd give anything to go back in time and see this place in its former glory. It's truly one of the wonders of the world.

As we sat here looking across the lake, a few local girls came up to us selling drinks and beads. Their average age was about 12, but what was astounding was their mastery of foreign languages. One girl could conversationally speak English, French, German, Spanish and even Mandarin. When we asked them how they knew all those languages, the reply was always the same: "From tourists".

One of the reasons I went to Angkor Wat, and took this trip for that matter, was because of some of the amazing photos I'd seen on the Stuck in Customs site. Although, I'm not nearly as talented as Trey I feel fortunate to visited some of the same places. I heard about an older temple with some amazing trees growing through the stones. This photo gives you some indication of their size.

Well, that was Angkor Wat. I feel so fortunate to have been able to see it.

After three or so days, we headed to Cambodia's capital, the tricky to spell Phnom Penh. There, the adventure continues, but for now, adios!

For the full photos, check out the Picasa web album.

Traveling - Thailand

Ah blog, how I have neglected you. It's been a few weeks since my last post on Singapore/Malaysia, and so much has happened. So where were we... crossing the border to Thailand.

You see a marked difference between Malaysia and Thailand as you cross the border. Thailand is not as rich, and you can start to see some evidence of that with the buildings and homes you pass. It's quite common to see a mini Buddha in their gardens, and also a caged bird. I've heard the reason behind buying these birds is that releasing them you gain karma or something; seems rather odd to me as you'd have to catch them in the first places - the guy doing that must have really bad karma.

We took the car ferry to Koh Lanta, the first of my island hopping. My friends dropped me off in the island's small town, and I started exploring to find a place for the night. After various false starts I ended up with a place that included a bed, internet and motorbike for 500 baht (£10) a night - brilliant! I hopped on the bike, stalled a few times, and set off to explore the island.

From top to bottom, the trip round Koh Lanta takes about 15 mins around some really spectacular scenery. I found a place called "Best View Restaurant" where I had a great breakfast. Incidentally, legal puffery seems to be rather liberal when it comes to Asia - you can claim absolutely anything. I've seen "Best Restaurant", "Best Hotel" and suchlike. A marketeers dream!

After driving for a while down an off road track towards the island's national park I came across a really secluded beach, I was the only one there, a great place to relax and read my book ('The Girl with the Dragon Tattoo'). The island is really family orientated, and after a few days I took the ferry to Ko Phi Phi for New Year's - more of a party island.

Koh Phi Phi claim to fame is it's where 'The Beach' was filmed. A film I haven't seen, but which I had a friend explain to me - saving a few hours of my life and possibly quite a lot of brain cells. Anyway, it was by far the most beautiful place I'd visited on my trip, and at the same time one of the most fragile - parts ruined by the amount of tourism. The island was devastated by the tsunami back in 2004, but the only evidence of that tragedy now are the numerous tsunami evacuation signs. During the cleanup the Thai government tried to assert some control over the regeneration and buildings - evidently that failed as the town is a sprawling mass of alleyways and touts trying to sell their merchandise. The local mafia runs the place, and price fixing runs rife.

I found a backpackers called "The Rock" which was well reviewed on the internet. I can honestly say it had the most disgusting facilities I'd seen, but for 200 baht you can't complain. As one message on the wall put it, "Don't use the showers, seriously, just use the the sea". However, all that was forgotten due to the great people I met staying there. The walls are covered in lurid, sometimes witty graffiti which gives the place some character. As you walk up the stairs a sign reads "Welcome to The Rock (in Sean Connery's accent)".

The Thais truly are a nation of shopkeepers as I guess their economy completely relies on tourism - however, with just a short walk you can get up into the hills and away from the crowds. I spent a day hiking around, trying to get a feel for the place and its scenic beauty. Eventually I ended up at Long Beach, and swam out to a bunch of rocks where some snorkelers were sitting. As I got there one of them said to the others, "All clear; the sharks are gone". What @$!! Sharks? He pointed to the place I'd just swam through - "over there were two circling". I guess Lady Luck was looking out for me that day.

The next day I took a canoe with some friends out to some cliffs for a bit of jumping. I'm pretty sure the canoe was only designed for two people, and as such we took on rather a lot of water. All part of the adventure! The cliffs were pretty high, I think about 12 meters, and I'm glad to say I didn't chicken out. We lazed about in the canoe the rest of the day - perfect!

And then it was time for New Year's eve. The party slowly escalates into a crescendo around midnight, with dancing, fireworks and of course lots of drinking. The beaches were completely packed, even the sea, and in all I heard about ten thousand people were on that tiny island. As you walk along the beach you have to be careful of the discarded bottles and dodge some of the lit rockets haphazardly placed in the sand. All in all, a pretty amazing place to spend New Years.

On my last day a friend, Marta, suggested we go to the south island which is meant to be uninhabited and really beautiful. We found a long boat, some scots to split the price with, and sped off towards Phi Phi Leh. You can see why it was chosen as a film location - its quite spectacular with sheer cliffs towering out the sea and hidden coves. I got the feeling that if only you were able to scale those cliffs, you'd find Jurassic Park waiting for you on the other side. The water is crystal clear and really warm, quite literally warmer than the showers back at the hostel. We did a brief bit of snorkeling and sped back to the main island as the sun set.

So my time on Thailand's islands was over. I stopped off in Krabi briefly on the way to Bangkok, exploring a lot of the recommended restaurants and famous temples, and the next day got on the night bus to the countries capital. Bangkok is a hub of activity and the streets are ram packed with tuk-tuks, scooters and taxis. Crossing the road was quite tricky, I usually followed the orange monks who, I figured, were unlikely to be run over. As a gullible tourist, you have to keep your wits about you - more than once I was ripped off by a taxi driving in circles. Marta and I stayed in the best hostel I've ever come across called Lub d, near Silom road. If you're every in Bangkok, I highly recommend staying there. If I'm ever designing an office, I think I'll steal their interior as it's so well done; reminds me of Twitter's offices, I only regret not taking any photos to share with you.

Bangkok has numerous spectacular temples, if a little gaudy, and we set off to explore some of the bigger ones. We checked out the Big Buddha, a massive golden statue of the reclining Buddha. Along the temples walls were a whole row of pots with a lot clueless tourists popping coins into one pot after another. What was really amusing was an old women, following the tourists, with a large trolley. She preceded to tip each money pot onto her trolley - blatant profiteering that the tourists were doing their best to ignore. Outside were more tourists hitting their heads with plants. It must be pretty amusing to the Thais. Maybe I'm being a bit cynical, but if I was Thai I'd go to a temple, hop on one leg, and see how many tourists I could get to copy me.

Anyway, aside from the tourists, the temples were pretty amazing - like nothing I'd seen before. Far more exciting than our dusty cathedrals. After our intensive temple filled day, we went to a restaurant called Bo.lan - expensive but exquisite food. We finished off the evening with a cocktail at Bangkok's SkyBar located at State Tower. If you're ever in the city, it's a must-see, the view at night is breathtaking.

It was at Lub. D that we met David and Alvaro who were to be our traveling companions for the next few weeks in Cambodia. They looked like they knew what they were doing and I was keen to find some people for Cambodia's border, which is apparently a bit dodgy. We took the coach to the border with Cambodia where the adventure continues!

For the full photos, check out the Picasa web album.

On Education

A conversation with a few friends inspired me to write this short post on education. If you've any comments, please ping me with a tweet.

Everybody feels strongly about education, since it affects us all so much, me doubly so because of my background. I left school at 17 and am largely self taught. What was key for me, was that I'd found my passion - programming. If you love a subject, then it's easy to teach yourself. I just feel that the priorities in the education system are really misaligned with what's really important. In reality, the vast majority of what you're taught at school will be forgotten, especially if you have no interest in it. As it stands at the moment, if you correctly jump through all the hoops presented to you, you'll end up a university professor. In other words the system is geared towards a definition of success that applies to a tiny minority. There should be more scope for flexibility and less hoop jumping.

The crux of the problem though, is that the vast majority of people get to university and don't have a clue what they want to do - or indeed, what they like and dislike. There are no more hoops to jump through, and they panic - taking the first available career at hand. One that may be finically sensible but could leave them with a job they despise for the next thirty years. They settle, and get stuck. My message to them is that as you spend about 80% of your life working, life is too short for a job you don't love. Don't settle, keep searching, keep hungry.

As for the education system, well I feel that it should be designed to expose students to as many areas as possible, so they get a good indication of what they like and dislike. The system has a victorian factory feel, which needs to be changed. There are bells between shifts, and batches of students - it all feels so antiquated. The stigma attached with not attending higher education should also be removed. Universities aren't for everyone and you won't make society 'fairer' by sending everyone there - you'll just get crap degrees.

If you're interested, I highly recommend Sir Ken Robinson's TED Talks, who articulates the problem far better than I could.

Traveling - Singapore & Malaysia

I took the short flight from Hong Kong to Singapore, arriving at dusk. I'd arranged to stay with some family friends for a few days, and being the cheapskate I am, took the train and walked. In fact, my finances are pretty healthy, I'm way below my estimate of a £1K a month - although I have a feeling some of the countries later in my trip will be much more expensive. So in retrospect not taking the taxi was probably a mistake, something I realized as soon as I stepped of the train. While it's 'winter' in Hong Kong, Singapore has a completely different climate - it's really hot and humid. By the time I'd arrived I was soaked!

Winston's place was magnificent, a huge flat with a very modern and minimalistic design. I feel so fortunate for the various friends I've stayed with while I've been traveling; Winston's family were incredibly hospitable. I had a quick swim in the deserted pool, and joined them for supper where I learned a bit more about Singapore.

My ignorance regarding most of Asia is quite embarrassing, and apart from quick look at Wikipedia I hardly knew anything about Singapore. Like Hong Kong, Singapore used to be a British colony before it gained independence in 1963. The place is much more of a melting pot than Hong Kong, you have Malays, Chinese and a lot of westerners and expats. Some parts seem very european, and when you're walking past some of the riverside restaurants, you could well be in France.

Although Singapore is a democracy, the same party has been in power for 51 years. This is largely because Singapore has been so successful, it's the 15th richest country in the world (GDP per capita) - yet it's about the same size as the Isle of Wight. Nobody wants to rock the boat. The country has low crime rates, good healthcare (if you can afford it) and seems like a pleasant place to live. The caveat being that the environment is fairly controlled, for example striking is illegal. If you can live in those parameters though, you shouldn't have a problem.

I was only in Singapore a few days, so I had to make the most of it. I took the MTR to the far end of the city, and spent the day walking back - getting a sense of the place. Like Hong Kong, the island's small, but the population density is far lower. It's also pretty materialistic, everybody is after a bigger apartment, or a shinier car - even though they cost a fortune to run. That mindset seems to work for the economy though, which has completely rebounded from the recession.

We spent the evenings eating out (everything is so close), and had some really interesting conversations about education - inspiring me to pen a few thoughts.

The train to Malaysia is run by the Malayans - in fact the track and platform are actually part of Malaysia. You have to pass through customs to get to the platform. The station itself is quite a site. I regret not taking any photographs, but it's a big building, flanked with statues - which I'm told are made of rubber due to its accessibility in the region. The ride to Kuala Lumpur takes about six hours and is quite spectacular - going through rice paddies, swamps and plantations.

Christmas was spent in Kuala Lumpur with some family friends. It was great to be amongst a family over Christmas, and I felt quite at home. There were even some presents for me under the tree! At the end of the garden was a full fledged jungle which someone had hacked some paths through. We explored and managed to return relatively unscathed! I'm sorry to admit I didn't really explore KL - as I so exhausted and needed Christmas to recuperate.

We took the car up to the island of Koh Lanta in Thailand, where the adventure continues.

LRUG Podcast

Well, Merry Christmas everybody! I'm spending it in Malaysia with some family friends. Posts on Singapore, Malaysia and Thailand are coming soon.

In the interim, here's a link to the London Ruby Group Podcast, run by Chris Lowis, where I'm interviewed. We cover JavaScript Web Apps, the book I'm writing, Juggernaut 2, Bowline and Ruby on the desktop.

Have a Merry Christmas and Happy New Year! Alex

Traveling - Hong Kong

Flying into Hong Kong is best done at night, you see a beacon of light in a sea of darkness slowly increasing in brilliance until you finally get a glimpse of Hong Kong's skyscrapers. The airport is on a man made island, just offshore and is a feat of engineering in itself. It's absolutely massive, I could barely see the other end of the baggage isles, and completely white and clean. There are various desks marked "Health check" where banks of monitors connected to thermal cameras were checked in an attempt to stop bird flu entering the country. I took the underground train connecting the airport to the rest of the city.

The trains are just so superior to London's tube network. They're about twice as wide, all the carriages are connected and the service, well, just works. Before I started traveling, I just assumed that all tube networks had delays to "widen out the gaps", or problems with the "stop signs". In addition, monthly strikes and bad weather can paralyze London. No such problems in Hong Kong and Singapore, primarily I imagine because their networks are much newer. The signs are very obvious and well designed and, although nobody I met seemed to speak any English, I found my way to the hostel very easily.

The first thing you notice about Hong Kong is space, or rather the lack of it. Unless you live in one of the very wealthy districts in the south of the island you won't have a house - everybody lives in high rise blocks. No space is wasted, if a shop is being built, then a high rise is built on top of it. The apartments are smaller than Manhattan ones, and every bit of space is utilized. There's no separate loo and shower area - you simply shower in the same space. Ikea is very popular out in Hong Kong, as they're rather good at utilizing as much space as possible.

The second thing you notice is the surrounding scenery - 70% of Hong Kong is national parkland and is absolutely ideal for hiking. The scenery is stunning so on my second day I took a friends advice and travelled by ferry to Lantau, one of Hong Kong's many islands to see the 'Big Buddha'. Whenever I'm in a new city I always ping the local 'Ruby' group, and it was through this that Alex, a german entrepreneur joined me. The Big Buddha was built out of bronze in the early 1990s. It stands 34 meters tall and is quite a tourist attraction. I chuckled inwardly at the commercialism of the place as even in the base of the Buddha were shops selling snacks and souvenirs. Keen to get of the beaten trail and away from the tourists we took a track up the hill called the Spiritual Walk. I'd read about a hiking trail that would take us all the way back to the station which we dually found and started plodding up the hill, or rather mountain! Two hours later, and about a thousand meters up, we were at the summit - absolutely exhausted. The view though was absolutely magnificent, well worth the climb - even if it was in flip-flops!

Hong Kong was like nothing I'd every experienced before, I'd never been to Asia, and the contrast between it and South Africa was huge. For the first few days it almost felt like one of George Lucas' alien worlds, and I stuck out like a swore thumb - this tall westerner with accompanied by a massive red backpack. Then I started to get into the swing of things, greatly helped by moving out of the hostel into a couchsurfing place, owned by local girl called Alice. When I'm traveling to a place I rarely read the Lonely Planet guides, I much prefer to ask for advice from fellow travelers and ideally locals. In fact, if you're ever going to get a real taste of Hong Kong you'll definitely need someone who can speak Cantonese and knows the local places. I was really fortunate in this regard, as both Alice, Flora and Kitty guided me round the city, exposing me to different foods, drinks and venues.

I spent a few days in Hong Kong's boot.hk - a co-working space for startups filled with interesting people. I was teaching Alex (senior) a bit of Ruby on Rails for a startup idea he was working on, but I have a feeling I went too fast. Teaching is certainly a skill, just because you have the knowledge doesn't mean you can impart it easily. It's "The curse of knowledge" - the difficulty with being able to un-think what you know and putting yourself in a beginners shoes. However, I think I gave Alex a good start, the right pointers, and confidence in his own abilities to develop the startup himself. All the best of luck to him, it's certainly a useful idea!

There was a Ruby meetup, and I knew a few English friends who were attending, so I volunteered myself for a talk on Juggernaut. It was preceded by a very good talk about 'cool' code, various bits of code that were interesting due to historical or computer scientific significance. Parts of the code that powered the Apollo landings, inspired languages and enabled computer science breakthroughs were shown. That day I got a glimpse of some of the earliest geniuses behind modern day computing - we certainly are standing on the shoulders of giants.

Consumerism is completely engrained into Hong Kong culture, and I've never seen that many shops (or that many shoppers)! Personally though, shopping isn't my cup of tea. Don't get me wrong, I'm a capitalist, but there's something about a minimalistic lifestyle that appeals to me. I find too much clutter in your life clutters the mind. As such I'm quite happy living out of my backpack with my '100 things'. Perhaps that'll change in the future; I'm not sure but I rather doubt it.

A 21st birthday has some significance, and usually involves a big party. Mine was definitely going to be different, in a foreign city, surrounded by new friends. In the end it was an absolute blast. I joined a pub crawl, organized by a Kiwi who, during the day, was a geography teacher. We went to some interesting and kooky pubs, bars and clubs - and I'm fairly sure I drank far too much. Anyway, a night to be remembered!

As you're walking around Hong Kong you'll notice the models in the bill boards are mostly Caucasian, or at least their skin was lightly colored. You'll see adverts for whitening face creams and even surgery. I just thought it was interesting that people in the west are all trying to get tanned, while it's quite the opposite in Asia. I guess everybody just wants to be different.

The last few days were spent doing more hiking (The Dragon's Back), catching up with some old friends and seeing the real side of Hong Kong. Alice, the girl I was staying with, must be the hardest worker I know. She works the night shift three days a week at a local veterinary, and then switches her body clock halfway though the week to work the day shift - even over the weekends. This gives you an example (albeit impressive) of the work ethic you'll find throughout Hong Kong, Singapore and parts of Asia. For the time she spent working though, she definitely made up partying and staying with her was good fun!

I went with Kitty to try some Dim sum, a type of Cantonese food that seems to be part of Hong Kong's staple diet. You start by washing the plates, bowls and cutlery with tea. Then Kitty ordered a huge buffet of various typical Dim sum food. Chicken legs, pigs skin & blood, egg tarts, prawns and rice - quite delicious, although difficult for a clumsy westerner like me to eat. In the end I gave up on the chop sticks and used a knife and fork. I know - shame on me! The chinese like eating the meat closest to the bone, as that's the most tender. Although nothing like the 'chinese' meals you'll get back home, I loved it. Now I'll just have to learn some Cantonese so I can actually order it.

However, sadly it was time to move on again; to my next stop in Singapore, where the adventure continues. I'd just like to end this piece by saying thanks again to Alice, Flora and Kitty who really made my trip to Hong Kong. Hope to see you soon!

Traveling - South Africa

I'm writing this on the flight from Hong Kong to Singapore, at long last. So much for drafting up a weekly blog post, I guess it'll have to be monthly instead - or at least when I'm flying to the next country. As such this will cover my whole trip through South Africa.

My first port of call was Johannesburg, on the connecting flight to Cape Town. I had decided not to spend any time there, due to some of the scare stories I'd heard - just the three hours between flights. However, disaster almost struck when I misplaced a bag when collecting my luggage - the bag with 'everything' in it, my passport, wallet, laptop etc. The trip was almost over before it began! I'd walked all the way through customs and was just about to check my hold luggage in when I realized. I raced back, and with the help of an eager porter (eager for his tip I suppose), took a back route through the rabbit warren of corridors back to customs. The bag was still there, thank God. Disaster averted - I'd have to be more careful in future.

Then on to Cape Town, one of my favorite places in South Africa. I'd done a similar trip through SA the year before, so I was fairly clued up on the places to go (and indeed the places not to go). Cape Town is a firm favorite, especially during the summer when the weather is rather good. I was only there for a day though, as I was keen to get further up the coast to the Transkei and Africa's 'Wild Coast'. Unboxed, a Ruby consultancy based in London, had recently opened up a Cape Town office; and I knew Simon, a good friend, was working there temporary. We met up with a few of the other Unboxed guys, had one of the most amazing burgers (Royale Eatery), and headed upstairs to the 'Waiting Room' - a bar located directly above the Royale Eatery, originally built to service its queuing customers. Sipping beers we sat on a balcony overlooking Cape Town's main route, Long Street, watching the evening's hustle and bustle while the sun set. A few hours later we headed straight across the street to a local bar, for some Pool. Simon's friend had an media studies degree, which meant he was a total expert at Pool. He certainly showed the locals up!

Then, next morning I headed straight up the coast with the 'Bazz Bus'. One night in Port Elizabeth, and then more driving to Cintsa and Buccaneers Backpackers. This is one of my favorite hostels, with views over the lagoon and miles of beach, it's ideally located. We're starting to get more rural now, with no municipal water and electricity blackouts every now and again. That all adds to the adventure though. Every morning I'd go for a jog along the beach, and have the whole thing to myself - miles and miles of it. Then a quick dip, and back to the hostel where I was writing a book in earnest. In the afternoon we'd play volley ball, made all the more fun by the addition of free wine, and in the evening magnificent dinners cooked by the local 'Mamas'.

After a week at Buccaneers it was time to move on up the coast, to Coffee Bay. Along the route, our Bazz Bus driver would use some of his money (and spare change found in the bus) to buy bread, distributing it to women and children we passed. We joked to him that these were all his different families, but what an altruistic thing to do - Africa is made by these sort of men. Coffee Bay is just magical, there's no way my description can do it justice. It was a little more touristy than when I'd stayed the previous year, but retained the rustic charm of the Transkei. Firstly, a little bit of history to give you some context. The Transkei was an area of land exclusively given (or rather segregated) to the Xhosa people during the Apartheid. For a long time the area was a white no-go zone, and the caves up the coast were used as weapon depos by the ANC. However, all that has changed in recent years, and it's now a tourist destination. The area is still very rural though, with no running water, little electricity and internet. Most the locals still live in traditional round huts, with a hatched roof and a packed dung floor. The area isn't very fertile, so most of the locals fish for their meals. You'll see a lot of skinny animals walking around, but these are mostly used as part of the barter economy, rather than for food.

The main hurdle to Coffee Bay is actually getting there. The road to Coffee Bay can barely be defined as such. It's full of pot holes, animals and rather un-traffic aware locals. A group of American girls drove it at night, after being warned not to. They were as white as a sheet when they finally arrived! In addition, if you're a tourist you have to be careful of the local police. A german couple, both doctors, were stopped and asked for a thousand rand without any 'receipt' - bribery and corruption in other words, rife in these parts. Locals pay no heed to the requests, but tourists aren't quite as savvy.

Once you arrive though, you'll see the raw beauty of Coffee Bay which is certainly worth any journey. The beach curves round a small river and is surrounded on one side by cliffs, and the other sides by rolling hills. The hostel, called 'The Coffee Shack' is nestled just over a hill, out of reach of the wind; and is split in two by a small river. Luckily, it's more of a stream than a river - and it's quite fun holding a lantern as you negotiate the stepping stones after a good night out. The whole place is rather remote, indeed for half a week we had no electricity, mobile reception or landline connection - completely cut off! Quite a novelty for me, but rather worrisome for the hostel which couldn't take any bookings; it must be difficult running a business under those conditions.

During the day we'd hike along the coast, explore caves (only to find copious amounts of guano), and jump of cliffs. During the evening I would take a beer over to the rocks and listen to the waves crashing and rolling as the sun set over the hills. At night we'd party away in the tiny hostel bar - playing killer pool which would usually descend to just a lot of dancing around the table. I met so many great friends there, too many to list, and have such good memories of the place.

A few days were spent on the beach, by the local cows who like to bathe in sea water to remove their ticks. I tried my hand at body surfing, and was jogging every day to keep fit. During the week the wind direction changed, bringing in a whole swarm of jellyfish. I can tell you the surfers got out pretty quickly when they noticed them.

During one of our hike's Joseph, our bare-footed guide, was explaining to me about the local traditions regarding marriage. "It's no good, I've only got a dozen chickens, I need at least 10 cows to buy a wife". "Does the amount of cows increase, the prettier the woman" I enquire? No, he replies, "but if she's been to university it's at least 15 cows. I'm going to have to sell my sister if I'm ever going to marry.". We walk on further down the coast and I start enquiring about the political situation. It turns out that the Transkei is ruled using a feudal system, with a king and various chieftains. Joseph was telling me that one of the local chiefs had died a couple of years ago, leaving behind his wife and four children. His eldest son was too young to become chief, so his wife, in an unprecedented move, declared herself chief until such time her son could assume the throne. This didn't sit too well with the local villagers, indeed they rioted, burnt down her house and shot her. Additionally some of her children were caught in the cross fire. The King had to visit to remedy the situation and, to his credit, installed one of the women's daughters as the new chief. However, she still lives under police protection in a neighboring village. The Transkei isn't without its problems.

After an amazing stay in Coffee Bay, it was time to move further up the coast to Mudumbi. I'd been recommended this place by a traveling South African and told it was even more rural - exactly what I wanted. I chucked my heavy bags into the local transport, and then walked there. It's a short walk, about 4 hours, but across amazing beaches and picturesque scenery. There's a few rivers to cross, most you can wade through, but one particular one caused more difficulty. It was deceptively narrow, and rather than swim across and fetch a rowing boat I spotted on the opposite bank, I resolved to do the trip in one go, pack and all. About half way across I realized what an idiot I was being. Keeping a heavy pack above you, while treading water, is very difficult and it occurred to me that my SLR and iPod could both get a soaking! Luckily I managed it, just, although my trainers got wet. Indeed, they never recovered from that - and started stinking so badly I had to throw them away.

Once I got to Mudumbi I was shown to my cottage, which I had all to myself. It looked like a hobbit house out of Lord of the Rings, with cute pink curtains and a stable door. The wind picked up and soon there was a full on storm, it was even difficult to stand up. The lightning was awe inspiring, as was the gale, but I felt very cosy in my little cottage. At supper I realized I was the only back packer. Everyone else there was a volunteer working on the hostel and nearby in the village. A friendly Kiwi gave me great advice on hikes in his home country, which I can't wait to explore. "During the winter", he said, "the track is officially closed, but you can still traverse it. I should warn you that the loos are locked; there's a long drop round the back though".

Unfortunately my time in the Transkei was now at an end. I travelled up to Durban, albeit rather reluctantly, and stayed in a hostel near to Florida Road - the main street. You often meet some really interesting people traveling, and so it was to be with this place where I met two english girls who really impressed me on their ability to integrate into a place in a short period of time. They'd met a professor at a local university, and we attended the launching of a book which, since its subject concerned race, generated a lot of interesting discussion. We tried the local bunny chow, which is a 'delicacy' exclusive to Durban - consisting of a loaf of bread, cut in half and filled with curry. Very delicious as long as its not too spicy. After eating out at a local burger place I got to know the owner and arranged to rent a surf board off him. Durban's piers are excellent to surf by, as there's a convenient rip that'll pull you write out to the back without much paddling. Failing that, you can just jump off the end of the pier. You have to watch you don't get tangled in the fishermen's lines though!

I'd arranged to meet up with Bevan, a South African who'd been our guide up the coast the previous year. He's an inspiring guy, and always up to something interesting. As well as his photography and touring, he explained about some of the business ideas he's currently working on. We discussed Durban's history, and how it had been sold to the British by Zulu king, and about some of SA's other problems, like the amount of rubbish everywhere. I have a feeling the issue won't be resolved with 'education', which can often come across as condescending, but rather a clever marketing campaign - which I believe has worked in other countries. Regardless whoever solved the rubbish problem would have a lasting legacy - keeping Africa a beautiful country.

I got picked up by Leanne, my London flat mate who's temporarily back in South Africa and stayed a week at her parents house. They live on this amazing estate, where you'll find families of wild pigs and zebras grazing the lawn. With magnificent views stretching across the plains and a very smart house - it was a great place to stay. Lots of fun partying in Pietermaritzburg and good nights out. However it was time to leave again, and I packed up my things and flew to Hong Kong where the adventure continues!

jQuery Growl with CSS3

In my constant quest to reinvent the wheel, I've written a jQuery Growl library. These things are so simple to do with jQuery, that's it's almost faster to implement yourself than using an existing lib. You can also cut down considerably on unnecessary features that way.

Live demo

jQuery

The jQuery below is pretty bog standard, just appending elements to a div then removing them after a timeout. jQuery UI gives you some effects, like 'drop'. We're returning the 'msg' jQuery element, so you can easily add click handlers etc.

//= require <jquery.ui>

jQuery(function($){

  var container = $("<div />");
  container.attr({id: "growl"});
  $("body").append(container);

  $.growl = function(body){
    var msg = $("<div />").addClass("msg");
    msg.html(body);

    container.append(msg);

    msg.show("drop", { 
      direction: "down", 
      distance: 50 
    }, 300).
      delay(2000).
      fadeOut(300, function(){
        $(this).remove();
      });

    return msg;
  };
});

CSS3

There's some interesting CSS though:

Background gradient

This is quite a good example of how to use advanced background gradients with WebKit.

We first specify a default background without a gradient - this is for browsers that aren't WebKit, who won't understand what we are going to do next.

We're specifying the background colors using rgba, which means we can add some alpha transparency, rather than 'opacity', which would alter the transparency of the inner contents and text.

CSS3 also supports multiple backgrounds. Consider using them if you're also specifing a gradient with transparency, or one that won't run the full length of the element, like in this example.

Shadow

We've got an inset box-shadow which is only recently supported by Firefox and WebKit. We're just adding a 1px highlight to the top of the Growl box, to indicate the light source and make it feel more realistic.

Source

#growl {
  position: absolute;
  bottom: 10px;
  right: 20px;
  overflow: hidden;
}

#growl .msg {
  border: 1px solid #171717;
  color: #E4E4E4;
  text-shadow: 0 -1px 1px #0A131A;

  font-weight: bold;
  width: 200px;
  min-height: 30px;
  padding: 10px;
  font-size: 15px;
  margin-bottom: 10px;

  background: #141517;
  background: -webkit-gradient(
    linear, left top, left bottom, 
    from(rgba(255, 255, 255, 0.3)), 
    color-stop(0.8, rgba(255, 255, 255, 0))), 
    rgba(0, 0, 0, 0.8);

  box-shadow: inset 0 1px 1px #8E8E8E;
  -webkit-box-shadow: inset 0 1px 1px #8E8E8E;
  -moz-box-shadow: inset 0 1px 1px #8E8E8E;

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
}

Crowd-sourcing a Book

As I mentioned in my last post on Holla, I'm in the process of writing a book about building JavaScript Web Applications. Why am I writing a book? Well, for all the money and women of course - but apart from that, I really think JS apps provide a vastly improved user experience over convential server side ones. Over the next year, I'm confident we'll see many more of them.

These JS apps intelligently preload all the data they need, render all the data with JS, and have a non-blocking user interface - which all boils down to one thing, speed. Speed matters, and by making your apps more fast you can make a big difference to the user experience.

Developers are stuck in the artificial request/response paradigm. We have the technologies to have proper state now, so why impose this limitation on our users? Just as the technology behind AJAX was around before it's potential was realized, so the technology for asynchronous, stateful web applications is here right now. All that is needed is a shift in perception, a bit like the way Gmail opened the eyes of developers to the potential of AJAX.

So, on to the book. I've mapped out the various chapters below. Some are already written, others have been sketched out.

I might as well write what people want to read. So, here's how you can help the project. Edit the Google Docs list of chapters to include something you, and other developers would be interested in. If the suggestion is popular enough, I'll include it.

Introduction
- Speed
jQuery primer
JS Templating
- SuperConnect
- jquery.tmpl
- Mustache
JS Binding
- SuperConnect
- jquery.datalink
Frameworks
- Sproutcore
- Cappuccino
- Backbone.js
- Super
  - SuperClass
  - SuperApp
    - States
    - Views
  - SuperModel
  - SuperRPC
Preloading
Less
Sprockets
Hash routing
- Sammy
- AJAX crawling
Degradation
- CSS
- Mordenizr
AJAX
- OAuth
- COR
- JSONP
- Upload
Juggernaut 2
- Chat example
- Observer
HTML5
- Doctype
- Offline
- Input
- placeholder
- search
- email
- File API
- Drag/drop
- Local storage
- Other?
  - Canvas
  - Video
CSS3
- Gradients
- box-sizing
- vbox/hbox
- box-shadow
- border-radius
- rgba
- transitions
- text-shadow
Holla?
- Models
- Loader
- States
- AJAX RPC
- Layout/CSS
- Juggernaut

Holla - An Asynchronous JavaScript App

I've been developing Holla for a book I'm writing on building JavaScript web applications. I've open sourced it in the hope that it'll be a good example application as it encompasses various best practices (that the book elaborates on).

Holla is a group chat application, a bit like Campfire. You can create channels, then invite friends to those channels, chat and share files.

Check out the live demo.

Asynchronous

The interface is totally asynchronous, which is one of the most important aspects of Holla. You can CRUD channels, add messages and upload files - all without blocking any of the UI. Any AJAX requests that need to happen, happen in the background. Asynchronous interfaces, I think, are the future of web apps, and what the book I'm writing centres on.

All channel editing is in place, and changes are reflected across the interface immediately. The request to the server is sent in the background.

Just drag and drop files onto the interface, they'll upload in the background displaying a realtime progress bar. To do this, I'm using the new XHR file upload API - see jquery.upload.js. What's neat, is that everybody on the channel, not just yourself, can see the file upload progress.

Source management

For the fronted source management I've used Sprockets and Less. Sprockets basically adds 'require' support to JavaScript, is absolutely invaluable for managing JavaScript source files - JS apps can get messy very quickly if you're not careful. Less is very useful if you're dealing with any CSS3, as it provides shortcuts for the different vendor prefixes. For example, take a look at these:

.border-radius(@r: 3px) {
  -moz-border-radius: @r;
  -webkit-border-radius: @r;
  border-radius: @r;
}

/* Vertical Background Gradient */
.vbg-gradient(@fc: #FFF, @tc: #FFF) {
  background: @fc;
  background: -webkit-gradient(linear, left top, left bottom, from(@fc), to(@tc));
  background: -moz-linear-gradient(top, @fc, @tc);
}

Realtime

For the real-time chat, Holla uses Juggernaut 2. Juggernaut open a WebSocket connection with a Node.js backend server. If WebSockets aren't support, Juggernaut falls back to Comet, Polling and Flash Sockets. As well as allowing the interface to be updated in realtime, a socket connection with the server allows us to detect when the user is offline.

var offline = $("<div></div>")
    .html("The connection has been disconnected! <br /> " + 
          "Please go back online to use this service.")
    .dialog({
        autoOpen: false,
        modal:    true,
        width:    330,
        resizable: false,
        closeOnEscape: false,
        title: "Connection"
    });

jug.on("connect", function(){ 
  offline.dialog("close");
});

jug.on("disconnect", function(){ 
  offline.dialog("open");
});

Which looks like this:

Theme

The theme is inspired by jQuery Mobile's initial designs. They seemed to change the theme somewhat, in their released version, but I'm sticking to their original mockups - as I prefer them. Everything's coded in CSS3, there are very few images and it would be great if some of these styles got back into jQuery. Also, as you can see below, I haven't been very consistent with the pill shaped buttons - I feel they don't work for every situation.

Framework

The framework behind all of this is SuperApp. At its core, SuperApp is a state machine which splits up your JS logic into separate modules. It's poor practice (but often done) to write your whole application in a concurrent manner to one JavaScript file. SuperApp saves you from falling into this trap, as a state machine is a great way of programming modular UIs.

Admittedly SuperApp is poorly documented at the moment. This is a shortcoming I plan to rectify soon, but for now here's an example. Here we are creating a state, and adding event handlers that are triggered when the state is entered. Some of the variables, such as 'share' and 'input' are automatically populated from elements in the attached view.

(function($){

var state = App.state.add("channel")

state.setup(function(){ 
  this.share.submit(this.proxy(function(e){
    // ...
  }));

  this.input.keydown(function(e){
    // ...
  });  
});

state.beforeEnter(function(channel){
  if ( !channel ) throw "Null Channel";
  this.current = channel;
});

state.hasView = true;

})(jQuery);

//= require <states/channel.asset>
//= require <states/channel.activity>
//= require <states/channel.roster>

Preload

On startup, we preload any channels and messages, so users are never kept waiting behind a spinning loading indicator. Channels and messages are setup as models using SuperModel. This allows us to do some nifty things, like automatically updating the UI when a channel changes, or sending a AJAX request back to the server. SuperModel basically gives you the same API as ActiveModel or ActiveRecord.

var Channel = SuperModel.setup("Channel");
Channel.attributes = ["name"];

Channel.include(SuperModel.GUID);

So, that's a whirlwind tour of Holla. You'll find all the code on Github. I've substantially elaborated on all of this for the book I'm writing (which I'll be blogging more about soon). Any questions, just contact me.

Hello World!

Well, hello there. I've been a bit spread out over the internet so far, so this is a effort to consolidate my various projects/mess.

I'll be blogging about Ruby, JavaScript and my trip round the world. Wish me luck!