Principles

This work is related to that done in RequireJS and CommonJS, but hardly bound by them. Instead, the results are a product of the following principles:

• Improving the loading characteristics of a JavaScript project should be approached as an incremental optimization problem.
• Simplicity is best. Only implement the necessary features.
• Caching should be exploited. Expensive one-time operations are acceptable provided their responses are reusable.
• Modules are well defined, widely used, and well founded. The five different asynchronous loading specifications, not so much.

This leads to what I’m given to think is a much simpler version that works than existing implementations. The other nice thing is that the packaging tool takes an original approach to solving the dependency issue.

Observations

Optimization

Naïve implementations are good. Those implementations may be slow, but they are also cheap and set the stage for proper optimization. Chances are, that many possible optimizations are rendered unnecessary by the right tools.

Dependencies

Most current implementations use one of five ways to wrap a module’s code with a description of the dependencies that that code requires, and which a library will fetch asynchronously, finally evaluating the modules code once all are loaded. The thought being that, once that module is received, first all of its dependencies need loading (asynchronously so they are non-blocking, natch).

IMHO, that obscures the more obvious and important observation, that having dependencies that aren’t loaded by the time the current module is loaded, asynchronous or not, is never good. If this is to be treated as an optimization problem, then the issue is one of packaging. If the packaging works well, the question of synchronous/asynchronous loading is moot.

Packaging

Existing packagers all perform some sort of parsing on source files, usually a regular expression, maybe a full preprocessor language. Both approaches have the downsides of requiring boilerplate code or being unreliable. There is also the additional complication of describing lazy dependencies so that they do not get confused with loading dependencies.

The good news is that, given the availability of non-browser interpreters, there is a third way, where the code itself can be evaluated offline and dependencies extracted during run-time. Not only would this extract only those dependencies needed exactly at load time and require no boilerplate, using the same kernel in both environments, it would keep both the client and the packager’s results consistent.

Versioning

The current practice for deploying JavaScript is to set a query parameter like bust=v_n+1 on the URL of the script’s location to, in effect, invalidate the cache. This happens to work in the monolithic file case, however, lazy loading code makes versioning a problem that cannot be ignored. While new clients will use v_n+1, clients using v_n code must continue to receive v_n code. For this reason, versioning should be reflected in the base URI.

http://assets1.example.com/js/src/n/
http://assets1.example.com/js/src/n+1/
http://assets1.example.com/js/src/n+2/

Caching

It’s a common observation that different areas of a project change at different rates. This is certainly the case in web applications where library code will change much slower than application code. It follows then that updates to application code should have no effect on still cacheable library code.

Convention already specifies this using a leading slash for '/application/code' and none for 'library/code'. This is simple to exploit by allowing different URIs for the two classes of code.

http://assets1.example.com/js/lib/0.1.2/
http://assets1.example.com/js/src/0.3.0/

Implementation

The tool that implements this loader provides two things things, a kernel and a module compiler. For the moment it is on an experimental branch of the Modulizer project, though I’m beginning to like “Yajsml” more and more.

The kernel is a terse bit of JS that provides the module loading and fetching functionality. It has no references to the global environment and, by default, exports to the require symbol. It’s the part that enables a simple page like this:

<script type="text/javascript" src="/kernel.js"></script>
<script type="text/javascript">
  require.setRootURI('/js/src/');
  require.setLibraryURI('/js/lib/');
  require.setGlobalKeyPath('require');
  app = new (require('/app').Application)({
    "userId": 1234
  , "baseURI": "http://example.com/"
  });
</script>

The module compiler takes a number of paths and compiles them into a require.define() call. Using the command line tool:

../modulize --output code.js --root-path ./src --library-path ./lib --import-dependencies -- ./src/app.js

