Recent attempts to work smarter rather than harder have been an utter failure. As the business grows and we get busier and busier I’ve needed to look at our business practices and workflow. It’s so far not worked out so brilliantly.

I used to write a fair amount of our tools and all of the frameworks and code for our websites and applications. Originally this was because there was little option, there were no free or cheap versions of the tools we needed and the frameworks available were challenging at best. Of course this wasn’t all bad it gave me a greater understanding of the underlying technology and probably increased my coding skills far more than downloading plugins and other people’s code ever would. But, as many people pointed out it did make development a relatively slow and arduous process which in the new age of Agile Development would see me left behind.

It took a while for me to change my ways, I still have an OC like obsession with understanding exactly how everything works and will still rip a framework or plugin to pieces on occasion to make sure it does what it claims. I’m now a complete jQuery convert and massively happy with WordPress. I went halfway with PHP, I tried a bunch of frameworks but just couldn’t get on with any of them so wrote my own, it took about six months (mostly research) but works perfectly for us and allows us to put together full online applications in a matter of hours. It’s not ‘finished’ and never will be, I constantly add to it and improve it but it’s lightweight and flexible and does exactly what we need (and nothing more).

So with frameworks for php, javascript, actionscript and a shedload of standard setups for html and css I’ve embraced the agile, flexible world. Next step was to improve workflow and project management. This is where it’s all fallen down a bit. I really don’t want us to go back to the bad old ways of writing every tool ourselves, I need to sleep sometimes. I’ve spent a lot of hours over the last couple of months researching and testing project management and workflow tools and I have not found anything I would be happy to use. There’s a lot of dross out there combined with a lot of well written but feature-weak applications. The grind now is that I could have probably used the time better to have written something in-house. I still don’t want to but if I can’t find the right tools soon it may be the only option.

We now have two choices: 1) Use a whole bunch of unrelated tools in a haphazard manner, tying them together with apis where possible or 2) write it ourselves.

Working smarter and faster is fine if the quality tools are available but if you have standards you may be better off doing it the long way.

In case you may be able to suggest anything, our primary requirement right now is a decent project/task manager which supports:

• Multiple projects per client
• Client access
• Recurring tasks. This is the absolute most important feature
• A wiki

That’s it. To be fair we did find one piece of software that covers it pretty well but it was way outside of our current budget.

I was going to post this on our business blog but it’s a little too negative, although still interesting and amusing (to me anyway).

I have a minor pet hate/OCD issue: people using tools incorrectly. I’m aware that this is often a bad stance and misuse of tools and techniques in certain areas can create new concepts and push boundaries, but often it just makes life difficult. I have a very specific pet hate which I’ve given up slapping people over because it seems utterly endemic. My hate is the use of Google’s search box as your location/address bar. I have witnessed many many people who when supplied with a url to enter into their browser will go straight to the Google search box (toolbar or homepage), type the url into the search box, hit search then click the first link that comes up. Google is not (yet) the internet. I can just about bear elderly relatives doing this (just) but I have witnessed peers and colleagues (who shall remain nameless) who also carry out this horrific crime. My complaint to peers has always been that it’s a bad practice they may well pass onto their friends, clients, relatives and pets (much like herpes). Apparently it makes no difference, you end up at the same place in the end anyway.

1. You’re increasing the number of keystrokes/interactions to get to your destination. Ok, so it may help if you suck balls at spelling but is that really an excuse for things such as bbc.co.uk? You know who you are.
2. Waste of bandwidth. Yeah yeah, it’s a teeny tiny teeny bit of extra bandwidth being used. It adds up.

Recently I have been vindicated in my slightly twitchy obsession with this. We had a bit of a crisis with a client due to users complete lack of awareness of this basic issue.

A client sent out over 50,000 printed letters to it’s members (they are a charitable organisation). In the letter they included a URL for a document their members needed to download and print. Unfortunately, they didn’t inform us of this in advance. They just added a file to the server and sent out the physical letters. The URL was not massively complex, but a bit tricky, it was mixed case with a subdirectory. Something like http://www.mysite.co.uk/ourfiles/ThisDocumentV2.doc. Due to the nature of the document it was not linked from anywhere on the website itself and it was not sent out by email, private enough to not directly link from anywhere but not private enough to actually protect it.

