function render(text, data) {
	pieces = text.split(/\{(\w+)\}/)
	for (var i=0; i < pieces.length; i++ ) {
		if (i%2 == 1) {
			pieces[i] = data[pieces[i]];
		}
	}
	return pieces.join('');
}

It simply looks for variables in curly brackets and replaces them with values from a dictionary (or associative array).

I was going to add looping capabilities, but found I was ok doing the looping in javascript - that is, instead of having the loop in the html template, I'd create small html snippets that I would render in via a javascript loop and insert into the document.

Sample usage:

html:

<p id="something">Hello {name}, I wish you would {verb}.</p>

javscript:

render($('#something').html(), {name: 'Joe', verb: 'disappear' } );

So to replace the text with the rendered version:

$('#something').html( render($('#something').html(), {name: 'Joe', verb: 'disappear' } ) );

I use them both together, but I feel a horrible sense of waste as there is so much overlap.

YUI 3 provides jQuery like selection and chaining capabilities, but I’m so sold on jQuery I’ll have a hard time dumping it. 

I feel jQuery taught me intelligent javascript, and to leave it would be to stray from a growing path of knowledge.

So here’s my javascript pony wish: YUI should adopt jQuery as its core engine and write YUI 3.0 on top of it. 

Wouldn’t that be fantastic? Best of both worlds. I don’t think it’s that far from possibility actually – the YUI 3.0 base looks a lot like jQuery. 

I brought it up with the YUI folks at the Yahoo internal conference last year. They of looked at me funny, as in why would we do that?

Hmm. I’m still wishing for that pony.

To refresh your memory, the script does a very simple thing – it brings the next image to the top of the browser window so you can see it. You hit “j” to see the following image and “k” to go back to the previous.

To install, click and drag the ReaderScroll bookmarklet to your FireFox toolbar or right click on it if you’re using IE.

Once installed in your toolbar, you can enable it for any website you’re visiting by clicking on it in your toolbar. For example, go to any of these pages with lots of images and then click the bookmarklet. Then click anywhere on the page you’re viewing and hit the “j” key several times until the first large image is at the top of the browser window. Now you can navigate to the next image by hitting “j” again and go back to previous images with “k”.

The bookmarklet doesn’t have the disadvantages associated with the ScrollMonkey GreaseMonkey version; it’s only triggered when you click it, so no unnecessary overhead. It would still make sense to make it more generic so you could navigate to the next paragraph, heading, etc. With jQuery under the hood this would be easy to do and I’ll do it if there’s demand for it.

And thanks to FriendFeed from whom I stole most of the idea for the bookmarklet.

I finally found a few minutes to hack at it, and sure enough, it was quite easy to do with GreaseMonkey and jQuery.

The script does a very simple thing – it brings the next image to the top of the browser window so you can see it. You hit “j” to see the next image and “k” to go back to the previous.

Install GreaseMonkey and then install ScrollMonkey by clicking on it.

Once installed, go to any of the above pages with images, click on the page (to ensure the page is in focus), and hit the “j” key a couple of times until the first picture is at the top of the browser window. Now hit “j” again to go to the next image and “k” to go back.

The script is very simple and brain dead – I’ve made no attempt to make it intelligent. In particular, it’s active on every page and it downloads jQuery, which is probably more overhead than you want to have. In my case I typically have GreaseMonkey turned off and only turn it on when I need it, so it’s not much of a problem. It also looks at all images instead of attempting to find the large images of interest.

It would also be smart to generalize it to deal with anything – paragraphs, headings, etc – instead of just images.

And it’d be probably be nice to have it turn on via a hotkey instead of always being on, and it probably will interfere with any forms you’ll try to fill out.

But practically speaking none of these are problems I run into, so I’ll leave them for now and fix them if there’s any demand for it.

Give it a try and let me know what you think.

Here’s the code in its entirety, for those interested:

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);  

 // Check if jQuery's loaded
function GM_wait() {
	if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
	else { $ = unsafeWindow.jQuery; run(); }
}
GM_wait();  

function run() {
	var images = $('img'),
		idx = -1,
		nimages = images.length;
	$(document).keypress(function (e) {
		// j == 106 ; k == 107
		if (e.which != 106 && e.which != 107) { return; }
		if (e.which == 106 && idx < nimages-1) { idx++; }
		if (e.which == 107 && idx > 0) { idx--; }
		var top = $(images[idx]).offset().top;
		unsafeWindow.scrollTo(0, top);
	} );
}

I tried to get into Crockford’s Prototypal Inheritance method but I like the plain-old prototype inheritance without the object.create better. It’s entirely possible that I’m not quite getting Crockford’s method and its advantages; feel free to enlighten me by leaving a comment.

Anyway, here’s what I’m going with: We’ll have a base class (actually an object) English that says “hello” and “goodbye”. We’ll have a Spanglish class (actually an object) that inherits from English and says “ola” instead of “hello” (over-rides the hello method), but keeps saying “bye” (inherits the bye method from English).

The Spanglish.prototype = new English(); line does the actual inheritance by setting Spanglish’s prototype to be an instance of English.

function English() {
	this.hello = function(){ return "hello"; }
	this.bye   = function(){ return "bye"; }
}

function Spanglish() {
	this.hello = function() { return "ola"; }
}
Spanglish.prototype = new English();

e = new English();
s = new Spanglish();

e.hello();   // prints "hello"
e.bye();     // prints "bye"
s.hello();   // prints "ola"
s.bye();     // prints "bye", inherited from English

The better user experience would be to have Google Reader style hotkeys that bring each picture into view, lining it up properly for easy viewing. You’d be able to hit “j” after viewing each picture to see the next. No more messing with the scrollbars.

I’m guessing a greasemonkey script to enable this with any page would be pretty straight forward to do. Anybody know if it already exists? If not, someone should do it.

Javascript started as an ugly language but has been steadily shedding its bad parts and adopting a beautiful functional style. With the performance piece figured out and a tremendously large number of installations and runtimes (just about every browser in existence has a Javascript engine), it could become the most important programming language of the near future.

YUI, however, does offer a bunch of nice, well tested UI components which are generally lacking in jQuery, leading me to typically use both YUI and jQuery together in an unattractive Frankenstein way.

Therefore I’m excited to see YUI’s move towards jQuery style selectors and chaining with their 3.0 preview release. It’s also very nice that they’ve abstracted away javascript file loading with the module concept – with YUI 2.x you have to do a which-files-do-I-need dance and load each of the multitude of files separately. With 3.x you “.use” the module you need (say “dd-drag”) and YUI intelligently loads the required files in a single HTTP request.

This is good stuff. I’m really enjoying jQuery so it’ll be tough to completely jump ship, but with the new additions I could see doing a lot more with YUI.

Now I’m wondering what the best packing method for jQuery on iPhone is, since size and performance are even more important there. gzip or no gzip? Which packer?

Basically I just want the HTML/CSS/JavaScript app I have packaged so it can live offline on the iPhone, have network access, and use the local SQLite instance. I’ve looked at the SDK videos, the docs, and everything else I could find, but they all seem focused on writing Objective-C.

If that’s not possible, is there a bare-bones skeleton app that simply embeds safari and renders files stored on the iPhone?