Number 9 on the list is “Never Disrupt the User” – which was amusingly accompanied by an invitation to take an online survey.

It made me laugh so I thought I’d share it.

Technical

• HTML, XHTML and HTML 5
• CSS2 and CSS 3
• JavaScript
• One of jQuery/MooTools/Scriptaculous or similar
• Ajax
• In browser debugging/tweaking

Conceptual

• Basics of OOP
• MVC
• Performance considerations on the front end
• Differing approaches to CSS
• Grid systems and CSS frameworks
• UX and usability
• Design
• Markup semantics

Useful side skills

• Server side language/framework
• CMS knowledge (WordPress, Drupal or Joomla perhaps)
• Basics of SEO
• Version control
• Accessibility considerations
• JSON
• User testing

I’m sure it’s not an exhaustive list but I think it may be more useful for someone looking to become a front end developer, than the original shopping list of skills.

That’s all my opinion though – be interested to hear from others on this!

This got me thinking about how it is yet another means by which Google can learn more about you. This will give them more data on where you go and what you buy. They may not be able to sell your email address to interested third parties, but they could certainly tailor the advertisements you see on the Internet. They already allow adverts to follow you round the Internet with Google Remarketing, it’s really just an extension of that. As I started thinking about all of this I started to think about the biographic data they can build up about a Google user.

So what can Google learn about me?

Off the top of my head I can identify the following that Google could figure out about you from its own data:

• What you search for on the Internet (search services)
• What websites you visit (search services, analytics, your Google account, Chrome data?)
• Who your friends are (Google+, Blogger)
• What your interests are (email, Google+, Google Reader plus many more)
• Who you are in contact with and what you talk about (Gmail, Google voice)
• Where you go (maps, android based location services)
• What products you would like to buy (product search, search services, Adwords tracking data)
• What you buy (checkout, possibly their future payment systems)
• Your financial interests (inferred by settings in Google Finance perhaps)

Some of this may be hard to find out and to collate, but for the masters of search it would surely not be impossible.

A few examples

1. You use your android mobile to pay for takeaways locally 3 times in 6 weeks. Google matches this data up and Pizza Hut pay to advertise to people in your area who have bought takeaway recently.
2. You follow several web design blogs in Google Reader, follow some well known developers in Google+ Circles, often search for WordPress related items via Google – Dreamhost pays to advertise in front of WordPress developers
3. You have a conversation via Gmail or Google chat and talk about your recent ankle injury. The adverts following you around the Internet are suddenly all about physiotherapists in your local area.

For the tin foil hat wearing brigade I’ll also mention 23andme.com, a company part owned by Anne Wojcicki who is married to Google co-founder Sergey Brin. The company offers a service that enables you to get a genetic profile of yourself, highlighting which diseases and illnesses you are predisposed to. Google has reportedly invested around $6.5M in the service. Imagine signing up for that and then seeing lots of adverts for the miracle drugs to stop you getting such a disease. That would be an amazing opportunity for the pharmaceuticals industries.

Closing

I’m not advocating that everyone cancels all Google account and switches to other email providers or anything, nor am I suggesting that Google has abandoned its “Do no evil” motto, however it is worth considering the clout that this data will give Google in years to come.

I’d also suggest that it is not just Google to consider – Facebook and LinkedIn are building up similar profiles of your personal and business personas to help their advertisers target you. They will have a much easier time profiling you, though perhaps Google can get a larger overall view.

The Internet and World Wide Web have made the lives of the everyman more and more public and it is only to be expected that companies will try and use that information for their own gains.

Sources

• dailyreckoning.com/banking-on-your-phone/
• en.wikipedia.org/wiki/23andMe

1. I’d never done it before in 7+ years of JavaScript
2. It’s really rather easy!

JavaScript has Array.sort that will order an array’s contents in ascending alphabetical order. So:

var testArray = ['c', 'a', 'b'];
testArray.sort();
//sorts as a, b, c

The default sort does not sort numeric data, it is purely a character based sort, so:

