What is it?

:nth-of-type() is a CSS3 pseudo class selector.

What does it do?

The :nth-of-type() selector allows you to target elements based on their position in the document tree.

For example:

HTML

<article class="topStory">
<section>First section</section>
<section>First section</section>
<section>First section</section>
</article>

CSS

article.topStory section:nth-of-type(2) {
       ....rules....
}

This code will apply the styles to the second section element.

This has the added effect of simplifying your HTML markup, reducing the need for classes or ID's and making dynamic code chunks more straight forward.

Example use case

Imagine you have to build an image or product gallery, you have a container of 600px width and you have rows of 3 elements that are 190px wide with a 15px gutter between them.

You might choose to mark this up as an unordered list. With each <li> having a right margin of 15px and then a class on every third element to overwrite that margin with 0.

HTML

<ul><li>Element 190px</li>
<li>Element 190px</li>
<li class="noRightMargin">Element 190px</li>
</ul>

CSS

ul li {width:190px; float:left; margin:0 15px 15px 0;}
ul li.noRightMargin {margin-right:0;}

Now this works, however you now have an ugly class name in your HTML and you have to find a way to dynamically add that class to every third element. PITA

However :nth-of-type() can provide us with a tidier way to achieve this same result.

With nth-of-type() you can specify a value of n, such as;

ul li:nth-of-type(3n) {
      ....rules....
}

This will select every third element in the list and eliminates the need to have a class on the item, therefore saving us the headache of dynamically generating that class

Other applications

There are several other options available for use with :nth-of-type(). To select every fourth item in a list for example, you could use

ul li:nth-of-type(5n-1){}

or

ul li:nth-of-type(3n+1){}

you can also use the options "odd" and "even". I can imagine that this would be particularly useful when Zebra striping table rows.

Support

As always there is good support for :nth-of-type() in the more modern browsers and as always there is not any support for it in IE8 and back.

Fear Not!

There is a brilliantly useful JavaScript library called Selectivzr that adds support for lots of CSS3 pseudo selectors to older versions of IE. You can check it out at selectivizr.com

Wish me luck!

Today I'm going to go over loading images.

Loading Images

Loading images to display with OpenGL is a two step process:

1. load the images into the application
2. pass the raw image data to Open GL

The iPhone and MonoTouch provides a few different methods to load images. Due to the different screen resolutions of the 4 series and older phones you need to create two copies of your images, one for each resolution. By convention images for the 4 series phones have @2x as a suffix to the file name, e.g.

"/Content/images/sprites@2x.png"

As a quick aside the Subversion command line doesn't like the @ in the file name as it uses it to delimit a file path from a revision number. To get around this when doing an svn add do the following:

svn add /Content/images/sprites@2x.png@

Images can be loaded into a MonoTouch app using the following code:

var image = UIImage.FromBundle("/Content/images/sprite.png");

This takes care of the file name and different resolutions for you, automatically loading the most appropriate image for the device. This code is designed for displaying images using UIKit and caches the image when loaded for later re-use. This isn't ideal for the performance needs of a game so I've been using the FromFile method instead. This method doesn't provde any caching functionality and doesn't handle the file name changes, which is trivial to handle yourself.

var path = "/Content/images/sprite.png";

// handle image scaling
if(UIScreen.MainScreen.Scale > 1) {
	var retina = path.Replace(".", "@2x.");

	if(File.Exists(retina))
		path = retina;
}

var image = UIImage.FromFile(path);

Passing Images to OpenGL

Once we've loaded the image we need to let OpenGL know about it. To do this we need to get a reference ID from OpenGl and associate the data from the image file to it.

The code below outlines this process.

// store the ID of the OpenGL texture
uint id;

// safely load the image from disc
using(var image = UIImage.FromFile(path).CGImage) {
	// allocate enough memory to store the image data
	// each pixel requires a byte for red, green, blue and alpha components
	IntPtr data = Marshal.AllocHGlobal(image.Height * image.Width * 4);

	using(
		var context = new CGBitmapContext(data, image.Width, image.Height, 8,
			image.Width * 4, image.ColorSpace, CGImageAlphaInfo.PremultipliedLast)) {
		// draw the image to the bitmap context
		// this fills the data variable with the image data
		context.DrawImage(new RectangleF(0, 0, image.Width, image.Height), image);

		// get an id from OpenGL
		GL.GenTextures(1, ref id);

		// let OpenGL know we're dealing with this image id
		GL.BindTexture(All.Texture2D, id);

		GL.TexParameter(All.Texture2D, All.TextureMinFilter, (int) All.Linear);
		GL.TexParameter(All.Texture2D, All.TextureMagFilter, (int) All.Linear);

		// generate the OpenGL texture
		GL.TexImage2D(All.Texture2D, 0, (int) All.Rgba, width, height, 0,
			All.Rgba, All.UnsignedByte, data);

		// free the allocated memory
		Marshal.FreeHGlobal(data);
	}
}

There are a few important things to consider when passing the images to OpenGL.

You have two references to the image data here, one in the UIImage and one in OpenGL. It's important to release the UIImage resources so you don't use up all the device's memory. It seems obvious, but I didn't originally do this...

If you're using OpenGL ES 1.1 is images must have dimensions which are a power of two i.e. the width and height must be 2, 4, 8, 16, 32 etc or it won't display the image. If your images don't have power of two dimensions (they don't have to be square) you'll need to adjust the width and height of the CGBitmapContext and the values passed to GL.TextImage2D accordingly.

When we get to rendering the images to the display you'll need to know the image's dimensions, so store the width and height of the original image for later use.

That's all for now, next time I'll look at rendering an image to the screen.

I've seen this image crop up on social media a few times over the last couple of weeks. It's great table, showing some data very clearly, and is easily understood. One problem though is that it is an absolute pack of lies.

Now I'm not in the business of making un-substatianted claims, so I'll back that up briefly with two links:

1. The original Firman Bear report - which is a study of "Variation in Mineral Composition of Vegetables", not organics.
2. An additional note added to the studies website by the Rutgers crop science dept - which states that the study "is frequently misquoted as evidence supporting the position that organically grown vegetables are significantly superior in minerals and trace elements to conventionally grown vegetables. In reviewing the original publication, one can clearly see that this was not the intention of the study nor does it give support to this premise."

However the point of this post is not organic food, I'll leave that discussion to those better suited than I: Penn and Teller BS: Organic Food.

The point of this post is truth, and the Internet.

With the proliferation of social media over the last decade or so, and with the publishing power that gives the individual, information can be spread alarmingly fast. The flipside to that particular coin however is that disinformation will spread just as fast.

It took me all of 2 minutes to find the two links back to the original report using nothing more than information on the chart itself and Google.

The tools are there to verify the information you see but most people in my experience won't bother with this. Maybe we are just all inherently trustworthy (and maybe I am just inherently untrusting!), which is a good thing I guess. However the more we rely on the Internet both as an infrastructure and a source of information, the more we are going to have to take responsibility for critically thinking about the content we are consuming.