So letters sent, we were completely in the dark about both the letters and the file, until we started to get bombarded with complaints from the client that the server was down, files were missing, we had broken something somewhere. After some very confusing communication we found out about the letters and the file. The letters had arrived that morning and the client had suddenly been inundated with complaints from users who couldn’t access the file. I requested the client forward the complaints to myself and I’d investigate.

I knocked up a standard apology email including a link to direct download the file but also asking the users if they could try doing whatever they had been doing before and supply us with a screenshot and their browser version – we supplied links to two helpful pages (I have temporarily mislaid) one which explained in very simple steps how to email a screenshot the other which displays your system info in an easy cut-n-paste format. We had a fairly minimal response including one very angry chap who informed me he wasn’t a computer expert and had no intention of sending a screenshot. From the responses we did receive it became very apparent that a lot of people* have no clue where you are supposed to type a URL. Seriously, they were sticking it literally anywhere but the location bar, anything that looked vaguely like a search box was being used to try and access this document, their search bar, Google’s homepage, the Yahoo homepage, in one case the search box in their email client.

The lesson we learned here is to, erm, make sure clients warn us before sending out 50,000 letters with a URL in. We do push for more integration with our clients and with those that want our involvement we make sure we always know what they are up to so we can assist and advise where appropriate, not everyone wants (or can afford) this level of attention and so sometimes these things happen.

We also learned that people can get really angry if you ask them to send you a screenshot.

* An awful lot of people in this client’s target market anyway.

Quick spaceship. I long for the day I can make a living drawing spaceships, robots and ducks. AND NOTHING ELSE. Done in illustrator, spaceship is for a specific project but I wanged it on a background as liked it enough to stick it on the web.

A bit more arsing about with HTML5. Purely decorative, completely non-interactive this time. An animated fountain based on one I wrote in AS3 which in turn was based closely on one from the absolutely brilliant Foundation ActionScript 3 Animation: Making Things Move! (seriously, if you need a good basis in programmed animation/interaction this book is a godsend, explained in simple terms and with a brilliant separation of concept from code so the information and tutorials can be easily applied to languages other than Actionscript 3).

View Demo.

Converting to Javascript was pretty straight forward, after all the syntax has the same origins. It’s slightly easier to achieve in Actionscript as Flash has built in the concepts of independent visual objects, wheras the canvas tag does not and so you need to roll your own, which for a simple example as this is not a problem, and I’m guessing there will be some nice JS frameworks around fairly soon which will make the job easier. Strongly tempted to convert a load of the other tutorials from Foundation AS3 to Javascript as well but not a great use of time and the author may (understandably) hunt me down and beat me to death.

The app is pretty simple, it generates a load of circles, each with it’s own direction, velocity, colour and size which move away from the center, when they are off the screen they are reset with new velocity, colour, size, etc and put back to the center again. That’s it. Here’s the code, it’s not very polished but it works…

(download the js source)

The HTML

Just the required bits…

That was easy. You just need a canvas tag. I’ve given it the original id of ‘MyCanvas’. Next up…

The Javascript

Once again, I’ve used jQuery to get things moving quickly, you don’t need to but it makes life easier.

First we set some global variables as follows:

• tId: A variable to hold the interval id. We don’t actually need this but it’s handy if we wanted to add more functionality later, and good practice (IMHO).
• cHeight, cWidth: The canvas dimensions. Will be set shortly.
• numBalls: The number of balls you wish to display. Change this if you fancy.
• balls: An array of ball objects.

Define a ‘Ball’ class. The xPos/yPos determine the ball’s current position in the canvas. vx and vy are the Ball’s x and y velocity. Wind and Gravity and horizontal and vertical force. The strangely named ’sizeWobble’ is the amount the ball radius changes each frame. The reset function sets up the ball, most parameters are randomly generated, xPos and yPos are set to the center of the canvas.

The core of the script. Wrapped up in a nice jQuery document ready handler. First we set the globals for the canvas dimensions (as used by the reset method in the Ball class). Then we loop as many times as we want balls, create a new ball each loop instance, add it to the balls array and reset it.

Once our balls are created we use setInterval to call the ‘drawBalls’ function every 50 microseconds.