var testArray = [3, 1, 2, 19];
testArray.sort();
//sorts as 1, 19, 2, 3

Array.sort takes a function as an optional parameter. The function takes two parameters which are the two elements in the array that you are comparing. The function needs to compare these two elements and figure out which should take precedence:

• Less than 0: First item is before the second
• 0: identical items
• More than 0: First item is after the second

If we want to sort these items in a descending order then we need to pass a function to the Array.sort do something like the following:

function ascending(a, b){
	if (a === b) {
		return 0;
	} else if (b > a) {
		return 1;
	}
	return -1;
}

var testArray = ['c', 'a', 'b'];
testArray.sort(ascending);
//sorts as c, b, a

Wasn’t this post about sorting arrays of objects?

Sorry, I digress, but that was Array.sort 101. Below are a couple of simple ideas for sorting a simple object array – these could be replaced by whatever fancy pants sorting logic you need, but hopefully this will save someone, somewhere some faffing and Googling.

var arrayOfPeople = [
	{name:"Rick Huby", email:"rick@test.com", age:30},
	{name:"Alan Smith", email:"mrsmith@test.com", age:25},
	{name:"Jo Jenkins", email:"iamjo@test.com", age:40},
	{name:"Dave Smith", email:"dave@test.com", age: 35}
];

function orderByNameAscending(a, b) {
	if (a.name == b.name) {
		return 0;
	} else if (a.name > b.name) {
		return 1;
	}
	return -1;
}

function orderByEmailAscending(a, b) {
	if (a.email == b.email) {
		return 0;
	} else if (a.email > b.email) {
		return 1;
	}
	return -1;
}

function orderByAgeAscending(a, b) {
	return a.age - b.age;
}

arrayOfPeople.sort(orderByNameAscending);
arrayOfPeople.sort(orderByEmailAscending);
arrayOfPeople.sort(orderByAgeAscending);

If you want to progress these then I would at least put some defensive logic in to ensure that calling the object attributes (a.name etc.) doesn’t cause a runtime error (try/catch or some rudimentary a.name === undefined check may be enough).

• View Demo

Page download speed is also a factor in Google’s ranking algorithm, making performance even more important now, so ensuring good website performance is paramount.

Most websites can be improved with a few minor tweaks and changes. To this end I’ve compiled a small list of quick fixes to improve your website’s performance.

To help with testing your website I would recommend using Firefox and installing the YSlow and Google Page Speed tools.

List of website performance improvements

1. Combine CSS and JavaScript files
2. Minify HTML page and CSS and JavaScript files
3. GZip/Deflate plain text files
4. Ensure Javascript is at the bottom of the page
5. Remove inline CSS and JavaScript
6. Minimise external lookups (DNS)
7. Reduce image sizes (without reducing image quality)
8. Use image sprites where possible

1. Combine CSS and JavaScript files

What’s the issue?

Every file the user downloads comes with a performance overhead – each one has to be looked up which takes time, plus if you have cookies on your website, they all have to be sent along with each file request.

How do I improve this?

Most CSS files can be combined into one master CSS document, as can most JavaScript files.

This can be done manually by copying and pasting the contents of your CSS or Javascript files into one master file for each (master.css, master.js).

You may prefer to keep some files separate for ease of long term maintenance. If so, you can install tools such as minify (PHP), Combres (.NET) or JAWR (Java) which can be configured to automatically combine your resources from multiple sources. Alternatively you can build deploy scripts that combine the resources as part of a deployment process.

Back to top

2. Minify HTML page and CSS and JavaScript files

What’s the issue?

HTML, Javascipt and CSS files written by hand will include a lot of white space to ensure they are both readable and maintable by humans.

Most white space is unnecessary for computers to interpret the code.

As such all the white space in these files is redundant and just adds to the size of the file being downloaded.

How do I improve this?

The previously mentioned Minify tool does have a facility for minifying the HTML page, as well as CSS and JavaScript files prior to output. This is only available for PHP.

