1
2
3
4
5

$$('input[type=submit]').addEvent('click',function(e) {
    if (Browser.Engine.webkit) {
        new Request({url: "/ping/close.php", asynch:false }).send();
    }
}

This version will fire for every WebKit browser, which now also includes Chrome, so choose whatever sniffing method you like, but this will make a call to a PHP script returning a “Connection: close” header just before sending the upload.

Here’s that simple PHP:

1

    header("Connection: close");

Safari upload problem solved.

I previously posted this method for Mootools, and now here it is for jQuery.

Clients often ask to have a sorted list exportable via a link to a CSV file that they can open in Excel or whatever spreadsheet software they use. I could find two jQuery plugins for exporting table data to Excel, but I wasn’t comfortable with their reliance on producing popups (that could easily be blocked), or sending data as a querystring to a javascript function that sorts and formats the CSV. Here is a simple, plugin free way of asynchronously generating a .csv file using jQuery and PHP.

In my case I had a form with search fields that submits to a PHP search script, and returns data which is formatted into a table and displayed to the user. My method for then exporting this to Excel is to add a link on the page which when clicked, changes the action of the form to a different processing script which outputs the .csv, then resubmitting the form to this redirected URL. The hard work is done with PHP instead of Javascript.

<span id="csv-link" style="cursor: pointer"><strong>Download as a CSV file</strong></span>

1
2
3
4
5
6
7
8

jQuery(function ($) {
	$("#csv-link").click(function () {
		$(function() {
			$("#searchform").attr('action','/export.php');
			$('#searchform').submit();
	    });
	});
});

Now as long as your PHP file is configured to return the correct headers for the file type you would like downloaded, this should trigger a download. Here’s an example of some PHP to download a .csv file:

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

<?php
/* Export.php: here you would call the search function that is used to query the database and return an array to generate a table, except we will loop over the results here and produce .csv lines instead */
 
$filename = 'download.csv';
$out = 'Heading One, Heading Two, etc'.chr(10);
 
//$search_result = result_of_your_search_function($_POST);
 
foreach($search_result as $row){
	$out .= $row->item_one.', '.$row->item_two.', etc'.chr(10);
}
 
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Length: " . strlen($out));
header("Content-type: text/x-csv");
header("Content-Disposition: attachment; filename=$filename");
echo $out;
 
exit;
 
?>

Your file will now automatically download.

Why would Microsoft extend support for this antique browser as they push for people to upgrade to IE8? Could be a lot of things. Maybe one of them is trying to keep existing Windows users happy (including enterprise users) during a period where many are turning to other comparatively hassle-free operating systems. Whatever the reason, now is a good time for developers and clients to decide whether to continue our support for the browser, or to join the growing list of organizations moving on.

Apple is well known for their innovative thinking in just about everything they do. Now they’re making a bid to add rich 3D effects to CSS (Cascading Style Sheets), potentially rivaling (or replacing?) Flash as the de-facto animation tool for websites.

Charles Ying has posted an interesting demo of some stunning visual effects he calls “Snow Stack”, created solely with WebKit and Apple’s WebKit CSS 3D Transforms technology. See it for yourself, and maybe even download a WebKit nightly build and give it a try.

Update: Charles Ying of satine.org and Peter Kasting of chromium.org, were both kind enough to point out an error in this post which has been corrected, and have also offered a link to WebKit’s official post for more information. Thanks guys!

Here are some other useful links from Wikipedia:

• KHTML – the Konqueror browser’s layout engine, from which Apple forked the WebKit project
• WebKit – for more information on the development of the core of Safari, and more recently, Google’s browser offering named “Chrome,” among others.

/^(http|https|ftp):\/\/([A-Z0-9][A-Z0-9_-]*(?:\.[A-Z0-9][A-Z0-9_-]*)+):?(\d+)?\/?/i

…but actually verifying that the URI points to a functioning web page, the following code will do the trick. It starts off feeding a well formed URL to PHP’s parse_url(), then uses cURL to follow any redirects (10 maximum) until it finds a 200 status. I’ve tried a number of different methods, but this one seems to work the best. I ran into problems where an OpenDNS wild card was causing all my bad URIs to return a status 200, so the code checks for the term “opendns” and returns false. Here’s the code:

function validate_url($url) {
	if(empty($url)){ return false; }
	$url = preg_match("/http:\/\//", $url) ? $url : "http://".$url;
	$parts = parse_url($url);
	$url = $parts['host'];

	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER, true);
	curl_setopt($ch, CURLOPT_NOBODY, true);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
	curl_setopt($ch, CURLOPT_MAXREDIRS, 10);
	$data = curl_exec($ch);
	curl_close($ch);
	preg_match_all("/HTTP\/1\.[1|0]\s(\d{3})/",$data,$matches);
	$code = end($matches[1]);
	if(!$data) { return false; }
	if(stristr($data,'opendns')){ return false; }
	return $code==200 ? true : false;
}