This is the function that’s called each ‘frame’ by the setInterval command. First we clear the canvas. Next we get a context for the canvas. Then we loop through the array of balls. For each one we:

1. Draw it using drawCircle, passing it’s current position, radius and colour
2. Adjust it’s x and v velocity modifiers using the gravity/wind values
3. Update it’s stored position using it’s velocity modifiers
4. If it’s radius is greater than 2 adjust it by it’s sizeWobble! (the min size check ensures it doesn’t completely disappear)
5. If it is no longer on the canvas, reset it.

That’s pretty much it, the remaining three functions are helpers. clearCanvas clears the canvas by setting it’s width (must find a more logical method of doing this). randomColour returns a random colour in the appropriate format and drawCircle draws a circle to the canvas…

View Demo.

We took a day off last weekend. No work, no study, etc and went to feed the ducks on Ray Mill Island (not for the whole day, there’s only so long you can spend distributing bread to waterfowl). Was great to get away from technology and swearing for a bit, I showed Karen how to get the geese to come and take bread out of your hand (they are a lot less threatening when you are offering food) and we saw some baby geese and moorhens. Only slightly marred when we sat down with ice cream and someone’s dog came and crapped right in front of us. Lovely. Here are some pictures. (Promise to post something that isn’t just a bunch of pictures soon).

As the daily grind of reality stomps on my throat for kicks I need STUFF to help me get through the day. Here’s some awesome stuff which I will utterly fail to describe properly (how the hell did I ever run a record label).

worriedaboutsatan as recommended a couple of times by Nick. Some words that may or may not describe them: ambient, electronic, interesting, exciting, strange. My favourites are Arrivals and Arrivals Remixed. There’s plently of free stuff on their website to download and get a taste and a fair amount on their soundcloud account – worriedaboutsatan on soundcloud – including a full length live set.

Yndi Halda another great band to code to. Enjoy Eternal Bliss is just beautiful instrumental post-rock. Few reviews have rather negatively complained about lack of originality with comparisons to Mogwai or Godspeed You! Black Emperor, but fuck ‘em it’s a lovely EP, a little more accessible than a lot of post-rock and at an average of about 15 minutes a track for 3 quid there’s not much to complain about.

Sick Music 2 as pointed out by DeathBoy. I know close to fuck all about Drum ‘n’ Bass and breakbeat aside from a growing love of the stuff. No idea of which artists to look for or where to look but apparently Hospital Records is a good starting point. Excellent set of tracks for very little cash. Much prefer the instrumental tracks, although those with vocals don’t grate too badly. Ace for keeping energy levels up when working until the stupid hours.

The Gentleman’s Review Favourite podcast of the moment, heard about it through the fucking awesomely funny Precious Little. I don’t know how to describe it other than: Three men, sometimes a lady, sometimes a dog, Doctor Who, cheese, chaps, filth, leftie, humour, shouting, drunk, Yorkshire, geeks, what? Listen to it, it’s free. Even when it’s not outstandingly funny (which it often is) it’s always engaging.

Reincarnationfish – War With The Newts video – Ace new mashup video for the new Reincarnationfish track.

This Is Radio Silence – I Blame – Sublime music (as always) from This Is Radio Silence

Spucktute – Go To War - Free to download EP from Max from History Of Guns new band. Dark, harsh and not afraid to terrify.

Jim Bob – Storage Stories – Having completely forgotten I had pre-ordered this it was an extra-nice surprise when it turned up. First novel by Jim Bob of Carter USM, it’s heaving with the same dark wit (sometimes a little cheesy in a good way) that I’ve come to love from Carter lyrics. About halfway through and it’s absolutely brilliant. Story of an ex-rock star who has taken over the running of a self storage unit and the strange and interesting characters he encounters. You can get it on Amazon – Storage Stories (and get me some affiliate pennies) but I’d recommend going straight to the source and giving the author a bit more.

Pip pip!

Quick photo catchup. Accidentally have a mix of slightly dark/gothic looking pics and assorted spring pics (not really a surprise). We took a trip to West Wycombe with Emily and Katie during which everything seemed to be unnecessarily expensive, £5 each to walk round the park, £5 each to go in the caves (we didn’t bother), couple of quid each to climb the church tower (we didn’t bother).

