Here we have a small selection of tutorials detailing many of the things that we have done around the site, and just how we've gone about it. The majority of these tutorials deal with getting various applications and code running within WordPress. Check back often as this page will be regularly updated.

Cicada (link com­ing shortly) is our first site of 2010, com­mis­sioned by a friend of mine for his new busi­ness. The brief was to provide a simple and clean web­site in order to allow pro­spect­ive cli­ents to con­tact him and to con­form to all cur­rent European stand­ards for busi­nesses. It should also be com­pli­ant with IE6+, Fire­fox, Chrome, and Opera.

The web­site truly does seem simple at first look, but there’s a lot going on behind the scenes in terms of JavaS­cript and design choices. The big one being cufon, used to serve Hel­vetica Neue — in Light and Ultra Light vari­ants — to the view­ers. Using cufon is as easy as upload­ing the typefaces to their provided gen­er­ator (make sure that the licens­ing allows for them to be embed­ded, you should also lock the file to your domain) and then link­ing the gen­er­ated JavaS­cript file in the head of your HTML:

Con­tinue read­ing: Cicada

Yes, the Super­pos­i­tion Kitty web­site has been turned on its head. Black is White! White is Black! And … that’s about it. A code cleanup was long due, and while I was at it I changed a few things around. Most import­antly, I cleaned up the CSS, strip­ping it of a third of it’s weight in the pro­cess and hope­fully speed­ing up load times.

Unfor­tu­nately, a few of the tutorial posts are now slightly out­dated. I will be updat­ing them in the com­ing weeks to com­ply with the new theme and changes in code.

I’d like to thank 1KB CSS Grid for the base grid used in the new code. I’d messed around with vari­ous grids — such as 960.gs — before, but found them almost uni­ver­sally bloated in the effort to provide for every even­tu­al­ity. 1KB Grid is tiny and neat and much more eleg­ant than the sys­tem I had come up with pre­vi­ously. The grid now looks some­thing like this:

Con­tinue read­ing: White On Black

I recently real­ised that I haven’t gone into any detail about my work envir­on­ment. For today, I thought I’d start with my desktop. First things first, the wall­pa­per is from a pic­ture pos­ted up on Twit­ter recently by Bryan Lee O’Malley — the author of the won­der­ful Scott Pil­grim series, soon to be a movie by the tal­en­ted Edgar Wright (dir­ector of Spaced / Shaun Of The Dead).

But recently I’ve been get­ting com­ments about the “crazy text in the top left corner” of any screen-shots I show people, so I thought I’d post up a bit of a tutorial for the applic­a­tion that makes this all pos­sible — Geek­Tool. What it does is run scripts and com­mands that you would use in Ter­minal and dis­play the out­put on your desktop.

Geek­Tool is quite simple to use. For now we will just be mess­ing with ‘Image’ Geeklets, just drag one into pos­i­tion on your desktop and you will see the ‘Prop­er­ties’ win­dow. There are three import­ant things here: Com­mand, Refresh, and Style. Com­mand is where you will enter the scripts below, Refresh is how often you want the out­put to refresh (I find 10s works well for most cases), and the but­ton below Style — ‘Click here to set font & color.’ — opens up the default Font style win­dow of OS X (which you should already be accus­tomed to).

The vari­ous scripts I’ve gathered together below have been col­lec­ted from tutori­als all over the web, I hope you find them as use­ful as I did.

Con­tinue read­ing: My Desktop

We’ve had a few requests for art­icles on the site lately, and more and more of them are ask­ing about the design of the site itself. So for today I thought I would detail how I designed the header for Super­pos­i­tion Kitty. An ini­tial warn­ing: I have no idea how many browsers this works in (as my usual test­ing pro­ced­ure of using Browser Shots is no help for hover states), how­ever it should work for all the major browsers, even IE6. Secondly: This code — or more spe­cific­ally, nest­ing a <div> between <ul> and <li> ele­ments — is not XHMTL valid.

I spent a lot of time wor­ry­ing about the second part until I real­ised the valid­ity of my code had abso­lutely no effect on how the site is dis­played to vis­it­ors. This doesn’t mean you should just throw val­id­a­tion out the win­dow — at the very least it is a great way to dis­cover hid­den errors in your code, or why some­thing isn’t dis­play­ing as you think it should — but I just don’t believe it is as import­ant as I once did.

