Alex MacCaw

JavaScript programmer, O'Reilly author.

Page 2

Animating DOM transitions

Animations and transitions are fairly crucial to the look and feel of modern applications, and can be a good way of indicating to a user what their interactions are doing. Indeed, the best interfaces have been clued up on this for a while now – pretty much every interaction you have with iOS involves an animation.

However animations can get convoluted really fast, especially if you have a lot of different states which require different transitions depending on which states are being entered or left. This is a problem I’ve struggled with in more complex UIs, specifically figuring out the position of elements - (we ended up using position absolute for everything, and having a huge amount of conditional code).

I’ve always wondered if there’s a better way of doing transitions and, rather than hard coding positions, delegate layout to the browser. Inspired by Keynote’s Magic Move effect...

Continue reading →

How (not) to write recruiting emails

Emails from recruiters have a fairly infamous reputation in the technical community, partly because of their often spammy nature, and partly due to a lack of interest in the jobs they’re pitching.

The ideal recruitment email should basically be a pitch, motivating candidates to further explore the opportunity. Engineers are extremely fortunate–we’re not generally in want of a job. To hire the best, you have to entice them away from other work.

Unfortunately many recruitment emails seem canned at best, automated to spam out to the widest audience possible. It’s a wonder these emails work, if indeed they do at all. Looking back through my inbox, here’s some of the mistakes I often see recruiters making:

  • Canned, with only the name changed
  • Asking people to email in their CV or resume
  • Not mentioning the company name, only an unspecified ‘client’
  • Urging you to spam your friends with the...

Continue reading →

End to end encryption in JS Web Apps

The most significant burden to mainstream encryption is the proliferation of web apps, such as email clients, and the lack of a good encryption story inside the browser. The question is: can we use end to end encryption inside JavaScript web apps?

Asymmetric encryption suffers from the same problems as OpenID, it’s a complex subject and if its success is conditional on being understood by your average user then it will never be popular in the mainstream. The only way to deal with crypto is to do what we programmers do best: abstract it and make it work transparently behind the scenes.

The issue is with ‘The Cloud’. A lot of communication applications, perhaps the majority of them, are served and hosted remotely. So how can we add encryption to hosted web apps? We need to solve three problems:

  1. Asymmetric (RSA) encryption/decryption routines in the browser
  2. Public key discovery
  3. Secure...

Continue reading →

Cross Site Request Forgery in JS Web Apps

Ensuring that attackers don’t forge requests in your web applications can be a tricky businesses, one that often requires a hand-rolled solution.

As soon as you have a session, you need to start thinking about cross site request forgery (CSRF). Every request to your site will contain authentication cookies, and HTML forms don’t abide by the same origin policy (SOP).

One method of ensuring that destructive requests (PUTs/POSTs/DELETEs) to your site are made from your domain, is by only allowing requests with a Content-Type header of application/json. The only way to set this header is via Ajax, and Ajax requests are limited to the same domain.

However, there have been active vectors in the past that have allowed header injection (such as some of the Flash exploits), and Egor, who is the expert in these things, assures me it’s not enough.

The classic method of preventing CSRF attacks...

Continue reading →

Preventing tab-close data loss in JS Web Apps

Often, when you’re building a JavaScript web application, you want to warn the user about any pending Ajax requests before they close the window.

Perhaps you’ve updated the UI before sending an Ajax request to the server, or perhaps you’re making long running background request. Either way you want to warn the user that, if they continue, they may lose data.

Browsers don’t offer an API to automatically block closing tabs (which would be open to abuse), but they do have a rather archaic API to specify a tab close prompt, window.onbeforeunload.

window.onbeforeunload = function(){
   return "Don't leave me!";

As you can see, this isn’t a normal event. You can only have one listener, and it should return a string that is ultimately displayed to the client.

jQuery has a undocumented active property, a integer representing the amount of co-current Ajax requests. We can check this to...

Continue reading →

JavaScript ‘wake’ event

For I wanted to ensure that the list of posts is always kept up to date. This is especially a problem when the computer wakes up from a sleep, as the top posts are often way out of date!

It turns out there is no JavaScript wake event. There is an online event, but it doesn’t seem to trigger whenever the computer is sent to sleep and re-awoken.

The only sure fire way I could work out to achieve this, was to run a interval and check that the it was invoked at the expected times. Any delay in an interval invocation indicates that the computer has just slept.

var TIMEOUT = 20000;
var lastTime = (new Date()).getTime();

setInterval(function() {
  var currentTime = (new Date()).getTime();
  if (currentTime > (lastTime + TIMEOUT + 2000)) {
    // Wake!
  lastTime = currentTime;

You can find the full jQuery plugin here. It triggers a custom wake event on documen...

Continue reading →

Heroku Staging

Building a staging environment on Heroku is pretty straightforward, especially now they’ve released their new ‘fork’ feature.

To fork your app and ensure that all your assets, environmental variables, and Postgres databases are cloned, simply run:

heroku fork -a yourapp yourapp-staging 

I also recommend automatically deploying the staging server whenever you push to master. This is convenient, as it means you have a up-to-date version of your app always running. Your can test on staging, and then deploy production a couple of times a day.

To automate staging deploys follow the instructions on the github-heroku-pusher project. A GitHub webhook POSTs to your deploy server, which will then deploy your staging environment in the background.

Continue reading →

Dynamic pagination

Pagination over a constantly changing list is hard. Really hard. In fact it should be one of those computer science problems up there with naming and cache invalidation.

The issue especially surfaces in news sites, like Hacker News. The hierarchy of posts is constantly changing. By the time you click ‘next page’, page two has an entirely different set of posts. So how do you ensure that the next page contains what the user expects to see?

Paginating on offset is out, since the valid offset is constantly changing. Paginating on a post’s date is also out, since HN’s sort order is not determined by date, but rather by a dynamic score.

Well one one method is to store every possible sort order in memory. In fact, this is exactly what Hacker News does. When you click ‘next page’, HN knows what you’re expecting to see, because it has the particular sort order you’re looking at stored in a...

Continue reading →

SEO in JS Web Apps

JavaScript and search engines have always had a tricky relationship, and SEO is often used as an argument against single page applications. I’m aiming to put some of those misconceptions to rest in this article and show you that it’s perfectly possible to create a pure JavaScript web application and still have good SEO.

To demonstrate, take a look at the search results for Monocle, a single page web app. You can see that even though the application relies on JavaScript, articles are still getting fetched and indexed correctly.

While there are indications that Google’s spiders can index some urls they find in JavaScript, in my experience they haven’t been able to render and index complex JS web apps without a little help. The key to spidering JS apps lies in Google’s Ajax crawling specification.

The Ajax crawling specification was originally intended for JS apps that use the hash...

Continue reading →

How yield will transform Node.js

Node v0.11.2 was released recently, and with it support for v8 generators. Generators can be hard to grasp, but essentially they’re decorated functions that you can execute multiple times and resume execution at different points inside the function.

What this means in practice is that we can get rid of the callback hell that has plagued node applications, and write code in a synchronous style, while it’s executed asynchronously behind the scenes.

 Using yield

A code example is worth a thousand words, so let’s dive right in. We’re going to need Node v0.11.2, which you can easily install with nvm.

nvm install 0.11.2

We’re going to use a promise based server called Mach, and a promise library called Q. Install both of those with npm if you haven’t already.

Since we’re using bleeding edge v8 features, you’ll need to pass the --harmony flag through to Node whenever you invoke it.


Continue reading →