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.

Hush now Daily Mail readers, Typaedia has nothing to do with children. I love this book, mostly for nostalgic reasons but also for the little bit of history as well.

The Typaedia is exactly what it looks like, a great big book of index numbered typefaces which you could leaf through to order sheets of letraset-type font sheets to create layouts, negatives and all the other stuff a working print-shop may use typefaces for. There’s an introduction page:

Introducing Conways’ Typaedia*
Conway’s Typaedia is a unique collection of some 4000 display faces.
Each is shown in its entirety, with caps, lower case, variants, punctuation and signs, arranged alphabetically in two separate sections, and all available at Conways’ as headline photosetting.
The first section shows the bulk of the faces – 3300 in alphabetical order with the second section showing 700 faces in the Agency series.
There is an Introduction to each section, a Latest additions section and a comprehensive Index.
The first section of 3300 faces is enclosed along with with the full Index.
The Agency section together with the introductions and the Latest additions, all at present at the printers, will be delivered to you early 1980.
Altogether…a unique work of reference
* Typaedia,-paedia (Latin,fem), a doctrine or learning.

From there we just dive into pages and pages of fonts, no other explanation needed. It’s a lovely catalogue, nicely spaced with no unnecessary crap, no explanations, no sales pitch it assumes the reader knows it’s purpose and doesn’t need to patronise or hard sell at them. Lessons on simplicity could be learned from here (mostly by me).

It’s a great reminder of how stupidly easy it is for us these days even in comparison to 30 years ago. When we need a new typeface we can purchase it and be using it within a couple of minutes, back then you had to go collect them or wait for an order to turn up. Every character you used had a cost, if you knackered up your design there was no undo, it was back to the supplier to get another sheet. And most importantly you had to keep your stash of lettering safe from your 8 year old who found the whole concept fascinating and would happily apply your lettering to any surface given half a chance.

My Dad gave me this book recently, which was really cool. For most of my childhood he ran a print shop (and still does), and I have some really happy memories of laying into his assorted work materials and making crap with them. I have especially fond memories of letraset and some really sharp memories of sitting on the floor rubbing the letters onto whatever materials happened to be around. Not with any real creative intent, I just found the whole process amazing, it held an almost bubble-wrap type fascination. The Typaedia was never that far from hand.

The book itself is well used, covered with splatters of ink, random bookmarks, biro scribbles and the other assorted grunge of a workshop. It’s almost comforting to have on my bookshelf. I’m slightly annoyed that I forgot to photograph the back cover which has one of Dad’s promotional stickers on it as drawn by a local illustrator (Peter Classey), as they also form a strong part of my early memories.

Thanks Dad.

Full set of Typaedia photos on Flickr.

A beautiful dance, reflecting the struggles of mankind in an act as simple as sending a mass-email.

We meet once a week…
I’m emailed that week’s marketing email.

and we talk of what’s to come…
I insist we put a delay on the delivery so they can properly proof read it, fair chance no-one has yet, they insist it’s MEGAURGENT and must be sent IMMEDIATELY, NO DELAY!!!

We take our first steps…
I correct the horrific spelling errors and lightly proofread the mailout. I would proof-read it more thoroughly but hard to do so when being constantly questioned IS IT DONE YET IS IT DONE YET IS IT DONE YET?

The dance proper begins…
I queue the mailout up to be sent in an hour and send them test copies. They say URGENT SEND NOW NO DELAY!!11!! I insist they read the test copies and check them. They say URGENT SEND NOW NO DELAY!!11!! (for even a 20 minute delay will weaken their marketing message until it is nothing but a fine morning mist dissipating in the sun. I pretend I have gone deaf and leave the delay on.

We conclude our dance for this time.
Two minutes before the mailout is queued to go I’m contacted with MEGAURGENT FIX IT FIX IT FIX IT!!111!! For why? Because there were some glaring inaccuracies and the name of the MD was spelled wrong (again).

And onto the next time, when it will be as though we haven’t already done this a thousand times before. Each time fresh, the same steps, although with slightly different timing.