Recent favourites:

Noisy Tits in the garden

House by All Saints Cemetery in Maidenhead. Up for sale, very tempting.

Somewhere in Shiplake

In the woods…

Karen, Emily and Katie posing for their Indie-rock album cover (by the Temple of Venus in West Wycombe park)

Been having a play with HTML5, very excited by the new semantics and especially keen on the new canvas tag. Aware that it’s not going to be supported everywhere in the immediate future but it’s a great step in the right direction. I don’t think it’s going to be the immediate flash killer some have made it out to be anytime soon (I love flash and AS and have no desire to see them go), but it can certainly work as a good alternative to flash for simple animation and interactivity. Once the decent JS frameworks add more functionality to support it it’s going to make life a lot more interesting.

I’ve put together a couple of experimental demos with HTML5 this week, this is the first. It’s a dynamic graph viewer. It can accept data via javascript and update the graphs on the fly. The data in question in the demo is supplied by the sliders but it can come from anywhere you like. I’ve kept the graphics basic for the sake of the demo.

View Demo.

I’ve not written any sort of tutorial/code article before, so bear with me, feel free to just download the source.

I’ve used jQuery and jQuery UI in the name of agile development. The jQuery ui for the sliders and a couple of jQuery statements to get measurements and deal with events, these could be easily swapped out for alternative frameworks or more verbose standard javascript.

The HTML

View the source of the demo for the full HTML, I’ll just include the pertinent parts here:

This sets up two canvases, one for each graph, I’ve named them the imaginative ‘Graph1′ and ‘Graph2′. The controls div contains four divs to be converted to jQuery UI sliders (one for each point / bar on the graphs).

The Javascript

First off we set up a couple of global variables:

graphPadding is just a number to use for spacing items of the graphs out. I’ve just set a single number to use for all margins, spacing, etc to keep things simple. colours is an array of colour codes, one for each of the graph points.

Next we initialise with the nice jQuery document.ready function:

The first command sets up the jQuery UI sliders including giving them the appropriate event handler to redraw the graph whenever any of them are changed. The second command just sets each slider to a random value. Next we call drawGraphs to draw their initial state.

Now we have the main graph drawing function, this is set up to draw both graphs in one go.

First we get the canvas dimensions, these could be stored as constants/globals somewhere or hard coded but I like the flexibility of checking on the fly. Really we should check each one individually and split the graph drawing into two functions but it’s a demo and I don’t care. Then we clear each canvas to start drawing on it using a function which will be defined below.

Prepare to draw the first graph by getting a reference to the appropriate canvas then calling getContext on it. Then we set the stroke style to black.

Draw the axis, a simple case of drawing two straight lines. We use a combination of the canvas dimensions and the graphPadding global to work out the positions.

Work out how much space we actually have to draw the points in. The first point is two sets of graphPadding from the left and the last is two from the right hence the * 4. Same applies vertically.

The points will be equally spaced horizontally so we just need to get their vertical position. Loop through the sliders, get the value for each one (0 – 100), work out the percentage of the available vertical space and add it to the points array.

Draw the graph lines. We separate the line drawing and point drawing as when we draw a circle it calls closePath which knackers up our lines (there’s probably a better way). To draw the lines we loop through the points and draw a line between each one.

To draw the points we just loop through the points array again, drawing a circle at each one, again the horizontal position of each point is fixed.

I’ll cut out most of the code for Graph 2 as it’s identical. The part of interest is:

Here we work out the available space for the bars by subtracting the appropriate number of graphPaddings from the total available space then dividing the result by the number of bars. We work out the max height of each bar by deleting 4 * graphPadding from the total available height.

Then we loop through the sliders, get the percentage value from each one and set it’s bar to the given percentage of the total height.

That’s pretty much it. I’ve used two additional helper functions which are based on those found at the Mozilla Canvas tutorial, they shouldn’t need any explanation:

So, there you go. Dynamic graphs without flash or server side graphics libraries. These could of course be achieved pretty much entirely with CSS and JS but it’s been a nice intro to HTML5 and the canvas tag.

I’ve not given this a huge amount of testing (or thought) as really for my own entertainment but hope it’s of interest.