There is no way to know with absolute certainty how all search engines are constituted. One of them however, Google, has posted indisputable evidence that for their search engine at least, server location is counted in the algorithm that determines relevance. Matt Cutts’ (Google Software Engineer) has posted the answer to this question on his Google Webmaster Central Channel on YouTube. This video is posted below. Server location is, without question, relevant to placement in SERPs.

What impact does server location have on rankings?

[youtube hXt23AXlJJU What impact does server location have on rankings?]

Update: We have posted a list of Vancouver Web Hosts.

Javascript is executed by the browser, not the server. It allows for all kinds of user-experience enhancements that would not be possible with server-side languages like PHP. In the context of form validation, javascript allows you to alert the user to an error in his or her input without sending all the data to the form, and presenting a list of errors to the user. This is not only a great thing in terms of convenience to the user, but it can also save you bandwidth in a significant way if you have a high-volume site. The problem with javascript validation is that it can be circumvented, which means that just as you should never trust user input without validation, you should never rely on client-side validation alone.

The logical approach to validation then is to validate all your content on the server before saving it to the database. What does this mean for you if you want to also have subtle validation messages presented to the user as they fill out the form, not only at the end? Why duplicate those efforts by writing two sets of functions, one for PHP and one for Javascript? Personally I prefer to use a single set of validation functions in PHP, and modify my back-end script slightly to call them not only on a full form submit, but on individual XHR requests as well.

This brief tutorial focuses on how you might structure your Javascript and PHP to create two layers of validation that rely on only one set of validation functions, allowing for the security of server-side validation with the convenience and beauty of client-side validation. Technically the validation is all happening on the back-end, we’re simply adding an attractive front-end interface to it, that our users will appreciate. We’re not attempting to provide complete code for form validation, instead we’re offering an approach for you to build on.

Step 1: build our form, and PHP validation

HTML

For the purpose of this demo, we use a very simple form with one text input.

<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="get" id="myform">
	Please tell us something you like:
	<input type="text" name="mytext" id="mytext" value="<?=$form['mytext']?>" class="formElement <? if(isset($message['mytext'])){ echo "incorrect"; }; ?>" /><?PHP echo '<span id="msg">'.$message['mytext'].'</span>'; ?>
	<input type="submit" name="save" id="save" value="Submit" />
</form>

CSS

Two simple classes for the form element to indicate correct or incorrect status. This can be greatly beautified.

<style type="text/css">
	.correct {
		background-color: #b3d483;
	}
	.incorrect {
		background-color: #c76760;
	}
</style>

PHP

Very simple PHP to capture the form submit, and validate it. Since we’re using one field, this is extremely basic code. In our example, it sits at the top of the same file as the form.

<?php
//set a default: the form is not complete
$complete = false;

if(isset($_GET['save'])){
	$form = $_GET;
	$message = validate($form);
	if(!$message['error']){
		// if no error, process the form and present a thank you message
		// set "complete" flag to true;
		$complete = true;
	}
}

function validate($form){
	$message = array();
	$message['error'] = false;
	foreach($form as $key=>$value){
		if($key=="mytext"){
			if(strtolower($value) != "peas"){ $message['error'] = true; $message[$key] = "&lt;&lt; Please say \"peas\""; }
			elseif(empty($value)){ $message['error'] = true; $message[$key] = "&lt;&lt; You forgot to tell us what you like!"; }
		}
	}
	return $message;
}
?>

This is pretty vanilla stuff. We have a form on our page that submits to itself, runs the value of the “mytext” field through a basic validation function, and either processes the input or displays an error. If we add more fields to this, we will obviously have to add to this code to validate each one, and show a list of errors (if any) to the user when the page refreshes.

See a Demo of Step 1

Now that we have this foundation in place, we can add a little Javascript layer to run this validation on each field asynchronously when its value is changed (tab off the field, or click outside of it). Here we show each code block again, but notice the few extra lines in the HTML, PHP, and the new Javascript added.

Step 2: add the Mootools (Javascript) Layer

Javascript

