Practising Code. Like I’m Practising Drums.

How I apply the methods that I use for improving my knowledge and ability of drumming, to learning, and becoming better at coding and creating for email.

For the past year, I’ve been applying a method of learning that I adapted from a brilliant educator and drummer called Mike Johnston. He created it for learning drums, but it can be applied to practising all art forms. Code too…

I first heard him talk about it on the Modern Drummer podcast probably over a year ago, and I have tried to apply a similar process to my own personal development for coding/creating emails. I’ve recently started playing drums again, applying the same approach to that.

I don’t consider myself to be a great coder (or a great drummer either), I do my thing, I’m rarely happy with any of it, or myself. I put things out there, but the paranoia I go through once it’s posted is ridiculous. Imposter syndrome is part of my mind-set and I don’t think that will change anytime soon. But I feel in the past 10 months in particular, since adapting Mike’s method to how I learn to code, I’ve made significant steps forward, and grown in confidence since I started thinking and “practising” in this way. My ability and knowledge is vastly improved, and my creativity has seen a significant boost. And I’ve had more enjoyment and motivation to improve.

The timeline of me working this way all ties in with me creating things like the Sonic game concepts, Alien interactive email, the methods used in the development of the Fargo email, and eventually what became “Faux-Video” code, the latter two examples becoming actual work for clients as I worked out how to utilise what i had learned. And I’m largely sharing this I’ve just completed building this, (open in Chrome or Safari) which I’d see as somewhat of a culmination of all the other builds.

With all of the concepts i created, I’m essentially practising.

Mackbook n’ Drums

What do you want?

The first thing I started to do is think about what I like doing, where I feel my strengths and weaknesses are, and what I want to achieve.

It’s an obvious, simple start but narrowing it down can really help. With both code and drumming, there is TOO MUCH to learn at once, and it takes time... time i don’t have. Chances are you won’t learn everything and you won’t enjoy everything. Get something down that matters to you, build on that and move-on.

So for me, I could be spending my time focussing on the speed of my drum rudiments and playing while reading from charts. Actually I’m more interested in groove, and independence, and how I can use the kit more creatively, so I focus on that. With email code I could be looking hacks, or the making my code the lightest it can be, or learning various ESP quirks etc... But actually I’m much more interested in animation, and CSS, learning more about design — and actually by proxy the other things will come along with it.

Everything is practice

It’s important that you acknowledge that everything you do related to that topic is “Practice”. Chances are if you’re interested, you’re paying attention and learning from it. It’s knowledge. So for code; reading blog posts, watching talks, discussion forums, conferences etc…

Mike’s Method

Mike created a 4 stage practice method. I’ll roughly try to explain his method, and give an example of how I now apply to my current drumming practice routine, and then explain how I’ve re-applied and slightly adjusted that to help my email coding and creativity over the past 9+months.

image — Mike Johnston —

10 mins — Non Creative

Anything that requires minimal thought. Something you can already do that you wish you could be more accomplished at. Everyday could be different, or you could spend each day on the same thing.


I know how to do a double stroke roll… but it’s not where I want it. So I practice that every day for 5 minutes on practice pad. And then I spend 5 minutes on something else.


For my coding I took this as the core things like base knowledge and information. I’d:

  • look at blog posts, articles, and code websites.
  • go on code school and go through some of their web coding exercises.
  • maybe start coding a simple layout and then test it out. Then start removing elements to try and make it lighter, or what if I did ‘this’ instead… for example what if I used min-width here, what if i moved it. What happens in Gmail?… I’m not particularly trying to solve anything I’m just exploring without it getting over complicated.
  • take something I’ve already built and try to make it lighter
  • a bit of house-keeping for files folders etc…
  • look in to things like “my process”.

Things that aren’t too taxing but get me thinking and get the brain working a little, and helps me keep up-to-date. It was during this exercise I started thinking about a “GANGA first” approach to builds.

image — Mike Johnston —

10 mins Creative

A small set of parameters, but you’re having to improvise, be creative inside the environment, inside those parameters.


I’m currently looking at the half-time shuffle and the fills or different bass drum patterns I could use. I can do a half-time shuffle quite nicely, but I feel pretty much trapped at kick, snare, and hi-hat once I’m in it. So I am currently experimenting with both different bass drum patterns, and trying various improvised fills, and getting back in to the groove cleanly, or even going past the bar and back.
Example from one of my heroes, Ash Soan.