For minifying CSS and JavaScript files on the .NET platform you can use Combres. There is also a port of the YUI Compressor library. Java has the JAWR tool which is very similar to Combres.

Back to top

3. Compress plain text files for download

What’s the issue?

By default, HTML, JavaScript and CSS files are uncompressed. The pure text that is written is what is downloaded.

Plain text can however be compressed by about 70% of its original size and then uncompressed on the browser side.

How do I improve this?

There are two common ways of compressing this content: GZip and Deflate.

Both do essentially the same job. In the examples I have restricted the compression to only text based files, as running compression on items which are already compressed (typically video, music and images) is a waste of time and server resource.

Deflate in Apache

Assuming that mod_deflate is enabled, add the following line to your .htaccess file or in the httpd.conf.

AddOutputFilterByType DEFLATE text/html text/plain text/css text/javascript application/x-javascript text/xml

If mod_deflate is not enabled and you have root access to your server you can try this resource: http://www.howtoforge.com/apache2_mod_deflate

GZip in Apache

For an authoritative look at GZip in Apache I’d recommend Uncle Google as I’ve never looked at this on Apache, however from reading around the subject I believe that Deflate is marginally quicker.

GZip/Deflate in IIS

If you use combres (mentioned in point 1) this can deal with the compression of CSS and JavaScript files for you.

If you want to manually deal with this then you are going to need to change some IIS config files. The Small Workarounds website has a good article on GZip in IIS.

Many minification tools such as Minify, Combres and JAWR can be configured to GZIP the contents themselves instead of getting the server to do it.

Back to top

4. Ensure Javascript is at the bottom of the page

What’s the issue?

Browser’s request more than one file at a time, by the HTTP 1.1 specification 2 at a time per hostname. You can potentially speed up your page load by splitting images, CSS and other resources across multiple domains (e.g. request images from images.example.com and css from files.example.com but the page from www.example.com).

However, when JavaScript files are downloading, nothing else is brought down in parallel (even on different hostnames).

How do I improve this?

Simply putting all your JavaScript requests at the bottom of the HTML document, directly before the closing <body> tag will minimise the impact as you can load all of your content in advance of the Javascript functionality.

Some scripts may need to be loaded earlier, but this will need to be a judgement call on the part of the developer.

Back to top

5. Remove inline CSS and JavaScript

What’s the issue?

CSS and JavaScript can be embedded within the actual HTML page (as opposed to being linked to an external file).

This bloats the HTML page size and reduces the browsers’ ability to cache common style and script information, as the CSS and JavaScript will be downloaded for each page request. Using external files allows the browser to just download the information once and reuse for every page request that needs it.

How do I improve this?

Simply ensure that all JavaScript and CSS content is stored within external files.

Ensure you check any third party libraries and widgets which you may include in your page as these often have inline CSS and JavaScript snippets to be included in the page. These can normally be refactored into external files with a little CSS and JavaScript knowledge.

Back to top

6. Minimise external lookups (DNS)

What’s the issue?

There is a time overhead in looking up DNS entries which can add significantly to the page speed. Every new hostname encountered requires a lookup to an IP address, according to Yahoo! this adds 20-120 milliseconds per hostname to the page load.

How do I improve this?

Simply reducing the number of domains that are referenced for page resources (images, CSS, javascript etc) will improve your score on this. However there is a caveat on this because sometimes using multiple domains allows for improved performance as each domain will increase the number of parallel downloads your page can make.

On the one hand referencing files from different domains allows the browser to download more files concurrently, however each domain that needs to be looked up will add an overhead. It really is a balancing act that should be reviewed for each project.

An additional topic to be considered is Content Delivery Networks (also known as CDN’s), but that’s probably for another post.

Back to top

7. Reduce image file size (without reducing quality)

What’s the issue?

Some image formats, especially PNG retain a lot of information that is not required for the image rendering itself.

This data can be removed, leaving the image file smaller but the image exactly the same as it was (also known as lossless compression).

How do I improve this?

YSlow itself comes with a handy link to the Smush.It! website where you can compress your images in this lossless fashion.

