Hacker News Reader

Comment by tlrobinson | Hacker News Reader

It's a bit easier in a managed framework like Cappuccino, since we have the opportunity to swap URLs before using them. Typically you ask a "bundle" (CFBundle/CPBundle) for a resource's URL, and it will give you back a data URI or MHTML URL for that resource if it has one and the browser supports it, otherwise it will give you the individual image's URL.

In JavaScript you would need a similar layer of indirection. I don't know how you would do it for CSS (presumably inlining them directly in the CSS?)

jashkenas mentioned he was using the data URI / MHTML technique in Jammit for Rails (http://documentcloud.github.com/jammit/) but I haven't looked into the details.

Also note we do runtime detection of support for data URIs or MHTML. There's a version of IE (IE7 on Vista, I think) which we have to fallback to individual images for.

View on HN

Here's the scoop on how it works with Jammit:

* You define your CSS asset packages as you see fit, using an ordered list of directory globs that gets expanded into a list of unique stylesheet names. (Same idea for JS packages).

* Minified, compressed versions are generated, using either the YUI Compressor (for CSS or JS) or Google Closure Compiler (for JS only), in both MHTML and Data-URI variants.

* Helpers are provided using conditional comments to serve the appropriate stylesheets to the appropriate browsers.

* Finally, packages are "gzip --best"'d, so that you can have your webserver serve them entirely statically.

* If you've set it up properly, you can have a single HTTP request that contains all your stylesheets for the page, as well as all of your embedded images and web-fonts.

Just for kicks, here's an example with a stylesheet that references 100 small images. There's a link on the page to the packaged version. Try the difference over wifi.

http://jashkenas.s3.amazonaws.com/misc/jammit_example/normal...

If you're looking to implement MHTML yourself, be careful about whitespace. Internet Explorer will cheerfully ignore MHTML assets that contain Unix-style newlines.

You have to be a little careful here, as certain versions of IE won't render MHTML assets the second time they area loaded, but again only under certain circumstances.

In Cappuccino, in addition to building in all the known workarounds (serving mhtml files with content type of text/plain, adding cache busting parameters if needed), we actually perform a runtime check of the supported feature before we use it. So, we try to load a single 1px dataURL image, and if that fails we try to load a known 1px MHTML image, and if that fails we fallback to the original image resources.

Awesome, I am a proud supporter of the Atlas beta so I might use this as an excuse to dive in. :)

Reply on news.ycombinator.com