Talk In Code

Google Code has turned the grand old age of 5 today, having been launched on the 17th March 2005. I’d like to say well done!

While some people may think Google Code is yet another SourceForge clone, they’re only half right. What Google Code brought to the table was more than just project hosting, it was a whole ethos of development which is now sweeping the world as if it were a brand new concept: open source.

With the Summer of Code schemes run by Google to promote open source development in universities, hosting of all of their own APIs on the service (going from a handful to a few dozen by now), along with the code for all their open source projects (now numbering in the hundreds), Google Code has shown off the more ethical side of the advertising giant.

So happy birthday Google Code, long may you prosper and others follow in your path!

Strictly speaking the Google Ajax libraries don’t contain only Ajax libraries, but they are very useful for a variety of reasons. Google host a variety of different JavaScript libraries which you can link to on your pages rather than download the library and host it on your server. You can use MooTools, JQuery, Prototype/Scriptaculous, Dojo and even the Yahoo! User Interface Library.

How To Use Them

Using the Google Ajax libraries on your own site is quite easy, and you can do it in a number of different ways.

Normally, you would download the latest and greatest version of your chosen library and upload it to your site. Here is an example using the MooTools.

<script type='text/javascript' src='http://www.talkincode.com/'></script>

You can include this via Google using the following.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js'></script>

If you are working on a development server you can also include the uncompressed version so that you can see where any errors are coming from.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js'></script>

If you want to download version 1.11 instead of version 1.2.1 by changing the folder:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js'></script>

You can also use the google.load() function to include the library you want with a single function call.

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("mootools", "1.2.1");
</script>


Ease Of Use

You have to admit that this method of including JavaScript is much easier than downloading the library manually, uploading it and then sorting the script tags out.

Quick Downloads

The first benefit of using this service is that users will not have to wait very long in order to download the JavaScript libraries that your site relies on to work. This is because they are downloading it from Google and not your site.

Concurrent Connections

Your browser can only open a certain number of connections to a domain; this is partly due to how browsers work but also due to how servers work. If you host your JavaScript libraries with Google then your browser will be able to run off and get them whilst it is downloading your page making the page load a little faster.

Better Caching

Rather than repeatedly downloading files from a site over and over again a browser will try to minimise this by only downloading what it hasn’t downloaded already. This is fine if you spend all of your time on a single site, but most people don’t and they will therefore download the same version of the same JavaScript library over and over again. This happens even if the server has aggressive caching turned on. By hosting your libraries with Google you basically allow a user who has visited a site using the same library as you to reuse the file they downloaded there on your site.

Don’t Use On Your Intranet

There is one small issue if you are using this sort of thing on an Intranet system in that it will create unnecessary network traffic from your network. This method can also leave Intranet systems utterly useless if your Internet connection goes down for whatever reason. Holding your JavaScript libraries locally will mean that your systems can continue to work, even if you are cut off from the outside world.

Word Of Warning

Some countries actively block connections to some sites; especially Google. So if you do include JavaScript libraries like this then the chances are that someone in Iran or China will certainly not be able to view any JavaScript components and might even get a load of authentication errors.

More Information

For more information on the different libraries available take a look at the Google Ajax Libraries page.

Use the following snippet to convert any jpeg image into the equivalent image in ASCII format. It works by loading an image using the PHP GD2 library function ImageCreateFromJpeg() and then figures out the height and width of it. It then uses these values to loop through every pixel in the image and figures out the colour of that pixel. It uses this value to create a <span> element that uses the text colour of a # to change the colour of the text.

An additional time (and space) saver for this function is that it detects any pixels that are just off white and simply displays a &nbsp; character instead.

$img = ImageCreateFromJpeg('logo.jpg');
 
// get height and with of the image.
$width = imagesx($img);
$height = imagesy($img);
 
echo '<pre style="font-size:1px;">';
for($h=0;$h<$height;$h++){
 for($w=0;$w<=$width;$w++){
  if($w == $width){
   echo '<br>';
   continue;
  }
  // get image at pixel location
  $rgb = ImageColorAt($img, $w, $h);
  // convert colour into usable format
  $r = ($rgb >> 16) & 0xFF;
  $g = ($rgb >> 8 ) & 0xFF;
  $b = $rgb & 0xFF;
  // check for white/off-white colour
  if($r > 200 && $g > 200 && $b > 200){
   echo '&nbsp';
  }else{
   echo '<span  style="color:rgb('.$r.','.$g.','.$b.');">#</span>';
  }
 }
}
echo '</pre>';

As an example, take the following, quite recognisable, image.

This is transformed into the text on the following page.

The Google logo in ASCII format

Beware that although this works will for small image sizes if you try to convert a very large image you will find that the script takes a long time. This is because it looks at every pixel in turn and converts the colour into something usable, so if there are a lot of pixels it takes a long time to look at every one. Not only this, but you will also find that the size of the page generated will grow significantly due to all of the span elements being created.

Converting from PostCode to map reference is far from accurate, but it can be done using the Google Maps API. You can get a Google Maps API key from Google by just asking for it, although you are limited to a certain number of requests each day.

Google Maps usually works through JavaScript, but it is possible to ask Google to return the data in JSON format and then use the PHP function json_decode() to decode the information into a usable array format. To get Google to return the data in JSON you must pass the parameter "output=json" in your query string.

The following function can take a postal code and convert it into longitude and latitude.

function getLatLong($code){
 $mapsApiKey = 'your-google-maps-api-key';
 $query = "http://maps.google.co.uk/maps/geo?q=".urlencode($code)."&output=json&key=".$mapsApiKey;
 $data = file($query);
 // if data returned
 if($data){
  // convert into readable format
  $data = json_decode($data[0]);
  $long = $data->Placemark[0]->Point->coordinates[0];
  $lat = $data->Placemark[0]->Point->coordinates[1];
  return array('Latitude'=>$lat,'Longitude'=>$long);
 }else{
  return false;
 }
}

The function can be used in the following way. To keep with the theme, the following two postal codes are two UK and USA office locations of Google.

print_r(getLatLong('SW1W 9TQ'));
print_r(getLatLong('10011'));

This produces the following output.

Array
(
 [Latitude] => 51.489943
 [Longitude] => -0.154065
)
Array
(
 [Latitude] => 40.746497
 [Longitude] => -74.009447
)

I have tried this with UK and USA postal codes, but it would be interesting to see if it works with any other codes. Also, the query currently looks at google.co.uk, but that is only because I am based in the UK. You should change this to the nearest Google domain, so if you are based in the US then change this to google.com.

As the new Google web browser was released last night (I’m writing this post using the new browser) I thought it would be good to update our readers on the user agent string that this web browser has.

The user agent of any browser can be found out by using the userAgent property of the navigator object. This is available in most modern browsers and is thankfully also present in Google Chrome.

navigator.userAgent

As an example the user agent for FireFox 3 on a Windows XP machine looks like this.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Using the same code, and the same machine, the user agent produced by Google Chrome is as follows.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

So detecting it should only be a case of looking for the word “chrome”. Just like this:

var ischrome = navigator.userAgent.indexOf("Chrome")? true : false;

If you want to see what the user agent is on your machine then past this code into a web page and hit refresh. It is quite a basic bit of code and should work in most browsers.

<span id="useragent"></span>
<script type="text/javascript">
document.getElementById('useragent').innerHTML = navigator.userAgent;
</script>