Make Better Things

I like to make better things.

Introduction to Version Control System

Version Control (aka Revision Control aka Source Control) lets you track your files over time. Why do you care? So when you mess up you can easily get back to a previous working version.

So Why Do We Need A Version Control System (VCS)?

Large, fast-changing projects with many authors need a Version Control System (geekspeak for “file database”) to track changes and avoid general chaos. A good VCS does the following:

  • Backup and Restore. Files are saved as they are edited, and you can jump to any moment in time. Need that file as it was on Feb 23, 2007? No problem.
  • Synchronization. Lets people share files and stay up-to-date with the latest version.
  • Short-term undo. Monkeying with a file and messed it up? Throw away your changes and go back to the “last known good” version in the database.
  • Long-term undo. Sometimes we mess up bad. Suppose you made a change a year ago, and it had a bug. Jump back to the old version, and see what change was made that day.
  • Track Changes. As files are updated, you can leave messages explaining why the change happened (stored in the VCS, not the file). This makes it easy to see how a file is evolving over time, and why.
  • Track Ownership. A VCS tags every change with the name of the person who made it. Helpful for blamestorming giving credit.
  • Sandboxing, or insurance against yourself. Making a big change? You can make temporary changes in an isolated area, test and work out the kinks before “checking in” your changes.
  • Branching and merging. A larger sandbox. You can branch a copy of your code into a separate area and modify it in isolation (tracking changes separately). Later, you can merge your work back into the common area.

Shared folders are quick and simple, but can’t beat these features.

Learn the Concepts

Most version control systems involve the following concepts, though the labels may be different.

Basic Setup

  • Repository (repo): The database storing the files.
  • Server: The computer storing the repo.
  • Client: The computer connecting to the repo.
  • Working Set/Working Copy: Your local directory of files, where you make changes.
  • Trunk/Main: The “primary” location for code in the repo. Think of code as a family tree — the “trunk” is the main line.

Basic Actions

  • Add: Put a file into the repo for the first time, i.e. begin tracking it with Version Control.
  • Revision: What version a file is on (v1, v2, v3, etc.).
  • Head: The latest revision in the repo.
  • Check out: Download a file from the repo.
  • Check in: Upload a file to the repository (if it has changed). The file gets a new revision number, and people can “check out” the latest one.
  • Checkin Message: A short message describing what was changed.
  • Changelog/History: A list of changes made to a file since it was created.
  • Update/Sync: Synchronize your files with the latest from the repository. This lets you grab the latest revisions of all files.
  • Revert: Throw away your local changes and reload the latest version from the repository.

Advanced Actions

  • Branch: Create a separate copy of a file/folder for private use (bug fixing, testing, etc). Branch is both a verb (”branch the code”) and a noun (”Which branch is it in?”).
  • Diff/Change/Delta: Finding the differences between two files. Useful for seeing what changed between revisions.
  • Merge (or patch): Apply the changes from one file to another, to bring it up-to-date. For example, you can merge features from one branch into another. (At Microsoft this was called Reverse Integrate and Forward Integrate)
  • Conflict: When pending changes to a file contradict each other (both changes cannot be applied).
  • Resolve: Fixing the changes that contradict each other and checking in the correct version.
  • Locking: “Taking control” of a file so nobody else can edit it until you unlock it. Some version control systems use this to avoid conflicts.
  • Breaking the lock: Forcibly unlocking a file so you can edit it. It may be needed if someone locks a file and goes on vacation.
  • Check out for edit: Checking out an “editable” version of a file. Some VCSes have editable files by default, others require an explicit command.

And a typical scenario goes like this:

Alice adds a file (list.txt) to the repository. She checks it out, makes a change (puts “milk” on the list), and checks it back in with a checkin message (”Added required item.”). The next morning, Bob updates his local working set and sees the latest revision of list.txt, which contains “milk”. He can browse the changelog or diff to see that Alice put “milk” the day before.

How it all works


The simplest scenario is checking in a file (list.txt) and modifying it over time.

Basic checkin in VCS

Basic checkin in VCS

Each time we check in a new version, we get a new revision (r1, r2, r3, etc.). In Subversion you’d do:

svn add list.txt
(modify the file)
svn ci list.txt -m “Changed the list”

The -m flag is the message to use for this checkin.

Checkouts and Editing

In reality, you might not keep checking in a file. You may have to check out, edit and check in. The cycle looks like this:

Basic Checkout VCS

Basic Checkout VCS