Head­ers in Word­Press are a rel­at­ively simple affair. If you want to brush up on the basics then I would recom­mend check­ing out the excel­lent Word­Press Codex art­icle on design­ing head­ers. The header for Super­pos­i­tion Kitty is based on Son Of Suck­er­fish Drop­downs, which is in turn based on the ground­break­ing A List Apart art­icle: Suck­er­fish Drop­downs. Read­ing through both of those art­icles (which I heav­ily recom­mend) will give you a good ground­ing in how to style lists as a hori­zontal (or even ver­tical) menu.

Con­tinue read­ing: Word­Press, Head­ers, And Super­pos­i­tion Kitty

A.K.A. Get­ting Apache, MySQL, PHP and Ruby on Rails to play nice under Ubuntu.

Now we get to set up our new Linode VPS. The first thing you’ll want to do is con­fig­ure your DNS. Make sure that you delete the MX record and replace it with the records from Google Apps as dis­cussed in part one. Note that you do not need to wait for the name serv­ers to propag­ate before edit­ing your DNS records, in fact it is prob­ably bet­ter to set up your DNS first so that down­time is min­im­ised. You’ll then need to deploy a linux dis­tri­bu­tion. As men­tioned in the pre­face; I chose Ubuntu 9.04.

Now this is where the need to use the Linode dash­board ends. The fol­low­ing can be used with any VPS pro­vider. You can fol­low either the Linode Set­ting Up A LAMP Server On Ubuntu art­icle, or altern­at­ively Slicehost’s Ubuntu Hardy Setup art­icle to get your VPS up and run­ning. Note that the Slice­host art­icle focuses more on secur­ity and that you will need to read the rest of the art­icles in their series to set up Apache, MySQL, and PHP.

Con­tinue read­ing: Chan­ging Host­ing Pro­viders Part 2.

A.K.A. Back­ing up all of your data, set­ting up email, and con­fig­ur­ing DNS.

See­ing as my Media Temple install still wasn’t respond­ing, the first thing I had to do was login to Plesk and see what ser­vices I could shut down to get on with the move. Turned out there actu­ally wasn’t any, so I took the decision to shut down Apache for a few hours while I tried to get email sorted.

Hours were spent research­ing the best way to migrate the seven email addresses between serv­ers, until a friend recom­men­ded Google Apps. The stand­ard edi­tion (free) gives you a cal­en­dar, docs, sites, and — most import­antly — email. 7GB of data per user, with 50 users allowed per domain. There was also the added bonus that I would be mov­ing reas­on­ably intens­ive resources (spam fil­ter­ing and such) off the server, and that if my server ever went down again email would not be effected. The only down­side to Google Apps is that you can’t have mul­tiple domains on the same account (unless you want all the email to go to the same address), so it required set­ting up 3 dif­fer­ent accounts to man­age all my email addresses. Set­ting up an account is rel­at­ively pain­less, involving cre­at­ing a doc­u­ment in the root of your domain to prove your ownership.

Con­tinue read­ing: Chan­ging Host­ing Pro­viders Part 1.

Lately at Super­pos­i­tion Kitty we’ve been adopt­ing more of a photo-blog feel to some of our posts. If you’re recently read Apple Crumble The Retarded Way then you would’ve noticed that text is dis­played in a cap­tion inside the image when you mouse over it. The ori­ginal idea for this was taken from The Guard­ian web­site, where if you hover over any images on the main page a cap­tion will dis­play giv­ing you more inform­a­tion on the linked story.

I spent hours com­ing up with what I thought would be the most per­fect solu­tion to this (I didn’t want any of the extra JavaS­cript effects that The Guard­ian used), but my approach turned out to be too nar­row — work­ing only in Fire­fox. So I turned to my good old friend Google, and star­ted search­ing. I even­tu­ally came up with this CSS On-Hover Image Cap­tions tutorial by Soh Tanaka. Being pure CSS and work­ing in all browsers (includ­ing Inter­net Explorer 6 and 7) it seemed to be exactly what I wanted. You can view a page demon­strat­ing how his ver­sion works here, and I recom­mend that you read through his post first to get a greater idea of how these little CSS tricks achieve such an effect. Read on past the demo image below to see how you can get this up and run­ning on your blog.

