& J: Joshua Bradley: Blog

I’ve always loved the ramshackle ornament of Leeds’ Victorian terraces, the perceptible if slight dissonance between intention and realisation.

Also I enjoy variant focal depths on reflected objects. So you probably shouldn’t listen to me. Instead, try putting a piece of paper between the above two images, and move your head closer to the screen so that you can only see one side with each eye. What do you see?

The king of a country a long way off had three sons. He liked one as well as another, and did not know which to leave his kingdom to after his death: so when he was dying he called them all to him, and said, ‘dear children, the laziest sluggard of the three shall be king after me.’ ‘Then,’ said the eldest, ‘the kingdom is mine, for I am so lazy that when I lie down to sleep, if anything were to fall into my eyes so that I could not shut them, I should still go on sleeping.’ The second said, ‘Father, the kingdom belongs to me; for I am so lazy that when I sit by the fire to warm myself, I would sooner have my toes burnt than take the trouble to draw my legs back.’ The third said, ‘Father, the kingdom is mine; for I am so lazy that if I were going to be hanged, with the rope around my neck, and somebody were to put a sharp knife into my hands to cut it, I had rather be hanged than raise my hand to do it.’ When the father heard this, he said, ‘You shall be king; for you are the fittest man.’

-Grimms’ Fairy Tales

I’ve been enjoying these recently. Occasionally just funny, like that. More often there are alien moralities, and these are equally compelling. Try Cat-Skin, in which a king’s wife dies, and there is no woman so beautiful as her, and so he cannot remarry, and becomes very sad. However, when his daughter comes of age, he realises that she is every bit as lovely as her dead mother. He expresses his desire, to her horror. She flees and hides disguised as a scullery maid. Eventually she realises the error of her ways, returns, and marries her father. And they live happily ever after, until they die.

I think I’d like to make some stop-motion animations of these stories. I’m certain this will already have been done so well that I’ve decided not to check. I want a direct, personal reaction.

I salvaged this from a book about to be burned. It was to be burned because it was (among other books) blamed for the collapse of a marriage. I found an unspeakable aptness in this paragraph, given the context. I intend to integrate it into the contractual agreement when I initiate my next relationship. I just need some of these leadership advocates, they sound great.

But the evidence is inconclusive…

There’s a light shining behind the cloth pinned to the steel fence shrouding the work taking place at this overground station in London. I forget where. But I love the folds and curves created in that rectilinear pattern.

It was brought to my attention on Sunday that the word “contempt” has no active verb. I cannot ‘contempt you’, I can only ‘hold you in contempt’, find you ‘contemptible’ and so forth. As an exercise, my first A-Z:

A is for abhor
B is for besmirch
C is for condemn
D is for disdain
E is for execrate
F is for forsake
G is for goad
H is for hate
I is for irritate
J is for jealousy
K is for keelhaul
L is for loathe
M is for mutilate
N is for narcissism
O is for odium
P is for pariah
Q is for quean
R is for revulsion
S is for shame
T is for taint
U is for unctuous
V is for venom
W is for woebegone
X is for xeric
Y is for yearning
Z is for zestless (thanks Jos)

if you and I were to find ourselves this evening in the society of greengrocers, let us say, it is probable that our conversation would not be brilliant; if, on the other hand, a greengrocer should find himself at your refined and polite tea-table, where everybody was saying witty things, and everybody of fashion and repute tearing her friends to pieces in the most delightful manner, it is possible that the stranger would not be very talkative, and by no means interesting or interested.

- Vanity Fair, Ch. LXII p.728

So a few days ago, I promised a technical guide to my integration of jQuery animations into this wordpress theme. I’ve never done a techy post before, because I know about as much as a part-trained shrew (and that’s just how I like it). But this technique seemed so easy (and powerful) when Jonathan Lister (real name: Jayfresh) introduced it to me last week (using Phil Hawksworth’s Unobtrusify.com) that I feel it is my duty to fellow part-trained shrews to impart his instructions in an idiot-friendly fashion. With no further ado, then…

