Today I will introduce you to my new friend, Sandbox. In software development, a Sandbox is..

a testing environment that isolates untested code changes and outright experimentation from the production environment or repository

In my case, I use Sandboxes to create separate versions of a web site both in my test and live environments. In the past I’ve made changes to my “only” test version then, whilst in the middle of this, have been asked to make a minor change to the live environment. Unfortunately my test setup is now in a non-prepared state so I’ve left making untested changes to the live system or creating another test environment from backups. All annoying.

So, in the case of the BMTG site, I’m in the process of making a LOT of changes. Few will be noticeable, but the back-end code will be changed dramatically, including a long-time-coming conversion to XHTML. So I’ve setup a Sandbox – in essence a separate test version of the site. The Sandbox I can play with all I like but the “normal” BMTG test system remains for on-going changes. Unfortunately, I have to make sure I make any of these changes to both test systems, or they will become out-of-step with each other.

Equally, I then test this sandbox test environment by uploading it to a separate URL from my live code. So, the BMTG Sandbox is at, www.bmtg.org.uk/sandbox. Try it if you wish, but if nothing displays or you get errors, don’t be surprised.

As part of my Sandbox changes I’m looking very keenly at improving site speed. I’m documenting what I find, so look out for a Blog entry soon on that subject.

I regularly make use of the Google Maps API to add interactive maps to my websites, where a location is required to be pin-pointed. It’s used on both BMTG and Engments to good effect.

It’s my own variation of the code and actively displays a pin in the required location, along with a balloon containing the locations name and address. Here is an example of the code…

<div id="map" style="width: 700px; height: 400px; border-width: 1px; border-style: solid; border-color: #808080;"></div>
<script type="text/javascript" defer="defer">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(-1.218501, 52.927571), 2);
var pinEngments = new GMarker(new GPoint(-1.218501, 52.927571));
map.addOverlay(pinEngments);
var msgEngments = "<div style='width:200px;'>Round Hill Primary School.<br>Foster Avenue,<br>Beeston,<br>Nottingham.<br>NG9 1AE.</div>";
pinEngments.openInfoWindowHtml(msgEngments);
//]]>
</script>

The example code shows the location of Roundhill School from the BMTG website, although you can see some of the code is left-over from using it on the Engments site.

• The DIV sets up a coloured border and defines the height and width of the map.
• The “map.centerAndZoom” line supplies the co-ordinates (which you can get from Google Maps or Google Earth) of the centre of the map. The “2″ at the end is the zoom level.
• The “var pinEngments” line is the co-ordinates of the pin (as you can see the pin is set as the location of the map).
• The “var msgEngments” line is then some code which displays the location and address within a DIV statement.
• The “map.addControl” lines adds the control panel which allows for the zooming, etc. This can be omitted for removal, or changed to other, smaller, controls.

And that’s it. Don’t forget to put your Google API at the beginning of the page or this won’t work.

CrossLoop is a great new method of getting IT help. Or, in this case, my help. Anyone who knows me will know I’m always happy to lend a hand, particularly if it’s on a subject I know about – computers would be one such product.

CrossLoop is a simple program that you download onto your computer. When run, it generates a code for you that uniquely identifies you – you give this number to someone who you need assistance from. Using this, and CrossLoop, they can then remotely sign onto your computer to help you out.

So, the next time you’re stuck, give it a try.