If you don’t like your changes and want to start over, you can revert to the previous version and start again (or stop). When checking out, you get the latest revision by default. If you want, you can specify a particular revision. In Subversion, run:

svn co list.txt (get latest version)
…edit file…
svn revert list.txt (throw away changes)
svn co -r2 list.txt (check out particular version)


The trunk has a history of changes as a file evolves. Diffs are the changes you made while editing: imagine you can “peel” them off and apply them to a file:

Basic diff in VCS

Basic diff in VCS

For example, to go from r1 to r2, we add eggs (+Eggs). Imagine peeling off that red sticker and placing it on r1, to get r2.

And to get from r2 to r3, we add Juice (+Juice). To get from r3 to r4, we remove Juice and add Soup (-Juice, +Soup).

Most version control systems store diffs rather than full copies of the file. This saves disk space: 4 revisions of a file doesn’t mean we have 4 copies; we have 1 copy and 4 small diffs. Pretty nifty, eh? In SVN, we diff two revisions of a file like this:

svn diff -r3:4 list.txt

Diffs help us notice changes (”How did you fix that bug again?”) and even apply them from one branch to another.

Bonus question: what’s the diff from r1 to r4?


Notice how “Juice” wasn’t even involved — the direct jump from r1 to r4 doesn’t need that change, since Juice was overridden by Soup.


Branches let us copy code into a separate folder so we can monkey with it separately:

Basic branching in VCS

Basic branching in VCS

For example, we can create a branch for new, experimental ideas for our list: crazy things like Rice or Eggo waffles. Depending on the version control system, creating a branch (copy) may change the revision number.

Now that we have a branch, we can change our code and work out the kinks. (“Hrm… waffles? I don’t know what the boss will think. Rice is a safe bet.”). Since we’re in a separate branch, we can make changes and test in isolation, knowing our changes won’t hurt anyone. And our branch history is under version control.

In Subversion, you create a branch simply by copying a directory to another.

svn copy http://path/to/trunk http://path/to/branch

So branching isn’t too tough of a concept: Pretend you copied your code into a different directory. You’ve probably branched your code in school projects, making sure you have a “fail safe” version you can return to if things blow up.


Branching sounds simple, right? Well, it’s not — figuring out how to merge changes from one branch to another can be tricky.

Let’s say we want to get the “Rice” feature from our experimental branch into the mainline. How would we do this? Diff r6 and r7 and apply that to the main line?

Wrongo. We only want to apply the changes that happened in the branch!. That means we diff r5 and r6, and apply that to the main trunk:

Basic merging in VCS

Basic merging in VCS

If we diffed r6 and r7, we would lose the “Bread” feature that was in main. This is a subtle point — imagine “peeling off” the changes from the experimental branch (+Rice) and adding that to main. Main may have had other changes, which is ok — we just want to insert the Rice feature.

In Subversion, merging is very close to diffing. Inside the main trunk, run the command:

svn merge -r5:6 http://path/to/branch

This command diffs r5-r6 in the experimental branch and applies it to the current location. Unfortunately, Subversion doesn’t have an easy way to keep track of what merges have been applied, so if you’re not careful you may apply the same changes twice. It’s a planned feature, but the current advice is to keep a changelog message reminding you that you’ve already merged r5-r6 into main.


Many times, the VCS can automatically merge changes to different parts of a file. Conflicts can arise when changes appear that don’t gel: Joe wants to remove eggs and replace it with cheese (-eggs, +cheese), and Sue wants to replace eggs with a hot dog (-eggs, +hot dog).

Basic conflicts in VCS

Basic conflicts in VCS

At this point it’s a race: if Joe checks in first, that’s the change that goes through (and Sue can’t make her change).

When changes overlap and contradict like this, the VCS may report a conflict and not let you check in — it’s up to you to check in a newer version that resolves this dilemma. A few approaches:

  • Re-apply your changes. Sync to the the latest version (r4) and re-apply your changes to this file: Add hot dog to the list that already has cheese.
  • Override their changes with yours. Check out the latest version (r4), copy over your version, and check your version in. In effect, this removes cheese and replaces it with hot dog.

Conflicts are infrequent but can be a pain. Usually I update to the latest and re-apply my changes.


Who would have thought a version control system would be Web 2.0 compliant? Many systems let you tag (label) any revision for easy reference. This way you can refer to “Release 1.0″ instead of a particular build number:

Basic tagging in VCS

Basic tagging in VCS

In Subversion, tags are just branches that you agree not to edit; they are around for posterity, so you can see exactly what your version 1.0 release contained. Hence they end in a stub — there’s nowhere to go.