I’ve always assumed I’m the most difficult, argumentative developer/designer in the country. Apparently not, there are far worse and they’re everywhere. A couple of longstanding clients have recently commented on how comparatively easy I am to work with, specifically my degree of tact when dealing with difficult projects. I am not being ironic.

I bitch and moan constantly about some of the work I have to do, friends, relatives and the less knowledgeable project managers look at me like I’m mental and trot out the traditional line “well, it’s all paid work isn’t it?”. Here’s the problem, it’s not about whether it’s paid work or not. Anyone who has entered a creative industry through choice generally has an expectation of the quality of work they will be doing, an expectation of job satisfaction. Sounds pompous, probably is, but that’s the reality. Often I can deal with crappy deadlines and budgets better than bad design and implementation decisions, I don’t expect to have much say on budget or timeline (for agency run jobs), but I’d like to at least have my opinion heard when a client makes a stupid decision which may damage the final quality or outcome of a project.

From a personal perspective, here’s why your developer/designer may be getting the arse with you for what you perceive to be completely reasonable requests:

The constant redo
Asking them to redo the same piece of work over and again because the client can’t quite decide if it should have the blue border or the green border? The repetition can make me very stabby indeed. There’s the next part of the project to move onto and I’ve just wasted a day shifting the same pixels back and forth (or worse a week), and really I already know which is the best decision and have probably yelled it down the phone a couple of times.

The Neverending Project
Mmmm… scope creep the bane of my existence.  Several things here, firstly project fatigue, after a while of staring at the same project you just can’t face it any longer, you need to switch to something else for a while. Adding just another page/button/function may seem trivial but even that ten minute task can make you lose the will to live. Secondly, on a more pragmatic level we’ve probably got something else lined up to be getting on with and if the scope creep has pushed us past deadline there’s someone else on our case about starting their project. Finally, and most importantly, an awful lot of scope creep includes totally unnecessary and pointless additions which I feel (sometimes incorrectly) will have a negative impact on the final outcome, I don’t want to release something crappy and bloated if it can be avoided.

You’re wrong, wrong wrong
Faced with a decision that’s clearly bollocks by a client or project manager I have two options. I can shut up, carry out the bad instruction and take the cash or I can explain why it’s clearly bollocks. The latter has a tendency to go down like I’ve just murdered someone’s granny. Some idiot somewhere has made the clearly bollocks decision and may well be very proud of it (recently: “I’ve used MS Paint to adjust our website layout, can you please implement this”) so there’s a high chance they are going to get offended when you tell them as much, the project manager doesn’t want to pass this message on and so pushes for the clearly bollocks decision to be implemented regardless of how wacky it is, I dig my heels in and explain repeatedly how clearly bollocks it is. No-one is happy. Don’t let the client get involved in the creative process, they’ll only arse it up and piss of those who are being paid to design.

I want to do it properly
Especially with a big project, I might be putting months of my life into a website. I don’t want the end result to be a bucket of sick. It’s partly the portfolio argument, in that I want to be able to proudly display every site I do in my portfolio to try and garner new work, but in reality I never update my portfolio (so rarely I’m not even going to link to it). More seriously, it’s pride in my work, I know that if I release anything that’s got even the slightest issue that’s will be the only thing I will notice when I look at it again, I’ll never be able to show someone the website without apologising in advance for the strange way the menu works or the odd clash of colours in the footer.

There’s plenty more that gets on my tits on a daily basis but it’s nice outside and I don’t want to stare at a screen all weekend. Generalising horribly, if your developer or designer doesn’t get the nark on with you from time to time, they probably don’t give a crap about their work and could work a little harder at it (or they are bottling it up and will one day come at you with a sharp pencil).

In lieu of actually writing anything, here’s a quick roundup of recent(ish) photos…

Knowl Hill in the Snow:

Braving the wastelands of Knowl Hill in the snow:

Katie – Rescuer of abandoned Christmas Ornaments

Ed’s favourite ride

Full set of Knowl Hill Snow expedition photos.

Avebury:

Quick visit to Avebury for lunch with Dad and Jan.

Full set of Avebury photos.

Wargrave Commission, Maidenhead in the Snow

More shots of Maidenhead in the snow.