New Homepage

There had been a minor tweak before this – replacing the big FUCK OFF sign in the left sidebar with a more polite invitation to look at this ‘blog’ – but this was a wholesale replacement.

Because we started to question the wisdom of having a giant flashing cat, FUCK OFF or otherwise, and a website that looked like it was made fifteen years ago – despite us liking it – when pitching for music videos.

A bit cowardly, we realise.  For now, the rest of the site is still as is.

Anyway, we thought we’d make it look a bit fancy.  So, it’s just the big word ‘superluminescence’.

Which is a bit dull, so first it drops from the sky, and it colours everything on rollover, and moves on click, and so on.  Play with it.

The idea first came from the website of an author of, we think, a wordpress theme (oh, yeah, we’ve changed this too – gone is the slightly dull ‘minimal’ and in is the slightly bolder…  whatever this is.  We did this a few weeks back,) that we didn’t pick.  Their homepage was just a page of big left aligned text saying twitter, facebook, tumblr etc.  The text was in the appropriate colour for the site it was linking to, and on hover, the background changed to that colour and probably the text turned white or something.

A really simple idea, but really clever.  So we’ve nicked a bit of that for the hover.

The dropping behaviour, not sure where that idea came from.  Possibly our own – imagine!  Bit of a palava to make it happen – lots of googling and nicking bits of example script from here and there and manipulating it to get the movement and the hover behaviour (we couldn’t refind that site we nicked the idea from to see their code) and everything.

We don’t know Javascript.  But we know a bit more now.  It’s very similar to ActionScript 2, with which we made those games way back when.  Quite easy to understand and play about with.

So, first we put in the drop.  The speed changes we worked out, and the triggering of the next part.

Then the hover over.  Then the bounce – quite cheap, just shift the appropriate part of the word up on mouseout, and then recall the drop function from there.  Then the raise up and raise down on click, which took some fiddling so it didn’t malfunction (e.g. always dropping the part you’d clicked immediately after it raises – which still happens in WebKit if you don’t move the mouse whilst it raises, as unlike Mozilla it seems to retain focus until you move the mouse even if the part has moved away from your pointer.)

It was originally running all at intervals of 100ms (as that was the unit used in the bit of movement sample code we nicked,) which was a bit jerky.  Upon reading modern browsers can happily handle much more (and loading a webpage that tests the speed to see that on this five year old MacBook, Camino turns over 10ms with ease, and Safari 5ms) we halved it to 50ms and then halved all the distance increments so it moved at the same speed just smoother, and it looks much nicer.

Because of the hover behaviour, it’s much, much nicer on pointer interfaces – I’ve tried it on my iPod and it runs and behaves fine, but you can’t hover and see the colours rapidly change and bounce, and it retains focus on the last thing you clicked so the background stays whatever colour and it’s generally less pretty and less fun.  But ah well.

Significant issues we remember:

At the beginning, we realised we had to have the whole word dropping in each instance, with most of each word being invisible (in order to make sure everything lined up perfectly.)  This caused a problem where only the top one was active to be clicked on.  We think this was solved by making the divs hidden by default, and then making the parts visible by highlighting them in span tags (as opposed to the div being visible by default, then hiding the unwanted parts.)  Who knows, but it works now.

And at the end, we had an issue with the blog link not being active in Safari (it appeared – we learned about z-index whilst playing with hover menus at work – but on hover it didn’t highlight and you couldn’t click it.)

In desparation – or, you know, a rare spark of intelligence and thought of doing things properly rather than bodging – we ran the page through a HTML/CSS validator.  Then corrected the errors – importantly, adding a DOCTYPE.

Which then completely broke all the Javascript in Safari.  Arg.

But after some Googling, it was easily solved.  Seems if you don’t declare a DOCTYPE, WebKit will run your code but a bit knackered; if you declare a DOCTYPE, WebKit will be more strict on rejecting hacky code and just not work if – as turned out to be the mercifully easy to resolve case with us – you weren’t adding ‘px’ when setting position values of HTML elements using Javascript.

Hurrah!  It works and looks quite snazzy, we think.

(We should properly annotate the code so we can better work out what’s going on if we look at it in a few weeks from now.  Wonder if we’ll bother…)

Minor Redesign

With inspiration from an horrendously gaudy “wacky religion” site that was ‘Tweeted’ around, we’ve jazzed up the website.

By which we mean we’ve taken the original ‘FUCK OFF SUNSHINE’ blog image and replaced it with an animated GIF that has Cinema 4D generated speed lines on it, and replaced the background cat image with a cycling coloured GIF.  We’d been meaning to replace the background PNG for a while because it was a bit big in filesize.  The new GIF is only a wee bit smaller, but it is smaller, and contains seven images in place of one, which cycle through the Spectrum hues.  And has some lovely GIF compression artifacts (both to keep the size down, but also because we really like the look.)

Re-Design-Me-Do

We killed off the old website ages ago, to replace it with this ‘blog’.  But then the ‘blog’ became a bit unweildy, and we fancied a simple homepage again.  So, we made a stupid, gaudy homepage, which made us laugh.

And then, we chucked a menu at the top, jimmied with the code so it now uses an external CSS file and an external JavaScript file and slightly-unnecessarily uses PHP to chuck different HTML bits together.  The idea being, everything links to directories, each directory has it’s own ‘panel’ files (for the menu at the top of the page, the left panel which’ll usually be a picture, and the right panel which is some text between the HELLO and the random quote,) but the index.php file in each directory is identical.  So, if we want to redesign in future, we can fiddle with the single CSS file and/or fiddle with the one index file and then copy that across all directories.

Now, WordPress obviously does this sort of thing in complex and clever ways, and possibly this is a massively stupid use of PHP.  But!  We quite like having a late-90s throwback looking website that we’ve thrown together by typing out text files.  So there.

And with ZX Spectrum colours.  How will modern day kids learn that there are colours called cyan and magenta, eh?

(Oh, and decision: to talk in collective first-person.  We’ll go back through the ‘blog’ to change the ‘I’s to ‘we’s in a bit.  If we can be bothered.)

(UPDATE 27/07/10 – Surprisingly, we can be bothered.  So this now reads even more badly written as we hastily change “I”s to “we”s and “me”s to “us”s etc.  But changed “myself” to “ourself”, not “ourselves”.  And there’s a lot of “I think” and “I guess” which seem very odd as “we”s.  AND the “we” thing is a bit pretentious, innit?  AH WELL.)

This, as a website

We will/should at some point soon(ish) at least add some proper menu pages to this thing, and generally sort out what we’re doing with it, and maybe transfer it to a non-wordpress.com domain rather than just link it.

Because at the moment, it’s like a diary, with solipsistic tedious reminders of how stuff was done.  Which isn’t going to be interesting to anyone.  Not that ‘interesting to someone’ isn’t a rather lofty aim for what, at best, is going to be a hub of links to stuff.  But still.

At the moment, the ‘Filter’ thing there doesn’t work that well, and this could do with at least a menu page for videos and stuff, so people could come here and see what there is to see without having to wade past Dear Diary essays of top-of-the-head jibber.

But for now, well.  It is how it is.  HELLO, STRANGER.

Drawings

So we’ve moved all those from ‘Scrapbook’ to general categories, because browsing DA we see that people have put much scrappier things than them in there.

Browsing DA is another one of those things to take confidence in ability, screw it up, and throw it in the bin.  Man alive, some people are good at drawing.  What’s the point, eh?