Produces the following package:
require.define({
  "/app": null
, "/app.js": function (require, exports, module) {
    var models = require('/models');
    var util = require('util');
  }
, "/models": null
, "/models.js": null
, "/models/group": null
, "/models/group.js": function (require, exports, module) {
    exports.Group = function () {
      /.../
    };
  }
, "/models/index": null
, "/models/index.js": function (require, exports, module) {
    exports.User = require('./user').User;
    exports.Group = require('./group').Group;
  }
, "/models/user": null
, "/models/user.js": function (require, exports, module) {
    exports.User = function () {
      /.../
    };
  }
, "util": null
, "util.js": null
, "util/index": null
, "util/index.js": function (require, exports, module) {
    exports.escapeHTML = function () {};
    exports.escapeHTMLAttribute = function () {};
    exports.importantURL = 'http://example.com/';
  }
});

Future

This the first iteration in a longer project with several more big ideas to adopt, but, IMHO, aside from one or two missing features, this is a pretty comprehensive solution for the problem of distributing code from the client’s perspective. The remaining improvements revolve around improving the optimization of packaging and using the cache more effectively.

Regarding effective use of the cache, having module requests get redirected to designated/canonical packages has lots of potential to increase cache hits when loading order varies – such as across pages. As far as finding an optimal packaging goes, it’s the kind of problem that sounds like the perfect job for some sort of nondeterministic heuristic-ish algorithm.

And finally, while the two buckets, libraryURI and rootURI, are probably sufficient for most projects, the thought of allowing for multiple library paths is appealing. Searching would of course be made more expensive for some modules, but I suspect that ordering the search paths by increasing frequency of updates may allow caching to compensate for this.

Updates

It’s since become clear that parts of this discussion are reasonably independent of each other, so they’ve been broken into their own projects:

• require-kernel: A minimalist implementation of require that supports asynchronous retrieval.
• yajsml: An asset server that performs packaging and clever things like redirecting to a canonical resource.
• modulizer: A tool that finds dependencies at runtime.

var global = (typeof window != 'undefined' ? window : global)

Below is a snippet that will return the global object independent of scope and interpreter.

var global = (function () {return this})();

Note: except in the rarest of cases, direct address of the global object is illegitimate regardless of approach, using this more robust snippet is no excuse.

• Birds, reptiles and amphibians only have one orifice for their intestinal and urinary tract. This orifice is called the Cloaca, from the Latin for sewer. If that’s not cool enough get this: some turtles have gills in their cloacal cavity.

• Belt Drives are cool! Because of the repetitive nature of their use, wear is a major concern. Thankfully there are clever ways to reduce the wear. 1) flat belts can be made into a Möbius strip. 2) timing belts can made so that the number of teeth on the belt and all of the sprokets are coprime.

• Gastropoda have diversified so much over geological time that evolutionarily things have gotten very confused. There are land species with gills as well as marine species with lungs. Slugs (Gastropoda without much of a shell) are also interesting because most go through torsion where the internals and the shell of the gastropod rotate. This can be problematic since it puts the anus right by the mouth – but evolutionarily speaking it must of been helpful for something.

• The parasitic flatworm Leucochloridium paradoxum is an amazing example of aggressive mimicry. The flatworm’s sporocyst grows within a snail, invading the tentacles of the snail, with a preference to the left. The now swollen and colored tentacle mimics the appearance of a caterpillar – which a bird host eats. A snail then consumes the birds feces completing the cycle. Some interesting bits about the infected tentacle’s effect on the snail: 1) it cannot retract into its shell, leaving the flatworm always exposed. 2) it appears to reduce light sensitivity in the snail which keeps it out in the open in view of potential hosts.

• The Tempest Prognosticator was a curious invention from the 1850’s. It was a barometer made of leeches. The inventor, George Merryweather, found that leeches would respond to changes in the atmosphere by climbing to higher ground. It consisted of a number of leaches each in their own glass jar, at the top of which was a piece of whale bone tied to a string. [diagram] When the leach would climb the jar it would dislodge the whale bone which would pull a mallet which would strike a bell – you would guess the likelihood of a storm by the number of bell rings. He had lobbied for it to be distributed throughout the coast of England, but the British Crown decided instead on the (still not entirely understood) storm glass.

