Making the ShopTalk Show theme tune

I’m a regular listener to the ShopTalk Show podcast, a really great show about web design and development hosted by Chris Coyier and Dave Rupert. A couple of years ago, not long after the show started, I offered Chris and Dave a very rough piece of music as a theme tune, and they’ve been using it ever since.

But the time has come to refresh the theme tune, and the guys asked me to record a new version. Specifically they wanted it “rootsier”, and around 20 seconds in length. Here is the new version:

If you’re interested in how I recorded it then read on!

Chris and Dave wanted me to incorporate a recording of a crowd shouting the show motto “Just Build Websites”. I heard in my head exactly how that sample could be used at the end of the tune, so I knew what I was aiming for.

I busked a quick bit of music in the style they wanted. I grabbed my guitar, started strumming an A chord, and very quickly had a chord progression I was happy with, including the ending that could include the “Just Build Websites” sample. I wrote the music down on the back of an envelope (as that’s a traditional thing to do) and added some ideas for an arrangement:


Now I could start recording. I used the fantastic free Audacity software, as I wouldn’t need any fancy effects. It handles simple multitrack recording, and is really easy to use.

Click track

First I laid down a click track, to ensure I was keeping in time with myself. I recorded enough bars for a lengthy click intro before I start playing, and of course enough bars to go right to the end of the recording. If you’re playing along to a click track like this it’s a good idea to have at least 4 bars before you start playing. It gives your hands time to get from the keyboard to the instrument, and lets you settle into the tempo.


Acoustic 1

Then I grabbed my trusty Line6 Variax 500 and chose the Martin D-28 6-string acoustic guitar sample sound. That’s the main guitar you hear at the beginning.


The Variax is great as it gives a really good impersonation of a real guitar. Yes, anyone with a good ear can hear it’s not a real Martin D-28, but then it didn’t cost ten grand. Plus it comes with a massive range of other stringed instrument samples, a couple of which I talk about below.

The first acoustic took a few takes to get right, but I wasn’t happy with the sound, so decided to add a second acoustic guitar.

Acoustic 2

This time I chose a Gibson J-200 and double-tracked the first acoustic, but using my fingertip instead of a pick. I panned the second acoustic to the left and pulled the levels down. This gave me a nice stereo spread of sound.


I knew for the main body of the piece I wanted a ringing guitar sound, probably double-stringed and higher than the guitars. I don’t have a bouzouki (although I think that will be my next instrument purchase; Jeremy will be pleased) but by choosing a Martin D 12-28 12-string guitar sample and putting a capo up on (I think) 5th fret it was a reasonable rendition.

This took quite a few takes to get right as my fingers didn’t want to do what I told them. Sometimes that’s just the way it goes. Here are the two acoustics and bouzouki tracks.



The time had come to lay down the Groove Machine. Ahem, I mean record the bass. I’ve got a beautiful 1978 Fender Precision bass, and a couple of takes later I had it done.


Bass almost always needs come compression to even out the levels. I applied some basic compression to the bass track:


And ended up with something looking much fuller, although a couple of peaks were uncomfortably high:


Here’s a simple trick. If you see a peak which is really high, like the ones in the red circles above, it’s likely that there are just one or two waves which are high. Zoom right in and select the high waves:


Then pull the levels down by a notch:


This is before:


And this is after:


I’ve found that this doesn’t affect the sound in any noticeable way, but help to stop clipping.


To round out the “rootsy” nature of the recording I added a banjo part, using the Gibson Mastertone sample in the Variax. It’s pretty low in the mix, and it’s not complicated, as I ain’t a good finger picker. But it’s a nice little addition to the piece, particularly at the beginning.

When I say I’m not a good finger-picker I mean I’m really awful, so getting this banjo part OK was Hard Work. I lost count of how many takes it took, but it was well over 20.

Just Build Websites (JBW)

Now I was ready to add the JBW sample. The problem was the words are said faster than the tempo of the tune. When I was busking the chord progression I tried playing the music fast enough to fit the speed the words are said, but it sounded manic.

You can see here the peaks of the JBW track don’t match with the peaks of the bass track above.


What I needed to do was cut the words apart, so they are spoken at the same tempo as the music. I toyed with stretching the JBW sample, but it sounded awful.

Cutting the JBW sample into parts was easy, but then I got a horrible “clipped” effect after the first two words, because there was artificially-inserted silence. What to do? Add reverb? Nope, that sounded horrible and false. Instead, I copied parts of the sample and shifted it along to mask the gap. Here you can see how I lined the words up with the bass notes, then covered the gap with my fake echo:


I pulled the level of the fake echo down until it was reasonably unobtrusive, but still masked the gap:


Next I used my Alesis DM5 digital drum kit to lay down a drum line. It’s mostly pretty simple, but I did do a sweet triplet fill before the last two notes:

The drum sound was a bit dry, so I added some small room reverb:



