They also offer a choice of operating systems, not forcing me to use my now least favourite operating system: centOS. I chose ubuntu and following on from last weeks post about project management, I will talk about how to install and configure a subversion server running on Ubuntu 8.0.4.

I’m assuming you have basic developer tools installed and have a good enough concept of the command line + *nix. Start by installing subversion.

# apt-get install subversion

This gives us all the subversion admin and client tools. We’ll start by creating a central location for our repositories under /home/svn.

# mkdir /home/svn
# cd /home/svn

Now lets create a repository, replace myrepo with the name of your repository.

# svnadmin create myrepo

If you do an ls in this directory you’ll see subversion created a new directory called “myrepo”. We’re going to setup http access to our repository, so we need to ensure apache can read and write the files.

# cd /home
# chown -R www-data:www-data svn
# chmod -R 770 svn

We need to create some users to login to our subversion server, after running each htpasswd command it will prompt for a password which will be the login password for the user.

# cd /home/svn
# htpasswd -c .htpasswd firstuser
# htpasswd .htpasswd seconduser
# htpasswd .htpasswd thirduser

Now we have our repository setup we need to connect apache to it. I’m assuming you have apache setup and installed. Next we need to install apache subversion bindings and enable webdav.

# apt-get install libapache2-svn
# cd /etc/apache2
# a2enmod dav

Finally we need to configure apache.

# cd /etc/apache2/sites-available
# nano svn.mydomain.com

This will create a new file called svn.mydomain.com and open a blank file in a text editor. Copy the below into it and replace yourdomain with the correct value wherever mentioned.

<VirtualHost *:80>
 
  	# Admin email, Server Name (domain name) and any aliases
  	ServerAdmin admin@yourdomain.com
  	ServerName  svn.yourdomain.com
 
	<Location />
		AuthType Basic
		AuthUserFile /home/svn/.htpasswd
		AuthName "Dev Team Only"
		require valid-user
		DAV svn
		SVNPath /home/svn/hippstr/
	</Location>
 
</VirtualHost>

Now we need to enable and restart apache.

# cd /home/apache2
# a2ensite svn.yourdomain.com
# apache2ctl graceful

If everything went well we should now be able to access are subversion server at svn.yourdomain.com. But we need a subversion client on our desktop machine to access the repository.

Subversion clients

My favourite gui subversion client is currently an os x app called Versions. Which I’ll talk a little about below but if you’re not on os x I would recommend either Tortoise SVN on windows or the standard subversion command line client on any os. Available here.

You also need to learn how to use subversion by reading the free subversion book, there’s a small learning curve to understanding subversion and integrating it into your workflow but you’ll get used to it eventually!

To setup subversion in versions click “add new repository bookmark” and enter the following information. The user and password are what you set above when running the htpasswd commands.

There’s a small learning curve now to understanding subversion, as mentioned above and it’s all explained better than I could ever explain it in the subversion book mentioned above. Good luck! Ask any questions you still have in the comments.

Those who are around me often will know I never shut up about how great basecamp is. And it really is.

“Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.”
37signals

Basecamp is a really simple and easy-to-use project management system. With great to-do management, a forum like “messages” section and milestones (There’s more but this is the important sutff). To-dos are with out a doubt the most useful aspect of Basecamp. They allow me to assign a task to any individual. When this task is complete it can be checked off. This will show up in the project summary page also (pictured below).

I use messages mostly for brainstorming. Where I post an idea which is blasted out to all my team via email (They can reply to the message by replying to the email). Why is this useful? When you’re working with a global team or even a local one, that are not all around at the same time, this is an indisposable tool. Reducing the amount of required meetings (which are a pain to schedule across timezones) and including all the team without the use of a messy mailing list solution.

“Basecamp is the iPod of project collaboration.”
Joshua Peterson, CEO, 43things

Both messages and to-dos can all be associated with a particular milestone. For example at the moment all hippstr to-do’s are associated with the private beta 1 milestone. Meaning we’re all working towards a set target, which is important.

In summary basecamp allows all the team to stay in touch, keep up to date with everything that’s happening and track progress (which is key and a moral booster on those bad days). I’ve used it with just myself to teams of 20 and it has always been a success. Basecamp can be described in one word, “phenomenal”. Sign up for free today at http://basecamphq.com.