1. First things first. I’m assuming you have a wordpress site. You know almost no Javascript. You know some XHTML & CSS. You have chosen a well constructed, semantically solid theme from somewhere, and installed it. The theme I’m using is my current favourite for flexibility and style- Derek Punsalan’s GridFocus.
2. Now go to jQuery.com and download their latest package- we went for a ‘minified’ version of the code, which weighs in at about 18k- good on your bandwidth, yo? Anyway, now upload this file to your theme’s javascript folder (for me this was something like: “WordpressFolder/wp-content/themes/gridfocus/js”
3. It’s time to make your theme load the scripts in the jQuery file. To do this, I went to the theme editor and chose to edit header.php- on this theme, that’s where the <head> information lurks- lovely. Now, attaching the .js file is just like attaching an external stylesheet. Lovely. Here’s the code I used:

   <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.1.min.js"></script>

4. Great! That all makes some kinda sense, yeah? Okay. Here’s where things get interesting (for me at least). So now we can use the jQuery scripts to do a whole bunch of stuff. In this case, I wanted all the posts on the homepage to be hidden by default, only to be revealed when the user clicked the <h2> titles of the blog posts.
5. So first up, lets hide that content when the page loads. That’s ‘piss’ easy:

   <script type="text/javascript">
   jQuery(document).ready(function() {

       jQuery('div.entry,div.sidebar').hide().css({opacity:0});
   });

   </script>

   Paste that script into the header.php. The second line, jQuery(document).ready… waits for the page to load, and then executes the following function. In the third line, we are calling the class names of the divs to be hidden (in this case both “.entry” for the posts and “.sidebar” for the left sidebar items), then instructing jQuery to hide them, and set their opacity to zero. This latter is important because we want to scale it back up to give the impression of a fade-in later on… If you test the page now, you should find that you can see no posts, and there is no way to get at them. Huzzah- easy.

6. Very good. Now lets add some more information into the function above- paste the following code under the third line, before the });

   jQuery('h2').addClass('clickable').

       click(function(){

               var el = jQuery(this).next();

               if(el.is(':visible')){

                   el.animate( {opacity:0}, 300 );

                   el.slideUp(300);

               } else {

                   el.slideDown(150);

                   el.animate( {opacity:1}, 300 );

               }

               return false;
   });

   Now this is a little more complicated, but bear with me… OK, since I want you to be able to unhide the contents of .entry by clicking the <h2>, we want those <h2>’s to behave like buttons, so in the first line we’ve added a new class to all <h2>’s – the class is called ‘clickable’. This is just a CSS class with one line in it, setting the mouse cursor to become a hand on mouseover. But we also need the act of clicking to actually do something. So the second line above creates a function which is executed on click…

   Then we create the var “el”, in an if/else statement… and er… here I actually get a bit lost. I have no idea what “(this).next” means- can you help me clarify? I have a feeling it may mean that the subsequent animations are to be applied to the next div after the one receiving the click, whichever that is. Is this anywhere near true? If yes, then the following ‘if’ statement asks whether that div is ‘visible’- and if so, applies a sequence of animations to hide it… But if that subsequent div is not visible, then it applies an animation sequence to show it.

7. Now, the great thing about these animation sequences is that you can chain up a series of motions which are executed one after the other. just add more lines to the animations. By the way, the number in brackets after the slide animations is the amount of time, in milliseconds, over which the preceding animation is played out. The opacity animations set the CSS opacity value to ‘1’ or ‘0’ over the amount of time specified afterwards. This reminds me a little of the great Moses Supposes Fuse Kit for Flash, which always struck me as a potentially damn powerful dynamic animation engine. But I don’t know much more about how to control this jQuery stuff- setting delays or triggers between animations would be great, for example. Any ideas?

So there we are. I’ll try and help if there are any queries (huhuh, ugh), though I’m not sure I’d recommend my own advice. If, on the other hand, you have any of the answers to my questions above, I’d be most flamboyantly delighted and may even buy you a pint.

My Victorian friend Jos put me on to this… It is a Phonautograph.  In the interests of brevity, Wikipedia will tell you more about it. It was patented in 1857 by Édouard-Léon Scott de Martinville, and was used to transcribe audio onto a (hand cranked) strip of paper, by means of an ‘hog bristle’ attached to an acoustic barrel.

So Édouard recorded a number of these “phonautograms” in the years after the invention. There was, at the time, no way to play them back- they were just strips of paper adorned with scratchy soundwaves. They were rolled up and stored in a library. They looked like this:

Now we have the technology (read: magic) to take these wavy lines and convert them back into recognisable sounds. So that’s what was done. Wonderfully, instead of some goon telling the time or counting, it was a few seconds of a woman singing Au Clair de la Lune. Listen to it here.

I love the fact that this has happened. I love the idea of hidden data, sitting patiently to one side, waiting for us to discover the means to unencode it, to render it meaningful, in this case beautiful, even.

It made me wonder whether we might one day be able to play back the sound of Vesuvius erupting, from the arrangement of ash particles on a wall in Pompei, or listen to our own first words, recorded somehow in the bones. I don’t know. The thing is this: we can readily understand this imprint:

These are prints of bodies. They are intelligible. And now the lines on Édouard’s rolls are intelligible. And tomorrow, some other unknown thing will become intelligible, legible, something.

For fun, here are the lyrics to Au Clair de la Lune in English:

Under the moonlight, my friend Pierrot,
Lend me your pen, so I could write a word.
My candle is out, I’ve no more light.
Open your door for me, for the love of God.