This chunk loops through each element of class “formElement,” and adds a change event which triggers the asynchronous call to our PHP script. It then interprets the result of the validation and displays a message to the user, or none if there is no error.

<script type="text/javascript" src="mootools-1.2.2-core.js"></script>
var Demo = {
	start: function(){
		$$('.formElement').each(function(el){
			el.addEvent('change',function(e) {
				e.stop();
				var msg = new Element('span').injectAfter(this);
				var request = new Request({
					url: 'demo.php',
					link: 'chain',
					method: 'get',
					data: {
						field: this.name,
						value: this.value,
						ajax: 1,
						save: 1
					},
					onSuccess: function(response) {
						var response = JSON.decode(response);
						if(response.error==false){
							$('msg').setStyle('visibility','hidden');
							el.setProperty('class', 'formElement correct' );
						}else{
							$('myform').setStyle('visibility','visible');
							$('msg').set('html',response.mytext);
							el.setProperty('class', 'formElement incorrect' );
						}
					}
				}).send();
			});
		});
	}
}

window.addEvent("domready", function(){
	Demo.start();
});

HTML

This is the same as the previous example, except that we add a hidden field called “ajax” (though this is a misnomer.. AJAX stands for “Asynchronous Javascript and XML”, which is almost right except for the XML part… our PHP script will return JSON instead. The “ajax” value tells php whether or not it’s receiving the input as an asynchronous individual field, or the whole form.

<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="get" id="myform">
	<input type="hidden" name="ajax" id="ajax" value="0" />
	Please tell us something you like:
	<input type="text" name="mytext" id="mytext" value="<?=$form['mytext']?>" class="formElement <? if(isset($message['mytext'])){ echo "incorrect"; }; ?>" /><?PHP echo '<span id="msg">'.$message['mytext'].'</span>'; ?>
	<input type="submit" name="save" id="save" value="Submit" />
</form>

CSS

This is the same as step 1

<style type="text/css">
	.correct {
		background-color: #b3d483;
	}
	.incorrect {
		background-color: #c76760;
	}
</style>

PHP

Here we have added a check for the value of “ajax” which tells the script how to process the input (if it’s the whole form, or one field passed asynchronously. All the script needs to do if ajax=1, is output a JSON array and then stop processing, so that it doesn’t also return the rest of the HTML on the page. You might choose to have your forms submit to a separate script, in which case killing the script at this point would be unneccessary. If ajax=1, the validate field now also reorganizes the submitted key and value into an array the same as a form submit would generate so that we don’t have to process the input differently. You don’t have to do this like this, of course.

<?PHP
$complete = false;

if(isset($_GET['save'])){
	$form = $_GET;
	$message = validate($form);
	if($form['ajax']==1){
		echo json_encode($message);
		die;
	}
	if(!$message['error']){
		// if no error, process the form and present a thank you message
		$complete = true;
	}
}

function validate($form){
	$message = array();
	$message['error'] = false;
	$form = $form['ajax']==1 ? array($form['field']=>$form['value']) : $form;
	foreach($form as $key=>$value){
		if($key=="mytext"){
			if(strtolower($value) != "peas"){ $message['error'] = true; $message[$key] = "&lt;&lt; Please say \"peas\""; }
			elseif(empty($value)){ $message['error'] = true; $message[$key] = "&lt;&lt; You forgot to tell us what you like!"; }
		}
		//other fields we're validating
	}
	return $message;
}
?>

And that’s it! With a very small amount of Mootools JS and the addition of 5 or 6 lines to the HTML and PHP, we have a smooth second layer on our validation that saves the user time and frustration if they are having trouble getting their input right.

See a Demo of Step 2

Now you a trendy front-end without sacrificing security.

Most of the time it’s easy to support IE6. The questions I ask myself when deciding to what extent I’ll support IE6 include (in no particular order):

• Can I afford to alienate this group of users? In other words, is this a large proportion of my user base? If my users are not particularly computer savvy or perhaps they don’t upgrade their computers very often, or wouldn’t know how to update their system software, chances are they’re running an old version of Windows and have no idea what they’re missing. Can I risk losing this group?
• Do I need to build my site in a way that will be costly or difficult to maintain for IE6? Sometimes it all comes down to cost. I’ve worked for companies that have drawn the browser support line above where the web design community’s consensus sat. Sometimes this was due to user statistics, sometimes the complexity of having to maintain this compatibility. Facebook displays a warning to IE6 users that the site might not work properly for them and offers some links to help them upgrade/switch. I’ve seen the same on other sites. I think this is the right approach: it doesn’t turn the users away, but doesn’t bend too much to accommodate them, choosing instead to help them move toward an overall better experience.
• Should my profession lead, or follow? At what point does the cost, both monetary and in terms of progress, outweigh the benefit of supporting a technology? To draw what I think are valid comparisons: should we still drill for oil when the day comes that only a handful of internal combustion die-hards are buying gas? Should your neighbourhood shop still give out plastic bags when you’re one of the few who can’t get used to carrying around a reusable one? Should we resist change because a minority of the population can’t or won’t? I personally feel that when a web browser starts to stand in the way of the progress of our medium, we ought to help it fade away peacefully.
• Was the browser developed at the beginning of the Bush Era? Internet Explorer 6 was released on August 27, 2001. As of this writing that was almost 8 years ago. Let’s see.. in mid-2001 Google was a private company, Yahoo looked like this, 9/11 hadn’t happened yet, macromedia still existed, Flash was in version 5, and Barack Obama wasn’t even a US Senator. A lot has happened since then, including Internet Explorer 7 & 8, Safari, Firefox, and 4 major versions of Opera. The Internet is a different place, and it needs to be seen as it’s meant to be seen today, not through the lens of 2001 web browser technology.
• Will not supporting this browser hurt my client’s business? This is the most important one I think, because at the end of the day our task is to help our clients express their message, and interact with their own clients and customers. If it’s mission critical to them that a certain browser be supported, then it is our job to make sure it is. Sometimes this requires a higher budget and some explanation of why that fancy feature they want is a no-go.

Here are some current browser stats from W3Schools.com. They give some interesting information about browsers, operating systems and screen resolutions, collected from their own log files (so these are not general Internet stats).

So, make the decision for yourself. Keep your client’s objectives and interests in mind and if I missed some major considerations or you think I’m nuts, feel free to comment. Most of all, happy coding.

Update, July 14, 2009: It looks like some big names on the web, namely Digg.com and now YouTube.com are publicizing plans to drop IE 6 support: YouTube Will Be Next To Kiss IE6 Support Goodbye

UPDATE: Microsoft Extends IE6 Support to 2014

I was recently tasked with building an application that relied heavily on accurate time zone conversions. I, like many people I soon found out, thought there were just a handful of timezones and the usual select list would suffice:

The deeper I looked into the problem, the deeper it got: the list above only shows a few time offsets from UTC, but it doesn’t tell me, beyond a shadow of a doubt, exactly what time it is where the user is situated, nor can I rely on that time for calculations in the future. The fact is, there are a LOT of timezones in the world. Hundreds. If you have a linux server, you can see exactly how many there are by opening up /usr/share/zoneinfo/zone.tab , but here is the full list:

So it looked like I was going to have to output hundreds of timezone options in order to have something accurate to pass to PHP’s DateTimeZone class and from there perform my calculations against the server time zone. DateTimeZone is insanely great because it offers so much information, including the offset from GMT (or UTC.. the distinction is negligible for this type of application) and whether or not that time zone is currently in daylight savings.

So, the problem was: do I list all the available time zones in the giant select list and hope the user knows which one they’re in? Some would argue that this drop down list is too long to be usable. This is valid because it’s a very long list, and might be confusing. I personally think the jury is still out on this though, because there are around 190 countries in the World on a given day, yet we still seem to find our own. The difference is that most of us know which country we’re in, but will we necessarily know our actual timezone? Users just might not know which one to choose. For example: Vancouver, BC is in time zone “America/Vancouver” whereas Vancouver, WA, just across the border is in time zone “America/Los_Angeles”. This could be a little confusing.

The solutions:

First I thought I could use something like IP2Location data to pull the time zone for the user’s IP, but this would not be reliable for my particular application where the user was choosing a meeting time that was in the future. Where they are when setting the meeting and where they will be when in the meeting could be different, and to make matters worse, one of us could go into daylight savings between now and then. Strike it from the list.

I decided on the approach of using a combination of the Google Maps API and GeoNames.org web service to get the user’s time zone based on the geographic location they enter into a text field, and the latitude / longitude returned by Google’s geocoding service.

The basic steps:

1. Check that there’s input text
2. Send to google
3. Validate the result
4. Make call to php script for GeoNames
5. Validate the result
6. Format a string with the results that the user can confirm
7. Display results

The HTML:

1
2
3

<input style="padding: 5px; border: 1px solid #333; font-weight: bold" type="text" name="address" id="address"  size="40" maxsize="100"  /> <a href="#" id="lookup">Look-up</a><br />
<span id="result">&nbsp;</span></p>
<div id="map" style="width: 293px; height: 100px"></div>

The Javascript:

My example uses a little Mootools, so you if you base yours on this you will also have to include Mootools Core.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

var Demo = {
     start: function(){
          Demo.lookup();
     },
 
     lookup: function(){
          $('lookup').addEvent('click', function(e){
               e.stop();
               $('result').set('html',' ');
               var address = $('address').value;
               if(address==''){
                    alert("Please enter your location in the text field");
                    $('address').focus();
               }else{
                    map = new GMap2($("map"));
                    var geocoder;
                    geocoder = new GClientGeocoder();
                    geocoder.getLocations(address, Demo.addToMap);
               }
          })
 
     },
 
     addToMap: function(response){
          map.setCenter(new GLatLng(47.040182144806664,-30.234375), 1);
          map.clearOverlays();
          if (!response || response.Status.code != 200) {
               reset_map();
          } else {
               var place = response.Placemark[0];
               point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
               map.checkResize();
               map.setCenter(point, 6);
               var marker = new GMarker(point);
               map.addOverlay(marker);
               var coords = place.Point.coordinates;
               var tmp = String(place.Point.coordinates);
               var coords = tmp.split(",");
               var lat = coords[1];
               var lng = coords[0];
               try {
                    //eg paris
                    var city = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName;
               } catch(err) {
                    try{
                         //eg vancouver
                         var city = place.AddressDetails.Country.AdministrativeArea.Locality.LocalityName;
                    }catch(err){
                         try{
                              //eg dubai
                              var city = place.AddressDetails.Country.Locality.LocalityName;
                         }catch(err){
                              //eg Monaco
                              var city = place.AddressDetails.Country.CountryName;
                         }
                    }
               }
 
               Demo.getTimezone(city,lat,lng);
          }
     },
 
     getTimezone: function(city,lat,lng){
          new Request({
               url: "index.php",
               data: "lat="+lat+"&lng="+lng,
               onSuccess: function(response){
                    var responseArray = JSON.decode(response);
                    var timezone = responseArray.timezone;
                    var result = "You are located in "+city+". <br />Your timezone is "+timezone;
                    $('result').set('html',result);
               }
          }).send();     
     }
}
 
window.addEvent('load', function(){
     Demo.start();
});

The PHP (index.php):

1
2
3
4
5
6
7
8
9
10

if(isset($_POST['lat'])){
     $doc = new DOMDocument();
     $location = "http://ws.geonames.org/timezone?lat=".$_POST['lat'].'&lng='.$_POST['lng'];
     if($doc->load($location)){
          $timezones = $doc->getElementsByTagName("timezoneId");
          $coordinates['timezone'] = $timezones->item(0)->nodeValue;
     }
     echo json_encode($coordinates);
     die;
}

…and that’s it! Now you have a real time zone for the user so you can use PHP’s DateTimeZone class to make reliable date and time calculations. This particular implementation isn’t fool proof.. you would have to have more checks and communication back to the user to make this more functional, but the concept is clear and it sure beats offering a select list of over 400 time zone options.

See a Demo

If you want to have a link to a file download that does not cause a page refresh or opening a superfluous browser window in order to make a file download happen, it’s actually quite easy with only a few lines of JS. There’s no “AJAX” here, but it sure feels like it. The method relies on adding an invisible iFrame to the DOM, and simply loading the script triggering the download into that iFrame:

<p>[<a href="my-fictional-download-script.php" id="download" target="_blank">download a file</a>]</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if($('download')){
	var myFrame = new Element('iframe', {
		src: 'about:blank',
		id: 'myFrame',
		styles: {
			'visibility': 'hidden',
			'display':    'none'
		}
	}).injectInside(document.body);
	$('download').addEvent('click', function(e){
		e.stop(); 
		myFrame.src = this.href;
	})
}

Now as long as your PHP file is configured to return the correct headers for the file type you would like downloaded, this should trigger a download. Here’s an example of some PHP to download a .csv file:

1
2
3
4
5
6
7
8
9
10

$filename = 'download.csv';
//this is where you would format your data, selecting and looping through rows from your database for example.
//here we just output one line:
$out = "this, is, a , csv\n";
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Length: " . strlen($out));
header("Content-type: text/x-csv");
header("Content-Disposition: attachment; filename=$filename");
echo $out;
exit;