Subversion. Subversion (aka. svn) is a version control system. In english, subversion keeps track of all the changes made to a code base (It can be used with anything though, word files, pictures, text files, etc. I just happen to use it for code). Allowing us to revert to a previous version when we break something, instead of wasting hours trying to find that thing we changed which broke everything.

Subversion also doubles up as a backup solution as it’s hosted on a remote server. Meaning if my house burns down all my work isn’t lost (although I think I have bigger problems if my house burns down). Subversion’s usefulness is greatly increased when working in teams as it manages conflicts. If two people change the same file, instead of one set of changes being lost, subversion presents you with a choice to merge the changes or choose which you would like to keep.

Previously I would’ve recommended trac in conjunction with subversion, but really it’s completely useless and difficult to use. I’m yet to find a bug tracking + svn interface system I like. Nevertheless subversion is an indispensable tool, get started today at http://subversion.tigris.org/. Soon there will be an article on how to configure subversion.

Coming up in part 2. I will talk about campfire, getting real, practices and what I don’t use.

The <b> and <i> tags are presentation elements and are to be used where there is no “semantic” meaning, for example in a site footer. The <strong> and <em> tags are used where emphasis is to be put on a word and there is semantic meaning, as above with “subtle”.

Semantic: “relating to meaning in language or logic.”
New Oxford American Dictionary

Why does this matter? The correct use of these tags help computers understand language. Currently,

“… web pages are designed to be read by people, not machines.”
Wikipedia

By correctly using these tags we help computers understand in what context we meant something we wrote. The most important use of these tags is for accessibility, em and strong tags are read with emphasis on a screen reader while i and b are read as normal text; since they’re designed for presentation use only.

My answer is usually, I Don’t Know. The obvious path is targeted advertising, the current model that supports all the big social networks, Facebook, MySpace and Bebo. Although is it a viable business model? There are two problems at the moment, with social networking as a business.

1. The founders are developers not business men.
2. Ads at best, break even.

Most of you will argue the first point is good, which it is but not if you want to make money. Developers are interested in having a successful product; if you offered them 100m dollars, they would sure take it, but it’s not usually their goal. On the other hand we saw the disaster that was caused by the so called Web 1.0 start-ups, founded by business men. I’ve said since the start that my goal with HiPPstr is not to become a billionaire but to advance technology.

So, if none of “us” want to make money, where does the problem lie? Social networking start-ups can only live of VC funding for so long. Bills need to be paid but more importantly so do employees.

How is this fixed, the current problem is that the internet is still expensive. It’s expensive to get 1 million visitors at once and it’s expensive to handle that traffic. So the answer to this problem is not more advertising but better infrastructure, infrastructure that is paid for by the ISP not the content provider, infrastructure that allows for cheap bandwidth.

In this particular article I’ve used Social Networking as the example but this applies to the new internet: IPTV, Social Networks, File Sharing, Video Conferencing, VOIP, etc.

Is social networking a viable business model, not yet.

I’m going to talk about why I like opensocial from two standpoints, the developer and the end-user.

OpenSocial from a developer’s standpoint is a godsend, from both sides, on the HiPPstr side it allows me to really easily have hundreds of great apps of which users can put on their profile, on the other side it allows great traction I can instantly have an application deployed all over the web, before you had to write your app for Facebook, not too hard, what about if you write a Mac OS X app, porting that too windows isn’t easy.

I think this is the future of computing, a thin client that accesses, could be Web 3.0 (This idea is brought up a lot by the infamous Molly Wood); a diverse and open platform where I can write an application and it will work universally any where.

From a user standpoint OpenSocial is just as exciting, lets look forward a few years, when OpenSocial is a developed and mature platform, imagine the things OpenSocial will be able to do, essentially this is the death of Facebook, which in my opinion will result in huge fragmentation of the Social Networking space. There will be lots of small networks interconnected by an open platform, OpenSocial. Greatly improving the user experience, when it no longer matters if half your friends are on Bebo and half on MySpace. You might say, “You’re an idiot, OpenSocial is for widgets not interconnecting social networks”, true that’s the use at the moment, it has been talked about that in the future OpenSocial, will provide methods for sharing data between different networks.

