Skip to content

James Rutherford

Web, design, Newcastle, games and fun!

Archive

Tag: web

A pretty low-grade, but functional associative array sorter in JavaScript:

// execution
var assocArray = new Array();
assocArray[ 'b' ] = 'item3';
assocArray[ 'c' ] = 'item1';
assocArray[ 'a' ] = 'item2';

array_dump_html( 'Pre-sort', assocArray );

assocArray = array_sort( assocArray );

array_dump_html( 'Post-sort', assocArray );

// ---
// Sort functions...
function array_sort( arrayIn ) {

	var arrayCouplets = new Array();
	for( key in arrayIn ) {

		arrayCouplets.push({

			key: key,
			value: arrayIn[ key ]
		});
	}

	arrayCouplets.sort( sort_couplets );

	var arrayOut = new Array();
	for( i in arrayCouplets) {

		arrayOut[ arrayCouplets[ i ][ 'key' ] ] = arrayCouplets[ i ][ 'value' ];
	}

	return arrayOut;
}

function sort_couplets( coupletA, coupletB ) {

	return coupletA[ 'value' ] > coupletB[ 'value' ];
}

// ---
// Fluff functions...
function array_dump_html( title, arrayIn ) {

	var output = '';
	for( key in arrayIn ) {

		output += 'key(' + key + ') value(' + arrayIn[ key ] + ')<br />';
	}

	document.write( '<div><h1>' + title + ':</h1>' + output + '</div>' );
}

Outputs:

Pre-sort:
key(b) value(item3)
key(c) value(item1)
key(a) value(item2)

Post-sort:
key(c) value(item1)
key(a) value(item2)
key(b) value(item3)

Copy and paste into an online editor to try it.

Can you improve it? Please comment!

Dom encouraged a simple approach to SEO. His points included:

  • Pick your niche: Look at what people are searching for in your market
  • Basic structure: Get decent URLs, title and heading tags
  • Content: Produce something worthwhile
  • Be realistic: High search placements are slow to gain and easy to lose
  • Remove as much duplicated content as possible
  • Judge your sources: Don’t read any SEO blogs!
  • If you’re outsourcing updates (as with any other outsourcing), check everything
  • Don’t do everything at once: Test the impact and improve incrementally
  • Be savvy: Fact check any lines you may be being fed by an SEO agency

Areas relevant to Google for you to look at now or in the near future:

  • Google product search
  • Google local
  • Universal Search (blogs, tweets, video, etc)
  • Microformats

Dom presented a few Twitter anecdotes in his unique style, which illustrated:

  • The importance of context – information which you may not be communicating
  • That without context, meaning may warp or amplify
  • Anyone may be listening (e.g. potential future employers)
  • Strangers may go to great lengths to pull a prank (well, Dom and Tim may, at least)
  • People will interact and respond in unpredictable ways

References: Dominic Hodgson@thehodge

Related: BBC News – Be careful what you tweet

Andrew introduced a free SEO analytics tool released by Microsoft.

The tool is distributed via the Microsoft Web Platform and runs on Vista and Windows 7. [The SEO Toolkit is independent of other components- no IIS server install is required].

The tool parses as a search engine would, so can be used to examine sites built with any underlying platform (e.g. PHP, JSP, ASP, flat HTML, etc..) and will highlight a range of potential problems. It will analyse both locally hosted and publicly-released sites, so is useful for both development and audit.

It has three main features – site analysis, robots editor and sitemap editor.