• Neurocysticercosis is a condition caused by the infestation of the brain by the tapeworm Taenia solium. If you aren’t afraid of undercooked meat yet, I think you might now – the usual vector for infection is through larvae in pork meat (though autoinfection through vomit or feces is also possible). Treatment of Neurocysticercosis can be very problematic. The problem is that living cysticerci are typically asymptomatic, the complications arise when the organism dies, triggering the host’s immune response and leading to the inflammation, scarring, etc. that can lead to seizures, paralysis, and death.

• While all flies will occasionally mistake fetid wounds for dead flesh, Cochliomyia hominivorax, a spechies of screwworm fly, is notable for targeting fresh wounds and even exposed skin (e.g. the navel) for laying their larvae, causing Myiasis. The larvae are also very aggressive, if disturbed they will burrow further into the host, hence their name. They are known to infect humans and are also a major concern for merino sheep, where the condition is called flystrike. However, before you get too worried, know this – that the fly caused so much destruction to American cattle herds that the sterile insect technique was developed as a means of controlling the screw worm. This led to its eradication in the United States in 1982.

It started with my work on LaserLine. I had written a parser for ILDA files, but needed a way to test its output. Naturally, I couldn’t accept Aqua’s presence in an app associated with an app for Lasers – which are all about bright lights and dark rooms. Granted, it was only two controls and some custom images, but by the time I was done there was no doubt in my or anybody else’s mind that the final app would be “dark”.

Knowing that a complete app would need a more complete library of widgets and subclassing AppKit seemed like a good way to get intimately acquainted with its internals, I didn’t stop there. A full accounting of my adventures in AppKit really deserves its own (lengthy) post that I’ll for later, I will just say this — kids, don’t try this at home. Even I, in my pixel perfecting, eye candy licking, gradient loving glory, will admit that the whole endeavor was likely not worth the time and frustration involved. But the work was done, so I might as well publish it.

Disclaimer: DarkKit is full of sketchy code. It began as a hack – and it still is a hack. It does a whole lot of things AppKit doesn’t want you do to; a whole lot of things you shouldn’t do. It uses private, undocumented methods and even shadier things (IIRC there was toying with a super’s instance variables somewhere). Keep this in mind if you think you might need help from AppKit folks – I doubt abusing their framework will endear them to you. Use at your own risk.

What does it cover? not everything, but hopefully enough to be kinda useful. Most of the controls have their dark alternatives and DKButton covers some of the button variants present in AppKit (the normal shiny capsule button, the square beveled button, and square gradient button). Where things get iffy are Views… NSScrollViews were not designed with alternative looks in mind (not that that’s a bad thing) and that causes problems when it comes to TableViews, etc.

Using DarkKit

If you’ve ever gone about working out in the dark, then you probably have a good appreciation for one of the reasons I decided DarkKit would be a nice thing to have. When everything around you is pitch black, the fluorescent glow of the computer’s screen stresses your eyes terribly, so much so that when I’d be typesetting text or some other project that extended way into the night I would regularly enable high-contrast mode (⌃⌥⌘8) to give my eyes a chance to relax. So, if you happen to be designing an application that is going to be used in low-light settings (a laser show for example) a good low-light interface approaches the point of being a requirement.

IMHO, a really dark interface also does an excellent job of placing content front-and-center. The huge contrast between your app’s monochrome controls and your app’s colorful/interesting content tells your eyes exactly what to look at and drastically reduces visual clutter.

So yea, if you happen to be doing a pro-thing (and you accept the disclaimer from earlier) DarkKit might be for you. And, if you hadn’t noticed yet, jet black interfaces seem to have a way of kicking an app’s sex appeal up a notch. So, if on the other hand you find yourself looking for cheap UI pixie dust DarkKit might also be helpful – not that I endorse pixie dust… just sayin’.

Seeing that doing something as damaging to you application’s stability, maintainability, and general code-quality as adding an illegitimate framework like DarkKit should only be done with the greatest care and after considered thought, I built a IBPlugin* so you can build all your dark interfaces with minimal effort right from interface builder. Enjoy!

*There was also a palette, back when that was cool…

» Continue on to svn.oofn.net

I’m my past post I forgot to mention just how significant distraction can be to keeping projects from getting finished. Well, a bit ago I got Atmel’s AT90USBKey and last week, while up in a cabin in Wisconsin’s northwoods, I indulged my sentimental side and started reading Thoreau’s Walden. I’ll plan on getting back on the wagon, just not right now…