I’ve altered this slightly, since I started, but it does change. When I first started it was ‘background images’, a long while ago, and applying the same principle.

Currently for me I’d call this bit ‘Problem Solving and Creative Solutions’ in terms of code. The hacks, and the different methods that could potentially solve a problem or provide a creative solution, and then using that as the basis for developing more of a creative parameter in the longer term.
So an example of that might be:

  • I want this text to encroach in the section above, but I can’t use negative margins?
  • If I use a full-bleed background what do I need to consider?
  • How can I use these Base64 fonts effectively?
  • How can I create a “Glitchy” effect on live text with only CSS?

So having warmed up both sides of our brain with 10 minutes on either side, we’ve also focussed on some core skills to do that, without becoming bogged down in it.

image — Mike Johnston —

25 mins — Main Focus

Mike says this a 25 minute section based on what is called. “The Pomodoro Method” which is famous technique for time-management, studying and productivity. Mike explains that numerous neuro-science studies indicate that the brain can only accept new information at it’s peak for 25 minutes at at-a-time before learning starts to deteriorate. (You can take a break for 10 minutes and then go again in 25 minute stints if you must, and that will help).

Your Main focus should be the thing that is most important to you at that time.


Currently, I am working on my independence, specifically on my left leg. From not playing for so long, the left side of the body has deteriorated from not keeping it up. And as I don’t have much/any kit time, so this is something I can do anywhere, with my hands and feet.


If there isn’t a specific client task going on, I like to have a side project going…. something to create that is just for me, that usually involves both design and build. So like the Sonic concept projects etc… they allow me to be creative, experimental, and challenged all at the same-time. So in all these projects I ensure I’m doing something I enjoy, but I’m also moving on from the last one, and going a little bit further in to the deep-end of a particular element, or a couple of elements, and introducing something new.

So to me although they’re different. Sonic, and the Interactive Christmas Tree (could be a great film) to Women’s Euro 2017 makes complete sense as there is a timeline and connection between one and the next, and the builds in between.

image — Mike Johnston —

20 mins — Practical Application


Mike talks about this as ‘artistic application’. So listening to a particular band, for a couple of songs, and thinking about how to mentally audition for them — what do they sound like? how should i play? Is the snare drum high or low pitched? Are there lots of fills or is it all “in the pocket”? What does this band want from it’s drum sound? Are there going to samples, click-pads and triggers needed to be involved?

So I think about all that, and the nuance. Visualising an audition for that band for two or three tracks, and give yourself a clearer picture.


I relate this to clients I work with or clients I’d want to work with. How I can apply these experiments to actual jobs, task, actual emails. What use could they get from it? What products do they have? Who would this do a good job for and why? What industries could make the most of this?
Whether or not thats the whole project, or one element from that project (for example it could be Faux-Video, or it could be just something as simple as a hover state effect on the CTA).

I also have a scamp ideas book/sketch pad which I scribble ideas in for concepts, often these are triggered by a particular brand.

That’s it…

It’s certainly an approach that has helped me, so probably can help you too. I don’t tend to go through the full routine everyday or every other day as I did a few months ago, but my job has changed in the past few months. 
My job often covers the first two parts pretty quickly and often everyday. But I’m also lucky that I get to focus on parts 3 and 4 regularly as well as part of my job. So when I’m in these scenarios I recognise it and think about this method in the workplace as well.

Some other things…

Hand code it.

Hand coding all this stuff makes a big difference to your learning. By coding it all piece by piece it will take longer, but you will get more from it. I’m not someone who can code quickly. But I enjoy coding… what I don’t enjoy doing is spending hours trying to fix a problem.

There is no quick solution to being able to play a fast, clean, accurate double stroke roll at, just time, patience and work. And each day I get a little bit better at it.

As you get more experienced and start to ‘get things down’, snippets etc… can help give you more time and focus on other things. I tend to just have a resources file that I continue to update.

Hear it from Mike himself…

There are some great videos of Mike talking about his 4 Stage practice method Stage 1, Stage 2, Stage 3, Stage 4. Even if you’re not a drummer, you should check them out, see if you can make this method work for you.

Thanks for reading.

I hope you like this, and might find it useful.

A huge thank you to Mike Johnston for not only coming up with this method and sharing it, but actually inspiring me to get back to my drums as well.

Kristian Robinson
Senior Email Developer 
CACI Email Studio