I’ve been working a great deal with JavaScript Objects which are used purely to store data but which need to be performantly converted into HTML code blocks. In order to achieve this I created a function which searches for specific delimiters and replaces the delimiters with the Object’s property of the same name.

The code to do this is fairly straightforward:

/* This code is released under a MIT license */
String.implement({
	template: function(props) {
		var regex = /%(\w+)%/g;
		var newStr = this.replace(regex,function replacer(mid) {
			var key = mid.substring(1,mid.length-1);
			var value = props[key];
			if (typeof value === 'string') {
				return props[key];
			} else {
				return '';
			}
		});
		return newStr;
	}
});

Using this function I can take a snippet of HTML and a JavaScript Object containing replacement information and easily turn the snippet into a useful String for user with the innerHTML property. For example, starting with the following HTML

<div id="template">
	<div class="test">
		<p>%testName%</p>
		<p>%testDescription%</p>
	</div>
</div>

I can execute this simple piece of JavaScript and get a useful HTML. The JavaScript and HTML output follow.

var newHtml = $('template').get('html').template({
	'testName': 'This is just a test',
	'testDescription': 'Please do not be alarmed this is a simple test'
});
$('template').set('html',newHtml);

The HTML will now look like the following

<div id="template">
	<div class="test">
		<p>This is just a test</p>
		<p>Please do not be alarmed this is a simple test</p>
	</div>
</div>

I’ve found this technique to be incredibly useful. Hopefully someone else will as well.

On a project I’ve been working on recently we are making use of a number of 24-bit PNG images. This has cause a number of problems in IE6 because we’re also making use of a number of opacity animations using the MooTools javascript framework. This results in a lot of black crap showing up when you animate or change the visibility or opacity of the transparent PNGs in Internet Explorer 6 and 7.

The first solution was easy, disable opacity animations on transparent PNGs. This fixed the problem almost completely but on a page with a flash movie and a number of things still changing opacity at the same time (even though it was from 0 to 1 which was basically a visibility toggle) the black overlay still appeared from time to time. The most successful attempts at a solution without eliminating the opacity changes were inspired by an article about developing Mimeo which was also quite educational about how IE6 handled 24-bit PNGs and some image retrieval in general. The most informational part is included below..

The apply method is basically used to tell the filter to capture it’s current state in terms of layout and visibility and track changes between then and a call to the play method. It really shouldn’t be necessary to call this in the AlphaImageLoader’s case because there’s no transition, but for whatever reason, this change alone, seemed to make this bug disappear. I say “seemed” because it still appeared every now and then. Later we noticed that once we were no longer including the gAMA header in the PNGs we generated the problem went away entirely. Since we didn’t need gamma settings, this was the final solution to the problem for us. Whether or not the apply call is still needed at this point is unknown as there was no sense in removing something that originally had solved the problem and introduced no performance impact.

Of course I attempted the apply method and removing the gAMA header which rather than fixing the entire problem still only mostly fixed the problem. After being stuck at this point for a while, attempting to find more information and another way to basically fix the way IE6 handled these images without removing the transparency I had something of an epiphany. Since I was already not animating the elements with the transparent background images why not just move them rather than changing the visibility or opacity. It turns out this incredibly simple and solution worked fantastically for me. The elements in question were already using position: absolute; and so all I had to do was set left to something outrageously off the screen, in this case I used -15000px.

Of course the elements won’t always already be absolutely positioned but this technique can still be used if you store the original value of position and whatever position attribute (top/left/bottom/right) used to place the element off-screen. That’s all there is too it!

Having used TextMate for a while I have grown quite accustomed to being able to fold sections of code, particularly function declarations, so I can glance through the file to see what functions and variables I have defined. However, I recently made a totally nerd bragging rights based decision to test out MacVim. Well it wasn’t all bragging rights, being able to navigate a file without having to move my fingers from ‘home base’ would be a big plus.

The project I’m currently working on though has a couple of really large javascript files and navigating them quickly in MacVim without the foldings was something I found to be quite difficult so I started looking at the Vim help files and found the ability to create folds. Due to a disciplined use of tabs to indent code blocks :set foldmethod=indent worked fairly well but eventually it started to bug me because the of the fold was actually the first line of the content which meant the folds looked something like functionName: function() {
+ - - if (test) {
}, There had to be a better way. I realized what I wanted to do was create a fold on the line with the function declaration down to the line with the ending brace. I could not find an easy command to do this so I created a simple javascript filetype plugin (addfoldings vim plugin).

In order to get this to work I had to add filetype plugin on to my .vimrc file and I had to create the ~/.vim/ftplugin/javascript directory and drop the addfoldings.vim file into it. By default the foldings are all open but they have been created.

Update: Things are of course never as easy as they seem. The above works fine as long as you don’t add lines to the file you’re working on which is of course absurd, additionally it won’t update the foldings as you go which sort of limits the usefulness. Hopefully I’ll be able to update this to be more useful.