Under the moonlight, Pierrot replied,
I’ve no pen; I’m in my bed.
Go next door, I believe that she is in,
For in the kitchen, someone lit a match.

Under the moonlight, friendly Lubin
Knocks at the brunette’s door, she suddenly replies
“Who’s knocking this way”, he says in his turn
“Open your door, for the god of love.”

Under the moonlight, little can be seen
The pen was looked for, fire was looked for
Searching this way, I don’t know what was found
But I do know that the door, on them was shut.

Things look a little different around here, no? In explaining my experimental new wordpress theme, I’m going to relate a little history, mull a few mental processes, and hopefully in my next post elucidate a few of the techniques I learnt.

So in May last year I constructed a new portfolio for my work. This went through several iterations over the rest of 2008. The original version was based on the system used by a number of minimalist portfolio sites I’d seen, the best of which was owned by talented Barcelona based designer Alex Trochut. I loved the tidiness of the approach, the importance accorded to the images of his work, the smoothness of the interaction, the unfussiness…Of course, this site uses Flash, and so has all the benefits and limitations of that technology.

I showed the site to my good friend Jonathan Lister (real name: Jayfresh) at Osmosoft, expressing my wish to, er, flatter the design for my own portfolio. His brow crinkled, there was a gurgling in the back of his neck, he scratched the hair above his right ear, and pronounced: “We could do this with javascript, that would be good…” And so that evening back in May 2008 we settled with a couple of bottles of wine at my old office, and within a few hours, using the Tiddlywiki JS animation classes, we had constructed a pretty decent imitation (plagarism) of the system. This was V1 (link to follow) of my new portfolio, and I launched it the following week, replete with 172(!) validation errors at W3C… Luckily I’m not the type to care. It worked in IE6 (just).

By August, I got edgy about the unoriginality of the design, and made a few changes- adding moody black and white photos of city stuff intead of the helvetica words… This was V2, which lasted until I got upset about the complete meaninglessness of the images- moody fluff, exactly the kinda thing I hate in other people’s work. So in October I designed the more archiac/typographic V3 (link to follow), using the beautiful typeface Bell MT, in a single sentence spread across the 3 panes. This was much more to my taste, so I told a few people about it… Among these was Jonathan’s compadre Phil Hawksworth, designer and coder extraodinaire. He loved the design and the idea, but found fault in the execution. Not the type to sit around, he found a way of achieving the same effect with the (much lighter) jQuery library, wrote a blog post about it, and even published a new site, Unobtrusify.com, dedicated to his solution!

Meanwhile, I had started avidly following a few design blogs, hungry for knowledge, techniques, inspiration. These seemed to flow from my initial desire to ‘learn’ (haha) typography… There seemed a greater articulacy quotient in those discussing typography than in those discussing, say, photoshop techniques, or CSS, or those endless image-blogs (which though beautiful, seemed quickly throwaway, faddish, unpenetrative)… Anyway, I was pleased to find sites like Anthony Carruscone’s AisleOne, Andy Rutledge’s Design View, or Ilovetypography- designers focussing more on general principles than specific techniques. Having had no formal design education since high school, I began to devour new information on grid systems, gestalt theories, information design. I hope to continue learning the scholarship behind this stuff for the rest of my life, though I have a few misgivings about the ermergent urge to universal ergonomic objectivity within visual web design (about which I’m going to write another post shortly).

…Anyway, to come to the point- I redesigned the rather eccentric, individualistic V3: it seemed to maul and obfuscate the information it should have showcased. So over Christmas I came up with V4 (the current site), on the strength of my recent studies. This was the most significant redesign so far, working on a rigid horizontal grid with a dynamic vertical grid. Maybe less interesting than the prior iteration, but hopefully a better treatment of the content.

So back to the plot- I read Phil’s post about unobtrusifying my javascript, and could make neither head nor tail of it. But Jonathan kindly walked me through the process of integrating jQuery into my new portfolio. It was  pretty easy, but I’m too tired to explain it now. Anyway, in seeing how simple it was, I began to have new ideas for how to use it. First stop: Wordpress. Sallow & Wan was getting old anyway.

So what do you think? It’s pretty stupid having a blog like this, isn’t it? You can’t see anything! But given my readership of 2, and my hard-earned economic independence from the blogsphere, I think its more important I use this space as an experimental design sandbox than thinking up elaborate pyramid schemes, trumpeting my intimacy with social media, slandering the old knowledge of people who think SEO is about algorithms, getting narky about Digg, or any of that stuff.

There are two promises for new posts in this one: a technical walkthrough using jQuery in Wordpress, a meditation on the urge to universalising ergonomic objectivity (in web design). And a third for the road: something about the NEW FIRST RECORDING EVER of the human voice.