There are also tools for doing this on your local machine, some of which you can configure as part of a deployment script.

• ImageMagick command line tools

For WordPress, Joomla and Drupal websites there are also plugins which can be installed to do this for all uploaded images.

• WP Smush.it plugin for WordPress
• jomCDN for Joomla
• Imagecache smush.it for Drupal
• ImageAPI Optimise for Drupal
• CDN for Drupal

Back to top

8. Use image sprites where possible

What’s the issue?

As mentioned previously, every file request comes with a performance overhead which adds up to a slower web page. Most pages are made up of many images which means there can be a significant overhead in requests. Cookies are sent along with every single request, so for any website with lots of cookies and lots of images you can quickly add a lot of data to each page load.

Sprites are derived from computer game animation, one image file contains all the individual frames for an animation. A visible area displays part of the overall image and the image is moved to create the animation effect.

In web terms we are less concerned with the animation (though this technique is used for some animations) as we are with reducing multiple images into one request.

How do I improve this?

CSS allows us to use background images, in many cases these background images can be combined and displayed in ways that only show a small portion of the overall image.

By reducing a pages image requests down to 1 or 2 requests you will speed up the performance.

Montage of sprited elements from travelsupermarket.com, all taken from one sprited image.

This example of a sprite reduced the number of requests from 36 to 2 requests and improved performance significantly.

You may ask why this was reduced to 2 requests and not 1. This is because there is a second image file that is used on the website – a 1px square transparent gif. This is used in a number of places as an HTML image, the sprite is then used as a background image on the transparent gif.

Example CSS definitions

.sprite {
	background: url('sprite.png') no-repeat;
}

.someItem {
	background-position: 0 -100px;
}

.someOtherItem {
	background-position: -50px -200px;
}

Example HTML usage

Using this method we could technically reduce an entire websites image content down to 2 image requests (the sprite and the transparent gif). In practise this is not realistic as maintenance and overall file size of the sprite would eventually render it impractical, but if you always think in terms of sprites you can probably reduce a large number of requests.

My personal practise is to group things into ‘sprite groups’, for example all the buttons in one sprite, the navigation in another, one for icons and so on. I would also recommend keeping a Photoshop (or similar) file for each sprite as it will make maintenance much easier in the future.

Back to top

In Summary

There are further things that can also be done, but in experience these items tend to be easy to achieve and have a major improvement on the performance of the page.

There are other improvements that can be made, though some require a little more work than most of the suggestions here. If you want to read around the subject then the following subjects may be of interest:

• Use of multiple domains
• CDN/Content Delivery Networks
• Caching strategies for your website

A recent project had a large SEO requirement which included the (mostly automated) optimisation of many thousands of pages across a vast number of brands and products. One of the key entry places for these optimised pages was however designed as a select field. Since search engine spiders don’t traverse forms this was obviously an issue so I devised a jQuery plugin to work round this issue.

• Get Source
• View Demo

Presenting jQuery Spider Select

Since the main requirement was a huge traversible list of brands I decided to start with just that (in the following examples I have used individual websites, but the original one was a list of web pages on one particular website).

Without JavaScript enabled (and what the search engine should see)

• BBC website
• Rick Huby
• Slashdot
• Amazon UK

What the regular user will see

The jQuery plugin simply runs through the ul and generates a list of URLs and link texts, then rebuilds these as a select field. Depending on the parameters passed the user will either just select a page and be taken there, or will click a button to navigate to the selected page.

• Get Source
• View Demo

How to use jQuery Spider Select

HTML

<ul id="whateverId">
	<li><a href="http://www.bbc.co.uk/">BBC website</a></li>
	<li><a href="http://www.rickhuby.com/">Rick Huby</a></li>
	<li><a href="http://slashdot.org/">Slashdot</a></li>
	<li><a href="http://www.amazon.co.uk/">Amazon UK</a></li>			
</ul>

JavaScript

jQuery(document).ready(function(){

	$('#whateverId').spiderSelect();

});

Options