We developers are in the idea business too and, although I feel wholly unqualified to say this, the good developers are the ones with lots of ideas. In my experience as a mediocre programmer I spend a lot of my time hounded by ideas of my own creation.

I found this great passage in an article by Richard P. Gabriel:

John’s world is a world of ideas, a world in which ideas don’t belong to anyone, and when an idea is wrong, just the idea – not the person – is wrong. A world in which ideas are like young birds, and we catch them and proudly show them to our friends. The bird’s beauty and the hunter’s are distinct.

[…]

Some people won’t show you the birds they’ve caught until they are sure, certain, positive that they – the birds, or themselves – are gorgeous, or rare, or remarkable. When your mind can separate yourself from your bird, you will share it sooner, and the beauty of the bird will be sooner enjoyed. And what is a bird but for being enjoyed?

Every creative would love to claim a monopoly on divine inspiration, but since we can never quite manage that we settle for just hiding away all those half-finished, not quite thought-through, potentially embarrassing ideas of ours – and it’s a really nasty habit.

For developers, we have trouble kicking things out of out our ~/Projects folder and sharing them with others because they’re “just not done yet.” Doneness is a dangerous idea – especially for perfectionists. It is always so tempting to keep polishing this or that project until you can really say it is done. Or worse, putting something pretty good to the side and promising to come back to it later to finish it off.

I’ve without a doubt fallen into that trap, granted I’ll make an argument for school getting in the way, but the truth is I’ve been sitting on a whole lot of “not done yet” projects for no great reason at all. Now that I’m nearly out of school, with new-found time on my hands, I’m resolving to drag them out of the closet, give them the once-over and throw them out for others to have – done or not.

There, that said, let’s begin. Last year the university began a transition to new ID cards. Starting in the fall 2007 semester all new cards issued are of the new type and the old cards will eventually be phased out completely sometime after 2009.

According to the document announcing the new design:

The i-card has a new look! After nearly 11 years without a major design change, the University of Illinois i-card is getting a facelift. The new card embodies both aesthetic and functional upgrades essential to the support of new card-based services. The new design represents several months of collaboration, consultation, and planning with multiple campus leaders. In addition, designs were approved by standing campus ID Committees and representatives from several campus units that provide card services.

With regard to the aesthetic and functional improvements, on the former they manage only by virtue of default and to the latter the card is an abject failure. Concerning the “several months of collaboration, consultation and planning…” well, on second thought let us not go there.

The purpose of an ID card is to present information and absolutely nothing else. Sure, it can look good, but it is not a fashion accessory. In this context the designer’s job is to convey information as effectively as possible, only working to make it pretty to the extent that it doesn’t detract from it’s effectiveness. it’s all about usability.

Usability

In this application it’s very important to understand that not all information is equal. Some items are more important than others; I care about the person’s name more than I do their card’s number and so on. In order to account for this a good designer should make sure that useful information pops out at the user and other information fades into the background – the ways you do this are pretty standard, changing the text size, color, typeface, and/or position.

With that in mind lets see how effectively each version does its job. Here’s a list and subjective ranking of how apparent each bit of information is on the card:

Old Card	New Card
Name ID number Campus Expiration date Username Classification Library number Card number Issue date	Name Expiration date Classification ID number Library number Card number Campus

The number one thing that amazes me with this new card is that its designers managed to reduce the amount of information presented while, at the same time, reducing the usability of the remaining information. For any non-designers out there, just be aware that this is not how things are supposed to work. How did they manage this? THEY DESTROYED THE HIERARCHY.

Taking a look at the ranking for the old card design, it has a clear order that seems to correspond with what I would consider the relative importance of each morsel of information – name and number at the top and onto the library and card number (two seldom used items) at the bottom. On the other hand, for the new card the hierarchy formed only has half as many levels and I notice that half of the items of the new card fall into the 3rd stratum… uh oh.