As the levels were getting set as I added the tracks there wasn’t much to do in terms of mixing. I did find the bass got lost, particularly in small headphones. By the way, it’s a good idea to check your mix not just on studio monitors, but on headphones. I used Grado SR60 and RHA MA350 (I think) in-ear headphones. A bit of EQ on the bass soon made it pop out again:


After exporting my mix to 2 tracks I “topped and tailed” the resulting file to remove empty space at the beginning and fade out nicely at the end. Then I encoded to MP3 and emailed it to Chris and Dave. Job done.


The second acoustic was slightly out of tune one one or two notes, so I re-recorded that. And I wasn’t happy with two of the notes on the bass as well, so I re-recorded that. Dave also made a great suggestion of adding a little banjo intro. My amazing (not) finger-picking skills once again saved the day:

As this banjo was stuck out on its own I added a touch of reverb to beef it up.

Now, listening to the individual parts you may thing “hmm, these are a bit raw”. You’re right, they are. As part of that “rootsy” feel I didn’t want to overall piece to feel too polished – I wanted it to sound like a bunch of guys messing around with some recording gear late one night after a few beers. Hopefully I’ve achieved that, and hopefully the listeners to the ShopTalk Show will like it. I certainly enjoyed recording it.

Tuesday is Link Day

Business, teamwork and marketing

Interesting article about assessing developer (and designer, I guess) performance:

There’s a new version of the web developers SEO cheat sheet:

Working with other: the sliding scale of giving a f**k (language warning):

Seth Godin on making faster decisions:

Beware of calendars:

“Writing for the web with style and purpose”:

Voice and tone – writing email newsletters (and more):


The big news over the last couple of weeks has been Facebook Instant Articles, which FB have been touting as the answer to – get this – slow websites. Lots of articles about this news.

Facebook has made performance a high priority for the entire web:

There needs to be a cultural change (Jeremy Keith):

Tim Kadlec: performance is a cultural problem:

Facebook and the media: united, they attack the web: (fantastic article)

Thoughts on the business motivations behind Facebook Instant Articles:

Other performance articles

Parts 1 and 2 of a 3 part series on page weight:

1 – understanding page weight:

2 – measuring page weight:

Very detailed case study of a performance rewrite for Base Creative:

Mobile first – perhaps the PC is the limiting factor in web tech:

Who initiates images downloads in IE?

Animation performance tips:


Practical ARIA examples:

Accessibility resources:

21st May was Global Accessibility Awareness Day. Videos of the talks given will soon be available at

Design and UX

The 10 commandments of good web form design:

One from the archives: applying good design principles to the humble airline boarding pass:

“Hamburger” menus mystify most people (BBC):

Hamburger wars, a presentation by Michael Ryan:

Brad Frost’s call-to-arms:

Fantastic article about why design is everyone’s responsibility: (remember: design is not just how it looks, but how it works)

Sometimes we need to slow users down a bit:

Gerry McGovern say it like it is:

UX is UI:

Conducting an interface inventory:

Using Consistency To Improve The User Experience Across Desktop And Mobile :

Functional animations in UX design:

Code For America style guide (love the musical note values for layout):

Progressive enhancement

Myth-busting progressive enhancement:

Progressive enhancement for non-online experiences, in this example an airport:

The true cost of progressive enhancement:

Jeremy Keith (my hero) hits the nail on the head with regard to browser support:


Solved by Flexbox – examples using Flexbox to implement tricky common layouts:

10 principles for effective front-end development by Harry Roberts:

JavaScript for Cats: If a cat can learn JavaScript then so can you.

Also: Good (re)introduction to JavaScript:

I’ve only just heard of this comic, but it’s a goodie:

Thoughts on migrating to a microservices architecture:

“Browserhacks is an extensive list of browser specific CSS and JavaScript hacks”:

Christian Heilmann (from Microsoft) video presentation about using the latest JavaScript features without breaking everything:

This is so true; curiosity is a highly-important part of being a good developer:

A developer at Twitter talks about technical debt:

Free ebooks from Microsoft:

An introduction to graphical effects in CSS:

PPK lights a fire under web developers’ current obsession with tools:


I’m not sure of the usefulness of this, but the idea is good:

Guide to online research and testing tools:

In other news

A Qualitative Study of Internet Non-Use in Great Britain and Sweden (PDF) :

Remember the 5K competition? I do, and it was 15 years ago! Sheesh, I’m old…

Fantastic guide to the WWW from the BBC:

Incognitube: the least watched YouTube videos:

Wednesday is Link Day

Here we are again, a lovely set of links for you to enjoy.


A beginners guide to high-performance website (free 89-page course):

Think you know web performance? Take the quiz: (but check out the leaderboard, some Very Clever People on there)

Open source performance dashboard:

Performance bookmarklet, Chrome and Firefox extension:

Free course on browser rendering optimization:–ud860

More weight doesn’t mean more wait: but this does not mean that page weight doesn’t matter

Tips for surviving Google’s “Mobilegeddon”:

Design and accessibility

Revisiting the Priority+ pattern: (also contains links to other useful navigation patterns)

There is no fold:

Practical ARIA examples:

Accessibility is not what you think:

In search of a living design system: (contains great examples)

Using flexbox today:

10 methods for optimizing your forms for mobile devices:

Web tech

There’s a new browser on the block:

Microsoft have launched a new developer site specifically about their new Edge browser:

Visual Studio 2015 now has a network tool:

Build cross-platform desktop apps with web technologies:


Think of starting your own software company? Here’s the handbook:

Clarifying what is meant by “minimum viable product”: (scroll down to the article named “It’s called ‘ship’ not ‘sh*t’” – the email system doesn’t like profane language)

“There is a difference in how well businesses decision makers think industries are able to provide application technologies and how well consumers believe the same industries are actually delivering”: by the very, very clever Gerry McGovern

The one-minute test: a great idea for the end of any meeting

The web’s grain by Frank Chimero: (I put this under “business” as it’s something that managers should read so they understand what the web is really about)

A/A testing: – important points about “statistically significant” numbers


Reference for HTML characters:

Package a web app as a native app across Android, iOS and Windows:

Explore and master Chrome DevTools:

9 truths that computer programmers know that most people don’t:

Progressive enhancement with handlers and enhancers: (bonus link:

And finally…

Pay a granny to knit for you:

Saturday is Link Day

For several years I have been sharing links with work colleagues, giving my emails the snazzy name of ” is Link Day!”. The day, of course, is the day I send the email. I have been silly in not also sharing these links on my blog, not because of the thousands of regular reads I have (ha!) but because I regularly find really useful resources I easily forget about. So, without further ado, is my latest Link Day:

Performance/UX/Responsive design

Google have expanded their Web/Fundamentals section with great information on website performance:

Incredibly detailed case study of a performance audit for several sites by speed genius Paul Irish:

Improve mobile UX with these six podcasts:

An oldie but a goodie. Leeds lad Harry Roberts gives a great overview of performance tweaks to make on websites:

The BBC news site is now fully responsive:

Presentation by Bruce Lawson on responsive images: (can’t find a video, sorry)

Jeffrey Zeldman on progressive enhancement, and what it means for wearables:

Oh my word, Kathy Sierra has a new book out: (here’s a trailer video:

Lots of performance tooling resources:

Strategies for staying on top of web performance:


There is ample evidence to suggest that increasing accessibility of a website increases interaction and conversion. Here’s a list of sites that get accessibility right:

Penman Ross (16 years old!) nails why progressive enhancement matters:

Yet another company in a lawsuit over web accessibility:


Anna Debenham has put together a great set of resources about Style Guides:

A set of lovely loaders in pure CSS:

Huge set of design patterns for inspiration:

“A collaborative research project aimed at designing better tools and practices for learning web development”:


Free course on JavaScript design patterns:

Interactive tutorial and reference site for the Markdown formatting language:

If you want to get into Angular don’t forget accessibility:

Good writeup of use of flexbox for a site header:

Open source book on JavaScript development:

Business, teamwork and general interest

We know strategy is important, and execution of that strategy more important still. So why do they often unravel? Contains the great line “no Gantt chart survives contact with reality”.

Don’t say the solution is easy until you’ve worked out what the problem is:

The illusion of free: an essay by Laura Kalbag:

And finally

“A website should be so easy to use a drunk user could use it”. This guy will test that for you:

You may not have heard of “the mother of all demos” (fascinating story: but it’s now an opera:

“Public shaming as a blood sport has to stop”. Monica Lewinsky on the price of shame:

BusinessTown, inspired by Richard Scarry:

Submarine cable map 2015:

Spotlight: jQuery plugin

Recently I worked on a website help system, the main feature of which was to highlight particular elements on areas of the page. You know the kind of thing: ‘Click the highlighted search button to search your data’. The designs I was given showed the web page covered by a semi-transparent grey overlay, except for the areas that needed highlighting.

Here’s the problem. The shapes of the un-highlighted bits weren’t just rectangles; they were circles. So my immediate idea of using a bunch of absolutely-positioned <div> elements with opacity:0.6 wasn’t going to cut it.

I decided to use the <canvas> element, and after some digging found this excellent page on the Mozilla developer docs site that explains the different modes available for compositing multiple shapes in a single canvas element. This was the answer.

<canvas> is supported by IE9 and above, which was acceptable for the project I was working on. If you need support for older IEs then this looks like a good solution.

Anyway, I thought this kind of approach might be useful for others so I’ve written a small jQuery plugin called Spotlight which allows you to put a spotlight on elements on your page. See a quick demo here.

See the plugin on GitHub.