date('D, d M Y H:i:s O', strtotime($mysql_timestamp_val));

Anyway, see below for how to write CDATA comments in your JavaScript to make it XHTML compliant.

QUnit was testing for the position of elements at the end of the animation, however as jQuery animations are done asynchronously (using setTimeout and/or setInterval I believe) the tests were failing as the animations were still in progress.

To resolve the issue we need to make jQuery stop animation in progress before making any assertions. To do this simply trigger the animation, followed by using the jQuery .stop() function to cause all animations to complete immediately, before verifying the test conditions.

var $itemToAnimate = $("#item-to-animate");
$itemToAnimate.someAnimationCall();  //.slideDown, .animate etc.
$itemToAnimate.stop(true, true);

//some test condition here

The 2 arguments passed to stop clear all queued animations and make any active animations complete immediately.

This evolved into additional functionality to improve the usability of the input box though, so that if the content was already selected then the cursor was just placed where the user clicked (so that someone could edit the content rather than having to retype it). Then I was asked to allow the user to create a selection of the content and allow that to remain selected, rather than forcing the full text to be selected. I love working on Agile projects :)

I quite liked the functionality though, so I’ve reworked this into a jQuery plugin to provide the same functionality.

Requirements in summary:

1. Clicking in the input box with content in auto-selects all content.
2. If the user selects a number of characters then only those selected characters are left selected
3. If there is already selection made in the input box and the user clicks in the box, all highlighting is removed.

• Get Source
• View Demo

Some basic HTML…

…and the jQuery plugin…

(function( $ ){

	$.fn.textSelectionToggler = function() {
	
		var jqInput = $(this);
		var domInput = jqInput.get(0);
		jqInput.data('selected', false);
	
		this.mouseup(function(){                       

			if (shouldSelectAllTextInField()) {
				jqInput.select();
			}
			
			toggleSelectedFlag();
		});
	   
		this.blur(function(){	
			clearSelectionAndResetSelectedFlag();
		});
		
		/** Text selection methods **/
		function shouldSelectAllTextInField() {
			if (!textSelectionAlreadyPresent() && !specificTextRangeSelected()) {
				return true;
			}
			return false;
		}
		
		function textSelectionAlreadyPresent() {
			return jqInput.data('selected');
		}
		
		function specificTextRangeSelected() {
			if (isIE()) {
				return hasSelectionBeenMadeInIE();
			}
			return hasSelectionBeenMadeInGoodBrowser();			
		}
		
		function hasSelectionBeenMadeInIE() {
			domInput.focus();
			if (document.selection.createRange().text.length > 0) {
				return true;
			}
			return false;
		}
		
		function hasSelectionBeenMadeInGoodBrowser() {
			var selectionLength = domInput.selectionEnd - domInput.selectionStart;
			if (selectionLength > 0) {
				return true;
			}
			return false;		
		}
		
		/** Helper functions **/
		function toggleSelectedFlag() {
			if (jqInput.data('selected')) {
				jqInput.data('selected', false);
			}
			else {
				jqInput.data('selected', true);
			}
		}
		
		function isIE() {
			if (document.selection) {
				return true;
			}
			return false;
		}
		
		function isFF() {
			return ($.browser.mozilla);
		}
		
		function clearSelectionAndResetSelectedFlag() {
			if (isFF()) {
				//Fixes bug where FF selects then deselects the content after leaving and 
				//re-entering the field (if you click where the selected content was).
				var input = jqInput.get(0);
				input.selectionStart = 0;
				input.selectionEnd = 0;
			}
			
			jqInput.data('selected', false);
		}

	};
	
})( jQuery );

…and to setup the functionality…

$(document).ready(function() {           
   $("#demo-selector").inputSelector();
});

Note: I have been experimenting with different styles of JavaScript, so if you think the above may be a little long winded you may be right – it could easily be re-written in 45 lines of code or less because that is what I started with before refactoring into small functions (not yet convinced this is a better method of writing code but the experiment goes on :)).

• Get Source
• View Demo