Monthly Archives: September 2013

JavaScript: The Good Parts

Just finished reading this book for the second time. It’s usually the first book developers read when coming to JavaScript, and I admit I didn’t really understand all of it back then. Reading it again with more experience was useful, as it allowed better understanding, questioning of “why” on the points that are made, and realisations of where some of the things mentioned could be useful.

JavaScript: The Good Parts

Highly recommended for beginners and those with a bit more experience alike. Below are some of my brief notes on things that are simple to note down from the book.

  • When invoked with “new”, if a function does not return an object, then “this” is returned.
  • Closure can be used to hide things like nextId generation. var nextId = (function () { var nextId = 0; return function () { return nextId++; }; }());
  • Use closure to have event handlers use value of variables at the time when the handler was bound.
  • Curry = combine a function with values for some parameters, to create a function that requires less parameters. add1 = curry(add, 1).
  • Function memoizer pattern/utility – p.44
  • Object.create – differential inheritance possible from another object
  • Regex group prefixes: ?: noncapturing, ?= positive lookahead, ?! negative lookahead
  • array.sort is not stable: if there are equal elements, they won’t always sort the same. Use a special comparator with a tie breaker function – p.81
  • Regexp.test for true/false, .exec to return null / array of [match, groups…]
  • string.match is like Regexp.exec when no /g flag.
  • string.replace – can take a regex, and the replacer can be a function
  • $& is the matched text, $` is text preceding match, $’ is text following the match
  • is like indexOf, but takes a regex
  • string.split can take a regex
  • string.charCodeAt(index), String.fromCharCode(code)
  • Remember typeof null is “object” – remember when checking
  • parseInt – remember to always pass radix to be safe, usually 10
  • Money calculations – multiply by 100 into pence, calculate, divide back to £
  • Care with special cases of NaN, isNan, isFinite – p.105
  • Is it an array? === ‘[object Array]’. Or Array.isArray in ECMAScript 5
  • Empty string is falsy
  • Care when using objects as maps which may have arbitrary keys – e.g. to do a per-word count. Problems if e.g. the string to count has the word “constructor”.

Mobile Safari connection allocation loading bug

I ran into an interesting issue recently, which caused the loading of my application to deadlock on an iPad.

Browsers have a set maximum number of connections per host that they can use to load resources. For most desktop browsers it’s 6, less on mobile devices, and specifically 5 on iOS 6.0 Mobile Safari.

A smart way of making the most of these connections would be to have them all pull from a things-to-load queue, and this is what desktop browsers seem to do. So we always keep every connection busy while there are things in the queue. But Mobile Safari seems to be different – deciding up front using a round robin allocation which connection will load each resource (so if we trigger the load of 10 resources, connection 1 will get the job of loading 1 and 6). Not only does this not make the best use of available connections; it can also cause a loading deadlock.

My application uses a single SignalR with Server Sent Events (SSE) transport, and as such one connection from the budget is always in use and won’t be freed up. So any resources that Safari allocates to that connection for loading will never load. It’s nothing specific to SignalR/SSE, anything which holds up a connection will cause it.

If that resource that never loads is an image for example, then maybe it’s not such a big problem. But in my case I was using the RequireJS AMD script loader, which loads scripts using script tags with the async attribute set. After they all load, a callback is executed. As my SignalR connection was starting up early when my application loaded, it was blocking some of these scripts from loading, and hence the callback was never run. The callback in this case was a major module of the application. Result: deadlock.

In a test case I made which requested 10 scripts after the SignalR connection was initiated, 1-4 and 6-9 load (presumably on connections 2-5), but 5 and 10 will never load. They usually all load correctly if the connection is fast enough.

It only seems to happen if connection keep-alive is used for the persistent connection, but I haven’t investigated that in detail as we didn’t want to turn that off in any case.

Solutions (until the iOS bug gets fixed):

  • delay starting persistent connections until your application is fully loaded
  • monitor resource requests (e.g. by wrapping your AMD loader), and pause/stop/restart persistent connections when more than 4 requests are in progress

These would only need to be done if you detect an iOS Safari, to avoid degrading performance for users of other devices. The problem doesn’t happen on Chrome for iOS (it seems to have 6 available connections per host so if it did, the indices of failed resources would be different).

There’s probably a lesson here: not only do you need to test your web applications on the mobile devices that users will use to access them – you need to do that testing using the slower connections that many of them will be using.

Interesting little Java and Web things learnt this week

Java’s Collections.unmodifiableCollection doesn’t pass equals and hashCode to the backing collection. I’m surprised I haven’t come across this before!

The user-select CSS property allows you to prevent selection of certain content. As the link explains, it’s useful for preventing accidental selection of icons next to buttons. A certain well known UK high street electronics shop’s website also uses it to prevent text selection, presumably to prevent you copying product names into price comparison sites. It’s not reliable or widely supported though. The same effect can be had by doing a preventDefault (or return false) in the “onselectstart” event handler (again doesn’t seem to be standard).

Continuing on the theme of text selection, I find the auto highlighting of library URLs on hover on the cdnjs website quite useful. It’s achieved using the Selection capabilities of the DOM, which allows you to get or set the current selected text.

Links from the summer