It includes a powerful query engine and is extensible (in VB.NET or C#).

A very useful talk for me- this is a tool I’ve not encountered, but I could see it fitting very appropriately into my web development workflow.

Slides and talk are now up on the SuperMondays blog.

References: Andrew Westgarth@apwestgarthCarlosAg blog

Tim isolated Google as the only worthwhile ‘optimisation’ target, and introduced some common fallacies. His notable points were:

  • Google does not crawl meta data
  • Keyword density isn’t important. Mentioning a term once on a page should be adequate
  • Content is not rated by semantic relevancy
  • Buying links is officially frowned-upon, though realistically, links are very commonly ‘bought’ in one way or another- even from Google themselves
  • Markup structures are important, but not as important as most SEOs say
  • Google does analyse page structure to discount footers, advertising blocks, etc. (see ‘page segmentation analysis’).
  • SEO advice is predominantly [erm...] cobblers.

Both Tim and Dominic (speaking later) recommend SEO Dojo as a (rare) worthwhile source for SEO information.

Tim accepted a few questions, outlining how you might become relisted if Google have penalised you [with a 'reconsideration request']; how problematic penalisation can be [usually 'not very']; some potential hostile SEO tactics and how you might try to recover from them [perhaps employing a 'Reputation Management Consultant', though Tim's general feeling on those in this role is less than glowing...]

References: Tim Nash@tnash

Portal is one of my all-time favourite games.

It’s available from the Steam distribution system, and is frequently on offer (recently available for free), or bundled inside the Orange Box deal.

It would be difficult to say exactly why Portal is amazing without spoiling it; suffice to say that it’s a short game (approx 4-6 hours play), incredibly clever, with a great sense of humour and a huge twist halfway through. If you’ve not yet sampled it- avoid any reviews before you do so.

It also features a number of extras, one of which is a ‘director’s commentary’ mode. If you activate this, speech bubbles are scattered around the levels – which, when clicked, explain design decisions.

These demonstrate the attention directed towards user testing and how this shaped the look, structure and progression through the game.

There are very obvious lessons to be learnt for game developers, but they’re also acutely relevant to any field that involves user interaction.

To paraphrase them:

  • Your users won’t necessarily see, mentally connect or react the way you would expect them to.
  • Simplify, deconstruct and semaphore the appropriate interactive elements.

One thing I missed out on while using Google’s hosted version of JQueryUI was that some widgets and functionality require your page to link in a theme.

I was scratching my head as to why some UI functionality seemed to be working (e.g. draggable), but other functionality was not (e.g. resizable, tabs); and linking in a theme was the answer.

It doesn’t seem to be well documented, but Google also host a number of default themes, which may be included thus:

<link rel=“stylesheet” href=“http://ajax.googleapis.com/ajax/libs/jqueryui/{version}/themes/{theme_id}/jquery-ui.css” type=“text/css” />

So, the Cupertino theme can be linked in to version 1.8.1 thus:

<link rel=“stylesheet” href=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/cupertino/jquery-ui.css” type=“text/css” />

More information here (NB. links use an old version of JQueryUI).

http://www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/

A great optimisation for many modern websites is to farm out the hosting of linked items, such that the client browser can receive your base page code (HTML) and then pull media in from a number of directions.

Google host a number of JavaScript APIs which may be linked freely be anyone who signs up for a free Google API key.

Adding a library this way:

  • Reduces the load on your server- one less thing to push.
  • May well be quicker for the client- Google have a fast worldwide architecture, and the library may also be cached from a visit to another site.
  • Means less code for you to manage (and FTP up).

On the downside:

  • You’re reliant on an additional system- which adds an extra potential failure point to the process (this may make a page more likely to part-load than completely fail – which may or may not be advantageous).

Google currently host multiple versions of JQuery, JQueryUI,Prototype, Script.aculo.us, MooTools, Dojo, SWFObject, YUI library, Ext Core, and their own native APIs.

Nice infographic on BBC news:

“SuperPower: Visualising the internet”

I’m familiarising myself with Drupal development; partly for a specific, collaborative project, and partly because it’s gaining a strong reputation as an open-source platform- current government mandates are recommending OSS for public sector websites.

I dived in and am got stuck into building a module- all code seemed fine- the hook_menu function looked good, but calling the relevant admin URL brought up a ‘page not found’. After some head-scratching, it appears that Drupal 6 does some sneaky cacheing. Disabling and re-enabling the module rebuilds the function table in the database.