This seems to be a common Google strategy (mentioned on TWiT), if you can’t buy a market fragment it, or at least try because all of above is irrelevant unless this catches on and at the moment with partners such as Bebo and MySpace I am not doubting it will be popular.

I settled on JQuery for my Javascript Framework, it seemed to do a lot out of the box, with lots of plugins and a big community, also the base distribution was a lot smaller than other tools such as MooTools.

I had never done any Ajax Before so this was a little bit of an adventure. If you don’t know ajax is really just a buzz word it stands for Asynchronous Javascript and XML, it’s a very commonly used technology in web 2.0 web applications, which allows actions and http requests to be done without requiring the page to be reloaded. This gives web applications more of a desktop feel.

I started by downloading and installing the base jquery library to the static folder I created for all static images, stylesheets and javascripts. Next I put it in my header.php view which generates the headers for all my pages.

<script language="javascript" src="<?=base_url()?>static/js/jquery.js" ></script>

I decided to load it on every page as I just assumed I’d be using a lot of javascript, I also put in another few lines to dynamically load any other scripts or plugins I might need for jquery.

<?php if(isset($scripts)) {foreach($scripts as $script) { ?>
	<script language="javascript" src="<?=base_url()?>static/js/<?=$script?>"></script>
<? } }?>

To add another script I simply set $data[’scripts’]= array(”script1.js”, “script2.js”); in my controller. This was the simple bit. Next I just wrote a standard method to insert the comment into the database taking the variables from a posted form and inserting them into the database using a model (see MVC on Wikpedia).

Now I had to write the AJAX bit. Since I’d never used Javascript/AJAX before, I looked around the very good JQuery Docs and started to cobble together something that would work. It turns out it was very simple, AJAX always looks scary from someone looking from the outside but when you actually get into it it’s not hard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(document).ready(function(){
	$(".addcomment").hide(); // Hide the comment form
	$("#message").hide();	// Hide The Message Div
	$(".actions a.show").click(function(event){ // Show the comment form
		$(this).parents("div").prev(".addcomment").slideToggle("slow");
		return false;
	});
 
	var options = { 
		beforeSubmit: validate,
	    target: '#comments',
		success: formSuccess
    }; 
 
   	// bind form using 'ajaxForm' 
	$('#newcomment').ajaxForm(options);
 
	$('.comment-links a').click(function(event){
		var link = $(this).attr('href');
		$('#comments').empty;
		$('#comments').load(link);
		return false;
	});
});

Above is the basic javascript that was required, the first line hides the comment form which is accessible via an “add a comment” link which is bound on the 3rd lines, so when clicked it shows the .addcomment div. Then I bind the form using the JQuery Form Plugin’s ajaxForm function to bind the form, I pass to it the options var which contains three arguments, firstly it runs the validate function (not shown above), it sets the target, whatever the http post request returns will be put into the #comments div, in this case when a comment is posted it returns a new list of comments, so if the user is on the page for five minutes, if they post a comment, a comment posted 4 minutes ago will also show, this could be problematical, I’ll just have to see. The formSuccess function (also not shown), prepares #message to display a success message, as well as fades out the comment form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function validate(formData, jqForm, options) { 
    for (var i=0; i < formData.length; i++) { 
    	if (!formData[i].value) {
			$('#message').empty();
            $('#message').append("You can't submit a blank comment... sorry");
			$('#message').removeClass('success');
		    $('#message').addClass('error');
			$("#message").fadeIn(2000);
            return false; 
        } 
    }
	return true;
}
 
function formSuccess() {
	$('#message').empty();
	$('#message').removeClass('error');
	$('#message').addClass('success');
	$('#message').fadeIn('slow');
	$('#message').append("It worked... you can see your comment below, YAY");
	$('.addcomment').fadeOut('slow');
 
	$("#message").oneTime(8000, function() {
		$(this).fadeOut(4000);
	});
}

Above are the validate and success functions. Well I hope that was useful, now you know how to do ajax comments.

Note Ajax comments are not enabled on this blog, this is just a tutorial.