Motivation

As an independent web developer, I have always wanted a source code management solution (SCM) similar to the ones bigger organizations offer to their developers. Ideally, that solution would not only provide me with basic version control functionality but it would also help me backup, synchronize and share my projects.

Possible Solutions

Most of the companies I have worked with rely on centralized systems like Subversion, so naturally my first approach was to set up my own copy of the software on desktop PC at home. After a while I realized how time-consuming administering the service was. In order to access it from the internet, I even had to expose the PC to the internet using a dynamic domain name service, which isn’t the most secure or reliable thing to do.

So I decided to look into 3rd party project hosting services. I first checked out the free ones like SourceForge and Google Code. But they all required me to make every project open-source and I don’t always have that possibility.

I was then starting to evaluate some of the paid solutions when I realized I already was paying for a basic hosting service. Unfortunately my plan didn’t include SCM but maybe that didn’t matter. That was when I discovered Bazaar.

Bazaar Version Control System

Bazaar is just one of the many modern version control systems that unlike Subversion can work in a decentralized manner, but this one in particular doesn’t require a special protocol to work with. That means you can combine it with any FTP hosting account for reliable, affordable source code management that you can control in full.

What’s more, using a centralized-decentralized workflow you can collaborate with other developers that might or might not have their own FTP hosts.

Hands-On

Here’s one of the ways to use Bazaar.

First you need to set up an FTP/SFTP user on your server, for instance using CPanel. In this example that user is called “bzrusr”.

It is also a good idea to generate a key for that user and install it on the client so that you don’t have to type in the password.

$ cp bzruser.priv ~/.ssh

Since we are working with just one FTP user, the first thing to do with Bazaar is identify yourself:

$ bzr whoami "John Doe <johndoe@mail.com>"

To verify:

$ bzr whoami

John Doe <johndoe@mail.com>

If you want to add an existing project, you initialize it, add files to it and save it:

$ cd MyExistingProject

$ bzr init .

$ bzr add *

$ bzr commit -m “Initial Revision”

Once you have a local branch set up, you can upload it to your server:

$ bzr push sftp://bzrusr@yourdomain.com/BazaarProjects/MyProject

Now you can work locally if you want:

$ edit somefile.txt

$ bzr ci “edited some file”

And you can push the branch to your server anytime you want.

Someone else can pull the branch from the server:

$ bzr pull sftp://bzrusr@yourdomain.com/BazaarProjects/MyProject

You can even use the more traditional checkout command to work in a centralized way (just like CVS or Subversion):

$ bzr checkout sftp://bzrusr@yourdomain.com/BazaarProjects/MyProject

Bazaar even lets you bind or unbind your branch from the central repository to work locally:

$ bzr unbind

To go back online and use remote commits:

$ bzr bind

Finally, to download the changes someone else might have uploaded, you just have to use the merge command before pushing the branch again.

$ bzr merge

$ bzr commit -m “Merged branch”

$ bzr push

And that also works with the update command if you are bound to a remote repository:

$ bzr update

$ bzr commit -m “Merged branch”

For more information go to Bazaar’s official site, where you can download the tool, documentation and great tutorials:

http://bazaar.canonical.com/

Hello all and welcome to the C+C Software Factory blog.

On this, my first post, I would like to demonstrate a technique for storing XHTML templates on external files and applying them using standard JavaScript and DOM methods.

There are two main files involved in this example:

1. myTemplate.xml - contains the common structure for all the pages that are instances of the template. In this case the layout consists of a table with header, footer, left column and right column cells.
2. myPage.html - represents an entry point and an instance of the template. It contains the markup to be relocated within the corresponding region of the template.

For clarity, I separated the CSS and JavaScript code into two files named myPage.css and myPage.js.

So basically what we have is two separate markups -layout and content- that we want to merge, customize and display. That work is done by the applyTemplate() function invoked when myPage.html is accessed.

In a nutshell, here's what the applyTeplate() function does:

1. Load the external XML document containing the template
2. Import the template nodes into the main HTML document - without displaying it
3. Move the original content (nodes) into the corresponding region of the layout
4. Display the final layout by appending the imported node to the body element

Finally these are the most important snippets of the code:

myPage.html (entry point, template instance):

<body>
	<div id="rightContent">
		<h1>Lorem ipsum dolor sit amet,</h1>

		...
	</div>

	...
</body>

myTemplate.xml

<table xmlns="http://www.w3.org/1999/xhtml" class="layout">

	...
	<tr>
		<td colspan="2"><div id="headerContainer">...</div></td>
	</tr>
	<tr>
		<td><div id="leftContainer">...</div></td>
		<td><div id="rightContainer"></div></td>
	</tr>
	<tr>
		<td colspan="2"><div id="footerContainer">...</div></td>
	</tr>
	...
</table>

myPage.js

function applyTemplate() { // our main function
	// first thing, remove current content from document
	var content = document.body.removeChild(document.getElementById("rightContent"));
	
	// bring in the external template
	var templateXml = getXml("myTemplate.xml");
	
	// import template into main document
	var templateNode = document.adoptNode(templateXml.firstChild);
	
	// customize header
	templateNode.getElementsByTagName("div")[0].childNodes[0].nodeValue = "Custom Page Header";
	
	// insert template into document's body
	document.body.appendChild(templateNode);
	
	// put back custom content into the template
	var totalNodes = content.childNodes.length;
	for(var i = 0; i < totalNodes; i++) {
		document.getElementById("rightContainer").appendChild(content.firstChild);
	}
}

...

Some considerations:

• getXML() is a simple XHR call, in this case, a synchronous call (included with full source code)
• adoptNode() is a standard DOM method not implemented by IE so a substitute implementation is needed (included)
• Outer elements defined in the template XML must have the xmlns (name space) attribute to be imported propperly
• IE requires the table element defined in the template to contain a tbody element, this has no effect on other browsers
• IE requires certain attributes like class, style, for, colspan to be renamed, that's taken care of by the replacement adoptNode function

Acknowledgements:

• The original importNode() replacement was taken (and modified) from here

You can find the full source code attached to this post. A running example can be found at http://ccsoftwarefactory.com/labs/xmlJsTemplate

Thank you and stay tuned for more JavaScript tips and tricks!