(in trunk)
svn copy http://path/to/revision http://path/to/tag

A real life example: Managing windows source code -

  • There’s a main line with stable builds of Windows.
  • Each group (Networking, User Interface, Media Player, etc.) has its own branch to develop new features. These are under development and less stable than main.

You develop new features in your branch and “Reverse Integrate (RI)” to get them into Main. Later, you “Forward Integrate” and to get the latest changes from Main into your branch:

Let’s say we’re at Media Player 10 and IE 6. The Media Player team makes version 11 in their own branch. When it’s ready and tested, there’s a patch from 10 – 11 which is applied to Main (just like the “Rice” example, but a tad more complicated). This a reverse integration, from the branch to the trunk. The IE team can do the same thing.

Later, the Media Player team can pick up the latest code from other teams, like IE. In this case, Media Player forward integrates and gets the latest patches from main into their branch. This is like pulling in the “Bread” feature into the experimental branch, but again, more complicated.

So it’s RI and FI. Aye aye. This arrangement lets changes percolate throughout the branches, while keeping new code out of the main line. Cool, eh?

In reality, there’s many layers of branches and sub-branches, along with quality metrics that determine when you get to RI. But you get the idea: branches help manage complexity. Now you know the basics of how one of the largest software projects is organized.

installing zend debugger on xampp and setting it up with zend studio

If you have XAMPP installed, the Zend Optimizer will be installed by default, and this causes the standard installation of Zend Debugger to fail. Follow the steps below for success.

1) Make sure you have a running installation of XAMPP. Installing XAMPP is not part of this article. You can test your installation by entering http://localhost/xampp/ in a browser.

2) Enter http://localhost/xampp/phpinfo.php in the address bar of your browser. Note the information about Zend Extension Manager and Zend Optimizer. By the end of this article, Zend Debugger will be added.

3) Download the latest .zip file for cygwin_nt-i386 from and unpack into xamppphpzendDebuggerlibDebugger. Caution: In a standard XAMPP installation, the instructions in the README.txt file in this download will cause Apache not to start. See the following steps instead.

4) Rename the the subdirectories from “4_3_x_comp” etc. to “php-4.3.x” etc. see image.


Rename directories

5) Copy the file dummy.php in the download to your Apache htdocs directory, for example xampphtdocsdummy.php. This what all the instructions and help files say, but I forgot it on one installation and didn’t notice any problems. It can’t hurt to do it though.

6) Search the PHPInfo that you ran in step 2 for the value “Loaded Configuration File”. Open this php.ini file in a text editor. You might want to save a copy of it before editing it.

7) If you have XAMPP you will find some lines in php.ini that look like this:

zend_extension_ts = “G:xamppphpzendOptimizerlibZendExtensionManager.dll”
zend_extension_manager.optimizer_ts = “G:xamppphpzendOptimizerlibOptimizer”
zend_optimizer.enable_loader = 0

;zend_optimizer.license_path =
; Local Variables:
; tab-width: 4
; End:

8 ) If you see the lines in step 7 and follow the instructions from README.txt in the download in step 3, you will be adding a second zend_extension_ts line. This will cause Apache not to start. Instead, add the following lines:
zend_extension_manager.debug_server_ts = “xamppphpzendDebuggerlibDebugger”
zend_debugger.allow_hosts =
zend_debugger.expose_remotely = allowed_hosts

9) Restart XAMPP, for example by calling xamppxampp_restart.exe. Reload PHPInfo; now it should look like this new image. Note the new information about Zend Debugger.

zend debugger

zend debugger

Face Detection in PHP using Open CV

In this article, i will explain how possible this task can be achieved with simplicity with OpenCV and PHP Facedetect extension. Both are free to download and opensource.


To auto detect faces in a photo and draw pink box around the faces with a php script running a linux centos server. Please note that face detection and face recognition are two different things. To recognize a face you have to first detect a face and then do the required processing.


- Linux server running Centos with SSH access

- PHP/Apache

- GD Library

- OpenCV [Download]

- PHP Facedetect extension [Download]

PHP facedetect extension is very simple. All you have to do is call a function face_detect(p) and it will give all the x,y coordinates in a photo where we draw a square. face_count() will output how many total faces in the given photo. For documentation see here


We install opencv and then we compile the php facedetect extension with php.

How to Install OpenCV

If you are running centos then one single line will install opencv.

  yum install opencv