The old card was designed smart… it was designed so that the very first number that appears to the searching eye was the most important – the university ID. In the “redesign” finding this number requires real, conscious effort. Where in the old it was set in a larger, bolder, unique color; in the new it is thrown into a big lump of useless information set in 10pt grey Arial – blech.

The very same thing could be said about the classification label. The label was a beautiful little piece of usability, where it could be color coded to the class of the card holder – along the lines of green for “Undergraduate”, orange for “Faculty”, etc., but now it too is dumped in with the always-grey text at the bottom. And I just don’t know what to make of the expiration text, with its bright-yellow color it is near if not possibly above cardholder name in noticeability.

Appearance

Like I mentioned above… the claiming their design is an aesthetic improvement over the past really isn’t terribly impressive, it would be hard to argue that the original was even trying.

First things first, why did the card get set entirely in Arial? I’m not one jump onto the Arial-Helvetica hatefest too readily, but I do ask that there be a good reason for using Arial over the original. Apart from the (distinct) possibility that this card was designed in MS Word I can’t think of one.

Next up is the gaping whitespace in the upper-right of the photograph. Huh? It is completely detracting and a bit unbalancing. In the physical version where the entire card is higher contrast (pre-press issues?) I will occasionally think a part of the card has gone missing.

And finally onto the business of this whole “i-card” thing. The cause of my university’s compulsion to brand everything will probably never be understood and I don’t feel like debating its premise… though it certainly is debatable (Email at UIUC is Express Mail™), but I would like question this i-card idea. 1, It does not add value – mentioning to my friends that I have an “i-card” does not impress them. 2, It does not aid identifiably – I don’t expect to get confused between this ID card or the zero (0) other university cards I have in my wallet. 3, The i-card logo is a ridiculous comic-sans-like handwriting that has no place in a formal document like this.

What to Do

Since being a responsible critic means having a reasonable solution at the ready. And since a coping strategy of mine for living in this terribly designed world of ours is dwelling on “better” solutions, I went about designing a card of my own.

I’ll spare you all the designing details (as this post has already gotten very long), but I would like to spend some time to justify the design. I’ll begin with the hierarchy. Front and center is are the 3 most important identifiers (excluding the picture) each of which are unique easily identifiable. Following is the expiry date and then the classification, coded with color for at-a-glance recognition. In the background are the library and card numbers, in small (but legible) type. Out of sight and to the side is and orange banner with the campus’s short name.

Except for the issue date, the design retains all the information of the old card. It returns the barcode and username that were removed in the revision. It also adds a printed signature field that was on the back of the original card (and curiously missing completely in the revision).

It also, IMHO, looks better than the previous designs too.

Postscript

This is not to say that UIUC’s card is the worst of the bunch. The university ID card is an apparent backwater in the world of design. Below is a gallery of cards I collected as research:

Out of the lot Wisconsin, MIT, and PennState came out with what I’d consider to be the best designs (and Chicago gets an honorable mention). But as a general rule they all either did pretty good in appearance (UCLA & Minnesota) but failed as far as usability went, or they failed in both respects. Eastern Illinois, without question, took last place. The beveled Gill Sans Ultra Bold “panther card” text is nauseating.

After they left I decided to keep indulging in past childhood and build some more sets. As I was flipping through the binder of instructions those for set #6563 caught my eye:

While it may seem innocuous at first glance look a little closer:

You see that it comes with two suspicious looking brown 1×2 pieces, copious amount money, and suitcases to carry them in. The pontoon plane also has a safe for storing “the goods”. Hmmmm…

It appears that Gator Landing is all about DRUGS!

A few years ago, while analyzing an experiment on number comparisons, Dehaene noticed that subjects performed better with large numbers if they held the response key in their right hand but did better with small numbers if they held the response key in their left hand.

[other interesting info]

He even suspects that this may be why travellers get disoriented entering Terminal 2 of Paris’s Charles de Gaulle Airport, where small-numbered gates are on the right and large-numbered gates are on the left.

Now I could never advocate blindly quoting someting like this without (at the very least) a peak at the source article – especially one as interesting, accessible, and informative as this one was.

Found amongst the many other quite interesting facts about cognition with a neurological slant on the wonderful Mind Hacks blog.