I'm sure I don't need to explain to the reader just how fantastic the Internet is. The breadth of information is daunting. Wikipedia alone could keep me occupied for a lifetime (last night's topics included: The Kardashev scale, Dyson spheres and Thorium reactors).

All this has to be viewed through a lense of critical thought though. By all means trust information from trusted sources, but never stop questioning things and never blindly accept anything on faith when the opportunity to confirm the truth of the matter is at your fingertips.

I'll finish this post off with a quote from Vint Cerf, one of the fathers of the Internet.

Truth is a powerful solvent. Stone walls melt before its relentless might. The Internet is one of the most powerful agents of freedom. It exposes truth to those who wish to see it. It is no wonder that some governments and organizations fear the Internet and its ability to make the truth known. Vint Cerf

I use Adobe products a lot, I use Fireworks for mock ups and visual editing for web builds and I still use Dreamweaver as my IDE of choice. Shadow seems like it is going to be a tool that I quickly add to my collection.

Shadow is a tool that lets you connect your main computer with as many iOS or Android devices as you wish, via a Chrome extension. You install the browser extension and the corresponding Play/Store app for each device and then sync them together via the settings interface.

Once all the devices that you want are sync’d together any website that you view in Chrome on the main computer will be automatically loaded on the connected mobile devices.

This is somewhat of a revelation to me, testing on an HP touchpad (with Android installed) and with a Samsung Galaxy Nexus (also Android) it worked flawlessly. The obvious benefit for front end development is the speed of testing on multiple devices. Instead of typing in the address on each device and waiting for it to load, making a change and re uploading, waiting for it to load again. You can just refresh your main computer and all the devices get the updated code.

Shadow also comes with remote debugging built in, so you can bug test the code on the devices from the desktop.

This video gives a great demonstration of Shadow in action

The only major downside to Shadow at the moment is its lack of support for local webservers. It is apparently possible to get it working with rooted Android devices (I’m not really willing to root my shiny new baby), though not with iOS devices, hopefully this feature will be added in the future.

As Nomad moves into more responsive website building, I can see Shadow being a regularly used testing tool and my first impression of it is excellent.

Personally, I'm loving it! It works cross platform so I've got it running on my MacBook Pro and my Ubuntu box. The multi-point text editing and everything via search interface are both brilliant features.

Knowing the short cut keys on Mac and Linux / Windows is essential.

Installing the package manager is essential for getting started as is code completion.

If you haven't come across Zen Coding before it's worth watching the video. There's a Zen Coding package available for Sublime and if you like Zen Coding but don't like Sublime then there's probably a pluign for your favourite editor.

As web developers we tend to use a lot of external libraries, the Fetch plugin helps keep track of the latest versions of those libraries.

First a bit of background.

Xamarin are mostly made up of the original Mono developers from Novell. Miguel de Icaza founded Xamarin after Novell decided to end its involvement with Mono and made the developers redundant.

MonoTouch a set of tools which allows C# to be compiled and run on iOS devices. It provides bindings for the native iOS libraries and a runtime for running Mono code on iOS. It's developed and sold by Xamarin who also provide MonoDroid for Android. You know, in case you want to leverage your existing C# skills or codebase across multiple platforms.

OpenGL is a long running framework and API for low level manipulation of a graphics device. It's been around for years and is available on most (all?) platforms. OpenTK provides .Net / Mono bindings for OpenGL..

In the past I've done a lot of C# development. I'm not overly fond of ASP.Net (though the MVC Framework is getting better and better, but that's a whole other post) but .Net and Mono as a whole are brilliant. So when I needed to develop an iPhone app MonoTouch was the obvious choice.

There was still a learning curve involved with creating something different in a completely new environment. MonoTouch provides a one to one mapping with the underlying iOS API's so I still had to learn about Apple's flavour of MVC, but it's way simpler than picking up a new language, with all its quirks, at the same time.

OpenGL has been around for years, I found a lot of old or conflicting tutorials available online, but finding something definitive was tricky. As well as that there are quite a few different versions of the API. OpenGL ES2 is very different from OpenGL ES1.1 which is very different from full blown OpenGL. The OpenTK bindings are also slightly different as the API takes advantages of some of the features the C# language provides e.g. method overloading.

So what follows is a quick getting started guide to OpenGL ES1.1 on the iPhone. This is still very new to me (< 6 months) so there's probably a lot of room for improvement. If you spot anything I'm doing that's obviously stupid please let me know via a comment here or tweet at me via Twitter.

Initialising OpenGL

OpenGL is incredibly low level which makes it both very flexible and very easy to mess up. It also acts as a state machine, so once a state is set it remains in place until you unset it or set something else which will unset it. Changing states can be slow, so if you need to change states frequently it's best to keep track of the states yourself and only reset them when they actually change.

This is assuming you're rendering a 2D space rather than 3D so some of the sample code here won't apply if 3D is your thing.

First up...

// disable depth, lighting and alpha test as we won't need them
GL.Disable(All.DepthTest);
GL.Disable(All.Lighting);
GL.Disable(All.AlphaTest);

// enable alpha blending so alpha transparency in PNG's can be used
GL.Enable(All.Blend);
GL.BlendFunc(All.SrcAlpha, All.OneMinusSrcAlpha);

// enable texture and vertex arrays to allow rendering of images
GL.EnableClientState(All.VertexArray);
GL.EnableClientState(All.TextureCoordArray);

// set a base colour and a screen clear colour
GL.Color4(Color.White.R, Color.White.G, Color.White.B, Color.White.A);
GL.ClearColor(1f, 1f, 1f, 1f);

The next thing to do is define the co-ordinate system to use and the mapping between the OpenGL co-ordinate system and the view port.

// initialise OpenGL
GL.MatrixMode(All.Projection);

// reset the model and projection matrices
GL.LoadIdentity();

// this sets up the OpenGL co-ordinate system
// the arguments are: left, right, bottom, top, near z, far z
GL.Ortho(0, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height, 0, -1, 1);

// set up the display area to render on
// the arguments are: x, y, width, height
GL.Viewport(0, 0, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height);

One interesting thing to note with the co-ordinate system is the original Apple phones, up to the 3GS, had a screen resolution of 320x480 pixels. These dimensions are retrieved using:

var w = UIScreen.MainScreen.Bounds.Width;
var h = UIScreen.MainScreen.Bounds.Height;

The 4 series of phones have double the screen resolution of the older models. To allow older apps to work with newer phones the 4 series use the same co-ordinate system as the older models but treats each unit as being two pixels. So the width / height properties will report the same value on all iPhones. With OpenGL we can set the co-ordinate system how we like. In the example code I've used a one to one mapping of the co-ordinate space to the view port. This would make for simpler code in the long run but will cause blurring if you're loading hi-res images for the 4 phones.

If you want to take full advantage of the hi-res screen you can change the ortho call to:

GL.Ortho(0,
	UIScreen.MainScreen.Bounds.Width * UIScreen.MainScreen.Scale,
	UIScreen.MainScreen.Bounds.Height * UIScreen.MainScreen.Scale,
	0, -1, 1
);

This will use the full screen size of the phone for the co-ordinate system but you will need to handle the different sizes in the rest of the code.

Next time, loading images.

I'm actually talking about social causes. Specifically technology companies and how we can help alleviate the problems our communities might face.

Any sufficiently advanced technology is indistinguishable from magic. Arthur C Clarke

We live in a golden era of personal technological marvels. There are things we take for granted now, such as mobile touch screen phones, instant global communication and GPS mapping. These would all seem like voodoo of the highest order to a person even 30 or 40 years ago.

If you are fortunate enough to live in the '1st' world, chances are you have at your fingertips more information than you could digest in a lifetime. 99% of your questions can be answered with no great sweat.

Most of this is facilitated by technical workers, companies and agencies. They build the websites and applications that disseminate the information you are after. They also build the browsers and the operating systems that run on your machine. They built and designed the machines too.

Agencies

The role of your typical web agency is the one I'd like to focus on here though.

Web agencies make a lot of money from essentially, producing brand driven websites for companies without the technical skills in house to do it themselves.

Firstly, there is nothing wrong with making money, that's not the message here at all.

However, making money isn't the be all and end all of any professional activity. We all need money but we also need more than that. For Nomad the 'more' in question was a sense of community, equality and ownership. We've worked for other people, guided by their philosophies, and whilst we took a lot from those experiences we felt it was time to take control of our own careers. 

Having decided on this course of action we started to look into our options regarding how our company should be set up. One option we came across was a cooperative. This seemed to satisfy all our criteria for how we would want to run our company, namely:

• Equality of ownership
• No employees, just members
• Transparency
• An awareness of the local community, and our place in it

These and more are encapsulated by the guiding principles cooperatives manage themselves by, the Rochdale Principles.

Locally speaking...

The last item on that list above is 'an awareness of the local community, and our place in it' or to take the relevant Rochdale principle: Concern for community

Now this can manifest itself in many ways, but the main way we've chosen to pursue it is by donating our skills to those who have the need of them but lack the resources to hire us.

Agencies, and agency workers as a whole, spend a lot of time playing with the next big thing and new technology. We focus inwards into our community a hell of a lot - sometimes I feel to ours and others detriment. Whilst this is a natural and required state of being for us, I think we can all afford to face outwards a little more.

Going back to my earlier Arthur C Clarke quote, one of the reasons that we focus inwards is (I think) that because of the nature of what we do and the fact that not many people outside of our community can understand it, it's just plain easier to be understood when talking to others who do understand.

The march of technology carries with it the capacity for enacting huge social change. A few large scale examples:

• The Khan Academy - mass education, on a global scale
• 38 Degrees - organising and prompting action on large, national issues
• For better or worse (mainly worse), the riots of 2011 in the UK were organised via social media sites such as Twitter

However it's not really on this scale that most agencies operate, even if they would like to. Luckily in order to make a change you don't need to operate on this scale or come up with the next big idea.

Remember, what is simple and routine for us can be eye opening and out of reach for those without the technical skills to do it themselves.

Lend a hand.

Without naming names or subject area, Nomad recently took on some work pro bono for a support group. They needed somewhere online for story sharing, discussion and information dissemination - basically a CMS controlled website with a forum. This wasn't a difficult thing for us at all, but it was completely unachievable for our client who did not have access to anyone with the technical expertise to help them.

A small amount of effort on our part has, we'd like to think, made a huge difference to them.

A lot of web agencies do similar work and I would bet that most, if not all, have been approached with a similar need and carried out the work at their own cost. However I think we all can, and should, do more than that.

To paraphrase John Donne, "No company is an island". We exist as part of our communities both physical and virtual and we are part of a shared ecosystem. We've seen what happens when companies leech from that system without putting back in. We need to be aware of our responsibilities back towards that system and act in harmony and cooperation with it. Rather than just worrying about the bottom line constantly.

So what would I have companies do? Well, to start with, just thinking about the possible ways in which they can make a difference locally would be a good start. There are all sorts of charities that operate on a local level that lack the organisation and resources that the larger national charities have, but have the same technological requirements. It's not just about charities though, it's about anyone who you can help and improve things for. Be it a charity, knitting circle or playgroup.

Remember, it needn't be and often isn't about the grand (technical) gesture. Sometimes it's as simple as a little bit of education - such as spending a morning chatting with them about Twitter and how it can help keep their group connected and informed.

Beyond that though I think the key thing would be for companies to codify their community focus. To incorporate this aspect into their actual identity. So rather than being something that is done ad-hoc whenever they think of it or have the spare resource, it's simply a part of what they do and who they are. Something they actively seek to do - a core principle that guides them.

We've committed to the Rochdale principles, and through them, to our community. We are still working out the exact mechanisms by which we want to give back, but that hasn't stopped us from making a start on things. We've got more than a few irons in this particular fire and hope to expand on these as time goes on to help raise a bit of awareness.

Thanks for reading this far, and I hope this has given you some food for though about what you and your company could do. As ever, if you have any comments, please send them to us via the form below.

echo preg_replace('/&([a-zA-Z])[^;]+;/', '\\1', htmlentities('ÊËÄÁâçñöòï'));

A tutorial on advanced JavaScript by John Resig, the original author of jQuery.

The smart people at Raspberry Pi have produced a cheap, credit card sized computer.

Scalectrix style race track using quantum locking. I kept looking for the wires!

An interesting take on micro payments and flattery. I think it will need a large uptake to work but I'd like to see it happen.

A talk on OpenGL performance by Tim Omernick from ngmoco.

There was a contest after Full Frontal to write a blog post about the conference and be in with a chance to win a couple of tickets for next year's event. The deadline was the end of November so I may have missed that… Full Frontal had an interesting line up and venue – the ever good Duke of Yorks cinema in Brighton who provided free coffee and pastry treats throughout the day. Fruit was provided by Prem at Dharma Fly which is a nice touch for a conference of geeks. Prem also hosts the fortnightly AsyncJS meet up, which is worth checking out if you're ever in Brighton.

I'm not going to go into too much detail about every talk, there is a speaker line up and schedule available which outlines the talks, so I'll just go over the highlights for me.

CoffeeScript Design Decisions

by Jeremy Ashkenas

CoffeeScript is a language which can be "compiled" to JavaScript and is intended to hide JavaScript's warts. I've been aware of the language for some time but have never experimented with it as it seems like a bit of a novelty. I already know JavaScript, so why would I learn another language to write JavaScript for me?

Jeremy's talk really opened my eyes to what the language has to offer. It's heavily Ruby influenced with the same "everything is an expression" philosophy, meaning what would be a statement in most languages (e.g. if/else try/catch etc) would be an expression which returns a value in CoffeeScript. There are some very nice features, such as list comprehensions and splats, which would save a tonne of typing. Unfortunately, while I feel I now "get" CoffeeScript, I still don't think I'd use it. What I'd love to see is CoffeeScript used as an independent scripting language outside the browser à la Perl or Python.

Web Based Code Editors

There were two talks in this series, the first by Marijn Haverbeke who built CodeMirror, the second by Rik Arends the CTO of Cloud9 IDE.

Marijn talked about the technical difficulties of implementing a code editor in HTML and JavaScript and his various attempts moving from an IFRAME with designMode = "On" to the contentEditable attribute to finally faking it by building his own caret and text insertion methods. The talk went in to a lot of detail concerning the pitfalls and performance issues involved with creating this kind of system. I would honestly rather see something like CodeMirror built into a CMS than TinyMCE at the moment.

Rik showed us a demo of the recently released Cloud9 IDE. This is something else I've come across recently, but haven't really had a chance to delve too deeply into. As web developers we're pushing more and more types of software online in some form or another. Except for IDE's. We tell people the web / cloud (if you prefer) is the place that all software should live but we don't practice what we preach. Cloud9 are changing that! The editor itself looks pretty sweet plus they're now adding in git and github integration to complete the service.

Beyond the Page

by Glenn Jones

Glenn Jones is a developer based in Brighton and founder of Madgex, a provider of job boards. He showed us a combination of browser innovation and semantic web niceties with web intents included. He showed us a couple of demos, including dragging semantically marked up contact info between Chrome and Firefox. When the data packet lands on the second browser it automatically parsed the content and searched for related info about that contact. Very impressive and well worth checking out his Ident Engine.

All in all Full Frontal was a fantastic day.

I noticed with interest earlier this month the news that Berg (Design consultancy) have announced the impending availability of their Little Printer – a small newpaper printer for use in the home. It's going to be based on their Berg Cloud – a system for controlling (smart) products from the Internet.

This is just the latest in a line of products and ideas which are acting as vectors for making the Internet less about chunks of data, and more about how things interact. Where the paradigm was predominately computer and desk based, the advent of mobile technology has gotten people used to having the Internet with them all the time. You hardly hear anyone ask "Are you online?" anymore – the assumption being that everyone is.

What specifically interests me is the fact that everyday objects are becoming more aware. It used to be that the example trotted out at this stage would be a fridge that was "Internet aware" and could order milk before you run out. Whilst these undoubtably exist, they aren't really the level of object that is subtly leading the way. Things like the little printer won't even register as Internet aware for most people – they are just things that perform a function. The Internet is fast becoming less important in people's perception – the same as people don't think about the gas infrastructure or the sewer system. It's just a hidden layer of complexity that provides them services.

We've already seen this merging of the Internet with the everyday with QR codes, which are now used as hyperlinks between offline and online content.

Bruce Stirling, the author, coined the term Spime to describe an object that:

... can be tracked through space and time throughout the lifetime of the object Bruce Stirling

We aren't far off. Adidas have recently released a football shoe for amateur players called the Adizero which features their miCoach technology – which is an update on the Nike+ tracking chip, but the miCoach provides data on a wide range of metrics such as average speed, maximum speed, number of sprints, distance at high intensity levels, steps and stride all via its built in 3D accelerometer.

If you couple this movement towards ubiquitous Internet and more aware objects with the growing number of open source hobbyist electronics and manufacturering projects, such as Arduino and Makerbot, then we are moving towards a very exciting period.

Hopefully the coming year will see both an increase in the number of smart home products and an acceleration of pace of development of new and interesting ideas. Additionally, a bit of spare time so I can hack around with a few of these things wouldn't go amiss :)

function uniqueId(len) {
	var tokens = "abcdefghijklmnopqrstuvwxyz0123456789".split("");
	var id = "";

	for(var i = 0; i < len; i++)
		id += tokens[Math.floor(Math.random() * tokens.length)];

	return id;
}

Oh and it really needs to look the same in IE6. That's ok right?Your client

We've all been there, you've built a gorgeous website, using the latest CSS techniques, it looks perfect in Safari, Chrome, Opera, FireFox and Internet Explorer 9. You're awesome!

Then the client says, "It doesn't work on Sally's computer." You know what that means, you can sense it. You ask what browser Sally is using. IE6 wasn't agreed at the start. "But Sally has to sign it off and it doesn't work". So you fire up IE6, shaking fingers slowly punching in the url. You hit return.

You turn your face to the sky and yell obscenities at whatever deity you do or don't believe in and resign yourself to the headache of figuring out just how IE6 has broken your baby.

How do you avoid this issue? I'm going to give you a comprehensive run down on how to build in such a way that IE6 issues should be minimal.

Is IE6 really a requirement?

As a technical company, the sites we usually build come to us with a design completed and a brief written. While this makes processes easier for us, we prefer being involved in the planning of work. As a designer / developer who is involved at the start you can more easily manage client expectation and judge client needs.

You can take the approach of Andy Clarke. His universal stylesheet for IE6 is a great idea, if your client is happy with that. So far we haven't found a client who is.

The reality is, the only people really still using IE6 are corporations who had in-house apps built ten years ago. It would cost these companies lots and lots to get everything updated in terms of hardware updates, software licenses and man hours. It's a tough cost for them to justify when the system still works.

If your client has their own clients and they are of this corporate ilk, then it's probably best for your client that you do support IE6, on the other hand, if they run a blog about Guinea Pigs then chances are they don't need IE6.

As for us.

We put our browser support restrictions in our contract, it states that we will build for the latest generation of browsers and that that is all that is included in the quotation. If they want IE6 support it will be extra. Nine times out of ten, they do not ask for IE6 support.

Testing in IE6.

So how do you get your hands on IE6 to test? Chances are if your computer (or OS) is less than 5 years old it will not have shipped with IE6 on it (IE7 shipped in 2006). Well you could uninstall your current version of IE and install IE6 if you are on windows XP. But if that sounds like a good idea, you are probably ready to be carted off by those men in white coats.

You could test using a browser site such as the ones found in this search, however in my experience these are really slow and your site needs to be visible to them. If you are building on a local setup, you'll have to upload somewhere in order to see the results.

You could get one of the programs that are out there such as IETester. In my experience these programs are buggy, and inconsistant with what they display. I don't trust them to give accurate results, if you do, they are a good way to test all the versions of IE easily.

The way I test is to use a Virtual Machine (VM).

For those that don't know VM software allows you to run another operating system inside of your own. So I can run Windows XP in a window on my Windows 7 system.

These are available for all operating systems. At Nomad we have the following preferences.

• Windows : Microsoft Virtual PC
• Mac : Vmware Fusion
• Linux : Virtual box

Then you need a virtual hard drive to load into the virtual machine, luckily Microsoft provide this for us. (for windows at least – Google will more than likely provide resources for other OS's)

http://www.microsoft.com/download/en/details.aspx?id=11575

Now you can load your virtual HD into the VM software and test with IE6 to your heart's content.

Building for an easier IE6 experience.

There are plenty of ways to make the IE6 experience easier. I don't really like to use hacks in our CSS. Also we like to keep HTTP requests to a minimum where we can.

To this end I use this technique from Paul Irish to add a class to the HTML tag if the browser is an older version of IE than IE7.

<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->

Then I prefix any styles that I need to overwrite at the bottom of my main stylesheet.

For example.

body p {
   color:#333;
   font-size:100%;
}

//All my other styles

.ie6 body p {
   color:red;
}

Embracing HTML5 is great and there are a couple of scripts / shivs out there that will make the experience almost the same in IE6.

The ones I include off the bat in every build are.

Remy Sharp's "shim" that makes IE6 recognise the new elements in HTML5. You could do this yourself by creating the elements in the DOM, but since Mr Sharp was kind enough to go to the trouble for us, why repeat his effort? (Thank you Remy!).

Then I like to add selectivizr. This allows you to use advanced CSS selectors such as :nth-of-type in the older wonkier versions of IE. It can be used with various libraries including jQuery, but the one that provides the most selector support is DOMAssistant. I don't mind including that for IE6 given the benefit of the wider array of available selectors and the cleanliness of the HTML it leads to. Plus we just saved an HTTP request with our css.

Here is the code snippet that I use to include all of this.

<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js""></script
><![endif]-->

<!--[if lte IE 8]>
<script type="text/javascript" src="/assets/js/DOMAssistantCompressed-2.8.js"></script>
<script type="text/javascript" src="/assets/js/selectivizr.min.js"></script>
<![endif]--> 

Additionally I usually use a reset stylesheet, or a normalise stylesheet and CSS PIE which lets IE6 handle some of the shiny css3 that we love.

Debugging.

So hopefully now you can build and test in IE6, what happens when you open it and something is still broken?

I would always recommend having IE6 open as you build and every now and then check it. At least check it once you have your structures built, it's usually here that I find IE falls down, on layout, not on actual styling.

Your first stop should be your HTML, IE6 does not handle a missed closing tag anywhere near as gracefully as modern browsers do. If your layout explodes and you have used the scripts above, I would almost guarantee that a missed closing tag is the cause.

Beyond that my testing process usually goes as follows if it's a layout issue.

• Note the styles that are applied to the element.
• Remove the Margin and Padding – Did this fix the break? If it did then add them back in and tweak the values and width to get the result you need.
• If it didn't, add different horrific background colours (MAGENTA!) to the container and any children to better see where the elements lie. Some people use borders, however if you are on a tight space build, the 2px of width added by the border can hide that a problem is fixed.
• Tweak layout and width of elements until fixed.

Building in IE6 doesn't have to be a huge pain anymore, while I don't believe we should be shouting about how easy IE6 is to support (because it isn't) I believe that if the client needs IE6 to be supported, then that's part of our job as professionals to do that. You can manage expectations by telling them it's a 10 year old browser that was never built to handle modern coding and charge extra for the additional effort.

Hopefully this post will be useful to you, if you have any stories of IE6 being a pain, or if you use any techniques to make developing in IE6 eaiser, please share in the comments.

This one is going to be short and sweet. We're going to create our first local Git repository (repo).

Fire up your Terminal and go to the directory you wish to use as your repo. In this case I've create a directory called 'my_project'.

cd ~/Sites/my_project

Now we're located in the directory we wish to use as our repo, lets go ahead and create it:

git init

And that's it, you should have recieved the following:

Initialized empty Git repository in /Users/macbook-pro/Sites/my_project/.git/

So, we now have our new empty repo. So lets add a few files to it. Firstly, create some files:

touch index.html
mkdir css
touch css/screen.css
mkdir js

We've created an index.html at the root of our repository, and a new directory for our stylesheets, with a single file in there called screen.css, we've also created an empty directory for any future javascript we may need to add.

Lets go ahead and add all of that to our repository:

git add *

We're using a wildcard (*) to add everything to the repo here, but you could have quite easily added each file individually. Lets run a status to see what we've got:

git status

Should return:

# On branch master
#
# Initial commit
#
# Changes to be committed:
# (use "git rm --cached <file>..." to unstage)
#
# new file: css/screen.css
# new file: index.html
#


We can see what files are going to be committed. At this point we refer to the files as being 'staged', in that they'll be committed at our next commit. In Git, we stage, and then commit, as opposed to SVN's straight commit.

Also notice that there's no mention of our 'js' directory in the commit. This is because Git tracks files, and not directories. In this instance, if you want to include the empty directory into the commit, you could do this little trick:

touch js/.gitignore

This will create a Git Ignore file, informing Git of which files to ignore, and more importantly NOT ignore in this case. Open, up the .gitignore file with your favourite text editor, and enter the following:

!.gitignore

We're telling Git to NOT ignore it's own 'ignore' file in a roundabout way. So, now run another status check:

git status

# On branch master
#
# Initial commit
#
# Changes to be committed:
# (use "git rm --cached ..." to unstage)
#
# new file: css/screen.css
# new file: index.html
#
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
#
# js/


And you'll see the empty directory has now been added to the repository (strictly speaking, it hasn't, but the ignore file has).

Before we commit we need to stage the 'js' directory and its contents:

git add js

Now all our files are staged, we can go ahead and commit:

git commit -m "Initial commit"

If you've used SVN before, you'll see how familiar this is. We use the '-m' flag to tell Git we'll be adding a message to the commit which will show in the repositories history log. Running this command should show the following:

[master (root-commit) 89a7059] Initial commit
1 files changed, 2 insertions(+), 0 deletions(-)
create mode 100644 css/screen.css
create mode 100644 index.html
create mode 100644 js/.gitignore


And there you have it, your first commit. If you run a status check again you can confirm everything has been added successfully:

git status

# On branch master nothing to commit (working directory clean)

Next instalment will explain how to set up a remote repository and link our local to our remote.

Everyone who uses the internet is familiar with spam and the problems it causes. Most people's familiarity is through its intrusion on email, but since running the Nomad site we've had to deal with a lot of comment spam. It goes in phases but we receive something like 10 to 20 spam comments per week all of which get flagged so don't appear on the site.

Our initial strategy was to delete spam comments as they appear. A notification email is sent whenever a comment is posted and while working I'm never too far away from a computer so spam comments wouldn't appear for too long on the site. Of course, having to delete spam comments quickly became tedious!

There are a number of common methods for blocking spam comments — forcing the user to register with the site, hiding comments until approved by a moderator, CAPTCHA images, etc. Whatever method I decided on I knew it had to require as little thought from the end user as possible. I don't want to stop the few legitimate comments I am getting in my effort to stop spam.

That cuts registration from my available options and, I would argue, CAPTCHA. While CAPTCHA is becoming more familiar to internet users and a lot of good work is being done by reCAPTCHA it's still an impediment to the commenter. This leaves comment moderation, but that feels too close to my current system.

After some research I came across honey pots as a security concept and found a lot of information in the article Stopping spambots with hashes and honeypots by Ned Batchelder. Using programming cunning to prevent spam is a bit more like it! I decided to try implementing the ideas outlined in the article one at a time, starting with a honey pot.

The honey pot idea is very simple: provide something enticing for the spambot but hide it from the user. Spambots vary in their sophistication but most operate by trying to fill relevant information into the form e.g. a field named 'email' will be filled with an email address. Hidden fields are left untouched as these often contain information vital to the form submission. The trick to the honey pot is that spambots will fill in all text fields.

With this in mind I created an additional text field in the comment form with the name of 'lastname'. It's randomly inserted into the form each time it is generated and removed from display by using CSS absolute positioning within the stylesheet. As far as a spambot is aware the field is there on the page — you can see it by viewing the source code — but doesn't appear to the end user. If the field is filled in when the form is submitted the comment is flagged as spam and not displayed on the site. I can then delete or allow the comment as I see fit. My only concern with this method is accessibility: screen readers will probably display the field. Currently the field is labelled 'Input not required' which I hope is enough to stop legitimate users from filling it in.

Over the past 3 months this technique has worked incredibly well: I've had a 100% success rate so far.

This article was originally posted at we-evolve.co.uk on 1st November 2009.

Nice little CSS3 hover effect for carousel buttons.

Responsive images without Javascript - not really very practical but an interesting hack none the less.

Nice tool for testing responsive sites - just don't look at ours, responsive build in the pipeline!

An excellent video on quantum locking. and some info on how it works.

Android device fragmentation.

Any Java related examples should be taken with a pinch of salt as I haven't done any in about 10 years and I'm sure the language has moved on since then.

Oh and I assume you know how to programme already, so no beginners stuff here.

Classes

(I'll skip quickly through this as you probably know it)

Classes are a template for creating objects. They define properties (values, variables) and methods (functions, actions).

In C#:

public class MyClass {
	public string MyProperty = "";

	// constructor
	public MyClass() {

	}

	// destructor
	public ~MyClass() {

	}

	public void MyMethod() {
		// ...
	}
}

And creating an instance of that class in original C# syntax:

MyObject o = new MyObject();

Since version 3 of C# you can do:

var o = new MyObject();

This is a syntactic nicety which cuts down on a bit of typing. In PHP this would be:

class MyClass {
	public $myProperty = "";

	# constructor
	public function __construct() {

	}

	# destructor
	public function __destruct() {

	}

	public function myMethod() {
		# ...
	}
}

$o = new MyClass();

Constructors and destructors are special methods which are called when an instance of the object is created or destroyed. The constructor is what you're calling when you do new MyObject(), desctructors are generally called behind the scenes rather than directly. So if you do:

var o = new MyObject();

o.MyMethod();
o = null;

The destructor will be called some time after the o = null part. In C# / .Net this is when the garbage collector kicks in, in PHP it's generally when the script finishes running.

Access Modifiers

The keywords public, protected and private can be assigned to methods, properties and classes.

Public

Anyone can call that method on the object (e.g. o.MyMethod() or $o->myMethod() in PHP).

Private

Only that instance of the class can call the method or access the property. It's completely inaccessible outside of itself.

Protected

That instance of the class can access the method or property, inheriting classes can access the method or property and other instances of that class can make use of the property or method.

e.g.

public class MyClass {
	// ... snip ...

	// the "MyClass o" part means only objects which are of the type MyClass
	// can be passed to this method
	public void MyMethod(MyClass o) {
		o.MyOtherMethod()
	}

	protected void MyOtherMethod(MyClass o) {
		// ...
		// could call o.MyOtherMethod here as they're both instances of MyClass
	}
}

Inheritance, Encapsulation and Composition

Classes can inherit from other classes, which means they get to use all public and protected methods of the parent class. Inheritance can go any number of levels deep, but it's generally a good idea to not go too deep as changes in a base class can have a knock on effect further down the inheritance chain.

One of the key concepts of OO programming is code-reuse and this is covered by inheritance and partially by encapsulation and composition.

A class has access to all public and protected methods and properties of its parent classes. So...

public class Controller {
	// in C# you have to declare the type of a property
	// i.e. the class it's going to be
	// in PHP you don't need to so this line would be "protected $model;"
	protected Model model;

	// ... snip ...

	private void ValidateModel() {
		// do something with model
	}

	// in C# you need to define the return type (class) of all methods
	// in PHP you don't need to so this line would be "protected function render()"
	protected string Render() {
		// generate template from view
		var view = new View();

		ValidateModel();

		return view.RenderTemplate(model);
	}
}

// the colon in C# signifies inheritance, in PHP / Java you would use the extends keyword
public class ArticleController: Controller {
	public string Index() {
		// create a new instance of the protected Model class
		model = new Model();

		// ... snip ... load up a list of articles and add stuff to model

		// call the protected Render method from the Controller class
		return Render();
	}
}

(in PHP the class declaration would be: class ArticleController extends controller {})

Usage would be:

var articles = new ArticleController();

articles.Index();

There are a few important things going on here.

The ArticleController class inherits from Controller and gets to use its protected Render method and its protected model property. It doesn't get direct access to the private method but that method is still called when the Render method is called.

A class should have one area of expertise and should only know about the minimum stuff it needs to know. It should expose as little of itself as possible. This is especially true of properties but also applies to methods. We wouldn't want external code to do something like:

articles.Model = new Model();

This could create all sorts of havoc with our class! This is known as encapsulation, and basically means keep yourself to yourself.

A class should have one area of expertise so in this example it would be wrong to add a ConnectToDatabase method to either Controller or ArticleController. It wouldn't be wrong for ArticleController to create an instance of a Database class and make use of that. This is known as composition. The idea being you compose one class from other classes, so you create more intricate functionality from smaller parts. You can see this within the Render method – Controller is making use of the RenderTemplate method of the View class.

The reason we build up class functionality from smaller classes is to allow reuse and to allow the code to be changed easily. If you need to render a template outside of the Controller class you can by creating your own instance of the View class. If the Controller handled the template rendering itself we'd be kind of stuck. If we want to allow a different template rendering we can create a specialised version of the view class and change Controller to allow a different View to be created. This would be simpler than rewriting the Controller class with a different type of rendering method or even many rendering methods.

The one area of expertise thing also applies to inheritance. A class should extend the functionality of its parent class. The ArticleController to Controller inheritance works because ArticleController is a more specialised version of Controller. It would be wrong for Controller to inherit from Database as a Controller isn't a specialised version of a Database.

The classic example of this is a car. You can have a Car class, which all have similar properties (number of wheels, number of doors) and there are many different types of car (instances) some of which are better (inheritance) than a basic car. But core parts of a car (e.g. engine) are built up using composition, because you wouldn't want to go to the trouble of building an engine and then find you can only use it one type of car.

Abstract Classes

Abstract classes (and interfaces) took me a while to get my head round but really come into their own when we start talking about polymorphism (up next!).

Abstract classes are classes which you can't create an instance of. They let you define a whole load of functionality that you know is going to be reused but not necessarily define all of it. The way I always think of it is with humans and animals. Humans are quite similar to apes and reasonably similar to dogs and cats. We all breathe in the same way but we walk and talk in a very different manner. So we all share a base class of Mammal but it doesn't make sense to create an instance of a Mammal (what the hell would that be?!?). So...

public abstract class Mammal {
	public void Breathe() {
		// do complicated stuff with lungs and ribs and whatnot
	}

	public void See() {

	}

	// let inheriting classes deal with these
	public abstract void Walk();

	public abstract void Talk();
}

It doesn't make sense to create an instance of a Mammal class but it does make sense to inherit from Mammal and create a Dog class or a Human class. You get all of the functionality of the Breathe method but are free to implement the Walk and Talk methods however you choose.

Inheriting classes must implement the abstract methods, unless they're also declared abstract. So you could create an abstract FourLeggedMammal class which implements Walk and then have Dog and Cat classes which implement Talk independently.

Again, the general rule of inheriting classes being specialised versions of their base classes applies.

Interfaces

Interfaces are a little different. An interface defines a contract that implementing classes must adhere to but doesn't define any functionality. Essentially they're just a list of method / property names. The other difference is you can implement multiple interfaces whereas in most OO languages you can only directly inherit from one parent class.

While an interface isn't related to a UI, a UI can be a good example of how an interface works. If you think of a cash machine they all provide roughly similar interfaces – somewhere to put your card, a keypad, and a money dispenser. No-one cares what happens behind the scenes (it could be monkeys pushing money through the slot or steam powered or maybe someone is behind their painting each note) as long they get their money.

A programming interface is the same – it says do this, I don't care how. The syntax for an interface in C# (identical in Java, almost identical in PHP) is:

public interface IDataReader {
	string Read(); // reads something from somewhere and returns it as a string.
}

It's a common (but not universal) practice to always start interface names with an I. In C# the syntax for implementing an interface is the same as for inheritance. In PHP / Java you use the implements keyword, which I find is a bit clearer, to be honest, especially when you're inheriting from something and implementing an interface at the same time. Compare:

class MyClass: BaseClass, ISomeInterface, IAnotherInterface {}
class MyClass extends BaseClass implements ISomeInterface, IAnotherInterface {}

I originally thought interfaces were a complete waste of time. Why would you go to the trouble of defining a whole load of method names with no functionality? Madness!

Strong vs Weak Typing

In PHP it's perfectly acceptable to do the following (although probably not a good practice):

$x = new MyObject();

# ... snip ...

$x = 6;

# ... snip ...

$x = "Hello";

This is because PHP is a weak (or loosely) typed language. A variable can have any type and is assigned a new type based on its current value. C# and Java are strongly (or strictly) typed. Once a value has been assigned to a variable it can change value but the type of the value must be the same. So the above code rewritten in C# would cause compile errors.

In Java to create an instance of an object you have to do:

MyObject x = new MyObject(); // notice this looks exactly like the original C# form

You declare the type of the object, then the variable name, then you call the constructor. C# introduced something called inferred type which means if the compiler can figure out the type it will. This saves on actual typing with the keys. It looks like:

var x = new MyObject();

You can still use the longer form in C# if you want and sometimes it can be useful to do so, e.g.

var x = this.MethodWhichReturnsSomeType();

Types also need to be declared when you're passing parameters to methods and as return types from methods. In C# when you do:

public bool MyMethod(string s)

You're saying the method must be passed a string and will always return a boolean value. If you had:

public void MyMethod(string s)

Then the method will never return a value.

In PHP you can't specify the return type and you don't have to specify the parameter type. In PHP5 you can specify the parameter type if you want, e.g.

public function myMethod(MyClass o)

You can't specify the parameter type if you want it to be a string, bool, array or number in PHP. It's for classes only.

The pros and cons of strong vs. loose typing is a whole long winded discussion in itself. Strong typing protects you against things like x = "6" when you mean x = 6 but sometimes it can feel like you're fighting against the type system.

Polymorphism

This is where it becomes a head fuck.

Polymorphism means any object can be treated as its own type (the class it's created from), or as the same type of any classes it inherits from, or as the same type as any interface it implements.

That's a horribly convoluted sentence but what it means is if you have a method which accepts a Controller instance as a parameter you could use an ArticleController (or a BlogPostController or a FormController etc.) in its place.

Going back to the Controller example and its Render method, lets tweak the class a little:

public class Controller {
	protected Model model;
	protected IView view;

	// ... snip ...

	protected string Render() {
		// view is now created somewhere else, probably in an inheriting class

		ValidateModel();

		return view.RenderTemplate(model);
	}
}

Where IView is the interface:

public interface IView {
	string RenderTemplate(Model model);
}

We may have an HTMLView class which implements IView or a PDFView which does the same. Both have radically different ways of rendering a template and radically different implementations of the RenderTemplate method. They probably also have way more methods than just RenderTemplate but as far as the Controller Render method is concerned it's dealing with an IView and it can only make use of the RenderTemplate method.

(this example is becoming a bit contrived as there's probably a lot of shared functionality between something which renders to HTML and something which renders to PDF, I'd probably have some sort of abstract base class which both HTMLView and PDFView inherit from...)

This also applies to inherited classes and abstract base classes. In our earlier Mammal example with the shared Breathe method and the abstract Walk and Talk methods, anywhere an instance of a Mammal is expected an instance of a Human, Ape, Cat, Dog or Sheep could be used.

Say, we had a method on another class which involved walking in some form:

public void DoWalk(Mammal mammal) {
	mammal.Walk();
}

We could pass anything which inherits from Mammal into that method and it would work fine. As far as that method is concerned it's got a Mammal, whether that mammal is a cat or dog or whatever.

What if we also had a Crab class which has a Walk method? I'm not sure what a Crab is but it's not a Mammal (some sort of bug?). We currently can't pass a Crab instance to the DoWalk method even though it's perfectly capable of walking. This is where interfaces are incredibly powerful. We could have an interface such as:

public interface ICritter {
	void Walk();
}

And change Mammal to implement this interface, which Crab can also implement. Now if we change our method to:

public void DoWalk(ICritter critter) {
	critter.Walk();
}

The method can now be passed a Crab or a Sheep instance and it will still work, even though they don't have a shared base class. It also means if we change the inheritance structure at some point (maybe Sheep aren't Mammals either) or add new classes (a Robot class) we can still pass them to the DoWalk method because they can all implement the ICritter interface without messing with their inheritance tree.

That's quite a sizable topic and it took me a while to properly understand the power behind it so if you have any questions, let me know.

Those really are the core concepts behind OO programming:

Inheritance, encapsulation and polymorphism.

Agencies

After education, which I dealt with in the previous post, it is my personal belief that the other thing that is wrong with our industry are the agencies themselves.

Specifically the main issues with them are they are too big, too bloated and about as maneuverable as a blimp in high winds.

Too big

Agencies come in all shapes and sizes, but the big boys are big. Some can be very big indeed. With size comes overhead - be it the nice big office space or the added layer of administration people to help run the company. A large company like this is still easily able to be successful (loads do it) but often an agency is built from humble beginnings, and the people running it aren't necessarily interested in the processes required at this larger stage in their development. You can't just keep hiring people, pretending you are still a small company with big aspirations - you need to change and modify your working practices to accomodate what you have become.

Failure to do this leads to...

Too bloated

The agency isn't small anymore, it's started employing more and more people - particularly in areas which are needed but aren't directly chargeable to a client. Additionally these people are just employees and pull a salary from you. Most are brilliant, some are good, and a few are... unmotivated and "jobbing it". They are all a cost, and whilst they help you day to day and you can't do without them, you also don't have the time to monitor them too closely. You don't have an appraisal process either, you grew too quickly, so you have no metrics for how individuals are doing in your agency.

People can't be expected to give you 100% every day, but how do you know they are giving even 70%? or 50%? What if you do notice that person A isn't really invested in ongoing collective success? How do you deal with that person?

What happens if they just aren't doing a good job? You haven't measured this, so you can't arbitrarily decide to get rid of them - they'll take you to a tribunal. How do you deal with this situation?

Not agile

Meanwhile, your production chain is longer. It's no longer a designer/developer talking to a client, it's a designer talking to a project manager, who together with account management are talking to your client. You are getting people to write specifications for quoting in order to ensure jobs are done correctly, but the client is changing their minds constantly - and they are a huge brand and potentially very lucrative, so you suck it up and ignore the proper workflow.

Meanwhile, because of your new size, you need bigger and bigger jobs to hit your targets - the flip side being that if all jobs are bigger, they will all have a bigger impact when they disappear or go wrong. Some inevitably will.

Sigh

It's a bleak picture, and admittedly the above is an anecdotal almalgamation of the worst stories I've heard, but it's also remarkably common. The bigger an agency gets, the longer the days and the greater the internal expectation. Staff will chop and change between agencies, and the new job for a while tricks them into thinking things are going to be different, but mainly they've just shifted the issue. The people at the top are still stressed, and everyone is overworked.

The alternative

The alternative, and I can see this already happening around us, is to fracture. More and more people are starting smaller, specialised agencies which act in a modular fashion. Coming together for the bigger projects as required. This has many benefits, from being plainly more flexible and agile to keeping costs down, to improved motivation in their workers.

For clients there is little that is problematic with this approach. They would have only been using a portion of a larger agency anyway. It's cheaper this way (of particular importance at the moment) and they have direct access to the people doing the actual work. This can only be beneficial, especially in the early stages of the project where a clear understanding of the goals is key. It's just as key to run projects properly, but the discussion and specification can go a lot smoother with a clear line of communication.

For the workers themselves, motivation isn't hard to come by. They are now stakeholders in the success of their own company. They can also target the type of work that interests them and they are calling the shots. A well motivated person is a person that will do their best work. They are also rounding out their skill set: they aren't just the designer anymore, they also have to go and talk to the clients, handle the finances, push for new business etc. It's not all lovely, but the stress that is there is stress they are in control of.

I can see more and more people moving towards this sort of structure as clients lose their fear at dealing with companies that have been traditionally seen as small fry. For ourselves at Nomad we've adopted this approach wholesale. We set up the company in such a way as to ensure that we never have employees. We want to remain small, focused and passionate about what we do. We tell our clients that we are a technical agency and we don't handle anything else. If they want design or SEO though, we know plenty of others like ourselves who we are happy to work with and recommend.

That's just my take on the subject, but it's my take from many years of being on the inside of the agencies, and a few now being on the outside. I wouldn't change my time on the inside, I made great friends and learnt from some very talented people. However now I'm on the outside, I know where I would prefer to be given the choice and I know how I want to approach working in our industry.

Throughout my career so far I have on several occasions worked contract roles with very large financial corporations. There are a lot of things that big corporations do wrong and that's not what I want to get into in this post. What I want to look at is the things I have learned and how they've effected me both as a freelancer and now that I am a representative of Nomad.

Pro's and Cons

Obviously the major selling point of contract work is the pay. The pay in web development roles can be incredible if you are willing to travel to where the work is. There is of course a major draw back in that effectively your contract can be ended at anytime.

Most contracts will run for a specifc amount of time, 3 / 6 / 12 months or longer but this is the duration of the terms of the contract. Every contract I have ever seen has a much shorter termination clause usually a month or a few weeks. This will usually apply to both the company and the contractor (thought it might not be the same for both) so make sure you read your contract carefully so you definately know where you stand. Another drawback that is rare but I certainly have experienced is envy from full time staff at a place I was working. I usually try very hard to keep the amount I am earning on contract quiet, however these things usually have a way of getting around and I have experienced snide quips from salaried staff (just once).

Pace of work

One of the most massive differences to me between the work I do for Nomad now (or when I was freelance) and working in an office with a corporation is the pace of work. If I want to change something on a client's site, I update SVN, open the files I need, make the changes, commit them back in and push to live. A fast change can be done in minutes. This is not the same in a corporate environment.

I've seen developers spot a change is needed, perhaps a typo in some image based text. In order to make that change, the developer has to edit the image, upload the new image to what is more or less likely to be a staging or development environment. Get sign off on the change (which we'll get into in a minute) from one or more "stakeholders" and then move the file to the live environment and recheck it and have it signed off again on the live site. Now this process can also only take a minute, in reality it won't.

The signoff process is where I personally believe a lot of corporations fall down, you'll know this already if you read my previous blog post (On trusting who you hire). Every additional management layer involved in the sign off process increases the time to get a change made exponentially. If someone in that process is tied up, in a long meeting or away for a day then the change can sit unresolved for a long time and what should be a 2 minute fix ends up taking a whole afternoon to be implemented.

This in my experience leads to a lot of down time while in a contract role. It's not unusual to finish a piece of work, drop it into the sign off process and have to wait on it. If there is no other work to do, or the rest of your work depends on the first piece being complete you're left twiddling your thumbs. It doesn't really make sense for you to just sit there, so in these situations I usually talk to my line manager to find out if there is anything else I can get working on. If there isn't I let them know that I am free to work and then open google reader and catch up on my reading. It's easy to feel bad in this situation but I think it's important not to sit and stagnate.

Meetings

Oh boy do corporations love their meetings. An obscene amount of time gets taken up from the average day with meetings that may not really require your attendance. I don't know about you but it takes me a while to settle into my work and get focussed. Going into meetings really disrupts the development flow and makes it much harder to stay on track with the job you are trying to do.

If I could tell corporations one single thing, it would be to cancel any meeting that is not critical. 8 people in a meeting for an hour is a day of wasted time!

Working outside of work

To everyone who works a full time job AND freelances in their spare time, I salute you. Getting home at the end of a long day that's been full of meetings and hold ups, and still having the energy and drive to code is really tough.

It makes you fat!

One contract I've worked had a canteen that provided lunch for free..... enough said there, has anyone seen my gym pass?

Conclusions

If you are willing to commit to working in an office for a few months at a time contract work is pleasant and very lucrative. There are downsides that's for sure but if you can find a good company that you enjoy working for it's a great thing to try.

image sourced from Chantry Edu