Posts tagged as "web development":

Using HTML Snippets as Templates with MooTools

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.

September 4, 2008

MooTools 1.2 Released with a Myriad of Changes

My favorite javascript framework has come out of beta into a final. The release of MooTools 1.2 brought about a whole slew of changes and not just to the code base. The Moo team split made a number of API changes to make the library more usable and more consistent. The team has also separated the project into ‘core’ and ‘more’. MooTools Core is, as expected, the heart and soul of the framework, it contains the classes and functions the rest of MooTools is built upon. MooTools More on the other hand is akin to officially sanctioned plugins.

In addition to API changes and the separation of core and more the MooTools team has moved from a Subversion repository to Git. Both core and more have their own GitHub repositories (mootools-core and mootools-more respectively). Of course without Subversion Trac loses a lot of it’s appeal and so they have moved their defect tracking over to Lighthouse which provides some Git/GitHub integration through plugins (called beacons).

I’ve been working with the 1.2beta for quite some time but even the beta to the final had a number of changes (mostly shortcut methods were removed) so there will still be some adjustments. All in all though I’m pretty excited about all the changes and what it means for things moving forward. In fact I’m so excited about it I’ve created my own fork of the mootools-core and begun tinkering around with the source. I’m also hoping to get a little more involved in the project rather than just being a faithful user. So here’s to the bright future of a great library.

June 13, 2008

Theming Up Wordpress

Last night I dove a little deeper into the pieces that make wordpress tick and put together the admin panel for the theme I’ve been building. My goal is not just to make the theme pretty, flexible and readable but also to make it pretty customizable. After all I know my tastes are not like everyone else’s and so why should I limit use of the theme to people that want to do things like me?

Anyway the theme is in much better shape now than it was a little while back and I’m proud to say I’m ok with it enough to use it here (as you may have noticed you phantom reader you). Anyway the theme is looking alright and it’s even got options now which I think is pretty exciting. It’s not an official release yet because I still want to fix it up some more and give it some more options before creating an ‘official’ release.

June 5, 2008