A Folk History of Hayes Valley

Folk, common, local, whatever, history is a fascinating thing (no surprise then, that I grew up listening to [*This American Life*](http://www.thisamericanlife.org/)). I’m [convinced](http://en.wikipedia.org/wiki/Interesting_number_paradox) that there is no place you can find that is not interesting, especially if you happen to live in a large city.

I live in the Hayes Valley neighborhood of San Francisco. While it does seem neat, clean, and nice, if you pull things back and look beyond the gentrification, the boutiques, the parks, the disappeared freeway, and the [earthquake](http://en.wikipedia.org/wiki/Loma_Prieta_earthquake) – back into the ’80s – you would find the identity and experience of this neighborhood completely different. Back then the neighborhood (but, honestly, most parts of most cities) was pretty “edgy” Indeed, in 1979, Chris Pirsig (from [*ZAMM*](http://en.wikipedia.org/wiki/Zen_and_the_Art_of_Motorcycle_Maintenance)) was [murdered](http://www.sfgate.com/cgi-bin/article.cgi?f=/c/a/2004/11/19/WBGKJ9SCPS1.DTL) a few blocks away from my apartment.

However, despite all of the drama of the moment, in history, most events are forgotten and stories remain untold. I’d reserve judgment on whether or not this is a good thing, but, good or bad, this does make the discovery of those stories, regardless of provenance, something precious.

Anyways, not to make to too much of it, a while ago I dug up a short history about growing up in this neighborhood – way before I ever stepped foot in it – and I think it’s pretty interesting:

*Chronicles Of A True Hustler*:
[Pt. 1](http://dailymath.ihiphop.com/weblog/?p=78),
[Pt. 2](http://dailymath.ihiphop.com/weblog/?p=84),
[Pt. 3](http://dailymath.ihiphop.com/weblog/?p=90),
[Pt. 4](http://dailymath.ihiphop.com/weblog/?p=100),
[Pt. 5](http://dailymath.ihiphop.com/weblog/?p=111),
[Pt. 6](http://dailymath.ihiphop.com/weblog/?p=120), [*Archived*](http://dailymathematics.blogspot.com/search?q=chronicles+hustler&by-date=true)

Emulating UIBarButtonItem Appearance

While it’s best to avoid, sometimes it you must duplicate the appearance of UIToolbar items. Unfortunately, UIKit doesn’t appear to provide any means for achieving the etched look that it adds on each item it has control over so, for custom UIBarButtonItems you must do it manually.

In my case, I needed to present some information on the toolbar, but needed it to be non-interactive, have a special layout, and use some existing vector images. To that end, here are some category methods that made it straight forward: [https://gist.github.com/2465637](https://gist.github.com/2465637).

Given that, etching can be had with a few lines. It’s not efficient, but it is easy.

[[[[UIImage ct_imageWithPDFNamed:@"time" size:CGSizeMake(26, 26)]
  ct_imageWithOverlayColor:[UIColor colorWithRed:112/255. green:119/255. blue:123/255. alpha:1]]
  ct_imageWithInnerShadowOffset:CGSizeMake(0, 1) color:[UIColor colorWithWhite:0 alpha:.6]]
  ct_imageWithShadowOffset:CGSizeMake(0, 1) blur:0 color:[UIColor colorWithWhite:1 alpha:.6]]

I Shipped a Thing

Late last week a little app of mine made its way onto the App Store. So congratulations to me! but, uh, a minesweeper clone? that would *not* be very original. Nope, it’s not very original, but it is *better*.

It is my weak protest against the [garish](http://itunes.apple.com/us/app/minesweeper-*****/id407768156?mt=8) implementations that litter the App Store. It’s not something I’d plan to profit from (game development has always seemed to be an inevitably feral existence), but an argument for quality in the App Store, where barring a [few](http://carcassonneapp.com/) [exceptions](http://cocoastuff.com/products/deepgreen) it can seem like there is so little.

…It was also fun to do.

…How many times have I heard *that* said before?

Quick and Dirty High-DPI Images

While working on [this page](http://halfworking.com/mines), I discovered just how awful the web can look on the the the iPhone and iPad with their “retina” screens. In native applications, normal resolution images are scaled without anti-aliasing, but in Mobile Safari images are scaled _with_ anti-aliasing, and as a consequence, many important pixels can get badly blurred.

This isn’t an unrecognized problem and it has been solved [elsewhere](http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/), but the accepted approach seems require JavaScript and class names, which strikes me as unnecessary – CSS declarations alone should suffice.

To that end, the approach I use is [this](https://gist.github.com/2394800):

@media only screen and -webkit-min-device-pixel-ratio:2 {
  img[src="images/icon.png"] {
    content: url("images/icon@2x.png");
  img[src="images/store_small.png"] {
    content: url("images/store_small@2x.png");
  img[src="images/screen_fail.png"] {
    content: url("images/screen_fail@2x.png");
  img[src="images/screen_play.png"] {
    content: url("images/screen_play@2x.png");

*I swear I read about content negotiation for this at some point, but all I can find is an old, unresolved [discussion](https://lists.webkit.org/pipermail/webkit-dev/2007-June/001923.html) at [webkit.org](http://webkit.org).


Ugh, I’m pretty tired of the endless parade of “Oh hai, iz wrtn a JS loaderz” projects. Given the number of existing implementations and the general solved-ness of the problem, the time devoted to it is disappointing. But here I am, doing just the same.

## Principles

This work is related to that done in [RequireJS](http://requirejs.org/) and [CommonJS](http://wiki.commonjs.org/wiki/Modules), but hardly [bound](http://tagneto.blogspot.com/) 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](http://wiki.commonjs.org/wiki/Modules/1.1.1) 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](http://c2.com/xp/DoTheSimplestThingThatCouldPossiblyWork.html) 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](http://c2.com/cgi/wiki?RulesOfOptimization). Chances are, that many possible optimizations are rendered unnecessary by the right tools.

### Dependencies
Most current implementations use one of [five](http://wiki.commonjs.org/wiki/Modules/Transport) 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.


### 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.


## 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](https://github.com/cweider/modulizer/tree/experimental) 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">
  app = new (require('/app').Application)({
    "userId": 1234
  , "baseURI": "http://example.com/"

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:

  "/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](https://github.com/cweider/require-kernel): A minimalist implementation of `require` that supports asynchronous retrieval.
– [yajsml](https://github.com/cweider/yajsml): An asset server that performs packaging and clever things like redirecting to a canonical resource.
– [modulizer](https://github.com/cweider/yajsml): A tool that finds dependencies at runtime.

Finding JavaScript’s Global Object

With JavaScript code being written in ever more diverse environments these days, some assumptions are bound to get broken. One such assumption is that the object bound to the symbol window in the current scope is the global object. Every approach I’ve seen searches through a list of probable symbols and returns the first defined, instead of using the language itself.

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.

Older Entries »