OpenCV may also need the following depencies to work properly and you will need to install them as well.

 yum install ibpng libpng-dev zlib libjpeg libjpeg-dev libtiff libjasper swig python pkgconfig gtk gtk-dev

For more installation instructions on linux see here

The opencv will be installed in/usr/local/share/opencv and all the important facedetection training files known as “haar training” can be found in haarcascades folder in xml format (like haarcascade_frontalface_alt.xml)

How to test run OpenCV

Inorder to test run opencv you have to compile the samples folder. Go to /usr/local/share/opencv/samples/c/

Run this command to compile to binary.


If you find large number of errors and variables not declared like shown below..

  Package opencv was not found in the pkg-config search path.
    Perhaps you should add the directory containing `opencv.pc’
    to the PKG_CONFIG_PATH environment variable
    No package ‘opencv’ found


  export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig

and then it will compile.

To test run the opencv run the following command in the c folder for a test.jpg photo.

  ./facedetect –cascade=”../haarcascades/haarcascade_frontalface_alt.xml” test.jpg

Since your server does not have Xwindow installed, you probably do not see the output just the processing time.

If you see error “error while loading shared libraries: cannot open shared object file: No such file or directory” then see this solution

Install PHP Facedetect Extension

Installing the PHP facedetect extension is very easy. Just download the package and compile it for PHP.

  wget [download_file_path]
  tar zxf facedetect-1.0.0


  phpize && configure && make && make install

If you see phpize command not found error, install php developer libraries

  yum install php-devel
  yum install php5-devel


open php.ini and make sure you add this line.

Thats it! all the installation part is over!

Writing a PHP Script

Before you start writing php script make sure you copy all xml files in /usr/local/share/opencv/haarcascades folder to the web folder.

and this simple two lines to from php to call the function

//face_count() outputs total faces detected
// face_detect() outputs assoc array of x,y,width,height of each face recognized

$total= face_count('test.jpg','haarcascade_frontalface_alt.xml');
$coord= face_detect('test.jpg','haarcascade_frontalface_alt.xml');

Make sure the path of xml files are correct else you would see a blank face or bool(false) output. Once you get this co-ordinates all we have to do is use php gd library to draw square around the face with the above coordinates.

This script will do that and you have call the script with photo file like this http://domain/face.php?file=test.jpg and the test.jpg file should be in the same folder

//face.php -> detects faces and draws a pink square on faces

function LoadJpeg($imgname)
 $im = @imagecreatefromjpeg($imgname); /* Attempt to open */
 if (!$im) { /* See if it failed */
 $im  = imagecreate(150, 30); /* Create a blank image */
 $bgc = imagecolorallocate($im, 255, 255, 255);
 $tc  = imagecolorallocate($im, 0, 0, 0);
 imagefilledrectangle($im, 0, 0, 150, 30, $bgc);
 /* Output an errmsg */
 imagestring($im, 1, 5, 5, "Error loading $imgname", $tc);
 return $im;

$total= face_count($_GET['file'],'haarcascade_frontalface_alt.xml');
$ord= face_detect($_GET['file'],'haarcascade_frontalface_alt.xml');

$im = LoadJpeg($_GET['file']);
$pink = imagecolorallocate($im, 255, 105, 180);

if(count($ord) > 0) {

foreach ($ord as $arr) {
imagerectangle($im,$arr['x'] ,$arr['y'] , $arr['x']+$arr['w'],
$arr['y']+$arr['h'], $pink);

header('Content-Type: image/jpeg');

Just remember haarcascade_frontalface_alt.xml are haar training files used for face detection. You can play around with other training files like to detect various body parts, not just faces.


Conclusion and the Results

(standard test image used for image processing)

Face Detection with PHP

Face Detection with PHP

I have given multiple frontal detection photos to the script and the script performed well, despite few false face detections.

I should say i am pretty surprised the way the multiple faces are detected and the results are good with haarcascade_frontalface_alt.xml as training file . To get more accurate results, you need to do haar training to xml files to produce more accurate results.

Other Useful Links

Facedetection with pure PHP without OpenCV [visit site]

Facedetection with javascript [visit site]

OpenCV Face Detection Page [visit site]


Face detection in pure PHP

I just came across a post in Maurice Bloggue about the face detection using PHP (without OpenCV), I just had look on that post and it looks great, since he shared code too on that post.

If you are interested you can see the post here

Face detection in pure PHP (without OpenCV)

jQuery google map plugins

At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way.
Of course there is, and as with almost all web site interactivity, jQuery does offer some simple and easy to use plugins.

The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

I have also listed a couple of beginner jQuery and Google Map tutorials at the the bottom of the post. If you are taking your first steps within Google Maps, I suggest you start there.

gMap – Google Maps Plugin

gMap – Google Maps Plugin

gMap – Google Maps Plugin

gMap is a very flexible, highly customizable and lightweight (only 2KB) jQuery plugin that helps you embed Google Maps into your website. It can be customized in many different ways, all you need to do is to pass a JSON object to the GMap() function, click here for a complete list of properties that can be passed.

Google Maps jQuery Plugin

Google Maps jQuery Plugin

Google Maps jQuery Plugin

The Google Maps jQuery Plugin takes away a lot of the pain from working with the Google Map Api (which can be pretty indepth for all developer levels). It allows you to embed Google Maps on your web site with ease and there are also certains portions of the Map that can be controlled via CSS (div container, info window), so that the map will sit perfectly within your web design.

Mapbox – the jQuery Map

Mapbox – the jQuery Map

Mapbox – the jQuery Map

The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from pan and zoom functions.
Mapbox likes to think of its self as a basic plugin, yes it is easy to use, but with a wide array of advanced options, here are a list of all the settings and their defaults:

jQuery GPS

jQuery GPS

jQuery GPS

jQuery GPS is a jQuery plugin for people that want to add Google maps to their website, but don’t want their website to be bogged down with the features they don’t require.
All you have to do is add inputs for addresses by simply adding default or custom ID’s. You can even use any element to trigger the event, so it doesn’t need to be embedded inside a form.
With jQuery GPS you have the option to select the position/place on the map upon first load, and to open a toolip or image on that starting location.

jMapping – for creating Google Maps from semantic markup

jMapping – for creating Google Maps from semantic markup

jMapping – for creating Google Maps from semantic markup

This plugin is designed for quick Google Map implemention with a list of the locations that are specified within the HTML It allows for as much graceful degradation as possible by having as much semantic HTML as it allows.
The plugin expects the HTML for the locations to be grouped under a common element and expects the necessary metadata to be on the location element. This way the HTML semantically reflects all of those parts and information are associated with the specific location or place.

Googlemap jQuery Plugin by Dylan Verheul

Googlemap jQuery Plugin by Dylan Verheul

Googlemap jQuery Plugin by Dylan Verheul

This plugins makes it easy to put a Google Map on your page. Look at the source code of this page if you want to know how to use the plugin. Markers can be provided by a jQuery object (containing elements in the geo microformat) or an array of objects that provide lat, lng and txt for the popup (txt being optional).

imGoogleMaps – Multiple Addresses

This is a much simpler plugin than all the rest on this page, it has been developed to create a simpler implementation with minimal and basic options. When you think about it, in most situations all you will want from a map is for an end-user to be able to view the owner’s address and be able to map directions to that address, this plugin fits that bill.
This plugins map interface is similar to what you would see on Google Maps (auto mode), while also giving the developer the ability to style their own interface (manual mode).

jMaps Framework

The JMaps Framework provides a simple yet powerful API for Google’s mapping services, that offers simple jQuery methods to do functions such as: Geocode and reverse any valid address in the world via Google’s geocoding API; Search for directions to and from any location; Add and remove Markers; Add and remove polygons and polylines; Add and remove graphic layers on the map; Add and remove Google adsense layers; Add and remove Traffic layers; Get information back such as map center, map size, map type, etc.




jQuery-PlacePicker is a geocoding jQuery UI widget with support for Google Maps API v3 (and framework ready for others) that allow users to search for and select locations.


jQmaps is a very easy to use and popular plugin for Google Maps, that can add custom points, expandible ballons and hotspots links.
It does not offer any docs nor does it have any working demos. If you feel comfortable using it, go for it, if not try one of the plugins above.

jQuery and Google Maps Tutorial: The Basics

jQuery and Google Maps Tutorial: The Basics

jQuery and Google Maps Tutorial: The Basics

If you have never worked with the Google Map API before it can all seem daunting. What you need is a step-by-step guide that will cover the basics and give you a better understanding of everything that is going on, and that is what this tutorial covers.

AJAX Storing and Retrieving Points – Tutorial

AJAX Storing and Retrieving Points – Tutorial

AJAX Storing and Retrieving Points – Tutorial

Taking things a step further from the previous article, in this tutorial you will learn how to store and retrieve points with using AJAX and a server-side language. This tutorial will use PHP/MySQL on the server, but it is basic enough that re-writing in another language should not be difficult.