jsFiddle Example: Loading Mustache Partial Templates Via Ajax

Mustache is a great, simple, templating language, but the JS implementation (https://github.com/janl/mustache.js) doesn't make it clear that not only can you load partial templates dynamically, you can load them via Ajax (just not asynchronously). This is an example of using a function instead of an object as the partial argument to Mustache's .render() method.

This example has a bit of bit of logic to work around jsFiddle's limitations. For example, in order to let jsFiddle spoof an Ajax call, we need to supply the template data at the time the Ajax call is made, and therefor, the templates must reside in the HTML. In the real world the point of this would be to place each template in its own .html file, and the templateLoader() would be making get requests to load their content directly.


jsFiddle Example: Using a Flat Index to Manage Complex Trees

Folder Trees

My current project uses a complex tree to hold a lot of data and need to allow the user to re-arrange branches via drag and drop. Some suggested it would be difficult to locate the proper nodes and rearrange the tree. This example shows how you can use a flat index of tree nodes to manipulate the tree without needing to iterate the tree multiple times or recreate the index.


I Made This: Color Extractor

Preview of Color Extractor Check this out if you're bored or love color porn: cx.jonhartmann.com. It runs fully in your client, extracting color palettes from the image using the Canvas. The palette is selected based on color density and an amazing color bucketing system that I'd love to claim as my own.


Writing jQuery Widgets

This blog is far too quiet. I'm still doing coding. Lots of it in fact, but I'm also doing presentations to the other developers on a regular basis about new topics and tests, so I'm not generating lots of documents for external consumption. Except for this presentation.

This is pretty much a reskinning of info from the jQuery website; The Home Depot isn't actively using Widgets so its not going to be of use internally for a while.

Hit "Download" below to download a PPTX presentation covering the basics of jQuery Widget development.


Getting Started with Cufon

I've been curious for a while about techniques for font replacement on the web. We've probably all heard about the idea of embedding fonts, but looking around at the standards right now, it doesn't sound like any one browser has things right, so I decided to explore a third-party option. Read more to learn about the basics of Cufon, an easy to use font "embedding" system.


Using Event Bubbling to Your Advantage

Its happened to everyone working with Javascript: you build your test app that handles clicks on elements to do really neat things and everything's going great. You move it live, and as the data starts coming in your app gets slower and slower until finally the system starts to become unusable. Whats the problem? In testing you had maybe five or ten clickables, but your app has been growing, and you've now got 20, 60, 120 or more, and the time it takes to bind all of your click events is skyrocketing. What if you could just use a single handler for all of them?


More Entries

Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.