Here we have a bike. Lookit dat bike.

Con­tinue read­ing: CSS Image Cap­tion Rollovers For WordPress

Every so often I get ques­tions about what plu­gins I’m using on the site, and the sheer num­ber they get in response seems to shock most so I’ve decided to doc­u­ment them all below. I believe that the best plu­gins should be invis­ible, thus the major­ity of these plu­gins add some kind of back-end func­tion­al­ity that I feel is miss­ing from the Word­Press core.

Advanced Excerpt
Advanced Excerpt adds sev­eral improve­ments over WP’s default excerpt. It will trim to a sup­plied char­ac­ter or word length and has the abil­ity to keep HTML markup. You can see it in use just to the right of this post under ‘Latest Posts’, I’ve set the excerpt length to four words, the HTML markup for <em> to be kept, and the ellipses to be …. All-in-all, very easy to install and use, and it provides some much needed functionality.

Akismet
Akismet is a very well known (and well used) plu­gin. Simply install it, enter your Word­Press API key, and you’ll likely never have to worry about com­ment spam on your blog again. At the time of writ­ing Akismet has caught 1,276 spam com­ments on this blog with a 100.00% accur­acy rate. Occa­sion­ally you will have to delete a few of the com­ments that it catches when it’s not com­pletely sure that they’re spam (at the moment I’ve been delet­ing quite a few Rus­sian com­ments), but for the most part it will do its job behind the scenes.

flickrRSS
FlickrRSS can be seen work­ing in the very right column. It is a simple plu­gin that pulls pho­tos from your Flickr pho­to­stream and dis­plays them on your blog, just enter your Flickr User ID and the num­ber and size of the pho­tos you want to dis­play. An added bonus is the abil­ity to cache the thumb­nails it cre­ates of each photo.

Con­tinue read­ing: Word­Press Plu­gin Round-Up

You might have noticed lately that the colour-scheme of this site changes each time you click a link or reload a page (cur­rently we have blue, pink, and green). This is some­thing eas­ily accom­plished with just an extra 2 tiny CSS files, and a little bit of PHP.

If you’ve read my pre­vi­ous art­icle — Word­Press And A Hori­zontal Baseline Pt.1 — you are already famil­iar with the CSS that forms the found­a­tion of this site. What we’re going to do first is strip out any­thing to do with col­our from the CSS and put it in it’s own sep­ar­ate file that we’re going to call blue.css.

a:active, a:hover, .commentlist a:hover, .commentlist a:active, .commentlist cite a:hover, .commentlist cite a:active, #recent-comments a:hover, #related-posts a:hover, .lastfm a:hover, #footer a:hover, #footer a:active, .commentlist pre a:hover, .commentlist pre a:active {color:#34B0F8;} 

#menu ul li a:hover, #menu ul li a:active {background:#34B0F8;}

.entry p a:hover img, .entry p a:active img {border:1px solid #34B0F8;}

a.feature:hover	{border-color:#34B0F8;}

Con­tinue read­ing: Ran­dom Stylesheets in WordPress

The aim of the Echo Nest Remix API is to let you manip­u­late and remix music and video through code. Execute the few lines below:

import echonest.audio as audio
audio_file = audio.LocalAudioFile("input.mp3")
beats = audio_file.analysis.beats
beats.reverse()
audio.getpieces(audio_file, beats).encode("output.mp3")

And you have now reversed a song by ‘play­ing its beats for­ward from the end of the song’. The out­put of which would look a little some­thing like this.mp3.

First off, you’re going to need to grab an API key by regis­ter­ing an account. If you’re using OS X you can fol­low this install pro­cess (here’s Linux and Win­dows). Make sure to run the example at the end of the install­a­tion pro­cess to con­firm that everything works.

Con­grat­u­la­tions! You can now mess around with beats and manip­u­late all your mp3s and videos. Try out the rest of the examples to get an idea for just what the Echo Nest Remix API can do. To get an idea of just how power­ful the (upcom­ing) video manip­u­la­tion is, check out Where’s The Pow by Paul Lamere in which he remixes the Black Eyed Peas — Boom Boom Pow.